feat: add call for ideas component (#1041)

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

@@ -7,6 +7,7 @@ import getStartups from "../get-startups"
 import RemoteContent from "./remote-content"
 import LocalContent from "./local-content"
 import RandomStartups from "@/components/random-startups"
+import CallForIdeas from "@/components/call-for-ideas"
 
 export async function generateStaticParams() {
   const startups = getStartups()
@@ -40,7 +41,7 @@ export default async function StartupPage({
   } = startup
 
   return (
-    <div className="startups-details">
+    <div className="startup-page">
       <div className="fr-py-6w">
         <div className="fr-container flex">
           <div className="flex-1">
@@ -95,6 +96,7 @@ export default async function StartupPage({
       />
       <LocalContent id={id} />
       <RandomStartups />
+      <CallForIdeas />
     </div>
   )
 }

src/components/call-for-ideas.tsx

@@ -0,0 +1,23 @@
+import { CallOut } from "@codegouvfr/react-dsfr/CallOut"
+
+export default function CallForIdeas() {
+  return (
+    <div className="call-for-ideas fr-pb-6w">
+      <div className="fr-container">
+        <CallOut
+          buttonProps={{
+            children: "Je soumets mon idée !",
+            // onClick: function noRefCheck() {},
+          }}
+          iconId="ri-information-line"
+          title="VOUS AVEZ UNE IDÉE ?"
+        >
+          Vous êtes témoin d&apos;un problème récurrent que rencontrent les
+          citoyens ou les agents publics ? Participez à l&apos;amélioration du
+          service public des minitères sociaux en proposant vos de startups
+          d&apos;État.
+        </CallOut>
+      </div>
+    </div>
+  )
+}

src/components/random-startups.tsx

@@ -7,12 +7,16 @@ export default function RandomStartups() {
   const randomStartups = getRandomEntries(startups, 4)
 
   return (
-    <div className="random-startups fr-container">
-      <h2 className="fr-h2">Découvrez d&apos;autres startups de la Fabrique</h2>
-      <div className="grid grid-cols-4 gap-6 fr-mt-6w">
-        {randomStartups.map((startup) => (
-          <Item key={startup.id} startup={startup} />
-        ))}
+    <div className="random-startups fr-pb-6w">
+      <div className="fr-container">
+        <h2 className="fr-h2">
+          Découvrez d&apos;autres startups de la Fabrique
+        </h2>
+        <div className="grid grid-cols-4 gap-6 fr-mt-6w">
+          {randomStartups.map((startup) => (
+            <Item key={startup.id} startup={startup} />
+          ))}
+        </div>
       </div>
     </div>
   )