A modern, scalable landing page built with Astro, React, and Tailwind CSS. Features a comprehensive design system with Storybook documentation.

• Framework: Astro - Static site generation with islands architecture
• UI Library: React - Interactive components
• Styling: Tailwind CSS - Utility-first CSS
• Animation: Framer Motion - Production-ready animations
• Icons: Lucide React - Beautiful icons
• Documentation: Storybook - Component documentation

src/
├── components/
│   ├── icons/          # Brand icons and logo
│   ├── sections/       # Page sections (Header, Hero, etc.)
│   └── ui/             # Design system primitives
├── design-system/
│   └── tokens/         # Design tokens (colors, spacing, etc.)
├── layouts/            # Astro layouts
├── lib/                # Utilities and helpers
├── pages/              # Astro pages
├── stories/            # Storybook stories
└── styles/             # Global styles and Tailwind config

• Node.js 18+
• Yarn (package manager)

# Install dependencies
yarn install

# Start development server
yarn dev

# Start Storybook
yarn storybook

The design system is built on a token-based architecture:

• Brand Orange: Primary accent color (#F97316)
• Brand Navy: Text and dark backgrounds (#0F172A)
• Light and dark mode support

• Font: DM Sans
• Scale: Based on 1.25 ratio (major third)

All components are documented in Storybook:

• Button - Primary interactive element
• Input - Form input fields
• Card - Content containers
• Badge - Status indicators
• Container - Layout wrapper
• Section - Page sections

# Build for production
yarn build

# Output is in ./dist folder

The build output can be deployed to any static hosting provider (Vercel, Netlify, Cloudflare Pages, etc.)

MIT