diff --git a/dev/brand-identity.png b/dev/brand-identity.png
new file mode 100644
index 0000000..eaa5396
Binary files /dev/null and b/dev/brand-identity.png differ
diff --git a/dev/brief.md b/dev/brief.md
new file mode 100644
index 0000000..77ee00d
--- /dev/null
+++ b/dev/brief.md
@@ -0,0 +1,559 @@
+# Kampüs Cadıları Website Design Brief
+## Turkish Feminist Organization - Site Rebuild 2025
+
+---
+
+## Project Overview
+
+### Organization
+**Kampüs Cadıları** (Campus Witches) is a Turkish feminist organization focused on campus activism, gender equality, and creating safe spaces for women and LGBTQ+ individuals in academic settings. The organization publishes feminist content, translations, and daily feminist news while building community through their platform.
+
+### Project Goals
+- Rebuild the organization's web presence with a modern, accessible, and culturally resonant design
+- Create a platform that empowers, informs, and mobilizes the feminist community
+- Blend bold activism aesthetics with professional credibility and readability
+- Support both Turkish and international audiences with multilingual content
+- Facilitate content sharing, event coordination, and community building through compelling visual storytelling
+
+### Target Audience
+- **Primary**: Turkish university students (18-25) interested in feminism and social justice
+- **Secondary**: Activists, academics, and allies engaged in feminist discourse
+- **Tertiary**: International audiences seeking Turkish feminist perspectives and translated content
+
+---
+
+## Brand Identity
+
+### Logo & Symbol
+The Kampüs Cadıları logo features a stylized witch figure positioned on a female symbol (♀) with a star accent, representing empowerment, magic, and feminist identity. The witch imagery reclaims historical persecution narratives while celebrating women's power.
+
+### Color Palette
+
+#### Primary Brand Colors
+**Purple (Pantone 526 C)**
+- CMYK: C67 / M98 / Y6 / K0
+- RGB: ~84, 25, 139
+- Hex: #54198B (approximate)
+- Usage: Primary brand color, navigation, CTAs, headers
+
+**Red (Pantone 485 C)**
+- CMYK: C5 / M100 / Y100 / K0
+- RGB: ~237, 28, 36
+- Hex: #ED1C24 (approximate)
+- Usage: Accent color, alerts, important CTAs, emphasis elements
+
+#### Extended Palette
+Based on existing style system, augmented with brand colors:
+
+**Neutrals**
+- Background: `#0a0a0a` (near-black for hero sections)
+- Surface: `#ffffff` (white for content areas)
+- Text Primary: `#171717` (near-black)
+- Text Secondary: `#737373` (gray)
+- Border: `#e5e5e5` (light gray)
+
+**Purple Spectrum** (derived from Pantone 526 C)
+- Primary: `#54198B`
+- Light: `#8B4FB8`
+- Lighter: `#B88BD4`
+- Lightest: `#E8D4F0`
+
+**Red Spectrum** (derived from Pantone 485 C)
+- Primary: `#ED1C24`
+- Light: `#F25C61`
+- Lighter: `#F89195`
+
+**Functional Colors**
+- Success: `#22c55e`
+- Warning: `#f59e0b`
+- Error: `#ef4444`
+- Info: `#3b82f6`
+
+### Typography
+
+#### Font Stack
+**Primary**: Inter (body text, UI elements)
+- Clean, modern, highly readable
+- Excellent multilingual support for Turkish characters (ç, ğ, ı, ö, ş, ü)
+- Variable font for performance
+
+**Display**: Oswald (headings, impact statements)
+- Bold, condensed aesthetic for activist messaging
+- Strong presence for hero sections and key statements
+- Use sparingly for maximum impact
+
+**Backup Stack**: system-ui, -apple-system, sans-serif
+
+#### Type Scale
+- Hero/H1: 56px / 3.5rem (Oswald, uppercase for impact)
+- H2: 40px / 2.5rem (Oswald or Inter Bold)
+- H3: 32px / 2rem (Inter Bold)
+- H4: 24px / 1.5rem (Inter SemiBold)
+- Body Large: 18px / 1.125rem (Inter Regular)
+- Body: 16px / 1rem (Inter Regular)
+- Body Small: 14px / 0.875rem (Inter Regular)
+- Caption: 12px / 0.75rem (Inter Regular)
+
+#### Line Heights
+- Headings: 1.2
+- Body text: 1.6 (for readability in article content)
+- UI elements: 1.5
+
+---
+
+## Current Site Structure & Content DNA
+
+### Navigation Architecture
+Based on current site analysis:
+
+**Primary Navigation**
+1. **ANASAYFA** (Homepage) - Hero carousel + featured content
+2. **CADI YAYINLARI** (Witch Publications) - Original content by the organization
+3. **ÇEVİRİ** (Translations) - Translated feminist texts and articles
+4. **FEMİNİST GÜNDEM** (Feminist Agenda) - Daily news and commentary
+5. **TARIHÇEMIZ** (Our History) - About the organization and its journey
+
+**Utility Navigation**
+- Search functionality (icon in header)
+- Social media links (Instagram, Facebook, TikTok, YouTube)
+- Language toggle (TR/EN consideration for rebuild)
+
+### Content Types
+
+#### Hero Section
+- Large, impactful visual storytelling
+- Rotating slider with multiple featured stories
+- Dark background with high contrast text
+- "KISA Bİ HİKAYE" (Short Story) as content marker
+- Writer attribution with photo
+- Strong CTA ("Read more")
+
+#### Article Cards
+Current format to maintain:
+- Article title
+- Category tag (color-coded by content type)
+- Author name ("By Kampüs Cadıları")
+- Publication date
+- Excerpt/preview text
+- "Read More" CTA button (blue in current, to be adapted to purple)
+
+#### Content Categories
+- **Kadınlardan Gelenler** (From Women) - Personal stories and testimonials
+- **Feminist Gündem** (Feminist Agenda) - News and commentary
+- **Çeviri** (Translations) - Translated works
+- Custom categories as needed
+
+---
+
+## Design System
+
+### Layout System
+
+#### Grid Structure
+12-column grid system with Tailwind CSS spacing:
+- Desktop: 1440px max-width container
+- Tablet: 768px breakpoint
+- Mobile: 375px base, full-width content
+
+#### Spacing Scale
+```
+xs: 0.25rem / 4px
+sm: 0.5rem / 8px
+md: 1rem / 16px
+lg: 1.5rem / 24px
+xl: 2rem / 32px
+2xl: 3rem / 48px
+3xl: 4rem / 64px
+4xl: 6rem / 96px
+```
+
+#### Section Spacing
+- Section padding: `py-16 md:py-24` (64px mobile, 96px desktop)
+- Component spacing: `space-y-8 md:space-y-12`
+- Container padding: `px-4 md:px-6 lg:px-8`
+
+### Components
+
+#### Cards
+```css
+.article-card {
+  background: white;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  transition: all 0.3s ease;
+}
+
+.article-card:hover {
+  box-shadow: 0 10px 40px rgba(84, 25, 139, 0.15);
+  transform: translateY(-4px);
+}
+```
+
+#### Buttons
+
+**Primary CTA** (Purple brand color)
+```css
+.btn-primary {
+  background: #54198B;
+  color: white;
+  padding: 12px 32px;
+  border-radius: 999px; /* pill shape */
+  font-weight: 600;
+  transition: all 0.3s ease;
+}
+
+.btn-primary:hover {
+  background: #3D1265;
+  transform: scale(1.05);
+}
+```
+
+**Secondary CTA** (Outlined)
+```css
+.btn-secondary {
+  background: transparent;
+  color: #54198B;
+  border: 2px solid #54198B;
+  padding: 12px 32px;
+  border-radius: 999px;
+  font-weight: 600;
+}
+
+.btn-secondary:hover {
+  background: #54198B;
+  color: white;
+}
+```
+
+**Load More** (Purple pill button)
+```css
+.btn-load-more {
+  background: #54198B;
+  color: white;
+  padding: 14px 40px;
+  border-radius: 999px;
+  font-weight: 600;
+  text-align: center;
+  display: inline-block;
+}
+```
+
+#### Navigation
+
+**Header**
+```css
+.site-header {
+  background: white;
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  border-bottom: 1px solid #e5e5e5;
+  backdrop-filter: blur(12px);
+  background: rgba(255,255,255,0.95);
+}
+
+.nav-links {
+  display: flex;
+  gap: 32px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-size: 14px;
+}
+
+.nav-link {
+  color: #171717;
+  transition: color 0.3s ease;
+}
+
+.nav-link:hover,
+.nav-link.active {
+  color: #54198B;
+}
+```
+
+#### Hero Section
+
+**Full-bleed dark hero**
+```css
+.hero-section {
+  background: #0a0a0a;
+  min-height: 80vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.hero-title {
+  font-family: 'Oswald', sans-serif;
+  font-size: clamp(32px, 5vw, 56px);
+  color: white;
+  text-transform: lowercase; /* matching "kelime kelime feminist bi kelime" */
+  line-height: 1.2;
+  margin-bottom: 24px;
+}
+
+.hero-subtitle {
+  font-size: 14px;
+  color: rgba(255,255,255,0.8);
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  margin-bottom: 16px;
+}
+```
+
+#### Category Tags
+```css
+.category-tag {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.category-tag.feminist-gundem {
+  background: #ED1C24;
+  color: white;
+}
+
+.category-tag.ceviri {
+  background: #54198B;
+  color: white;
+}
+
+.category-tag.kadinlardan-gelenler {
+  background: #B88BD4;
+  color: #3D1265;
+}
+```
+
+### Animations
+
+#### Fade In
+```css
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.fade-in {
+  animation: fadeIn 0.6s ease-out;
+}
+```
+
+#### Slide In
+```css
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.slide-in {
+  animation: slideIn 0.8s ease-out;
+}
+```
+
+#### Stagger Children
+```css
+.stagger-children > * {
+  opacity: 0;
+  animation: slideIn 0.8s ease-out forwards;
+}
+
+.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
+.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
+.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
+```
+
+### Visual Effects
+
+#### Shadows
+```css
+--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
+--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
+--shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
+--shadow-purple: 0 10px 40px rgba(84, 25, 139, 0.15); /* brand shadow */
+```
+
+#### Backdrop Blur
+```css
+.backdrop-blur {
+  backdrop-filter: blur(12px);
+  background: rgba(255,255,255,0.95);
+}
+
+.backdrop-blur-dark {
+  backdrop-filter: blur(12px);
+  background: rgba(10,10,10,0.9);
+}
+```
+
+---
+
+## Page Templates
+
+### Homepage
+1. **Sticky Header** - Logo, navigation, search
+2. **Hero Carousel** - Full-width rotating featured stories with dark background
+3. **Welcome Section** - "KIZKARDEŞİM, SİTEMİZDE SENİ BEKLEYENLER..." (Sister, waiting for you on our site)
+4. **Featured Articles Grid** - 3-column card layout
+5. **Load More Button** - Purple pill CTA
+6. **Footer** - Social links, copyright, contact info
+
+### Article/Blog Template
+1. **Header** - Category tag, title, author, date
+2. **Featured Image** - Full-width hero
+3. **Article Content** - Rich text with proper typography
+4. **Share Tools** - Social sharing buttons
+5. **Related Articles** - Card grid of similar content
+6. **Comments/Discussion** (if applicable)
+
+### Category/Archive Template
+1. **Category Hero** - Brief description of category purpose
+2. **Filter/Sort Options** - Date, relevance, author
+3. **Article Grid** - Masonry or standard grid layout
+4. **Pagination** - Load more or numbered pagination
+
+### About/History Page
+1. **Hero Section** - Mission statement
+2. **Timeline** - Visual history of the organization
+3. **Team/Contributors** (if applicable)
+4. **Values & Principles** - What Kampüs Cadıları stands for
+5. **Get Involved** - CTA for participation
+
+---
+
+## Content Strategy
+
+### Voice & Tone
+- **Empowering** - Lift up voices, celebrate strength
+- **Direct** - Clear, accessible language avoiding academic jargon where possible
+- **Activist** - Unapologetically feminist, calling for action and change
+- **Inclusive** - Welcoming to all who support gender equality
+- **Authentic** - Genuine stories and perspectives from the community
+
+### Content Pillars
+1. **Original Commentary** (Cadı Yayınları) - Organization's voice on current issues
+2. **Translation** (Çeviri) - Making global feminist discourse accessible in Turkish
+3. **Daily News** (Feminist Gündem) - Curated news with feminist analysis
+4. **Community Stories** (Kadınlardan Gelenler) - Personal narratives from the community
+5. **Educational Resources** - Guides, explainers, and learning materials
+
+### Multilingual Considerations
+- **Primary Language**: Turkish
+- **Secondary Language**: English (for select articles and UI)
+- Language toggle in header
+- Ensure proper Turkish character support (ç, ğ, ı, ö, ş, ü, Ç, Ğ, İ, Ö, Ş, Ü)
+- RTL text support not needed (Turkish is LTR)
+
+---
+
+## Accessibility Requirements
+
+### WCAG 2.1 AA Compliance
+- Color contrast ratios minimum 4.5:1 for normal text
+- All interactive elements keyboard accessible
+- Proper heading hierarchy (h1 → h2 → h3, etc.)
+- Alt text for all images
+- ARIA labels for icon-only buttons
+- Focus indicators visible and clear
+
+### Performance
+- Core Web Vitals optimization
+  - LCP (Largest Contentful Paint) < 2.5s
+  - FID (First Input Delay) < 100ms
+  - CLS (Cumulative Layout Shift) < 0.1
+- Image optimization (WebP, lazy loading)
+- Minimal JavaScript for fast page loads
+- Progressive enhancement approach
+
+### Responsive Design
+- Mobile-first approach
+- Breakpoints: 375px (mobile), 768px (tablet), 1024px (desktop), 1440px (wide)
+- Touch-friendly targets (minimum 44x44px)
+- Readable text at all sizes (minimum 16px body text on mobile)
+
+---
+
+### SEO & Analytics
+- Semantic HTML structure
+- Open Graph tags for social sharing
+- JSON-LD structured data
+- Google Analytics or privacy-focused alternative (Plausible)
+- Search Console integration
+- Sitemap generation
+
+---
+
+## Design Principles
+
+### 1. Bold but Readable
+Strike a balance between activist impact and content accessibility. Use dark hero sections for visual drama, but ensure article content is highly readable with excellent typography.
+
+### 2. Color as Meaning
+Use the purple/red brand colors strategically:
+- Purple for navigation, primary CTAs, and organizational identity
+- Red for urgent actions, alerts, and emphasis
+- Neutrals for reading comfort and professionalism
+
+### 3. Progressive Enhancement
+Build a fast, accessible baseline that works everywhere, then enhance with animations and interactions for capable browsers.
+
+### 4. Content-First
+The design should elevate and showcase the powerful stories and analysis the organization produces. Never let design obscure or compete with content.
+
+### 5. Community-Centered
+Create spaces for community voices, user-generated content, and participation. The site should feel like a collective project, not a one-way broadcast.
+
+---
+
+## Success Metrics
+
+### Engagement
+- Time on page (target: 3+ minutes for articles)
+- Pages per session (target: 3+)
+- Bounce rate (target: <60%)
+- Returning visitor rate (target: 30%+)
+
+### Growth
+- Monthly unique visitors
+- Social shares per article
+- Newsletter signups
+- Community contributions (if applicable)
+
+### Performance
+- Mobile page load time (target: <3s)
+- Desktop page load time (target: <2s)
+- Core Web Vitals passing scores
+- 95%+ accessibility audit score
+
+---
+
+## Brand Essence
+
+Kampüs Cadıları reclaims the witch as a symbol of feminine power, wisdom, and resistance. The design should embody this spirit: bold, unapologetic, magical, and transformative. The purple witch on the female symbol isn't just a logo—it's a statement of identity, a rallying symbol for feminist activism on Turkish campuses and beyond.
+
+The website should feel like a gathering place, a library of resistance, and a megaphone for change—all while being beautiful, accessible, and technically excellent.
+
+---
+
+**Design Brief Version**: 1.0  
+**Last Updated**: December 27, 2025  
diff --git a/dev/visual-design-analysis.md b/dev/visual-design-analysis.md
new file mode 100644
index 0000000..6ed4269
--- /dev/null
+++ b/dev/visual-design-analysis.md
@@ -0,0 +1,237 @@
+
+## Color Palette
+
+## Typography
+
+### Font Families
+
+#### Primary Fonts
+- **Inter** - Body text, primary sans-serif (weights: 300, 400, 500, 600)
+- **Oswald** - Headlines, brand font, uppercase display text (weights: 400, 500, 600)
+
+#### Extended Font Library (Available but not actively used)
+The page loads 20+ Google Fonts for maximum flexibility:
+- Sans-serif: Geist, Roboto, Montserrat, Poppins, Bricolage Grotesque, Plus Jakarta Sans, Manrope, Space Grotesk, Work Sans, DM Sans, Quicksand, Nunito, Google Sans Flex
+- Serif: Playfair Display, Instrument Serif, Merriweather, PT Serif, Newsreader
+- Monospace: Geist Mono, Space Mono
+
+### Type Scale
+- **7xl-8xl** (`4.5rem` - `6rem`) - Hero headlines ("PLAY WONDER")
+- **4xl-5xl** (`2.25rem` - `3rem`) - Section headings
+- **3xl-4xl** (`1.875rem` - `2.25rem`) - Card titles, subsection headings
+- **2xl** (`1.5rem`) - Secondary headings
+- **xl** (`1.25rem`) - Large body text
+- **lg** (`1.125rem`) - Emphasized body text
+- **base** (`1rem`) - Standard body text
+- **sm** (`0.875rem`) - Small text, labels
+- **xs** (`0.75rem`) - Micro copy, metadata
+
+### Font Weights
+- **Light (300)** - Subtle descriptive text
+- **Regular (400)** - Body text
+- **Medium (500)** - Emphasized text
+- **Semibold (600)** - Strong emphasis
+- **Bold (700)** - Headlines, CTAs
+
+### Typography Utilities
+- **Tracking**: `tracking-tighter` (-0.05em), `tracking-tight` (-0.025em), `tracking-wide` (0.025em), `tracking-wider` (0.05em), `tracking-widest` (0.1em)
+- **Leading**: `leading-tight` (1.25), `leading-[1.1]`, `leading-[0.85]`, `leading-none` (1), `leading-relaxed` (1.625)
+- **Transform**: `uppercase` for labels and category tags
+
+## Layout System
+
+### Grid Structure
+The page uses a 12-column responsive grid:
+- **Hero Section**: `lg:grid-cols-12` split into 4-8 columns (sidebar + main visual)
+- **Content Sections**: `md:grid-cols-2`, `lg:grid-cols-3`, `lg:grid-cols-4`
+- **Bento Grid**: Asymmetric layout with `col-span-1`, `col-span-2`, `row-span-2` variations
+
+### Spacing Scale (Tailwind)
+- **Small**: `gap-1` (0.25rem), `gap-2` (0.5rem), `gap-3` (0.75rem)
+- **Medium**: `gap-4` (1rem), `gap-6` (1.5rem), `gap-8` (2rem)
+- **Large**: `gap-12` (3rem), `gap-16` (4rem)
+- **Padding**: Consistent use of `p-8`, `p-12`, `px-6`, `py-24` for sections
+
+### Container
+- **Max Width**: `max-w-7xl` (80rem) centered with `mx-auto`
+- **Horizontal Padding**: `px-6` mobile, `lg:px-12` desktop
+
+## Design Patterns
+
+### Navigation
+- **Hamburger Menu**: Minimalist top-left icon with dropdown
+- **Dropdown Menu**: Rounded corners (`rounded-2xl`), shadow (`shadow-[0_8px_30px_rgb(0,0,0,0.12)]`), clean white card
+- **Menu Items**: Hover states with `hover:bg-blue-50/50`, icon + text layout
+
+### Cards & Components
+
+### Buttons
+
+#### Primary CTA
+- Background: `bg-blue-700/50`, `hover:bg-blue-700`
+- Shape: `rounded-full`, `px-6 py-3`
+- Text: Uppercase, `tracking-wide`, white with arrow icon
+
+#### Icon Buttons
+- Shape: `rounded-full`, `w-10 h-10`
+- Border: `border border-blue-400`
+- Hover: `hover:bg-blue-500`
+
+#### Secondary Links
+- Style: Underlined text with `border-b`
+- Hover: `hover:border-white`, `hover:opacity-75`
+
+### Decorative Elements
+
+#### Abstract Shapes
+- **Blurred Blobs**: `blur-3xl`, `opacity-20`, `mix-blend-multiply`, animated
+- **Background Patterns**: Radial gradient dots (`bg-[radial-gradient(circle,transparent_20%,#eff6ff_20%)]`)
+- **Typography Overlay**: Giant "GAME" text with `mix-blend-multiply`, `opacity-10`
+
+#### Borders & Dividers
+- **Subtle Lines**: `h-0.5 w-12`, `h-px`, `w-px` for accent lines
+- **Border Colors**: `border-gray-100`, `border-blue-500/20`, `border-white/30` (with transparency)
+
+## Animations
+
+### Keyframe Animations
+```css
+@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+@keyframes slideIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes blurIn { from { opacity: 0; filter: blur(12px); } to { opacity: 1; filter: blur(0); } }
+```
+
+### Animation Classes
+- **Fade In**: `animate-fade-in` - 0.8s ease-out
+- **Slide In**: `animate-slide-in` - 0.8s cubic-bezier(0.16, 1, 0.3, 1)
+- **Blur In**: `animate-blur-in` - 1s ease-out
+
+### Delay Classes
+- `delay-75` (75ms), `delay-100` (100ms), `delay-150` (150ms)
+- `delay-200` (200ms), `delay-300` (300ms), `delay-500` (500ms), `delay-700` (700ms)
+
+### Transition Effects
+- **All Properties**: `transition-all duration-500 ease-out`
+- **Colors**: `transition-colors`
+- **Transform**: `transition-transform`
+- **Opacity**: `transition-opacity`
+
+### Hover Animations
+- **Scale**: `hover:scale-110`, `group-hover:scale-105`
+- **Translate**: `group-hover:translate-x-1`
+- **Color Shift**: Text and background color changes on hover
+
+## Visual Effects
+
+### Shadows
+- **Card Shadows**: `shadow-xl`, `shadow-2xl`
+- **Custom Shadow**: `shadow-[0_8px_30px_rgb(0,0,0,0.12)]`
+- **Inner Shadow**: `shadow-inner` for recessed elements
+
+### Backdrop Effects
+- **Blur**: `backdrop-blur-sm`, `backdrop-blur-md` for glass morphism
+- **Background Opacity**: `bg-white/40`, `bg-white/50`, `bg-gray-200/30`
+
+### Blend Modes
+- **Multiply**: `mix-blend-multiply` for layered effects
+- **Opacity Variations**: `opacity-10`, `opacity-20`, `opacity-50`, `opacity-80`
+
+### Border Radius
+- **Small**: `rounded-md` (0.375rem), `rounded-lg` (0.5rem), `rounded-xl` (0.75rem)
+- **Large**: `rounded-2xl` (1rem), `rounded-3xl` (1.5rem)
+- **Custom**: `rounded-[2.5rem]`, `rounded-[3rem]`
+- **Full**: `rounded-full` for circles and pills
+
+## Iconography
+
+### Icon Library
+**Lucide Icons** - Consistent stroke-based icon system
+- Stroke width: `1.5`
+- Common sizes: `w-4 h-4` (small), `w-5 h-5` (medium), `w-6 h-6` (large), `w-8 h-8` (XL)
+
+### Icon Categories
+- **Navigation**: menu, arrow-left, arrow-right, home
+- **Gaming**: gamepad-2, zap, shapes, rocket, sword, shield
+- **Shopping**: shopping-bag
+- **UI**: settings, trophy, crown, layers
+
+## Section Breakdowns
+
+### 1. Hero Section
+- **Layout**: Split-screen (4-8 column grid)
+- **Left**: White sidebar with navigation, headline, category selector
+- **Right**: Slate-50 background with abstract shapes and background image
+- **Typography Overlay**: Massive "GAME" text at `text-[40rem]`
+- **Animation**: Staggered fade-in and slide-in effects
+
+### 2. Section 2 
+- **Background**: `bg-blue-600`
+- **Container**: `bg-blue-700`, rounded top corners
+- **Layout**: Asymmetric grid - 1 large (2x2), 4 medium (1x1)
+- **Featured Card**: gradient background, icon, title, CTA
+- **Image Cards**: Full-bleed background images with text overlay
+
+### 3. Featured Categories
+- **Background**: `bg-gray-700` with animated gradient blobs
+- **Cards**: Icon + text, hover scale effect
+- **Decorative**: Purple and blue blurred circles with `mix-blend-multiply`
+
+### 4. Section 4
+- **Layout**: 1-3 column split (text + logo grid)
+- **Logo Grid**: 4x2 grid with borders, hover states
+- **Style**: Icons as placeholder logos, consistent spacing with gaps
+
+### 5. Section 5
+- **Layout**: 2-column (image + text)
+- **Left**: Postage stamp effect with radial gradient pattern
+- **Right**: `bg-blue-700` with metadata, title, navigation dots
+
+## Responsive Behavior
+
+### Breakpoints
+- **Mobile**: Default styles (< 768px)
+- **Tablet**: `md:` prefix (≥ 768px)
+- **Desktop**: `lg:` prefix (≥ 1024px)
+
+### Mobile Adaptations
+- Single column layouts (`grid-cols-1`)
+- Smaller padding (`p-8` → `lg:p-12`)
+- Reduced text sizes (`text-7xl` → `lg:text-8xl`)
+- Stacked flex layouts (`flex-col` → `md:flex-row`)
+
+## Accessibility Features
+
+### Text Contrast
+- White text on blue 600+ backgrounds
+- Dark slate text on white/light backgrounds
+- Semi-transparent overlays on images ensure readability
+
+### Interactive Elements
+- Focus states: `focus:outline-none focus:ring-2 focus:ring-blue-100`
+- Cursor indicators: `cursor-pointer` on interactive elements
+- Clear hover states with color/opacity changes
+
+### Selection Styling
+```css
+selection:bg-pink-500 selection:text-white
+```
+
+## Design Philosophy
+
+The design follows modern web trends:
+1. **Bold Typography**: Large, tight headlines with uppercase treatments
+2. **Vibrant Colors**: Saturated blues and oranges with high contrast
+3. **Smooth Animations**: Subtle entrance effects and hover states
+4. **Card-Based Layout**: Bento grid asymmetry creates visual interest
+5. **Glass Morphism**: Backdrop blur and transparency effects
+6. **3D Touches**: Phone mockup rotation, layered shadows
+7. **Minimalist UI**: Clean icons, simple buttons, generous whitespace
+
+## Technical Implementation
+
+- **Framework**: Astro with Tailwind CSS
+- **CDN Resources**: Tailwind CDN, Google Fonts CDN, Lucide icons CDN
+- **Image Hosting**: Supabase storage for background images
+- **Optimization**: AVIF/WebP images, lazy loading implied
+- **Responsive Images**: Multiple resolutions (800w, 1600w)
+
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e526733..8bae739 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,13 +4,692 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 ---
 
 <BaseLayout>
-	<h1>{SITE_TITLE}</h1>
-	<p>{SITE_DESCRIPTION}</p>
 
-	<nav>
-		<ul>
-			<li><a href="/blog">Blog</a></li>
-			<li><a href="/contact">Contact</a></li>
-		</ul>
-	</nav>
-</BaseLayout>
+<head><meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Play Wonder - iPhone Games</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&amp;family=Oswald:wght@400;500;600&amp;display=swap" rel="stylesheet">
+<script src="https://unpkg.com/lucide@latest"></script>
+<style>
+body { font-family: 'Inter', sans-serif; }
+h1, h2, h3, .brand-font { font-family: 'Oswald', sans-serif; }
+.no-scrollbar::-webkit-scrollbar { display: none; }
+.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+</style>
+<link id="all-fonts-link-font-geist" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&amp;display=swap">
+<style id="all-fonts-style-font-geist">
+.font-geist { font-family: 'Geist', sans-serif !important; }
+</style>
+<link id="all-fonts-link-font-roboto" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&amp;display=swap">
+<style id="all-fonts-style-font-roboto">
+.font-roboto { font-family: 'Roboto', sans-serif !important; }
+</style>
+<link id="all-fonts-link-font-montserrat" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&amp;display=swap">
+<style id="all-fonts-style-font-montserrat">
+.font-montserrat { font-family: 'Montserrat', sans-serif !important; }
+</style>
+<link id="all-fonts-link-font-poppins" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap">
+<style id="all-fonts-style-font-poppins">
+.font-poppins { font-family: 'Poppins', sans-serif !important; }
+</style>
+<link id="all-fonts-link-font-playfair" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&amp;display=swap">
+<style id="all-fonts-style-font-playfair">
+.font-playfair { font-family: 'Playfair Display', serif !important; }
+</style>
+<link id="all-fonts-link-font-instrument-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&amp;display=swap">
+<style id="all-fonts-style-font-instrument-serif">
+.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }
+</style>
+<link id="all-fonts-link-font-merriweather" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&amp;display=swap">
+<style id="all-fonts-style-font-merriweather">
+.font-merriweather { font-family: 'Merriweather', serif !important; }
+</style>
+<link id="all-fonts-link-font-bricolage" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&amp;display=swap">
+<style id="all-fonts-style-font-bricolage">
+.font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }
+</style>
+<link id="all-fonts-link-font-jakarta" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&amp;display=swap">
+<style id="all-fonts-style-font-jakarta">
+.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif !important; }
+</style>
+<link id="all-fonts-link-font-manrope" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&amp;display=swap">
+<style id="all-fonts-style-font-manrope">
+.font-manrope { font-family: 'Manrope', sans-serif !important; }
+</style>
+<link id="all-fonts-link-font-space-grotesk" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;display=swap">
+<style id="all-fonts-style-font-space-grotesk">
+.font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }
+</style>
+<link id="all-fonts-link-font-work-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&amp;display=swap">
+<style id="all-fonts-style-font-work-sans">
+.font-work-sans { font-family: 'Work Sans', sans-serif !important; }
+</style>
+<link id="all-fonts-link-font-pt-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&amp;display=swap">
+<style id="all-fonts-style-font-pt-serif">
+.font-pt-serif { font-family: 'PT Serif', serif !important; }
+</style>
+<link id="all-fonts-link-font-geist-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&amp;display=swap">
+<style id="all-fonts-style-font-geist-mono">
+.font-geist-mono { font-family: 'Geist Mono', monospace !important; }
+</style>
+<link id="all-fonts-link-font-space-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&amp;display=swap">
+<style id="all-fonts-style-font-space-mono">
+.font-space-mono { font-family: 'Space Mono', monospace !important; }
+</style>
+<link id="all-fonts-link-font-quicksand" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&amp;display=swap">
+<style id="all-fonts-style-font-quicksand">
+.font-quicksand { font-family: 'Quicksand', sans-serif !important; }
+</style>
+<link id="all-fonts-link-font-nunito" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&amp;display=swap">
+<style id="all-fonts-style-font-nunito">
+.font-nunito { font-family: 'Nunito', sans-serif !important; }
+</style>
+<link id="all-fonts-link-font-newsreader" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400..800&amp;display=swap">
+<style id="all-fonts-style-font-newsreader">
+.font-newsreader { font-family: 'Newsreader', serif !important; }
+</style>
+<link id="all-fonts-link-font-google-sans-flex" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700&amp;display=swap">
+<style id="all-fonts-style-font-google-sans-flex">
+.font-google-sans-flex { font-family: 'Google Sans Flex', sans-serif !important; }
+</style>
+<link id="all-fonts-link-font-oswald" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&amp;display=swap">
+<style id="all-fonts-style-font-oswald">
+.font-oswald { font-family: 'Oswald', sans-serif !important; }
+</style>
+<link id="all-fonts-link-font-dm-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&amp;display=swap">
+<style id="all-fonts-style-font-dm-sans">
+.font-dm-sans { font-family: 'DM Sans', sans-serif !important; }
+</style>
+<style>
+@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+@keyframes slideIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes blurIn { from { opacity: 0; filter: blur(12px); } to { opacity: 1; filter: blur(0); } }
+.animate-fade-in { animation: fadeIn 0.8s ease-out both; }
+.animate-slide-in { animation: slideIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
+.animate-blur-in { animation: blurIn 1s ease-out both; }
+.delay-75 { animation-delay: 75ms; }
+.delay-100 { animation-delay: 100ms; }
+.delay-150 { animation-delay: 150ms; }
+.delay-200 { animation-delay: 200ms; }
+.delay-300 { animation-delay: 300ms; }
+.delay-500 { animation-delay: 500ms; }
+.delay-700 { animation-delay: 700ms; }
+</style><style>*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0px}.bottom-0{bottom:0px}.bottom-8{bottom:2rem}.bottom-\[-4rem\]{bottom:-4rem}.left-0{left:0px}.left-6{left:1.5rem}.left-8{left:2rem}.right-0{right:0px}.right-1{right:0.25rem}.right-6{right:1.5rem}.right-8{right:2rem}.right-\[1rem\]{right:1rem}.top-0{top:0px}.top-1{top:0.25rem}.top-12{top:3rem}.top-8{top:2rem}.top-full{top:100%}.isolate{isolation:isolate}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.col-span-1{grid-column:span 1 / span 1}.row-span-2{grid-row:span 2 / span 2}.mx-2{margin-left:0.5rem;margin-right:0.5rem}.mx-auto{margin-left:auto;margin-right:auto}.my-1{margin-top:0.25rem;margin-bottom:0.25rem}.my-12{margin-top:3rem;margin-bottom:3rem}.-mb-20{margin-bottom:-5rem}.-ml-20{margin-left:-5rem}.-mr-20{margin-right:-5rem}.-mt-20{margin-top:-5rem}.mb-1{margin-bottom:0.25rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:0.5rem}.mb-20{margin-bottom:5rem}.mb-3{margin-bottom:0.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:0.5rem}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.mt-12{margin-top:3rem}.mt-2{margin-top:0.5rem}.mt-4{margin-top:1rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-square{aspect-ratio:1 / 1}.h-0{height:0px}.h-0\.5{height:0.125rem}.h-1\.5{height:0.375rem}.h-1\/2{height:50%}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:0.5rem}.h-20{height:5rem}.h-24{height:6rem}.h-3{height:0.75rem}.h-32{height:8rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-8{height:2rem}.h-96{height:24rem}.h-\[150\%\]{height:150%}.h-\[24px\]{height:24px}.h-\[28rem\]{height:28rem}.h-\[40rem\]{height:40rem}.h-full{height:100%}.h-px{height:1px}.min-h-\[50vh\]{min-height:50vh}.min-h-screen{min-height:100vh}.w-1\.5{width:0.375rem}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:0.5rem}.w-20{width:5rem}.w-24{width:6rem}.w-3{width:0.75rem}.w-3\/4{width:75%}.w-32{width:8rem}.w-4{width:1rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-8{width:2rem}.w-96{width:24rem}.w-\[150\%\]{width:150%}.w-\[20rem\]{width:20rem}.w-\[24px\]{width:24px}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-px{width:1px}.max-w-7xl{max-width:80rem}.max-w-xl{max-width:36rem}.origin-top-left{transform-origin:top left}.rotate-12{--tw-rotate:12deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-\[-6deg\]{--tw-rotate:-6deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.skew-y-12{--tw-skew-y:12deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-150{--tw-scale-x:1.5;--tw-scale-y:1.5;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-rows-2{grid-template-rows:repeat(2, minmax(0, 1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:0.25rem}.gap-12{gap:3rem}.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-px{gap:1px}.gap-x-6{column-gap:1.5rem}.gap-y-6{row-gap:1.5rem}.space-y-8 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\[2\.5rem\]{border-radius:2.5rem}.rounded-\[3rem\]{border-radius:3rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.rounded-xl{border-radius:0.75rem}.rounded-b-xl{border-bottom-right-radius:0.75rem;border-bottom-left-radius:0.75rem}.rounded-t-3xl{border-top-left-radius:1.5rem;border-top-right-radius:1.5rem}.rounded-t-full{border-top-left-radius:9999px;border-top-right-radius:9999px}.rounded-tl-full{border-top-left-radius:9999px}.border{border-width:1px}.border-2{border-width:2px}.border-8{border-width:8px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-blue-400{--tw-border-opacity:1;border-color:rgb(96 165 250 / var(--tw-border-opacity, 1))}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.border-blue-500\/20{border-color:rgb(59 130 246 / 0.2)}.border-blue-500\/30{border-color:rgb(59 130 246 / 0.3)}.border-blue-600{--tw-border-opacity:1;border-color:rgb(37 99 235 / var(--tw-border-opacity, 1))}.border-blue-600\/50{border-color:rgb(37 99 235 / 0.5)}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))}.border-orange-500{--tw-border-opacity:1;border-color:rgb(249 115 22 / var(--tw-border-opacity, 1))}.border-slate-800{--tw-border-opacity:1;border-color:rgb(30 41 59 / var(--tw-border-opacity, 1))}.border-white\/20{border-color:rgb(255 255 255 / 0.2)}.border-white\/30{border-color:rgb(255 255 255 / 0.3)}.border-white\/50{border-color:rgb(255 255 255 / 0.5)}.bg-blue-200{--tw-bg-opacity:1;background-color:rgb(191 219 254 / var(--tw-bg-opacity, 1))}.bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250 / var(--tw-bg-opacity, 1))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-blue-500\/30{background-color:rgb(59 130 246 / 0.3)}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.bg-blue-700{--tw-bg-opacity:1;background-color:rgb(29 78 216 / var(--tw-bg-opacity, 1))}.bg-blue-700\/50{background-color:rgb(29 78 216 / 0.5)}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.bg-gray-200\/30{background-color:rgb(229 231 235 / 0.3)}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.bg-orange-500{--tw-bg-opacity:1;background-color:rgb(249 115 22 / var(--tw-bg-opacity, 1))}.bg-purple-500{--tw-bg-opacity:1;background-color:rgb(168 85 247 / var(--tw-bg-opacity, 1))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\/10{background-color:rgb(255 255 255 / 0.1)}.bg-white\/40{background-color:rgb(255 255 255 / 0.4)}.bg-white\/50{background-color:rgb(255 255 255 / 0.5)}.bg-yellow-400{--tw-bg-opacity:1;background-color:rgb(250 204 21 / var(--tw-bg-opacity, 1))}.bg-\[radial-gradient\(circle\2c transparent_20\%\2c \#eff6ff_20\%\)\]{background-image:radial-gradient(circle,transparent 20%,#eff6ff 20%)}.bg-\[url\(https\:\/\/cdn\.midjourney\.com\/998803fa-f971-4a07-bf29-69d4fcb5fa78\/0_0\.png\?w\=800\&q\=80\)\]{background-image:url(https://cdn.midjourney.com/998803fa-f971-4a07-bf29-69d4fcb5fa78/0_0.png?w=800&q=80)}.bg-\[url\(https\:\/\/hoirqrkdgbmvpwutwuwj\.supabase\.co\/storage\/v1\/object\/public\/assets\/assets\/271cc6a7-34b3-4021-a220-251dcc1232c8_800w\.webp\)\]{background-image:url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/271cc6a7-34b3-4021-a220-251dcc1232c8_800w.webp)}.bg-\[url\(https\:\/\/hoirqrkdgbmvpwutwuwj\.supabase\.co\/storage\/v1\/object\/public\/assets\/assets\/625b0919-b519-4de0-933c-ea927bf922fd_1600w\.webp\)\]{background-image:url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/625b0919-b519-4de0-933c-ea927bf922fd_1600w.webp)}.bg-\[url\(https\:\/\/hoirqrkdgbmvpwutwuwj\.supabase\.co\/storage\/v1\/object\/public\/assets\/assets\/761941af-4608-43b4-83a6-c1a8c200e7d2_800w\.webp\)\]{background-image:url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/761941af-4608-43b4-83a6-c1a8c200e7d2_800w.webp)}.bg-\[url\(https\:\/\/hoirqrkdgbmvpwutwuwj\.supabase\.co\/storage\/v1\/object\/public\/assets\/assets\/8b41d26d-ba9b-458e-8df2-7a794ed63be7_1600w\.webp\)\]{background-image:url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/8b41d26d-ba9b-458e-8df2-7a794ed63be7_1600w.webp)}.bg-\[url\(https\:\/\/hoirqrkdgbmvpwutwuwj\.supabase\.co\/storage\/v1\/object\/public\/assets\/assets\/a81897e6-7b41-4199-8274-2e8482ec7393_1600w\.webp\)\]{background-image:url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a81897e6-7b41-4199-8274-2e8482ec7393_1600w.webp)}.bg-\[url\(https\:\/\/hoirqrkdgbmvpwutwuwj\.supabase\.co\/storage\/v1\/object\/public\/assets\/assets\/ce091baa-d550-4abf-94fb-04084db8d527_800w\.webp\)\]{background-image:url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/ce091baa-d550-4abf-94fb-04084db8d527_800w.webp)}.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))}.bg-gradient-to-t{background-image:linear-gradient(to top, var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from:#3b82f6 var(--tw-gradient-from-position);--tw-gradient-to:rgb(59 130 246 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-slate-900{--tw-gradient-from:#0f172a var(--tw-gradient-from-position);--tw-gradient-to:rgb(15 23 42 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-yellow-500{--tw-gradient-from:#eab308 var(--tw-gradient-from-position);--tw-gradient-to:rgb(234 179 8 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-slate-900\/40{--tw-gradient-to:rgb(15 23 42 / 0)  var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), rgb(15 23 42 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-blue-600{--tw-gradient-to:#2563eb var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.to-yellow-700{--tw-gradient-to:#a16207 var(--tw-gradient-to-position)}.bg-\[length\:20px_20px\]{background-size:20px 20px}.bg-cover{background-size:cover}.bg-fixed{background-attachment:fixed}.bg-center{background-position:center}.fill-current{fill:currentColor}.object-cover{object-fit:cover}.p-12{padding:3rem}.p-2{padding:0.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-0{padding-bottom:0px}.pb-1{padding-bottom:0.25rem}.pb-12{padding-bottom:3rem}.pb-24{padding-bottom:6rem}.pb-4{padding-bottom:1rem}.pb-8{padding-bottom:2rem}.pl-4{padding-left:1rem}.pl-6{padding-left:1.5rem}.pl-8{padding-left:2rem}.pr-4{padding-right:1rem}.pr-6{padding-right:1.5rem}.pr-8{padding-right:2rem}.pt-20{padding-top:5rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-7xl{font-size:4.5rem;line-height:1}.text-\[40rem\]{font-size:40rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-\[0\.85\]{line-height:0.85}.leading-\[1\.1\]{line-height:1.1}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-0.025em}.tracking-tighter{letter-spacing:-0.05em}.tracking-wide{letter-spacing:0.025em}.tracking-wider{letter-spacing:0.05em}.tracking-widest{letter-spacing:0.1em}.text-blue-100{--tw-text-opacity:1;color:rgb(219 234 254 / var(--tw-text-opacity, 1))}.text-blue-200{--tw-text-opacity:1;color:rgb(191 219 254 / var(--tw-text-opacity, 1))}.text-blue-300{--tw-text-opacity:1;color:rgb(147 197 253 / var(--tw-text-opacity, 1))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.text-fuchsia-300{--tw-text-opacity:1;color:rgb(240 171 252 / var(--tw-text-opacity, 1))}.text-orange-300{--tw-text-opacity:1;color:rgb(253 186 116 / var(--tw-text-opacity, 1))}.text-orange-500{--tw-text-opacity:1;color:rgb(249 115 22 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-slate-50{--tw-text-opacity:1;color:rgb(248 250 252 / var(--tw-text-opacity, 1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105 / var(--tw-text-opacity, 1))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59 / var(--tw-text-opacity, 1))}.text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-white\/70{color:rgb(255 255 255 / 0.7)}.text-white\/80{color:rgb(255 255 255 / 0.8)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-10{opacity:0.1}.opacity-20{opacity:0.2}.opacity-50{opacity:0.5}.opacity-80{opacity:0.8}.mix-blend-multiply{mix-blend-mode:multiply}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-\[0_8px_30px_rgb\(0\2c 0\2c 0\2c 0\.12\)\]{--tw-shadow:0 8px 30px rgb(0,0,0,0.12);--tw-shadow-colored:0 8px 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.blur-3xl{--tw-blur:blur(64px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.delay-100{transition-delay:100ms}.delay-200{transition-delay:200ms}.delay-300{transition-delay:300ms}.delay-500{transition-delay:500ms}.delay-700{transition-delay:700ms}.duration-200{transition-duration:200ms}.duration-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.duration-700{transition-duration:700ms}.ease-out{transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.selection\:bg-pink-500 *::selection{--tw-bg-opacity:1;background-color:rgb(236 72 153 / var(--tw-bg-opacity, 1))}.selection\:text-white *::selection{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.selection\:bg-pink-500::selection{--tw-bg-opacity:1;background-color:rgb(236 72 153 / var(--tw-bg-opacity, 1))}.selection\:text-white::selection{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-white:hover{--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))}.hover\:bg-blue-50\/50:hover{background-color:rgb(239 246 255 / 0.5)}.hover\:bg-blue-500:hover{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.hover\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.hover\:text-blue-200:hover{--tw-text-opacity:1;color:rgb(191 219 254 / var(--tw-text-opacity, 1))}.hover\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.hover\:opacity-75:hover{opacity:0.75}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\:ring-blue-100:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(219 234 254 / var(--tw-ring-opacity, 1))}.group:hover .group-hover\:h-6{height:1.5rem}.group:hover .group-hover\:translate-x-1{--tw-translate-x:0.25rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:rotate-0{--tw-rotate:0deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:text-blue-200{--tw-text-opacity:1;color:rgb(191 219 254 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:text-fuchsia-200{--tw-text-opacity:1;color:rgb(245 208 254 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:text-orange-200{--tw-text-opacity:1;color:rgb(254 215 170 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.group:hover .group-hover\:opacity-70{opacity:0.7}@media (min-width: 768px){.md\:col-span-2{grid-column:span 2 / span 2}.md\:mb-0{margin-bottom:0px}.md\:w-\[26rem\]{width:26rem}.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.md\:flex-row{flex-direction:row}.md\:items-end{align-items:flex-end}}@media (min-width: 1024px){.lg\:col-span-1{grid-column:span 1 / span 1}.lg\:col-span-2{grid-column:span 2 / span 2}.lg\:col-span-3{grid-column:span 3 / span 3}.lg\:col-span-4{grid-column:span 4 / span 4}.lg\:col-span-8{grid-column:span 8 / span 8}.lg\:my-0{margin-top:0px;margin-bottom:0px}.lg\:h-96{height:24rem}.lg\:grid-cols-12{grid-template-columns:repeat(12, minmax(0, 1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.lg\:justify-end{justify-content:flex-end}.lg\:gap-16{gap:4rem}.lg\:gap-8{gap:2rem}.lg\:p-12{padding:3rem}.lg\:p-16{padding:4rem}.lg\:px-12{padding-left:3rem;padding-right:3rem}.lg\:text-4xl{font-size:2.25rem;line-height:2.5rem}.lg\:text-5xl{font-size:3rem;line-height:1}.lg\:text-8xl{font-size:6rem;line-height:1}}</style></head>
+  <body class="bg-blue-600 text-slate-900 antialiased selection:bg-pink-500 selection:text-white">
+    <!-- Hero Section -->
+    <div class="min-h-screen grid grid-cols-1 lg:grid-cols-12 overflow-hidden bg-white relative">
+      <!-- Left Sidebar / Content -->
+      <div class="lg:col-span-4 flex flex-col lg:p-12 z-20 bg-white border-gray-100 border-r pt-8 pr-8 pb-8 pl-8 justify-between relative">
+        <div class="flex items-center justify-between animate-fade-in">
+          <div class="flex items-center gap-3">
+            <div class="relative">
+              <button onclick="document.getElementById('nav-dropdown').classList.toggle('hidden')" class="p-2 rounded-full hover:bg-gray-100 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-100">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="menu" class="lucide lucide-menu w-6 h-6 text-slate-800"><path d="M4 5h16"></path><path d="M4 12h16"></path><path d="M4 19h16"></path></svg>
+              </button>
+
+              <!-- Dropdown Menu -->
+              <div id="nav-dropdown" class="hidden absolute top-full left-0 mt-2 w-64 bg-white rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] border border-gray-100 p-2 z-50 origin-top-left animate-in fade-in slide-in-from-top-2 duration-200">
+                <div class="flex flex-col gap-1">
+                  <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium text-slate-600 hover:text-blue-600 hover:bg-blue-50/50 rounded-xl transition-all group">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-home w-4 h-4 text-slate-400 group-hover:text-blue-500 transition-colors">
+                      <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
+                      <polyline points="9 22 9 12 15 12 15 22"></polyline>
+                    </svg>
+                    Home
+                  </a>
+                  <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium text-slate-600 hover:text-blue-600 hover:bg-blue-50/50 rounded-xl transition-all group">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap w-4 h-4 text-slate-400 group-hover:text-blue-500 transition-colors">
+                      <path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path>
+                    </svg>
+                    New Releases
+                  </a>
+                  <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium text-slate-600 hover:text-blue-600 hover:bg-blue-50/50 rounded-xl transition-all group">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gamepad-2 w-4 h-4 text-slate-400 group-hover:text-blue-500 transition-colors">
+                      <line x1="6" x2="10" y1="11" y2="11"></line>
+                      <line x1="8" x2="8" y1="9" y2="13"></line>
+                      <line x1="15" x2="15.01" y1="12" y2="12"></line>
+                      <line x1="18" x2="18.01" y1="10" y2="10"></line>
+                      <path d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"></path>
+                    </svg>
+                    Categories
+                  </a>
+                  <div class="h-px bg-gray-100 my-1 mx-2"></div>
+                  <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium text-slate-600 hover:text-blue-600 hover:bg-blue-50/50 rounded-xl transition-all group">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings w-4 h-4 text-slate-400 group-hover:text-blue-500 transition-colors">
+                      <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.47a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path>
+                      <circle cx="12" cy="12" r="3"></circle>
+                    </svg>
+                    Settings
+                  </a>
+                </div>
+              </div>
+            </div>
+
+            <div class="w-10 h-10 border-2 border-orange-500 flex items-center justify-center font-bold text-slate-800 brand-font text-xl rounded-lg">
+              P
+            </div>
+          </div>
+          <div class="flex gap-2">
+            <button class="p-2 rounded-full hover:bg-gray-100 transition-colors relative">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="shopping-bag" class="lucide lucide-shopping-bag w-5 h-5 text-slate-800"><path d="M16 10a4 4 0 0 1-8 0"></path><path d="M3.103 6.034h17.794"></path><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"></path></svg>
+              <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
+            </button>
+          </div>
+        </div>
+
+        <div class="my-12 lg:my-0">
+          <h1 class="text-7xl lg:text-8xl font-medium uppercase tracking-tighter leading-[0.85] text-slate-800 animate-slide-in delay-100">
+            Play
+            <br>
+            <span class="text-blue-600">Wonder</span>
+          </h1>
+        </div>
+
+        <div class="space-y-8">
+          <div class="flex items-center gap-3 text-sm font-medium tracking-wide text-blue-500 uppercase animate-slide-in delay-200">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="shapes" class="lucide lucide-shapes w-5 h-5"><path d="M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z"></path><rect x="3" y="14" width="7" height="7" rx="1"></rect><circle cx="17.5" cy="17.5" r="3.5"></circle></svg>
+            <span class="">Top iPhone Games</span>
+          </div>
+
+          <div class="flex items-center justify-between border-t border-gray-100 pt-6 animate-slide-in delay-300">
+            <button class="p-2 hover:bg-gray-50 rounded-full transition-colors">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-left" class="lucide lucide-arrow-left w-5 h-5 text-slate-400"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg>
+            </button>
+            <span class="text-xs font-semibold tracking-widest uppercase text-slate-400">
+              Brain Teasers
+            </span>
+            <button class="p-2 hover:bg-gray-50 rounded-full transition-colors">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-5 h-5 text-orange-500"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Art / Abstract (Visualizing Building Blocks) -->
+      <div class="lg:col-span-8 overflow-hidden min-h-[50vh] lg:min-h-auto bg-slate-50 relative">
+        <!-- Abstract Shapes -->
+        <div class="grid grid-cols-2 grid-rows-2 bg-center bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/625b0919-b519-4de0-933c-ea927bf922fd_1600w.webp)] bg-cover absolute top-0 right-0 bottom-0 left-0 bg-fixed" style="">
+          <div class="overflow-hidden relative" style="visibility: hidden;">
+            <div class="w-full h-1/2 rounded-tl-full absolute right-0 bottom-0" style=""></div>
+          </div>
+
+          <div class="relative" style="visibility: hidden;">
+            <div class="transform bg-center w-3/4 h-full absolute top-0 right-0 skew-y-12" style="visibility: hidden;"></div>
+          </div>
+          <div class="flex relative items-center justify-center" style="visibility: hidden;"></div>
+        </div>
+
+        <!-- Big Typography Overlay -->
+        <div class="absolute inset-0 flex items-center justify-center mix-blend-multiply opacity-10 pointer-events-none parallax-element" style="transform: translateY(0px);" data-speed="0.15">
+          <span class="text-[40rem] font-bold leading-none tracking-tighter text-slate-900">
+            GAME
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Selected Toys Section -->
+    <section class="bg-blue-600 pt-20 pb-0">
+      <div class="lg:px-12 max-w-7xl mr-auto ml-auto pr-6 pl-6">
+        <div class="flex flex-col md:flex-row md:items-end gap-6 mb-16 justify-between animate-slide-in">
+          <div class="">
+            <span class="block h-0.5 w-12 bg-blue-400 mb-4"></span>
+            <span class="text-blue-200 text-xs font-bold tracking-widest uppercase">
+              App Store Hits
+            </span>
+          </div>
+          <h2 class="text-4xl lg:text-5xl font-semibold text-white tracking-tight">
+            Trending Games
+          </h2>
+          <div class="flex gap-2">
+            <button class="w-10 h-10 rounded-full border border-blue-400 flex items-center justify-center text-white hover:bg-blue-500 transition-colors">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-left" class="lucide lucide-arrow-left w-4 h-4"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg>
+            </button>
+            <button class="w-10 h-10 rounded-full border border-blue-400 flex items-center justify-center text-white hover:bg-blue-500 transition-colors">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
+            </button>
+          </div>
+        </div>
+
+        <!-- Bento Grid Layout -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 overflow-hidden bg-blue-700 border-blue-500/20 border rounded-t-3xl shadow-2xl" style="">
+          <!-- Large Item: Smart Robot -->
+          <div class="col-span-1 md:col-span-2 lg:col-span-2 row-span-2 lg:p-16 overflow-hidden group bg-gradient-to-br from-blue-500 to-blue-600 pt-8 pr-8 pb-8 pl-8 relative animate-blur-in delay-100">
+            <div class="flex flex-col z-10 h-full relative justify-between">
+              <div class="mb-8" style="">
+                <div class="w-12 h-12 bg-orange-500 rounded-xl mb-6 shadow-lg flex items-center justify-center text-white">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="gamepad-2" class="lucide lucide-gamepad-2 w-6 h-6"><line x1="6" x2="10" y1="11" y2="11"></line><line x1="8" x2="8" y1="9" y2="13"></line><line x1="15" x2="15.01" y1="12" y2="12"></line><line x1="18" x2="18.01" y1="10" y2="10"></line><path d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"></path></svg>
+                </div>
+                <h3 class="text-4xl text-white font-semibold mb-2">
+                  Cyber Quest 3D
+                </h3>
+                <p class="text-lg text-blue-100">Immersive AR RPG</p>
+              </div>
+              <a href="#" class="inline-flex items-center gap-2 text-white text-sm font-semibold tracking-wide uppercase bg-blue-700/50 hover:bg-blue-700 px-6 py-3 rounded-full w-fit transition-colors">
+                Play Now
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4 ml-2"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
+              </a>
+            </div>
+            <!-- Mockup Visualization -->
+            <div class="transform group-hover:rotate-0 transition-all duration-500 ease-out md:w-[26rem] bg-slate-900 w-[20rem] h-[40rem] border-slate-800 border-8 rounded-[3rem] absolute right-[1rem] bottom-[-4rem] shadow-2xl rotate-[-6deg]">
+              <div class="overflow-hidden w-full h-full bg-cover bg-center rounded-[2.5rem] relative bg-[url(https://cdn.midjourney.com/998803fa-f971-4a07-bf29-69d4fcb5fa78/0_0.png?w=800&amp;q=80)]" style="">
+                <!-- App Screen Mock -->
+                <div class="flex bg-center z-10 w-full h-48 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a81897e6-7b41-4199-8274-2e8482ec7393_1600w.webp)] bg-cover absolute top-0 items-center justify-center" style="visibility: hidden;">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="bot" class="lucide lucide-bot w-20 h-20 text-white opacity-50" style=""><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></svg>
+                </div>
+                <div class="absolute top-12 right-6 left-6">
+                  <div class="bg-white/50 w-24 h-8 rounded-full mb-8" style=""></div>
+                  <div class="flex flex-col bg-white/40 h-32 rounded-2xl pt-4 pr-4 pb-4 pl-4 backdrop-blur-sm justify-between" style="">
+                    <div class="flex items-center justify-between" style="">
+                      <div class="flex text-xs text-white bg-orange-500 w-8 h-8 rounded-full items-center justify-center">
+                        TURBO
+                      </div>
+                      <div class="bg-gray-200 w-12 h-2 rounded-full"></div>
+                    </div>
+                    <div class="flex gap-2" style="">
+                      <div class="bg-gray-200 w-8 h-8 rounded-md"></div>
+                      <div class="bg-gray-200 w-24 h-8 rounded-md"></div>
+                    </div>
+                  </div>
+                  <div class="grid grid-cols-2 gap-4 mt-4" style="">
+                    <div class="flex bg-gray-200/30 h-24 rounded-xl backdrop-blur-sm items-center justify-center">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="sword" class="lucide lucide-sword text-slate-50 w-6 h-6"><path d="m11 19-6-6"></path><path d="m5 21-2-2"></path><path d="m8 16-4 4"></path><path d="M9.5 17.5 21 6V3h-3L6.5 14.5"></path></svg>
+                    </div>
+                    <div class="flex bg-gray-200/30 h-24 rounded-xl backdrop-blur-sm items-center justify-center">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="shield" class="lucide lucide-shield text-slate-50 w-[24px] h-[24px]"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path></svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Grid Item: Rocket -->
+          <div class="lg:p-12 overflow-hidden group bg-center h-96 bg-cover pt-8 pr-8 pb-8 pl-8 relative bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/271cc6a7-34b3-4021-a220-251dcc1232c8_800w.webp)] animate-blur-in delay-200 bg-fixed" style="">
+            <div class="opacity-20 pt-8 pr-8 pb-8 pl-8 absolute top-0 right-0">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="rocket" class="lucide lucide-rocket text-white w-32 h-32"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path></svg>
+            </div>
+            <div class="z-10 flex flex-col h-full relative justify-end">
+              <span class="uppercase text-xs font-bold text-slate-50 tracking-widest mb-2">
+                Editor's Choice
+              </span>
+              <h3 class="text-3xl text-white font-semibold leading-tight mb-4">
+                Galaxy Raider X
+              </h3>
+              <a href="#" class="text-white hover:opacity-75 transition-opacity inline-flex items-center gap-2">
+                Get App
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
+              </a>
+            </div>
+          </div>
+
+          <!-- Grid Item: Purple -->
+          <div class="lg:p-12 overflow-hidden group h-96 bg-cover bg-center px-8 py-8 relative bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/761941af-4608-43b4-83a6-c1a8c200e7d2_800w.webp)] animate-blur-in delay-300 bg-fixed" style="">
+            <!-- Geometric Art CSS -->
+
+            <div class="z-10 flex flex-col h-full relative justify-end">
+              <span class="uppercase text-xs font-bold text-slate-50 tracking-widest mb-2">
+                Fantasy RPG
+              </span>
+              <h3 class="text-3xl text-white font-semibold leading-tight mb-4">
+                Kingdom Defense
+              </h3>
+              <a href="#" class="text-white hover:opacity-75 transition-opacity inline-flex items-center gap-2">
+                Play Free
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
+              </a>
+            </div>
+          </div>
+
+          <!-- Grid Item: Image Centric (Car) -->
+          <div class="col-span-1 md:col-span-2 overflow-hidden bg-slate-900 h-96 relative animate-blur-in delay-500">
+            <div class="bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/8b41d26d-ba9b-458e-8df2-7a794ed63be7_1600w.webp)] bg-cover bg-center absolute top-0 right-0 bottom-0 left-0" style=""></div>
+            <div class="flex absolute top-0 right-0 bottom-0 left-0 items-center justify-center" style="">
+              <div class="transform bg-white/10 w-48 h-full border-white/20 border-l backdrop-blur-sm rotate-12 scale-150"></div>
+              <div class="absolute bg-gradient-to-b from-yellow-500 to-yellow-700 w-32 h-64 rounded-t-full rounded-b-xl shadow-2xl border-t border-white/30 flex items-center justify-center flex-col gap-2">
+                <div class="w-16 h-16 border-2 border-white/50 rounded-full flex items-center justify-center text-white">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="car-front" class="lucide lucide-car-front w-8 h-8"><path d="m21 8-2 2-1.5-3.7A2 2 0 0 0 15.646 5H8.4a2 2 0 0 0-1.903 1.257L5 10 3 8"></path><path d="M7 14h.01"></path><path d="M17 14h.01"></path><rect width="18" height="8" x="3" y="10" rx="2"></rect><path d="M5 18v2"></path><path d="M19 18v2"></path></svg>
+                </div>
+                <div class="text-white text-center text-xs font-bold tracking-widest mt-2">
+                  FASTLANE
+                </div>
+              </div>
+            </div>
+            <div class="absolute bottom-8 left-8 z-10">
+              <h3 class="text-2xl text-white font-semibold">
+                Asphalt Drifters
+              </h3>
+            </div>
+          </div>
+
+          <!-- Grid Item: White -->
+          <div class="group lg:p-12 bg-center h-96 bg-cover pt-8 pr-8 pb-8 pl-8 relative bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/ce091baa-d550-4abf-94fb-04084db8d527_800w.webp)] animate-blur-in delay-700 bg-fixed">
+            <div class="w-full px-8 py-8 absolute bottom-0 left-0">
+              <span class="uppercase block text-xs font-bold text-slate-50 tracking-widest mb-1">
+                Building Blocks
+              </span>
+              <h3 class="text-3xl font-semibold text-slate-50 mb-2">
+                Block Master Pro
+              </h3>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="overflow-hidden bg-gray-700 border-blue-500/30 border-t py-24 relative">
+      <!-- Background Elements -->
+      <div class="-mr-20 -mt-20 filter animate-blob bg-blue-500 opacity-20 mix-blend-multiply w-96 h-96 rounded-full absolute top-0 right-0 blur-3xl"></div>
+      <div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-96 h-96 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
+
+      <div class="max-w-7xl mx-auto px-6 lg:px-12 relative z-10">
+        <!-- Section Header -->
+        <div class="flex flex-col md:flex-row md:items-end gap-6 mb-12 gap-x-6 gap-y-6 justify-between animate-slide-in">
+          <div class="max-w-xl">
+            <span class="text-blue-200 text-xs font-bold tracking-widest uppercase mb-3 block">
+              Discover More
+            </span>
+            <h2 class="text-4xl lg:text-5xl font-semibold text-white tracking-tight leading-[1.1]">
+              Featured Categories
+            </h2>
+            <p class="text-blue-100 mt-4 text-lg font-light leading-relaxed">
+              Discover the most addictive iPhone games designed to spark
+              creativity, logic, and endless hours of fun.
+            </p>
+          </div>
+          <a href="#" class="group flex items-center gap-2 text-white font-semibold uppercase tracking-wider text-sm border border-white/20 px-6 py-3 rounded-full hover:bg-white hover:text-blue-600 transition-all duration-300">
+            View All Genres
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4 transition-transform group-hover:translate-x-1"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
+          </a>
+        </div>
+
+        <!-- Collections Grid -->
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
+          <!-- Card 1: Creative -->
+          <a href="#" class="group overflow-hidden isolate h-[28rem] relative shadow-2xl animate-slide-in delay-200">
+            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/688cd65c-7f0c-42f3-a8a4-ec34ab859745_800w.webp" alt="Creative Arts" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
+            <div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/40 to-transparent opacity-80 group-hover:opacity-70 transition-opacity"></div>
+
+            <div class="flex flex-col pt-8 pr-8 pb-8 pl-8 absolute top-0 right-0 bottom-0 left-0 justify-end">
+              <div class="w-12 h-12 bg-white/10 backdrop-blur-md border border-white/20 rounded-xl flex items-center justify-center mb-4 text-white group-hover:scale-110 transition-transform duration-300">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="palette" class="lucide lucide-palette w-6 h-6"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle></svg>
+              </div>
+              <span class="text-orange-300 text-xs font-bold tracking-widest uppercase mb-2">
+                Indie Gems
+              </span>
+              <h3 class="text-3xl text-white font-semibold tracking-tight mb-2 group-hover:text-orange-200 transition-colors">
+                Artistic Journeys
+              </h3>
+              <div class="h-0 group-hover:h-6 overflow-hidden transition-all duration-300">
+                <p class="text-white/80 text-sm font-medium">
+                  Beautiful narratives and unique styles.
+                </p>
+              </div>
+            </div>
+          </a>
+
+          <!-- Card 2: STEM -->
+          <a href="#" class="group overflow-hidden isolate h-[28rem] relative shadow-2xl animate-slide-in delay-300">
+            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/41466c73-a9de-4e10-ae1b-0dffbc549a96_800w.jpg" alt="STEM Learning" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
+            <div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/40 to-transparent opacity-80 group-hover:opacity-70 transition-opacity"></div>
+
+            <div class="flex flex-col pt-8 pr-8 pb-8 pl-8 absolute top-0 right-0 bottom-0 left-0 justify-end">
+              <div class="w-12 h-12 bg-white/10 backdrop-blur-md border border-white/20 rounded-xl flex items-center justify-center mb-4 text-white group-hover:scale-110 transition-transform duration-300">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="microscope" class="lucide lucide-microscope w-6 h-6"><path d="M6 18h8"></path><path d="M3 22h18"></path><path d="M14 22a7 7 0 1 0 0-14h-1"></path><path d="M9 14h2"></path><path d="M9 12a2 2 0 0 1-2-2V6h6v4a2 2 0 0 1-2 2Z"></path><path d="M12 6V3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3"></path></svg>
+              </div>
+              <span class="text-blue-300 text-xs font-bold tracking-widest uppercase mb-2">
+                Masterminds
+              </span>
+              <h3 class="text-3xl text-white font-semibold tracking-tight mb-2 group-hover:text-blue-200 transition-colors">
+                Strategy &amp; Sim
+              </h3>
+              <div class="h-0 group-hover:h-6 overflow-hidden transition-all duration-300">
+                <p class="text-white/80 text-sm font-medium">
+                  Base building and tactical warfare.
+                </p>
+              </div>
+            </div>
+          </a>
+
+          <!-- Card 3: Action -->
+          <a href="#" class="group overflow-hidden isolate h-[28rem] relative shadow-2xl animate-slide-in delay-500">
+            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c6be8857-eb8d-4e60-9a94-1167f48655ef_800w.webp" alt="Active Play" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" style="">
+            <div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/40 to-transparent opacity-80 group-hover:opacity-70 transition-opacity"></div>
+
+            <div class="flex flex-col pt-8 pr-8 pb-8 pl-8 absolute top-0 right-0 bottom-0 left-0 justify-end">
+              <div class="w-12 h-12 bg-white/10 backdrop-blur-md border border-white/20 rounded-xl flex items-center justify-center mb-4 text-white group-hover:scale-110 transition-transform duration-300">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="trophy" class="lucide lucide-trophy w-6 h-6"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"></path><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"></path><path d="M18 9h1.5a1 1 0 0 0 0-5H18"></path><path d="M4 22h16"></path><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"></path><path d="M6 9H4.5a1 1 0 0 1 0-5H6"></path></svg>
+              </div>
+              <span class="text-fuchsia-300 text-xs font-bold tracking-widest uppercase mb-2">
+                Battle Royale
+              </span>
+              <h3 class="text-3xl text-white font-semibold tracking-tight mb-2 group-hover:text-fuchsia-200 transition-colors">
+                Multiplayer Action
+              </h3>
+              <div class="h-0 group-hover:h-6 overflow-hidden transition-all duration-300">
+                <p class="text-white/80 text-sm font-medium">
+                  Compete with players worldwide.
+                </p>
+              </div>
+            </div>
+          </a>
+        </div>
+
+        <!-- Quick Links (Pills) -->
+        <div class="mt-12 flex flex-wrap gap-3 justify-center">
+          <a href="#" class="px-5 py-2.5 bg-blue-700 hover:bg-white hover:text-blue-600 text-white rounded-full text-xs font-bold tracking-wide uppercase transition-colors border border-blue-500/30">
+            Free to Play
+          </a>
+          <a href="#" class="px-5 py-2.5 bg-blue-700 hover:bg-white hover:text-blue-600 text-white rounded-full text-xs font-bold tracking-wide uppercase transition-colors border border-blue-500/30">
+            Arcade
+          </a>
+          <a href="#" class="px-5 py-2.5 bg-blue-700 hover:bg-white hover:text-blue-600 text-white rounded-full text-xs font-bold tracking-wide uppercase transition-colors border border-blue-500/30">
+            Puzzle
+          </a>
+          <a href="#" class="px-5 py-2.5 bg-blue-700 hover:bg-white hover:text-blue-600 text-white rounded-full text-xs font-bold tracking-wide uppercase transition-colors border border-blue-500/30">
+            Action
+          </a>
+          <a href="#" class="px-5 py-2.5 bg-blue-700 hover:bg-white hover:text-blue-600 text-white rounded-full text-xs font-bold tracking-wide uppercase transition-colors border border-blue-500/30">
+            Editors' Choice
+          </a>
+        </div>
+      </div>
+    </section>
+
+    <!-- Brands Section -->
+    <section class="bg-blue-600 py-24 border-t border-blue-500">
+      <div class="max-w-7xl mx-auto px-6 lg:px-12 grid grid-cols-1 lg:grid-cols-4 gap-12">
+        <div class="lg:col-span-1">
+          <h2 class="text-4xl font-semibold text-white tracking-tight mb-4">
+            Top Studios
+          </h2>
+          <p class="text-blue-100 text-base leading-relaxed mb-8">
+            Featuring hits from the world's best mobile game developers.
+          </p>
+          <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-white/30 text-white text-sm font-semibold rounded-lg hover:bg-white hover:text-blue-600 transition-all">
+            See All Studios
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4 ml-2"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
+          </a>
+        </div>
+
+        <div class="lg:col-span-3 grid grid-cols-2 md:grid-cols-4 gap-px bg-blue-500/30 border border-blue-500/30">
+          <!-- Logos (Using Lucide as placeholders) -->
+          <div class="aspect-square flex hover:bg-blue-500 transition-colors group cursor-pointer bg-blue-600 border-blue-500/30 border pt-8 pr-8 pb-8 pl-8 items-center justify-center">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="puzzle" class="lucide lucide-puzzle w-10 h-10 text-white/70 group-hover:text-white transition-colors"><path d="M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"></path></svg>
+          </div>
+          <div class="aspect-square bg-blue-600 flex items-center justify-center p-8 hover:bg-blue-500 transition-colors group cursor-pointer border border-blue-500/30">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="gamepad" class="lucide lucide-gamepad w-10 h-10 text-white/70 group-hover:text-white transition-colors"><line x1="6" x2="10" y1="12" y2="12"></line><line x1="8" x2="8" y1="10" y2="14"></line><line x1="15" x2="15.01" y1="13" y2="13"></line><line x1="18" x2="18.01" y1="11" y2="11"></line><rect width="20" height="12" x="2" y="6" rx="2"></rect></svg>
+          </div>
+          <div class="aspect-square bg-blue-600 flex items-center justify-center p-8 hover:bg-blue-500 transition-colors group cursor-pointer border border-blue-500/30">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="zap" class="lucide lucide-zap w-10 h-10 text-white/70 group-hover:text-white transition-colors"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg>
+          </div>
+          <div class="aspect-square bg-blue-600 flex items-center justify-center p-8 hover:bg-blue-500 transition-colors group cursor-pointer border border-blue-500/30">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="wind" class="lucide lucide-wind w-10 h-10 text-white/70 group-hover:text-white transition-colors"><path d="M12.8 19.6A2 2 0 1 0 14 16H2"></path><path d="M17.5 8a2.5 2.5 0 1 1 2 4H2"></path><path d="M9.8 4.4A2 2 0 1 1 11 8H2"></path></svg>
+          </div>
+          <div class="aspect-square bg-blue-600 flex items-center justify-center p-8 hover:bg-blue-500 transition-colors group cursor-pointer border border-blue-500/30">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="dices" class="lucide lucide-dices w-10 h-10 text-white/70 group-hover:text-white transition-colors"><rect width="12" height="12" x="2" y="10" rx="2" ry="2"></rect><path d="m17.92 14 3.5-3.5a2.24 2.24 0 0 0 0-3l-5-4.92a2.24 2.24 0 0 0-3 0L10 6"></path><path d="M6 18h.01"></path><path d="M10 14h.01"></path><path d="M15 6h.01"></path><path d="M18 9h.01"></path></svg>
+          </div>
+          <div class="aspect-square bg-blue-600 flex items-center justify-center p-8 hover:bg-blue-500 transition-colors group cursor-pointer border border-blue-500/30">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="box" class="lucide lucide-box w-10 h-10 text-white/70 group-hover:text-white transition-colors"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"></path><path d="m3.3 7 8.7 5 8.7-5"></path><path d="M12 22V12"></path></svg>
+          </div>
+          <div class="aspect-square bg-blue-600 flex items-center justify-center p-8 hover:bg-blue-500 transition-colors group cursor-pointer border border-blue-500/30">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="crown" class="lucide lucide-crown w-10 h-10 text-white/70 group-hover:text-white transition-colors"><path d="M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z"></path><path d="M5 21h14"></path></svg>
+          </div>
+          <div class="aspect-square bg-blue-600 flex items-center justify-center p-8 hover:bg-blue-500 transition-colors group cursor-pointer border border-blue-500/30">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="layers" class="lucide lucide-layers w-10 h-10 text-white/70 group-hover:text-white transition-colors"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path></svg>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Banner Section -->
+    <section class="bg-blue-600 pb-24">
+      <div class="max-w-7xl mx-auto px-6 lg:px-12">
+        <div class="bg-blue-500 rounded-3xl overflow-hidden relative">
+          <div class="grid grid-cols-1 lg:grid-cols-2">
+            <!-- Image Area (CSS Art) -->
+            <div class="h-64 lg:h-96 bg-white relative overflow-hidden p-6">
+              <!-- Stamps Effect -->
+              <div class="absolute inset-0 bg-blue-200">
+                <div class="w-full h-full bg-[radial-gradient(circle,transparent_20%,#eff6ff_20%)] bg-[length:20px_20px] p-4">
+                  <div class="w-full h-full bg-white shadow-xl relative overflow-hidden flex items-center justify-center">
+                    <div class="w-[150%] h-[150%] bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/625b0919-b519-4de0-933c-ea927bf922fd_1600w.webp)] bg-cover bg-center absolute rotate-12" style=""></div>
+                    <div class="relative z-10 w-32 h-32 bg-yellow-400 rounded-full flex items-center justify-center shadow-inner">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="trophy" class="lucide lucide-trophy w-16 h-16 text-slate-900"><path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"></path><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"></path><path d="M18 9h1.5a1 1 0 0 0 0-5H18"></path><path d="M4 22h16"></path><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"></path><path d="M6 9H4.5a1 1 0 0 1 0-5H6"></path></svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Text Area -->
+            <div class="p-12 lg:p-16 bg-blue-700 flex flex-col justify-center relative">
+              <div class="absolute top-8 right-8 flex gap-2">
+                <button class="w-8 h-8 rounded-full border border-blue-400 flex items-center justify-center text-white hover:bg-blue-600">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-left" class="lucide lucide-arrow-left w-3 h-3"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg>
+                </button>
+                <button class="w-8 h-8 rounded-full border border-blue-400 flex items-center justify-center text-white hover:bg-blue-600">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-3 h-3"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
+                </button>
+              </div>
+
+              <div class="mb-2 flex items-center gap-2">
+                <span class="text-xs font-bold tracking-widest text-blue-300 uppercase">
+                  Ages 3-5
+                </span>
+                <span class="w-px h-3 bg-blue-400"></span>
+                <span class="text-xs font-bold tracking-widest text-blue-300 uppercase">
+                  Best Sellers
+                </span>
+              </div>
+
+              <h2 class="text-3xl lg:text-4xl font-semibold text-white mb-6 leading-tight">
+                Game of the Year: Unwrap the Magic
+              </h2>
+
+              <div class="flex items-center gap-2 mb-8">
+                <span class="w-1.5 h-1.5 bg-white rounded-full"></span>
+                <span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span>
+                <span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span>
+                <span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span>
+              </div>
+
+              <a href="#" class="inline-flex items-center text-sm font-semibold text-white uppercase tracking-wider border-b border-blue-400 pb-1 w-fit hover:border-white transition-colors">
+                Read Guide
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4 ml-2"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-gray-900 border-blue-600 border-t pt-20 pb-12 animate-fade-in delay-200">
+      <div class="max-w-7xl mx-auto px-6 lg:px-12">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-12 items-start mb-20">
+          <!-- Brand -->
+          <div class="lg:col-span-4">
+            <div class="flex items-center gap-3 mb-6">
+              <div class="w-12 h-12 bg-white flex items-center justify-center font-bold text-slate-900 brand-font text-2xl border-2 border-orange-500 rounded-lg">
+                P
+              </div>
+              <div class="leading-none">
+                <span class="block text-2xl font-bold text-white uppercase tracking-tighter brand-font">
+                  Play
+                </span>
+                <span class="block text-2xl font-bold text-blue-200 uppercase tracking-tighter brand-font">
+                  Wonder
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Links -->
+          <div class="lg:col-span-8 flex flex-wrap gap-8 lg:gap-16 lg:justify-end">
+            <a href="#" class="text-sm font-semibold text-white uppercase tracking-wider hover:text-blue-200 transition-colors">
+              Games
+            </a>
+            <a href="#" class="text-sm font-semibold text-white uppercase tracking-wider hover:text-blue-200 transition-colors">
+              Categories
+            </a>
+            <a href="#" class="text-sm font-semibold text-white uppercase tracking-wider hover:text-blue-200 transition-colors">
+              Top Charts
+            </a>
+            <a href="#" class="text-sm font-semibold text-white uppercase tracking-wider hover:text-blue-200 transition-colors">
+              Brands
+            </a>
+            <a href="#" class="text-sm font-semibold text-white uppercase tracking-wider hover:text-blue-200 transition-colors">
+              Sale
+            </a>
+          </div>
+        </div>
+
+        <!-- Bottom Bar -->
+        <div class="flex flex-col md:flex-row justify-between items-center pt-8 border-t border-blue-600/50">
+          <div class="text-blue-300 text-xs mb-4 md:mb-0">
+            © 2024 Play Wonder Games. All Rights Reserved.
+          </div>
+
+          <div class="flex items-center gap-6">
+            <span class="text-white font-semibold text-lg tracking-tight">
+              Join the Fun
+            </span>
+            <div class="flex gap-4">
+              <a href="#" class="w-10 h-10 rounded-full bg-white flex items-center justify-center text-blue-600 hover:scale-110 transition-transform">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="mail" class="lucide lucide-mail w-5 h-5 fill-current"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg>
+              </a>
+              <a href="#" class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white border border-blue-500 hover:scale-110 transition-transform">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="twitter" class="lucide lucide-twitter w-5 h-5 fill-current"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg>
+              </a>
+              <a href="#" class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white border border-blue-500 hover:scale-110 transition-transform">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="instagram" class="lucide lucide-instagram w-5 h-5"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line></svg>
+              </a>
+              <a href="#" class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white border border-blue-500 hover:scale-110 transition-transform">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="facebook" class="lucide lucide-facebook w-5 h-5 fill-current"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+
+    <script>
+      lucide.createIcons({
+          attrs: {
+              'stroke-width': 1.5
+          }
+      });
+    </script>
+
+    <script>
+      document.addEventListener('scroll', function() {
+        const scrolled = window.pageYOffset;
+        document.querySelectorAll('.parallax-element').forEach(function(el) {
+          const speed = el.getAttribute('data-speed') || 0.5;
+          el.style.transform = 'translateY(' + (scrolled * speed) + 'px)';
+        });
+      });
+    </script>
+  
+<script data-img-fallback-handler="">!function(){var f=["https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg","https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4734259a-bad7-422f-981e-ce01e79184f2_1600w.jpg","https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c543a9e1-f226-4ced-80b0-feb8445a75b9_1600w.jpg","https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/5bab247f-35d9-400d-a82b-fd87cfe913d2_1600w.webp","https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/30104e3c-5eea-4b93-93e9-5313698a7156_1600w.webp"],h=new Set;function g(s){for(var x=0,i=0;i<s.length;i++)x=(x<<5)-x+s.charCodeAt(i)|0;return f[Math.abs(x)%f.length]}function r(t){var s=t.src;if(s&&!h.has(s)){h.add(s);t.src=g(s)}}window.addEventListener("error",function(e){var t=e.target;if(t&&t.tagName==="IMG")r(t)},!0);function c(){document.querySelectorAll("img").forEach(function(i){if(i.complete&&!i.naturalWidth&&i.src)r(i)})}if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",c);else c()}()</script></body></BaseLayout>