Hero Section

1import { ArrowRightIcon } from "lucide-react";
2import { ReactNode } from "react";
3 
4import { cn } from "@/lib/utils";
5 
6import Github from "../../logos/github";
7import { Badge } from "../../ui/badge";
8import Glow from "../../ui/glow";
9import { LinkButton, type LinkButtonProps } from "../../ui/link-button";
10import { Mockup, MockupFrame } from "../../ui/mockup";
11import Screenshot from "../../ui/screenshot";
12import { Section } from "../../ui/section";
13 
14interface HeroButtonProps extends Omit<LinkButtonProps, "children"> {
15  text: string;
16}
17 
18interface HeroProps {
19  title?: string;
20  description?: string;
21  mockup?: ReactNode | false;
22  badge?: ReactNode | false;
23  buttons?: HeroButtonProps[] | false;
24  className?: string;
25}
26 
27const DEFAULT_HERO_BUTTONS: HeroButtonProps[] = [
28  {
29    href: "https://www.launchuicomponents.com/",
30    text: "Get Started",
31    variant: "default",
32  },
33  {
34    href: "https://www.launchuicomponents.com/",
35    text: "GitHub",
36    variant: "glow",
37    icon: <Github className="mr-2 size-4" />,
38  },
39];
40 
41const DEFAULT_HERO_BADGE = (
42  <Badge variant="outline" className="animate-appear">
43    <span className="text-muted-foreground">
44      New version of Launch UI is out!
45    </span>
46    <a href="https://www.launchuicomponents.com/" className="flex items-center gap-1">
47      Get started
48      <ArrowRightIcon className="size-3" />
49    </a>
50  </Badge>
51);
52 
53const DEFAULT_HERO_MOCKUP = (
54  <Screenshot
55    srcLight="/placeholder-light.svg"
56    srcDark="/placeholder-dark.svg"
57    alt="Launch UI app screenshot"
58    width={1248}
59    height={765}
60    loading="eager"
61    className="w-full"
62  />
63);
64 
65export default function Hero({
66  title = "Give your big idea the design it deserves",
67  description = "Professionally designed blocks and templates built with React, Shadcn/ui and Tailwind that will help your product stand out.",
68  mockup = DEFAULT_HERO_MOCKUP,
69  badge = DEFAULT_HERO_BADGE,
70  buttons = DEFAULT_HERO_BUTTONS,
71  className,
72}: HeroProps) {
73  return (
74    <Section
75      className={cn(
76        "fade-bottom overflow-hidden pb-0 sm:pb-0 md:pb-0",
77        className,
78      )}
79    >
80      <div className="max-w-container mx-auto flex flex-col gap-12 pt-16 sm:gap-24">
81        <div className="flex flex-col items-center gap-6 text-center sm:gap-12">
82          {badge !== false && badge}
83// … truncated