Hero

1import type * as React from "react";
2import { cn } from "@/lib/utils";
3 
4function Hero({ className, ...props }: React.ComponentProps<"section">) {
5  return (
6    <section
7      data-slot="hero"
8      className={cn("border-border border-b", className)}
9      {...props}
10    />
11  );
12}
13 
14function HeroContent({ className, ...props }: React.ComponentProps<"div">) {
15  return (
16    <div
17      data-slot="hero-content"
18      className={cn(
19        "container flex flex-col items-center py-20 text-center md:py-32",
20        className,
21      )}
22      {...props}
23    />
24  );
25}
26 
27type HeroAlertProps =
28  | ({ href: string } & React.ComponentProps<"a">)
29  | ({ href?: undefined } & React.ComponentProps<"span">);
30 
31const heroAlertClassName =
32  "mb-8 max-w-2xl w-fit border-y border-y-background/10 inline-flex shadow-xs shadow-inner items-center rounded-full ring ring-border bg-muted px-3 py-1.5 text-sm font-medium text-muted-foreground";
33 
34function HeroAlert(props: HeroAlertProps) {
35  if ("href" in props && props.href) {
36    const { href, className, ...anchorProps } = props;
37 
38    return (
39      <a
40        data-slot="hero-alert"
41        href={href}
42        className={cn(
43          heroAlertClassName,
44          "transition-colors hover:bg-muted/80",
45          className,
46        )}
47        {...anchorProps}
48      />
49    );
50  }
51 
52  const { className, ...spanProps } = props;
53 
54  return (
55    <span
56      data-slot="hero-alert"
57      className={cn(heroAlertClassName, className)}
58      {...spanProps}
59    />
60  );
61}
62 
63function HeroTitle({ className, ...props }: React.ComponentProps<"h1">) {
64  return (
65    <h1
66      data-slot="hero-title"
67      className={cn(
68        "mx-auto max-w-3xl pb-6 font-bold text-4xl tracking-tight md:text-5xl",
69        className,
70      )}
71      {...props}
72    />
73  );
74}
75 
76function HeroDescription({ className, ...props }: React.ComponentProps<"p">) {
77  return (
78    <p
79      data-slot="hero-description"
80      className={cn(
81        "mx-auto mt-2 max-w-2xl text-base text-muted-foreground leading-relaxed md:text-lg",
82        className,
83      )}
84      {...props}
85    />
86  );
87}
88 
89function HeroActions({ className, ...props }: React.ComponentProps<"div">) {
90  return (
91    <div
92      data-slot="hero-actions"
93      className={cn(
94        "mt-6 flex flex-wrap items-center justify-center gap-3 sm:justify-start",
95        className,
96      )}
97      {...props}
98    />
99  );
100}
101 
102function Highlight({
103  className,
104  variant = "default",
105  ...props
106// … truncated