> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Hero

> Learn how to customize the Hero section, including the announcement badge, title, description, and call-to-action buttons.

The Hero section is the first thing users see on your homepage. It's designed to grab attention with a bold headline, a clear value proposition, and prominent calls to action.

**File Location:** `src/components/marketing/hero.tsx`

## How to Customize

All content within the Hero section is hardcoded directly in the component, making it easy to edit.

<Steps>
  <Step title="Announcement Badge">
    At the top of the section is an optional announcement badge, perfect for highlighting new features or promotions.

    ```tsx src/components/marketing/hero.tsx theme={null}
    // ...
    <Badge asChild variant="outline" ...>
      <Link href="#">
        🎉{" "}
        <hr ... />
        <AnimatedShinyText>
          Introducing our latest feature
        </AnimatedShinyText>
        <ChevronRight ... />
      </Link>
    </Badge>
    // ...
    ```

    * **Link (`href`)**: Change the `#` to the URL you want the badge to link to.
    * **Text**: Edit the "Introducing our latest feature" text.
    * **To remove it**: Delete the entire `<motion.div>` block containing the `<Badge>`.
  </Step>

  <Step title="Title and Description">
    The main headline (`h1`) and the descriptive paragraph (`p`) are the core of your message.

    ```tsx src/components/marketing/hero.tsx theme={null}
    // ...
    <motion.h1 ...>
      Your revolutionary
      <br />
      Next.js SaaS
    </motion.h1>

    <motion.p ...>
      Build and launch your SaaS product faster with our all-in-one platform
    </motion.p>
    // ...
    ```
  </Step>

  <Step title="Call-to-Action (CTA) Buttons">
    There are two main buttons: a primary button for signing up and a secondary one for contacting sales. You can change both the text and the link (`href`) for each.

    ```tsx src/components/marketing/hero.tsx theme={null}
    // ...
    <Button size="lg" asChild>
      <Link href="/sign-up">Start for free</Link>
    </Button>
    <Button size="lg" variant="outline" asChild>
      <Link href="/contact">Talk to sales</Link>
    </Button>
    // ...
    ```
  </Step>

  <Step title="Product Screenshot/Video">
    The placeholder div at the bottom is designed for you to embed a product video or a compelling screenshot.

    ```tsx src/components/marketing/hero.tsx theme={null}
    // ...
    <div className="relative w-full aspect-video ...">
      <p className="text-muted-foreground">Product Video / Screenshot</p>
    </div>
    // ...
    ```

    To add your own visual, replace the `<p>` tag with an `<img>`, `<video>`, or an `<iframe>` for services like YouTube or Loom.

    <Tip>
      For best performance and to avoid layout shift, it's recommended to use the Next.js `<Image />` component for screenshots.
    </Tip>
  </Step>
</Steps>