From 89f579c1bac25c26b6f9216052ee5e2676af5622 Mon Sep 17 00:00:00 2001
From: "Paul Gauthier (aider)" <paul@aider.chat>
Date: Wed, 19 Mar 2025 11:07:49 -0700
Subject: [PATCH] refactor: add card header with icon and title for better
 visual integration

---
 aider/website/home.html | 55 ++++++++++++++++++++++++++++++-----------
 1 file changed, 40 insertions(+), 15 deletions(-)

diff --git a/aider/website/home.html b/aider/website/home.html
index 005cdfc47..88ea81479 100644
--- a/aider/website/home.html
+++ b/aider/website/home.html
@@ -206,16 +206,29 @@
             text-decoration: underline;
         }
         
+        .feature-card-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 15px;
+            padding-bottom: 12px;
+            border-bottom: 1px solid #eaeaea;
+        }
+        
         .feature-icon {
-            font-size: 2rem;
+            font-size: 1.8rem;
             color: var(--primary);
-            margin-bottom: 20px;
+            margin-right: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 40px;
+            height: 40px;
         }
         
         .feature-title {
             font-size: 1.3rem;
-            margin-bottom: 15px;
             color: var(--dark);
+            margin: 0;
         }
         
         .models {
@@ -510,33 +523,45 @@
             <h2 class="section-title">Features</h2>
             <div class="feature-grid">
                 <div class="feature-card">
-                    <div class="feature-icon">🧠</div>
-                    <h3 class="feature-title">Works with all LLMs</h3>
+                    <div class="feature-card-header">
+                        <div class="feature-icon">🧠</div>
+                        <h3 class="feature-title">Works with all LLMs</h3>
+                    </div>
                     <p>Aider works best with Claude 3.7 Sonnet, DeepSeek R1 & Chat V3, OpenAI o1, o3-mini & GPT-4o, but <a href="https://aider.chat/docs/llms.html">can connect to almost any LLM, including local models</a>.</p>
                 </div>
                 <div class="feature-card">
-                    <div class="feature-icon">🗺️</div>
-                    <h3 class="feature-title">Map Of Your Code</h3>
+                    <div class="feature-card-header">
+                        <div class="feature-icon">🗺️</div>
+                        <h3 class="feature-title">Map Of Your Code</h3>
+                    </div>
                     <p><a href="https://aider.chat/docs/repomap.html">Uses a map of your entire git repo</a>, which helps it work well in larger codebases.</p>
                 </div>
                 <div class="feature-card">
-                    <div class="feature-icon">📝</div>
-                    <h3 class="feature-title">Multiple File Editing</h3>
+                    <div class="feature-card-header">
+                        <div class="feature-icon">📝</div>
+                        <h3 class="feature-title">Multiple File Editing</h3>
+                    </div>
                     <p><a href="https://aider.chat/docs/install.html">Edit multiple files at once for complex requests</a>, making large-scale changes easier.</p>
                 </div>
                 <div class="feature-card">
-                    <div class="feature-icon">🔀</div>
-                    <h3 class="feature-title">Seamless Git Integration</h3>
+                    <div class="feature-card-header">
+                        <div class="feature-icon">🔀</div>
+                        <h3 class="feature-title">Seamless Git Integration</h3>
+                    </div>
                     <p><a href="https://aider.chat/docs/git.html">Aider automatically commits changes with sensible commit messages</a>, making version control seamless.</p>
                 </div>
                 <div class="feature-card">
-                    <div class="feature-icon">🖥️</div>
-                    <h3 class="feature-title">Use in Your Favorite IDE</h3>
+                    <div class="feature-card-header">
+                        <div class="feature-icon">🖥️</div>
+                        <h3 class="feature-title">Use in Your Favorite IDE</h3>
+                    </div>
                     <p><a href="https://aider.chat/docs/usage/watch.html">Use aider directly from your favorite IDE or text editor</a> by adding AI comments right in your code.</p>
                 </div>
                 <div class="feature-card">
-                    <div class="feature-icon">🖼️</div>
-                    <h3 class="feature-title">Image & URL Support</h3>
+                    <div class="feature-card-header">
+                        <div class="feature-icon">🖼️</div>
+                        <h3 class="feature-title">Image & URL Support</h3>
+                    </div>
                     <p><a href="https://aider.chat/docs/usage/images-urls.html">Add images to the chat and share URLs</a>, helping with visual context and references.</p>
                 </div>
             </div>