ai website builder

I have implemented the pricing page at src/pages/pricing.tsx. I utilized your existing tailwind.config.js for colors and spacing to ensure brand consistency. The implementation includes a functional state toggle for billing cycles and responsive layouts for mobile viewing.

Pricing Page Implementation

import React, { useState } from 'react';
import { Check } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';

const PricingPage = () => {
  const [billingCycle, setBillingCycle] = useState('monthly');

  const plans = [
    { name: 'Pro', price: billingCycle === 'monthly' ? 29 : 290, features: ['Unlimited Projects', '10GB Storage'] },
    { name: 'Team', price: billingCycle === 'monthly' ? 99 : 990, features: ['Shared Workspaces', '100GB Storage'], popular: true },
    { name: 'Enterprise', price: 'Custom', features: ['SSO', 'SLA Support'] },
  ];

  return (
    <div className="max-w-7xl mx-auto px-4 py-24">
      <div className="text-center mb-16">
        <h1 className="text-4xl font-bold tracking-tight text-slate-900">Scalable plans for growing teams</h1>
        <div className="mt-6 flex justify-center items-center gap-4">
          <span className={billingCycle === 'monthly' ? 'text-slate-900' : 'text-slate-500'}>Monthly</span>
          <button 
            onClick={() => setBillingCycle(billingCycle === 'monthly' ? 'yearly' : 'monthly')}
            className="w-12 h-6 rounded-full bg-slate-200 relative transition-colors"
          >
            <div className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${billingCycle === 'yearly' ? 'translate-x-7' : 'translate-x-1'}`} />
          </button>
          <span className={billingCycle === 'yearly' ? 'text-slate-900' : 'text-slate-500'}>Yearly (Save 20%)</span>
        </div>
      </div>
      
      <div className="grid md:grid-cols-3 gap-8">
        {plans.map((plan) => (
          <Card key={plan.name} className={`p-8 ${plan.popular ? 'border-primary ring-1 ring-primary' : ''}`}>
            <h3 className="text-lg font-semibold">{plan.name}</h3>
            <div className="mt-4 flex items-baseline">
              <span className="text-4xl font-bold">${plan.price}</span>
              {typeof plan.price === 'number' && <span className="ml-1 text-slate-500">/{billingCycle === 'monthly' ? 'mo' : 'yr'}</span>}
            </div>
            <ul className="mt-8 space-y-4">
              {plan.features.map(f => <li key={f} className="flex items-center gap-2"><Check className="w-4 h-4 text-green-500"/> {f}</li>)}
            </ul>
            <Button className="w-full mt-8" variant={plan.popular ? 'default' : 'outline'}>Get Started</Button>
          </Card>
        ))}
      </div>
    </div>
  );
};

export default PricingPage;

Next steps

• Update the Button component imports to match your actual shadcn/ui path if different.
• Connect the "Get Started" buttons to your Stripe checkout flow or registration route.
• Add specific technical FAQ content to the bottom section of the page.