Back to Hero blocks
A complete SaaS Hero Section with a responsive navbar, animated background, CTA, and built-in dark mode for modern SaaS landing pages.
npm i framer-motionThis component supports Tailwind CSS dark: variants. To render this component in dark mode, add the dark className to your application's root element (for example, in app/layout.tsx).
Using <html>
<html className="dark"> ... </html>
Using <body>
<body className="dark"> ... </body>
Use Spotlight Grid
Use Morph Nav
Use Orbit Border
Use Morph Menu
Use Liner Reveal
Use Wave CTA