Hero

1import * as React from "react";
2import { ArrowRight, Play, Sparkles } from "lucide-react";
3 
4import { Badge } from "@/components/ui/badge";
5import { Button } from "@/components/ui/button";
6import { cn } from "@/lib/utils";
7 
8function Hero01({ className, ...props }: React.ComponentProps<"section">) {
9  return (
10    <section
11      className={cn(
12        "relative min-h-[640px] overflow-hidden rounded-[2rem] border border-foreground/10 bg-background px-6 py-8 sm:px-10",
13        className,
14      )}
15      {...props}
16    >
17      <div className="absolute inset-0 -z-0 [background-image:radial-gradient(circle_at_50%_-10%,color-mix(in_oklch,var(--primary)_24%,transparent),transparent_48%),linear-gradient(to_right,color-mix(in_oklch,var(--foreground)_5%,transparent)_1px,transparent_1px),linear-gradient(to_bottom,color-mix(in_oklch,var(--foreground)_5%,transparent)_1px,transparent_1px)] [background-size:auto,48px_48px,48px_48px] [mask-image:linear-gradient(to_bottom,black,transparent_80%)]" />
18      <nav className="relative flex items-center justify-between">
19        <a className="flex items-center gap-2 font-semibold" href="#">
20          <span className="grid size-8 place-items-center rounded-xl bg-primary text-primary-foreground">
21            <Sparkles className="size-4" />
22          </span>
23          Northstar
24        </a>
25        <div className="hidden gap-7 text-sm text-muted-foreground md:flex">
26          <a href="#">Product</a>
27          <a href="#">Customers</a>
28          <a href="#">Pricing</a>
29        </div>
30        <Button size="sm" variant="outline">
31          Sign in
32        </Button>
33      </nav>
34      <div className="relative mx-auto flex max-w-4xl flex-col items-center pb-10 pt-28 text-center sm:pt-36">
35        <Badge variant="secondary">
36          <Sparkles /> Now in public beta
37        </Badge>
38        <h1 className="mt-7 text-balance text-5xl font-semibold leading-[.98] tracking-[-.06em] sm:text-7xl">
39          Make ambitious work feel effortless.
40        </h1>
41        <p className="mt-6 max-w-2xl text-balance text-base leading-relaxed text-muted-foreground sm:text-lg">
42          A focused workspace for creative teams to plan, build and ship their
43          best work without losing momentum.
44        </p>
45        <div className="mt-9 flex flex-col gap-3 sm:flex-row">
46          <Button size="lg">
47            Start building <ArrowRight />
48          </Button>
49          <Button size="lg" variant="outline">
50            <Play /> Watch overview
51// … truncated