sisavy .com

# Landing Page Specification

## 1. Theme & Aesthetic
Clean, efficient, and user-friendly SaaS aesthetic with a focus on simplicity, clarity, and seamless user experience.

## 2. Color Palette
- **Primary**: #10B981 (Deep, premium shade)
- **Secondary**: #4B5563
- **Accent**: #60A5FA (High contrast)
- **Background**: #F9FAFB
- **Surface/Card**: #FFFFFF
- **Border**: #E5E7EB (Subtle)

## 3. Typography
- **Headings**: Outfit (Modern, geometric, and conveys a sense of precision and structure)
- **Body**: Inter (Professional, clear, and highly optimized for digital screens)

## 4. UI Design System
- **Shadows**: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)
- **Border Radius**: 8px
- **Spacing**: Structured whitespace, 64px section padding, 20px component padding

## 5. Layout Structure
- **Hero**: A clear value proposition with a compelling headline and subtext, a subtle background animation (e.g., connecting nodes), flanked by a product screenshot and a prominent call-to-action button or sign-up form.
- **Features**: Clean, icon-driven blocks with concise explanations, arranged in a responsive three-column grid. Each feature should clearly articulate a benefit.
- **CTA**: Prominent, gradient-filled button, easily visible in the hero and often appearing as a sticky element or in a dedicated section before the footer.

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