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.

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.