🎨 Add social media colors

democraftmc · Dec 1, 2024 · b7ffb39 · b7ffb39
1 parent b6195ac
commit b7ffb39
Showing 1 changed file with 28 additions and 14 deletions.
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -1,6 +1,5 @@
 <footer class="bg-base-200 text-base-content px-4 pt-10 pb-32 lg:pb-10">
-  <div
-    class="grid grid-cols-2 lg:grid-cols-4 justify-items-center">
+  <div class="grid grid-cols-2 lg:grid-cols-4 justify-items-center">
     <div class="flex">
       <img
         src="https://us-east-1.tixte.net/uploads/cdn.democraft.fr/logo_rond.png"
@@ -10,28 +9,43 @@
     <div>
       <h3 class="text-xl font-bold">Nos Résaux</h3>
       <ul class="px-1">
-        <li><a>Discord</a></li>
-        <li><a>Instagram</a></li>
-        <li><a>Bluesky</a></li>
-        <li><a>Youtube</a></li>
+        <li>
+          <a class="link link-hover text-indigo-600 hover:text-indigo-700"
+            ><i class="fa-brands fa-discord"></i> Discord</a
+          >
+        </li>
+        <li>
+          <a class="link link-hover text-purple-500 hover:text-purple-700"
+            ><i class="fa-brands fa-instagram"></i> Instagram</a>
+        </li>
+        <li>
+          <a class="link link-hover link-info"
+            ><i class="fa-brands fa-bluesky"></i> Bluesky</a
+          >
+        </li>
+        <li>
+          <a class="link link-hover link-error"
+            ><i class="fa-brands fa-youtube"></i> Youtube</a
+          >
+        </li>
       </ul>
     </div>
     <div>
       <h3 class="text-xl font-bold">Liens Utiles</h3>
       <ul class="px-1">
-        <li><a>Item 1</a></li>
-        <li><a>Item 2</a></li>
-        <li><a>Item 3</a></li>
-        <li><a>Item 4</a></li>
+        <li><a class="link link-hover">Item 1</a></li>
+        <li><a class="link link-hover">Item 2</a></li>
+        <li><a class="link link-hover">Item 3</a></li>
+        <li><a class="link link-hover">Item 4</a></li>
       </ul>
     </div>
     <div>
       <h3 class="text-xl font-bold">Légal</h3>
       <ul class="px-1">
-        <li><a>Statut</a></li>
-        <li><a>Règlement</a></li>
-        <li><a>CGU/CGV</a></li>
-        <li><a>PdC</a></li>
+        <li><a class="link link-hover">Statut</a></li>
+        <li><a class="link link-hover">Règlement</a></li>
+        <li><a class="link link-hover">CGU/CGV</a></li>
+        <li><a class="link link-hover">PdC</a></li>
       </ul>
     </div>
   </div>