From 5ad68680d6d2c66788cde271bb19e0d868a09d67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?El=C3=A9onore=20Voisin?= Date: Thu, 20 Feb 2025 17:04:55 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(front)=20refonte=20ui?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Refonte UI homepage V1 --- src/assets/icons/visio.svg | 5 - src/assets/logo/gouv.svg | 454 ++++++++++++++++++ src/assets/products/visio-white.svg | 5 + src/assets/products/visio.svg | 2 +- src/components/Button.tsx | 8 +- src/components/FadeInSection.tsx | 37 ++ src/components/HomepageContent.tsx | 115 ++--- src/components/LaGaufre.tsx | 8 +- src/components/NavBar.tsx | 19 +- src/components/Paragraph.tsx | 8 +- src/pages/agent/index.tsx | 7 - src/sections/Hero.tsx | 10 +- src/sections/Homepage/EcosystemProconnect.tsx | 26 +- src/sections/Homepage/Editors.tsx | 4 +- src/sections/Homepage/FooterLaSuite.tsx | 25 +- src/sections/Homepage/Migration.tsx | 47 +- src/sections/Homepage/PortalProconnect.tsx | 2 +- src/sections/Homepage/SecureTools.tsx | 2 +- src/sections/Homepage/SuiteTerritoriale.tsx | 7 +- src/sections/Homepage/UsersTeams.tsx | 8 +- src/sections/Products.tsx | 33 +- src/styles/app.css | 67 +++ tailwind.config.ts | 2 +- 23 files changed, 741 insertions(+), 160 deletions(-) delete mode 100644 src/assets/icons/visio.svg create mode 100644 src/assets/logo/gouv.svg create mode 100644 src/assets/products/visio-white.svg create mode 100644 src/components/FadeInSection.tsx diff --git a/src/assets/icons/visio.svg b/src/assets/icons/visio.svg deleted file mode 100644 index 91cc391..0000000 --- a/src/assets/icons/visio.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/assets/logo/gouv.svg b/src/assets/logo/gouv.svg new file mode 100644 index 0000000..824e1b9 --- /dev/null +++ b/src/assets/logo/gouv.svg @@ -0,0 +1,454 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/products/visio-white.svg b/src/assets/products/visio-white.svg new file mode 100644 index 0000000..c015334 --- /dev/null +++ b/src/assets/products/visio-white.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/products/visio.svg b/src/assets/products/visio.svg index 9beb284..ff9c3b1 100644 --- a/src/assets/products/visio.svg +++ b/src/assets/products/visio.svg @@ -1,4 +1,4 @@ - + diff --git a/src/components/Button.tsx b/src/components/Button.tsx index cfee369..b4656a3 100644 --- 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 = ({ children, href, + onClick, icon, iconPosition = 'left', variant, @@ -56,10 +58,10 @@ export const Button: React.FC = ({ ) return href ? ( - + {content} ) : ( - + ) } diff --git a/src/components/FadeInSection.tsx b/src/components/FadeInSection.tsx new file mode 100644 index 0000000..2fda873 --- /dev/null +++ b/src/components/FadeInSection.tsx @@ -0,0 +1,37 @@ +import { useEffect, useRef, useState } from "react"; + +const FadeInSection = ({ children, className = "" }) => { + const sectionRef = useRef(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 ( +
+ {children} +
+ ); +}; + +export default FadeInSection; diff --git a/src/components/HomepageContent.tsx b/src/components/HomepageContent.tsx index a6c31df..2920393 100644 --- 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 ( - <> - {/**/} - - - - - - - - - - - {/**/} -{/* {data.newsletter_description}} - url={data.newsletter_link} - />*/} - - ) -} + + const sectionRef = useRef(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 ( - -

- Trouver les réponses à vos questions -

-
- -
- + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/src/components/LaGaufre.tsx b/src/components/LaGaufre.tsx index 72514a9..1a8e9a3 100644 --- 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 index 3267228..ca68ac6 100644 --- 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,13 +15,15 @@ import Image from 'next/image' export const NavBar = () => { const t = useTranslations() return ( -
-
-
-

- Gouvernement -

-
+
+
+
+ Logo gouvernement +
{ />
-
+
diff --git a/src/components/Paragraph.tsx b/src/components/Paragraph.tsx index 3041231..565c1db 100644 --- a/src/components/Paragraph.tsx +++ b/src/components/Paragraph.tsx @@ -4,14 +4,14 @@ export const Paragraph = ({ tag, title, description, children}: { description?: string, }) => { return ( -
+
{tag && ( - +
{tag} - +
)} {title && ( -

+

{title}

)} diff --git a/src/pages/agent/index.tsx b/src/pages/agent/index.tsx index 5ec530e..e0fe490 100644 --- a/src/pages/agent/index.tsx +++ b/src/pages/agent/index.tsx @@ -18,13 +18,6 @@ export default function Agent() { return ( - -
{button}
 diff --git a/src/sections/Hero.tsx b/src/sections/Hero.tsx index 7155fdb..ff60ace 100644 --- a/src/sections/Hero.tsx +++ b/src/sections/Hero.tsx @@ -9,10 +9,10 @@ export const Hero = () => { const t = useTranslations() return ( -
+

@@ -25,12 +25,12 @@ export const Hero = () => { priority />

-
-

+
+

L’espace de travail souverain

-

Créez. Organisez. Collaborez. Dans un environnement français et open-source.

+

Créez. Organisez. Collaborez. Dans un environnement français et open-source.

diff --git a/src/sections/Homepage/EcosystemProconnect.tsx b/src/sections/Homepage/EcosystemProconnect.tsx index 46be6c4..9b52fc6 100644 --- 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 ( -
- - - - -
+
+ {PRODUCTS_GRID.map(item => { + return ( + + {item.name}/ + + ); + })} +
) } diff --git a/src/sections/Homepage/Editors.tsx b/src/sections/Homepage/Editors.tsx index 0735311..33c26bf 100644 --- a/src/sections/Homepage/Editors.tsx +++ b/src/sections/Homepage/Editors.tsx @@ -7,7 +7,7 @@ import BentoWimiWhaler from '@/assets/bento/wimi-whaler.png' export const Editors = () => { return ( -
+
{
{ + + const urlForm = NEWSLETTER_FORM; + + const openCrisp = () => { + console.log('coucou'); + if (window.$crisp) { + window.$crisp.push(['do', 'chat:open']); + } + }; + return ( -
+
{ alt="Welcome to la suite" />
-
+
{

Utilisez La Suite Numérique dès aujourd’hui !

-
+
*/} +
{ return ( -
+
{ return ( -
+
{ return ( -
+
{

L’ANCT et ses partenaires proposent La Suite aux collectivités de moins de 3500 personnes et EPCI de moins de 15 000 personnes, en mettant à disposition des solutions et un accompagnement personnalisé pour leur transformation numérique.