Sponsors page

opengento · Feb 2, 2025 · a0b78e0 · a0b78e0
1 parent cf71c6c
commit a0b78e0
Show file tree

Hide file tree

Showing 6 changed files with 162 additions and 12 deletions.
diff --git a/public/locales/fr/sponsors.json b/public/locales/fr/sponsors.json
@@ -1,74 +1,87 @@
 {
   "title": "Nos sponsors",
   "subtitle": "Acteurs incontournables de l’écosystème Magento et Adobe Commerce, ils rendent cet événement possible et offriront aux participants l'opportunité d'échanger en face à face avec des experts lors de cette journée exceptionnelle.",
+  "buttonCompany": "Site officiel",
   "actions": {
     "submitUrl": null,
     "seeAllUrl": "/sponsors"
   },
+  "types": {
+    "platinum": "Partenaire Platinium",
+    "gold": "Partenaire Gold",
+    "silver": "Partenaire Silver",
+    "bronze": "Partenaire Bronze"
+  },
+  "display": {
+    "platinum": "list",
+    "gold": "grid",
+    "silver": "grid",
+    "bronze": "grid"
+  },
   "partners": [
     {
       "type": "platinum",
       "name": "Adobe",
       "description": "",
       "caption": "Création d’expériences B2B et B2C personnalisées par l'IA basées sur notre plateforme composable et évolutive Adobe Commerce",
       "url": "https://www.adobe.com/",
-      "logoSrc": "/images/sponsors/adobe.svg"
+      "whiteLogoSrc": "/images/sponsors/adobe.svg"
     },
     {
       "type": "gold",
       "name": "Dn'D",
       "description": "Du conseil au delivery d'expériences digitales et E-Commerce sur mesure pour le B2C et le B2B. Dn’D accompagne depuis plus de 20 ans des entreprises issues de secteurs variés (retail, luxe, industrie...) dans la réussite de leurs projets IT, digitaux et E-Commerce.",
       "caption": "Du conseil au delivery d'expériences digitales et E-Commerce B2C & B2B",
       "url": "https://www.dnd.fr/",
-      "logoSrc": "/images/sponsors/dnd.svg"
+      "whiteLogoSrc": "/images/sponsors/dnd.svg"
     },
     {
       "type": "silver",
       "name": "PH2M",
       "description": "PH2M développe des solutions e-commerce sur mesure depuis 16 ans. Une équipe de 12 développeurs, contributeurs actifs Magento, Front-Commerce & Hyvä, avec plus de 240 projets réalisés.",
       "caption": "Agence e-commerce créatrice de solutions sur mesure pour marques et distributeurs",
       "url": "https://www.ph2m.com/",
-      "logoSrc": "/images/sponsors/ph2m.svg"
+      "whiteLogoSrc": "/images/sponsors/ph2m.svg"
     },
     {
       "type": "gold",
       "name": "Hyvä",
       "description": "Le frontend Magento le plus populaire avec 5,000 sites lives dans le monde, dont Somfy, Purina, Bultex ou Boucheron. Découvrez comment optimiser votre web perf tout en réduisant votre temps et coût de développement avec Hyvä",
       "caption": "Frontend hyper léger qui maximise votre web performance avec le minimum d'efforts",
       "url": "https://www.hyva.io/",
-      "logoSrc": "/images/sponsors/hyva.svg"
+      "whiteLogoSrc": "/images/sponsors/hyva.svg"
     },
     {
       "type": "gold",
       "name": "Ati4 Group",
       "description": "Ensemble, définissons, créons et développons votre projet e-commerce B2C ou B2B. Ati4 Group, c’est plus de 50 experts PIM et Adobe Commerce pour digitaliser et accélérer votre succès en ligne. Passion, partage et expertise sont au cœur de notre engagement.",
       "caption": "ATI4 Group, agence e-commerce, construisons ensemble votre réussite digitale",
       "url": "https://ati4group.com/",
-      "logoSrc": "/images/sponsors/ati4group.svg"
+      "whiteLogoSrc": "/images/sponsors/ati4group.svg"
     },
     {
       "type": "gold",
       "name": "Blackbird",
       "description": "La mission de Blackbird est d'aider les e-commerçants dans toutes les phases de leur projet : conseil stratégique, design créatif, conception et pilotage de plateformes e-commerce sur-mesure, accompagnement proche et réactif et formation.",
       "caption": "Blackbird (groupe Synolia), expert du digital et e-commerce depuis 2015",
       "url": "https://black.bird.eu/",
-      "logoSrc": "/images/sponsors/blackbird.svg"
+      "whiteLogoSrc": "/images/sponsors/blackbird.svg"
     },
     {
       "type": "gold",
       "name": "Platform.sh",
       "description": "",
       "caption": "Platform.sh: near-instant, full-stack previews that end staging delays",
       "url": "https://platform.sh/",
-      "logoSrc": "/images/sponsors/platformsh.svg"
+      "whiteLogoSrc": "/images/sponsors/platformsh.svg"
     },
     {
       "type": "gold",
       "name": "Datasolution",
       "description": "Partenaire Magento depuis 2008, DATASOLUTION accompagne les entreprises dans la conception, la mise en œuvre et l’optimisation de leurs plateformes e-Commerce B2C et B2B, en partenariat avec les principaux acteurs de l’écosystème Adobe/Magento",
       "caption": "Leader du e-Commerce B2B et de la gestion des données sur le marché",
       "url": "https://www.datasolution.fr/",
-      "logoSrc": "/images/sponsors/datasolution.svg"
+      "whiteLogoSrc": "/images/sponsors/datasolution.svg"
     }
   ]
 }
diff --git a/src/app/sponsors/page.tsx b/src/app/sponsors/page.tsx
@@ -6,7 +6,7 @@ import Container from "@/layouts/Container";
 import {useTranslation} from "react-i18next";
 import useDataProvider from "@/hooks/useDataProvider";
 import Push from "@/layouts/Push/Push";
-import TopBanner from "@/components/TopBanner/TopBanner";
+import SponsorListByType from "@/components/SponsorList/SponsorListByType";
 
 export default function Page() {
   const { t } = useTranslation(['sponsors']);
@@ -32,6 +32,7 @@ export default function Page() {
           {t('sponsors:subtitle')}
         </Typography>
       </ContentMedia>
+      <SponsorListByType items={sponsors}/>
       <Push />
     </Container>
   );

diff --git a/src/components/SponsorList/Sponsor/Sponsor.tsx b/src/components/SponsorList/Sponsor/Sponsor.tsx
@@ -1,7 +1,13 @@
-import {SponsorProps, SponsorTypeProps} from "@/components/SponsorList/Sponsor/Sponsor.types";
+import { SponsorTypeProps } from "@/components/SponsorList/Sponsor/Sponsor.types";
 import Image from "next/image";
 import classNames from "classnames";
 
+interface SponsorProps {
+  type: SponsorTypeProps
+  name: string,
+  logoSrc: string,
+}
+
 const Sponsor = (sponsor: SponsorProps) => {
   const badgeWidth: number = 70;
   const badgeHeight: number = 80;

diff --git a/src/components/SponsorList/Sponsor/Sponsor.types.ts b/src/components/SponsorList/Sponsor/Sponsor.types.ts
@@ -5,4 +5,9 @@ export type SponsorProps = {
   type: SponsorType
   name: string,
   logoSrc: string,
+  whiteLogoSrc: string,
+  bannerSrc: string,
+  url: string,
+  description: string,
+  caption: string,
 };
diff --git a/src/components/SponsorList/SponsorList.tsx b/src/components/SponsorList/SponsorList.tsx
@@ -42,7 +42,7 @@ const SponsorList = ({ items }: { items: SponsorProps[] }) => {
 
   return (
     <BackgroundImage imagePath="/images/background/sponsors.png">
-      <Container size="large" className={"overflow-hidden"}>
+      <Container size="large">
         <div className="mt-12">
           <TopBanner
             title="Merci à nos sponsors"
@@ -74,7 +74,7 @@ const SponsorList = ({ items }: { items: SponsorProps[] }) => {
             <Sponsor
               type={sponsor.type}
               name={sponsor.name}
-              logoSrc={sponsor.logoSrc}
+              logoSrc={sponsor.whiteLogoSrc}
               key={key}
             />
           ))}

diff --git a/src/components/SponsorList/SponsorListByType.tsx b/src/components/SponsorList/SponsorListByType.tsx
@@ -0,0 +1,125 @@
+'use client';
+
+import { SponsorProps, SponsorTypeProps } from "@/components/SponsorList/Sponsor/Sponsor.types";
+import { useTranslation } from "react-i18next";
+import TopBanner from "@/components/TopBanner/TopBanner";
+import Image from "next/image";
+import Typography from "@/components/Typography/Typography";
+import ButtonLink from "@/components/ButtonLink/ButtonLink";
+import { IoIosArrowForward } from "react-icons/io";
+import classNames from "classnames";
+
+const SponsorListByType = ({ items }: { items: SponsorProps[] }) => {
+  const { t } = useTranslation(['sponsors']);
+
+  const sponsorListByType: Record<SponsorTypeProps, SponsorProps[]> =
+    items.reduce(
+      (
+        acc: Record<SponsorTypeProps, SponsorProps[]>,
+        sponsor: SponsorProps
+      ) => {
+        acc[sponsor.type].push(sponsor);
+
+        return acc;
+      },
+      {
+        platinum: [],
+        gold: [],
+        silver: [],
+        bronze: [],
+      }
+    );
+
+  const displayByType = t('sponsors:display', { returnObjects: true });
+
+  const renderSponsorSection = (
+    sponsorType: SponsorTypeProps,
+    sponsors: SponsorProps[],
+    display: string
+  ) => {
+    const wrapperClass = display === 'list'
+      ? 'flex flex-col'
+      : 'grid grid-cols-1 md:grid-cols-2';
+    const boxClass = display === 'list'
+      ? 'flex flex-col md:flex-row md:items-center'
+      : 'flex flex-col';
+
+    return (
+      <>
+        <TopBanner
+          title={
+            <div className="flex flex-row justify-center gap-2">
+              <Image
+                src={`/images/badges/${sponsorType}.svg`}
+                alt={sponsorType}
+                width={35}
+                height={40}
+              />
+              {t(`sponsors:types.${sponsorType}`)}
+            </div>
+          }
+          backgroundImage="/images/bg-gradiant-purple.jpg"
+        />
+        <div className={classNames(
+          wrapperClass,
+          "gap-8 mb-10"
+        )}>
+          {sponsors.map((sponsor, index) => (
+            <div
+              key={index}
+              className={classNames(
+                "bg-white rounded-3xl p-6 gap-8",
+                boxClass
+              )}
+            >
+              <Image
+                src={sponsor.bannerSrc}
+                alt={sponsor.name}
+                width={606}
+                height={280}
+                className="rounded-3xl object-cover"
+              />
+              <div className="flex flex-col gap-4">
+                <Image
+                  src={sponsor.logoSrc}
+                  alt={sponsor.name}
+                  width={100}
+                  height={30}
+                />
+                <Typography color="dark">
+                  {sponsor.description}
+                </Typography>
+                <ButtonLink
+                  variant="secondary-invert"
+                  href={sponsor.url}
+                  target="_blank"
+                  rel="noopener"
+                  iconPosition="right"
+                  icon={<IoIosArrowForward />}
+                >
+                  {t('sponsors:buttonCompany')}
+                </ButtonLink>
+              </div>
+            </div>
+          ))}
+        </div>
+      </>
+    );
+  };
+
+  return (
+    <>
+      {Object.keys(sponsorListByType).map((sponsorType) => (
+        <>
+          {renderSponsorSection(
+            sponsorType,
+            sponsorListByType[sponsorType],
+            displayByType[sponsorType]
+          )}
+        </>
+      ))}
+    </>
+  );
+};
+
+export default SponsorListByType;