"use client";
import { useState } from "react";
import { Icons } from "@/components/icons";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
const pricingTiers = [
{ price: "Included", sends: "2,500" },
{ price: "₹500/mo", sends: "5,000" },
{ price: "₹750/mo", sends: "7,500" },
{ price: "₹1000/mo", sends: "10,000" },
{ price: "₹1250/mo", sends: "12,500" },
];
const features = [
{ icon: Icons.gauge, label: "30 day", suffix: "build retention" },
{ icon: Icons.archive, label: "5,000", suffix: "downloads/month" },
{ icon: Icons.inbox, label: "", suffix: "Native module rebuilding" },
{ icon: Icons.document, label: "", suffix: "Build validation checks" },
];
export default function Component() {
const [isYearly, setIsYearly] = useState(true);
return (
<section className="relative w-full overflow-hidden bg-white py-12 md:py-24 dark:bg-background">
<svg
className="absolute top-0 right-10 text-neutral-100 dark:text-neutral-800"
fill="none"
height="78"
viewBox="0 0 252 78"
width="252"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_498_1113)">
<path
d="M-304.316 -509C-347.03 -406.213 -351.374 -294.272 -304.316 -229.312C-249.534 -153.691 -125.092 -141.738 89.5694 -282.017C-166.578 389.946 372.375 -247.105 202.032 57"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="40"
/>
</g>
<defs>
<clipPath id="clip0_498_1113">
<rect fill="white" height="78" width="252" />
</clipPath>
</defs>
</svg>
<div className="relative z-10 mx-auto max-w-5xl px-6 lg:px-0">
<div className="mb-12 flex flex-col items-start justify-between gap-6 md:flex-row md:items-end">
<div>
<Badge
className="mb-6 border-none bg-white py-0.5 font-medium shadow dark:bg-neutral-800"
variant="secondary"
>
<Icons.zap className="size-3 fill-neutral-400 text-neutral-400" />
Beam Our Pricing
</Badge>
<h1 className="relative mb-4 font-medium text-4xl text-neutral-900 tracking-tight sm:text-5xl dark:text-neutral-100">
Beam Pricing Plans
<svg
className="absolute -top-2 -right-8 -z-10 w-24 text-neutral-200 dark:text-neutral-700"
fill="currentColor"
height="86"
viewBox="0 0 108 86"
width="108"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M38.8484 16.236L15 43.5793L78.2688 15L18.1218 71L93 34.1172L70.2047 65.2739"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="28"
/>
</svg>
</h1>
<p className="max-w-xl text-neutral-600 dark:text-neutral-400">
Lorem ipsum dolor sit amet consectetur adipiscing.
</p>
</div>
<div className="flex items-center gap-3">
<span
className={`text-base ${
!isYearly
? "text-neutral-900 dark:text-neutral-100"
: "text-neutral-500"
}`}
>
Monthly
</span>
<Switch
checked={isYearly}
className="cursor-pointer data-[state=checked]:bg-blue-600"
onCheckedChange={setIsYearly}
/>
<span
className={`text-base ${
isYearly
? "text-neutral-900 dark:text-neutral-100"
: "text-neutral-500"
}`}
>
Yearly
</span>
</div>
</div>
<div className="mb-6 rounded-3xl bg-neutral-100 p-1.5 dark:border-neutral-800 dark:bg-neutral-900">
<div className="flex flex-col gap-8 lg:flex-row lg:items-start lg:justify-between">
<div className="flex h-full flex-col justify-between gap-5 p-5">
<div className="mb-8 flex items-start gap-4">
<div className="relative mb-6 rounded-xl border p-3 dark:bg-background">
<div className="relative z-10">
<Icons.thumbsUp className="size-7 text-blue-600" />
<div className="absolute -top-1 -left-1 -z-10">
<svg
className="text-neutral-200 dark:text-neutral-800"
fill="none"
height="27"
viewBox="0 0 27 27"
width="27"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_444_3357)">
<path
d="M21.6667 0.333338C24.6123 0.333338 27.0537 2.74441 26.4685 5.63122C26.1288 7.30722 25.6278 8.95069 24.9702 10.5382C23.6301 13.7736 21.6658 16.7133 19.1896 19.1895C16.7134 21.6657 13.7737 23.63 10.5383 24.9701C8.95076 25.6277 7.3073 26.1287 5.63129 26.4684C2.74449 27.0536 0.333413 24.6122 0.333413 21.6667L0.333413 15.1888C0.333414 12.8754 2.27808 11.0733 4.41537 10.1881V10.1881C5.70951 9.652 6.88539 8.8663 7.87589 7.87581C8.86638 6.88532 9.65208 5.70943 10.1881 4.41529V4.41529C11.0734 2.278 12.8755 0.333338 15.1888 0.333338H21.6667Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_444_3357">
<rect fill="white" height="27" width="27" />
</clipPath>
</defs>
</svg>
</div>
</div>
</div>
<div>
<h3 className="font-semibold text-neutral-900 text-xl dark:text-neutral-100">
Add-Ons
</h3>
<p className="text-neutral-600 tracking-tight dark:text-neutral-400">
Beam is the ultimate platform for bringing your tech ideas
to life.
</p>
</div>
</div>
<div className="mb-8 grid grid-cols-2 gap-4">
{features.map((feature, index) => {
const k = `pricing_icon${index}`;
return (
<div className="flex items-center gap-3" key={k}>
<feature.icon className="size-5 text-neutral-500" />
<span className="text-neutral-700 text-sm dark:text-neutral-300">
{feature.label && (
<span className="font-semibold">
{feature.label}{" "}
</span>
)}
{feature.suffix}
</span>
</div>
);
})}
</div>
<div className="flex items-center gap-3">
<Button className="rounded-lg border-blue-500 bg-blue-600 px-6 py-2 font-medium text-white hover:bg-blue-700">
Start Deploying
</Button>
<Button
className="rounded-lg px-6 py-2 font-medium text-neutral-900 hover:bg-neutral-200 dark:text-neutral-100 dark:hover:bg-neutral-800"
variant="ghost"
>
Get a Demo
</Button>
</div>
</div>
<div className="w-full lg:w-72">
<div className="overflow-hidden rounded-3xl border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-background">
<div className="flex bg-neutral-900 px-4 py-3 dark:bg-neutral-800">
<span className="flex-1 font-medium text-sm text-white uppercase tracking-wide">
Weekly Sends
</span>
<span className="font-medium text-white text-xs uppercase tracking-wide">
Price
</span>
</div>
{pricingTiers.map((tier, index) => (
<div
className={`flex items-center px-4 py-4 ${
index !== pricingTiers.length - 1
? "border-neutral-200 border-b dark:border-neutral-700"
: ""
}`}
key={tier.sends}
>
<span className="flex-1 text-lg text-neutral-700 dark:text-neutral-300">
{tier.sends}
</span>
<span className="font-semibold text-neutral-900 text-sm dark:text-neutral-100">
{tier.price}
</span>
</div>
))}
</div>
</div>
</div>
</div>
<div className="rounded-3xl border border-neutral-200 bg-white p-6 dark:border-neutral-800 dark:bg-neutral-900">
<div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
<div className="flex items-start gap-4">
<div className="relative rounded-xl border p-3 dark:bg-background">
<div className="relative z-10">
<Icons.thumbsUp className="size-7 text-blue-600" />
<div className="absolute -top-1 -left-1 -z-10">
<svg
className="text-neutral-200 dark:text-neutral-800"
fill="none"
height="27"
viewBox="0 0 27 27"
width="27"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_444_3357)">
<path
d="M21.6667 0.333338C24.6123 0.333338 27.0537 2.74441 26.4685 5.63122C26.1288 7.30722 25.6278 8.95069 24.9702 10.5382C23.6301 13.7736 21.6658 16.7133 19.1896 19.1895C16.7134 21.6657 13.7737 23.63 10.5383 24.9701C8.95076 25.6277 7.3073 26.1287 5.63129 26.4684C2.74449 27.0536 0.333413 24.6122 0.333413 21.6667L0.333413 15.1888C0.333414 12.8754 2.27808 11.0733 4.41537 10.1881V10.1881C5.70951 9.652 6.88539 8.8663 7.87589 7.87581C8.86638 6.88532 9.65208 5.70943 10.1881 4.41529V4.41529C11.0734 2.278 12.8755 0.333338 15.1888 0.333338H21.6667Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_444_3357">
<rect fill="white" height="27" width="27" />
</clipPath>
</defs>
</svg>
</div>
</div>
</div>
<div>
<h3 className="font-semibold text-neutral-900 text-xl dark:text-neutral-100">
Enterprise
</h3>
<p className="text-neutral-600 text-sm dark:text-neutral-400">
Beam is the ultimate platform for bringing your tech ideas to
life.
</p>
</div>
</div>
<Button className="rounded-lg border-blue-500 bg-blue-600 px-6 py-2 font-medium text-white hover:bg-blue-700">
Contact Us ~ ₹2500
</Button>
</div>
</div>
</div>
</section>
);
}
