import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { CheckIcon, XIcon, HelpCircleIcon } from 'lucide-react';
import { cn } from '@/lib/utils';
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip';
import { Badge } from '@/components/ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
const plans = [
{
name: 'Free',
key: 'free',
price: '$0',
description: 'For personal projects',
cta: 'Get Started',
popular: false,
},
{
name: 'Pro',
key: 'pro',
price: '$29',
description: 'For professionals and small teams',
cta: 'Start Free Trial',
popular: true,
},
{
name: 'Enterprise',
key: 'enterprise',
price: '$99',
description: 'For large organizations',
cta: 'Contact Sales',
popular: false,
},
];
const featureGroups = [
{
name: 'Core Features',
features: [
{
name: 'Projects',
description: 'Number of projects you can create',
free: '3 projects',
pro: 'Unlimited',
enterprise: 'Unlimited',
},
{
name: 'Team members',
description: 'Number of team members you can invite',
free: '1 member',
pro: '10 members',
enterprise: 'Unlimited',
},
{
name: 'Storage',
description: 'Total storage for all your projects',
free: '5GB',
pro: '50GB',
enterprise: 'Unlimited',
},
],
},
{
name: 'Collaboration',
features: [
{
name: 'Shared workspaces',
description: 'Create shared workspaces for team collaboration',
free: false,
pro: true,
enterprise: true,
},
{
name: 'User permissions',
description: 'Control access with user permissions',
free: 'Basic',
pro: 'Advanced',
enterprise: 'Custom',
},
{
name: 'Version history',
description: 'Track changes with version history',
free: '7 days',
pro: '30 days',
enterprise: 'Unlimited',
},
],
},
{
name: 'Security & Support',
features: [
{
name: 'Two-factor authentication',
description: 'Secure your account with 2FA',
free: false,
pro: true,
enterprise: true,
},
{
name: 'Priority support',
description: 'Get faster responses from our support team',
free: false,
pro: true,
enterprise: true,
},
{
name: 'SLA guarantee',
description: 'Service level agreement for uptime and support',
free: false,
pro: false,
enterprise: true,
},
],
},
];
export default function PricingSectionFeatureGrid() {
return (
<TooltipProvider>
<section className="w-full py-12 md:py-24 lg:py-32">
<div className="container mx-auto px-4 md:px-6 2xl:max-w-[1400px]">
<div className="flex flex-col items-center justify-center space-y-4 text-center">
<div className="space-y-2">
<h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
Choose the Right Plan for You
</h2>
<p className="text-muted-foreground mx-auto max-w-[700px] md:text-xl/relaxed">
Compare our plans to find the perfect fit for your needs.
</p>
</div>
</div>
{/* Mobile View (Tabs) */}
<div className="mt-8 md:hidden">
<Tabs defaultValue="free" className="w-full">
<TabsList className="grid w-full grid-cols-3">
{plans.map((plan) => (
<TabsTrigger
key={plan.key}
value={plan.key}
className="relative"
>
{plan.popular && (
<Badge
className="absolute -top-6 left-1/2 -translate-x-1/2 whitespace-nowrap"
variant="default"
>
Popular
</Badge>
)}
{plan.name}
</TabsTrigger>
))}
</TabsList>
{plans.map((plan) => (
<TabsContent key={plan.key} value={plan.key} className="mt-4">
<Card
className={cn(
'overflow-hidden',
plan.popular && 'border-primary'
)}
>
<CardContent className="p-6">
<div className="mb-6 text-center">
<h3 className="text-xl font-bold">{plan.name}</h3>
<div className="mt-2 flex items-baseline justify-center">
<span className="text-3xl font-bold">
{plan.price}
</span>
{plan.price !== '$0' && (
<span className="text-muted-foreground ml-1 text-sm">
/month
</span>
)}
</div>
<p className="text-muted-foreground mt-1 text-sm">
{plan.description}
</p>
<Button
className="mt-4 w-full"
variant={plan.popular ? 'default' : 'outline'}
asChild
>
<a href="#">{plan.cta}</a>
</Button>
</div>
{featureGroups.map((group) => (
<div key={group.name} className="mt-6">
<h4 className="mb-2 font-medium">{group.name}</h4>
<ul className="space-y-2">
{group.features.map((feature) => (
<li
key={feature.name}
className="flex items-start gap-2"
>
<div className="mt-1">
{typeof feature[
plan.key as keyof typeof feature
] === 'boolean' ? (
feature[
plan.key as keyof typeof feature
] ? (
<CheckIcon className="text-primary h-5 w-5" />
) : (
<XIcon className="text-muted-foreground h-5 w-5" />
)
) : (
<CheckIcon className="text-primary h-5 w-5" />
)}
</div>
<div>
<div className="flex items-center gap-1">
<span className="font-medium">
{feature.name}
</span>
<Tooltip>
<TooltipTrigger asChild>
<HelpCircleIcon className="text-muted-foreground h-4 w-4" />
</TooltipTrigger>
<TooltipContent>
<p className="max-w-xs">
{feature.description}
</p>
</TooltipContent>
</Tooltip>
</div>
{typeof feature[
plan.key as keyof typeof feature
] !== 'boolean' && (
<span className="text-muted-foreground text-sm">
{
feature[
plan.key as keyof typeof feature
]
}
</span>
)}
</div>
</li>
))}
</ul>
</div>
))}
</CardContent>
</Card>
</TabsContent>
))}
</Tabs>
</div>
{/* Desktop View (Grid) */}
<div className="mx-auto mt-12 hidden max-w-6xl md:block">
{/* Plan headers */}
<div className="grid grid-cols-4 gap-4">
<div className="col-span-1"></div>
{plans.map((plan) => (
<div
key={plan.name}
className={cn(
'col-span-1 rounded-t-lg p-4 text-center',
plan.popular && 'bg-accent/50'
)}
>
<div className="relative">
{plan.popular && (
<Badge
className="absolute -top-8 left-1/2 -translate-x-1/2"
variant="default"
>
Most Popular
</Badge>
)}
<h3 className="text-xl font-bold">{plan.name}</h3>
<div className="mt-2 flex items-baseline justify-center">
<span className="text-3xl font-bold">{plan.price}</span>
{plan.price !== '$0' && (
<span className="text-muted-foreground ml-1 text-sm">
/month
</span>
)}
</div>
<p className="text-muted-foreground mt-1 text-sm">
{plan.description}
</p>
<Button
className="mt-4 w-full"
variant={plan.popular ? 'default' : 'outline'}
asChild
>
<a href="#">{plan.cta}</a>
</Button>
</div>
</div>
))}
</div>
{/* Feature groups */}
{featureGroups.map((group) => (
<div key={group.name} className="mt-8">
<div className="mb-4 text-lg font-medium">{group.name}</div>
<Card className="p-0">
<CardContent className="p-0">
{group.features.map((feature, index) => (
<div
key={feature.name}
className={cn(
'grid grid-cols-4 gap-4 p-4',
index !== group.features.length - 1 && 'border-b'
)}
>
<div className="col-span-1 flex items-center gap-2">
<span>{feature.name}</span>
<Tooltip>
<TooltipTrigger asChild>
<HelpCircleIcon className="text-muted-foreground h-4 w-4" />
</TooltipTrigger>
<TooltipContent>
<p className="max-w-xs">{feature.description}</p>
</TooltipContent>
</Tooltip>
</div>
{['free', 'pro', 'enterprise'].map((planKey) => (
<div
key={planKey}
className={cn(
'col-span-1 flex items-center justify-center',
planKey === 'pro' && 'bg-accent/50'
)}
>
{typeof feature[planKey as keyof typeof feature] ===
'boolean' ? (
feature[planKey as keyof typeof feature] ? (
<CheckIcon className="text-primary h-5 w-5" />
) : (
<XIcon className="text-muted-foreground h-5 w-5" />
)
) : (
<span>
{feature[planKey as keyof typeof feature]}
</span>
)}
</div>
))}
</div>
))}
</CardContent>
</Card>
</div>
))}
</div>
<div className="bg-muted/30 mx-auto mt-16 max-w-3xl rounded-lg border p-8 text-center">
<h3 className="text-xl font-medium">Need help choosing?</h3>
<p className="text-muted-foreground mt-2">
Our team can help you find the perfect plan for your specific
needs.
</p>
<div className="mt-6 flex flex-col gap-4 sm:flex-row sm:justify-center">
<Button variant="outline" asChild>
<a href="#">Schedule a Demo</a>
</Button>
<Button asChild>
<a href="#">Talk to Sales</a>
</Button>
</div>
</div>
</div>
</section>
</TooltipProvider>
);
}