Components
A responsive, theme-aware hero component with a full-width background image, customizable header navigation, user avatar cluster and join count, plus an email waitlist form. Includes built-in light/dark theming and accessible markup.
npx @21st-dev/cli add dhileepkumargm/hero-section-3Loading preview...
import React from "react";
import HeroSection from "@/components/ui/hero-section-3";
function App() {
return (
<div className="min-h-screen w-screen antialiased text-white relative" data-theme="dark">
<HeroSection
backgroundImage="https://i.ibb.co/3K3j0PR/unnamed-3.png"
logoText="[ O ]"
navLinks={[
{ href: "#explore", label: "Explore" },
{ href: "#collections", label: "Collections" },
{ href: "#stories", label: "Stories" },
{ href: "#community", label: "Community" },
{ href: "#about", label: "About" },
{ href: "#contact", label: "Contact" },
]}
versionText="03. Aura"
title="Experience The Future"
subtitle="Redefining the boundaries between technology and human expression."
ctaText="Explore The Collection"
/>
</div>
);
}
export default App;