focoki.com .com

# Landing Page Specification

## 1. Theme & Aesthetic
Innovative, intelligent, and streamlined. A modern, clean aesthetic with subtle AI-themed visual elements, like abstract neural network patterns or glowing node animations. Focus on clarity and ease of use.

## 2. Color Palette
- **Primary**: #4F46E5 (Indigo Blue)
- **Secondary**: #8B5CF6 (Amethyst Purple)
- **Accent**: #F472B6 (Hot Pink)
- **Background**: #FFFFFF (Pure White)
- **Surface/Card**: #F9FAFB (Very Light Gray)
- **Border**: #E5E7EB (Subtle Gray)

## 3. Typography
- **Headings**: 'Montserrat' (Modern, geometric, versatile and bold)
- **Body**: 'Inter' (Clean, highly readable, suitable for AI explanations)

## 4. UI Design System
- **Shadows**: 0 10px 15px -3px rgba(0, 0, 0, 0.07)
- **Border Radius**: 8px
- **Spacing**: Generous whitespace, 100px section padding, 32px component spacing

## 5. Layout Structure
- **Hero**: Animated visual representing AI text generation or a clean interface screenshot. Headline: 'Effortless AI Content Creation'. Primary CTA: 'Try Focoki Free'.
- **Features**: A 3-column grid showcasing content types (blog posts, social media, ad copy) with icons and brief descriptions. Interactive elements demonstrating content generation could be included.
- **CTA**: Rounded, vibrant buttons using primary and accent colors, with clear hover states and subtle animation.

## 6. Tech Stack
- Framework: Next.js 14
- Styling: Tailwind CSS
- Animation: Framer Motion