1"use client";
2
3import { Button } from "@/components/ui/button";
4import { ArrowRight, Zap } from "lucide-react";
5
6export function HeroBlock3() {
7  return (
8    <section className="w-full py-20 md:py-32 bg-gradient-to-br from-purple-600 via-blue-600 to-cyan-500">
9      <div className="container mx-auto px-4 md:px-6">
10        <div className="flex flex-col items-center space-y-8 text-center text-white">
11          <div className="flex items-center gap-2 bg-white/10 backdrop-blur-sm rounded-full px-4 py-2">
12            <Zap className="h-4 w-4 text-yellow-300" />
13            <span className="text-sm">Lightning Fast Performance</span>
14          </div>
15
16          <div className="space-y-4 max-w-4xl">
17            <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl lg:text-7xl">
18              The Future of
19              <span className="text-yellow-300"> Web Development </span>
20              is Here
21            </h1>
22            <p className="mx-auto max-w-2xl text-lg text-white/90 md:text-xl">
23              Experience next-generation tools and frameworks that make building
24              beautiful, fast websites effortless and enjoyable.
25            </p>
26          </div>
27
28          <div className="flex flex-col sm:flex-row gap-4">
29            <Button
30              size="lg"
31              className="gap-2 px-8 bg-white text-purple-600 hover:bg-white/90"
32            >
33              Get Started Now
34              <ArrowRight className="h-4 w-4" />
35            </Button>
36            <Button
37              variant="outline"
38              size="lg"
39              className="gap-2 px-8 border-white text-white hover:bg-white/10"
40            >
41              View Examples
42            </Button>
43          </div>
44
45          <div className="grid grid-cols-3 gap-8 pt-8 max-w-md">
46            <div className="text-center">
47              <div className="text-2xl font-bold">500ms</div>
48              <div className="text-sm text-white/80">Load Time</div>
49            </div>
50            <div className="text-center">
51              <div className="text-2xl font-bold">100%</div>
52              <div className="text-sm text-white/80">Lighthouse</div>
53            </div>
54            <div className="text-center">
55              <div className="text-2xl font-bold">0</div>
56              <div className="text-sm text-white/80">Downtime</div>
57            </div>
58          </div>
59        </div>
60      </div>
61    </section>
62  );
63}