Components

src/components/
├── ui/                    # shadcn/ui components
│   ├── button.tsx
│   ├── input.tsx
│   └── card.tsx
├── landing/               # Landing page sections
├── dashboard/             # Dashboard components
├── pricing/               # Pricing components
└── paywall.tsx            # Gated content

bunx shadcn@latest add dialog
bunx shadcn@latest add dropdown-menu
bunx shadcn@latest add toast

import { Button } from '@/components/ui/button';

<Button variant="default">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>

import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

<div>
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="you@example.com" />
</div>

import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
  </CardHeader>
  <CardContent>
    Card content goes here.
  </CardContent>
</Card>

import { HeroSection } from '@/components/hero-section';

<HeroSection
  title="Your SaaS Product"
  subtitle="Brief description of what you offer"
  ctaText="Get Started"
  ctaHref="/signup"
/>

import { PricingSection } from '@/components/pricing';

<PricingSection products={stripeProducts} />

interface FeatureCardProps {
  title: string;
  description: string;
  icon: React.ReactNode;
}

export function FeatureCard({ title, description, icon }: FeatureCardProps) {
  return (
    <div className="p-6 border rounded-lg">
      <div className="mb-4">{icon}</div>
      <h3 className="text-lg font-semibold">{title}</h3>
      <p className="text-muted-foreground">{description}</p>
    </div>
  );
}

import { Check, X, ArrowRight } from 'lucide-react';

<Check className="h-4 w-4" />
<X className="h-4 w-4 text-destructive" />
<ArrowRight className="h-4 w-4" />