Move content data to specific json files

src/app/page.tsx

@@ -1,101 +1,25 @@
 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 SponsorList from "@/components/SponsorList/SponsorList";
 import Container from "@/layouts/Container";
 import Hero from "@/components/Hero/Hero";
 import Speakers from "@/components/Speakers/Speakers";
+import { promises as fs } from 'fs';
+import { SpeakersTypeProps } from "@/components/Speakers/SpeakersProps";
+import { SponsorProps } from "@/components/SponsorList/Sponsor/Sponsor.types";
+import { PlaceDataProps } from "@/components/Place/PlaceProps";
 
-export default function Home() {
-  const sponsors: SponsorProps[] = [
-    {
-      type: "platinum",
-      name: "Adobe",
-      logoSrc: "adobe.svg",
-    },
-    {
-      type: "gold",
-      name: "Dn'D",
-      logoSrc: "dnd.svg",
-    },
-    {
-      type: "gold",
-      name: "Hyvä",
-      logoSrc: "hyva.svg",
-    },
-    {
-      type: "gold",
-      name: "Ati4 Group",
-      logoSrc: "ati4group.svg",
-    },
-    {
-      type: "gold",
-      name: "Platform.sh",
-      logoSrc: "platformsh.svg",
-    },
-    {
-      type: "gold",
-      name: "Blackbird",
-      logoSrc: "blackbird.svg",
-    },
-    {
-      type: "gold",
-      name: "DATASOLUTION",
-      logoSrc: "datasolution.svg",
-    },
-    {
-      type: "silver",
-      name: "PH2M",
-      logoSrc: "ph2m.svg",
-    },
-    {
-      type: "silver",
-      name: "Sensefuel",
-      logoSrc: "sensefuel.svg",
-    },
-    {
-      type: "silver",
-      name: "PayPlug",
-      logoSrc: "payplug.svg",
-    },
-    {
-      type: "silver",
-      name: "Mollie",
-      logoSrc: "mollie.svg",
-    },
-    {
-      type: "silver",
-      name: "Spiriit",
-      logoSrc: "spiriit.svg",
-    },
-    {
-      type: "silver",
-      name: "Sutunam",
-      logoSrc: "sutunam.svg",
-    },
-    {
-      type: "bronze",
-      name: "Nosto",
-      logoSrc: "nosto.svg",
-    },
-    {
-      type: "bronze",
-      name: "Socloz",
-      logoSrc: "socloz.svg",
-    },
-    {
-      type: "bronze",
-      name: "Akeneo",
-      logoSrc: "akeneo.svg",
-    },
-  ];
+export default async function Home() {
+  const speakers: SpeakersTypeProps = JSON.parse(await fs.readFile(process.cwd() + '/src/data/speakers.json', 'utf8'));
+  const sponsors: SponsorProps[] = JSON.parse(await fs.readFile(process.cwd() + '/src/data/sponsors.json', 'utf8'));
+  const place: PlaceDataProps = JSON.parse(await fs.readFile(process.cwd() + '/src/data/place.json', 'utf8'));
 
   return (
     <div className="relative -top-[104px] left-0">
       <Hero />
       <div id="speakers">
-        <Speakers />
+        <Speakers data={speakers} />
       </div>
       <div id="sponsors">
         <SponsorList items={sponsors} />
@@ -119,7 +43,7 @@ export default function Home() {
               imagePosition="left"
               imageWidth="40%"
             >
-              <Place />
+              <Place place={place} />
             </ContentMedia>
           </div>
         </div>

src/components/ButtonLink/ButtonLink.tsx

@@ -80,7 +80,7 @@ const ButtonLink = ({
           target={target}
           rel={rel}
           className={classNames(
-            "inline-block group rounded-3xl font-semibold duration-300",
+            "inline-block w-fit group rounded-3xl font-semibold duration-300",
             variant === "primary" ? "p-[3px]" : paddingClass,
             variantClass[variant]
           )}>

src/components/Faq/Faq.tsx

@@ -35,7 +35,7 @@ const Faq = () => {
       question: "Comment puis-je acheter des billets pour l'événement ?",
       icon: <FaTicketAlt color="#FF7DD1" size={16}/>,
       answer:
-        "Les billets pour Meet Magento France 2025 seront bientôt disponibles ! Restez connectés.",
+        "Les billets pour Meet Magento France 2025 sont disponibles ! Rendez-vous sur la billeterie à partir du menu.",
     },
     {
       question:

src/components/Hero/Hero.tsx

@@ -14,13 +14,26 @@ const Hero = () => {
       <BackgroundImage className="h-screen w-full flex items-center justify-center"
                        imagePath="/images/bg-hero.jpg" priority>
         <Container size="small" className="pt-[104px]">
-          <div className="flex py-16">
-            <div>
-              <Typography variant="h2" color="light">Save the date !</Typography>
-              <Typography variant="h3" color="light">Meet Magento arrive en France</Typography>
-              <Typography color="light">
-                Rejoignez la communauté Magento et Adobe Commerce pour une journée d&apos;innovations, d&apos;échanges
-                et d&apos;expertise, à ne pas manquer !
+          <div className="flex py-16 gap-12">
+            <div className="flex flex-col gap-2">
+              <Typography
+                variant="h1"
+                color="light"
+                weight="semibold"
+              >
+                Save the date !
+              </Typography>
+              <Typography
+                variant="h2"
+                color="light"
+                weight="semibold"
+                underlineColor="primary-100"
+              >
+                Meet Magento arrive en France
+              </Typography>
+              <Typography color="light" className="mt-4 font-alt">
+                Rejoignez la communauté Magento et Adobe Commerce pour une journée d’innovations, d’échanges
+                et d’expertise, à ne pas manquer !
               </Typography>
             </div>
             <div className="hidden md:flex flex-wrap justify-center gap-8">

src/components/Place/Place.tsx

@@ -1,7 +1,10 @@
 import React from "react";
 import Typography from "../Typography/Typography";
+import ButtonLink from "@/components/ButtonLink/ButtonLink";
+import {IoIosArrowForward} from "react-icons/io";
+import {PlaceProps} from "@/components/Place/PlaceProps";
 
-const Place = () => {
+const Place = ({place}: PlaceProps) => {
   return (
     <div className="flex flex-col gap-4 md:gap-6 md:py-6">
       <div className="flex flex-col gap-4 ">
@@ -11,25 +14,27 @@ const Place = () => {
           weight="semibold"
           underlineColor="primary-100"
         >
-          L’Étoile Business Center
+          {place.title}
         </Typography>
         <div>
           <Typography variant="subtitle2" color="dark" weight="bold">
-            En plein coeur de Paris, à deux pas des Champs-Élysées
+            {place.subtitle}
           </Typography>
           <Typography variant="subtitle2" color="dark" weight="medium">
-            21-25 Rue Balzac, 75008 Paris
+            {place.address}
           </Typography>
         </div>
         <Typography variant="body1" color="dark" weight="normal">
-          Le 25 mars 2025, Meet Magento France se tiendra dans un cadre
-          d’exception : l’Étoile Business Center, à Paris. Situé à deux pas des
-          Champs-Élysées, ce lieu prestigieux, alliant élégance et modernité,
-          incarne la classe française. Son architecture lumineuse et ses espaces
-          raffinés en font l’écrin idéal pour une journée riche en échanges,
-          partages d’expériences et exploration des dernières innovations autour
-          de Magento et Adobe Commerce.
+          {place.description}
         </Typography>
+        <ButtonLink
+          variant="secondary-invert"
+          href={place.url}
+          iconPosition="right"
+          icon={<IoIosArrowForward />}
+        >
+          {place.label}
+        </ButtonLink>
       </div>
     </div>
   );

src/components/Place/PlaceProps.ts

@@ -0,0 +1,15 @@
+import {ReactNode} from "react";
+
+type PlaceType = {
+  title: ReactNode;
+  subtitle: ReactNode;
+  address: ReactNode;
+  description: ReactNode;
+  label: ReactNode;
+  url: string;
+};
+
+export type PlaceDataProps = PlaceType;
+export type PlaceProps = {
+  place: PlaceType;
+};

src/components/Speakers/Speaker/Speaker.tsx

@@ -2,17 +2,9 @@ import React from "react";
 import Image from "next/image";
 import useWindowSize from "@/hooks/useWindowSize";
 import { GrFormView } from "react-icons/gr";
+import { SpeakerProps } from "@/components/Speakers/Speaker/SpeakerProps";
 
-interface Speaker {
-  id: number;
-  name: string;
-  title: string;
-  company: string;
-  role: string;
-  image: string;
-}
-
-const SpeakerCard = ({ speaker }: { speaker: Speaker }) => (
+const SpeakerCard = ({ speaker }: { speaker: SpeakerProps }) => (
   <div className="text-black flex flex-col justify-center cursor-pointer">
     <div className="flex gap-2 mb-2">
       {/* <img
@@ -27,7 +19,7 @@ const SpeakerCard = ({ speaker }: { speaker: Speaker }) => (
   </div>
 );
 
-const Speaker = ({ speaker }: { speaker: Speaker }) => {
+const Speaker = ({ speaker }: { speaker: SpeakerProps }) => {
   const { width } = useWindowSize();
   return (
     <>

src/components/Speakers/Speaker/SpeakerProps.ts

@@ -0,0 +1,8 @@
+export type SpeakerProps = {
+  id: number;
+  name: string;
+  title: string;
+  company: string;
+  role: string;
+  image: string;
+};

src/components/Speakers/Speakers.tsx

@@ -4,12 +4,13 @@ import Typography from "../Typography/Typography";
 import SpeakersList from "./SpeakersList";
 import ButtonLink from "@/components/ButtonLink/ButtonLink";
 import { IoIosArrowForward } from "react-icons/io";
+import { SpeakersProps } from "@/components/Speakers/SpeakersProps";
 
-const Speakers = () => {
+const Speakers = ({data}: SpeakersProps) => {
   return (
     <Container size="large">
       <div className="speakers flex flex-col py-8 md:py-12 gap-12">
-        <SpeakersList />
+        <SpeakersList speakers={data.speakers} />
         <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">
@@ -19,28 +20,27 @@ const Speakers = () => {
                 weight="semibold"
                 underlineColor="secondary-100"
               >
-                Appel à speakers
+                {data.title}
               </Typography>
               <div className="flex flex-col">
                 <Typography variant="subtitle2" color="dark" weight="bold">
-                  Vous êtes expert du E-Commerce ou passionné de Magento ?
+                  {data.subtitle}
                 </Typography>
                 <Typography variant="subtitle2" color="dark" weight="medium">
-                  Partagez vos connaissances sur la scène de Meet Magento 2025
-                  France, le 25 mars à Paris.
+                  {data.description}
                 </Typography>
               </div>
             </div>
             <div className="bg-[url(/images/pattern_speakers.svg)] bg-cover flex items-center justify-center w-full h-64 p-5 md:h-auto md:w-1/2">
               <ButtonLink
                 variant="secondary"
-                href="https://forms.gle/M6Y8V2xP7PGw5VD8A"
+                href={data.registrationFormUrl}
                 target="_blank"
                 rel="noopener"
                 iconPosition="right"
                 icon={<IoIosArrowForward />}
               >
-                Rejoignez les conférenciers de MM25FR
+                {data.registrationLabel}
               </ButtonLink>
             </div>
           </div>