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_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_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/components/ContentSection.tsx b/src/components/ContentSection.tsx index afbca8e..14d2643 100644 --- a/src/components/ContentSection.tsx +++ b/src/components/ContentSection.tsx @@ -5,6 +5,8 @@ interface ContentSectionProps Omit, 'className'> { background?: 'gray' padding?: boolean + horizontalPadding?: boolean + verticalPadding?: boolean gap?: string } @@ -12,15 +14,17 @@ export const ContentSection: React.FC = ({ children, background, padding = true, + horizontalPadding = true, + verticalPadding = true, gap = 'gap-[50px]', ...props }) => { return (
{children} diff --git a/src/pages/administration/index.tsx b/src/pages/administration/index.tsx new file mode 100644 index 0000000..613e7e7 --- /dev/null +++ b/src/pages/administration/index.tsx @@ -0,0 +1,67 @@ +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' + +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 AgentConnect à vos propres applications pour offrir à vos agents une connexion simplifiée et sécurisée à travers toute votre administration.
    • +
  • AgentConnect centralise l'accès à vos outils en s'intégrant avec plusieurs ministères et agences de l'État, éliminant ainsi le besoin de multiples mots de passe et simplifiant la gestion des identités.
    • +
+ + +

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..de3fc37 --- /dev/null +++ b/src/pages/agent/index.tsx @@ -0,0 +1,58 @@ +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' + +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..0afdb4a --- /dev/null +++ b/src/pages/editeur/index.tsx @@ -0,0 +1,41 @@ +import { Layout } from '@/components/Layout' +import { TITLE_SITE } from '@/constant' +import { Hero } from '@/sections/Hero' +import heroImage from '@/assets/editeur_hero.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' + +export default function Editeur() { + + return ( + + + + +

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, spécialement conçue pour simplifier l’accès aux services numériques de la sphère publique.

+ En un clic, les utilisateurs peuvent se connecter à l’ensemble de leurs outils quotidiens à l’aide d’une seule identité numérique, éliminant la complexité liée à la gestion de multiples identifiants.

+ En plus d’assurer une expérience fluide, ProConnect garantit le respect des normes de sécurité les plus élevées, s’intégrant de manière transparente 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, est un levier clé pour une authentification unifiée et sécurisée au sein de l’écosystème public et au-delà.

En tant qu’éditeurs, vous avez l’opportunité de participer à cette transformation numérique en intégrant ProConnect à vos produits. Cette solution vous permet de bénéficier de l’interopérabilité avec les services de la Suite Numérique, tout en offrant à vos utilisateurs une authentification simplifiée et conforme aux standards de sécurité de l’État. +

+ +
+ + + ) +} diff --git a/src/sections/DoubleBlock.tsx b/src/sections/DoubleBlock.tsx new file mode 100644 index 0000000..a1592dd --- /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 ed70563..78fed98 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.png' -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,37 +8,44 @@ 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')} - La Suite numérique fédère agents et professionnels autour d'applications open-source interconnectées pour simplifier leur quotidien + {callout}