feat: add home page (#1051)

SocialGouv · Sep 18, 2023 · b84bac6 · b84bac6
1 parent 2d92495
commit b84bac6
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 5 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,12 +1,111 @@
+import Image from "next/image"
 import { fr } from "@codegouvfr/react-dsfr"
 
+import imageHome from "./tour-mirabeau.jpg"
+import imageAgile from "./(la-fabrique)/a-propos/images/agile.svg"
+import imageCoreTeam from "./(la-fabrique)/equipe/images/core-team.svg"
+import launchingImage from "./(la-fabrique)/notre-offre/images/launching.svg"
+import RandomStartups from "@/components/random-startups"
+import CallForIdeas from "@/components/call-for-ideas"
+import Link from "next/link"
+
 export default function Home() {
+  const blueCumulus = fr.colors.decisions.background.alt.blueCumulus.default
+
   return (
     <>
+      <div className="fr-container">
+        <Image
+          sizes="100vw"
+          src={imageHome}
+          alt="photo de la tour Mirabeau"
+          style={{ width: "auto", height: "100%" }}
+        />
+        <h2 className="fr-h2 fabnum-title-h2 mt-12">La Fabrique Numérique</h2>
+        <section className="flex">
+          <div className="flex flex-col items-center flex-1">
+            <div className="flex h-60 items-center justify-center">
+              <Image
+                sizes="100vw"
+                src={imageAgile}
+                alt="illustration de la méthode agile"
+                style={{ width: "80%", height: "auto" }}
+              />
+            </div>
+            <Link
+              href="/a-propos"
+              className="font-bold text-2xl text-blue-900 mt-6 no-underline"
+            >
+              A propos
+            </Link>
+          </div>
+          <div className="flex flex-col items-center flex-1">
+            <div className="flex h-60 items-center justify-center">
+              <Image
+                sizes="100vw"
+                src={launchingImage}
+                alt="illustration de la méthode 1"
+                style={{ width: "80%", height: "auto" }}
+              />
+            </div>
+            <Link
+              href="/notre-offre"
+              className="font-bold text-2xl text-blue-900 mt-6 no-underline"
+            >
+              Notre offre
+            </Link>
+          </div>
+          <div className="flex flex-col items-center flex-1">
+            <div className="flex h-60 items-center justify-center">
+              <Image
+                sizes="100vw"
+                src={imageCoreTeam}
+                alt="illustration de la méthode 1"
+                style={{ width: "100%", height: "auto" }}
+              />
+            </div>
+            <Link
+              href="/equipe"
+              className="font-bold text-2xl text-blue-900 mt-6 no-underline"
+            >
+              L&apos;équipe
+            </Link>
+          </div>
+        </section>
+      </div>
+      <section className="my-12 pb-12" style={{ backgroundColor: blueCumulus }}>
+        <div className="fr-container pt-12">
+          <RandomStartups />
+        </div>
+        <div className="flex justify-center">
+          <Link href="/startups" className="fr-btn px-24">
+            TOUTES LES STARTUPS
+          </Link>
+          {/* <button className="fr-btn px-24">TOUTES LES STARTUPS</button> */}
+        </div>
+      </section>
+      <section>
+        <div className="fr-container flex font-bold text-xl text-blue-900 py-12 pl-24">
+          <div className="flex flex-col flex-1">
+            <div className="text-5xl">27</div>
+            <div>Startups</div>
+          </div>
+          <div className="flex flex-col flex-1">
+            <div className="text-5xl">11</div>
+            <div>Intrapreneurs</div>
+          </div>
+          <div className="flex flex-col flex-1">
+            <div className="text-5xl">243</div>
+            <div>Projets open-source</div>
+          </div>
+          <div className="flex flex-col flex-1">
+            <div className="text-5xl">53043</div>
+            <div>Commits</div>
+          </div>
+        </div>
+      </section>
       <section>
-        <h1 className={fr.cx("fr-h1")}>
-          Santé, Solidarité, Travail: nos startups à votre service
-        </h1>
+        <CallForIdeas />
       </section>
     </>
   )

diff --git a/src/app/tour-mirabeau.jpg b/src/app/tour-mirabeau.jpg
diff --git a/src/components/call-for-ideas/index.tsx b/src/components/call-for-ideas/index.tsx
@@ -3,6 +3,7 @@ import { fr } from "@codegouvfr/react-dsfr"
 
 import "./styles/index.css"
 import imageLightBulb from "./images/lightbulb.svg"
+import Link from "next/link"
 
 export default function CallForIdeas() {
   const blueCumulus = fr.colors.decisions.background.alt.blueCumulus.default
@@ -21,7 +22,7 @@ export default function CallForIdeas() {
           Participez à l&apos;amélioration du service public des Ministères
           Sociaux en nous proposant vos idées de startups
         </p>
-        <button className="fr-btn">JE POSTULE !</button>
+        <button className="fr-btn px-24">JE POSTULE !</button>
         <Image
           width={130}
           height={130}

diff --git a/src/components/call-for-ideas/styles/index.css b/src/components/call-for-ideas/styles/index.css
@@ -10,7 +10,7 @@
   @apply text-blue-900;
 }
 
-.call-for-ideas .fr-container p:last-child {
+.call-for-ideas .fr-container .fr-text--xl {
   @apply font-bold text-blue-900 text-lg py-3;
 }