1"use client";
2
3import { Button } from "@/components/ui/button";
4import { ArrowRight, CheckCircle } from "lucide-react";
5
6export function HeroBlock4() {
7  return (
8    <section className="w-full py-20 md:py-32">
9      <div className="container mx-auto px-4 md:px-6">
10        <div className="grid lg:grid-cols-2 gap-12 items-center">
11          {/* Left Content */}
12          <div className="space-y-8">
13            <div className="space-y-4">
14              <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl">
15                Build Better
16                <span className="bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
17                  {" "}
18                  Websites{" "}
19                </span>
20                Together
21              </h1>
22              <p className="text-lg text-muted-foreground md:text-xl max-w-lg">
23                Collaborate with your team to create stunning websites that
24                convert. Our platform makes teamwork seamless and productive.
25              </p>
26            </div>
27
28            <div className="space-y-4">
29              <div className="flex items-center gap-3">
30                <CheckCircle className="h-5 w-5 text-green-500" />
31                <span>Real-time collaboration</span>
32              </div>
33              <div className="flex items-center gap-3">
34                <CheckCircle className="h-5 w-5 text-green-500" />
35                <span>Version control built-in</span>
36              </div>
37              <div className="flex items-center gap-3">
38                <CheckCircle className="h-5 w-5 text-green-500" />
39                <span>Deploy with one click</span>
40              </div>
41            </div>
42
43            <div className="flex flex-col sm:flex-row gap-4">
44              <Button size="lg" className="gap-2 px-8">
45                Start Collaborating
46                <ArrowRight className="h-4 w-4" />
47              </Button>
48              <Button variant="outline" size="lg">
49                View Pricing
50              </Button>
51            </div>
52          </div>
53
54          {/* Right Image */}
55          <div className="relative">
56            <div className="aspect-square rounded-2xl overflow-hidden bg-gradient-to-br from-muted to-muted/50">
57              <img
58                src="https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg?auto=compress&cs=tinysrgb&w=800"
59                alt="Team collaboration"
60                className="w-full h-full object-cover"
61              />
62            </div>
63            <div className="absolute -bottom-6 -left-6 bg-white dark:bg-card p-4 rounded-lg shadow-lg border">
64              <div className="flex items-center gap-2">
65                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
66                <span className="text-sm font-medium">
67                  5 team members online
68                </span>
69              </div>
70            </div>
71          </div>
72        </div>
73      </div>
74    </section>
75  );
76}