# Homepage Skill Documentation ## Overview This document provides specifications for creating a modern, visually stunning homepage with 3D elements, smooth animations, and contemporary web design patterns. The homepage should create an immersive first impression that reflects cutting-edge design trends. ## Design Philosophy ### Core Principles - **Immersive Experience**: Use 3D elements, parallax effects, and depth to create engagement - **Smooth Interactions**: Every animation should feel fluid and purposeful - **Visual Hierarchy**: Guide users naturally through the content - **Performance First**: Beautiful but optimized for fast loading - **Modern Aesthetic**: Dark theme with vibrant accents, glassmorphism, and gradient effects ### Visual Style Reference Based on modern SaaS landing pages like Halo AI Studio: - Dark, sophisticated color palette - Strategic use of blue\/cyan gradients - Large, bold typography with gradient text effects - Floating cards with glass effects - Subtle 3D transforms and parallax scrolling - Ambient lighting effects and glows ## Technical Stack ### Core Technologies ```typescript - Next.js 16 (App Router) - TypeScript - Three.js \/ React Three Fiber (for 3D elements) - Framer Motion (for animations) - Tailwind CSS (for styling) - Intersection Observer API (for scroll animations) ``` ### Required Dependencies ```json { "dependencies": { "next": "^16.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "three": "^0.160.0", "@react-three\/fiber": "^8.15.0", "@react-three\/drei": "^9.92.0", "framer-motion": "^10.16.0", "lucide-react": "^0.263.0" } } ``` ## Component Structure ### File Organization ``` app\/ ├── page.tsx # Main homepage └── components\/ ├── homepage\/ │ ├── Hero.tsx # Hero section with 3D background │ ├── Header.tsx # Navigation header │ ├── Footer.tsx # Footer section │ ├── Features.tsx # Features showcase │ ├── Stats.tsx # Statistics\/metrics section │ ├── Testimonials.tsx # Customer reviews │ ├── CTA.tsx # Call-to-action section │ ├── Pricing.tsx # Pricing cards (optional) │ └── 3d\/ │ ├── Scene3D.tsx # Main 3D scene │ ├── FloatingCards.tsx # 3D floating cards │ └── ParticleField.tsx # Particle effects └── ui\/ ├── Button.tsx # Reusable button component ├── Card.tsx # Glass card component └── GradientText.tsx # Gradient text effect ``` ## Section Specifications ### 1. Header Component **Location**: Sticky at top, transparent with blur backdrop **Features**: - Logo on the left - Navigation menu (center or right) - CTA button (e.g., "Get Started", "Sign In") - Mobile hamburger menu - Scroll-triggered blur background - Smooth show\/hide on scroll **Example Structure**: ```typescript interface HeaderProps { transparent?: boolean; fixed?: boolean; } const navItems = [ { label: 'Features', href: '#features' }, { label: 'Pricing', href: '#pricing' }, { label: 'About', href: '#about' }, { label: 'Contact', href: '#contact' } ]; ``` **Styling**: ```css - Height: 80px - Background: rgba(10, 14, 26, 0.8) with backdrop-blur - Border-bottom: 1px solid rgba(255, 255, 255, 0.1) - z-index: 1000 - Transition: all 0.3s ease ``` ### 2. Hero Section **Purpose**: Main landing area with attention-grabbing 3D visuals **Features**: - Full viewport height (100vh) - Large headline with gradient text effect - Subheading\/description - Primary and secondary CTA buttons - 3D background scene (abstract shapes, particles, or product visualization) - Parallax scrolling effect - Smooth scroll indicator\/arrow **Content Structure**: ```typescript interface HeroContent { headline: string; \/\/ "Build Amazing TODO Apps" subheadline: string; \/\/ "The modern way to manage tasks" description: string; \/\/ Supporting text primaryCTA: CTAButton; \/\/ "Get Started Free" secondaryCTA?: CTAButton; \/\/ "Watch Demo" } ``` **3D Elements**: - Floating geometric shapes (cubes, spheres, toruses) - Particle field background - Subtle rotation animations - Mouse parallax interaction - Gradient lighting effects **Typography**: ```css - Headline: 4rem - 6rem, font-weight: 800 - Gradient: linear-gradient(to right, #fff, #60a5fa, #3b82f6) - Subheadline: 1.5rem - 2rem, opacity: 0.9 - Line-height: 1.2 for headlines ``` ### 3. Features Section **Layout**: Grid-based feature cards with icons and descriptions **Features**: - 3 or 6 feature cards in responsive grid - Icon or illustration for each feature - Title and description - Hover effects (lift, glow, scale) - Stagger animation on scroll - Optional: Bento grid layout for varied card sizes **Card Design**: ```typescript interface Feature { icon: React.ReactNode; title: string; description: string; gradient?: string; } const features: Feature[] = [ { icon: , title: "Easy Task Management", description: "Create, organize, and track tasks effortlessly", gradient: "from-blue-500 to-cyan-500" }, \/\/ ... more features ]; ``` **Card Styling**: ```css - Background: Glass effect (rgba(255, 255, 255, 0.05)) - Border: 1px solid rgba(255, 255, 255, 0.1) - Border-radius: 1rem - Padding: 2rem - Backdrop-filter: blur(10px) - Box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) - Hover: transform: translateY(-8px) - Transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) ``` ### 4. Stats Section **Purpose**: Display impressive metrics\/achievements **Layout**: 3-4 stat cards in a row with large numbers **Structure**: ```typescript interface Stat { value: string; \/\/ "10K+" label: string; \/\/ "Active Users" description?: string; \/\/ "Growing daily" icon?: React.ReactNode; } const stats: Stat[] = [ { value: "10K+", label: "Active Users" }, { value: "50K+", label: "Tasks Completed" }, { value: "99.9%", label: "Uptime" }, { value: "24\/7", label: "Support" } ]; ``` **Animation**: - Counter animation on scroll into view - Gradient number effect - Pulse\/glow on hover ### 5. Testimonials Section **Layout**: Carousel or grid of testimonial cards **Features**: - Customer photo\/avatar - Name and role - Company logo (optional) - Quote\/review text - Star rating - Auto-rotating carousel (optional) **Card Structure**: ```typescript interface Testimonial { author: string; role: string; company?: string; avatar: string; content: string; rating: number; } ``` **Design**: - Cards with glass effect - Larger quote marks as decorative element - Subtle animation on card change - Navigation dots or arrows ### 6. Pricing Section (Optional) **Layout**: 3 pricing tiers in cards **Features**: - Plan name and price - Feature list with checkmarks - Highlight popular\/recommended plan - CTA button per plan - Toggle for monthly\/yearly pricing **Card Structure**: ```typescript interface PricingPlan { name: string; \/\/ "Basic", "Pro", "Enterprise" price: number; period: string; \/\/ "\/month" description: string; features: string[]; highlighted?: boolean; \/\/ Popular badge cta: string; \/\/ "Get Started" } ``` **Highlighted Plan**: - Larger scale (scale: 1.05) - Distinct border\/glow effect - "Most Popular" badge - Different background gradient ### 7. Call-to-Action Section **Purpose**: Final conversion section before footer **Features**: - Bold headline - Supporting text - Primary CTA button - Background: Gradient or 3D element - Full-width section with padding **Design**: ```css - Background: Radial gradient with brand colors - Text: Center-aligned, white - Button: Large, prominent, with hover effect - Optional: Floating 3D element in background ``` ### 8. Footer Component **Layout**: Multi-column footer with site map and info **Sections**: - Company info and logo - Navigation links (grouped by category) - Social media icons - Newsletter signup - Legal links (Privacy, Terms) - Copyright notice **Structure**: ```typescript const footerLinks = { product: ['Features', 'Pricing', 'FAQ'], company: ['About', 'Blog', 'Careers'], resources: ['Documentation', 'Help Center', 'Contact'], legal: ['Privacy Policy', 'Terms of Service'] }; ``` **Styling**: ```css - Background: Darker than main (#050810) - Border-top: 1px solid rgba(255, 255, 255, 0.1) - Padding: 4rem 0 2rem - Grid: 4 columns on desktop, stack on mobile ``` ## 3D Components ### Scene3D.tsx **Purpose**: Main 3D canvas background for hero section **Implementation**: ```typescript import { Canvas } from '@react-three\/fiber'; import { OrbitControls, Float } from '@react-three\/drei'; export const Scene3D = () => { return (