WIP sponsors page

public/locales/fr/menu.json

@@ -0,0 +1,9 @@
+{
+  "navigation": [
+    { "label": "Programme", "href": "/#programs" },
+    { "label": "Speakers", "href": "/#speakers" },
+    { "label": "Sponsors", "href": "/sponsors" },
+    { "label": "Préparer ma venue", "href": "/#place" },
+    { "label": "FAQ & Contact", "href": "/#faq" }
+  ]
+}

public/locales/fr/sponsors.json

@@ -1,7 +1,9 @@
 {
+  "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.",
   "actions": {
     "submitUrl": null,
-    "seeAllUrl": null
+    "seeAllUrl": "/sponsors"
   },
   "data": [
     {

src/app/sponsors/page.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import Typography from "@/components/Typography/Typography";
+import ContentMedia from "@/components/ContentMedia/ContentMedia";
+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";
+
+export default function Page() {
+  const { t } = useTranslation(['sponsors']);
+  const dataProvider = useDataProvider();
+  const sponsors = dataProvider.useSponsors()
+
+  return (
+    <Container className="flex flex-col gap-8 my-8">
+      <ContentMedia>
+        <Typography
+          variant="h1"
+          color="dark"
+          weight="semibold"
+          underlineColor="primary-100"
+          className="mb-2"
+        >
+          {t('sponsors:title')}
+        </Typography>
+        <Typography
+          color="dark"
+          className="mb-8"
+        >
+          {t('sponsors:subtitle')}
+        </Typography>
+      </ContentMedia>
+      <Push />
+    </Container>
+  );
+}

src/components/TopBanner/TopBanner.tsx

@@ -6,7 +6,7 @@ import useWindowSize from "@/hooks/useWindowSize";
 import ClientOnly from "@/helpers/ClientOnly";
 
 interface TopBannerProps {
-  title: string;
+  title: ReactNode;
   backgroundImage?: string;
   children?: ReactNode;
   onPrevClick?: () => void;

src/layouts/Header/Navigation/Navigation.tsx

@@ -1,22 +1,18 @@
 'use client';
+
 import { useState } from "react";
 import Link from "next/link";
+import {useTranslation} from "react-i18next";
 
 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" },
-  ];
+  const { t } = useTranslation(['menu']);
+  const menuItems = t('menu:navigation', { returnObjects: true });
 
   return (
     <div className="navigation">
       <nav className="hidden lg:flex items-center gap-8">
-        {menuItems.map((item) => (
+        {Array.isArray(menuItems) && menuItems.map((item) => (
           <Link
             key={item.href}
             href={item.href}
@@ -80,7 +76,7 @@ const Navigation = () => {
               </button>
             </div>
             <nav className="flex flex-col items-end px-8 gap-10">
-              {menuItems.map((item) => (
+              {Array.isArray(menuItems) && menuItems.map((item) => (
                 <Link
                   key={item.href}
                   href={item.href}