1"use client";
2
3import { Button } from "@/components/ui/button";
4import { ArrowRight, Star } from "lucide-react";
5
6export function HeroBlock2() {
7  return (
8    <section className="relative w-full py-20 md:py-32 overflow-hidden">
9      {/* Background Image */}
10      <div className="absolute inset-0 z-0">
11        <img
12          src="https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg?auto=compress&cs=tinysrgb&w=1200"
13          alt="Hero background"
14          className="w-full h-full object-cover"
15        />
16        <div className="absolute inset-0 bg-black/50" />
17      </div>
18
19      {/* Content */}
20      <div className="relative z-10 container mx-auto px-4 md:px-6">
21        <div className="flex flex-col items-center space-y-8 text-center text-white">
22          <div className="flex items-center gap-2 bg-white/10 backdrop-blur-sm rounded-full px-4 py-2">
23            <Star className="h-4 w-4 text-yellow-400" />
24            <span className="text-sm">Trusted by 50,000+ companies</span>
25          </div>
26
27          <div className="space-y-4 max-w-4xl">
28            <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl lg:text-7xl">
29              Transform Your
30              <span className="text-yellow-400"> Digital </span>
31              Presence
32            </h1>
33            <p className="mx-auto max-w-2xl text-lg text-white/90 md:text-xl">
34              Elevate your brand with cutting-edge design and powerful
35              functionality. Join thousands of successful businesses already
36              using our platform.
37            </p>
38          </div>
39
40          <div className="flex flex-col sm:flex-row gap-4">
41            <Button
42              size="lg"
43              className="gap-2 px-8 bg-white text-black hover:bg-white/90"
44            >
45              Start Free Trial
46              <ArrowRight className="h-4 w-4" />
47            </Button>
48            <Button
49              variant="outline"
50              size="lg"
51              className="gap-2 px-8 border-white text-white hover:bg-white/10"
52            >
53              Learn More
54            </Button>
55          </div>
56        </div>
57      </div>
58    </section>
59  );
60}