Soroush.Asadi
49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
import { PricingBillingToggle } from "@/components/sections/PricingBillingToggle";
|
|
import { PricingCard } from "@/components/sections/PricingCard";
|
|
import { PricingCompareTable } from "@/components/sections/PricingCompareTable";
|
|
import { PricingFreeBanner } from "@/components/sections/PricingFreeBanner";
|
|
import { PricingSectionShell } from "@/components/sections/PricingBackground";
|
|
import { SectionReveal } from "@/components/sections/SectionReveal";
|
|
import type { BillingPeriod } from "@/components/sections/pricing-data";
|
|
import { PRICING_TIERS } from "@/components/sections/pricing-data";
|
|
|
|
export interface PricingProps {
|
|
className?: string;
|
|
}
|
|
|
|
export function Pricing({ className }: PricingProps) {
|
|
const [billing, setBilling] = useState<BillingPeriod>("annual");
|
|
|
|
return (
|
|
<PricingSectionShell className={className}>
|
|
<SectionReveal className="text-center">
|
|
<h2 className="font-heading text-3xl font-bold tracking-tight text-neutral-900 sm:text-4xl">
|
|
Choose your FlatRender plan
|
|
</h2>
|
|
</SectionReveal>
|
|
|
|
<SectionReveal className="mt-8">
|
|
<PricingFreeBanner />
|
|
</SectionReveal>
|
|
|
|
<SectionReveal className="mt-10 flex justify-center">
|
|
<PricingBillingToggle billing={billing} onChange={setBilling} />
|
|
</SectionReveal>
|
|
|
|
<SectionReveal className="mt-10 grid grid-cols-1 gap-6 lg:grid-cols-3 lg:gap-5">
|
|
{PRICING_TIERS.map((tier) => (
|
|
<PricingCard key={tier.id} tier={tier} billing={billing} />
|
|
))}
|
|
</SectionReveal>
|
|
|
|
<SectionReveal className="mt-16">
|
|
<PricingCompareTable billing={billing} onBillingChange={setBilling} />
|
|
</SectionReveal>
|
|
</PricingSectionShell>
|
|
);
|
|
}
|