tunefo .com

# Landing Page Specification

## 1. Theme & Aesthetic
Creative, vibrant, and energetic. A dynamic aesthetic that celebrates music and innovation, using bold colors and engaging visuals.

## 2. Color Palette
- **Primary**: #FF4500 (Vibrant Orange Red)
- **Secondary**: #FFA07A
- **Accent**: #00FFFF (Electric Cyan)
- **Background**: #1A1A1A (Dark Charcoal)
- **Surface/Card**: #2C2C2C
- **Border**: #444444 (Subtle dark grey)

## 3. Typography
- **Headings**: Montserrat (Bold, modern, and impactful, reflecting creative energy)
- **Body**: Lato (Clean, readable, and versatile for diverse content)

## 4. UI Design System
- **Shadows**: 0 12px 24px -6px rgba(0, 0, 0, 0.3), 0 6px 12px -3px rgba(0, 0, 0, 0.15)
- **Border Radius**: 10px (Moderately rounded, sleek corners)
- **Spacing**: Dynamic spacing, 90px section padding, 25px component spacing, creating visual interest.

## 5. Layout Structure
- **Hero**: An electrifying hero section with an immersive background video or animation featuring music production, a punchy headline, a compelling sub-headline, and a glowing 'Start Creating' CTA button.
- **Features**: An asymmetrical grid or zig-zag layout for features, incorporating large, appealing icons or snippets of the UI, descriptive text, and calls to action for each feature, with scroll-triggered animations.
- **CTA**: A powerful, full-width call-to-action block urging creators to join the community, with a contrasting button and clear value proposition, set against a vibrant gradient background.

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