✨(front) refonte ui

Refonte UI homepage V1
numerique-gouv · Feb 20, 2025 · 5ad6868 · 5ad6868
1 parent c145697
commit 5ad6868
Show file tree

Hide file tree

Showing 23 changed files with 741 additions and 160 deletions.
diff --git a/src/assets/icons/visio.svg b/src/assets/icons/visio.svg
diff --git a/src/assets/logo/gouv.svg b/src/assets/logo/gouv.svg
diff --git a/src/assets/products/visio-white.svg b/src/assets/products/visio-white.svg
diff --git a/src/assets/products/visio.svg b/src/assets/products/visio.svg
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -5,6 +5,7 @@ import classNames from 'classnames'
 interface ButtonProps {
   children: React.ReactNode
   href?: string
+  onClick?: void
   'aria-label'?: string
   variant?: 'outline'
   size?: 'large'
@@ -19,7 +20,7 @@ const core =
 
 export const buttonStyles = {
   default: `${core} ${transition} font-medium text-white bg-blue-1 hover:bg-dsfr-blue-2`,
-  tertiary: `${core} ${transition} font-medium text-blue-1 bg-primary-100 hover:bg-dsfr-blue-2`,
+  tertiary: `${core} ${transition} font-medium text-blue-1 bg-primary-100 hover:bg-primary-300`,
   outline: `${core} ${transition} bg-transparent border border-2 font-bold border-blue-1 text-blue-1 hover:backdrop-brightness-95 hover:bg-transparent`,
 
   largeSize: '!text-xl md:!py-4 md:!px-8',
@@ -29,6 +30,7 @@ export const buttonStyles = {
 export const Button: React.FC<ButtonProps> = ({
   children,
   href,
+  onClick,
   icon,
   iconPosition = 'left',
   variant,
@@ -56,10 +58,10 @@ export const Button: React.FC<ButtonProps> = ({
   )
 
   return href ? (
-    <LinkComponent href={href} className={classes} aria-label={ariaLabel}>
+    <LinkComponent href={href} target="_blank" className={classes} aria-label={ariaLabel}>
       {content}
     </LinkComponent>
   ) : (
-    <button className={classes}>{content}</button>
+    <button onClick={onClick} className={classes}>{content}</button>
   )
 }
diff --git a/src/components/FadeInSection.tsx b/src/components/FadeInSection.tsx
@@ -0,0 +1,37 @@
+import { useEffect, useRef, useState } from "react";
+
+const FadeInSection = ({ children, className = "" }) => {
+  const sectionRef = useRef<HTMLDivElement>(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    if (sectionRef.current) observer.observe(sectionRef.current);
+
+    return () => {
+      if (sectionRef.current) observer.unobserve(sectionRef.current);
+    };
+  }, []);
+
+  return (
+    <div
+      ref={sectionRef}
+      className={`transition-all duration-700 transform ${
+        isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
+      } ${className}`}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default FadeInSection;
diff --git a/src/components/HomepageContent.tsx b/src/components/HomepageContent.tsx
@@ -11,11 +11,10 @@ import { SecureTools } from '@/sections/Homepage/SecureTools'
 import { Migration } from '@/sections/Homepage/Migration'
 import { SuiteTerritoriale } from '@/sections/Homepage/SuiteTerritoriale'
 import { FooterLaSuite } from '@/sections/Homepage/FooterLaSuite'
+import FadeInSection from "@/components/FadeInSection";
 
 import { ContentSection } from '@/components/ContentSection'
-import { FAQ } from '@/components/cms-blocks/FAQ'
-import { useEffect } from 'react'
-import { QuickNav } from './QuickNav'
+import { useEffect, useRef, useState } from 'react'
 
 /**
  * output the homepage content with data taken from the CMS file
@@ -24,77 +23,53 @@ import { QuickNav } from './QuickNav'
  * here to abstract this notion from lower-level components
  */
 export const HomepageContent = ({ data }: { data: EntrySchema }) => {
-  return (
-    <>
-      {/*<QuickNav />*/}
-      <Hero />
-      <Products />
-      <UsersTeams />
-      <PortalProconnect />
-      <EcosystemProconnect />
-      <Editors />
-      <SecureTools />
-      <Migration />
-      <SuiteTerritoriale />
-      <FooterLaSuite />
-      {/*<Faq />*/}
-{/*      <Newsletter
-        title={data.newsletter_title}
-        body={<Raw tag="span">{data.newsletter_description}</Raw>}
-        url={data.newsletter_link}
-      />*/}
-    </>
-  )
-}
+
+  const sectionRef = useRef<HTMLDivElement>(null);
+  const [isVisible, setIsVisible] = useState(false);
 
-const Faq = () => {
   useEffect(() => {
-    async function loadDsfr() {
-      // @ts-ignore
-      if (window.dsfr) {
-        return
-      }
-      // @ts-ignore
-      await import('@gouvfr/dsfr/dist/core/core.module')
-      // @ts-ignore
-      await import('@gouvfr/dsfr/dist/component/accordion/accordion.module')
-    }
+    if (!window.$crisp) {
+      window.$crisp = [];
+      window.CRISP_WEBSITE_ID = "58ea6697-8eba-4492-bc59-ad6562585041";
 
-    loadDsfr()
-  }, [])
+      const script = document.createElement("script");
+      script.type = "text/javascript";
+      script.async = true;
+      script.src = "https://client.crisp.chat/l.js";
+      document.head.appendChild(script);
+    }
+  }, []);
 
   return (
-    <ContentSection gap="gap-20">
-      <h2 className="text-3xl md:text-4xl font-bold text-center px-4 ">
-        Trouver les réponses à vos questions
-      </h2>
-      <div className="enable-dsfr">
-        <FAQ
-          items={[
-            {
-              question: 'Qu’est-ce que La Suite numérique ?',
-              answer:
-                'La Suite numérique est un ensemble de communs numériques libres reliés grâce au bouton Pro Connect',
-            },
-            {
-              question: 'Comment contribuer à La Suite numérique ?',
-              answer: 'Contribuer à La Suite numérique, c’est possible !',
-            },
-            {
-              question:
-                'Comment utiliser les communs numériques de La Suite numérique ?',
-              answer:
-                'Les communs numériques de La Suite numérique sont utilisables librement',
-            },
-            {
-              question:
-                'Comment signaler un problème sur un commun numérique de La Suite numérique ?',
-              answer:
-                'Vous pouvez signaler un problème sur un commun numérique de La Suite numérique en envoyant un mail à',
-            },
-          ]}
-        />
-      </div>
-    </ContentSection>
+    <>
+      <Hero />
+      <FadeInSection>
+        <Products />
+      </FadeInSection>
+      <FadeInSection>
+        <UsersTeams />
+      </FadeInSection>
+      <FadeInSection>
+        <PortalProconnect />
+      </FadeInSection>
+      <FadeInSection>
+        <EcosystemProconnect />
+      </FadeInSection>
+      <FadeInSection>
+        <Editors />
+      </FadeInSection>
+      <FadeInSection>
+        <SecureTools />
+      </FadeInSection>
+      <FadeInSection>
+       <Migration />
+      </FadeInSection>
+      <FadeInSection>
+        <SuiteTerritoriale />
+      </FadeInSection>
+      <FadeInSection>
+        <FooterLaSuite />
+      </FadeInSection>
+    </>
   )
 }
diff --git a/src/components/LaGaufre.tsx b/src/components/LaGaufre.tsx
@@ -1,12 +1,16 @@
 import { Gaufre } from '@gouvfr-lasuite/integration'
 import '@gouvfr-lasuite/integration/dist/css/gaufre.css'
 import Script from 'next/script'
-import { createGlobalStyle } from 'styled-components';
+import { createGlobalStyle } from 'styled-components'
 
 const GaufreStyle = createGlobalStyle`
-  .lasuite-gaufre-btn{
+  .lasuite-gaufre-btn {
     box-shadow: inset 0 0 0 0 !important;
   }
+  
+  .lasuite-gaufre-btn--vanilla.lasuite-gaufre-btn--small::before {
+    --icon-size: 32px !important;
+  }
 `;
 
 export const LaGaufre = () => {

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -3,6 +3,7 @@ import { LaGaufre } from '@/components/LaGaufre'
 import { LocaleSwitcher } from './LocaleSwitcher'
 import { useTranslations } from '@/locales/useTranslations'
 import LogoSvg from '@/assets/logo/suite-numerique.svg'
+import LogoGouvSvg from '@/assets/logo/gouv.svg'
 import Image from 'next/image'
 
 /**
@@ -14,21 +15,23 @@ import Image from 'next/image'
 export const NavBar = () => {
   const t = useTranslations()
   return (
-    <header className="bg-white px-2 fixed top-0 right-0 left-0 z-50">
-        <div className="flex sm:items-center">
-          <div className="flex  items-center fr-enlarge-link">
-            <p className="p-4 logo text-[0.7875rem] font-bold leading-[1.0317460317em] tracking-[-.01em] uppercase align-middle inline-block">
-              Gouvernement
-            </p>
-            <div className="p-4">
+    <header className="fade-in bg-white px-4 fixed top-0 right-0 left-0 z-50">
+        <div className="flex items-center">
+          <div className="flex py-3.5 items-center fr-enlarge-link">
+             <Image
+                  className="mr-3 w-28"
+                  src={LogoGouvSvg}
+                  alt="Logo gouvernement"
+                />
+            <div className="ml-5">
               <Image
                   className="w-28"
                   src={LogoSvg}
                   alt="Logo de la suite numérique"
                 />
             </div>
           </div>
-          <div className="absolute flex items-center gap-4 top-0 right-0 sm:relative z-10 p-4 ml-auto">
+          <div className="flex items-center gap-4 top-0 right-0 sm:relative z-10 ml-auto">
             <LocaleSwitcher />
             <LaGaufre />
           </div>

diff --git a/src/components/Paragraph.tsx b/src/components/Paragraph.tsx
@@ -4,14 +4,14 @@ export const Paragraph = ({ tag, title, description, children}: {
   description?: string,
 }) => {
   return (
-    <div className="text-left">
+    <div className="text-left mt-7 md:mt-0">
      {tag && (
-        <span className="rounded bg-primary-100 font-bold text-blue-1 px-2.5 py-1.5">
+        <div className="inline-block rounded bg-primary-100 font-bold text-blue-1 px-2.5 py-1.5">
           {tag}
-        </span>
+        </div>
       )}
       {title && (
-        <h3 className="text-5xl font-bold my-4">
+        <h3 className="text-5xl font-bold my-5">
           {title}
         </h3>
       )}

diff --git a/src/pages/agent/index.tsx b/src/pages/agent/index.tsx
@@ -18,13 +18,6 @@ export default function Agent() {
 
   return (
     <Layout title="La Suite pour les agents publics">
-      <QuickNav />
-      <Hero
-        intro="... un écosystème numérique pour faciliter votre quotidien"
-        callout="Simplifiez vos missions grâce à des outils numériques interconnectés, conçus pour répondre aux besoins spécifiques des agents publics"
-        image={heroImage}
-        backgroundImage={false}
-      />
       <ContentSection verticalPadding={false}>
         <div className="pb-16">{button}</div>
       </ContentSection>

diff --git a/src/sections/Hero.tsx b/src/sections/Hero.tsx
@@ -9,10 +9,10 @@ export const Hero = () => {
   const t = useTranslations()
 
   return (
-    <div className="relative overflow-hidden bg-white">
+    <div className="fade-in relative overflow-hidden bg-white">
       <div
         className={
-          'flex flex-col justify-between items-start sm:items-center pt-16 sm:py-8 px-3 md:bg-no-repeat md:bg-center'
+          'flex flex-col justify-between items-start sm:items-center pt-16 pt-8 px-3'
         }
       >
         <h1 className="w-full flex justify-center pt-11 sm:mt-11">
@@ -25,12 +25,12 @@ export const Hero = () => {
             priority
           />
         </h1>
-        <div className="mx-auto sm:max-w-[50vw] md:max-w-[45vw]">
-          <h2 className="sm:text-5xl text-greyscale-900 text-5xl sm:leading-[52px] font-bold text-center pb-4">
+        <div className="mx-auto max-w-[70vw] md:max-w-[45vw]">
+          <h2 className="text-greyscale-900 md:text-6xl text-5xl sm:leading-[52px] md:leading-[72px] font-bold text-center pb-4">
             L’espace de
             travail souverain
           </h2>
-          <p class="text-center text-greyscale-700 text-base">Créez. Organisez. Collaborez. Dans un environnement français et open-source.</p>
+          <p class="text-center w-[80%] mx-auto text-greyscale-700 text-base">Créez. Organisez. Collaborez. Dans un environnement français et open-source.</p>
         </div>
       </div>
     </div>

diff --git a/src/sections/Homepage/EcosystemProconnect.tsx b/src/sections/Homepage/EcosystemProconnect.tsx
@@ -10,20 +10,32 @@ import BentoWebconf from '@/assets/bento/webconf.png'
 import BentoWebinaire from '@/assets/bento/webinaire.png'
 import BentoAudioconf from '@/assets/bento/audioconf.png'
 
+const PRODUCTS_GRID = [
+  {'name': 'Resana', 'bento': BentoResana, 'url': 'https://resana.numerique.gouv.fr/'},
+  {'name': 'WebConf', 'bento': BentoWebconf, 'url': 'https://webconf.numerique.gouv.fr/'},
+  {'name': 'Webinaire', 'bento': BentoWebinaire, 'url': 'https://webinaire.numerique.gouv.fr/' },
+  {'name': 'Audioconf', 'bento': BentoAudioconf, 'url': 'https://audioconf.numerique.gouv.fr/' },
+] 
+
+
+
 export const EcosystemProconnect = () => {
   return (
     <ContentSection>
     <Paragraph 
       tag="Services de l'État"
-      title="L'écosysème ProConnect"
+      title="L'écosystème ProConnect"
       description={`Continuez à utiliser les services de l’État avec ProConnect. Résana, Webinaire, Webconf, Audioconf... Autant d'outils puissants à portée de main qui complémentent La Suite à merveille.`}
     />
-      <div className="grid md:grid-cols-2 gap-4">
-        <Image src={BentoResana}/>
-        <Image src={BentoWebconf}/>
-        <Image src={BentoWebinaire}/>
-        <Image src={BentoAudioconf}/>
-      </div>
+      <div className="grid md:grid-cols-2 gap-8 md:mb-14">
+       {PRODUCTS_GRID.map(item => {
+        return (
+          <a href={item.url} target="_blank">
+            <Image src={item.bento} alt={item.name}/>
+          </a>
+        );
+        })}
+       </div>
     </ContentSection>
   )
 }