fix: startup page css

src/app/startups/[id]/page.tsx

@@ -67,6 +67,42 @@ export default async function StartupPage({
       <div className="fr-py-6w" style={{ backgroundColor: blueCumulus }}>
         <div className="fr-container">
           <div>
+            <Image
+              width={300}
+              height={300}
+              alt="logo de la startup"
+              src="https://placehold.co/300x300"
+            />
+          </div>
+          <div>
+            <div>
+              <div>Date de création</div>
+              <div>2022</div>
+            </div>
+            <div>
+              <div>Contact</div>
+              <div>{contact}</div>
+            </div>
+            <div>
+              <div>Statistiques</div>
+              <div>{stats_url}</div>
+            </div>
+            <div>
+              <div>Code source</div>
+              <div>{repository}</div>
+            </div>
+            <div>
+              <div>Sponsor</div>
+              <div>{sponsors}</div>
+            </div>
+            <div>
+              <div>Organisation</div>
+              <div>
+                {organisation.name} ({organisation.acronym})
+              </div>
+            </div>
+          </div>
+          {/* <div>
             <b>stats</b>: {stats_url}
           </div>
           <div>
@@ -92,7 +128,7 @@ export default async function StartupPage({
                 <div>{phase.end}</div>
               </div>
             ))}
-          </div>
+          </div> */}
         </div>
       </div>
 

src/components/call-for-ideas/index.tsx

@@ -0,0 +1,34 @@
+import Image from "next/image"
+import { fr } from "@codegouvfr/react-dsfr"
+
+import "./styles/index.css"
+import imageLightBulb from "./images/lightbulb.svg"
+
+export default function CallForIdeas() {
+  const blueCumulus = fr.colors.decisions.background.alt.blueCumulus.default
+
+  return (
+    <div className="call-for-ideas" style={{ backgroundColor: blueCumulus }}>
+      <div className="fr-container">
+        <h3 className="fr-h3">VOUS AVEZ UNE IDÉE ?</h3>
+        <p className="fr-text--lg">
+          Vous êtes témoin d&apos;un problème récurrent que rencontrent les
+          usagers ou les agents de notre administration ?<br />
+          Ce problème induit une réelle difficulté pour les citoyens en termes
+          d&apos;accès aux droits, d&apos;égalité des chances... ?
+        </p>
+        <p className="fr-text--xl">
+          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>
+        <Image
+          width={130}
+          height={130}
+          alt="image ampoule"
+          src={imageLightBulb}
+        />
+      </div>
+    </div>
+  )
+}

src/components/call-for-ideas/styles/index.css

@@ -0,0 +1,19 @@
+.call-for-ideas {
+
+}
+
+.call-for-ideas .fr-container {
+  @apply text-center mt-12 py-12 relative;
+}
+
+.call-for-ideas .fr-container h3 {
+  @apply text-blue-900;
+}
+
+.call-for-ideas .fr-container p:last-child {
+  @apply font-bold text-blue-900 text-lg py-3;
+}
+
+.call-for-ideas .fr-container img {
+  @apply absolute -top-14 left-0;
+}

src/components/mdx-component.tsx

@@ -13,13 +13,13 @@ export default function MDXComponent({
       <h1 className="fr-h1">{children}</h1>
     ),
     h2: ({ children }: { children: React.ReactNode }) => (
-      <h2 className="fr-h2">{children}</h2>
+      <h2 className="fr-h2 text-blue-900">{children}</h2>
     ),
     h3: ({ children }: { children: React.ReactNode }) => (
       <h2 className="fr-h3">{children}</h2>
     ),
     p: ({ children }: { children: React.ReactNode }) => (
-      <p className="mb-6">{children}</p>
+      <p className="fr-text--md text-justify">{children}</p>
     ),
     ul: ({ children }: { children: React.ReactNode }) => (
       <ul className="mb-6">{children}</ul>

src/components/random-startups.tsx

@@ -1,5 +1,5 @@
-import Item from "@/components/startups-list/item"
 import getStartups from "@/utils/get-startups"
+import Item from "@/components/startups-list/item"
 import getRandomEntries from "@/utils/get-random-entries"
 
 export default function RandomStartups() {
@@ -9,7 +9,7 @@ export default function RandomStartups() {
   return (
     <div className="random-startups fr-pb-6w">
       <div className="fr-container">
-        <h2 className="fr-h2">
+        <h2 className="fr-h2 fabnum-title-h2">
           Découvrez d&apos;autres startups de la Fabrique
         </h2>
         <div className="grid grid-cols-4 gap-6 fr-mt-6w">

src/styles/globals.css

@@ -39,3 +39,24 @@ body {
   border: 1px solid black;
   @apply border-blue-900;
 }
+
+.fabnum-title-h2 {
+  @apply
+  flex
+  pb-6
+  relative
+  items-center
+  justify-center;
+}
+
+.fabnum-title-h2::after {
+  content: " ";
+  @apply
+  w-1/4
+  border
+  absolute
+  bottom-0
+  border-b-2
+  border-blue-900
+  ;
+}