From fb225934fcd37d3a72e711a8b7ac768e8ed7c01e Mon Sep 17 00:00:00 2001
From: Thomas Catinaud Taris <tcatinaud-taris@greenspector.com>
Date: Wed, 15 May 2024 14:21:39 +0200
Subject: [PATCH 1/4] feat: prepare component

---
 src/components/Summary.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/Summary.tsx b/src/components/Summary.tsx
index f23cde843..2bb7f2823 100644
--- a/src/components/Summary.tsx
+++ b/src/components/Summary.tsx
@@ -21,7 +21,10 @@ const Summary = ({
   }
 
   return (
-    <div className={clsx(className, "bg-darkblue1 p-6 md:p-12 lg:py-20")}>
+    <nav
+      className={clsx(className, "bg-darkblue1 p-6 md:p-12 lg:py-20")}
+      aria-label="Navigation page"
+    >
       <div className="max-w-[1500px] mx-auto">
         <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 gap-y-8 lg:gap-y-14">
           {links.map((link, keyLink) => (
@@ -44,7 +47,7 @@ const Summary = ({
           ))}
         </ul>
       </div>
-    </div>
+    </nav>
   );
 };
 export default Summary;

From c6aa2fa84597bddf5adfcd2fc09495de3b571320 Mon Sep 17 00:00:00 2001
From: Thomas Catinaud Taris <tcatinaud-taris@greenspector.com>
Date: Wed, 15 May 2024 14:21:39 +0200
Subject: [PATCH 2/4] feat: prepare component

---
 src/components/Summary.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/Summary.tsx b/src/components/Summary.tsx
index f23cde843..2bb7f2823 100644
--- a/src/components/Summary.tsx
+++ b/src/components/Summary.tsx
@@ -21,7 +21,10 @@ const Summary = ({
   }
 
   return (
-    <div className={clsx(className, "bg-darkblue1 p-6 md:p-12 lg:py-20")}>
+    <nav
+      className={clsx(className, "bg-darkblue1 p-6 md:p-12 lg:py-20")}
+      aria-label="Navigation page"
+    >
       <div className="max-w-[1500px] mx-auto">
         <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 gap-y-8 lg:gap-y-14">
           {links.map((link, keyLink) => (
@@ -44,7 +47,7 @@ const Summary = ({
           ))}
         </ul>
       </div>
-    </div>
+    </nav>
   );
 };
 export default Summary;

From e5601e213ff39bc9aded9d624e296ce6c731988d Mon Sep 17 00:00:00 2001
From: Thomas Catinaud Taris <tcatinaud-taris@greenspector.com>
Date: Wed, 22 May 2024 14:18:23 +0200
Subject: [PATCH 3/4] feat: update summary links

---
 public/images/bottom-dark.svg |  3 ++
 src/app/dashboard/page.tsx    |  8 ++++
 src/app/layout.tsx            |  6 ++-
 src/components/IntroBlock.tsx |  6 +--
 src/components/Summary.tsx    | 90 +++++++++++++++++++++++++----------
 5 files changed, 85 insertions(+), 28 deletions(-)
 create mode 100644 public/images/bottom-dark.svg

diff --git a/public/images/bottom-dark.svg b/public/images/bottom-dark.svg
new file mode 100644
index 000000000..e118cba83
--- /dev/null
+++ b/public/images/bottom-dark.svg
@@ -0,0 +1,3 @@
+<svg width="50" height="37" viewBox="0 0 50 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 6L25 25L44 6" stroke="#13176F" stroke-width="16"/>
+</svg>
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 5a0c62744..e5e9da28a 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -20,6 +20,7 @@ const DashboardChart = dynamic(() => import("@/components/DashboardChart"), {
 
 const summary: SummaryLinksProps = [
   {
+    id: "intro",
     title: "Intro",
     sublinks: [
       {
@@ -41,6 +42,7 @@ const summary: SummaryLinksProps = [
     ],
   },
   {
+    id: "company",
     title: "Entreprises",
     sublinks: [
       {
@@ -62,6 +64,7 @@ const summary: SummaryLinksProps = [
     ],
   },
   {
+    id: "biondiversity",
     title: "Biodiversité",
     sublinks: [
       {
@@ -75,6 +78,7 @@ const summary: SummaryLinksProps = [
     ],
   },
   {
+    id: "health",
     title: "Human health",
     sublinks: [
       {
@@ -88,6 +92,7 @@ const summary: SummaryLinksProps = [
     ],
   },
   {
+    id: "animals",
     title: "Bien être animal",
     sublinks: [
       {
@@ -101,6 +106,7 @@ const summary: SummaryLinksProps = [
     ],
   },
   {
+    id: "climate",
     title: "Climat",
     sublinks: [
       {
@@ -110,6 +116,7 @@ const summary: SummaryLinksProps = [
     ],
   },
   {
+    id: "social",
     title: "Social",
     sublinks: [
       {
@@ -119,6 +126,7 @@ const summary: SummaryLinksProps = [
     ],
   },
   {
+    id: "alternative",
     title: "Alternatives",
     sublinks: [
       {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 67a9190ac..5acea8103 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { Metadata } from "next";
 import { Barlow_Condensed, Montserrat } from "next/font/google";
 import * as React from "react";
@@ -60,7 +61,10 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="fr" className={`${barlow.variable} ${montserrat.variable}`}>
+    <html
+      lang="fr"
+      className={clsx(barlow.variable, montserrat.variable, "scroll-smooth")}
+    >
       <body>
         <Navbar />
         <main>{children}</main>
diff --git a/src/components/IntroBlock.tsx b/src/components/IntroBlock.tsx
index d8c04cf0c..e1e2f8074 100644
--- a/src/components/IntroBlock.tsx
+++ b/src/components/IntroBlock.tsx
@@ -19,11 +19,11 @@ const IntroBlock = ({
     <header
       className={clsx(
         className,
-        "flex p-6 lg:p-12 text-red1 bg-pink1",
-        image ? "h-screen min-h-[300px]" : "min-h-[660px]",
+        "flex p-6 lg:p-12 text-red1 bg-pink1 min-h-[300px]",
+        image ? "h-screen min-h-[300px]" : "lg:pt-60",
       )}
     >
-      <div className="grid grid-rows-[1fr, auto, 1fr] w-full">
+      <div className="grid grid-rows-[1fr, auto, 1fr] w-full max-w-[1500px] mx-auto">
         {image && (
           <Image
             src="/images/salmon.svg"
diff --git a/src/components/Summary.tsx b/src/components/Summary.tsx
index 2bb7f2823..dc29095c1 100644
--- a/src/components/Summary.tsx
+++ b/src/components/Summary.tsx
@@ -1,7 +1,9 @@
 import clsx from "clsx";
-import React from "react";
+import React, { useState } from "react";
+import Image from "next/image";
 
 export type SummaryLinksProps = {
+  id: string;
   title: string;
   sublinks: {
     label: string;
@@ -16,37 +18,77 @@ const Summary = ({
   className?: string;
   links: SummaryLinksProps;
 }) => {
+  const [openMenu, setOpenMenu] = useState("");
+  const handleClickLink = (
+    e: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
+    id: string,
+  ) => {
+    e.preventDefault();
+    setOpenMenu(openMenu === id ? "" : id);
+  };
+
   if (!links) {
     return <></>;
   }
 
   return (
     <nav
-      className={clsx(className, "bg-darkblue1 p-6 md:p-12 lg:py-20")}
-      aria-label="Navigation page"
+      className={clsx(className, "p-6 lg:p-12 text-red1 bg-pink1")}
+      aria-label="page"
     >
-      <div className="max-w-[1500px] mx-auto">
-        <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 gap-y-8 lg:gap-y-14">
-          {links.map((link, keyLink) => (
-            <li key={`link-${keyLink}`}>
-              <p className="h4 pb-6 text-red1">{link.title}</p>
+      <ul
+        role="menubar"
+        className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 2xl:grid-cols-8 max-w-[1500px] mx-auto bg-white text-darkblue1 rounded-md"
+      >
+        {links.map((link, keyLink) => (
+          <li role="none" className="flex-1 relative" key={`link-${keyLink}`}>
+            <a
+              role="menuitem"
+              aria-haspopup="true"
+              aria-expanded={openMenu === link.id}
+              href={`#${link.sublinks[0].targetId}`}
+              onClick={(e) => handleClickLink(e, link.id)}
+              className={clsx(
+                "min-w-max flex justify-between p-4 hover:bg-red1 hover:text-white",
+                openMenu === link.id ? "bg-red1 text-white" : "",
+              )}
+            >
+              {link.title}
+              <Image
+                src="/images/bottom-dark.svg"
+                alt=""
+                width="10"
+                height="7"
+                className="ml-2"
+              />
+            </a>
 
-              <ul className="space-y-4">
-                {link.sublinks.map((sublink, keySubLink) => (
-                  <li key={`link-${keyLink}-${keySubLink}`}>
-                    <a
-                      href={`#${sublink.targetId}`}
-                      className="block p-4 md:px-8 md:py-5 bg-white text-darkblue1 font-bold text-xl hover:bg-red1"
-                    >
-                      {sublink.label}
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </li>
-          ))}
-        </ul>
-      </div>
+            <ul
+              role="menu"
+              className={clsx(
+                "sm:absolute z-10 w-full bg-white",
+                openMenu === link.id ? "block" : "hidden",
+              )}
+              aria-label={link.title}
+            >
+              {link.sublinks.map((sublink, keySubLink) => (
+                <li key={`link-${keyLink}-${keySubLink}`}>
+                  <a
+                    href={`#${sublink.targetId}`}
+                    role="menuitem"
+                    className="block p-2 hover:text-red1"
+                    onClick={(e) => {
+                      setOpenMenu("");
+                    }}
+                  >
+                    {sublink.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </li>
+        ))}
+      </ul>
     </nav>
   );
 };

From a3e06526e90a50a822b5096d25567f6238d75e96 Mon Sep 17 00:00:00 2001
From: Thomas Catinaud Taris <tcatinaud-taris@greenspector.com>
Date: Wed, 22 May 2024 14:20:05 +0200
Subject: [PATCH 4/4] fix: build

---
 src/components/Summary.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Summary.tsx b/src/components/Summary.tsx
index dc29095c1..a4adc76b0 100644
--- a/src/components/Summary.tsx
+++ b/src/components/Summary.tsx
@@ -1,6 +1,6 @@
 import clsx from "clsx";
-import React, { useState } from "react";
 import Image from "next/image";
+import React, { useState } from "react";
 
 export type SummaryLinksProps = {
   id: string;
@@ -77,7 +77,7 @@ const Summary = ({
                     href={`#${sublink.targetId}`}
                     role="menuitem"
                     className="block p-2 hover:text-red1"
-                    onClick={(e) => {
+                    onClick={() => {
                       setOpenMenu("");
                     }}
                   >