Hero Sections

1import Link from "next/link";
2import { ArrowUpRight, PlayIcon } from "lucide-react";
3import { Badge } from "@/components/ui/badge";
4import { Button } from "@/components/ui/button";
5import { VideoModal } from "./video-modal";
6 
7export default function HeroSection() {
8  return (
9    <section className="py-10 lg:py-16">
10      <div className="mx-auto max-w-7xl px-4">
11        <div className="grid items-center gap-8 lg:grid-cols-2">
12          <header className="flex flex-col items-center text-center lg:items-start lg:text-left">
13            <Badge variant="outline">
14              🚀 Launch Faster
15              <ArrowUpRight />
16            </Badge>
17            <h1 className="font-heading my-4 text-4xl text-balance md:text-5xl lg:leading-14">
18              All-in-One Platform for Managing Your SaaS
19            </h1>
20            <p className="text-muted-foreground mb-8 text-balance lg:text-lg">
21              Streamline operations, track metrics, and scale your SaaS business with ease.
22              Everything you need, in one powerful dashboard.
23            </p>
24            <div className="flex justify-center gap-2">
25              <Button asChild>
26                <Link href="https://app.yoursaas.com/signup">Start Free Trial</Link>
27              </Button>
28              <Button asChild variant="outline">
29                <Link href="https://app.yoursaas.com/demo">Request a Demo</Link>
30              </Button>
31            </div>
32          </header>
33          <figure className="relative">
34            <img
35              src="https://images.unsplash.com/photo-1763503834047-ac85c4105c0b?q=80&w=2080&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
36              alt="Dashboard interface of the SaaS platform"
37              className="aspect-square w-full rounded-md object-cover"
38            />
39            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">
40              <VideoModal videoUrl="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
41            </div>
42          </figure>
43        </div>
44      </div>
45    </section>
46  );
47}