1"use client";
2
3import { Button } from "@/components/ui/button";
4import { ArrowRight, Play } from "lucide-react";
5
6export function HeroBlock1() {
7  return (
8    <section className="w-full py-20 md:py-32 bg-gradient-to-b from-background to-muted/20">
9      <div className="container mx-auto px-4 md:px-6">
10        <div className="flex flex-col items-center space-y-8 text-center">
11          <div className="space-y-4 max-w-4xl">
12            <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl lg:text-7xl">
13              Build Amazing
14              <span className="bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
15                {" "}
16                Websites{" "}
17              </span>
18              Faster
19            </h1>
20            <p className="mx-auto max-w-2xl text-lg text-muted-foreground md:text-xl">
21              Create stunning, responsive websites with our modern components
22              and templates. Perfect for startups, agencies, and developers.
23            </p>
24          </div>
25
26          <div className="flex flex-col sm:flex-row gap-4">
27            <Button size="lg" className="gap-2 px-8">
28              Get Started
29              <ArrowRight className="h-4 w-4" />
30            </Button>
31            <Button variant="outline" size="lg" className="gap-2 px-8">
32              <Play className="h-4 w-4" />
33              Watch Demo
34            </Button>
35          </div>
36
37          <div className="flex items-center gap-8 pt-8">
38            <div className="text-center">
39              <div className="text-2xl font-bold">10k+</div>
40              <div className="text-sm text-muted-foreground">Happy Users</div>
41            </div>
42            <div className="text-center">
43              <div className="text-2xl font-bold">99%</div>
44              <div className="text-sm text-muted-foreground">Uptime</div>
45            </div>
46            <div className="text-center">
47              <div className="text-2xl font-bold">24/7</div>
48              <div className="text-sm text-muted-foreground">Support</div>
49            </div>
50          </div>
51        </div>
52      </div>
53    </section>
54  );
55}