133 lines
4.2 KiB
TypeScript
133 lines
4.2 KiB
TypeScript
import { PageContainer } from "@/components/shared/PageContainer";
|
|
import { SectionContainer } from "@/components/shared/SectionContainer";
|
|
import { SectionHeading } from "@/components/shared/SectionHeading";
|
|
|
|
export function PricingSection() {
|
|
const plans = [
|
|
{
|
|
name: "Basic",
|
|
target: "Great for private individuals",
|
|
features: [
|
|
"1 User",
|
|
"Unlimited Projects",
|
|
"Download prototypes",
|
|
"1 Gb workspace",
|
|
],
|
|
price: "Free",
|
|
isPopular: false,
|
|
},
|
|
{
|
|
name: "Premium",
|
|
target: "14 days free period",
|
|
features: [
|
|
"15 Users",
|
|
"Unlimited Projects",
|
|
"Download prototypes",
|
|
"15 Gb workspace",
|
|
],
|
|
price: "$ 59 /mo",
|
|
isPopular: true,
|
|
},
|
|
{
|
|
name: "Unlimited",
|
|
target: "Great for private individuals",
|
|
features: [
|
|
"100 Users",
|
|
"Unlimited Projects",
|
|
"Download prototypes",
|
|
"100 Gb workspace",
|
|
],
|
|
price: "$ 199 /mo",
|
|
isPopular: false,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<SectionContainer paddingY="lg">
|
|
<PageContainer>
|
|
<div className="mb-16 flex flex-col items-center justify-center text-center">
|
|
<SectionHeading
|
|
tag="pricing"
|
|
title="Choose the plan that fits your needs"
|
|
titleClassName="text-white max-w-[500px] text-center"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
|
|
{plans.map((plan, i) => (
|
|
<div
|
|
key={i}
|
|
className={`relative flex flex-col overflow-hidden rounded-[25px] border ${
|
|
plan.isPopular
|
|
? "border-tenext-teal bg-tenext-card-dark"
|
|
: "border-tenext-card-border bg-tenext-dark"
|
|
} p-10`}
|
|
>
|
|
{plan.isPopular && (
|
|
<div
|
|
className="absolute right-6 top-6 rounded-full bg-tenext-teal px-4 py-1 text-[12px] font-bold uppercase text-tenext-dark"
|
|
style={{ fontFamily: "var(--font-sora)" }}
|
|
>
|
|
Popular
|
|
</div>
|
|
)}
|
|
<h3
|
|
className="mb-2 text-[24px] font-bold text-white"
|
|
style={{ fontFamily: "var(--font-dm-sans)" }}
|
|
>
|
|
{plan.name}
|
|
</h3>
|
|
<p className="mb-8 text-[14px] text-tenext-text-muted">
|
|
{plan.target}
|
|
</p>
|
|
|
|
<ul className="mb-10 flex flex-col gap-4">
|
|
{plan.features.map((feat, j) => (
|
|
<li key={j} className="flex items-center gap-3 text-white">
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
className="text-tenext-teal"
|
|
>
|
|
<path
|
|
d="M20 6L9 17l-5-5"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
{feat}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<div className="mt-auto">
|
|
<div
|
|
className="mb-6 text-[36px] font-bold text-white"
|
|
style={{ fontFamily: "var(--font-dm-sans)" }}
|
|
>
|
|
{plan.price}
|
|
</div>
|
|
<a
|
|
href="#"
|
|
className={`flex w-full items-center justify-center rounded-[12px] py-4 text-[16px] font-bold transition-all ${
|
|
plan.isPopular
|
|
? "bg-tenext-teal text-tenext-dark hover:bg-white"
|
|
: "border border-tenext-card-border text-white hover:border-tenext-teal hover:text-tenext-teal"
|
|
}`}
|
|
style={{ fontFamily: "var(--font-sora)" }}
|
|
>
|
|
Get started
|
|
</a>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</PageContainer>
|
|
</SectionContainer>
|
|
);
|
|
}
|