VIBN Frontend for Coolify deployment

marketing/components/pricing.tsx

@@ -0,0 +1,69 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Check } from "lucide-react";
+import Link from "next/link";
+import { homepage } from "@/marketing/content/homepage";
+
+export function Pricing() {
+  return (
+    <section id="pricing" className="w-full py-16 md:py-24">
+      <div className="container mx-auto px-6">
+        <div className="mx-auto max-w-[980px] space-y-12">
+        <div className="text-center space-y-4">
+          <h2 className="text-3xl font-bold tracking-tight md:text-5xl">
+            {homepage.pricing.title}
+          </h2>
+          <p className="text-lg text-muted-foreground md:text-xl">
+            {homepage.pricing.description}
+          </p>
+        </div>
+        
+        <div className="grid gap-8 md:grid-cols-3 pt-8">
+          {homepage.pricing.tiers.map((tier) => (
+            <Card
+              key={tier.name}
+              className={`flex flex-col ${
+                tier.highlighted
+                  ? "border-primary shadow-lg scale-105"
+                  : ""
+              }`}
+            >
+              <CardHeader>
+                <CardTitle className="text-2xl">{tier.name}</CardTitle>
+                <CardDescription className="text-base">
+                  {tier.description}
+                </CardDescription>
+                <div className="pt-4">
+                  <span className="text-4xl font-bold">{tier.price}</span>
+                  {tier.price !== "Free" && (
+                    <span className="text-muted-foreground">/month</span>
+                  )}
+                </div>
+              </CardHeader>
+              <CardContent className="flex-1 space-y-4">
+                <ul className="space-y-3">
+                  {tier.features.map((feature, index) => (
+                    <li key={index} className="flex items-start gap-3">
+                      <Check className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
+                      <span className="text-sm">{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+                <Link href="/auth" className="block pt-4">
+                  <Button
+                    className="w-full"
+                    variant={tier.highlighted ? "default" : "outline"}
+                  >
+                    {tier.price === "Free" ? "Start Free" : "Get Started"}
+                  </Button>
+                </Link>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+      </div>
+    </section>
+  );
+}
+