fabgel.com .com

# Landing Page Specification

## 1. Theme & Aesthetic
Soft, premium, and tactile. Emphasize the smooth, gel-like texture through imagery and subtle animations. Think minimalist and elegant.

## 2. Color Palette
- **Primary**: #805AD5 (Soft Purple)
- **Secondary**: #D6BCFA (Light Lavender)
- **Accent**: #ECC94B (Muted Gold)
- **Background**: #FAF7FF (Very Light Off-White)
- **Surface/Card**: #FFFFFF (Pure White)
- **Border**: #E0D6F0 (Pale Lavender)

## 3. Typography
- **Headings**: 'Playfair Display' (Elegant and stylish, for a premium feel)
- **Body**: 'Lato' (Clean, friendly, and readable, complements the heading font)

## 4. UI Design System
- **Shadows**: 0 8px 20px -4px rgba(0, 0, 0, 0.1)
- **Border Radius**: 15px
- **Spacing**: Balanced whitespace, 80px section padding, 24px component spacing

## 5. Layout Structure
- **Hero**: A clean, centered layout with a high-quality product image or video showcasing the gel texture. A clear headline and a primary CTA to 'Customize Yours'.
- **Features**: A carousel or stacked layout highlighting customization options, quality ingredients, and fast shipping.
- **CTA**: Rounded, soft buttons with a subtle gradient, matching the primary and secondary colors. Prominent placement in hero and at the end of sections.

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