1"use client";
2
3import { Button } from "@/components/ui/button";
4import { CheckCircle, ArrowRight } from "lucide-react";
5
6export function FeatureBlock2() {
7  const features = [
8    "Real-time collaboration with team members",
9    "Advanced version control and branching",
10    "One-click deployment to global CDN",
11    "Built-in SEO optimization tools",
12    "Custom domain and SSL certificates",
13    "Comprehensive analytics dashboard",
14    "24/7 customer support",
15    "API access for custom integrations",
16  ];
17
18  return (
19    <section className="w-full py-20 md:py-32 bg-muted/30">
20      <div className="container mx-auto px-4 md:px-6">
21        <div className="grid lg:grid-cols-2 gap-12 items-center">
22          {/* Left Content */}
23          <div className="space-y-8">
24            <div className="space-y-4">
25              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
26                Why Choose Our Platform?
27              </h2>
28              <p className="text-lg text-muted-foreground">
29                We've built everything you need to create, deploy, and manage
30                your web applications. No more juggling multiple tools or
31                services.
32              </p>
33            </div>
34
35            <div className="space-y-4">
36              {features.map((feature, index) => (
37                <div key={index} className="flex items-center gap-3">
38                  <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0" />
39                  <span className="text-muted-foreground">{feature}</span>
40                </div>
41              ))}
42            </div>
43
44            <Button size="lg" className="gap-2">
45              Get Started Today
46              <ArrowRight className="h-4 w-4" />
47            </Button>
48          </div>
49
50          {/* Right Image */}
51          <div className="relative">
52            <div className="aspect-square rounded-2xl overflow-hidden bg-gradient-to-br from-primary/10 to-primary/5 p-8">
53              <div className="w-full h-full bg-white dark:bg-card rounded-xl shadow-2xl p-6 space-y-4">
54                <div className="h-4 bg-muted rounded w-3/4"></div>
55                <div className="h-4 bg-muted rounded w-1/2"></div>
56                <div className="h-32 bg-gradient-to-br from-primary/20 to-primary/10 rounded-lg"></div>
57                <div className="space-y-2">
58                  <div className="h-3 bg-muted rounded w-full"></div>
59                  <div className="h-3 bg-muted rounded w-2/3"></div>
60                </div>
61                <div className="flex gap-2">
62                  <div className="h-8 bg-primary/20 rounded flex-1"></div>
63                  <div className="h-8 bg-muted rounded flex-1"></div>
64                </div>
65              </div>
66            </div>
67          </div>
68        </div>
69      </div>
70    </section>
71  );
72}