Merge pull request #75 from isaacdemeers/Getting-Started

Getting started

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "framer-motion": "^11.13.5",
     "gsap": "^3.12.5"
   }
 }

pwa/app/gettingstarted/page.tsx

@@ -1,8 +1,38 @@
+"use client"
+
+import Image from "next/image"
+import Background from "@images/bg.svg"
+import { useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
 
 export default function Page() {
+
+    const steps = [
+        { title: "Créer un événement", description: "Créez un événement pour commencer à planifier vos événements." },
+        { title: "Inviter des amis", description: "Invitez vos amis à l'événement pour les encourager à venir." },
+        { title: "Suivre l'avancée", description: "Suivez l'avancée de l'événement et les invitations envoyées." },
+    ]
+
+
     return (
-        <div>
-            <p>PlanIt est un calendrier partagé pour planifier vos événements.</p>
-        </div>
+        <section className="w-screen h-screen flex items-center justify-center relative">
+            <Image src={Background} alt="Background" className="absolute top-0 left-0 w-full h-full" />
+            <div className="w-screen h-screen bg-slate-100 bg-opacity-65  backdrop-blur-3xl flex items-center justify-center">
+                <div className="flex items-center justify-center bg-white bg-opacity-20 backdrop-blur-3xl w-1/2 h-1/2 rounded-3xl shadow-2xl">
+                    <ul>
+                        {steps.map((step, index) => (
+                            <li key={index}>
+                                <Button>
+                                    {step.title}
+                                </Button>
+                            </li>
+                        ))}
+                    </ul>
+
+                </div>
+            </div>
+        </section>
     );
-}
+}
+

pwa/package.json

@@ -36,6 +36,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.5.1",
     "formik": "^2.4.6",
     "isomorphic-unfetch": "^4.0.2",
     "lucide-react": "^0.452.0",

pwa/src/components/calendar/calendar.tsx

@@ -23,21 +23,21 @@ const randomColor = () => {
 
 // Add this function before the Calendar component
 function transformEvents(events: any[]) {
-    console.log(events);
+    console.log("Events before transform:", events);  // Pour debug
     return events.map(event => ({
-        id: event.id,
+        id: event.eventId || event.id,  // Utiliser eventId ou id s'il existe
         title: event.title,
-        start: event.datestart.replace(' ', 'T'),  // Convert "2024-11-26 08:39:00" to "2024-11-26T08:39:00"
+        start: event.datestart.replace(' ', 'T'),
         end: event.dateend.replace(' ', 'T'),
-        color: '#475569',  // Slate 600
-        extendedProps: {  // Store additional properties
+        color: '#475569',
+        extendedProps: {
             description: event.description,
             location: event.location,
             maxparticipant: event.maxparticipant,
             sharelink: event.sharelink,
             img: event.img,
             isPublic: event.isPublic,
-            id: event.id
+            id: event.eventId || event.id  // Ajouter aussi l'ID dans extendedProps
         }
     }));
 }
@@ -192,7 +192,7 @@ export function Calendar() {
                         };
 
                         let event = {
-                            id: info.event.extendedProps.id,
+                            id: info.event.id || info.event.extendedProps.id,  // Utiliser l'ID de l'événement ou celui dans extendedProps
                             title: info.event.title,
                             image: info.event.extendedProps.img,
                             location: info.event.extendedProps.location,