"use client";
import { cn } from "@/lib/utils";
import { motion } from "motion/react";
import {
ArrowRight,
Birdhouse,
BrainCircuit,
Check,
Crown,
} from "lucide-react";
import React from "react";
export interface GlassoModernoPlan {
title: string;
description: string;
price: {
monthly: number;
yearly: number;
};
buttonTitle: string;
features: string[];
trending?: boolean;
icon: React.ReactNode;
accent1?: string;
accent2?: string;
accent3?: string;
}
export interface GlassoModernoProps {
title?: string;
description?: string;
plans?: GlassoModernoPlan[];
className?: string;
}
const DEFAULT_PLANS: GlassoModernoPlan[] = [
{
title: "Beginner",
icon: <Birdhouse />,
description:
"Perfect for small business and startups looking to explore AI Capabilites",
price: {
monthly: 29,
yearly: 99,
},
buttonTitle: "Get Started",
features: [
"Basic Predictive Analytics",
"Automated Workflows",
"Standard Natural Language Processing",
"Real-Time Data Analysis",
"Basic Customizable Dashboards",
"Email Support",
],
trending: false,
},
{
title: "Professional",
icon: <BrainCircuit />,
description: "Advanced AI tools and analytics for scaling businesses.",
price: {
monthly: 79,
yearly: 249,
},
buttonTitle: "Go Professional",
features: [
"Advanced Predictive Modeling",
"Custom Workflow Automation",
"Deep NLP Insights",
"Historical Data Access",
"Advanced Team Collaboration",
"Priority 24/7 Support",
],
trending: true,
accent1: "#f97316",
accent2: "#c084fc",
accent3: "#047857",
},
{
title: "Enterprise",
icon: <Crown />,
description:
"Full-scale solution with custom models and dedicated support.",
price: {
monthly: 199,
yearly: 599,
},
buttonTitle: "Contact Sales",
features: [
"Bespoke AI Architecture",
"Unlimited Data Processing",
"On-Premise Deployment",
"Advanced Security & SSO",
"Dedicated account manager",
"Custom API Integration",
],
trending: false,
},
];
const GlassoModerno = ({
title = "Our pricing plans",
description = "Here are three different plans tailored for Beginner, Professional and Enterprises level",
plans = DEFAULT_PLANS,
className,
}: GlassoModernoProps) => {
const [billingPeriod, setBillingPeriod] = React.useState<
"monthly" | "yearly"
>("monthly");
return (
<div className={cn("relative max-w-6xl px-5 flex flex-col", className)}>
<span className="absolute top-10 left-1/2 -translate-x-1/2 ">
<span className="text-[6rem] md:text-[12rem] bg-linear-to-b from-foreground/4 via-foreground/9 to-foreground/15 text-transparent bg-clip-text font-bold">
PRICING
</span>
</span>
<div className="flex md:flex-row flex-col gap-4 items-center justify-between w-full mt-30 md:mt-50 ">
<span className="text-3xl font-semibold">{title}</span>
{/* Toggler Annually and Monthly */}
<div className="flex items-center z-80 bg-foreground/3 border font-semibold rounded-2xl gap-1 p-1 select-none">
<button
onClick={() => setBillingPeriod("monthly")}
className={cn(
"relative p-1.5 px-3 rounded-xl cursor-pointer transition-all",
)}
>
{billingPeriod === "monthly" && (
<motion.span
layout
layoutId="pricing-span"
className="inset-0 rounded-xl bg-foreground/8 absolute"
/>
)}
Monthly
</button>
<button
onClick={() => setBillingPeriod("yearly")}
className={cn(
"relative p-1.5 px-3 rounded-xl cursor-pointer transition-all",
)}
>
{billingPeriod === "yearly" && (
<motion.span
layout
layoutId="pricing-span"
className="inset-0 rounded-xl bg-foreground/8 absolute"
/>
)}
Yearly
</button>
</div>
<span className="text-foreground/70 text-sm font-semibold w-70 text-center">
{description}
</span>
</div>
<div className="grid md:grid-cols-3 md:gap-4 gap-8 mt-8 ">
{plans.map((item, idx) => {
return (
<div className="border-2 p-4 rounded-md flex flex-col " key={idx}>
<div className="top">
<div className="flex justify-between mb-5">
<span
className={cn(
"w-10 h-10 text-foreground/80 flex items-center justify-center rounded-md border",
)}
>
{item.icon}
</span>
<span className="text-3xl font-bold">
${item.price[billingPeriod]}
<span className="text-foreground/50 font-medium text-sm">
/{billingPeriod === "monthly" ? "per month" : "per year"}
</span>
</span>
</div>
<span className="font-semibold text-lg ">{item.title}</span>
<p className="text-sm text-foreground/40 mt-2">
{item.description}
</p>
</div>
<div
className={cn(
"flex flex-col gap-2 justify-start mt-3 rounded-md transition-all duration-300",
item.trending
? "p-[2px] shadow-lg"
: "border-2 border-foreground/10 bg-foreground/2",
)}
style={
item.trending && item.accent1 && item.accent2 && item.accent3
? {
backgroundImage: `linear-gradient(to bottom right, ${item.accent1}, ${item.accent2}, ${item.accent3})`,
boxShadow: `0 10px 15px -3px ${item.accent2}33`,
}
: item.trending
? {
backgroundImage: `linear-gradient(to bottom right, #f97316, #c084fc, #047857)`,
}
: {}
}
>
<div
className={cn(
"flex flex-col gap-2 justify-start p-2 rounded-[calc(var(--radius)-2px)] h-full",
item.trending ? "bg-background/95 dark:bg-black" : "",
)}
>
<button
className={cn(
"text-center py-1.5 border flex items-center gap-1 w-full justify-center border-foreground/10 bg-foreground/5 text-foreground rounded-md font-semibold transition-all hover:bg-foreground/15 active:scale-95",
item.trending &&
"bg-foreground text-background hover:bg-foreground/90",
)}
>
{item.buttonTitle}
<ArrowRight size={14} />
</button>
<div className="flex flex-col px-2 py-2">
<span className="text-lg text-foreground font-semibold mt-4 mb-3">
Features
</span>
<div className="flex flex-col gap-2">
{item.features.map((i, ind) => {
return (
<span
key={ind}
className="text-sm text-foreground/60 flex items-center gap-2"
>
<span className="rounded-sm p-1 w-5 h-5 text-foreground flex items-center justify-center border">
<Check />
</span>
{i}
</span>
);
})}
</div>
</div>
</div>
</div>
</div>
);
})}
</div>
</div>
);
};
export default GlassoModerno;
