🎨 News on home page

src/layouts/Home.astro

@@ -15,12 +15,7 @@ const { title = "DEMOCRAFT" } = Astro.props;
     <meta name="generator" content={Astro.generator} />
     <title>DEMOCRAFT-FRONT</title>
     <link rel="stylesheet" href="/fixes.css" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-      rel="stylesheet"
-    />
+    <link rel="stylesheet" href="/fonts/Satoshi.css" />
 
     <link
       rel="stylesheet"

src/pages/index.astro

@@ -4,11 +4,15 @@ import Hero from "../sections/Hero.astro";
 import Arg1 from "../sections/Arg1.astro";
 import Arg2 from "../sections/Arg2.astro";
 import Arg3 from "../sections/Arg3.astro";
+import News from "../sections/News.astro";
 ---
 
 <Layout>
   <Hero />
   <Arg1 />
   <Arg2 />
   <Arg3 />
+  <News />
+  <p>Nos Juex</p>
+  <p>Rejoindre</p>
 </Layout>

src/sections/Arg1.astro

@@ -1,18 +1,19 @@
 <div
   class="bg-base-100 grid grid-cols-1 md:grid-cols-2 py-12 px-2 lg:px-6 gap-2 justify-items-center">
   <div class="lg:p-12">
-    <h1 class="text-3xl lg:text-4xl text-center" id="1">
+    <h1 class="text-3xl lg:text-4xl text-center font-bold" id="1">
       Découvrez le <span class="underline">véritable</span> crossplay
     </h1>
     <p class="p-1 md:p-4 text-lg md:text-2xl">
       Dites bonjour à DEMOCRAFT, le <strong>premier serveur Minecraft</strong> mini-jeux
-      Français a accepter toutes les éditions du jeu.
+      Français a accepter toutes les éditions du jeu. Plus d'excuse pour ne pas jouer
+      avec vos amis, même ceux sur consoles !
     </p>
   </div>
   <div>
     <img
-      class="h-96 rounded-lg"
-      src="https://placehold.co/600x400?text=Hello+World&font=montserrat"
+      class="w-full rounded-lg bg-[url('/white.png')] dark:bg-[url('/dark.png')]"
+      src="/demomulti.png"
     />
   </div>
 </div>

src/sections/Arg2.astro

@@ -8,7 +8,7 @@
   </div>
   <div>
     <img
-      class="rounded-lg"
+      class="rounded-lg bg-[url('/white.png')] dark:bg-[url('/dark.png')]"
       src="https://placehold.co/600x400?text=Hello+World&font=montserrat"
     />
   </div>

src/sections/Arg3.astro

@@ -1,9 +1,8 @@
 <div
-  class="bg-primary flex flex-col-reverse md:flex-row py-12 px-2 lg:px-6 gap-2 justify-center text-primary-content">
-  <div class="lg:m-4 col-start-1 lg:col-start-2">
-    <h1 class="text-3xl lg:text-4xl text-center">
-      Un serveur <span class="underline">vraiment</span> ouvert à tous
-    </h1>
-    <p></p>
+  class="bg-[url('/white.png')] dark:bg-[url('/dark.png')] p-2 lg:p-6 gap-2">
+  <h1 class="text-3xl lg:text-4xl text-center">Powered by Pation™</h1>
+  <p class="text-center">Blablabla</p>
+  <div class="flex justify-center">
+    <a class="btn btn-primary w-32" href="/download">Télécharger</a>
   </div>
 </div>

src/sections/News.astro

@@ -0,0 +1,78 @@
+<p class="bg-base-100 text-center pixel pt-6 pb-8">Articles</p>
+<div class="grid grid-cols-2 md:grid-cols-5 bg-base-100 gap-6 p-4 pt-6">
+  <div class="row-span-2 col-span-2 card card-compact bg-base-300 mb-6">
+    <figure class="max-h-64">
+      <img src="/news/news1.png" alt="Shoes" />
+    </figure>
+    <div class="card-body">
+      <h2 class="card-title text-2xl">
+        Ménage de printemps sur le Launcheur !
+      </h2>
+      <p class="text-lg">
+        On vous sort un tout nouveau launcheur, et en prime il fonctionne. Avec
+        une interface épurée, et plein d'autres 'trucs' que je rajoute juste
+        après l'écriture pour tester le site.
+      </p>
+      <div class="card-actions justify-end">
+        <button class="btn btn-primary">Lire la suite</button>
+      </div>
+    </div>
+  </div>
+  <div class="grid grid-cols-1 md:grid-cols-2 col-span-3 gap-6">
+    <div class="card card-compact card-side bg-base-300">
+      <figure class="max-w-48">
+        <img class="object-cover h-full" src="/news/news2.png" alt="Shoes" />
+      </figure>
+      <div class="card-body max-w-52">
+        <h2 class="card-title">Shoes!</h2>
+        <p>
+          Quoi de mieux pour inviter la communauté à s'exprimer qu'un forum ? A
+          partir d'aujourd'hui, retrouvez notre forum dans l'onglet "Communauté"
+          de notre site web !
+        </p>
+        <div class="card-actions justify-end">
+          <button class="btn btn-secondary">Lire la suite</button>
+        </div>
+      </div>
+    </div>
+    <div class="card card-compact card-side bg-base-300">
+      <figure class="max-w-48">
+        <img class="object-cover h-full" src="/news/news3.png" alt="Shoes" />
+      </figure>
+      <div class="card-body max-w-52">
+        <h2 class="card-title">WTF C'est DEMOCRAFT ça ?</h2>
+        <p>
+          Et oui. On a non pas un mais 10 nouveaux logo. Vous vous y attendez
+          pas, hein ?
+        </p>
+        <div class="card-actions justify-end">
+          <button class="btn btn-secondary">Lire la suite</button>
+        </div>
+      </div>
+    </div>
+    <div class="card card-compact card-side bg-base-300">
+      <figure class="max-w-48">
+        <img class="object-cover h-full" src="/news/news4.png" alt="Shoes" />
+      </figure>
+      <div class="card-body max-w-52">
+        <h2 class="card-title">DEMOCRAFT en live à la CubedCon !</h2>
+        <p>Bienvenu à la première convention de DEMOCRAFT !</p>
+        <div class="card-actions justify-end">
+          <button class="btn btn-secondary">Lire la suite</button>
+        </div>
+      </div>
+    </div>
+    <div class="card card-compact card-side bg-base-300">
+      <figure class="max-w-48">
+        <img class="object-cover h-full" src="/news/news5.png" alt="Shoes" />
+      </figure>
+      <div class="card-body max-w-52">
+        <h2 class="card-title">WTF C'est DEMOCRAFT ça ?</h2>
+        <p>If a dog chews shoes whose shoes does he choose?</p>
+        <div class="card-actions justify-end">
+          <button class="btn btn-secondary">Lire la suite</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

tailwind.config.mjs

@@ -17,7 +17,7 @@ export default {
           "--rounded-btn": "0.5rem", 
         },
         dark: {
-          ...require("daisyui/src/theming/themes")["coffee"],
+          ...require("daisyui/src/theming/themes")["dark"],
           primary: "#f55",
         },
       },