My Purchases

<div className="relative group overflow-hidden rounded-2xl bg-white/5 backdrop-blur-3xl border border-white/10 p-8 shadow-2xl">
    <div className="absolute inset-0 bg-gradient-to-br from-indigo-500/20 to-purple-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
    <h3 className="text-2xl font-bold text-white mb-2 relative z-10">Glassmorphism</h3>
    <p className="text-gray-400 relative z-10">The future of spatial UI design.</p>
</div>
                                

<button className="relative px-8 py-4 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 text-white font-bold tracking-wide overflow-hidden group">
    <span className="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-out"></span>
    <span className="relative z-10">Initialize Sequence</span>
    <div className="absolute -inset-1 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl blur opacity-30 group-hover:opacity-100 transition duration-500"></div>
</button>
                                

<form className="relative w-full max-w-3xl flex items-center group">
    <div className="absolute inset-0 bg-gradient-to-r from-indigo-500/10 via-purple-500/10 to-pink-500/10 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none rounded-full"></div>
    <input type="text" placeholder="Describe what you want to build..." className="w-full bg-white/5 backdrop-blur-3xl border border-white/10 hover:border-white/20 focus:border-indigo-500/50 rounded-full py-5 pl-12 pr-32 text-white placeholder-gray-500 shadow-2xl focus:outline-none transition-all duration-300" />
    <svg className="absolute left-4 w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
    <button type="submit" className="absolute right-2 px-6 py-3 bg-gradient-to-br from-indigo-500 to-purple-600 hover:from-indigo-400 hover:to-purple-500 text-white font-bold rounded-full transition-all duration-300">Generate ✨</button>
</form>
                                

<nav className="flex items-center gap-6">
    <a href="#" className="relative text-gray-400 hover:text-white font-medium transition-colors group">
        Platform
        <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full transition-all duration-300 group-hover:w-full"></span>
    </a>
    <a href="#" className="relative text-gray-400 hover:text-white font-medium transition-colors group">
        Pricing
        <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full transition-all duration-300 group-hover:w-full"></span>
    </a>
</nav>
                                

<div className="relative group overflow-hidden rounded-3xl bg-black/40 backdrop-blur-3xl border border-indigo-500/30 p-8 flex flex-col">
    <div className="absolute top-0 right-0 px-4 py-1 bg-indigo-500 text-[10px] font-black tracking-widest text-white uppercase rounded-bl-xl">Most Popular</div>
    <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(99,102,241,0.15),transparent_50%)]"></div>
    <h3 className="text-xl font-bold text-white mb-2">Pro Vault</h3>
    <div className="flex items-baseline gap-1 mb-6">
        <span className="text-4xl font-black text-white">$49</span>
        <span className="text-gray-400 text-sm font-medium">/month</span>
    </div>
    <ul className="space-y-4 mb-8 flex-1">
        <li className="flex items-center gap-3 text-sm text-gray-300">
            <svg className="w-5 h-5 text-indigo-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path></svg>
            Unlimited Spatial Components
        </li>
        <li className="flex items-center gap-3 text-sm text-gray-300">
            <svg className="w-5 h-5 text-indigo-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path></svg>
            Autonomous Processing Engine
        </li>
    </ul>
    <button className="w-full py-3 rounded-xl bg-indigo-500 hover:bg-indigo-400 text-white font-bold transition-colors">Upgrade to Pro</button>
</div>
                                

<div className="group">
    <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-indigo-500/10 to-purple-500/5 border border-indigo-500/20 flex items-center justify-center mb-6 group-hover:scale-110 group-hover:border-indigo-500/50 transition-all duration-300 shadow-[0_0_30px_rgba(99,102,241,0.1)] group-hover:shadow-[0_0_30px_rgba(99,102,241,0.3)]">
        <svg className="w-8 h-8 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
    </div>
    <h3 className="text-xl font-bold text-white mb-3">Edge Network</h3>
    <p className="text-gray-400 leading-relaxed">Deploy your heavy 3D assets globally with sub-millisecond latency.</p>
</div>