From 891becc6bf927182021abbdb0b7eacfe6a8e6b09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stig-=C3=98rjan=20Smelror?= <smelror@gmail.com>
Date: Sat, 14 Feb 2026 23:12:32 +0100
Subject: [PATCH] feat(styles): add screenshot showcase component styles

---
 public/styles/global.css | 133 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 133 insertions(+)

diff --git a/public/styles/global.css b/public/styles/global.css
index 6a5ed88..e975f17 100644
--- a/public/styles/global.css
+++ b/public/styles/global.css
@@ -422,6 +422,139 @@ section {
   letter-spacing: -0.02em;
 }
 
+/* ===== Screenshot Showcase ===== */
+.screenshot-showcase {
+  background: var(--color-bg);
+  padding: var(--space-3xl) 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.screenshot-showcase::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 80%;
+  height: 80%;
+  background: radial-gradient(circle, rgba(0, 221, 119, 0.03) 0%, transparent 70%);
+  pointer-events: none;
+}
+
+.showcase-header {
+  text-align: center;
+  margin-bottom: var(--space-2xl);
+}
+
+.showcase-label {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--color-accent);
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  margin-bottom: var(--space-md);
+}
+
+.showcase-title {
+  font-size: clamp(2rem, 5vw, 3rem);
+  font-weight: 900;
+  line-height: 1.1;
+  text-transform: uppercase;
+  letter-spacing: -0.02em;
+  margin-bottom: var(--space-md);
+}
+
+.showcase-subtitle {
+  font-size: 1.125rem;
+  color: var(--color-text-secondary);
+  max-width: 600px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+.showcase-grid {
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.showcase-item {
+  position: relative;
+}
+
+.showcase-image-wrapper {
+  position: relative;
+  border: 2px solid var(--color-border);
+  background: var(--color-bg-elevated);
+  padding: var(--space-md);
+  transition: all 0.4s ease;
+}
+
+.showcase-image-wrapper::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    180deg,
+    transparent 0%,
+    transparent 70%,
+    rgba(15, 15, 15, 0.4) 85%,
+    rgba(15, 15, 15, 0.8) 100%
+  );
+  pointer-events: none;
+  opacity: 1;
+  transition: opacity 0.4s ease;
+  z-index: 1;
+}
+
+.showcase-image-wrapper:hover {
+  border-color: var(--color-accent);
+  box-shadow: 0 8px 32px rgba(0, 221, 119, 0.15);
+  transform: translateY(-4px);
+}
+
+.showcase-image-wrapper:hover::before {
+  opacity: 0.6;
+}
+
+.showcase-image {
+  width: 100%;
+  height: auto;
+  display: block;
+  position: relative;
+  border-radius: 2px;
+  transition: all 0.4s ease;
+}
+
+.showcase-caption {
+  position: absolute;
+  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-image-wrapper {
+    padding: var(--space-sm);
+  }
+  
+  .showcase-caption {
+    font-size: 0.75rem;
+    bottom: var(--space-md);
+    left: var(--space-md);
+    right: var(--space-md);
+  }
+}
+
 /* ===== Features ===== */
 .features {
   background: var(--color-bg);