Hero

What it is

The Hero is the first section visitors see at /. It includes an animated headline (Framer Motion), a one-sentence description, and two CTAs (a primary "Get Started" and a secondary "See Features" / "See Pricing"). The headline is the single highest-impact piece of copy on the site; treat it as your one-sentence brand frame.

Usage

The Hero is already imported into the landing page at app/(marketing)/page.tsx:

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

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

Customization

Edit components/landing/Hero.tsx directly. The headline + description + CTAs are inline in the component, not config-driven, because they are too brand-specific to template.

<h1>
  The most secure{' '}
  <span className="text-primary">Next.js SaaS template</span>
</h1>
<p>
  Backend-only data access, Zod on every input, RLS by default. Built for
  developers who refuse to ship vulnerable code.
</p>

CTAs

<Link href="/#pricing">See pricing</Link>
<Link href="#features">See what's inside</Link>

Keep both CTAs above the fold. The primary CTA should route to the highest-intent next step (/#pricing, /signup, or your booking page). The secondary CTA should de-risk by sending hesitant visitors to a feature explainer rather than abandoning.

Animation

The entrance animation uses Framer Motion. Tune timing in the motion.div props:

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

Set duration: 0 (or remove the motion wrapper) to ship a static hero. Some accessibility audits flag entrance animations as motion-sensitive; respect prefers-reduced-motion with useReducedMotion() if you keep the animation.

Frame-fit check

Before shipping a new headline, ask: would this same headline work on ShipFast, MakerKit, or any generic boilerplate landing page? If yes, it is too generic. The headline should name the architectural commitment (security, backend-only, RLS) that no other template leads with. A specific headline that loses the wrong buyers is better than a generic headline that converts no buyer at all.