"use client";
import React from "react";
import { motion } from "motion/react";
import { Check, Zap } from "lucide-react";
import { cn } from "@/lib/utils";
export interface ModernPricingPlan {
name: string;
price: string;
description: string;
features: string[];
cta: string;
highlighted?: boolean;
color?: string;
}
export interface ModernPricingProps {
title?: string;
subtitle?: string;
plans?: ModernPricingPlan[];
}
const defaultPlans: ModernPricingPlan[] = [
{
name: "Starter",
price: "$29",
description: "Perfect for solo developers and small projects getting started.",
features: [
"Up to 3 active projects",
"Community support",
"Basic components library",
"1GB cloud storage",
"Weekly backups"
],
cta: "Start for free",
color: "#3b82f6",
},
{
name: "Premium",
price: "$79",
description: "Advanced features for professionals and growing businesses.",
features: [
"Unlimited active projects",
"Priority 24/7 support",
"Full component suite",
"10GB cloud storage",
"Daily backups",
"Custom domain support",
"Advanced analytics"
],
cta: "Go Premium",
highlighted: true,
color: "#8b5cf6",
},
{
name: "Enterprise",
price: "$199",
description: "Custom solutions for large organizations and high-traffic apps.",
features: [
"Everything in Premium",
"SSO & SAML integration",
"Dedicated account manager",
"100GB cloud storage",
"Unlimited backups",
"Custom API access",
"White-glove onboarding"
],
cta: "Contact Sales",
color: "#f59e0b",
},
];
export const ModernPricing = ({
title = "Simple, Scalable Pricing",
subtitle = "Choose the plan that's right for your business. No hidden fees, ever.",
plans = defaultPlans,
}: ModernPricingProps) => {
return (
<section className="relative w-full py-24 overflow-hidden bg-background">
{/* Background Orbs */}
<div className="absolute top-0 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-[120px] -z-10" />
<div className="absolute bottom-0 right-1/4 w-96 h-96 bg-primary/5 rounded-full blur-[120px] -z-10" />
<div className="container mx-auto px-4 max-w-7xl">
<div className="text-center mb-20">
<motion.h2
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
className="text-4xl md:text-5xl font-bold tracking-tight text-foreground mb-4"
>
{title}
</motion.h2>
<motion.p
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.1 }}
className="text-lg text-muted-foreground max-w-2xl mx-auto"
>
{subtitle}
</motion.p>
</div>
<div className="grid md:grid-cols-3 gap-8 items-stretch">
{plans.map((plan, idx) => (
<motion.div
key={plan.name}
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
transition={{ delay: idx * 0.1, duration: 0.5 }}
whileHover={{ y: -5 }}
style={
{
"--plan-color": plan.color || "var(--primary)",
} as React.CSSProperties
}
className={cn(
"group relative p-8 rounded-[2.5rem] border transition-all duration-500 flex flex-col h-full",
plan.highlighted
? "bg-(--plan-color)/5 border-(--plan-color)/20 scale-105 z-10 shadow-2xl shadow-(--plan-color)/10"
: "bg-background/20 backdrop-blur-xl border-foreground/10 hover:border-(--plan-color)/30"
)}
>
{plan.highlighted && (
<div className="absolute -top-4 left-1/2 -translate-x-1/2">
<div
style={{ backgroundColor: plan.color }}
className="flex items-center gap-1.5 px-4 py-1 rounded-full bg-primary text-primary-foreground text-xs font-bold uppercase tracking-wider shadow-lg shadow-primary/20"
>
<Zap className="w-3 h-3 fill-current" />
Most Popular
</div>
</div>
)}
<div className="mb-10">
<span
style={{ color: plan.highlighted ? plan.color : undefined }}
className={cn(
"text-sm font-bold uppercase tracking-widest mb-4 block",
plan.highlighted ? "text-primary" : "text-muted-foreground"
)}
>
{plan.name}
</span>
<div className="flex items-baseline gap-1 mb-4">
<span className="text-5xl font-black text-foreground tracking-tighter">
{plan.price}
</span>
<span className="text-muted-foreground font-medium">/month</span>
</div>
<p className="text-muted-foreground leading-relaxed text-sm">
{plan.description}
</p>
</div>
<div className="space-y-4 mb-10 flex-1">
{plan.features.map((feature) => (
<div key={feature} className="flex items-start gap-3">
<div
style={plan.highlighted ? { backgroundColor: `${plan.color}20` } : {}}
className={cn(
"shrink-0 w-5 h-5 rounded-full flex items-center justify-center transition-colors duration-300 mt-0.5",
plan.highlighted ? "bg-primary/20" : "bg-foreground/5"
)}
>
<Check
style={{ color: plan.color }}
className={cn(
"w-3 h-3 transition-transform duration-300 group-hover:scale-110",
plan.highlighted ? "text-primary" : "text-foreground/60"
)}
/>
</div>
<span className="text-foreground/80 text-sm font-medium">
{feature}
</span>
</div>
))}
</div>
<button
style={
plan.highlighted
? {
backgroundColor: plan.color,
boxShadow: `0 10px 15px -3px ${plan.color}40`,
}
: {}
}
className={cn(
"w-full py-4 px-6 rounded-2xl font-bold text-base transition-all duration-300 transform active:scale-[0.98]",
plan.highlighted
? "bg-primary text-primary-foreground shadow-lg hover:translate-y-[-2px]"
: "bg-foreground/5 text-foreground hover:bg-foreground/10"
)}
>
{plan.cta}
</button>
{/* Decorative Glow */}
{plan.highlighted && (
<div
style={{ backgroundImage: `linear-to-br from-${plan.color}/20 to-transparent` }}
className="absolute -inset-px rounded-[2.5rem] bg-linear-to-br from-primary/20 to-transparent -z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
/>
)}
</motion.div>
))}
</div>
</div>
</section>
);
};
