Merge pull request #21 from opengento/speakers

Add Speakers popin

src/components/Modal/Modal.tsx

@@ -43,18 +43,19 @@ const Modal = ({ isOpen, onClose, children }: ModalProps) => {
       />
       <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 ${
+          className={`md:rounded-l-xl overflow-hidden w-full md: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">
+          <div className="relative h-full overflow-y-auto px-6 py-10 md:p-8 bg-camel ">
             <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 className="pb-6 md:pb-8">{children}</div>
+            <div className="fixed z-20 bottom-0 left-0 w-full h-9 bg-[url('/images/pattern_popin.svg')]"></div>
           </div>
         </div>
       </div>

src/components/Speakers/Speaker/SpeakerPopIn.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import Modal from "@/components/Modal/Modal";
-import {SpeakerProps} from "@/components/Speakers/Speaker/SpeakerProps";
+import { SpeakerProps } from "@/components/Speakers/Speaker/SpeakerProps";
+import SpeakerPopInContent from "./SpeakerPopInContent";
 
 interface SpeakerPopInProps {
   selectedSpeaker: SpeakerProps;
@@ -11,14 +12,11 @@ interface SpeakerPopInProps {
 const SpeakerPopIn = ({
   isOpen,
   onClose,
-  //selectedSpeaker,
+  selectedSpeaker,
 }: SpeakerPopInProps) => {
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
-      <div>
-        {/* <Speaker speaker={selectedSpeaker} /> */}
-        test
-      </div>
+      <SpeakerPopInContent speaker={selectedSpeaker} />
     </Modal>
   );
 };

src/components/Speakers/Speaker/SpeakerPopInContent.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import { SpeakerProps } from "@/components/Speakers/Speaker/SpeakerProps";
+import Image from "next/image";
+import Link from "next/link";
+import { FaLinkedinIn } from "react-icons/fa";
+import Typography from "@/components/Typography/Typography";
+import { PiCalendarPlus } from "react-icons/pi";
+
+interface SpeakerPopInContentProps {
+  speaker: SpeakerProps;
+}
+
+const SpeakerPopInContent = ({ speaker }: SpeakerPopInContentProps) => {
+  return (
+    <div className="speaker-popin-content flex flex-col gap-6">
+      {/* Speaker info section */}
+      <div className="flex gap-6">
+        <div className="relative">
+          <Image
+            src={speaker.image}
+            alt={speaker.name}
+            className="rounded-xl object-cover"
+            width={235}
+            height={235}
+          />
+          <div className="absolute bottom-2 left-2 flex gap-2 text-primary">
+            <Link
+              className="flex items-center justify-center w-10 h-10 bg-white rounded-full"
+              href="https://www.linkedin.com/company/meet-magento-france"
+              target="_blank"
+              rel="noopener"
+            >
+              <FaLinkedinIn size={16} />
+            </Link>
+          </div>
+        </div>
+        <div className="flex flex-col flex-col-reverse">
+          <div className="flex items-center gap-2">
+            <Image
+              src="/magento-icon.svg"
+              alt="Company"
+              width={20}
+              height={20}
+            />
+            <Typography variant="body2" weight="normal">
+              {speaker.company}
+            </Typography>
+          </div>
+          <Typography variant="subtitle2" weight="normal" className="italic">
+            {speaker.role}
+          </Typography>
+          <Typography variant="h3" weight="semibold" className="font-alt">
+            {speaker.name}
+          </Typography>
+        </div>
+      </div>
+
+      {/* Biography text */}
+      <Typography variant="body1" weight="normal">
+        {speaker.biography}
+      </Typography>
+
+      {/* Sessions section */}
+      {speaker.sessions?.map((session, index) => (
+        <div
+          key={index}
+          className="flex flex-col md:flex-row justify-between rounded-xl gap-6 p-6 bg-white"
+        >
+          <div className="flex flex-col gap-6">
+            <div className="flex flex-col gap-2">
+              <Typography variant="h4" weight="semibold">
+                {session.title}
+              </Typography>
+              <div className="flex items-center font-medium">
+                {/* <Image src={session.room} alt="Room" width={24} height={24} /> */}
+                <span>{session.room}</span>
+                <span className="mx-2">|</span>
+                <span>{session.start}</span>
+                <span className="mx-1">|</span>
+                <span>{session.end}</span>
+              </div>
+            </div>
+            <div className="flex gap-2">
+              {session.tags.map((tag, tagIndex) => (
+                <span
+                  key={tagIndex}
+                  className="px-3 py-1 rounded-md bg-secondary"
+                >
+                  <Typography
+                    variant="caption"
+                    weight="bold"
+                    className="text-white"
+                  >
+                    {tag.toUpperCase()}
+                  </Typography>
+                </span>
+              ))}
+            </div>
+          </div>
+          <div className="flex flex-col justify-end items-start md:items-end w-full">
+            <button className="bg-primary text-white px-4 py-2 rounded-lg flex items-center gap-2 rounded-xl w-fit">
+              <PiCalendarPlus size={24} className="text-white" />
+              <Typography
+                variant="body1"
+                weight="semibold"
+                className="text-white"
+              >
+                Ajouter à mon agenda
+              </Typography>
+            </button>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default SpeakerPopInContent;

src/components/Speakers/Speaker/SpeakerProps.ts

@@ -5,4 +5,14 @@ export type SpeakerProps = {
   company: string;
   role: string;
   image: string;
+  biography: string;
+  sessions: SessionProps[];
+};
+
+type SessionProps = {
+  title: string;
+  room: string;
+  start: string;
+  end: string;
+  tags: string[];
 };

src/components/Speakers/SpeakersList.tsx

@@ -12,14 +12,13 @@ import Speaker from "./Speaker/Speaker";
 import SpeakerPopIn from "./Speaker/SpeakerPopIn";
 import ButtonLink from "@/components/ButtonLink/ButtonLink";
 import { SpeakerProps } from "@/components/Speakers/Speaker/SpeakerProps";
-import {SpeakersListProps} from "@/components/Speakers/SpeakersListProps";
+import { SpeakersListProps } from "@/components/Speakers/SpeakersListProps";
 
-const SpeakersList = ({speakers}: SpeakersListProps) => {
+const SpeakersList = ({ speakers }: SpeakersListProps) => {
   const { width } = useWindowSize();
   const swiperRef = React.useRef<SwiperClass>(null);
-  const [selectedSpeaker, setSelectedSpeaker] = React.useState<SpeakerProps | null>(
-    null
-  );
+  const [selectedSpeaker, setSelectedSpeaker] =
+    React.useState<SpeakerProps | null>(null);
 
   const handleSpeakerClick = (speaker: SpeakerProps) => {
     setSelectedSpeaker(speaker);
@@ -45,12 +44,21 @@ const SpeakersList = ({speakers}: SpeakersListProps) => {
     <section className="speakers-list">
       <div className="mb-12">
         <TopBanner
-          title="Appel à speakers"
+          title="Les speakers"
           backgroundImage="/images/pattern_top-banner_speakers.svg"
           onPrevClick={handlePrev}
           onNextClick={handleNext}
         >
-          <ButtonLink variant="secondary" href="#speakers">Découvrir les speakers</ButtonLink>
+          <div className="md:hidden">
+            <ButtonLink variant="secondary" href="#speakers">
+              Voir tout
+            </ButtonLink>
+          </div>
+          <div className="hidden md:block">
+            <ButtonLink variant="secondary" href="#speakers">
+              Découvrir les speakers
+            </ButtonLink>
+          </div>
         </TopBanner>
       </div>
       <ClientOnly>

src/components/SponsorList/SponsorList.tsx

@@ -2,55 +2,75 @@
 
 import BackgroundImage from "@/components/BackgroundImage/BackgroundImage";
 import Sponsor from "@/components/SponsorList/Sponsor/Sponsor";
-import {SponsorProps, SponsorTypeProps} from "@/components/SponsorList/Sponsor/Sponsor.types";
-import {SponsorListProps} from "@/components/SponsorList/SponsorListProps";
+import {
+  SponsorProps,
+  SponsorTypeProps,
+} from "@/components/SponsorList/Sponsor/Sponsor.types";
+import { SponsorListProps } from "@/components/SponsorList/SponsorListProps";
 import Container from "@/layouts/Container";
 import TopBanner from "@/components/TopBanner/TopBanner";
 import React from "react";
 import ButtonLink from "@/components/ButtonLink/ButtonLink";
 
-const SponsorList = ({
-                       items
-                     }: SponsorListProps) => {
+const SponsorList = ({ items }: SponsorListProps) => {
+  const sponsorListByType: Record<SponsorTypeProps, SponsorProps[]> =
+    items.reduce(
+      (
+        acc: Record<SponsorTypeProps, SponsorProps[]>,
+        sponsor: SponsorProps
+      ) => {
+        acc[sponsor.type].push(sponsor);
 
-  const sponsorListByType: Record<SponsorTypeProps, SponsorProps[]> = items.reduce(
-    (
-      acc: Record<SponsorTypeProps, SponsorProps[]>,
-      sponsor: SponsorProps
-    ) => {
-      acc[sponsor.type].push(sponsor);
-
-      return acc;
-    },
-    {
-      platinum: [],
-      gold: [],
-      silver: [],
-      bronze: []
-    }
-  );
+        return acc;
+      },
+      {
+        platinum: [],
+        gold: [],
+        silver: [],
+        bronze: [],
+      }
+    );
   const sortedSponsors: SponsorProps[] = [
     ...sponsorListByType.platinum,
     ...sponsorListByType.gold,
     ...sponsorListByType.silver,
-    ...sponsorListByType.bronze
+    ...sponsorListByType.bronze,
   ];
 
   return (
     <BackgroundImage imagePath="/images/background/sponsors.png">
-      <Container size="large" className={'overflow-hidden'}>
+      <Container size="large" className={"overflow-hidden"}>
         <div className="mt-12">
-          <TopBanner title="Merci à nos sponsors" backgroundImage="/images/pattern_top-banner_speakers.svg">
-            <ButtonLink variant="secondary" href="#sponsors">Devenir sponsor</ButtonLink>
-            <ButtonLink variant="soft-pink" href="#sponsors">Voir tous les sponsors</ButtonLink>
+          <TopBanner
+            title="Merci à nos sponsors"
+            backgroundImage="/images/pattern_top-banner_speakers.svg"
+          >
+            <ButtonLink variant="secondary" href="#sponsors">
+              Devenir sponsor
+            </ButtonLink>
+            <div className="hidden md:block">
+              <ButtonLink variant="soft-pink" href="#sponsors">
+                Voir tous les sponsors
+              </ButtonLink>
+            </div>
+            <div className="md:hidden">
+              <ButtonLink variant="soft-pink" href="#sponsors">
+                Voir tout
+              </ButtonLink>
+            </div>
           </TopBanner>
         </div>
-        <ul className={'clear-both overflow-hidden -mx-1 mt-6 mb-9 md:mb-10 md:max-w-[1350px]'}>
+        <ul
+          className={
+            "clear-both overflow-hidden -mx-1 mt-6 mb-9 md:mb-10 md:max-w-[1350px]"
+          }
+        >
           {sortedSponsors.map((sponsor: SponsorProps, key: number) => (
-            <Sponsor type={sponsor.type}
-                     name={sponsor.name}
-                     logoSrc={sponsor.logoSrc}
-                     key={key}
+            <Sponsor
+              type={sponsor.type}
+              name={sponsor.name}
+              logoSrc={sponsor.logoSrc}
+              key={key}
             />
           ))}
         </ul>

src/components/TopBanner/TopBanner.tsx

@@ -1,4 +1,4 @@
-import React, {ReactNode} from "react";
+import React, { ReactNode } from "react";
 import Typography from "../Typography/Typography";
 import BackgroundImage from "../BackgroundImage/BackgroundImage";
 import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
@@ -23,7 +23,7 @@ const TopBanner = ({
   const { width } = useWindowSize();
   const bannerContent = (
     <ClientOnly>
-      <div className="top-banner-content flex flex-col md:flex-row justify-between items-center">
+      <div className="top-banner-content flex flex-wrap flex-row justify-between items-center gap-2">
         <Typography variant="h4" className="text-white" weight="normal">
           {title}
         </Typography>
@@ -34,7 +34,10 @@ const TopBanner = ({
               <button onClick={onPrevClick} className="p-2 rounded bg-white/20">
                 <IoIosArrowBack className="text-white" size={24} />
               </button>
-              <button onClick={onNextClick} className="p-2 rounded bg-white/20 ">
+              <button
+                onClick={onNextClick}
+                className="p-2 rounded bg-white/20 "
+              >
                 <IoIosArrowForward className="text-white" size={24} />
               </button>
             </div>