Add content block (#5)

src/components/HoneContentBlock.astro

@@ -0,0 +1,101 @@
+---
+const stats = {
+    attendees: {
+        label: 'Participants',
+        number: '550',
+    },
+    days: {
+        label: 'Jours',
+        number: '2',
+    },
+    sessions: {
+        label: 'Sessions',
+        number: '85',
+    },
+    tracks: {
+        label: 'Tracks',
+        number: '5',
+    },
+}
+---
+
+<div class="container">
+    <div>
+        <h2 class="container-title">Contenu</h2>
+        <p>
+            Plusieurs conférences et ateliers en parallèle sur 2 journées, sujets transverses allant des outils,
+            méthodologies de conception et développement logiciel jusqu’à la gestion de produit et notamment
+            l’expérience utilisateur.
+        </p>
+        <p>
+            Les valeurs que porte Sunny Tech sont définies et partagées par ses membres, vous pourrez les retrouver le
+            jour de l'évènement.
+        </p>
+    </div>
+
+    <div class="statistics-block">
+        {
+            Object.entries(stats).map(([_, stat]) => (
+                <div class="item">
+                    <div class="numbers">{stat.number}</div>
+                    <div class="label">{stat.label}</div>
+                </div>
+            ))
+        }
+    </div>
+</div>
+
+<style>
+    .container {
+        padding: 64px 0;
+        display: grid;
+        grid-gap: 32px;
+        grid-template-columns: 1fr;
+        max-width: var(--max-container-width);
+        margin: 0 auto;
+    }
+
+    .statistics-block {
+        width: 100%;
+        display: grid;
+        grid-gap: 32px 16px;
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    h2 {
+        font-weight: 500;
+        font-size: 32px;
+        margin-bottom: 20px;
+    }
+
+    .numbers {
+        font-size: 40px;
+    }
+
+    .numbers::after {
+        content: '';
+        display: block;
+        height: 2px;
+        width: 64px;
+        background-color: var(--default-primary-color);
+    }
+
+    .label {
+        margin-top: 4px;
+    }
+
+    @media (min-width: 640px) {
+        .content {
+            grid-gap: 64px;
+            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+        }
+
+        .statistics-block {
+            grid-gap: 32px;
+        }
+
+        .numbers {
+            font-size: 56px;
+        }
+    }
+</style>

src/pages/index.astro

@@ -5,6 +5,7 @@ import SponsorsBlock from '../components/SponsorsBlock.astro'
 import FooterBlock from '../components/footer/FooterBlock.astro'
 import Menu from '../components/Menu.astro'
 import Hero from '../components/Hero.astro'
+import HoneContentBlock from '../components/HoneContentBlock.astro'
 
 const OPENPLANNER_URL = import.meta.env.OPENPLANNER_URL
 const response = await fetch(OPENPLANNER_URL)
@@ -16,6 +17,8 @@ const openPlannerData: OpenPlannerType = await response.json()
     <main>
         <Hero />
 
+        <HoneContentBlock />
+
         <SponsorsBlock sponsorCategories={openPlannerData.sponsors} />
     </main>