1"use client";
2
3import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
4import { Badge } from "@/components/ui/badge";
5import { Button } from "@/components/ui/button";
6import { CheckCircle, X } from "lucide-react";
7
8export default function PricingBlock1() {
9  const features = [
10    { name: "Custom Domain", basic: true, pro: true },
11    { name: "SSL Certificate", basic: true, pro: true },
12    { name: "Basic Analytics", basic: true, pro: true },
13    { name: "Email Support", basic: true, pro: true },
14    { name: "Advanced Analytics", basic: false, pro: true },
15    { name: "Priority Support", basic: false, pro: true },
16    { name: "Team Collaboration", basic: false, pro: true },
17    { name: "API Access", basic: false, pro: true },
18    { name: "Custom Integrations", basic: false, pro: true },
19    { name: "White-label Solution", basic: false, pro: true },
20  ];
21
22  return (
23    <section className="w-full py-20 md:py-32">
24      <div className="container mx-auto px-4 md:px-6">
25        <div className="text-center space-y-4 mb-16">
26          <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
27            Choose the Right Plan for You
28          </h2>
29          <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
30            Compare our plans and find the perfect fit for your needs and
31            budget.
32          </p>
33        </div>
34
35        <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
36          {/* Basic Plan */}
37          <Card className="border-2">
38            <CardHeader className="text-center space-y-4">
39              <div>
40                <CardTitle className="text-2xl">Basic</CardTitle>
41                <p className="text-muted-foreground">
42                  Perfect for getting started
43                </p>
44              </div>
45              <div className="space-y-2">
46                <div className="text-4xl font-bold">$9</div>
47                <div className="text-muted-foreground">per month</div>
48              </div>
49              <Button className="w-full">Get Started</Button>
50            </CardHeader>
51            <CardContent className="space-y-4">
52              <div className="space-y-3">
53                {features.map((feature, index) => (
54                  <div key={index} className="flex items-center gap-3">
55                    {feature.basic ? (
56                      <CheckCircle className="h-5 w-5 text-green-500" />
57                    ) : (
58                      <X className="h-5 w-5 text-muted-foreground" />
59                    )}
60                    <span
61                      className={feature.basic ? "" : "text-muted-foreground"}
62                    >
63                      {feature.name}
64                    </span>
65                  </div>
66                ))}
67              </div>
68            </CardContent>
69          </Card>
70
71          {/* Pro Plan */}
72          <Card className="border-2 border-primary relative">
73            <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
74              <Badge className="px-4 py-1">Most Popular</Badge>
75            </div>
76            <CardHeader className="text-center space-y-4">
77              <div>
78                <CardTitle className="text-2xl">Pro</CardTitle>
79                <p className="text-muted-foreground">For growing businesses</p>
80              </div>
81              <div className="space-y-2">
82                <div className="text-4xl font-bold">$29</div>
83                <div className="text-muted-foreground">per month</div>
84              </div>
85              <Button className="w-full">Start Free Trial</Button>
86            </CardHeader>
87            <CardContent className="space-y-4">
88              <div className="space-y-3">
89                {features.map((feature, index) => (
90                  <div key={index} className="flex items-center gap-3">
91                    {feature.pro ? (
92                      <CheckCircle className="h-5 w-5 text-green-500" />
93                    ) : (
94                      <X className="h-5 w-5 text-muted-foreground" />
95                    )}
96                    <span
97                      className={feature.pro ? "" : "text-muted-foreground"}
98                    >
99                      {feature.name}
100                    </span>
101                  </div>
102                ))}
103              </div>
104            </CardContent>
105          </Card>
106        </div>
107
108        <div className="text-center mt-12">
109          <p className="text-muted-foreground mb-4">
110            Need a custom solution? We offer enterprise plans with advanced
111            features.
112          </p>
113          <Button variant="outline" size="lg">
114            Contact Sales
115          </Button>
116        </div>
117      </div>
118    </section>
119  );
120}