Initial BM Alpha landing page
This commit is contained in:
@@ -0,0 +1,154 @@
|
||||
import React from 'react';
|
||||
import { Rocket, MessagesSquare, Sparkles, ShieldCheck, Flame, ArrowRight, TrendingUp } from 'lucide-react';
|
||||
import { Countdown } from './Countdown';
|
||||
import { YOUR_BUY_LINK, YOUR_DISCORD_URL } from '../config';
|
||||
import { triggerBirthdayConfetti } from '../utils/confetti';
|
||||
import coinImg from '../assets/images/bm_connect_coin_1787085516443.jpg';
|
||||
|
||||
export const HeroSection: React.FC = () => {
|
||||
const handleBuyClick = () => {
|
||||
triggerBirthdayConfetti();
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
id="hero"
|
||||
className="relative min-h-screen pt-32 pb-20 sm:pt-36 sm:pb-28 flex items-center justify-center overflow-hidden"
|
||||
>
|
||||
{/* Background Gradients and Glowing Ambient Orbs */}
|
||||
<div className="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] sm:w-[800px] h-[350px] bg-gradient-to-tr from-[#FF8C32]/20 via-transparent to-[#00D7FF]/20 blur-[140px] rounded-full pointer-events-none -z-10" />
|
||||
<div className="absolute top-1/3 -left-32 w-80 h-80 bg-[#FF8C32]/15 rounded-full blur-[110px] pointer-events-none -z-10" />
|
||||
<div className="absolute top-1/2 -right-32 w-80 h-80 bg-[#00D7FF]/15 rounded-full blur-[110px] pointer-events-none -z-10" />
|
||||
|
||||
{/* Subtle grid lines */}
|
||||
<div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_40%,#000_70%,transparent_100%)] pointer-events-none -z-10" />
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
|
||||
<div className="flex flex-col items-center text-center">
|
||||
|
||||
{/* Prominent Launch Badge */}
|
||||
<div
|
||||
id="hero-launch-badge"
|
||||
className="inline-flex items-center gap-2.5 px-4 py-1.5 rounded-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 shadow-sm dark:shadow-[0_0_20px_rgba(255,140,50,0.2)] backdrop-blur-md mb-8 animate-bounce duration-1000"
|
||||
>
|
||||
<span className="text-sm">🚀</span>
|
||||
<span className="font-display font-black text-xs tracking-widest text-[#00A6DB] dark:text-[#00D7FF]">
|
||||
OFFICIAL LAUNCH: AUGUST 24, 2026
|
||||
</span>
|
||||
<span className="inline-block w-2 h-2 rounded-full bg-[#FF8C32] animate-pulse" />
|
||||
</div>
|
||||
|
||||
{/* Main Headline */}
|
||||
<h1
|
||||
id="hero-main-headline"
|
||||
className="font-display text-5xl sm:text-7xl lg:text-8xl font-black tracking-tighter leading-[1.02] max-w-5xl"
|
||||
>
|
||||
<span className="text-slate-900 dark:text-white">BM ALPHA </span>
|
||||
<span className="text-gradient-brand drop-shadow-[0_0_35px_rgba(255,140,50,0.35)]">
|
||||
IS HERE.
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
{/* Supporting Headline */}
|
||||
<p
|
||||
id="hero-supporting-headline"
|
||||
className="mt-6 text-xl sm:text-2xl lg:text-3xl font-bold text-slate-700 dark:text-gray-200 max-w-3xl leading-snug tracking-tight"
|
||||
>
|
||||
The community-powered meme coin from{' '}
|
||||
<span className="text-[#00A6DB] dark:text-[#00D7FF] font-extrabold">BirthdayMessaging</span>.
|
||||
</p>
|
||||
|
||||
{/* Short Description */}
|
||||
<p
|
||||
id="hero-description"
|
||||
className="mt-4 text-base sm:text-lg text-slate-600 dark:text-gray-400 max-w-2xl font-medium"
|
||||
>
|
||||
Built for the community. Powered by memes. Launching August 24, 2026 on Solana.
|
||||
</p>
|
||||
|
||||
{/* Primary CTA Buttons */}
|
||||
<div className="mt-8 flex flex-col sm:flex-row items-center justify-center gap-4 w-full max-w-md">
|
||||
<a
|
||||
id="hero-buy-btn"
|
||||
href="#how-to-buy"
|
||||
onClick={handleBuyClick}
|
||||
className="w-full sm:w-auto flex-1 flex items-center justify-center gap-2.5 px-8 py-4 rounded-full font-display font-black text-sm text-black bg-[#FF8C32] hover:bg-[#E6761D] shadow-[0_0_25px_rgba(255,140,50,0.4)] hover:shadow-[0_0_35px_rgba(0,215,255,0.6)] transition-all duration-300 transform hover:-translate-y-0.5 active:scale-95"
|
||||
>
|
||||
<Rocket className="w-4 h-4 text-black" />
|
||||
<span>BUY BM ALPHA</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
id="hero-community-btn"
|
||||
href={YOUR_DISCORD_URL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-full sm:w-auto flex-1 flex items-center justify-center gap-2.5 px-8 py-4 rounded-full font-display font-bold text-sm text-slate-800 dark:text-white bg-white dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 border border-slate-300 dark:border-white/10 hover:border-[#5865F2]/50 shadow-md dark:shadow-lg transition-all duration-300 transform hover:-translate-y-0.5"
|
||||
>
|
||||
<MessagesSquare className="w-4 h-4 text-[#5865F2]" />
|
||||
<span>JOIN DISCORD</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Launch Countdown Component */}
|
||||
<div className="mt-12 w-full max-w-xl">
|
||||
<Countdown />
|
||||
</div>
|
||||
|
||||
{/* 3D Coin & Interactive Graphic Showcase */}
|
||||
<div className="mt-14 relative flex items-center justify-center w-full max-w-2xl">
|
||||
|
||||
{/* Animated Ring 1 */}
|
||||
<div className="absolute w-[280px] sm:w-[380px] h-[280px] sm:h-[380px] rounded-full border border-dashed border-[#FF8C32]/40 dark:border-[#FF8C32]/30 animate-spin-slow pointer-events-none" />
|
||||
{/* Animated Ring 2 */}
|
||||
<div className="absolute w-[340px] sm:w-[460px] h-[340px] sm:h-[460px] rounded-full border border-[#00D7FF]/30 dark:border-[#00D7FF]/20 animate-spin-slow-reverse pointer-events-none" />
|
||||
|
||||
{/* Glowing Coin Core */}
|
||||
<div className="relative group cursor-pointer" onClick={triggerBirthdayConfetti}>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-[#FF8C32] to-[#00D7FF] rounded-full blur-2xl opacity-50 dark:opacity-60 group-hover:opacity-80 dark:group-hover:opacity-90 transition-opacity duration-500 scale-95 group-hover:scale-105" />
|
||||
|
||||
<div className="relative w-52 sm:w-64 h-52 sm:h-64 rounded-full p-2 bg-gradient-to-tr from-[#FF8C32] via-[#FFA843] to-[#00D7FF] shadow-[0_0_40px_rgba(255,140,50,0.35)] dark:shadow-[0_0_50px_rgba(255,140,50,0.4)] transform group-hover:scale-105 transition-all duration-500">
|
||||
<div className="w-full h-full rounded-full overflow-hidden bg-white dark:bg-[#0a0c14] border-4 border-slate-200 dark:border-[#161b2b] flex items-center justify-center relative">
|
||||
<img
|
||||
src={coinImg}
|
||||
alt="BM Alpha Meme Coin Token 3D"
|
||||
className="w-full h-full object-cover animate-[pulse_4s_ease-in-out_infinite]"
|
||||
/>
|
||||
{/* Subtle hover overlay hint */}
|
||||
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity">
|
||||
<span className="px-3 py-1 rounded-full bg-[#FF8C32] text-black text-xs font-bold font-display shadow-lg">
|
||||
🎉 Click for Hype!
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating Web3 Feature Chips */}
|
||||
<div className="hidden sm:flex absolute -left-6 top-1/4 items-center gap-2 px-3.5 py-2 rounded-xl bg-white/90 dark:bg-[#161b2b]/90 border border-slate-200 dark:border-white/10 backdrop-blur-md shadow-md dark:shadow-xl animate-bounce duration-1000">
|
||||
<Flame className="w-4 h-4 text-[#FF8C32]" />
|
||||
<span className="text-xs font-bold text-slate-800 dark:text-white font-display">0% Buy/Sell Tax</span>
|
||||
</div>
|
||||
|
||||
<div className="hidden sm:flex absolute -right-6 top-1/3 items-center gap-2 px-3.5 py-2 rounded-xl bg-white/90 dark:bg-[#161b2b]/90 border border-slate-200 dark:border-white/10 backdrop-blur-md shadow-md dark:shadow-xl animate-bounce duration-1000 delay-300">
|
||||
<Sparkles className="w-4 h-4 text-[#00A6DB] dark:text-[#00D7FF]" />
|
||||
<span className="text-xs font-bold text-slate-800 dark:text-white font-display">Solana Ecosystem</span>
|
||||
</div>
|
||||
|
||||
<div className="hidden sm:flex absolute left-8 bottom-4 items-center gap-2 px-3.5 py-2 rounded-xl bg-white/90 dark:bg-[#161b2b]/90 border border-slate-200 dark:border-white/10 backdrop-blur-md shadow-md dark:shadow-xl">
|
||||
<ShieldCheck className="w-4 h-4 text-emerald-500 dark:text-emerald-400" />
|
||||
<span className="text-xs font-bold text-slate-700 dark:text-gray-300 font-display">100% Community LP</span>
|
||||
</div>
|
||||
|
||||
<div className="hidden sm:flex absolute right-8 bottom-2 items-center gap-2 px-3.5 py-2 rounded-xl bg-white/90 dark:bg-[#161b2b]/90 border border-slate-200 dark:border-white/10 backdrop-blur-md shadow-md dark:shadow-xl">
|
||||
<TrendingUp className="w-4 h-4 text-[#FF8C32]" />
|
||||
<span className="text-xs font-bold text-slate-800 dark:text-white font-display">10B Total Supply</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user