feat: full studio build -- light theme, canvas thumbnails, i18n (fa/en)

2026-05-24 17:37:21 +03:30
parent d962483359
commit c61f587767
295 changed files with 29797 additions and 265 deletions
@@ -0,0 +1,48 @@
+"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>
+  );
+}