style(showcase): refine screenshot component spacing and effects

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%,
+    transparent 60%,
-    rgba(15, 15, 15, 0.4) 85%,
+    rgba(15, 15, 15, 0.3) 75%,
-    rgba(15, 15, 15, 0.8) 100%
+    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);
+  box-shadow: 0 12px 40px rgba(0, 221, 119, 0.2), 0 0 60px rgba(0, 221, 119, 0.1);
-  transform: translateY(-4px);
+  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-caption {
+.showcase-image-wrapper:hover .showcase-image {
-  position: absolute;
+  transform: scale(1.01);
-  bottom: var(--space-lg);
-  left: var(--space-lg);
-  right: var(--space-lg);
-  font-family: var(--font-mono);
-  font-size: 0.85rem;
-  color: var(--color-text);
-  line-height: 1.5;
-  z-index: 2;
-  opacity: 0.9;
 }
 
-@media (max-width: 768px) {
+.showcase-caption {
-  .showcase-image-wrapper {
+  position: absolute;
-    padding: var(--space-sm);
-  }
-  
-  .showcase-caption {
-    font-size: 0.75rem;
   bottom: var(--space-md);
   left: var(--space-md);
   right: var(--space-md);
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  color: var(--color-text);
+  line-height: 1.5;
+  z-index: 2;
+  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-xs);
+  }
+  
+  .showcase-caption {
+    font-size: 0.7rem;
+    bottom: var(--space-sm);
+    left: var(--space-sm);
+    right: var(--space-sm);
   }
 }
 

src/pages/index.astro

@@ -54,6 +54,7 @@ const version = pkg.version ?? "";
             Real interface. Real performance. Real development workflow.
           </p>
         </div>
+      </div>
       <div class="showcase-grid">
         <div class="showcase-item">
           <div class="showcase-image-wrapper">
@@ -62,7 +63,6 @@ const version = pkg.version ?? "";
           </div>
         </div>
       </div>
-      </div>
     </section>
 
     <!-- Features Section -->