diff --git a/public/images/pattern_popin.svg b/public/images/pattern_popin.svg new file mode 100644 index 0000000..035b6c1 --- /dev/null +++ b/public/images/pattern_popin.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx index 12a8d98..b65d234 100644 --- a/src/components/Modal/Modal.tsx +++ b/src/components/Modal/Modal.tsx @@ -43,18 +43,19 @@ const Modal = ({ isOpen, onClose, children }: ModalProps) => { />
-
+
-
{children}
+
{children}
+
diff --git a/src/components/Speakers/Speaker/SpeakerPopIn.tsx b/src/components/Speakers/Speaker/SpeakerPopIn.tsx index f6e98d5..825f4e5 100644 --- a/src/components/Speakers/Speaker/SpeakerPopIn.tsx +++ b/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 ( -
- {/* */} - test -
+ ); }; diff --git a/src/components/Speakers/Speaker/SpeakerPopInContent.tsx b/src/components/Speakers/Speaker/SpeakerPopInContent.tsx new file mode 100644 index 0000000..3bb3c21 --- /dev/null +++ b/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 ( +
+ {/* Speaker info section */} +
+
+ {speaker.name} +
+ + + +
+
+
+
+ Company + + {speaker.company} + +
+ + {speaker.role} + + + {speaker.name} + +
+
+ + {/* Biography text */} + + {speaker.biography} + + + {/* Sessions section */} + {speaker.sessions?.map((session, index) => ( +
+
+
+ + {session.title} + +
+ {/* Room */} + {session.room} + | + {session.start} + | + {session.end} +
+
+
+ {session.tags.map((tag, tagIndex) => ( + + + {tag.toUpperCase()} + + + ))} +
+
+
+ +
+
+ ))} +
+ ); +}; + +export default SpeakerPopInContent; diff --git a/src/components/Speakers/Speaker/SpeakerProps.ts b/src/components/Speakers/Speaker/SpeakerProps.ts index 6c0710f..30ef560 100644 --- a/src/components/Speakers/Speaker/SpeakerProps.ts +++ b/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[]; }; diff --git a/src/components/Speakers/SpeakersList.tsx b/src/components/Speakers/SpeakersList.tsx index 7e161ff..2fbc2d5 100644 --- a/src/components/Speakers/SpeakersList.tsx +++ b/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(null); - const [selectedSpeaker, setSelectedSpeaker] = React.useState( - null - ); + const [selectedSpeaker, setSelectedSpeaker] = + React.useState(null); const handleSpeakerClick = (speaker: SpeakerProps) => { setSelectedSpeaker(speaker); @@ -45,12 +44,21 @@ const SpeakersList = ({speakers}: SpeakersListProps) => {
- Découvrir les speakers +
+ + Voir tout + +
+
+ + Découvrir les speakers + +
diff --git a/src/components/SponsorList/SponsorList.tsx b/src/components/SponsorList/SponsorList.tsx index 594922e..c1d04ae 100644 --- a/src/components/SponsorList/SponsorList.tsx +++ b/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 = + items.reduce( + ( + acc: Record, + sponsor: SponsorProps + ) => { + acc[sponsor.type].push(sponsor); - const sponsorListByType: Record = items.reduce( - ( - acc: Record, - 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 ( - +
- - Devenir sponsor - Voir tous les sponsors + + + Devenir sponsor + +
+ + Voir tous les sponsors + +
+
+ + Voir tout + +
-
    +
      {sortedSponsors.map((sponsor: SponsorProps, key: number) => ( - ))}
    diff --git a/src/components/TopBanner/TopBanner.tsx b/src/components/TopBanner/TopBanner.tsx index 69c3360..c8fd145 100644 --- a/src/components/TopBanner/TopBanner.tsx +++ b/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 = ( -
    +
    {title} @@ -34,7 +34,10 @@ const TopBanner = ({ -
    diff --git a/src/data/speakers.json b/src/data/speakers.json index 3851ecd..9129fce 100644 --- a/src/data/speakers.json +++ b/src/data/speakers.json @@ -11,7 +11,24 @@ "title": "lorem ipsum", "company": "Adobe", "role": "Head of Commerce for Western Europe", - "image": "/images/speakers/speaker.png" + "image": "/images/speakers/speaker.png", + "biography": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.", + "sessions": [ + { + "title": "Utilisation de l'IA dans le parcours d'achat du client", + "room": "Salle Orion", + "start": "9h00", + "end": "10h30", + "tags": ["Ouverture", "technique", "Expertise"] + }, + { + "title": "Utilisation de l'IA dans le parcours d'achat du client", + "room": "Salle Orion", + "start": "9h00", + "end": "10h30", + "tags": ["Ouverture", "technique", "Expertise"] + } + ] }, { "id": 2, diff --git a/src/layouts/Header/Header.tsx b/src/layouts/Header/Header.tsx index b0f2601..e616c1b 100644 --- a/src/layouts/Header/Header.tsx +++ b/src/layouts/Header/Header.tsx @@ -3,22 +3,22 @@ import Logo from "@/components/Logo/Logo"; import Navigation from "./Navigation/Navigation"; import Container from "../Container"; import ButtonLink from "@/components/ButtonLink/ButtonLink"; -import {FaTicketAlt} from "react-icons/fa"; +import { FaTicketAlt } from "react-icons/fa"; import React from "react"; const Header = () => { const HeaderContent = () => ( -
    +
    -
    +
    - +
    -
    - +
    +
    -
    +
    { ); return ( -
    -
    +
    +
    - +
    -
    - +
    +
    ); diff --git a/src/layouts/Header/Navigation/Navigation.tsx b/src/layouts/Header/Navigation/Navigation.tsx index eaa12b5..789fbfe 100644 --- a/src/layouts/Header/Navigation/Navigation.tsx +++ b/src/layouts/Header/Navigation/Navigation.tsx @@ -1,21 +1,21 @@ "use client"; -import {useState} from "react"; +import { useState } from "react"; import Link from "next/link"; const Navigation = () => { const [isMenuOpen, setIsMenuOpen] = useState(false); const menuItems = [ - {label: "Programme", href: "/#programs"}, - {label: "Speakers", href: "/#speakers"}, - {label: "Sponsors", href: "/#sponsors"}, - {label: "Préparer ma venue", href: "/#place"}, - {label: "FAQ & Contact", href: "/#faq"}, + { label: "Programme", href: "/#programs" }, + { label: "Speakers", href: "/#speakers" }, + { label: "Sponsors", href: "/#sponsors" }, + { label: "Préparer ma venue", href: "/#place" }, + { label: "FAQ & Contact", href: "/#faq" }, ]; return (
    -