Back to Hero blocks
A copy-paste Hero Section Component combining a complete navbar, responsive hero, and built-in dark mode for SaaS and landing pages.
npm i framer-motionnpm i react-iconsThis 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 Orbit Border
Use Linear Reveal