feat: first review (#90)

* feat: first review * fixed: mutualize buttons * feat: update styles * fix: linting * fixed: scroll methodology links * feat: update og image --------- Co-authored-by: Thomas Catinaud Taris <[email protected]> Co-authored-by: gmguarino <[email protected]>
dataforgoodfr · Oct 20, 2024 · d65831d · d65831d
1 parent b785932
commit d65831d
Show file tree

Hide file tree

Showing 14 changed files with 216 additions and 104 deletions.
diff --git a/public/images/background-bombs.svg b/public/images/background-bombs.svg
diff --git a/public/images/dataforgood.svg b/public/images/dataforgood.svg
diff --git a/public/images/og.jpg b/public/images/og.jpg
diff --git a/public/images/salmon.svg b/public/images/salmon.svg
diff --git a/public/images/seastemik.avif b/public/images/seastemik.avif
diff --git a/public/images/seastemik.svg b/public/images/seastemik.svg
diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import clsx from "clsx";
-import Image from "next/image";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
 import * as React from "react";
@@ -38,11 +37,8 @@ const BombSection = () => {
   const t = useTranslations("story");
 
   return (
-    <section className="flex p-6 lg:p-12 min-h-[300px] h-screen text-red1 bg-darkblue1">
+    <section className="flex p-6 lg:p-12 min-h-[300px] h-screen text-red2 bg-darkblue1 bg-[url('/images/background-bombs.svg')] bg-[length:800px_400px] sm:bg-[length:1000px_500px] lg:bg-cover bg-no-repeat bg-center">
       <div className="grid grid-rows-[1fr, auto, 1fr] w-full">
-        <div className="row-start-2 self-center justify-self-center  px-6 max-w-[766px] max-h-full object-contain">
-          <Image src="/images/bombs.svg" alt="" width={766} height={616} />
-        </div>
         <div className="row-start-3 self-end items-left flex gap-2 items-end">
           <p className={clsx("h1", "max-w-[1500px] mx-auto w-full")}>
             {t("bomb")}
@@ -57,57 +53,55 @@ const ExplodeSection = () => {
   const t = useTranslations("story");
 
   return (
-    <section className="flex items-center justify-center p-6 lg:p-12 lg:pt-24 lg:pb-48 2xl:py-24 text-red1 bg-darkblue1 min-h-screen">
-      <div className="relative">
-        <p className="mb-6 md:mb-12 mx-auto text-xl xl:absolute xl:left-[310px] xl:bottom-[100px] 3xl:left-[600px] 3xl:bottom-[200px] xl:max-w-96 text-center text-white">
-          {t("explode.intro")}
-        </p>
-        <ul
-          className="
-        grid grid-cols-1 xs:grid-cols-2 gap-8 list-none bg-no-repeat bg-center
+    <section className="flex flex-col items-center justify-center p-6 lg:p-12 lg:pt-24 lg:pb-48 2xl:py-24 text-red2 bg-darkblue1 min-h-screen">
+      <h2 className="h1 mb-12 lg:mb-24 max-w-[1500px] mx-auto">
+        {t("explode.intro")}
+      </h2>
+      <ul
+        className="
+        grid grid-cols-1 xs:grid-cols-2 gap-8 list-none bg-no-repeat bg-center relative
         xs:bg-[url(/images/explose-small.svg)] xs:bg-[length:438px_320px]
         xl:bg-[url(/images/explose.svg)]
         xl:w-[969px] xl:h-[829px] xl:bg-[length:727px_662px]
         3xl:w-[1515px] 3xl:h-[1190px] 3xl:bg-[length:969px_829px]
       "
-        >
-          <li className="xl:absolute xl:-left-[20px] xl:top-[180px] 3xl:left-[112px] 3xl:top-[330px]">
-            <IconCard
-              icon="/images/storytelling/icon-social.svg"
-              title={t("explode.social.title")}
-              content={t("explode.social.content")}
-            />
-          </li>
-          <li className="xl:absolute xl:left-[120px] xl:bottom-[20px] 3xl:left-[242px] 3xl:bottom-[180px]">
-            <IconCard
-              icon="/images/storytelling/icon-climate.svg"
-              title={t("explode.climat.title")}
-              content={t("explode.climat.content")}
-            />
-          </li>
-          <li className="xl:absolute xl:-right-[150px] xl:top-[50px] 3xl:-right-[100px] 3xl:top-[160px]">
-            <IconCard
-              icon="/images/storytelling/icon-health.svg"
-              title={t("explode.health.title")}
-              content={t("explode.health.content")}
-            />
-          </li>
-          <li className="xl:absolute xl:-right-[140px] xl:bottom-[140px] 3xl:-right-[80px] 3xl:bottom-[360px]">
-            <IconCard
-              icon="/images/storytelling/icon-biodiversity.svg"
-              title={t("explode.biodiversity.title")}
-              content={t("explode.biodiversity.content")}
-            />
-          </li>
-          <li className="xl:absolute xl:right-[100px] xl:-bottom-[120px] 3xl:right-[340px] 3xl:bottom-[10px]">
-            <IconCard
-              icon="/images/storytelling/icon-animals.svg"
-              title={t("explode.animals.title")}
-              content={t("explode.animals.content")}
-            />
-          </li>
-        </ul>
-      </div>
+      >
+        <li className="xl:absolute xl:-left-[20px] xl:top-[180px] 3xl:left-[112px] 3xl:top-[330px]">
+          <IconCard
+            icon="/images/storytelling/icon-social.svg"
+            title={t("explode.social.title")}
+            content={t("explode.social.content")}
+          />
+        </li>
+        <li className="xl:absolute xl:left-[120px] xl:bottom-[20px] 3xl:left-[242px] 3xl:bottom-[180px]">
+          <IconCard
+            icon="/images/storytelling/icon-climate.svg"
+            title={t("explode.climat.title")}
+            content={t("explode.climat.content")}
+          />
+        </li>
+        <li className="xl:absolute xl:-right-[150px] xl:top-[50px] 3xl:-right-[100px] 3xl:top-[160px]">
+          <IconCard
+            icon="/images/storytelling/icon-health.svg"
+            title={t("explode.health.title")}
+            content={t("explode.health.content")}
+          />
+        </li>
+        <li className="xl:absolute xl:-right-[140px] xl:bottom-[140px] 3xl:-right-[80px] 3xl:bottom-[360px]">
+          <IconCard
+            icon="/images/storytelling/icon-biodiversity.svg"
+            title={t("explode.biodiversity.title")}
+            content={t("explode.biodiversity.content")}
+          />
+        </li>
+        <li className="xl:absolute xl:right-[100px] xl:-bottom-[120px] 3xl:right-[340px] 3xl:bottom-[10px]">
+          <IconCard
+            icon="/images/storytelling/icon-animals.svg"
+            title={t("explode.animals.title")}
+            content={t("explode.animals.content")}
+          />
+        </li>
+      </ul>
     </section>
   );
 };
@@ -195,7 +189,7 @@ const BusinessSection = () => {
   const t = useTranslations("story");
 
   return (
-    <section className="p-6 lg:px-12 lg:pt-36 lg:pb-64 text-red1 bg-darkblue1">
+    <section className="p-6 lg:px-12 lg:pt-36 lg:pb-64 text-white bg-darkblue1">
       <div className="max-w-[1500px] mx-auto">
         <h3 className={clsx("h3", "mb-4 lg:mb-6 max-w-5xl m-auto text-center")}>
           {t("industry.title")}
@@ -230,7 +224,7 @@ const BusinessSection = () => {
         />
         <div className="flex justify-center">
           <Link
-            className="inline-flex justify-center gap-4 mt-6 lg:mt-12 p-4 min-w-40 lg:text-2xl text-red1 bg-darkblue1 font-secondary uppercase rounded-xl tracking-widest border-2 font-bold border-red1 hover:bg-red1 hover:text-darkblue1 transition-all ease-in-out duration-100"
+            className="inline-flex justify-center mt-6 lg:mt-12 p-4 lg:text-xl text-white bg-red1 font-secondary uppercase rounded-xl tracking-widest border-2 border-red1 hover:bg-darkblue1 hover:text-red1 transition-all ease-in-out duration-100"
             href="/to-act"
           >
             {t("industry.link")}

diff --git a/src/components/IntroBlock.tsx b/src/components/IntroBlock.tsx
@@ -31,8 +31,8 @@ const IntroBlock = ({
     >
       <div className="grid grid-rows-[1fr, auto, 1fr] w-full max-w-[1500px] mx-auto">
         {image && (
-          <div className="row-start-2 self-center justify-self-center px-6 max-w-[490px]">
-            <Image src="/images/salmon.svg" alt="" width={490} height={203} />
+          <div className="row-start-2 self-center justify-self-center px-6 max-w-[700px]">
+            <Image src="/images/salmon.svg" alt="" width={700} height={203} />
           </div>
         )}
         <div className="row-start-3 self-end items-left flex flex-wrap gap-2 items-end">

diff --git a/src/components/JoinBlock.tsx b/src/components/JoinBlock.tsx
@@ -8,7 +8,7 @@ const Chart = dynamic(() => import("@/components/Chart"), {
   ssr: false,
 });
 
-import PrimaryButton from "@/components/buttons/PrimaryButton";
+import MainLink from "@/components/links/MainLink";
 import MetaChart from "@/components/MetaChart";
 
 type JoinBlockProps = {
@@ -106,9 +106,10 @@ const JoinBlock = ({
 
             <p className="h3 mt-6 xl:mt-10">{t(`join.${baseText}.act`)}</p>
 
-            <PrimaryButton
+            <MainLink
               href="/to-act"
-              content={t(`join.${baseText}.link`)}
+              mode="base"
+              label={t(`join.${baseText}.link`)}
               className="mt-6 xl:mt-10"
             />
           </div>

diff --git a/src/components/TitleBlock.tsx b/src/components/TitleBlock.tsx
@@ -21,7 +21,11 @@ const TitleBlock = ({
     <div
       {...rest}
       id={id}
-      className={clsx(className, "p-6 md:p-12 text-red1 bg-pink1", spaceY)}
+      className={clsx(
+        className,
+        "p-6 md:p-12 md:pt-24 text-red1 bg-gradient-to-b from-pink1 to-white",
+        spaceY,
+      )}
     >
       <h2 className="h2 max-w-[1500px] mx-auto w-full">{title}</h2>
     </div>

diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
@@ -13,17 +13,14 @@ const Footer = () => {
       <div className="max-w-[1500px] mx-auto">
         <div className="flex flex-wrap gap-6 lg:gap-12 lg:pt-12">
           <div className="flex flex-col w-full max-w-72">
-            <div className="flex place-items-center h-[100px]">
-              <Image
-                loading="lazy"
-                src="/images/seastemik.avif"
-                width={100}
-                height={100}
-                alt=""
-                className="object-contain"
-              />
-            </div>
-            <p className="h4 md:mb-4">Seastemik</p>
+            <Image
+              loading="lazy"
+              src="/images/seastemik.svg"
+              width={170}
+              height={100}
+              alt="Seastemik"
+              className="object-contain md:mb-4"
+            />
             <ShareLink href="https://seastemik.org/" name="Seastemik" />
             <ShareLink
               type="linkedin"
@@ -48,17 +45,14 @@ const Footer = () => {
           </div>
 
           <div className="flex flex-col w-full max-w-72">
-            <div className="h-[100px]">
-              <Image
-                loading="lazy"
-                src="/images/dataforgood.svg"
-                width={100}
-                height={100}
-                alt=""
-                className="object-contain"
-              />
-            </div>
-            <p className="h4 md:mb-4">Data for Good</p>
+            <Image
+              loading="lazy"
+              src="/images/dataforgood.svg"
+              width={150}
+              height={100}
+              alt="Data for Good"
+              className="object-contain md:mb-4"
+            />
             <ShareLink href="https://dataforgood.fr/" name="Data for Good" />
             <ShareLink
               type="twitter"
@@ -77,21 +71,20 @@ const Footer = () => {
             />
           </div>
 
-          <div className="self-end lg:ml-auto w-full md:w-auto">
-            <MainLink
-              label={t("footer.donation")}
-              href="https://www.helloasso.com/associations/seastemik/formulaires/1"
-              mode="base"
-              className="mb-4"
-              isBlank
-            />
+          <div className="self-top lg:ml-auto w-full md:w-auto">
             <Image
               loading="lazy"
               src="/images/pinkbomb-seastemik-dataforgood.svg"
-              width={400}
+              width={300}
               height={100}
               alt=""
-              className="object-contain"
+              className="object-contain mb-4"
+            />
+            <MainLink
+              label={t("footer.donation")}
+              href="https://www.helloasso.com/associations/seastemik/formulaires/1"
+              mode="base"
+              isBlank
             />
           </div>
         </div>

diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
@@ -43,7 +43,7 @@ const Navbar = () => {
         /to-act/.test(pathname) ? "bg-yellow1" : "bg-pink1",
       )}
     >
-      <div className="flex flex-wrap items-center justify-between gap-6 px-6 lg:px-12 py-3 lg:py-6">
+      <div className="flex flex-wrap items-center justify-between gap-6 px-6 lg:px-12 py-3 lg:py-6 max-w-[1596px] mx-auto">
         <Link href="/">
           <Image
             src="/images/pinkbombs.svg"