@@ -639,4 +676,92 @@ import BaseLayout from '../layouts/BaseLayout.astro';
font-size: 1.75rem;
}
}
+
+ /* Screenshot Showcase */
+ .screenshot-showcase {
+ padding: var(--space-2xl) 0;
+ background: var(--color-bg-secondary);
+ border-top: 1px solid var(--color-border);
+ border-bottom: 1px solid var(--color-border);
+ }
+
+ .showcase-header {
+ text-align: center;
+ margin-bottom: var(--space-xl);
+ }
+
+ .showcase-label {
+ font-family: var(--font-mono);
+ font-size: 0.875rem;
+ color: var(--color-accent);
+ letter-spacing: 0.1em;
+ margin-bottom: var(--space-sm);
+ text-transform: uppercase;
+ }
+
+ .showcase-title {
+ font-size: clamp(1.75rem, 4vw, 2.5rem);
+ font-weight: 900;
+ text-transform: uppercase;
+ letter-spacing: -0.02em;
+ color: var(--color-text);
+ margin-bottom: var(--space-sm);
+ }
+
+ .showcase-subtitle {
+ font-size: 1rem;
+ color: var(--color-text-secondary);
+ line-height: 1.6;
+ max-width: 600px;
+ margin: 0 auto;
+ }
+
+ .showcase-grid {
+ display: flex;
+ justify-content: center;
+ }
+
+ .showcase-item {
+ width: 100%;
+ max-width: 1200px;
+ }
+
+ .showcase-image-wrapper {
+ position: relative;
+ border-radius: var(--radius-lg);
+ overflow: hidden;
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+ border: 1px solid var(--color-border);
+ }
+
+ .showcase-image {
+ display: block;
+ width: 100%;
+ height: auto;
+ max-width: 1400px;
+ margin: 0 auto;
+ }
+
+ .showcase-caption {
+ padding: var(--space-md) var(--space-lg);
+ font-family: var(--font-mono);
+ font-size: 0.85rem;
+ color: var(--color-text-secondary);
+ background: var(--color-bg);
+ border-top: 1px solid var(--color-border);
+ }
+
+ @media (max-width: 768px) {
+ .screenshot-showcase {
+ padding: var(--space-lg) 0;
+ }
+
+ .showcase-title {
+ font-size: 1.5rem;
+ }
+
+ .showcase-subtitle {
+ font-size: 0.95rem;
+ }
+ }
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4e8de65..4ef863a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -44,6 +44,27 @@ const version = pkg.version ?? "";
+
+