Components
A full-screen, brand-forward hero for Web3 agencies and crypto products with animated token icons, configurable navigation, contact CTA, highlighted headline segment, subtitle, primary CTA, and a trusted-by brand rail.
npx @21st-dev/cli add dhileepkumargm/web3media-heroLoading preview...
import { Web3MediaHero } from "@/components/ui/web3media-hero";
export default function Web3MediaHeroDemo() {
return (
<Web3MediaHero
logo="Web3 Media"
navigation={[
{ label: "Home", onClick: () => console.log("Home") },
{ label: "Gallery", onClick: () => console.log("Gallery") },
{ label: "Cases", onClick: () => console.log("Cases") },
{ label: "About us", onClick: () => console.log("About us") },
]}
contactButton={{
label: "Contact",
onClick: () => console.log("Contact clicked"),
}}
title="Shaping the Future of"
highlightedText="Web3 Visibility"
subtitle="We empower brands to stand out in the decentralized era with creative campaigns, growth strategies, and community-driven marketing."
ctaButton={{
label: "Discover more",
onClick: () => console.log("Discover more clicked"),
}}
cryptoIcons={[
{
icon: (
<svg width="40" height="40" viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="10" fill="#FF9900" />
<path
d="M12 6V18M8 9H13.5C14.163 9 14.7989 9.26339 15.2678 9.73223C15.7366 10.2011 16 10.837 16 11.5C16 12.163 15.7366 12.7989 15.2678 13.2678C14.7989 13.7366 14.163 14 13.5 14H8"
stroke="white"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
),
label: "BTC",
position: { x: "10%", y: "20%" },
},
{
icon: (
<svg width="40" height="40" viewBox="0 0 256 417" fill="none">
<path
d="M127.961 0L125.507 8.17L125.507 285.168L127.961 287.618L255.922 212.32L127.961 0Z"
fill="#FF9900"
/>
<path d="M127.96 0L0 212.32L127.96 287.618V154.158V0Z" fill="#FFB84D" />
</svg>
),
label: "ETH",
position: { x: "15%", y: "60%" },
},
{
icon: (
<svg width="40" height="40" viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="10" fill="#FF9900" />
<path
d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z"
fill="white"
/>
<circle cx="12" cy="12" r="3" fill="white" />
</svg>
),
label: "USDC",
position: { x: "80%", y: "25%" },
},
{
icon: (
<svg width="40" height="40" viewBox="0 0 24 24" fill="none">
<rect width="24" height="24" rx="4" fill="#FF9900" />
<path
d="M6 12H18M6 8H18M6 16H14"
stroke="white"
strokeWidth="2"
strokeLinecap="round"
/>
</svg>
),
label: "SOL",
position: { x: "75%", y: "65%" },
},
]}
trustedByText="Trusted by"
brands={[
{
name: "Aspida",
logo: (
<svg width="80" height="24" viewBox="0 0 80 24" fill="none">
<text x="0" y="18" fill="rgba(255,255,255,0.5)" fontSize="16" fontWeight="600">
Aspida
</text>
</svg>
),
},
{
name: "Viral",
logo: (
<svg width="60" height="24" viewBox="0 0 60 24" fill="none">
<text x="0" y="18" fill="rgba(255,255,255,0.5)" fontSize="16" fontWeight="600">
Viral
</text>
</svg>
),
},
{
name: "Navaid",
logo: (
<svg width="70" height="24" viewBox="0 0 70 24" fill="none">
<text x="0" y="18" fill="rgba(255,255,255,0.5)" fontSize="16" fontWeight="600">
Navaid
</text>
</svg>
),
},
{
name: "Trenly",
logo: (
<svg width="70" height="24" viewBox="0 0 70 24" fill="none">
<text x="0" y="18" fill="rgba(255,255,255,0.5)" fontSize="16" fontWeight="600">
Trenly
</text>
</svg>
),
},
{
name: "Aspida",
logo: (
<svg width="80" height="24" viewBox="0 0 80 24" fill="none">
<text x="0" y="18" fill="rgba(255,255,255,0.5)" fontSize="16" fontWeight="600">
Aspida
</text>
</svg>
),
},
{
name: "Viral",
logo: (
<svg width="60" height="24" viewBox="0 0 60 24" fill="none">
<text x="0" y="18" fill="rgba(255,255,255,0.5)" fontSize="16" fontWeight="600">
Viral
</text>
</svg>
),
},
]}
/>
);
}