From dea4d16e8708417a6e1529b8f5a97b36604555e9 Mon Sep 17 00:00:00 2001
From: "Paul Gauthier (aider)" <paul@aider.chat>
Date: Mon, 24 Mar 2025 12:54:19 -1000
Subject: [PATCH] style: replace emoji icons with material design SVGs and
 hover effects

---
 aider/website/assets/home.css | 18 ++++++++++++------
 aider/website/index.html      | 36 ++++++++++++++++++++++++++---------
 2 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/aider/website/assets/home.css b/aider/website/assets/home.css
index b005f0961..1247741b9 100644
--- a/aider/website/assets/home.css
+++ b/aider/website/assets/home.css
@@ -329,14 +329,20 @@ nav {
 }
 
 .feature-icon {
-    font-size: 1.8rem;
-    color: var(--primary);
-    margin-right: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     width: 40px;
     height: 40px;
+    padding: 8px;
+    border-radius: 8px;
+    background: rgba(76, 110, 245, 0.1);
+    color: var(--primary);
+    margin-right: 12px;
+    flex-shrink: 0;
+    transition: transform 0.3s, background 0.3s;
+}
+
+.feature-card:hover .feature-icon {
+    transform: scale(1.1);
+    background: rgba(76, 110, 245, 0.2);
 }
 
 .feature-title {
diff --git a/aider/website/index.html b/aider/website/index.html
index fd637b9b6..2f13103f5 100644
--- a/aider/website/index.html
+++ b/aider/website/index.html
@@ -96,7 +96,9 @@ cog.out(text)
             <div class="feature-grid">
                 <a href="/docs/llms.html" class="feature-card">
                     <div class="feature-card-header">
-                        <div class="feature-icon">🧠</div>
+                        <svg class="feature-icon" viewBox="0 0 24 24">
+                            <path fill="currentColor" d="M12,3C10,3 8,5 8,7H6A4,4 0 0,1 10,3H12M18,7A4,4 0 0,1 22,11V13H18V11A2,2 0 0,0 16,9A2,2 0 0,0 14,11V13H10V11A4,4 0 0,1 14,7H16A2,2 0 0,0 18,5H20A4,4 0 0,1 24,9V17A4,4 0 0,1 20,21H4A4,4 0 0,1 0,17V9A4,4 0 0,1 4,5H6A2,2 0 0,0 8,7H10A4,4 0 0,1 14,3H16A4,4 0 0,1 20,7H18M4,11V17H20V11H4Z" />
+                        </svg>
                         <h3 class="feature-title">
                             Cloud and local LLMs
                         </h3>
@@ -105,7 +107,9 @@ cog.out(text)
                 </a>
                 <a href="/docs/repomap.html" class="feature-card">
                     <div class="feature-card-header">
-                        <div class="feature-icon">🗺️</div>
+                        <svg class="feature-icon" viewBox="0 0 24 24">
+                            <path fill="currentColor" d="M20.5,3L20.34,3.03L15,5.1L9,3L3.36,4.9C3.15,4.97 3,5.15 3,5.38V20.5A0.5,0.5 0 0,0 3.5,21L3.66,20.97L9,18.9L15,21L20.64,19.1C20.85,19.03 21,18.85 21,18.62V3.5A0.5,0.5 0 0,0 20.5,3M15,19L9,16.89V5L15,7.11V19Z" />
+                        </svg>
                         <h3 class="feature-title">Maps your codebase</h3>
                     </div>
                     <p>
@@ -115,7 +119,9 @@ cog.out(text)
                 </a>
                 <a href="/docs/languages.html" class="feature-card">
                     <div class="feature-card-header">
-                        <div class="feature-icon" style="font-family: monospace; font-weight: bold; font-size: 1.5rem;">&lt;/&gt;</div>
+                        <svg class="feature-icon" viewBox="0 0 24 24">
+                            <path fill="currentColor" d="M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z" />
+                        </svg>
                         <h3 class="feature-title">100+ code languages</h3>
                     </div>
                     <p>
@@ -126,7 +132,9 @@ cog.out(text)
                 </a>
                 <a href="/docs/git.html" class="feature-card">
                     <div class="feature-card-header">
-                        <div class="feature-icon">🔀</div>
+                        <svg class="feature-icon" viewBox="0 0 24 24">
+                            <path fill="currentColor" d="M7,17V14L3,18L7,22V19H21V17H7M21,7V9H7V12L3,8L7,4V7H21Z" />
+                        </svg>
                         <h3 class="feature-title">Git integration</h3>
                     </div>
                     <p>
@@ -138,7 +146,9 @@ cog.out(text)
                 </a>
                 <a href="/docs/usage/watch.html" class="feature-card">
                     <div class="feature-card-header">
-                        <div class="feature-icon">🖥️</div>
+                        <svg class="feature-icon" viewBox="0 0 24 24">
+                            <path fill="currentColor" d="M21,16H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10V20H8V22H16V20H14V18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z" />
+                        </svg>
                         <h3 class="feature-title">In your IDE</h3>
                     </div>
                     <p>
@@ -149,7 +159,9 @@ cog.out(text)
                 </a>
                 <a href="/docs/usage/images-urls.html" class="feature-card">
                     <div class="feature-card-header">
-                        <div class="feature-icon">🖼️</div>
+                        <svg class="feature-icon" viewBox="0 0 24 24">
+                            <path fill="currentColor" d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z" />
+                        </svg>
                         <h3 class="feature-title">Images & web pages</h3>
                     </div>
                     <p>
@@ -160,7 +172,9 @@ cog.out(text)
                 </a>
                 <a href="/docs/usage/voice.html" class="feature-card">
                     <div class="feature-card-header">
-                        <div class="feature-icon">🎤</div>
+                        <svg class="feature-icon" viewBox="0 0 24 24">
+                            <path fill="currentColor" d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z" />
+                        </svg>
                         <h3 class="feature-title">Voice-to-code</h3>
                     </div>
                     <p>
@@ -171,7 +185,9 @@ cog.out(text)
                 </a>
                 <a href="/docs/usage/lint-test.html" class="feature-card">
                     <div class="feature-card-header">
-                        <div class="feature-icon">✅</div>
+                        <svg class="feature-icon" viewBox="0 0 24 24">
+                            <path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
+                        </svg>
                         <h3 class="feature-title">Linting & testing</h3>
                     </div>
                     <p>
@@ -181,7 +197,9 @@ cog.out(text)
                 </a>
                 <a href="/docs/usage/copypaste.html" class="feature-card">
                     <div class="feature-card-header">
-                        <div class="feature-icon">📋</div>
+                        <svg class="feature-icon" viewBox="0 0 24 24">
+                            <path fill="currentColor" d="M19,3H14.82C14.4,1.84 13.3,1 12,1C10.7,1 9.6,1.84 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M7,7H17V5H19V19H5V5H7V7Z" />
+                        </svg>
                         <h3 class="feature-title">Copy/paste to web chat</h3>
                     </div>
                     <p>