Dark Mode + update credits in the footer (#1)

- Dark Mode + update credits in the footer (1d17fd0cadb859e56a569ad35e876cb2408c0731)


Co-authored-by: Anne-Charlotte <Anne-Charlotte@users.noreply.huggingface.co>

index.html

@@ -13,15 +13,16 @@
     }
 
     :root {
-      --background: #F6F6F8;
-      --foreground: #333333;
-      --card: hsl(0 0% 100%);
-      --card-foreground: hsl(240 10% 3.9%);
-      --primary: #9B59B6;
-      --primary-foreground: hsl(0 0% 100%);
-      --muted: #E8E8EB;
-      --muted-foreground: #878789;
-      --border: #E0E0E0;
+      --background: hsl(220, 13%, 8%);
+      --foreground: hsl(210, 40%, 98%);
+      --card: hsl(220, 13%, 12%);
+      --card-foreground: hsl(210, 40%, 98%);
+      --primary: hsl(36, 100%, 50%);
+      --primary-foreground: hsl(0, 0%, 100%);
+      --muted: hsl(220, 13%, 18%);
+      --muted-foreground: hsl(215, 16%, 60%);
+      --border: hsl(220, 13%, 20%);
+      --radius: 0.5rem;
     }
 
     body {
@@ -261,54 +262,79 @@
 
     /* Footer */
     footer {
-      background-color: var(--background);
       border-top: 1px solid var(--border);
       padding: 3rem 0;
     }
-
     .footer-grid {
       display: grid;
       grid-template-columns: 1fr;
       gap: 2rem;
       margin-bottom: 2rem;
     }
-
     @media (min-width: 768px) {
       .footer-grid {
         grid-template-columns: repeat(3, 1fr);
       }
     }
-
-    .footer-section h4 {
-      font-size: 0.875rem;
-      font-weight: 600;
-      color: var(--foreground);
-      margin-bottom: 0.75rem;
-    }
-
-    .footer-section ul {
-      list-style: none;
+    .footer-column {
       display: flex;
       flex-direction: column;
-      gap: 0.5rem;
+      gap: 1rem;
     }
-
-    .footer-section a {
+    .author-section {
+      display: flex;
+      align-items: center;
+      gap: 1.25rem;
+    }
+    .author-link {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      text-decoration: none;
+      color: inherit;
+    }
+    .author-link:hover .author-name {
+      color: var(--primary);
+    }
+    .author-link:hover .author-avatar {
+      border-color: var(--primary);
+    }
+    .author-avatar {
+      width: 3.5rem;
+      height: 3.5rem;
+      border-radius: 9999px;
+      border: 2px solid white;
+      transition: border-color 0.2s;
+    }
+    .author-intro {
       font-size: 0.875rem;
       color: var(--muted-foreground);
-      text-decoration: none;
+    }
+    .author-name {
+      font-size: 1.125rem;
+      font-weight: 600;
       transition: color 0.2s;
     }
-
-    .footer-section a:hover {
-      color: var(--primary);
+    .follow-btn {
+      display: inline-flex;
+      align-items: center;
+      padding: 0.375rem 0.75rem;
+      font-size: 0.75rem;
+      font-weight: 500;
+      border-radius: 9999px;
+      border: 1px solid var(--border);
+      background-color: var(--card);
+      color: var(--foreground);
+      text-decoration: none;
+      transition: background-color 0.2s;
+    }
+    .follow-btn:hover {
+      background-color: var(--muted);
     }
-
     .social-links {
       display: flex;
       gap: 0.75rem;
     }
-
     .social-link {
       display: flex;
       align-items: center;
@@ -318,35 +344,46 @@
       border-radius: 9999px;
       background-color: var(--muted);
       color: var(--muted-foreground);
+      text-decoration: none;
       transition: all 0.2s;
     }
-
     .social-link:hover {
       background-color: var(--primary);
-      color: white;
+      color: var(--primary-foreground);
     }
-
     .social-link svg {
       width: 1.25rem;
       height: 1.25rem;
     }
-
-    .footer-credit {
+    .footer-title {
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+    .footer-links {
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+    .footer-link {
       font-size: 0.875rem;
       color: var(--muted-foreground);
-      text-align: center;
-      padding-top: 1.5rem;
-      border-top: 1px solid var(--border);
+      text-decoration: none;
+      transition: color 0.2s;
     }
-
-    .footer-credit a {
-      color: var(--foreground);
-      font-weight: 600;
+    .footer-link:hover {
+      color: var(--primary);
+    }
+    .credits-text {
+      font-size: 0.875rem;
+      color: var(--muted-foreground);
+    }
+    .credits-text a {
+      color: var(--muted-foreground);
       text-decoration: none;
       transition: color 0.2s;
     }
-
-    .footer-credit a:hover {
+    .credits-text a:hover {
       color: var(--primary);
     }
   </style>
@@ -489,63 +526,58 @@
           <p style="color: var(--muted-foreground); margin-top: 0.5rem; font-size: 0.85rem;">
             Or the AI can specify custom P/A/D values for nuanced emotional expressions.
           </p>
-
-          <h2>Credits</h2>
-          <p style="color: var(--muted-foreground); font-size: 0.9rem;">
-            PAD-based motion and sound generation by <strong>Anaelle Jaffré</strong>, from the <a href="https://github.com/InTheSnow31/reachy-mini-I3R/blob/main/src/movement_sound_generation/README.md" target="_blank" rel="noopener noreferrer">I3R student project</a>.
-          </p>
         </div>
       </div>
     </div>
   </section>
 
   <!-- Footer -->
-  <footer>
-    <div class="container">
-      <div class="footer-grid">
-        <div class="footer-section">
-          <h4>Resources</h4>
-          <ul>
-            <li><a href="https://github.com/pollen-robotics/reachy_mini" target="_blank" rel="noopener noreferrer">Read the Documentation</a></li>
-            <li><a href="https://github.com/pollen-robotics/reachy_mini/blob/develop/docs/troubleshooting.md" target="_blank" rel="noopener noreferrer">Troubleshooting & FAQ</a></li>
-          </ul>
-        </div>
+    <footer>
+      <div class="container">
+        <div class="footer-grid">
+          <!-- Author -->
+          <div class="footer-column">
+            <div class="author-section">
+              <a href="https://huggingface.co/RemiFabre" target="_blank" rel="noopener noreferrer" class="author-link">
+                <img src="https://cdn-avatars.huggingface.co/v1/production/uploads/noauth/AkX9RbZqzzQlz797iJeqL.jpeg" alt="RemiFabre" class="author-avatar">
+                <div>
+                  <p class="author-intro">Hey, I'm</p>
+                  <p class="author-name">RemiFabre</p>
+                </div>
+              </a>
+              <a href="https://huggingface.co/RemiFabre" target="_blank" rel="noopener noreferrer" class="follow-btn">Follow</a>
+            </div>
+            <div class="social-links">
+              <a href="https://twitter.com/RemiFabreRobot" target="_blank" rel="noopener noreferrer" aria-label="Twitter" class="social-link">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg>
+              </a>
+              <a href="https://github.com/RemiFabre" target="_blank" rel="noopener noreferrer" aria-label="GitHub" class="social-link">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg>
+              </a>
+              <a href="https://www.linkedin.com/in/remifabre" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" class="social-link">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect width="4" height="12" x="2" y="9"></rect><circle cx="4" cy="4" r="2"></circle></svg>
+              </a>
+            </div>
+          </div>
 
-        <div class="footer-section">
-          <h4>Reachy Mini Apps</h4>
-          <ul>
-            <li><a href="https://hf.co/reachy-mini/#apps" target="_blank" rel="noopener noreferrer">Browse other apps</a></li>
-            <li><a href="https://huggingface.co/blog/pollen-robotics/make-and-publish-your-reachy-mini-apps" target="_blank" rel="noopener noreferrer">Make and publish your own app</a></li>
-          </ul>
-        </div>
+          <!-- Resources -->
+          <div class="footer-column">
+            <h4 class="footer-title">Resources</h4>
+            <ul class="footer-links">
+              <li><a href="https://huggingface.co/docs/reachy_mini/index" target="_blank" rel="noopener noreferrer" class="footer-link">Read the documentation & FAQ</a></li>
+              <li><a href="https://hf.co/reachy-mini/#apps" target="_blank" rel="noopener noreferrer" class="footer-link">Browse other apps</a></li>
+              <li><a href="https://huggingface.co/blog/pollen-robotics/make-and-publish-your-reachy-mini-apps" target="_blank" rel="noopener noreferrer" class="footer-link">Make your own app</a></li>
+            </ul>
+          </div>
 
-        <div class="footer-section">
-          <h4>Follow us</h4>
-          <div class="social-links">
-            <a href="https://discord.gg/2bAhWfXme9" target="_blank" rel="noopener noreferrer" aria-label="Discord" class="social-link">
-              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
-            </a>
-            <a href="https://www.linkedin.com/company/pollen-robotics" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" class="social-link">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect width="4" height="12" x="2" y="9"/><circle cx="4" cy="4" r="2"/></svg>
-            </a>
-            <a href="https://www.youtube.com/c/pollenrobotics" target="_blank" rel="noopener noreferrer" aria-label="YouTube" class="social-link">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"/><path d="m10 15 5-3-5-3z"/></svg>
-            </a>
-            <a href="https://github.com/pollen-robotics" target="_blank" rel="noopener noreferrer" aria-label="GitHub" class="social-link">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>
-            </a>
-            <a href="https://x.com/pollenrobotics" target="_blank" rel="noopener noreferrer" aria-label="X" class="social-link">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"/></svg>
-            </a>
+          <!-- Credits -->
+          <div class="footer-column">
+            <h4 class="footer-title">Credits</h4>
+            <p class="credits-text">PAD-based motion and sound generation by <strong>Anaelle Jaffré</strong>, from the <a href="https://github.com/InTheSnow31/reachy-mini-I3R/blob/main/src/movement_sound_generation/README.md" target="_blank" rel="noopener noreferrer"><u>I3R student project</u></a>.</p>
           </div>
         </div>
       </div>
-
-      <div class="footer-credit">
-        Proudly brought by <a href="https://www.pollen-robotics.com/" target="_blank" rel="noopener noreferrer">Pollen Robotics</a> x 🤗 <a href="https://huggingface.co" target="_blank" rel="noopener noreferrer">Hugging Face</a>
-      </div>
-    </div>
-  </footer>
+    </footer>
 
 </body>
 </html>