Merge remote-tracking branch 'origin/speakers'

package.json

@@ -15,7 +15,8 @@
     "next": "^15.1",
     "react": "^19.0",
     "react-dom": "^19.0",
-    "react-icons": "^5.4"
+    "react-icons": "^5.4",
+    "swiper": "^11.2.1"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

src/app/page.tsx

@@ -1,10 +1,11 @@
 import ContentMedia from "@/components/ContentMedia/ContentMedia";
 import Place from "@/components/Place/Place";
 import Faq from "@/components/Faq/Faq";
-import {SponsorProps} from "@/components/SponsorList/Sponsor/Sponsor.types";
+import { SponsorProps } from "@/components/SponsorList/Sponsor/Sponsor.types";
 import SponsorList from "@/components/SponsorList/SponsorList";
 import Container from "@/layouts/Container";
-import Hero from '@/components/Hero/Hero';
+import Hero from "@/components/Hero/Hero";
+import Speakers from "@/components/Speakers/Speakers";
 
 export default function Home() {
   const sponsors: SponsorProps[] = [
@@ -71,7 +72,7 @@ export default function Home() {
     {
       type: "silver",
       name: "Sutunam",
-      logoSrc: "sutunam.svg",
+      logoSrc: "Sutunam.svg",
     },
     {
       type: "bronze",
@@ -92,8 +93,9 @@ export default function Home() {
 
   return (
     <div className="">
-      <Hero/>
-      <SponsorList items={sponsors}/>
+      <Hero />
+      <Speakers />
+      <SponsorList items={sponsors} />
       <Container size="large">
         <div className="content-media-sections flex flex-col gap-12 py-12">
           <ContentMedia
@@ -103,14 +105,14 @@ export default function Home() {
             title="Besoin d'aide ?"
             titleUnderlineColor="purple-100"
           >
-            <Faq/>
+            <Faq />
           </ContentMedia>
           <ContentMedia
             imageUrl="/images/etoile_business_center.jpeg"
             imagePosition="left"
             imageWidth="40%"
           >
-            <Place/>
+            <Place />
           </ContentMedia>
         </div>
       </Container>

src/components/Modal/Modal.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { IoClose } from "react-icons/io5";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+const Modal = ({ isOpen, onClose, children }: ModalProps) => {
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    if (isOpen) {
+      setMounted(true);
+      document.body.style.overflow = "hidden";
+    } else {
+      const timer = setTimeout(() => {
+        setMounted(false);
+      }, 300);
+      document.body.style.overflow = "unset";
+      return () => clearTimeout(timer);
+    }
+
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen]);
+
+  if (!mounted) return null;
+
+  return (
+    <div
+      className={`fixed inset-0 z-50 transition-[visibility] duration-300 ${
+        isOpen ? "visible" : "invisible delay-300"
+      }`}
+    >
+      <div
+        className={`absolute inset-0 bg-black transition-opacity duration-300 ${
+          isOpen ? "bg-opacity-50" : "bg-opacity-0"
+        }`}
+        onClick={onClose}
+      />
+      <div className="flex items-start justify-end h-full">
+        <div
+          className={`w-full max-w-2xl h-full bg-white transform transition-transform duration-300 ease-in-out ${
+            isOpen ? "translate-x-0" : "translate-x-full"
+          }`}
+        >
+          <div className="relative h-full overflow-y-auto">
+            <button
+              onClick={onClose}
+              className="absolute top-4 right-4 p-2 rounded bg-purple"
+            >
+              <IoClose className="text-white" size={24} />
+            </button>
+            <div className="p-6">{children}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

src/components/Speakers/Speaker/Speaker.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import Image from "next/image";
+import useWindowSize from "@/hooks/useWindowSize";
+import { GrFormView } from "react-icons/gr";
+
+interface Speaker {
+  id: number;
+  name: string;
+  title: string;
+  company: string;
+  role: string;
+  image: string;
+}
+
+const SpeakerCard = ({ speaker }: { speaker: Speaker }) => (
+  <div className="flex flex-col justify-center cursor-pointer">
+    <div className="flex gap-2 mb-2">
+      {/* <img
+          src={`/${speaker.company.toLowerCase()}-logo.svg`}
+          alt={speaker.company}
+          className="h-6"
+        /> */}
+      <span className="text-sm">{speaker.company}</span>
+    </div>
+    <p className="font-semibold text-lg mb-1">{speaker.name}</p>
+    <p className="text-gray-600 italic">{speaker.role}</p>
+  </div>
+);
+
+const Speaker = ({ speaker }: { speaker: Speaker }) => {
+  const { width } = useWindowSize();
+  return (
+    <>
+      {width < 768 ? (
+        <div className="flex flex-row gap-2">
+          <Image
+            src={speaker.image}
+            alt={speaker.name}
+            width={135}
+            height={135}
+            className="min-w-[135px] rounded-full relative aspect-square overflow-hidden object-cover"
+          />
+          <SpeakerCard speaker={speaker} />
+        </div>
+      ) : (
+        <>
+          <div className="flex flex-col relative">
+            <Image
+              src={speaker.image}
+              alt={speaker.name}
+              width={165}
+              height={165}
+              className="min-w-[165px] rounded-full relative aspect-square overflow-hidden object-cover"
+            />
+            <div className="text-white font-semibold opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-primary w-fit px-4 py-2 rounded-full absolute bottom-0 left-1/2 -translate-x-1/2">
+              <div className="flex flex-row items-center gap-1">
+                <GrFormView size={20} className="text-white" />
+                <span className="text-sm">Biographie</span>
+              </div>
+            </div>
+          </div>
+          <SpeakerCard speaker={speaker} />
+        </>
+      )}
+    </>
+  );
+};
+
+export default Speaker;

src/components/Speakers/Speaker/SpeakerPopIn.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import Modal from "@/components/Modal/Modal";
+import Speaker from "./Speaker";
+
+interface SpeakerPopInProps {
+  selectedSpeaker: Speaker;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const SpeakerPopIn = ({
+  isOpen,
+  onClose,
+  selectedSpeaker,
+}: SpeakerPopInProps) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <div>
+        {/* <Speaker speaker={selectedSpeaker} /> */}
+        test
+      </div>
+    </Modal>
+  );
+};
+
+export default SpeakerPopIn;

src/components/Speakers/Speakers.tsx

@@ -0,0 +1,45 @@
+import Container from "@/layouts/Container";
+import React from "react";
+import Typography from "../Typography/Typography";
+import BackgroundImage from "../BackgroundImage/BackgroundImage";
+import SpeakersList from "./SpeakersList";
+const Speakers = () => {
+  return (
+    <Container size="large">
+      <div className="speakers flex flex-col py-8 md:py-12 gap-12">
+        <SpeakersList />
+        <div className="flex flex-col md:flex-row bg-secondary pt-3 md:pl-3 md:pt-0 rounded-xl overflow-hidden">
+          <div className="bg-white flex-1 flex flex-col md:flex-row">
+            <div className="flex flex-col gap-6 flex-1 py-8 px-6 md:py-12 md:px-16">
+              <Typography
+                variant="h3"
+                color="dark"
+                weight="semibold"
+                underlineColor="secondary-100"
+              >
+                Appel à speakers
+              </Typography>
+              <div className="flex flex-col">
+                <Typography variant="subtitle2" color="dark" weight="bold">
+                  Vous êtes expert du E-Commerce ou passionné de Magento ?
+                </Typography>
+                <Typography variant="subtitle2" color="dark" weight="medium">
+                  Partagez vos connaissances sur la scène de Meet Magento 2025
+                  France, le 25 mars à Paris.
+                </Typography>
+              </div>
+            </div>
+            <BackgroundImage
+              imagePath="/images/pattern_speakers.svg"
+              className="w-full md:w-1/2"
+            >
+              <div></div>
+            </BackgroundImage>
+          </div>
+        </div>
+      </div>
+    </Container>
+  );
+};
+
+export default Speakers;