Hero

Overview

The Hero section is the first thing visitors see. It includes an animated headline with Framer Motion, a description paragraph, and two CTA buttons.

Usage

The Hero is already included in your landing page (app/(marketing)/page.tsx):

import { Hero } from '@/components/landing/Hero'

export default function LandingPage() {
  return <Hero />
}

Customization

Edit components/landing/Hero.tsx directly to change the content:

<h1>
  Build your SaaS{' '}
  <span className="text-primary">faster than ever</span>
</h1>
<p>
  Your custom description here.
</p>

Change CTAs

<Link href="/signup">Get Started Free</Link>
<Link href="#features">See Features</Link>

Modify Animation

The Hero uses Framer Motion for entrance animations. Adjust timing in the motion.div props:

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
>

Set duration to 0 to disable animation.