Skip to main content

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.

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.
1

Announcement Badge

At the top of the section is an optional announcement badge, perfect for highlighting new features or promotions.
src/components/marketing/hero.tsx
// ...
<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>.
2

Title and Description

The main headline (h1) and the descriptive paragraph (p) are the core of your message.
src/components/marketing/hero.tsx
// ...
<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>
// ...
3

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.
src/components/marketing/hero.tsx
// ...
<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>
// ...
4

Product Screenshot/Video

The placeholder div at the bottom is designed for you to embed a product video or a compelling screenshot.
src/components/marketing/hero.tsx
// ...
<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.
For best performance and to avoid layout shift, it’s recommended to use the Next.js <Image /> component for screenshots.