1"use client";
2
3import { Button } from "@/components/ui/button";
4import { ArrowRight, Users, Zap, Shield } from "lucide-react";
5
6export function HeroBlock5() {
7  return (
8    <section className="w-full py-20 md:py-32 bg-gradient-to-b from-background via-muted/20 to-background">
9      <div className="container mx-auto px-4 md:px-6">
10        <div className="flex flex-col items-center space-y-12 text-center">
11          <div className="space-y-6 max-w-4xl">
12            <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl lg:text-7xl">
13              Everything You Need to
14              <span className="bg-gradient-to-r from-primary via-purple-500 to-primary bg-clip-text text-transparent">
15                {" "}
16                Succeed Online{" "}
17              </span>
18            </h1>
19            <p className="mx-auto max-w-2xl text-lg text-muted-foreground md:text-xl">
20              From design to deployment, we provide all the tools and resources
21              you need to build exceptional digital experiences.
22            </p>
23          </div>
24
25          <div className="flex flex-col sm:flex-row gap-4">
26            <Button size="lg" className="gap-2 px-8">
27              Get Started Free
28              <ArrowRight className="h-4 w-4" />
29            </Button>
30            <Button variant="outline" size="lg">
31              Schedule Demo
32            </Button>
33          </div>
34
35          <div className="grid md:grid-cols-3 gap-8 pt-8 max-w-4xl">
36            <div className="flex flex-col items-center space-y-3 p-6 rounded-lg bg-card border">
37              <div className="p-3 bg-primary/10 rounded-full">
38                <Users className="h-6 w-6 text-primary" />
39              </div>
40              <h3 className="font-semibold">Team Collaboration</h3>
41              <p className="text-sm text-muted-foreground text-center">
42                Work together seamlessly with real-time editing and commenting
43              </p>
44            </div>
45
46            <div className="flex flex-col items-center space-y-3 p-6 rounded-lg bg-card border">
47              <div className="p-3 bg-primary/10 rounded-full">
48                <Zap className="h-6 w-6 text-primary" />
49              </div>
50              <h3 className="font-semibold">Lightning Fast</h3>
51              <p className="text-sm text-muted-foreground text-center">
52                Optimized for speed with global CDN and edge computing
53              </p>
54            </div>
55
56            <div className="flex flex-col items-center space-y-3 p-6 rounded-lg bg-card border">
57              <div className="p-3 bg-primary/10 rounded-full">
58                <Shield className="h-6 w-6 text-primary" />
59              </div>
60              <h3 className="font-semibold">Enterprise Security</h3>
61              <p className="text-sm text-muted-foreground text-center">
62                Bank-level security with SSL, backups, and monitoring
63              </p>
64            </div>
65          </div>
66        </div>
67      </div>
68    </section>
69  );
70}