diff --git a/.eslintrc.json b/.eslintrc.json index 4d765f2..05aacb9 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,3 +1,4 @@ { - "extends": ["next/core-web-vitals", "prettier"] + "extends": ["next/core-web-vitals", "prettier"], + "rules": { "react/no-unescaped-entities": 0 } } diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..13566b8 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml new file mode 100644 index 0000000..cce1b0a --- /dev/null +++ b/.idea/codeStyles/Project.xml @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml new file mode 100644 index 0000000..79ee123 --- /dev/null +++ b/.idea/codeStyles/codeStyleConfig.xml @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..03d9549 --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/jsLinters/eslint.xml b/.idea/jsLinters/eslint.xml new file mode 100644 index 0000000..541945b --- /dev/null +++ b/.idea/jsLinters/eslint.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/.idea/lasuite-landingpage.iml b/.idea/lasuite-landingpage.iml new file mode 100644 index 0000000..d6ebd48 --- /dev/null +++ b/.idea/lasuite-landingpage.iml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..6f29fee --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..bdffd36 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/ruff.xml b/.idea/ruff.xml new file mode 100644 index 0000000..94a50bd --- /dev/null +++ b/.idea/ruff.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/package.json b/package.json index a88cd73..dd03c09 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "format": "prettier --check \"**/*.{css,ts,tsx,md,json,cjs,js}\"", "format:fix": "prettier --write \"**/*.{css,ts,tsx,md,json,cjs,js}\"", "cms": "npx decap-server", - "copy-cms-dsfr": "cp -r node_modules/@gouvfr/dsfr/dist/ public/assets/cms/dsfr && postcss public/assets/cms/dsfr/dist/dsfr.min.css -o public/assets/cms/dsfr/dist/dsfr.min.css", + "copy-cms-dsfr": "cp -r node_modules/@gouvfr/dsfr/dist/. public/assets/cms/dsfr && postcss public/assets/cms/dsfr/dsfr.min.css -o public/assets/cms/dsfr/dist/dsfr.min.css", "copy-cms-styles": "postcss src/styles/globals.css -o public/assets/cms/globals.css", "copy-cms-assets": "npm run copy-cms-dsfr && npm run copy-cms-styles", "postinstall": "npm run copy-cms-assets" diff --git a/public/assets/products/messagerie.svg b/public/assets/products/messagerie.svg new file mode 100644 index 0000000..5b2ee55 --- /dev/null +++ b/public/assets/products/messagerie.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/administration_block_1.png b/src/assets/administration_block_1.png new file mode 100644 index 0000000..e6ce2ca Binary files /dev/null and b/src/assets/administration_block_1.png differ diff --git a/src/assets/administration_block_2.png b/src/assets/administration_block_2.png new file mode 100644 index 0000000..aa9c4b9 Binary files /dev/null and b/src/assets/administration_block_2.png differ diff --git a/src/assets/administration_block_3.png b/src/assets/administration_block_3.png new file mode 100644 index 0000000..e3e4d4c Binary files /dev/null and b/src/assets/administration_block_3.png differ diff --git a/src/assets/agent_block_1.png b/src/assets/agent_block_1.png new file mode 100644 index 0000000..bf07f13 Binary files /dev/null and b/src/assets/agent_block_1.png differ diff --git a/src/assets/agent_block_2.png b/src/assets/agent_block_2.png new file mode 100644 index 0000000..f0d80c1 Binary files /dev/null and b/src/assets/agent_block_2.png differ diff --git a/src/assets/editeur_block_1.png b/src/assets/editeur_block_1.png new file mode 100644 index 0000000..6469646 Binary files /dev/null and b/src/assets/editeur_block_1.png differ diff --git a/src/assets/editeur_hero.png b/src/assets/editeur_hero.png new file mode 100644 index 0000000..7ba1e98 Binary files /dev/null and b/src/assets/editeur_hero.png differ diff --git a/src/assets/hero-desktop.png b/src/assets/hero-desktop.png new file mode 100644 index 0000000..ee10339 Binary files /dev/null and b/src/assets/hero-desktop.png differ diff --git a/src/assets/hero_administration.png b/src/assets/hero_administration.png new file mode 100644 index 0000000..6b155b9 Binary files /dev/null and b/src/assets/hero_administration.png differ diff --git a/src/assets/hero_agent.png b/src/assets/hero_agent.png new file mode 100644 index 0000000..0da86a9 Binary files /dev/null and b/src/assets/hero_agent.png differ diff --git a/src/assets/hero_editeur.png b/src/assets/hero_editeur.png new file mode 100644 index 0000000..9cd47a9 Binary files /dev/null and b/src/assets/hero_editeur.png differ diff --git a/src/assets/nuancier.webp b/src/assets/nuancier.webp new file mode 100644 index 0000000..42e32a9 Binary files /dev/null and b/src/assets/nuancier.webp differ diff --git a/src/assets/products/audioconf.svg b/src/assets/products/audioconf.svg new file mode 100644 index 0000000..f33a4ac --- /dev/null +++ b/src/assets/products/audioconf.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/products/contact.svg b/src/assets/products/contact.svg new file mode 100644 index 0000000..15d4c9a --- /dev/null +++ b/src/assets/products/contact.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/products/docs.svg b/src/assets/products/docs.svg new file mode 100644 index 0000000..5a1df77 --- /dev/null +++ b/src/assets/products/docs.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/products/equipes.svg b/src/assets/products/equipes.svg new file mode 100644 index 0000000..60cd1e0 --- /dev/null +++ b/src/assets/products/equipes.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/products/france_transfert.svg b/src/assets/products/france_transfert.svg new file mode 100644 index 0000000..951976a --- /dev/null +++ b/src/assets/products/france_transfert.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/products/france_transfert_screenshot.png b/src/assets/products/france_transfert_screenshot.png new file mode 100644 index 0000000..e162ac9 Binary files /dev/null and b/src/assets/products/france_transfert_screenshot.png differ diff --git a/src/assets/products/grist.svg b/src/assets/products/grist.svg new file mode 100644 index 0000000..d89d83b --- /dev/null +++ b/src/assets/products/grist.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/products/grist_screenshot.png b/src/assets/products/grist_screenshot.png new file mode 100644 index 0000000..64020a7 Binary files /dev/null and b/src/assets/products/grist_screenshot.png differ diff --git a/src/assets/products/messagerie.svg b/src/assets/products/messagerie.svg new file mode 100644 index 0000000..5b2ee55 --- /dev/null +++ b/src/assets/products/messagerie.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/products/messagerie_screenshot.webp b/src/assets/products/messagerie_screenshot.webp new file mode 100644 index 0000000..5118a5f Binary files /dev/null and b/src/assets/products/messagerie_screenshot.webp differ diff --git a/src/assets/products/pad.svg b/src/assets/products/pad.svg new file mode 100644 index 0000000..7d75cdb --- /dev/null +++ b/src/assets/products/pad.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/products/pad_screenshot.png b/src/assets/products/pad_screenshot.png new file mode 100644 index 0000000..75d053d Binary files /dev/null and b/src/assets/products/pad_screenshot.png differ diff --git a/src/assets/products/resana.svg b/src/assets/products/resana.svg new file mode 100644 index 0000000..f65b688 --- /dev/null +++ b/src/assets/products/resana.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/products/resana_screenshot.webp b/src/assets/products/resana_screenshot.webp new file mode 100644 index 0000000..b63ba93 Binary files /dev/null and b/src/assets/products/resana_screenshot.webp differ diff --git a/src/assets/products/tchap.svg b/src/assets/products/tchap.svg new file mode 100644 index 0000000..f085b89 --- /dev/null +++ b/src/assets/products/tchap.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/products/tchap_screenshot.png b/src/assets/products/tchap_screenshot.png new file mode 100644 index 0000000..0f6e4ae Binary files /dev/null and b/src/assets/products/tchap_screenshot.png differ diff --git a/src/assets/products/visio.svg b/src/assets/products/visio.svg new file mode 100644 index 0000000..423375f --- /dev/null +++ b/src/assets/products/visio.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/products/visio_screenshot.webp b/src/assets/products/visio_screenshot.webp new file mode 100644 index 0000000..fda9952 Binary files /dev/null and b/src/assets/products/visio_screenshot.webp differ diff --git a/src/assets/products/webinaire.svg b/src/assets/products/webinaire.svg new file mode 100644 index 0000000..6fd0695 --- /dev/null +++ b/src/assets/products/webinaire.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/products/webinaire_screenshot.webp b/src/assets/products/webinaire_screenshot.webp new file mode 100644 index 0000000..e335d80 Binary files /dev/null and b/src/assets/products/webinaire_screenshot.webp differ diff --git a/src/components/ContentSection.tsx b/src/components/ContentSection.tsx index 46ed24e..14d2643 100644 --- a/src/components/ContentSection.tsx +++ b/src/components/ContentSection.tsx @@ -5,20 +5,26 @@ interface ContentSectionProps Omit, 'className'> { background?: 'gray' padding?: boolean + horizontalPadding?: boolean + verticalPadding?: boolean + gap?: string } export const ContentSection: React.FC = ({ children, background, padding = true, + horizontalPadding = true, + verticalPadding = true, + gap = 'gap-[50px]', ...props }) => { return (
{children} diff --git a/src/components/HomepageContent.tsx b/src/components/HomepageContent.tsx index 6c7ee48..34cbaa8 100644 --- a/src/components/HomepageContent.tsx +++ b/src/components/HomepageContent.tsx @@ -1,11 +1,14 @@ -import { DigitalCommons } from '@/sections/DigitalCommons' import { Hero } from '@/sections/Hero' -import { Anct } from '@/sections/Anct' import { Testimonies } from '@/sections/Testimonies' -import { Initiatives } from '@/sections/Initiatives' import { Newsletter } from '@/sections/Newsletter' import { EntrySchema } from '@/cms/collections/homepage' import { Raw } from './Raw' +import { Products } from '@/sections/Products' +import { ContentSection } from '@/components/ContentSection' +import { FAQ } from '@/components/cms-blocks/FAQ' +import { useEffect } from 'react' +import heroImage from '@/assets/hero-desktop.png' +import { QuickNav } from './QuickNav' /** * output the homepage content with data taken from the CMS file @@ -16,29 +19,27 @@ import { Raw } from './Raw' export const HomepageContent = ({ data }: { data: EntrySchema }) => { return ( <> + {data.intro}} - callout={{data.callout}} - /> - {/**/} - {data.apps_description}} - /> - {data.initiatives_description}} - cta={data.initiatives_cta} - items={ - (data.faq || []).map((item) => ({ - ...item, - question: {item.question}, - answer: {item.answer}, - })) || [] - } + intro="Créer, partager, collaborer au sein la sphère publique" + callout="La Suite numérique fédère agents et professionnels autour d'applications open-source interconnectées pour simplifier leur quotidien" + image={heroImage} /> + {data.testimonies_description}} + description={ +
+ La Suite est un projet en construction, certaines de ses + applications sont encore en phase de test, mais{' '} + + d'autres sont déjà utilisées par des centaines de milliers + d'agents et toujours plus chaque jour ! + +
+ Découvrez les applications stars de La Suite +
+ } items={ (data.testimonies_items || []).map((item) => ({ ...item, @@ -47,10 +48,7 @@ export const HomepageContent = ({ data }: { data: EntrySchema }) => { })) || [] } /> - {data.anct_description}} - logos={data.anct_partenaires || []} - /> + {/**/} {data.newsletter_description}} @@ -59,3 +57,55 @@ export const HomepageContent = ({ data }: { data: EntrySchema }) => { ) } + +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') + } + + loadDsfr() + }, []) + + return ( + +

+ Trouver les réponses à vos questions +

+
+ +
+ + ) +} diff --git a/src/components/QuickNav.tsx b/src/components/QuickNav.tsx new file mode 100644 index 0000000..8ee6de4 --- /dev/null +++ b/src/components/QuickNav.tsx @@ -0,0 +1,75 @@ +import { ContentSection } from './ContentSection' +import { useRouter } from 'next/router' +import { useState } from 'react' + +export const QuickNav = () => { + const router = useRouter() + const [isMenuOpen, setIsMenuOpen] = useState(false) + const links = [ + ['Accueil', '/'], + ['Produits', '/products'], + ['Agents', '/agent'], + ['Administration', '/administration'], + ['Éditeur', '/editeur'], + ] + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen) + } + + return ( + + + + ) +} diff --git a/src/components/cms-blocks/FAQ.tsx b/src/components/cms-blocks/FAQ.tsx index 33d06f3..394539d 100644 --- a/src/components/cms-blocks/FAQ.tsx +++ b/src/components/cms-blocks/FAQ.tsx @@ -15,7 +15,7 @@ export const FAQ = ({ const id = useId() if (!items.length) return null return ( -
+
{!!title &&

{title}

}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index d7eda43..a8b78b3 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -7,6 +7,8 @@ import { MATOMO_ID } from '@/constant' import { useEffect } from 'react' import { TranslationsProvider } from '@/locales/useTranslations' import { useRouter } from 'next/router' +import '@gouvfr/dsfr/dist/dsfr/dsfr.css' +import '@gouvfr/dsfr/dist/utility/icons/icons-system/icons-system.css' declare global { interface Window { diff --git a/src/pages/administration/index.tsx b/src/pages/administration/index.tsx new file mode 100644 index 0000000..596c29b --- /dev/null +++ b/src/pages/administration/index.tsx @@ -0,0 +1,107 @@ +import { Layout } from '@/components/Layout' +import { TITLE_SITE } from '@/constant' +import { Hero } from '@/sections/Hero' +import { ContentSection } from '@/components/ContentSection' +import { DoubleBlock } from '@/sections/DoubleBlock' +import heroImage from '@/assets/hero_administration.png' +import AdministrationImage1 from '@/assets/administration_block_1.png' +import AdministrationImage2 from '@/assets/administration_block_2.png' +import AdministrationImage3 from '@/assets/administration_block_3.png' + +import { Button } from '@/components/Button' +import { QuickNav } from '@/components/QuickNav' + +export default function Agent() { + const button = ( + + ) + + return ( + + + + +
{button}
+ + +

+ Les administrations publiques doivent faire face à + des défis uniques en matière de gestion, de communication et de + sécurité des données.{' '} + + La Suite propose des solutions numériques adaptées, sécurisées et + interconnectées + {' '} + pour répondre aux besoins de la sphère publique. +

+ + + +

+ Pourquoi choisir La Suite pour votre administration ? +

+
    +
  • + Garantissez la sécurité et la confidentialité des + informations traitées par vos services. +
    • +
  • + Centralisez et gérez vos données de manière{' '} + efficace grâce à des outils de collaboration + modernes. +
    • +
  • + Profitez de l'interopérabilité entre les + applications de La Suite pour fluidifier vos missions. +
    • +
+ + +

ProConnect

+
    +
  • + Intégrez ProConnect à vos propres applications pour offrir à vos + agents une connexion simplifiée et sécurisée à travers toute votre + administration. +
    • +
  • + ProConnect centralise l'accès à vos outils en fédérant les + identités de plusieurs ministères et agences de l'État, éliminant + ainsi le besoin de multiples mots de passe et simplifiant la + gestion des comptes. +
    • +
+ + +

+ Exemples concrets d'utilisation +

+
    +
  • + Organisation d'événements et de visios avec + webinaire.gouv.fr pour des webinaires, des réunions d'équipe et + des ateliers. +
    • +
  • + Partage sécurisé de documents avec Résana pour le + stockage et FranceTransfert pour transmettre des fichiers + volumineux en toute confiance. +
    • +
  • + Des feuilles de calcul avec Grist pour + centraliser, analyser et collaborer sur vos projets. +
    • +
+ + + {button} + + ) +} diff --git a/src/pages/agent/index.tsx b/src/pages/agent/index.tsx new file mode 100644 index 0000000..2b416c5 --- /dev/null +++ b/src/pages/agent/index.tsx @@ -0,0 +1,86 @@ +import { Layout } from '@/components/Layout' +import { TITLE_SITE } from '@/constant' +import { Hero } from '@/sections/Hero' +import heroImage from '@/assets/hero_agent.png' +import { ContentSection } from '@/components/ContentSection' +import { DoubleBlock } from '@/sections/DoubleBlock' +import AgentImage1 from '@/assets/agent_block_1.png' +import AgentImage2 from '@/assets/agent_block_2.png' +import { Button } from '@/components/Button' +import { QuickNav } from '@/components/QuickNav' + +export default function Agent() { + const button = ( + + ) + + return ( + + + + +
{button}
+ + +

+ En tant qu'agent public,{' '} + vous avez besoin d'outils adaptés à vos missions + quotidiennes et qui respectent les spécificités du service public. La + Suite met à votre disposition des{' '} + + applications sécurisées, open-source, et interconnectées qui + facilitent la collaboration, la communication et l'organisation + +

+ + + +

+ Pourquoi choisir La Suite ? +

+
    +
  • + Un environnement sécurisé conçu pour répondre aux + exigences de l'État. +
    • +
  • + Des outils simples à utiliser, même sans + expertise technique. +
    • +
  • + Une interopérabilité entre les applications pour + un flux de travail sans friction. +
    • +
+ + +

+ Exemples concrets d'utilisation +

+
    +
  • + Communication simplifiée avec Tchap pour échanger + instantanément avec vos collègues. +
    • +
  • + Organisation facilitée avec Resana pour stocker, + partager et collaborer sur vos documents en toute sécurité. +
    • +
  • + Réunions distantes facilitées grâce à WebConf + pour tenir vos réunions à distance dans un cadre sécurisé +
    • +
+ + + {button} + + ) +} diff --git a/src/pages/editeur/index.tsx b/src/pages/editeur/index.tsx new file mode 100644 index 0000000..db8d721 --- /dev/null +++ b/src/pages/editeur/index.tsx @@ -0,0 +1,76 @@ +import { Layout } from '@/components/Layout' +import { TITLE_SITE } from '@/constant' +import { Hero } from '@/sections/Hero' +import heroImage from '@/assets/hero_editeur.png' +import { ContentSection } from '@/components/ContentSection' +import { DoubleBlock } from '@/sections/DoubleBlock' +import EditeurImage1 from '@/assets/editeur_block_1.png' +import AgentImage2 from '@/assets/agent_block_2.png' +import { Button } from '@/components/Button' +import { QuickNav } from '@/components/QuickNav' + +export default function Editeur() { + const button = ( + + ) + + return ( + + + + +
{button}
+ + + +

+ ProConnect : Simplifiez et sécurisez l’accès à vos services + numériques +

+

+ ProConnect est la{' '} + solution d'authentification centralisée de La Suite + Numérique, simplifiant l'accès aux services numériques publics.{' '} +
+
+ Les utilisateurs se connectent à leurs outils quotidiens avec une{' '} + seule identité numérique, éliminant la gestion de + multiples identifiants.
+
+ ProConnect assure une expérience fluide et respecte + les normes de sécurité les plus élevées, + s'intégrant aux systèmes publics et privés. +

+ + +

+ Éditeurs : Intégrez ProConnect et optimisez vos solutions +

+

+ ProConnect, au cœur de La Suite Numérique de + l'État, offre une{' '} + authentification unifiée et sécurisée.
+
+ Éditeurs, intégrez ProConnect à vos produits pour participer à la{' '} + transformation numérique. Bénéficiez de{' '} + l'interopérabilité avec les services de la Suite + Numérique et offrez une authentification simplifiée{' '} + conforme aux standards de l'État. +

+ +
+ + {button} + + ) +} diff --git a/src/pages/products/index.tsx b/src/pages/products/index.tsx new file mode 100644 index 0000000..bc126fc --- /dev/null +++ b/src/pages/products/index.tsx @@ -0,0 +1,117 @@ +import { Layout } from '@/components/Layout' +import { TITLE_SITE } from '@/constant' +import Image from 'next/image' +import heroImage from '@/assets/nuancier.webp' +import { Callout } from '@/components/Callout' +import { ContentSection } from '@/components/ContentSection' +import { QuickNav } from '@/components/QuickNav' +import { PRODUCTS } from '@/utils/products' + +export default function Products() { + return ( + + + + + + ) +} + +const Hero = () => { + return ( +
+
+ {''} + + Un quotidien simplifié grâce aux outils numériques interconnectés, + collaboratifs, innovants et souverains + +
+
+ ) +} + +const ProductsDetails = () => { + return ( + +
+ {Object.entries(PRODUCTS) + .filter(([, v]) => v.displayDetails) + .map( + ( + [ + , + { + logo, + screenshot, + keepRawScreenshot, + name, + url, + caption, + description, + items, + }, + ], + index + ) => ( +
+
+ + +
+

{description}

+
    + {items?.map((item, index) => ( +
  • + {item} +
    • + ))} +
+
+
+
+ {keepRawScreenshot ? ( + {name + ) : ( +
+ {name +
+ )} +
+
+ ) + )} +
+ + ) +} diff --git a/src/sections/DoubleBlock.tsx b/src/sections/DoubleBlock.tsx new file mode 100644 index 0000000..63faa19 --- /dev/null +++ b/src/sections/DoubleBlock.tsx @@ -0,0 +1,35 @@ +import { PropsWithChildren, ReactElement } from 'react' +import Image, { StaticImageData } from 'next/image' + +export const DoubleBlock = ({ + children, + image, + reverse = false, + fit = 'object-cover', +}: { + image: StaticImageData + reverse?: boolean + fit?: string +} & PropsWithChildren) => { + const ImageBlock = ( + + ) + + const ContentBlock =
{children}
+ + return ( +
+
+ {ContentBlock} +
+
{ImageBlock}
+
+ ) +} diff --git a/src/sections/Hero.tsx b/src/sections/Hero.tsx index 2806387..d1bc05a 100644 --- a/src/sections/Hero.tsx +++ b/src/sections/Hero.tsx @@ -1,9 +1,6 @@ -import Image from 'next/image' +import Image, { StaticImageData } from 'next/image' import { Callout } from '@/components/Callout' import { URL_SITE } from '@/constant' - -import heroImage from '@/assets/hero-desktop.webp' -import heroImageMobile from '@/assets/hero-mobile.webp' import LogoSvg from '@/assets/logo/suite-numerique.svg' import type { ReactElement } from 'react' import { useTranslations } from '@/locales/useTranslations' @@ -11,40 +8,46 @@ import { useTranslations } from '@/locales/useTranslations' export const Hero = ({ intro, callout, + image, + imageClassName, + backgroundImage = true, }: { intro: ReactElement | string callout: ReactElement | string + image: StaticImageData + imageClassName?: string + backgroundImage?: boolean }) => { const t = useTranslations() + const background = backgroundImage + ? 'md:bg-[url(/assets/bg-nid-abeille.webp)] md:bg-no-repeat md:bg-center' + : '' return (
-
+

{URL_SITE}

-
+
{intro}
{t('homepage.hero_img_alt')} - {t('homepage.hero_img_alt')} diff --git a/src/sections/Initiatives.tsx b/src/sections/Initiatives.tsx index 6b08f0d..6d1ad44 100644 --- a/src/sections/Initiatives.tsx +++ b/src/sections/Initiatives.tsx @@ -74,7 +74,7 @@ export const Initiatives = ({ items: Array> }) => ( <> - +

Contribuer à La Suite numérique, c’est possible !

diff --git a/src/sections/Products.tsx b/src/sections/Products.tsx new file mode 100644 index 0000000..95f886e --- /dev/null +++ b/src/sections/Products.tsx @@ -0,0 +1,58 @@ +import { ContentSection } from '@/components/ContentSection' +import Image from 'next/image' +import { Button } from '@/components/Button' +import { PRODUCTS } from '@/utils/products' + +const PRODUCTS_GRID = [ + 'Messagerie', + 'Tchap', + 'Resana', + 'Grist', + 'France Transfert', + 'Webconf', + 'Webinaire', + 'AudioConf', + 'Note Pad', + 'Docs', +] + +export const Products = () => { + return ( + +
+ {PRODUCTS_GRID.map((name) => { + // @ts-ignore + const hasLink = PRODUCTS[name]?.url + const logo = PRODUCTS[name]?.logo + const content = ( +
+
+ {`Logo +
+ +

+ {name} +

+
+ ) + + return ( + + {content} + + ) + })} +
+ + + ) +} diff --git a/src/utils/products.tsx b/src/utils/products.tsx new file mode 100644 index 0000000..eb197ab --- /dev/null +++ b/src/utils/products.tsx @@ -0,0 +1,219 @@ +import TchapLogo from '@/assets/products/tchap.svg' +import TchapScreenshot from '@/assets/products/tchap_screenshot.png' +import ResanaLogo from '@/assets/products/resana.svg' +import ResanaScreenshot from '@/assets/products/resana_screenshot.webp' +import WebinaireLogo from '@/assets/products/webinaire.svg' +import WebinaireScreenshot from '@/assets/products/webinaire_screenshot.webp' +import VisioLogo from '@/assets/products/visio.svg' +import VisioScreenshot from '@/assets/products/visio_screenshot.webp' +import PadLogo from '@/assets/products/pad.svg' +import PadScreenshot from '@/assets/products/pad_screenshot.png' +import GristLogo from '@/assets/products/grist.svg' +import GristScreenshot from '@/assets/products/grist_screenshot.png' +import FranceTransfertLogo from '@/assets/products/france_transfert.svg' +import FranceTransfertScreenshot from '@/assets/products/france_transfert_screenshot.png' +import MessagerieLogo from '@/assets/products/messagerie.svg' +import MessagerieScreenshot from '@/assets/products/messagerie_screenshot.webp' +import { StaticImageData } from 'next/image' +import AudioConfSvg from '@/assets/products/audioconf.svg' +import DocsSvg from '@/assets/products/docs.svg' +import ContactSvg from '@/assets/products/contact.svg' +import EquipesSvg from '@/assets/products/equipes.svg' + +export const PRODUCTS: Record< + string, + { + logo: StaticImageData + screenshot?: StaticImageData + keepRawScreenshot?: boolean + name?: string + url?: string + caption?: string + description?: string + items?: React.ReactNode[] + displayDetails?: boolean + } +> = { + Tchap: { + displayDetails: true, + logo: TchapLogo, + screenshot: TchapScreenshot, + keepRawScreenshot: true, + name: 'Tchap', + url: 'https://tchap.beta.gouv.fr/', + caption: 'la messagerie instantanée de la sphère publique', + description: + 'Envoyer des messages, faire des appels, et rechercher ses interlocuteurs sur l’annuaire', + items: [ + <> + Retrouvez tous vos interlocuteurs de la sphère publique + , + <> + Créez et gérez des salons, avec différents niveaux + d’accès + , + <> + Faites des appels ou des visios en 1:1 en un clic + , + ], + }, + Resana: { + displayDetails: true, + logo: ResanaLogo, + screenshot: ResanaScreenshot, + name: 'Resana', + url: 'https://resana.numerique.gouv.fr/public/', + caption: 'l’espace de stockage partagé par plus de 400000 agents publics', + description: + 'Stockez tous vos fichiers (documents, images, feuilles de calcul) 
à un seul endroit. Organisez vos espaces et partagez-les à qui 
vous voulez, en toute sécurité', + items: [ + <> + Stockez et partagez des fichiers + , + <> + Coéditez des documents en ligne (textes, tableurs et + présentations) + , + <> + Créez des questionnaires et des votes{' '} + en ligne + , + ], + }, + Webinaire: { + displayDetails: true, + logo: WebinaireLogo, + screenshot: WebinaireScreenshot, + name: 'Webinaire', + url: 'https://webinaire.numerique.gouv.fr/', + caption: 'la plateforme de webinaires dédiée à la sphère publique', + description: + 'Organisez et participez à des webinaires en toute simplicité. Planifiez, diffusez et collaborez en direct avec vos collègues, le tout dans un environnement sécurisé', + items: [ + <> + Partagez votre écran, une présentation ou un tableau + blanc collaboratif + , + <> + Enregistrez la vidéo et partagez la aux participants + , + <> + Invitez des modérateurs et créez une salle d'attente + , + ], + }, + Webconf: { + displayDetails: true, + logo: VisioLogo, + screenshot: VisioScreenshot, + name: 'Webconf', + url: 'https://webconf.numerique.gouv.fr/', + caption: + 'la solution de visioconférence pour les agents de la sphère publique', + description: + 'Tenez vos réunions à distance en toute simplicité. Connectez-vous avec vos collègues en toute sécurité, sans installation, pour des échanges fluides et efficaces', + items: [ + <> + Lien personnalisés + , + <> + Organisation de sondages + , + ], + }, + 'Note Pad': { + displayDetails: true, + logo: PadLogo, + screenshot: PadScreenshot, + name: 'Note Pad', + url: 'https://pad.numerique.gouv.fr/', + caption: + 'le meilleur moyen d’écrire et de partager vos notes au format Markdown', + description: + 'Créez, éditez et collaborez en ligne. Tout est sauvegardé automatiquement pour un travail fluide et sécurisé', + items: [ + <> + Choisissez la vue que vous préférez : tout en markdown + ou avec l’aperçu final. + , + <> + Bénéficiez d’une correction orthographique + , + ], + }, + Grist: { + displayDetails: true, + logo: GristLogo, + screenshot: GristScreenshot, + name: 'Grist', + url: 'https://grist.numerique.gouv.fr/', + caption: 'un tableur collaboratif simple, 
flexible et puissant', + description: + 'Créez, gérez et analysez vos données dans un environnement simple et intuitif. Collaborez en temps réel avec vos collègues tout en assurant la sécurité de vos informations', + items: [ + <> + Construisez des outils métiers sans avoir à coder + , + <> + Gagnez du temps dans le suivi de vos missions + , + <> + Travaillez sereinement à plusieurs sur vos jeux de + données + , + ], + }, + 'France Transfert': { + displayDetails: true, + logo: FranceTransfertLogo, + screenshot: FranceTransfertScreenshot, + name: 'France Transfert', + url: 'https://francetransfert.numerique.gouv.fr/', + caption: 'partagez vos fichiers en toute sécurité', + description: + 'Transférez vos documents en toute confiance, même les plus volumineux. Partagez facilement avec vos collègues, tout en garantissant la confidentialité et la sécurité des données', + items: [ + <> + Transférez des fichiers lourds + , + ], + }, + Messagerie: { + displayDetails: true, + logo: MessagerieLogo, + screenshot: MessagerieScreenshot, + name: 'Messagerie', + url: 'https://webmail.numerique.gouv.fr/', + caption: + 'une boite mail et agenda open-source sécurisés pour les petites équipes', + description: + 'Gérez vos emails et vos rendez-vous dans un environnement sécurisé conçu pour les besoins des agents du service public', + items: [ + <> + Gérez votre boîte aux lettres avec une interface + dernière génération + , + <> + Partagez vos agendas facilement + , + ], + }, + AudioConf: { + displayDetails: false, + logo: AudioConfSvg, + url: 'https://www.numerique.gouv.fr/outils-agents/audioconference-etat/', + }, + Docs: { + displayDetails: false, + logo: DocsSvg, + url: 'https://docs.numerique.gouv.fr', + }, + Contact: { + displayDetails: false, + logo: ContactSvg, + }, + Equipes: { + displayDetails: false, + logo: EquipesSvg, + }, +} diff --git a/tailwind.config.ts b/tailwind.config.ts index f46f9b3..80bbd67 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -10,8 +10,10 @@ const figmaColors = { 'grey-3': '#4D4D4D', 'grey-4': '#DDDDDD', 'grey-5': '#3A3A3A', + 'grey-6': '#FAF9F9', 'blue-1': '#000091', 'black-1': '#161616', + transparent: 'transparent', } const config: Config = {