From 4f3c834f4d13a20b62b0537c81f8af5bfc0c5fcb Mon Sep 17 00:00:00 2001
From: Isrem_ <32309148+isaacdemeers@users.noreply.github.com>
Date: Tue, 10 Dec 2024 14:49:15 +0100
Subject: [PATCH 1/2] Gett

---
 pwa/app/gettingstarted/page.tsx | 65 ++++++++++++++++++++++++++++++++-
 pwa/package.json                |  1 +
 2 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/pwa/app/gettingstarted/page.tsx b/pwa/app/gettingstarted/page.tsx
index 9c90fbb..dc7b196 100644
--- a/pwa/app/gettingstarted/page.tsx
+++ b/pwa/app/gettingstarted/page.tsx
@@ -1,8 +1,69 @@
+"use client"
+
+import {
+    Carousel,
+    CarouselContent,
+    CarouselItem,
+    CarouselNext,
+    CarouselPrevious,
+} from "@/components/ui/carousel";
+import { abhayalibre, inter } from "@/lib/fonts";
+import Link from "next/link";
 
 export default function Page() {
+    const features = [
+        {
+            title: "Calendrier Partagé",
+            description: "Créez et partagez des événements avec vos amis, votre famille ou vos collègues.",
+            icon: "📅"
+        },
+        {
+            title: "Planification Simplifiée",
+            description: "Trouvez facilement le meilleur moment pour vos réunions et événements.",
+            icon: "✨"
+        },
+        {
+            title: "Notifications",
+            description: "Recevez des rappels pour ne jamais manquer un événement important.",
+            icon: "🔔"
+        },
+        {
+            title: "Synchronisation",
+            description: "Synchronisez vos événements sur tous vos appareils.",
+            icon: "🔄"
+        }
+    ];
+
+    return (
+        <div className="max-w-4xl mx-auto py-8 px-4 min-h-screen flex flex-col">
+            <Link href="/" className={`drop-shadow-lg text-3xl font-bold text-slate-600 w-full flex items-center justify-start ${abhayalibre.className}`}>
+                <p className="transition-all transition-300ms w-fit hover:scale-105 x hover:drop-shadow-md">PlanIt</p>
+            </Link>
+            <p className="text-xl mb-8">PlanIt est un calendrier partagé pour planifier vos événements simplement et efficacement.</p>
+
+            <div className="flex-1 flex items-center">
+                <Carousel className="w-full">
+                    <CarouselContent>
+                        {features.map((feature, index) => (
+                            <CarouselItem key={index}>
+                                <FeatureCard {...feature} />
+                            </CarouselItem>
+                        ))}
+                    </CarouselContent>
+                    <CarouselPrevious />
+                    <CarouselNext />
+                </Carousel>
+            </div>
+        </div>
+    );
+}
+
+function FeatureCard({ title, description, icon }: { title: string, description: string, icon: string }) {
     return (
-        <div>
-            <p>PlanIt est un calendrier partagé pour planifier vos événements.</p>
+        <div className="p-8 border rounded-lg shadow-sm hover:shadow-md transition-shadow h-[400px] flex flex-col items-center justify-center text-center">
+            <div className="text-6xl mb-6">{icon}</div>
+            <h3 className="text-2xl font-semibold mb-4">{title}</h3>
+            <p className="text-gray-600 text-lg">{description}</p>
         </div>
     );
 }
\ No newline at end of file
diff --git a/pwa/package.json b/pwa/package.json
index ca9f148..0253e9e 100755
--- a/pwa/package.json
+++ b/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",

From de492757869d3276b42757da1ab1913ec3fd145c Mon Sep 17 00:00:00 2001
From: Isrem_ <32309148+isaacdemeers@users.noreply.github.com>
Date: Tue, 10 Dec 2024 17:20:03 +0100
Subject: [PATCH 2/2] Fix

---
 package-lock.json                        | 44 +++++++++++++
 package.json                             |  1 +
 pnpm-lock.yaml                           | 60 +++++++++++++++++
 pwa/app/gettingstarted/page.tsx          | 83 ++++++++----------------
 pwa/public/images/bg.svg                 | 13 ++++
 pwa/public/images/f1.svg                 |  3 +
 pwa/public/images/f2.svg                 |  3 +
 pwa/public/images/f3.svg                 |  3 +
 pwa/public/images/f4.svg                 |  3 +
 pwa/src/components/calendar/calendar.tsx | 14 ++--
 10 files changed, 163 insertions(+), 64 deletions(-)
 create mode 100644 pnpm-lock.yaml
 create mode 100644 pwa/public/images/bg.svg
 create mode 100644 pwa/public/images/f1.svg
 create mode 100644 pwa/public/images/f2.svg
 create mode 100644 pwa/public/images/f3.svg
 create mode 100644 pwa/public/images/f4.svg

diff --git a/package-lock.json b/package-lock.json
index b3cffcf..56ec2ef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,14 +5,58 @@
   "packages": {
     "": {
       "dependencies": {
+        "framer-motion": "^11.13.5",
         "gsap": "^3.12.5"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.13.5.tgz",
+      "integrity": "sha512-rArI0zPU9VkpS3Wt0J7dmRxAFUWtzPWoSofNQAP0UO276CmJ+Xlf5xN19GMw3w2QsdrS2sU+0+Q2vtuz4IEZaw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^11.13.0",
+        "motion-utils": "^11.13.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/gsap": {
       "version": "3.12.5",
       "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.5.tgz",
       "integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==",
       "license": "Standard 'no charge' license: https://gsap.com/standard-license. Club GSAP members get more: https://gsap.com/licensing/. Why GreenSock doesn't employ an MIT license: https://gsap.com/why-license/"
+    },
+    "node_modules/motion-dom": {
+      "version": "11.13.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.13.0.tgz",
+      "integrity": "sha512-Oc1MLGJQ6nrvXccXA89lXtOqFyBmvHtaDcTRGT66o8Czl7nuA8BeHAd9MQV1pQKX0d2RHFBFaw5g3k23hQJt0w=="
+    },
+    "node_modules/motion-utils": {
+      "version": "11.13.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.13.0.tgz",
+      "integrity": "sha512-lq6TzXkH5c/ysJQBxgLXgM01qwBH1b4goTPh57VvZWJbVJZF/0SB31UWEn4EIqbVPf3au88n2rvK17SpDTja1A=="
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     }
   }
 }
diff --git a/package.json b/package.json
index fe49a72..911b4ee 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "framer-motion": "^11.13.5",
     "gsap": "^3.12.5"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..802e1e8
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,60 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      framer-motion:
+        specifier: ^11.13.5
+        version: 11.13.5
+      gsap:
+        specifier: ^3.12.5
+        version: 3.12.5
+
+packages:
+
+  framer-motion@11.13.5:
+    resolution: {integrity: sha512-rArI0zPU9VkpS3Wt0J7dmRxAFUWtzPWoSofNQAP0UO276CmJ+Xlf5xN19GMw3w2QsdrS2sU+0+Q2vtuz4IEZaw==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
+  gsap@3.12.5:
+    resolution: {integrity: sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==}
+
+  motion-dom@11.13.0:
+    resolution: {integrity: sha512-Oc1MLGJQ6nrvXccXA89lXtOqFyBmvHtaDcTRGT66o8Czl7nuA8BeHAd9MQV1pQKX0d2RHFBFaw5g3k23hQJt0w==}
+
+  motion-utils@11.13.0:
+    resolution: {integrity: sha512-lq6TzXkH5c/ysJQBxgLXgM01qwBH1b4goTPh57VvZWJbVJZF/0SB31UWEn4EIqbVPf3au88n2rvK17SpDTja1A==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+snapshots:
+
+  framer-motion@11.13.5:
+    dependencies:
+      motion-dom: 11.13.0
+      motion-utils: 11.13.0
+      tslib: 2.8.1
+
+  gsap@3.12.5: {}
+
+  motion-dom@11.13.0: {}
+
+  motion-utils@11.13.0: {}
+
+  tslib@2.8.1: {}
diff --git a/pwa/app/gettingstarted/page.tsx b/pwa/app/gettingstarted/page.tsx
index dc7b196..36b6995 100644
--- a/pwa/app/gettingstarted/page.tsx
+++ b/pwa/app/gettingstarted/page.tsx
@@ -1,69 +1,38 @@
 "use client"
 
-import {
-    Carousel,
-    CarouselContent,
-    CarouselItem,
-    CarouselNext,
-    CarouselPrevious,
-} from "@/components/ui/carousel";
-import { abhayalibre, inter } from "@/lib/fonts";
+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 features = [
-        {
-            title: "Calendrier Partagé",
-            description: "Créez et partagez des événements avec vos amis, votre famille ou vos collègues.",
-            icon: "📅"
-        },
-        {
-            title: "Planification Simplifiée",
-            description: "Trouvez facilement le meilleur moment pour vos réunions et événements.",
-            icon: "✨"
-        },
-        {
-            title: "Notifications",
-            description: "Recevez des rappels pour ne jamais manquer un événement important.",
-            icon: "🔔"
-        },
-        {
-            title: "Synchronisation",
-            description: "Synchronisez vos événements sur tous vos appareils.",
-            icon: "🔄"
-        }
-    ];
 
-    return (
-        <div className="max-w-4xl mx-auto py-8 px-4 min-h-screen flex flex-col">
-            <Link href="/" className={`drop-shadow-lg text-3xl font-bold text-slate-600 w-full flex items-center justify-start ${abhayalibre.className}`}>
-                <p className="transition-all transition-300ms w-fit hover:scale-105 x hover:drop-shadow-md">PlanIt</p>
-            </Link>
-            <p className="text-xl mb-8">PlanIt est un calendrier partagé pour planifier vos événements simplement et efficacement.</p>
+    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." },
+    ]
+
 
-            <div className="flex-1 flex items-center">
-                <Carousel className="w-full">
-                    <CarouselContent>
-                        {features.map((feature, index) => (
-                            <CarouselItem key={index}>
-                                <FeatureCard {...feature} />
-                            </CarouselItem>
+    return (
+        <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>
                         ))}
-                    </CarouselContent>
-                    <CarouselPrevious />
-                    <CarouselNext />
-                </Carousel>
+                    </ul>
+
+                </div>
             </div>
-        </div>
+        </section>
     );
 }
 
-function FeatureCard({ title, description, icon }: { title: string, description: string, icon: string }) {
-    return (
-        <div className="p-8 border rounded-lg shadow-sm hover:shadow-md transition-shadow h-[400px] flex flex-col items-center justify-center text-center">
-            <div className="text-6xl mb-6">{icon}</div>
-            <h3 className="text-2xl font-semibold mb-4">{title}</h3>
-            <p className="text-gray-600 text-lg">{description}</p>
-        </div>
-    );
-}
\ No newline at end of file
diff --git a/pwa/public/images/bg.svg b/pwa/public/images/bg.svg
new file mode 100644
index 0000000..691d157
--- /dev/null
+++ b/pwa/public/images/bg.svg
@@ -0,0 +1,13 @@
+<svg width="4836" height="3126" viewBox="0 0 4836 3126" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1167_132)">
+<path d="M1598.74 1703.84L3105.62 -482.368L3597.07 -44.554L1598.74 1703.84Z" fill="#E26F93"/>
+<ellipse cx="-175.108" cy="930.699" rx="671" ry="373" transform="rotate(26.4327 -175.108 930.699)" fill="#736FE2"/>
+<ellipse cx="709.5" cy="3371" rx="1380.5" ry="831" fill="#A1E26F"/>
+<path d="M3754.69 1513.93L6147.06 3089.22L4273.51 4330.98L3754.69 1513.93Z" fill="#6F7EE2"/>
+</g>
+<defs>
+<clipPath id="clip0_1167_132">
+<rect width="4836" height="3126" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/pwa/public/images/f1.svg b/pwa/public/images/f1.svg
new file mode 100644
index 0000000..c908953
--- /dev/null
+++ b/pwa/public/images/f1.svg
@@ -0,0 +1,3 @@
+<svg width="2761" height="1662" viewBox="0 0 2761 1662" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="1380.5" cy="831" rx="1380.5" ry="831" fill="#A1E26F"/>
+</svg>
diff --git a/pwa/public/images/f2.svg b/pwa/public/images/f2.svg
new file mode 100644
index 0000000..12b6bee
--- /dev/null
+++ b/pwa/public/images/f2.svg
@@ -0,0 +1,3 @@
+<svg width="1248" height="897" viewBox="0 0 1248 897" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="623.892" cy="448.699" rx="671" ry="373" transform="rotate(26.4327 623.892 448.699)" fill="#736FE2"/>
+</svg>
diff --git a/pwa/public/images/f3.svg b/pwa/public/images/f3.svg
new file mode 100644
index 0000000..c4da642
--- /dev/null
+++ b/pwa/public/images/f3.svg
@@ -0,0 +1,3 @@
+<svg width="2000" height="2187" viewBox="0 0 2000 2187" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.736048 2186.84L1507.62 0.63152L1999.07 438.446L0.736048 2186.84Z" fill="#E26F93"/>
+</svg>
diff --git a/pwa/public/images/f4.svg b/pwa/public/images/f4.svg
new file mode 100644
index 0000000..ad4f29f
--- /dev/null
+++ b/pwa/public/images/f4.svg
@@ -0,0 +1,3 @@
+<svg width="2394" height="2818" viewBox="0 0 2394 2818" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.689433 0.932239L2393.06 1576.22L519.514 2817.98L0.689433 0.932239Z" fill="#6F7EE2"/>
+</svg>
diff --git a/pwa/src/components/calendar/calendar.tsx b/pwa/src/components/calendar/calendar.tsx
index a83c0a5..6906324 100644
--- a/pwa/src/components/calendar/calendar.tsx
+++ b/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,