Components
Loading preview...
A fullscreen, glass-refraction style hero with animated blue gradient blobs, subtle vertical glass strips, staggered gradient title animation, description, and configurable primary/secondary CTAs. Designed for dramatic, immersive landing pages and product intros; supports children override for custom content.
@dhiluxui
npx shadcn@latest add https://21st.dev/r/dhileepkumargm/crypto-heroimport VaultoryHero from "@/components/ui/crypto-hero";
export default function VaultoryHeroDemo() {
return (
<VaultoryHero
logo={
<div className="text-2xl font-bold text-white">Vaultory</div>
}
title="All-in-One Crypto Wallet for a"
subtitle="Decentralized Future"
description="From holding coins to accessing Web3, do more with a wallet built for ownership and control."
emailPlaceholder="name@email.com"
ctaButton={{
label: "Sign Up",
onClick: () => console.log("Sign Up clicked"),
}}
navItems={[
{ label: "Prices", onClick: () => console.log("Prices") },
{ label: "Trade", onClick: () => console.log("Trade") },
{ label: "Pay", onClick: () => console.log("Pay") },
{ label: "Buy Crypto", onClick: () => console.log("Buy Crypto") },
]}
authButtons={{
login: { label: "Log in", onClick: () => console.log("Login") },
signup: { label: "Sign Up", onClick: () => console.log("Signup") },
}}
cryptoCoins={[
{
icon: <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="Ethereum" className="w-full h-full object-contain p-2" />,
size: 100,
position: { x: "5%", y: "10%" },
delay: 0,
},
{
icon: <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="Bitcoin" className="w-full h-full object-contain p-2" />,
size: 80,
position: { x: "15%", y: "50%" },
delay: 0.2,
},
{
icon: <img src="https://cryptologos.cc/logos/solana-sol-logo.png" alt="Solana" className="w-full h-full object-contain p-2" />,
size: 70,
position: { x: "80%", y: "20%" },
delay: 0.4,
},
]}
walletImage={
<div
className="w-96 h-64 rounded-3xl"
style={{
background: "linear-gradient(135deg, #8BC34A 0%, #C4FF0D 100%)",
boxShadow: "0 20px 60px rgba(196, 255, 13, 0.4)",
}}
/>
}
brands={[
{ name: "Binance", logo: <div className="text-white text-sm font-semibold">BINANCE</div> },
{ name: "Coinbase", logo: <div className="text-white text-sm font-semibold">coinbase</div> },
{ name: "Chainlink", logo: <div className="text-white text-sm font-semibold">CHAINLINK</div> },
{ name: "MetaMask", logo: <div className="text-white text-sm font-semibold">METAMASK</div> },
{ name: "Solana", logo: <div className="text-white text-sm font-semibold">SOLANA</div> },
{ name: "AAVE", logo: <div className="text-white text-sm font-semibold">AAVE</div> },
]}
/>
);
}