Components
Description 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-2Loading preview...
import React from "react";
import HeroSection from "@/components/ui/hero-section-2";
function App() {
const handleWaitlistSubmit = (email) => {
console.log("Waitlist submitted:", email);
// integrate real API call here
};
return (
<div
className="min-h-screen w-screen overflow-hidden antialiased text-white relative"
data-theme="dark"
style={{ backgroundColor: "hsl(var(--background))" }}
>
<HeroSection
backgroundImage="https://i.ibb.co/ZzvqN84g/unnamed-2.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" },
]}
avatarSrcList={[
"https://placehold.co/32x32/a9a9a9/ffffff?text=U",
"https://placehold.co/32x32/d3d3d3/ffffff?text=U",
"https://placehold.co/32x32/808080/ffffff?text=U",
]}
userCount={1000}
title="Discover Bold, Futuristic Style"
description="Enter a realm where fashion fuses with innovation. Our vision combines art, technology, and individuality."
placeholder="Enter Email ID"
ctaText="Join Waitlist"
onSubmit={handleWaitlistSubmit}
footerVersion="02. Maya"
/>
</div>
);
}
export default App;