Components

Project Distri includes a set of premium, reusable components.

Header

The header component provides:

• Logo — Customizable brand mark and text
• Navigation — Desktop nav links with active state indicators
• Theme toggle — Switch between light and dark modes
• Auth buttons — Sign In / Sign Up links
• Mobile menu — Responsive hamburger menu

Hero Section

A full-width hero with:

• Animated badge with pulsing dot
• Gradient text heading
• Subtitle text
• Primary and secondary CTA buttons
• Radial gradient background glow

Feature Grid

A responsive 3-column grid of feature cards with:

• Icon container
• Title and description
• Hover animation with gradient overlay
• Staggered fade-in animation

Pricing Grid

Three pricing tiers with:

• "Most Popular" badge
• Price display with period
• Feature checklist
• CTA button (primary for popular, outline for others)
• Scale transform on the popular card

Auth Forms

Login and signup forms featuring:

• OAuth provider buttons (Google, GitHub)
• Divider with "or" text
• Email/password form fields with focus states
• Submit button
• Link to alternate auth page

Footer

A simple footer with:

• Attribution text with links
• Social media icon links (X, GitHub, LinkedIn)