Update components/pricing.tsx

components/pricing.tsx

@@ -0,0 +1,87 @@
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Button } from "@/components/ui/button";
+import { Check } from "lucide-react";
+
+const tiers = [
+  {
+    name: "Starter",
+    price: "$499",
+    description: "Perfect for small local businesses and personal brands.",
+    features: ["5 Pages", "Mobile Responsive", "Basic SEO", "Contact Form", "1 Month Support"],
+    cta: "Get Started",
+    highlighted: false,
+  },
+  {
+    name: "Business",
+    price: "$999",
+    description: "The best value for growing companies and restaurants.",
+    features: ["10 Pages", "Advanced SEO", "Custom Animations", "CMS Integration", "3 Months Support", "Free Domain (1yr)"],
+    cta: "Most Popular",
+    highlighted: true,
+  },
+  {
+    name: "Enterprise",
+    price: "Custom",
+    description: "Tailored solutions for complex needs and large scale apps.",
+    features: ["Unlimited Pages", "E-commerce Ready", "Priority Support", "Custom Integrations", "Performance Audit", "Monthly Maintenance"],
+    cta: "Contact Us",
+    highlighted: false,
+  },
+];
+
+export function Pricing() {
+  return (
+    <section className="py-20">
+      <Container>
+        <div className="text-center max-w-3xl mx-auto mb-16">
+          <Heading>Simple, Transparent Pricing</Heading>
+          <Subheading>
+            Choose the plan that fits your business needs. No hidden fees, ever.
+          </Subheading>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {tiers.map((tier, index) => (
+            <div
+              key={index}
+              className={`relative p-8 rounded-2xl border ${
+                tier.highlighted
+                  ? "border-primary shadow-xl scale-105 z-10 bg-background"
+                  : "border-border bg-background/50"
+              }`}
+            >
+              {tier.highlighted && (
+                <span className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-primary text-primary-foreground text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">
+                  Best Value
+                </span>
+              )}
+              <div className="mb-8">
+                <h3 className="text-xl font-bold mb-2">{tier.name}</h3>
+                <div className="flex items-baseline gap-1 mb-4">
+                  <span className="text-4xl font-bold">{tier.price}</span>
+                  {tier.price !== "Custom" && <span className="text-muted-foreground">/project</span>}
+                </div>
+                <p className="text-muted-foreground text-sm">{tier.description}</p>
+              </div>
+              <ul className="space-y-4 mb-8">
+                {tier.features.map((feature, i) => (
+                  <li key={i} className="flex items-center gap-3 text-sm">
+                    <Check className="w-4 h-4 text-primary shrink-0" />
+                    <span>{feature}</span>
+                  </li>
+                ))}
+              </ul>
+              <Button
+                className="w-full"
+                variant={tier.highlighted ? "default" : "outline"}
+              >
+                {tier.cta}
+              </Button>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}