From 2e6f6e5303f74f91db57c2c3f236d51720d7ab01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stig-=C3=98rjan=20Smelror?= <smelror@gmail.com>
Date: Sat, 14 Feb 2026 23:15:06 +0100
Subject: [PATCH] style(showcase): refine screenshot component spacing and
 effects

---
 public/styles/global.css | 55 +++++++++++++++++++++++++++-------------
 src/pages/index.astro    | 12 ++++-----
 2 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/public/styles/global.css b/public/styles/global.css
index e975f17..3b277da 100644
--- a/public/styles/global.css
+++ b/public/styles/global.css
@@ -474,8 +474,9 @@ section {
 }
 
 .showcase-grid {
-  max-width: 1100px;
+  max-width: 900px;
   margin: 0 auto;
+  padding: 0 var(--space-lg);
 }
 
 .showcase-item {
@@ -486,8 +487,9 @@ section {
   position: relative;
   border: 2px solid var(--color-border);
   background: var(--color-bg-elevated);
-  padding: var(--space-md);
+  padding: var(--space-sm);
   transition: all 0.4s ease;
+  overflow: hidden;
 }
 
 .showcase-image-wrapper::before {
@@ -500,9 +502,10 @@ section {
   background: linear-gradient(
     180deg,
     transparent 0%,
-    transparent 70%,
-    rgba(15, 15, 15, 0.4) 85%,
-    rgba(15, 15, 15, 0.8) 100%
+    transparent 60%,
+    rgba(15, 15, 15, 0.3) 75%,
+    rgba(15, 15, 15, 0.7) 90%,
+    rgba(15, 15, 15, 0.9) 100%
   );
   pointer-events: none;
   opacity: 1;
@@ -512,12 +515,12 @@ section {
 
 .showcase-image-wrapper:hover {
   border-color: var(--color-accent);
-  box-shadow: 0 8px 32px rgba(0, 221, 119, 0.15);
-  transform: translateY(-4px);
+  box-shadow: 0 12px 40px rgba(0, 221, 119, 0.2), 0 0 60px rgba(0, 221, 119, 0.1);
+  transform: translateY(-6px);
 }
 
 .showcase-image-wrapper:hover::before {
-  opacity: 0.6;
+  opacity: 0.5;
 }
 
 .showcase-image {
@@ -529,29 +532,45 @@ section {
   transition: all 0.4s ease;
 }
 
+.showcase-image-wrapper:hover .showcase-image {
+  transform: scale(1.01);
+}
+
 .showcase-caption {
   position: absolute;
-  bottom: var(--space-lg);
-  left: var(--space-lg);
-  right: var(--space-lg);
+  bottom: var(--space-md);
+  left: var(--space-md);
+  right: var(--space-md);
   font-family: var(--font-mono);
-  font-size: 0.85rem;
+  font-size: 0.8rem;
   color: var(--color-text);
   line-height: 1.5;
   z-index: 2;
-  opacity: 0.9;
+  opacity: 1;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
+}
+
+@media (max-width: 1024px) {
+  .showcase-grid {
+    max-width: 800px;
+  }
 }
 
 @media (max-width: 768px) {
+  .showcase-grid {
+    max-width: 100%;
+    padding: 0 var(--space-md);
+  }
+  
   .showcase-image-wrapper {
-    padding: var(--space-sm);
+    padding: var(--space-xs);
   }
   
   .showcase-caption {
-    font-size: 0.75rem;
-    bottom: var(--space-md);
-    left: var(--space-md);
-    right: var(--space-md);
+    font-size: 0.7rem;
+    bottom: var(--space-sm);
+    left: var(--space-sm);
+    right: var(--space-sm);
   }
 }
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4ef863a..5735823 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -54,12 +54,12 @@ const version = pkg.version ?? "";
             Real interface. Real performance. Real development workflow.
           </p>
         </div>
-        <div class="showcase-grid">
-          <div class="showcase-item">
-            <div class="showcase-image-wrapper">
-              <img src="/screenshot-1.png" alt="Zaguán Blade editor interface showing AI-assisted coding" class="showcase-image" />
-              <div class="showcase-caption">The editor with AI chat integrated, displaying code generation with diff view</div>
-            </div>
+      </div>
+      <div class="showcase-grid">
+        <div class="showcase-item">
+          <div class="showcase-image-wrapper">
+            <img src="/screenshot-1.png" alt="Zaguán Blade editor interface showing AI-assisted coding" class="showcase-image" />
+            <div class="showcase-caption">The editor with AI chat integrated, displaying code generation with diff view</div>
           </div>
         </div>
       </div>