Hero Sections

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