From 488fb5c2c1c95a2fc25220ff333e82d97b989a2e Mon Sep 17 00:00:00 2001
From: zejzejzej3 <dev@matthewcali.com>
Date: Tue, 5 Aug 2025 21:27:39 -0400
Subject: [PATCH] refactor: improve installation steps layout for better visual
 hierarchy

- Restructure installation cards to stack content vertically
- Move code blocks below step headers for cleaner presentation
- Improve visual balance with full-width code blocks
- Create better separation between instructions and commands
- Consistent layout across all screen sizes
---
 src/pages/index.astro | 122 ++++++++++++++++++++++--------------------
 1 file changed, 63 insertions(+), 59 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index bda8439..993a18f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -448,84 +448,88 @@ Lux     # For Neovim`;
         <!-- Installation Steps -->
         <div class="space-y-8">
           <div
-            class="flex items-start space-x-4 p-6 bg-white/70 dark:bg-slate-800/50 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-[1.02] border border-purple-100 dark:border-slate-700"
+            class="p-6 bg-white/70 dark:bg-slate-800/50 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-[1.02] border border-purple-100 dark:border-slate-700"
           >
-            <div
-              class="flex-shrink-0 w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-full flex items-center justify-center font-bold text-lg shadow-lg"
-            >
-              1
-            </div>
-            <div class="flex-1 min-w-0">
-              <h3
-                class="text-xl font-semibold mb-2 text-slate-900 dark:text-white"
-              >
-                Clone the Repository
-              </h3>
-              <p class="text-slate-700 dark:text-slate-300 mb-4">
-                Download LuxVim to your local machine:
-              </p>
-
+            <div class="flex items-start space-x-4 mb-4">
               <div
-                data-controller="copy_to_clipboard"
-                data-copy-to-clipboard-code-value={installCode}
-                class="w-full"
+                class="flex-shrink-0 w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-full flex items-center justify-center font-bold text-lg shadow-lg"
               >
-                <CodeBlock code={installCode} lang="bash" />
+                1
+              </div>
+              <div>
+                <h3
+                  class="text-xl font-semibold mb-2 text-slate-900 dark:text-white"
+                >
+                  Clone the Repository
+                </h3>
+                <p class="text-slate-700 dark:text-slate-300">
+                  Download LuxVim to your local machine:
+                </p>
               </div>
             </div>
-          </div>
-          <div
-            class="flex items-start space-x-4 p-6 bg-white/70 dark:bg-slate-800/50 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-[1.02] border border-purple-100 dark:border-slate-700"
-          >
             <div
-              class="flex-shrink-0 w-12 h-12 bg-gradient-to-r from-blue-500 to-cyan-500 text-white rounded-full flex items-center justify-center font-bold text-lg shadow-lg"
+              data-controller="copy_to_clipboard"
+              data-copy-to-clipboard-code-value={installCode}
+              class="w-full"
             >
-              2
+              <CodeBlock code={installCode} lang="bash" />
             </div>
-            <div class="flex-1 min-w-0">
-              <h3
-                class="text-xl font-semibold mb-2 text-slate-900 dark:text-white"
-              >
-                Run Installation
-              </h3>
-              <p class="text-slate-700 dark:text-slate-300 mb-4">
-                The install script handles everything automatically:
-              </p>
-
+          </div>
+          <div
+            class="p-6 bg-white/70 dark:bg-slate-800/50 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-[1.02] border border-purple-100 dark:border-slate-700"
+          >
+            <div class="flex items-start space-x-4 mb-4">
               <div
-                data-controller="copy_to_clipboard"
-                data-copy-to-clipboard-code-value={runInstallCode}
-                class="w-full"
+                class="flex-shrink-0 w-12 h-12 bg-gradient-to-r from-blue-500 to-cyan-500 text-white rounded-full flex items-center justify-center font-bold text-lg shadow-lg"
               >
-                <CodeBlock code={runInstallCode} lang="bash" />
+                2
+              </div>
+              <div>
+                <h3
+                  class="text-xl font-semibold mb-2 text-slate-900 dark:text-white"
+                >
+                  Run Installation
+                </h3>
+                <p class="text-slate-700 dark:text-slate-300">
+                  The install script handles everything automatically:
+                </p>
               </div>
             </div>
-          </div>
-          <div
-            class="flex items-start space-x-4 p-6 bg-white/70 dark:bg-slate-800/50 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-[1.02] border border-purple-100 dark:border-slate-700"
-          >
             <div
-              class="flex-shrink-0 w-12 h-12 bg-gradient-to-r from-green-500 to-emerald-500 text-white rounded-full flex items-center justify-center font-bold text-lg shadow-lg"
+              data-controller="copy_to_clipboard"
+              data-copy-to-clipboard-code-value={runInstallCode}
+              class="w-full"
             >
-              3
+              <CodeBlock code={runInstallCode} lang="bash" />
             </div>
-            <div class="flex-1 min-w-0">
-              <h3
-                class="text-xl font-semibold mb-2 text-slate-900 dark:text-white"
-              >
-                Launch LuxVim
-              </h3>
-              <p class="text-slate-700 dark:text-slate-300 mb-4">
-                Start coding with your new setup:
-              </p>
+          </div>
+          <div
+            class="p-6 bg-white/70 dark:bg-slate-800/50 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-[1.02] border border-purple-100 dark:border-slate-700"
+          >
+            <div class="flex items-start space-x-4 mb-4">
               <div
-                data-controller="copy_to_clipboard"
-                data-copy-to-clipboard-code-value={launchCode}
-                class="w-full"
+                class="flex-shrink-0 w-12 h-12 bg-gradient-to-r from-green-500 to-emerald-500 text-white rounded-full flex items-center justify-center font-bold text-lg shadow-lg"
               >
-                <CodeBlock code={launchCode} lang="bash" />
+                3
+              </div>
+              <div>
+                <h3
+                  class="text-xl font-semibold mb-2 text-slate-900 dark:text-white"
+                >
+                  Launch LuxVim
+                </h3>
+                <p class="text-slate-700 dark:text-slate-300">
+                  Start coding with your new setup:
+                </p>
               </div>
             </div>
+            <div
+              data-controller="copy_to_clipboard"
+              data-copy-to-clipboard-code-value={launchCode}
+              class="w-full"
+            >
+              <CodeBlock code={launchCode} lang="bash" />
+            </div>
           </div>
         </div>