Hero Sections

1import { Star } from "lucide-react";
2 
3import { Button } from "@/components/ui/button";
4import { Avatar, AvatarImage } from "@/components/ui/avatar";
5import Link from "next/link";
6 
7export default function HeroSection() {
8  return (
9    <section className="py-12 lg:py-20">
10      <div className="mx-auto max-w-7xl px-4 text-center">
11        <header className="mx-auto flex max-w-3xl flex-col gap-4">
12          <h1 className="font-heading text-4xl text-balance lg:text-5xl lg:leading-14">
13            Simplify Your Workflow with Our SaaS Platform
14          </h1>
15          <p className="text-muted-foreground text-balance lg:text-lg">
16            Manage users, track analytics, automate tasks, and grow your business with a single
17            platform designed for modern SaaS teams.
18          </p>
19        </header>
20 
21        <div className="mt-8 flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-center">
22          <Button asChild className="w-full sm:w-auto">
23            <Link href="https://app.yoursaas.com/signup">Start Free Trial</Link>
24          </Button>
25          <Button asChild variant="outline" className="w-full sm:w-auto">
26            <Link href="https://app.yoursaas.com/demo">Request a Demo</Link>
27          </Button>
28        </div>
29 
30        <div className="mx-auto mt-10 flex w-fit flex-col items-center gap-4 sm:flex-row">
31          <div className="inline-flex items-center -space-x-4">
32            <Avatar className="size-10">
33              <AvatarImage
34                src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8YXZhdGFyfGVufDB8fDB8fHwy"
35                alt="User 1"
36              />
37            </Avatar>
38            <Avatar className="size-10">
39              <AvatarImage
40                src="https://images.unsplash.com/photo-1728577740843-5f29c7586afe?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8YXZhdGFyfGVufDB8fDB8fHwy"
41                alt="User 2"
42              />
43            </Avatar>
44            <Avatar className="size-10">
45              <AvatarImage
46                src="https://images.unsplash.com/photo-1654110455429-cf322b40a906?w=200&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YXZhdGFyfGVufDB8fDB8fHwy"
47                alt="User 3"
48              />
49            </Avatar>
50            <Avatar className="size-10">
51              <AvatarImage
52// … truncated