From d26d4a7c41a39efa7421b1d97063d5fabce567b6 Mon Sep 17 00:00:00 2001 From: sirpiglr <49359077-sirpiglr@users.noreply.replit.com> Date: Sat, 6 Dec 2025 02:17:53 +0000 Subject: [PATCH] Update landing page to match site's OS aesthetic with neon and glassmorphism styles Refactor IsometricRealmSelector component to apply glassmorphism, neon accents, and updated typography to the hero section, CTAs, and realm display, aligning with the established OS design language. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 9203795e-937a-4306-b81d-b4d5c78c240e Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 1f41c79b-a326-4d5a-a725-e6202c4222ce Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7c94b7a0-29c7-4f2e-94ef-44b2153872b7/9203795e-937a-4306-b81d-b4d5c78c240e/muiWWXW Replit-Helium-Checkpoint-Created: true --- client/components/IsometricRealmSelector.tsx | 106 +++++++++++-------- 1 file changed, 64 insertions(+), 42 deletions(-) diff --git a/client/components/IsometricRealmSelector.tsx b/client/components/IsometricRealmSelector.tsx index 6585a650..36613fa5 100644 --- a/client/components/IsometricRealmSelector.tsx +++ b/client/components/IsometricRealmSelector.tsx @@ -389,99 +389,119 @@ export default function IsometricRealmSelector() { .hero-intro { text-align: center; - margin-bottom: 60px; - padding: 40px 0; + margin-bottom: 48px; + padding: 32px 24px; + max-width: 720px; + margin-left: auto; + margin-right: auto; + background: rgba(15, 23, 42, 0.6); + border: 1px solid rgba(124, 58, 237, 0.2); + border-radius: 16px; + backdrop-filter: blur(12px); + box-shadow: 0 0 40px rgba(124, 58, 237, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .tagline { - font-size: 14px; - font-weight: 600; - color: #a855f7; + display: inline-block; + font-size: 11px; + font-weight: 700; + color: #c084fc; text-transform: uppercase; - letter-spacing: 0.15em; - margin-bottom: 16px; + letter-spacing: 0.2em; + margin-bottom: 12px; + padding: 6px 14px; + background: rgba(124, 58, 237, 0.15); + border: 1px solid rgba(124, 58, 237, 0.3); + border-radius: 20px; } .main-headline { - font-size: clamp(40px, 6vw, 64px); + font-size: clamp(32px, 5vw, 48px); font-weight: 800; - margin-bottom: 20px; - background: linear-gradient(135deg, #ffffff 0%, #a855f7 50%, #3b82f6 100%); + margin-bottom: 14px; + background: linear-gradient(135deg, #f8fafc 0%, #c084fc 40%, #60a5fa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; - line-height: 1.1; + line-height: 1.15; + letter-spacing: -0.02em; } .sub-headline { - font-size: 18px; + font-size: 15px; color: #94a3b8; - max-width: 600px; - margin: 0 auto 32px; + max-width: 480px; + margin: 0 auto 24px; line-height: 1.6; } .hero-cta { display: flex; justify-content: center; - gap: 16px; + gap: 12px; flex-wrap: wrap; } .cta-primary { - padding: 14px 32px; - border-radius: 12px; - background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%); + padding: 12px 28px; + border-radius: 10px; + background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); color: white; - font-size: 15px; + font-size: 13px; font-weight: 600; text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.05em; transition: all 0.3s ease; - box-shadow: 0 4px 20px rgba(168, 85, 247, 0.3); + box-shadow: 0 0 20px rgba(124, 58, 237, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3); + border: 1px solid rgba(168, 85, 247, 0.5); } .cta-primary:hover { transform: translateY(-2px); - box-shadow: 0 8px 30px rgba(168, 85, 247, 0.4); + box-shadow: 0 0 30px rgba(124, 58, 237, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4); } .cta-secondary { - padding: 14px 32px; - border-radius: 12px; - border: 1px solid #334155; - background: rgba(30, 41, 59, 0.5); - color: #e5e7eb; - font-size: 15px; + padding: 12px 28px; + border-radius: 10px; + border: 1px solid rgba(96, 165, 250, 0.3); + background: rgba(15, 23, 42, 0.8); + color: #60a5fa; + font-size: 13px; font-weight: 600; text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.05em; transition: all 0.3s ease; + backdrop-filter: blur(8px); } .cta-secondary:hover { - background: rgba(30, 41, 59, 0.8); - border-color: #475569; + background: rgba(96, 165, 250, 0.1); + border-color: rgba(96, 165, 250, 0.5); transform: translateY(-2px); + box-shadow: 0 0 20px rgba(96, 165, 250, 0.2); } .hero-text { text-align: center; - margin-bottom: 50px; + margin-bottom: 40px; } .hero-text h2 { - font-size: clamp(28px, 4vw, 40px); + font-size: clamp(20px, 3vw, 28px); font-weight: 700; - margin-bottom: 12px; - background: linear-gradient(135deg, #e5e7eb 0%, #94a3b8 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + margin-bottom: 8px; + color: #e5e7eb; + text-transform: uppercase; + letter-spacing: 0.1em; } .hero-text p { - font-size: 16px; + font-size: 14px; color: #64748b; - max-width: 500px; + max-width: 400px; margin: 0 auto; } @@ -594,12 +614,14 @@ export default function IsometricRealmSelector() { } .hero-intro { - padding: 20px 0; - margin-bottom: 40px; + padding: 24px 20px; + margin-bottom: 32px; + margin-left: 0; + margin-right: 0; } .sub-headline { - font-size: 16px; + font-size: 14px; } .hero-cta { @@ -609,7 +631,7 @@ export default function IsometricRealmSelector() { .cta-primary, .cta-secondary { width: 100%; - max-width: 280px; + max-width: 260px; text-align: center; }