98552163a8
Complete frontend implementation with: - Next.js 16 with App Router and TypeScript - Tailwind CSS v4 with custom violet theme - shadcn/ui components with Lucide React icons - Landing page with hero, services, pricing, testimonials, FAQ - Service selection page with toggle - Login/Register pages with social auth UI - Multi-step checkout flow - Client dashboard with stats, projects, support tickets - Billing page with subscription, payment methods, invoices - All mock data and TypeScript types 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
83 lines
2.8 KiB
TypeScript
83 lines
2.8 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useMemo } from 'react'
|
|
import { MarketingLayout } from '@/components/layouts/marketing-layout'
|
|
import { ServiceTypeToggle } from '@/components/services/service-type-toggle'
|
|
import { ProgressStepper } from '@/components/services/progress-stepper'
|
|
import { PricingCard } from '@/components/marketing/pricing-card'
|
|
import { TrustBadges } from '@/components/services/trust-badges'
|
|
import { getPricingPlansByServiceType, type ServiceType } from '@/lib/mock-data'
|
|
import { Button } from '@/components/ui/button'
|
|
import Link from 'next/link'
|
|
|
|
export default function ServicesPage() {
|
|
const [serviceType, setServiceType] = useState<ServiceType>('web-design')
|
|
|
|
const pricingPlans = useMemo(
|
|
() => getPricingPlansByServiceType(serviceType),
|
|
[serviceType]
|
|
)
|
|
|
|
return (
|
|
<MarketingLayout>
|
|
<section className="w-full py-20 min-h-screen">
|
|
<div className="w-full max-w-[1280px] mx-auto px-4 md:px-10">
|
|
{/* Progress Stepper */}
|
|
<ProgressStepper
|
|
currentStep={2}
|
|
totalSteps={4}
|
|
stepLabel="Choose Your Plan"
|
|
/>
|
|
|
|
{/* Service Type Toggle */}
|
|
<ServiceTypeToggle
|
|
defaultValue="web-design"
|
|
onChange={setServiceType}
|
|
/>
|
|
|
|
{/* Header */}
|
|
<div className="text-center max-w-2xl mx-auto mb-12">
|
|
<h1 className="text-3xl md:text-5xl font-bold text-foreground mb-4">
|
|
{serviceType === 'web-design' ? 'Web Design Packages' : 'AI Automation Packages'}
|
|
</h1>
|
|
<p className="text-muted-foreground text-lg">
|
|
{serviceType === 'web-design'
|
|
? 'Professional websites built to convert visitors into customers. Choose the package that fits your needs.'
|
|
: 'Intelligent automation solutions that save time and boost efficiency. Start automating today.'}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Pricing Cards */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto mb-12">
|
|
{pricingPlans.map((plan) => (
|
|
<PricingCard
|
|
key={plan.id}
|
|
tier={plan.tier}
|
|
price={plan.price}
|
|
currency={plan.currency}
|
|
features={plan.features}
|
|
popular={plan.popular}
|
|
planId={plan.id}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Trust Badges */}
|
|
<TrustBadges />
|
|
|
|
{/* Back Button */}
|
|
<div className="flex justify-center mt-12">
|
|
<Button
|
|
variant="outline"
|
|
asChild
|
|
className="bg-card border border-border hover:border-primary text-foreground"
|
|
>
|
|
<Link href="/">← Back to Home</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</MarketingLayout>
|
|
)
|
|
}
|