Update ArchivesPage layout and styling 🦄 🔥👄🔥 🦄

src/components/pages/ArchivesPage/ArchivesPage.jsx

@@ -1,28 +1,30 @@
-import React from 'react';
-import { Link } from 'gatsby';
-import Layout from '@/components/layout/PageLayout/PageLayout';
-import Section from '@/components/shared/Section';
+import React from "react";
+import { Link } from "gatsby";
+import Layout from "@/components/layout/PageLayout/PageLayout";
+import Section from "@/components/shared/Section";
+import "./ArchivesPage.scss";
 
 const ArchivesPage = ({ events }) => (
   <Layout title="Archives">
     <Section>
       {events.map((event) => (
-        <div key={event.id}>
+        <div className="event-card" key={event.id}>
           <h2>{event.title}</h2>
-          <p>Date: {new Date(event.date).toLocaleDateString()}</p>
-          <p>Lieu: {event?.location?.name}</p>
+          <p className="event-date">Date: {new Date(event.date).toLocaleDateString()}</p>
+          <p className="event-location">Lieu: {event?.location?.name}</p>
           {event?.talks?.map((talk, index) => (
-            <div key={`event-${index}`}>
+            <div className="talk-card" key={`event-${index}`}>
               <h3>{talk?.title}</h3>
-              <p>
-                {console.log(talk)}
-                Personne présentant: {talk?.authors?.name}
-                {!talk?.authors &&
-                  'ERREUR: veuillez ajouter le fichier `.yml` pour cette personne dans le répertoire `data/authors`.'}
+              <p className="talk-author">
+                Personne présentant: {talk?.authors?.name || (
+                <span className="error-message">
+                    ERREUR: veuillez ajouter le fichier `.yml` pour cette personne dans le répertoire `data/authors`.
+                  </span>
+              )}
               </p>
             </div>
           ))}
-          <Link to={event.event_url}>Lien vers l'évènement</Link>
+          <Link className="event-link" to={event.event_url}>Lien vers l'évènement</Link>
         </div>
       ))}
     </Section>

src/components/pages/ArchivesPage/ArchivesPage.scss

@@ -1 +1,38 @@
-// TODO: fill this
+.event-card {
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  margin: 16px 0;
+  padding: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.event-date,
+.event-location,
+.talk-author {
+  margin: 8px 0;
+  font-size: 1rem;
+}
+
+.talk-card {
+  background: #f9f9f9;
+  border-left: 4px solid #007BFF;
+  padding: 8px 16px;
+  margin: 8px 0;
+}
+
+.error-message {
+  color: #dc3545;
+}
+
+.event-link {
+  display: inline-block;
+  margin-top: 8px;
+  color: #007BFF;
+  text-decoration: none;
+  transition: color 0.3s;
+
+  &:hover {
+    color: #0056b3;
+  }
+}