Add custom app logo

index.html

@@ -14,7 +14,7 @@
         <!-- Navigation -->
         <nav class="nav">
             <div class="nav-brand">
-                <span class="nav-logo">🤖</span>
+                <img src="logo.png" alt="Reachy iOS Bridge" class="nav-logo-img">
                 <span class="nav-title">Reachy iOS Bridge</span>
             </div>
             <div class="nav-links">
@@ -41,20 +41,8 @@
                 </div>
             </div>
             <div class="hero-visual">
-                <div class="device-stack">
-                    <div class="device robot">
-                        <span class="device-icon">🤖</span>
-                        <span class="device-label">Reachy Mini</span>
-                    </div>
-                    <div class="connection-line">
-                        <span class="signal"></span>
-                        <span class="signal"></span>
-                        <span class="signal"></span>
-                    </div>
-                    <div class="device phone">
-                        <span class="device-icon">📱</span>
-                        <span class="device-label">iPhone</span>
-                    </div>
+                <div class="hero-logo-container">
+                    <img src="logo.png" alt="Reachy iOS Bridge" class="hero-logo">
                 </div>
             </div>
         </header>
@@ -492,7 +480,7 @@
         <footer class="footer">
             <div class="footer-content">
                 <div class="footer-brand">
-                    <span class="footer-logo">🤖📱</span>
+                    <img src="logo.png" alt="Reachy iOS Bridge" class="footer-logo-img">
                     <span>Reachy iOS Bridge</span>
                 </div>
                 <div class="footer-links">

style.css

@@ -82,6 +82,11 @@ body {
     font-size: 1.5rem;
 }
 
+.nav-logo-img {
+    height: 32px;
+    width: auto;
+}
+
 .nav-title {
     font-family: 'DM Serif Display', Georgia, serif;
     font-size: 1.25rem;
@@ -255,6 +260,26 @@ body {
     50% { opacity: 1; transform: scale(1); }
 }
 
+/* Hero Logo */
+.hero-logo-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 2rem;
+}
+
+.hero-logo {
+    width: 280px;
+    height: auto;
+    filter: drop-shadow(0 8px 32px var(--shadow));
+    animation: float-logo 4s ease-in-out infinite;
+}
+
+@keyframes float-logo {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-12px); }
+}
+
 /* Sections */
 .section {
     padding: 5rem 2rem;
@@ -789,6 +814,11 @@ code {
     font-size: 1.5rem;
 }
 
+.footer-logo-img {
+    height: 28px;
+    width: auto;
+}
+
 .footer-links {
     display: flex;
     gap: 2rem;