Initial BM Alpha landing page
This commit is contained in:
@@ -0,0 +1,99 @@
|
||||
import React from 'react';
|
||||
import { MessagesSquare, Twitter, Sparkles, MessageCircle } from 'lucide-react';
|
||||
import { YOUR_DISCORD_URL, YOUR_WHATSAPP_URL, YOUR_X_URL } from '../config';
|
||||
import { triggerBirthdayConfetti } from '../utils/confetti';
|
||||
|
||||
export const CommunityCTA: React.FC = () => {
|
||||
const handleCommunityClick = () => {
|
||||
triggerBirthdayConfetti();
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="py-20 sm:py-28 relative overflow-hidden">
|
||||
{/* Container with Tangerine to Sky Blue Immersive UI Gradient Backdrop */}
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative">
|
||||
|
||||
<div
|
||||
id="final-community-cta-box"
|
||||
className="relative rounded-3xl overflow-hidden p-8 sm:p-14 lg:p-16 border border-slate-200 dark:border-white/20 shadow-[0_0_60px_rgba(255,140,50,0.25)] text-center"
|
||||
>
|
||||
{/* Intense glowing gradient background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#FF8C32] via-[#FFA843] to-[#00D7FF] pointer-events-none -z-10 opacity-75" />
|
||||
{/* Theme-aware glass overlay for high-contrast readability */}
|
||||
<div className="absolute inset-0 bg-white/85 dark:bg-[#0a0c14]/80 backdrop-blur-md pointer-events-none -z-10" />
|
||||
|
||||
{/* Floating cyber particles */}
|
||||
<div className="absolute -top-24 -left-24 w-72 h-72 bg-[#FF8C32]/30 rounded-full blur-3xl pointer-events-none" />
|
||||
<div className="absolute -bottom-24 -right-24 w-72 h-72 bg-[#00D7FF]/30 rounded-full blur-3xl pointer-events-none" />
|
||||
|
||||
{/* Badge */}
|
||||
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-black/10 dark:bg-black/40 border border-slate-300 dark:border-white/20 text-xs font-bold text-slate-800 dark:text-white mb-6 backdrop-blur-md">
|
||||
<Sparkles className="w-4 h-4 text-[#FF8C32]" />
|
||||
<span>THE COUNTDOWN HAS BEGUN</span>
|
||||
</div>
|
||||
|
||||
{/* Heading */}
|
||||
<h2
|
||||
id="community-cta-heading"
|
||||
className="font-display text-4xl sm:text-6xl lg:text-7xl font-black text-slate-900 dark:text-white tracking-tight leading-tight"
|
||||
>
|
||||
DON'T MISS THE ALPHA.
|
||||
</h2>
|
||||
|
||||
{/* Subheading */}
|
||||
<p
|
||||
id="community-cta-subheading"
|
||||
className="mt-4 text-xl sm:text-2xl lg:text-3xl font-extrabold text-[#00A6DB] dark:text-[#00D7FF] drop-shadow-sm"
|
||||
>
|
||||
BM Alpha launches August 24.
|
||||
</p>
|
||||
|
||||
<p className="mt-3 text-slate-700 dark:text-gray-300 text-sm sm:text-base max-w-xl mx-auto font-medium">
|
||||
Be part of the earliest wave. Join our official channels for real-time launch alerts, meme drops, and birthday giveaways.
|
||||
</p>
|
||||
|
||||
{/* Action CTAs */}
|
||||
<div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 max-w-2xl mx-auto">
|
||||
<a
|
||||
id="cta-join-whatsapp"
|
||||
href={YOUR_WHATSAPP_URL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={handleCommunityClick}
|
||||
className="w-full sm:w-auto flex-1 flex items-center justify-center gap-2 px-6 py-3.5 rounded-full font-display font-black text-xs sm:text-sm text-white bg-emerald-600 hover:bg-emerald-500 shadow-xl transition-all duration-300 transform hover:-translate-y-0.5 active:scale-95"
|
||||
>
|
||||
<MessageCircle className="w-4 h-4 text-white" />
|
||||
<span>JOIN WHATSAPP</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
id="cta-join-discord"
|
||||
href={YOUR_DISCORD_URL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={handleCommunityClick}
|
||||
className="w-full sm:w-auto flex-1 flex items-center justify-center gap-2 px-6 py-3.5 rounded-full font-display font-black text-xs sm:text-sm text-white bg-[#5865F2] hover:bg-[#4752C4] shadow-[0_0_20px_rgba(88,101,242,0.35)] transition-all duration-300 transform hover:-translate-y-0.5 active:scale-95"
|
||||
>
|
||||
<MessagesSquare className="w-4 h-4 text-white" />
|
||||
<span>JOIN DISCORD</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
id="cta-follow-x"
|
||||
href={YOUR_X_URL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={handleCommunityClick}
|
||||
className="w-full sm:w-auto flex-1 flex items-center justify-center gap-2 px-6 py-3.5 rounded-full font-display font-black text-xs sm:text-sm text-slate-900 dark:text-white bg-white/80 dark:bg-[#0a0c14]/90 hover:bg-white dark:hover:bg-white/10 border border-slate-300 dark:border-white/20 hover:border-[#FF8C32] shadow-xl transition-all duration-300 transform hover:-translate-y-0.5"
|
||||
>
|
||||
<Twitter className="w-4 h-4 text-[#FF8C32]" />
|
||||
<span>FOLLOW ON X</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,101 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { LAUNCH_DATE } from '../config';
|
||||
import { Clock, Sparkles } from 'lucide-react';
|
||||
|
||||
interface TimeLeft {
|
||||
days: number;
|
||||
hours: number;
|
||||
minutes: number;
|
||||
seconds: number;
|
||||
isLive: boolean;
|
||||
}
|
||||
|
||||
export const Countdown: React.FC = () => {
|
||||
const calculateTimeLeft = (): TimeLeft => {
|
||||
const target = new Date(LAUNCH_DATE).getTime();
|
||||
const now = new Date().getTime();
|
||||
const difference = target - now;
|
||||
|
||||
if (difference <= 0) {
|
||||
return { days: 0, hours: 0, minutes: 0, seconds: 0, isLive: true };
|
||||
}
|
||||
|
||||
return {
|
||||
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
|
||||
hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
|
||||
minutes: Math.floor((difference / 1000 / 60) % 60),
|
||||
seconds: Math.floor((difference / 1000) % 60),
|
||||
isLive: false,
|
||||
};
|
||||
};
|
||||
|
||||
const [timeLeft, setTimeLeft] = useState<TimeLeft>(calculateTimeLeft());
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setTimeLeft(calculateTimeLeft());
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
const timeUnits = [
|
||||
{ label: 'DAYS', value: timeLeft.days, color: 'text-[#FF8C32]', border: 'border-slate-200 dark:border-white/10' },
|
||||
{ label: 'HOURS', value: timeLeft.hours, color: 'text-[#FF8C32]', border: 'border-slate-200 dark:border-white/10' },
|
||||
{ label: 'MINUTES', value: timeLeft.minutes, color: 'text-[#FF8C32]', border: 'border-slate-200 dark:border-white/10' },
|
||||
{ label: 'SECONDS', value: timeLeft.seconds, color: 'text-[#FF8C32]', border: 'border-slate-200 dark:border-white/10' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div
|
||||
id="launch-countdown-widget"
|
||||
className="relative p-5 sm:p-7 rounded-2xl bg-white/90 dark:bg-[#161b2b]/90 border border-slate-200/90 dark:border-white/10 shadow-lg dark:shadow-[0_10px_35px_rgba(0,0,0,0.6)] backdrop-blur-xl max-w-xl mx-auto w-full transition-colors duration-300"
|
||||
>
|
||||
{/* Ambient background glow behind countdown */}
|
||||
<div className="absolute -top-10 left-1/4 w-32 h-32 bg-[#FF8C32]/15 rounded-full blur-2xl pointer-events-none" />
|
||||
<div className="absolute -bottom-10 right-1/4 w-32 h-32 bg-[#00D7FF]/15 rounded-full blur-2xl pointer-events-none" />
|
||||
|
||||
{/* Header with Title & live indicator */}
|
||||
<div className="flex items-center justify-between mb-4 border-b border-slate-200 dark:border-white/5 pb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="w-4 h-4 text-[#FF8C32]" />
|
||||
<span className="font-display font-black text-[10px] uppercase tracking-[0.2em] text-slate-500 dark:text-gray-400">
|
||||
LAUNCH COUNTDOWN
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10">
|
||||
<span className="w-2 h-2 rounded-full bg-[#FF8C32] animate-ping" />
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[#FF8C32]" />
|
||||
<span className="text-[10px] font-bold text-[#00A6DB] dark:text-[#00D7FF] tracking-wider">
|
||||
AUG 24, 2026
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Countdown Grid */}
|
||||
<div className="grid grid-cols-4 gap-2.5 sm:gap-4 text-center">
|
||||
{timeUnits.map((unit) => (
|
||||
<div
|
||||
key={unit.label}
|
||||
className={`flex flex-col items-center justify-center p-3 sm:p-4 rounded-xl bg-slate-50 dark:bg-white/5 border ${unit.border} hover:border-[#FF8C32]/50 transition-all duration-300 shadow-sm dark:shadow-inner group`}
|
||||
>
|
||||
<span
|
||||
className={`font-display text-2xl sm:text-4xl font-black tracking-tight ${unit.color} group-hover:scale-105 transition-transform`}
|
||||
>
|
||||
{String(unit.value).padStart(2, '0')}
|
||||
</span>
|
||||
<span className="text-[9px] sm:text-[10px] font-bold tracking-widest text-slate-400 dark:text-gray-500 mt-1 uppercase">
|
||||
{unit.label}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Subtitle / Status */}
|
||||
<div className="mt-4 flex items-center justify-center gap-2 text-center text-xs text-slate-600 dark:text-gray-400 font-medium">
|
||||
<Sparkles className="w-3.5 h-3.5 text-[#00A6DB] dark:text-[#00D7FF]" />
|
||||
<span>Targeting Solana Mainnet Deployment & Raydium Liquidity</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,130 @@
|
||||
import React from 'react';
|
||||
import { MessagesSquare, Twitter, Youtube, ArrowUp, MessageCircle } from 'lucide-react';
|
||||
import { YOUR_DISCORD_URL, YOUR_WHATSAPP_URL, YOUR_X_URL, YOUR_YOUTUBE_URL } from '../config';
|
||||
import coinImg from '../assets/images/bm_connect_coin_1787085516443.jpg';
|
||||
|
||||
export const Footer: React.FC = () => {
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
const navLinks = [
|
||||
{ name: 'Home', href: '#' },
|
||||
{ name: 'How to Buy', href: '#how-to-buy' },
|
||||
{ name: 'Community', href: '#community' },
|
||||
{ name: 'Token', href: '#token' },
|
||||
];
|
||||
|
||||
return (
|
||||
<footer id="footer" className="bg-slate-100 dark:bg-[#0a0c14] border-t border-slate-200 dark:border-white/10 pt-16 pb-12 relative transition-colors duration-300">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
||||
{/* Top Footer Row */}
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-8 pb-12 border-b border-slate-200 dark:border-white/5">
|
||||
|
||||
{/* Brand Info */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-full p-[1.5px] bg-gradient-to-tr from-[#FF8C32] to-[#00D7FF] shrink-0 shadow-[0_0_15px_rgba(255,140,50,0.3)]">
|
||||
<div className="w-full h-full bg-white dark:bg-[#0a0c14] rounded-full overflow-hidden flex items-center justify-center">
|
||||
<img src={coinImg} alt="BM Alpha" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-display font-black text-xl text-slate-900 dark:text-white">BM Alpha</span>
|
||||
<span className="text-xs font-mono font-bold text-[#FF8C32] px-2 py-0.5 rounded-full bg-[#FF8C32]/15 border border-[#FF8C32]/30">
|
||||
$BMALPHA
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-slate-600 dark:text-gray-400 mt-0.5 font-medium">
|
||||
The community-powered meme coin from <span className="text-slate-900 dark:text-gray-200 font-semibold">BirthdayMessaging</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Nav Links */}
|
||||
<nav className="flex flex-wrap items-center gap-6 sm:gap-8">
|
||||
{navLinks.map((link) => (
|
||||
<a
|
||||
key={link.name}
|
||||
href={link.href}
|
||||
className="text-xs sm:text-sm font-semibold text-slate-600 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white transition-colors"
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Social Icons & Back to Top */}
|
||||
<div className="flex items-center gap-3">
|
||||
<a
|
||||
id="footer-whatsapp"
|
||||
href={YOUR_WHATSAPP_URL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="WhatsApp Channel"
|
||||
className="w-10 h-10 rounded-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:border-emerald-500 hover:bg-emerald-500/10 text-slate-600 dark:text-gray-300 hover:text-emerald-500 dark:hover:text-emerald-400 flex items-center justify-center transition-all shadow-sm"
|
||||
>
|
||||
<MessageCircle className="w-4 h-4" />
|
||||
</a>
|
||||
<a
|
||||
id="footer-discord"
|
||||
href={YOUR_DISCORD_URL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Discord Server"
|
||||
className="w-10 h-10 rounded-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:border-[#5865F2] hover:bg-[#5865F2]/10 text-slate-600 dark:text-gray-300 hover:text-[#5865F2] flex items-center justify-center transition-all shadow-sm"
|
||||
>
|
||||
<MessagesSquare className="w-4 h-4" />
|
||||
</a>
|
||||
<a
|
||||
id="footer-x"
|
||||
href={YOUR_X_URL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="X / Twitter"
|
||||
className="w-10 h-10 rounded-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:border-[#FF8C32] hover:bg-[#FF8C32]/10 text-slate-600 dark:text-gray-300 hover:text-[#FF8C32] flex items-center justify-center transition-all shadow-sm"
|
||||
>
|
||||
<Twitter className="w-4 h-4" />
|
||||
</a>
|
||||
<a
|
||||
id="footer-youtube"
|
||||
href={YOUR_YOUTUBE_URL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="YouTube"
|
||||
className="w-10 h-10 rounded-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:border-red-500 hover:bg-red-500/10 text-slate-600 dark:text-gray-300 hover:text-red-500 flex items-center justify-center transition-all shadow-sm"
|
||||
>
|
||||
<Youtube className="w-4 h-4" />
|
||||
</a>
|
||||
<button
|
||||
id="back-to-top-btn"
|
||||
onClick={scrollToTop}
|
||||
aria-label="Back to top"
|
||||
className="w-10 h-10 rounded-full bg-white dark:bg-white/10 border border-slate-200 dark:border-white/15 hover:bg-[#FF8C32] hover:border-[#FF8C32] text-slate-700 dark:text-gray-300 hover:text-black flex items-center justify-center transition-all ml-2 cursor-pointer shadow-sm"
|
||||
>
|
||||
<ArrowUp className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Disclaimer & Copyright */}
|
||||
<div className="mt-8 flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
|
||||
<p
|
||||
id="footer-disclaimer"
|
||||
className="text-[11px] sm:text-xs text-slate-500 dark:text-gray-400 max-w-3xl leading-relaxed font-normal"
|
||||
>
|
||||
<strong className="text-slate-700 dark:text-gray-300">Disclaimer: </strong>
|
||||
BM Alpha is a community meme coin. Nothing on this website constitutes financial or investment advice. Always do your own research and verify official links before interacting with any token or wallet.
|
||||
</p>
|
||||
|
||||
<p className="text-[11px] sm:text-xs text-slate-500 dark:text-gray-400 whitespace-nowrap font-medium">
|
||||
© 2026 BirthdayMessaging. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,187 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Wallet, DollarSign, Link as LinkIcon, RefreshCw, AlertTriangle, ArrowRight, ShieldCheck, Sparkles, ExternalLink } from 'lucide-react';
|
||||
import { HOW_TO_BUY_STEPS, YOUR_BUY_LINK, CONTRACT_ADDRESS } from '../config';
|
||||
import { triggerBirthdayConfetti } from '../utils/confetti';
|
||||
import coinImg from '../assets/images/bm_connect_coin_1787085516443.jpg';
|
||||
|
||||
export const HowToBuySection: React.FC = () => {
|
||||
const [solAmount, setSolAmount] = useState<string>('1.0');
|
||||
|
||||
// Hypothetical estimated launch rate calculation (e.g. 1 SOL = 50,000 BMALPHA for interactive fun)
|
||||
const calculatedTokens = () => {
|
||||
const num = parseFloat(solAmount);
|
||||
if (isNaN(num) || num <= 0) return '0';
|
||||
return (num * 50000).toLocaleString();
|
||||
};
|
||||
|
||||
const handleCtaClick = () => {
|
||||
triggerBirthdayConfetti();
|
||||
};
|
||||
|
||||
const stepIcons = [Wallet, DollarSign, LinkIcon, RefreshCw];
|
||||
|
||||
return (
|
||||
<section id="how-to-buy" className="py-24 relative overflow-hidden bg-transparent">
|
||||
{/* Background ambient accents */}
|
||||
<div className="absolute top-1/2 left-0 w-80 h-80 bg-[#FF8C32]/10 rounded-full blur-[140px] pointer-events-none -z-10" />
|
||||
<div className="absolute bottom-10 right-0 w-80 h-80 bg-[#00D7FF]/10 rounded-full blur-[140px] pointer-events-none -z-10" />
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
||||
{/* Section Header */}
|
||||
<div className="text-center max-w-3xl mx-auto mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-xs font-bold text-[#FF8C32] mb-3 shadow-sm">
|
||||
<Sparkles className="w-3.5 h-3.5 text-[#FF8C32]" />
|
||||
SWAP & PARTICIPATE
|
||||
</div>
|
||||
|
||||
<h2
|
||||
id="how-to-buy-heading"
|
||||
className="font-display text-4xl sm:text-5xl font-black text-slate-900 dark:text-white tracking-tight"
|
||||
>
|
||||
HOW TO BUY <span className="text-gradient-brand">BM ALPHA</span>
|
||||
</h2>
|
||||
<p className="mt-4 text-slate-600 dark:text-gray-400 text-base sm:text-lg font-medium">
|
||||
Follow these 4 simple steps to join the BirthdayMessaging Solana meme revolution on launch day.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 4 Steps Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
|
||||
{HOW_TO_BUY_STEPS.map((item, idx) => {
|
||||
const Icon = stepIcons[idx];
|
||||
return (
|
||||
<div
|
||||
key={item.step}
|
||||
className="relative flex flex-col justify-between p-6 sm:p-7 rounded-2xl bg-white/90 dark:bg-[#161b2b]/90 border border-slate-200 dark:border-white/10 hover:border-[#FF8C32]/50 transition-all duration-300 group hover:-translate-y-1 shadow-md dark:shadow-lg backdrop-blur-xl"
|
||||
>
|
||||
<div>
|
||||
{/* Step Number Badge */}
|
||||
<div className="flex items-center justify-between mb-5">
|
||||
<span className="font-display text-3xl font-black text-slate-300 dark:text-gray-600 group-hover:text-[#FF8C32] transition-colors">
|
||||
{item.step}
|
||||
</span>
|
||||
<div className="w-10 h-10 rounded-xl bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 group-hover:border-[#00D7FF] flex items-center justify-center transition-colors">
|
||||
<Icon className="w-5 h-5 text-[#00A6DB] dark:text-[#00D7FF] group-hover:text-[#FF8C32] transition-colors" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title & Description */}
|
||||
<h3 className="font-display font-extrabold text-lg sm:text-xl text-slate-900 dark:text-white tracking-tight group-hover:text-[#00A6DB] dark:group-hover:text-[#00D7FF] transition-colors">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="mt-3 text-xs sm:text-sm text-slate-600 dark:text-gray-300 leading-relaxed font-normal">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Practical Pro Tip */}
|
||||
<div className="mt-6 pt-4 border-t border-slate-200 dark:border-white/5">
|
||||
<p className="text-[11px] font-medium text-slate-500 dark:text-gray-400">
|
||||
💡 <span className="text-slate-700 dark:text-gray-300">{item.tip}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Strong Security Warning Box */}
|
||||
<div className="p-5 sm:p-6 rounded-2xl bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/30 flex flex-col sm:flex-row items-start sm:items-center gap-4 mb-12 shadow-md dark:shadow-lg backdrop-blur-xl">
|
||||
<div className="w-10 h-10 rounded-xl bg-amber-100 dark:bg-amber-500/20 border border-amber-300 dark:border-amber-500/40 flex items-center justify-center shrink-0">
|
||||
<AlertTriangle className="w-5 h-5 text-amber-600 dark:text-amber-400" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-display font-bold text-amber-900 dark:text-amber-300 text-sm sm:text-base">
|
||||
OFFICIAL VERIFICATION WARNING
|
||||
</h4>
|
||||
<p className="text-xs sm:text-sm text-amber-800/90 dark:text-amber-200/90 mt-0.5 leading-relaxed font-medium">
|
||||
Always verify official BM Alpha links and the contract address before making a transaction. Never trust unsolicited DMs or imitation tokens.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Interactive Swap Preview & Pre-Launch Calculator */}
|
||||
<div className="max-w-xl mx-auto rounded-2xl bg-white/95 dark:bg-[#161b2b]/90 border border-slate-200 dark:border-white/10 p-6 sm:p-8 shadow-xl dark:shadow-2xl backdrop-blur-xl mb-12">
|
||||
<div className="flex items-center justify-between border-b border-slate-200 dark:border-white/5 pb-4 mb-5">
|
||||
<div className="flex items-center gap-2">
|
||||
<RefreshCw className="w-4 h-4 text-[#FF8C32]" />
|
||||
<span className="font-display font-bold text-xs uppercase tracking-wider text-slate-700 dark:text-gray-300">
|
||||
SWAP ESTIMATION PREVIEW
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border border-emerald-500/30">
|
||||
0% Slippage Tax
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Input SOL */}
|
||||
<div className="p-4 rounded-xl bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10">
|
||||
<div className="flex items-center justify-between text-xs font-semibold text-slate-500 dark:text-gray-400 mb-1.5">
|
||||
<span>YOU PAY</span>
|
||||
<span>SOLANA</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<input
|
||||
type="number"
|
||||
min="0.1"
|
||||
step="0.5"
|
||||
value={solAmount}
|
||||
onChange={(e) => setSolAmount(e.target.value)}
|
||||
className="bg-transparent font-display text-2xl font-black text-slate-900 dark:text-white focus:outline-none w-full"
|
||||
placeholder="1.0"
|
||||
/>
|
||||
<div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-slate-200 dark:bg-white/10 text-slate-900 dark:text-white font-bold text-xs shrink-0">
|
||||
<span className="w-2 h-2 rounded-full bg-[#00D7FF]" />
|
||||
<span>SOL</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Down Arrow separator */}
|
||||
<div className="flex justify-center -my-2 relative z-10">
|
||||
<div className="w-8 h-8 rounded-full bg-slate-100 dark:bg-[#0a0c14] border border-slate-200 dark:border-white/10 flex items-center justify-center shadow">
|
||||
<ArrowRight className="w-4 h-4 text-slate-600 dark:text-gray-300 rotate-90" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Output BM Alpha */}
|
||||
<div className="p-4 rounded-xl bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10">
|
||||
<div className="flex items-center justify-between text-xs font-semibold text-slate-500 dark:text-gray-400 mb-1.5">
|
||||
<span>YOU RECEIVE (ESTIMATED)</span>
|
||||
<span>BM ALPHA</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="font-display text-2xl font-black text-[#FF8C32] truncate">
|
||||
~ {calculatedTokens()}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[#FF8C32]/15 text-[#FF8C32] border border-[#FF8C32]/30 font-bold text-xs shrink-0">
|
||||
<img src={coinImg} alt="Coin" className="w-4 h-4 rounded-full" />
|
||||
<span>BMALPHA</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action CTA Button */}
|
||||
<div className="mt-6">
|
||||
<a
|
||||
id="how-to-buy-cta"
|
||||
href={YOUR_BUY_LINK}
|
||||
onClick={handleCtaClick}
|
||||
className="w-full flex items-center justify-center gap-2 px-6 py-4 rounded-full font-display font-black text-sm sm:text-base text-black bg-[#FF8C32] hover:bg-[#E6761D] shadow-[0_0_25px_rgba(255,140,50,0.4)] transition-all active:scale-95 text-center"
|
||||
>
|
||||
<span>GET READY TO BUY</span>
|
||||
<ArrowRight className="w-4 h-4 text-black" />
|
||||
</a>
|
||||
<p className="text-[11px] text-center text-slate-500 dark:text-gray-400 mt-2.5">
|
||||
Trading opens on Solana decentralized exchanges upon launch on August 24, 2026.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,173 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Menu, X, Rocket, Sparkles, ExternalLink, MessageCircle, MessagesSquare } from 'lucide-react';
|
||||
import { YOUR_BUY_LINK, YOUR_DISCORD_URL, YOUR_WHATSAPP_URL } from '../config';
|
||||
import { triggerBirthdayConfetti } from '../utils/confetti';
|
||||
import { ThemeToggle } from './ThemeToggle';
|
||||
import coinImg from '../assets/images/bm_connect_coin_1787085516443.jpg';
|
||||
|
||||
export const Navbar: React.FC = () => {
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 20);
|
||||
};
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
const navLinks = [
|
||||
{ name: 'ABOUT', href: '#why-bm-alpha' },
|
||||
{ name: 'TOKENOMICS', href: '#token' },
|
||||
{ name: 'HOW TO BUY', href: '#how-to-buy' },
|
||||
{ name: 'COMMUNITY', href: '#community' },
|
||||
];
|
||||
|
||||
const handleBuyClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
|
||||
triggerBirthdayConfetti();
|
||||
setMobileMenuOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<header
|
||||
id="main-navbar"
|
||||
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
||||
isScrolled
|
||||
? 'bg-white/85 dark:bg-[#0a0c14]/90 backdrop-blur-md border-b border-slate-200/80 dark:border-white/10 shadow-sm dark:shadow-lg dark:shadow-black/60 py-3.5'
|
||||
: 'bg-transparent py-5'
|
||||
}`}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Brand Logo & Wordmark */}
|
||||
<a
|
||||
href="#"
|
||||
className="flex items-center gap-3 group focus:outline-none"
|
||||
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
|
||||
>
|
||||
<div className="relative flex items-center justify-center w-9 h-9 rounded-full overflow-hidden bg-gradient-to-tr from-[#FF8C32] to-[#00D7FF] p-[1.5px] shadow-[0_0_15px_rgba(255,140,50,0.5)] group-hover:shadow-[0_0_20px_rgba(0,215,255,0.7)] transition-all duration-300">
|
||||
<div className="w-full h-full bg-white dark:bg-[#0a0c14] rounded-full flex items-center justify-center overflow-hidden">
|
||||
<img
|
||||
src={coinImg}
|
||||
alt="BM Alpha Coin"
|
||||
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="font-display font-black text-xl sm:text-2xl tracking-tighter text-slate-900 dark:text-white group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-[#FF8C32] group-hover:to-[#00D7FF] transition-all">
|
||||
BM ALPHA
|
||||
</span>
|
||||
<span className="text-[9px] font-bold px-1.5 py-0.5 rounded-full bg-[#00D7FF]/15 text-[#00A6DB] dark:text-[#00D7FF] border border-[#00D7FF]/30 tracking-wider">
|
||||
SOL
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-[10px] font-medium text-slate-500 dark:text-gray-400 -mt-1 tracking-wide">
|
||||
by BirthdayMessaging
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{/* Desktop Navigation Links */}
|
||||
<nav className="hidden md:flex items-center gap-8 text-sm font-medium text-slate-600 dark:text-gray-400">
|
||||
{navLinks.map((link) => (
|
||||
<a
|
||||
key={link.name}
|
||||
href={link.href}
|
||||
className="hover:text-[#FF8C32] dark:hover:text-[#00D7FF] transition-colors relative py-1 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-0 after:h-[2px] after:bg-gradient-to-r after:from-[#FF8C32] after:to-[#00D7FF] hover:after:w-full after:transition-all after:duration-250 font-bold text-xs tracking-wider"
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Desktop Action CTAs */}
|
||||
<div className="hidden md:flex items-center gap-3">
|
||||
{/* Theme Toggle Button */}
|
||||
<ThemeToggle />
|
||||
|
||||
<a
|
||||
id="nav-buy-cta-desktop"
|
||||
href="#how-to-buy"
|
||||
onClick={handleBuyClick}
|
||||
className="bg-[#FF8C32] hover:bg-[#E6761D] text-black px-6 py-2.5 rounded-full font-bold text-xs shadow-[0_0_15px_rgba(255,140,50,0.35)] hover:shadow-[0_0_20px_rgba(255,140,50,0.5)] transition-all active:scale-95 flex items-center gap-1.5"
|
||||
>
|
||||
<Rocket className="w-3.5 h-3.5 text-black" />
|
||||
<span>BUY BM ALPHA</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Mobile Hamburger Button */}
|
||||
<div className="flex md:hidden items-center gap-2">
|
||||
<ThemeToggle />
|
||||
<a
|
||||
href="#how-to-buy"
|
||||
onClick={handleBuyClick}
|
||||
className="inline-flex items-center justify-center px-3.5 py-1.5 rounded-full text-xs font-bold font-display text-black bg-[#FF8C32] shadow-[0_0_12px_rgba(255,140,50,0.4)]"
|
||||
>
|
||||
BUY
|
||||
</a>
|
||||
<button
|
||||
id="mobile-menu-toggle"
|
||||
type="button"
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
className="p-2 rounded-lg text-slate-700 dark:text-gray-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 focus:outline-none"
|
||||
aria-label="Toggle navigation menu"
|
||||
>
|
||||
{mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Drawer Menu */}
|
||||
{mobileMenuOpen && (
|
||||
<div className="md:hidden bg-white/95 dark:bg-[#0a0c14]/95 backdrop-blur-xl border-b border-slate-200 dark:border-white/10 px-4 pt-3 pb-6 shadow-xl animate-in slide-in-from-top-3 duration-200">
|
||||
<div className="flex flex-col space-y-3">
|
||||
{navLinks.map((link) => (
|
||||
<a
|
||||
key={link.name}
|
||||
href={link.href}
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className="px-3 py-2 rounded-lg text-sm font-bold tracking-wider text-slate-800 dark:text-gray-300 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 transition-colors"
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
))}
|
||||
<div className="pt-2 flex flex-col gap-2">
|
||||
<a
|
||||
id="nav-buy-cta-mobile"
|
||||
href="#how-to-buy"
|
||||
onClick={handleBuyClick}
|
||||
className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-full font-display font-black text-sm text-black bg-[#FF8C32] hover:bg-[#E6761D] shadow-[0_0_20px_rgba(255,140,50,0.4)] text-center"
|
||||
>
|
||||
<Rocket className="w-4 h-4 text-black" />
|
||||
BUY BM ALPHA
|
||||
</a>
|
||||
<a
|
||||
href={YOUR_WHATSAPP_URL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-full font-display font-semibold text-xs text-white bg-emerald-600 hover:bg-emerald-500 text-center shadow-sm"
|
||||
>
|
||||
<MessageCircle className="w-3.5 h-3.5" />
|
||||
<span>JOIN WHATSAPP CHANNEL</span>
|
||||
</a>
|
||||
<a
|
||||
href={YOUR_DISCORD_URL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-full font-display font-semibold text-xs text-white bg-[#5865F2] hover:bg-[#4752C4] text-center shadow-sm"
|
||||
>
|
||||
<MessagesSquare className="w-3.5 h-3.5" />
|
||||
<span>JOIN DISCORD</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,134 @@
|
||||
import React from 'react';
|
||||
import { MessagesSquare, Youtube, HelpCircle, ArrowUpRight, MessageCircle, Twitter } from 'lucide-react';
|
||||
import { YOUR_DISCORD_URL, YOUR_WHATSAPP_URL, YOUR_X_URL, YOUR_YOUTUBE_URL, YOUR_BUY_LINK } from '../config';
|
||||
|
||||
export const SocialSection: React.FC = () => {
|
||||
const socialCards = [
|
||||
{
|
||||
id: 'social-whatsapp',
|
||||
title: 'WHATSAPP CHANNEL',
|
||||
subtitle: 'Exclusive updates, community invites & chat',
|
||||
cta: 'JOIN WHATSAPP',
|
||||
link: YOUR_WHATSAPP_URL,
|
||||
isExternal: true,
|
||||
badge: 'Invite Active',
|
||||
icon: MessageCircle,
|
||||
border: 'hover:border-emerald-500/60',
|
||||
glowColor: 'group-hover:shadow-[0_0_30px_rgba(16,185,129,0.35)]',
|
||||
iconBg: 'bg-emerald-500/15 text-emerald-500',
|
||||
tagColor: 'text-emerald-500 bg-emerald-500/10 border-emerald-500/30'
|
||||
},
|
||||
{
|
||||
id: 'social-discord',
|
||||
title: 'DISCORD SERVER',
|
||||
subtitle: 'Official BM Alpha Discord & community channels',
|
||||
cta: 'JOIN DISCORD',
|
||||
link: YOUR_DISCORD_URL,
|
||||
isExternal: true,
|
||||
badge: 'Active Server',
|
||||
icon: MessagesSquare,
|
||||
border: 'hover:border-[#5865F2]/60',
|
||||
glowColor: 'group-hover:shadow-[0_0_30px_rgba(88,101,242,0.35)]',
|
||||
iconBg: 'bg-[#5865F2]/15 text-[#5865F2]',
|
||||
tagColor: 'text-[#5865F2] bg-[#5865F2]/10 border-[#5865F2]/30'
|
||||
},
|
||||
{
|
||||
id: 'social-x',
|
||||
title: 'FOLLOW ON X',
|
||||
subtitle: 'Real-time memes, announcements & spaces',
|
||||
cta: 'FOLLOW @TheBMBlueprint',
|
||||
link: YOUR_X_URL,
|
||||
isExternal: true,
|
||||
badge: 'Official X',
|
||||
icon: Twitter,
|
||||
border: 'hover:border-[#FF8C32]/60',
|
||||
glowColor: 'group-hover:shadow-[0_0_30px_rgba(255,140,50,0.35)]',
|
||||
iconBg: 'bg-[#FF8C32]/15 text-[#FF8C32]',
|
||||
tagColor: 'text-[#FF8C32] bg-[#FF8C32]/10 border-[#FF8C32]/30'
|
||||
},
|
||||
{
|
||||
id: 'social-youtube',
|
||||
title: 'YOUTUBE',
|
||||
subtitle: 'Video releases, tutorials & community highlights',
|
||||
cta: 'SUBSCRIBE CHANNEL',
|
||||
link: YOUR_YOUTUBE_URL,
|
||||
isExternal: true,
|
||||
badge: 'Videos & Guides',
|
||||
icon: Youtube,
|
||||
border: 'hover:border-red-500/60',
|
||||
glowColor: 'group-hover:shadow-[0_0_30px_rgba(239,68,68,0.3)]',
|
||||
iconBg: 'bg-red-500/15 text-red-500',
|
||||
tagColor: 'text-red-500 bg-red-500/10 border-red-500/30'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="community" className="py-20 relative overflow-hidden">
|
||||
{/* Background ambient lighting */}
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-7xl h-64 bg-gradient-to-r from-[#FF8C32]/10 via-[#00D7FF]/10 to-[#FF8C32]/10 blur-3xl pointer-events-none -z-10" />
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
||||
{/* Section Header */}
|
||||
<div className="flex flex-col items-center text-center mb-12">
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-xs font-bold text-slate-700 dark:text-gray-300 mb-3 shadow-sm">
|
||||
<span className="w-2 h-2 rounded-full bg-[#00D7FF] animate-pulse" />
|
||||
COMMUNITY & SOCIAL HUBS
|
||||
</div>
|
||||
<h2 className="font-display text-3xl sm:text-4xl lg:text-5xl font-black text-slate-900 dark:text-white tracking-tight">
|
||||
CONNECT WITH THE <span className="text-gradient-brand">ALPHA MOVEMENT</span>
|
||||
</h2>
|
||||
<p className="mt-3 text-slate-600 dark:text-gray-400 max-w-xl text-sm sm:text-base font-medium">
|
||||
Join thousands of BirthdayMessaging members across WhatsApp, Discord, X, and YouTube.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 4 Social Cards Grid */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
|
||||
{socialCards.map((card) => {
|
||||
const Icon = card.icon;
|
||||
return (
|
||||
<a
|
||||
key={card.id}
|
||||
id={card.id}
|
||||
href={card.link}
|
||||
target={card.isExternal ? '_blank' : '_self'}
|
||||
rel={card.isExternal ? 'noopener noreferrer' : undefined}
|
||||
className={`group relative flex flex-col justify-between p-6 rounded-2xl bg-white/90 dark:bg-[#161b2b]/90 border border-slate-200 dark:border-white/10 ${card.border} transition-all duration-300 ${card.glowColor} transform hover:-translate-y-1 backdrop-blur-xl shadow-md dark:shadow-lg`}
|
||||
>
|
||||
<div>
|
||||
{/* Top Bar: Icon & Badge */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className={`p-3 rounded-xl ${card.iconBg} transition-transform duration-300 group-hover:scale-110 shadow-md`}>
|
||||
<Icon className="w-6 h-6" />
|
||||
</div>
|
||||
<span className={`text-[10px] font-bold px-2.5 py-1 rounded-full border ${card.tagColor} tracking-widest uppercase`}>
|
||||
{card.badge}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Title & Description */}
|
||||
<h3 className="font-display font-black text-xl text-slate-900 dark:text-white group-hover:text-[#00A6DB] dark:group-hover:text-[#00D7FF] transition-colors">
|
||||
{card.title}
|
||||
</h3>
|
||||
<p className="mt-2 text-xs sm:text-sm text-slate-600 dark:text-gray-400 leading-relaxed">
|
||||
{card.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Bottom CTA bar */}
|
||||
<div className="mt-6 pt-4 border-t border-slate-200 dark:border-white/5 flex items-center justify-between text-xs font-bold font-display text-slate-700 dark:text-gray-300 group-hover:text-slate-900 dark:group-hover:text-white transition-colors">
|
||||
<span>{card.cta}</span>
|
||||
<div className="w-7 h-7 rounded-lg bg-slate-100 dark:bg-white/5 group-hover:bg-[#FF8C32] flex items-center justify-center transition-colors">
|
||||
<ArrowUpRight className="w-4 h-4 text-slate-600 dark:text-gray-300 group-hover:text-black group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" />
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
import { Sun, Moon } from 'lucide-react';
|
||||
import { useTheme } from '../context/ThemeContext';
|
||||
|
||||
interface ThemeToggleProps {
|
||||
className?: string;
|
||||
showLabel?: boolean;
|
||||
}
|
||||
|
||||
export const ThemeToggle: React.FC<ThemeToggleProps> = ({ className = '', showLabel = false }) => {
|
||||
const { theme, toggleTheme } = useTheme();
|
||||
const isDark = theme === 'dark';
|
||||
|
||||
return (
|
||||
<button
|
||||
id="theme-toggle-btn"
|
||||
type="button"
|
||||
onClick={toggleTheme}
|
||||
aria-label={`Switch to ${isDark ? 'light' : 'dark'} mode`}
|
||||
title={`Switch to ${isDark ? 'light' : 'dark'} mode`}
|
||||
className={`relative inline-flex items-center justify-center gap-2 p-2 sm:px-3 sm:py-2 rounded-full border transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-[#FF8C32]/50 cursor-pointer ${
|
||||
isDark
|
||||
? 'bg-white/5 hover:bg-white/10 border-white/10 text-gray-300 hover:text-white shadow-[0_0_15px_rgba(0,0,0,0.5)]'
|
||||
: 'bg-slate-100 hover:bg-slate-200 border-slate-300 text-slate-700 hover:text-slate-900 shadow-sm'
|
||||
} ${className}`}
|
||||
>
|
||||
<div className="relative w-4 h-4 flex items-center justify-center">
|
||||
{isDark ? (
|
||||
<Sun className="w-4 h-4 text-[#FFA843] transition-transform duration-300 hover:rotate-45" />
|
||||
) : (
|
||||
<Moon className="w-4 h-4 text-[#00A6DB] transition-transform duration-300 -rotate-12 hover:rotate-0" />
|
||||
)}
|
||||
</div>
|
||||
{showLabel && (
|
||||
<span className="text-xs font-bold tracking-wider uppercase font-display select-none">
|
||||
{isDark ? 'LIGHT THEME' : 'DARK THEME'}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,148 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Copy, Check, ShieldCheck, Flame, Layers, Award, Sparkles, Cpu, Lock, ArrowUpRight } from 'lucide-react';
|
||||
import { CONTRACT_ADDRESS, TOKEN_INFO, TOKENOMICS_VERSION, YOUR_BUY_LINK } from '../config';
|
||||
import { triggerBirthdayConfetti } from '../utils/confetti';
|
||||
import { TokenomicsDashboard } from './TokenomicsDashboard';
|
||||
import coinImg from '../assets/images/bm_connect_coin_1787085516443.jpg';
|
||||
|
||||
export const TokenSection: React.FC = () => {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const handleCopy = () => {
|
||||
navigator.clipboard.writeText(CONTRACT_ADDRESS);
|
||||
setCopied(true);
|
||||
triggerBirthdayConfetti();
|
||||
setTimeout(() => setCopied(false), 3000);
|
||||
};
|
||||
|
||||
const specs = [
|
||||
{ label: 'Ticker', value: TOKEN_INFO.ticker, sub: 'Symbol', icon: Sparkles, color: 'text-[#FF8C32]' },
|
||||
{ label: 'Network', value: TOKEN_INFO.network, sub: 'Solana SPL Token', icon: Cpu, color: 'text-[#00D7FF]' },
|
||||
{ label: 'Launch', value: TOKEN_INFO.launchDateString, sub: 'Official Pool Launch', icon: Flame, color: 'text-[#FFA843]' },
|
||||
{ label: 'Total Supply', value: TOKEN_INFO.totalSupply, sub: '10 Billion Fixed', icon: Layers, color: 'text-white' },
|
||||
{ label: 'Buy / Sell Tax', value: TOKEN_INFO.buySellTax, sub: 'Zero Slippage Tax', icon: ShieldCheck, color: 'text-emerald-400' },
|
||||
{ label: 'Liquidity', value: TOKEN_INFO.liquidity, sub: 'Fair Launch Raydium', icon: Award, color: 'text-[#00D7FF]' },
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="token" className="py-24 relative overflow-hidden">
|
||||
{/* Background Glows */}
|
||||
<div className="absolute top-1/3 right-1/4 w-96 h-96 bg-[#FF8C32]/10 rounded-full blur-[130px] pointer-events-none -z-10" />
|
||||
<div className="absolute bottom-1/4 left-1/4 w-96 h-96 bg-[#00D7FF]/10 rounded-full blur-[130px] pointer-events-none -z-10" />
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
||||
{/* Section Header */}
|
||||
<div className="text-center max-w-3xl mx-auto mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-xs font-bold text-[#00A6DB] dark:text-[#00D7FF] mb-3 shadow-sm">
|
||||
<span className="w-2 h-2 rounded-full bg-[#00D7FF] animate-pulse" />
|
||||
TOKENOMICS & SPECIFICATIONS • {TOKENOMICS_VERSION}
|
||||
</div>
|
||||
|
||||
<h2
|
||||
id="token-section-heading"
|
||||
className="font-display text-4xl sm:text-5xl font-black text-slate-900 dark:text-white tracking-tight flex items-center justify-center flex-wrap gap-2 sm:gap-3"
|
||||
>
|
||||
<span><span className="text-gradient-brand">BM ALPHA</span> TOKENOMICS</span>
|
||||
<span className="text-xs sm:text-sm font-mono font-bold px-3 py-1 rounded-full bg-[#FF8C32]/15 text-[#FF8C32] border border-[#FF8C32]/30 align-middle">
|
||||
{TOKENOMICS_VERSION}
|
||||
</span>
|
||||
</h2>
|
||||
<p className="mt-4 text-slate-600 dark:text-gray-400 text-base sm:text-lg font-medium">
|
||||
Transparent, community-focused, and 100% fixed 10 Billion token distribution built on Solana.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Main Token Hub Card */}
|
||||
<div className="relative rounded-3xl bg-white/90 dark:bg-[#161b2b]/90 border border-slate-200 dark:border-white/10 p-6 sm:p-10 shadow-xl dark:shadow-2xl backdrop-blur-xl mb-12">
|
||||
|
||||
{/* Top Token Overview Bar */}
|
||||
<div className="flex flex-col lg:flex-row items-center justify-between gap-8 pb-10 border-b border-slate-200 dark:border-white/5">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="relative w-16 h-16 sm:w-20 sm:h-20 rounded-full p-1 bg-gradient-to-tr from-[#FF8C32] to-[#00D7FF] shrink-0 shadow-[0_0_25px_rgba(255,140,50,0.4)]">
|
||||
<div className="w-full h-full rounded-full overflow-hidden bg-slate-100 dark:bg-[#0a0c14]">
|
||||
<img src={coinImg} alt="BM Alpha" className="w-full h-full object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<h3 className="font-display text-2xl sm:text-3xl font-black text-slate-900 dark:text-white">
|
||||
BM ALPHA
|
||||
</h3>
|
||||
<span className="px-2.5 py-0.5 rounded-full bg-[#FF8C32]/15 text-[#FF8C32] border border-[#FF8C32]/30 font-mono text-xs font-bold">
|
||||
$BMALPHA
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-slate-500 dark:text-gray-400 text-xs sm:text-sm mt-1">
|
||||
Solana Program Library (SPL) Token • BirthdayMessaging Ecosystem
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contract Address Box & Copy Action */}
|
||||
<div className="w-full lg:w-auto flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
|
||||
<div className="flex flex-col px-4 py-2.5 rounded-xl bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 min-w-[260px]">
|
||||
<span className="text-[9px] font-bold text-slate-500 dark:text-gray-400 uppercase tracking-widest">
|
||||
Contract Address
|
||||
</span>
|
||||
<span className="font-mono text-xs sm:text-sm font-semibold text-slate-800 dark:text-gray-200 truncate">
|
||||
{CONTRACT_ADDRESS}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
id="copy-contract-btn"
|
||||
type="button"
|
||||
onClick={handleCopy}
|
||||
className="flex items-center justify-center gap-2 px-6 py-3.5 rounded-full font-display font-extrabold text-xs sm:text-sm text-black bg-[#FF8C32] hover:bg-[#E6761D] shadow-[0_0_20px_rgba(255,140,50,0.35)] transition-all active:scale-95 whitespace-nowrap cursor-pointer"
|
||||
>
|
||||
{copied ? (
|
||||
<>
|
||||
<Check className="w-4 h-4 text-black" />
|
||||
<span>COPIED TO CLIPBOARD!</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="w-4 h-4 text-black" />
|
||||
<span>COPY CONTRACT ADDRESS</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 6 Metric Specs Cards */}
|
||||
<div className="grid grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 my-10">
|
||||
{specs.map((item, index) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="p-5 rounded-2xl bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:border-[#00D7FF]/40 transition-all hover:bg-slate-100 dark:hover:bg-white/[0.08] group"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-gray-400">
|
||||
{item.label}
|
||||
</span>
|
||||
<Icon className={`w-4 h-4 ${item.color} group-hover:scale-110 transition-transform`} />
|
||||
</div>
|
||||
<div className={`font-display text-lg sm:text-2xl font-black ${item.label === 'Total Supply' ? 'text-slate-900 dark:text-white' : item.color}`}>
|
||||
{item.value}
|
||||
</div>
|
||||
<div className="text-[11px] font-medium text-slate-500 dark:text-gray-400 mt-1">
|
||||
{item.sub}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Interactive Tokenomics Dashboard Component */}
|
||||
<TokenomicsDashboard />
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,375 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Users, Award, Flame, Gift, ShieldCheck, Layers, PieChart, Info, CheckCircle2, TrendingUp, Sparkles, HelpCircle, FileText } from 'lucide-react';
|
||||
import { TOKEN_DISTRIBUTION, TOKEN_INFO, TOKENOMICS_VERSION } from '../config';
|
||||
|
||||
interface TokenomicsDashboardProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const TokenomicsDashboard: React.FC<TokenomicsDashboardProps> = ({ className = '' }) => {
|
||||
const [activeSegment, setActiveSegment] = useState<string | null>(null);
|
||||
|
||||
const iconMap: Record<string, React.ElementType> = {
|
||||
Users: Users,
|
||||
Award: Award,
|
||||
Flame: Flame,
|
||||
Gift: Gift,
|
||||
ShieldCheck: ShieldCheck,
|
||||
Layers: Layers
|
||||
};
|
||||
|
||||
const selectedItem = TOKEN_DISTRIBUTION.find((item) => item.id === activeSegment) || TOKEN_DISTRIBUTION[0];
|
||||
|
||||
// Calculate SVG Donut chart paths
|
||||
let cumulativeAngle = 0;
|
||||
const radius = 80;
|
||||
const strokeWidth = 26;
|
||||
const center = 110;
|
||||
const circumference = 2 * Math.PI * radius;
|
||||
|
||||
return (
|
||||
<div id="tokenomics-dashboard" className={`w-full ${className}`}>
|
||||
|
||||
{/* Dashboard Section Header */}
|
||||
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-8 pb-6 border-b border-slate-200 dark:border-white/10">
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#FF8C32]/10 text-[#FF8C32] border border-[#FF8C32]/30 text-xs font-bold uppercase tracking-wider mb-2">
|
||||
<PieChart className="w-3.5 h-3.5" />
|
||||
<span>BM ALPHA TOKENOMICS {TOKENOMICS_VERSION}</span>
|
||||
</div>
|
||||
<h3 className="font-display text-2xl sm:text-3xl font-black text-slate-900 dark:text-white tracking-tight flex items-center flex-wrap gap-2.5">
|
||||
<span>PROPOSED TOKEN DISTRIBUTION</span>
|
||||
<span className="text-xs font-mono font-bold px-2.5 py-0.5 rounded-md bg-[#00D7FF]/15 text-[#00A6DB] dark:text-[#00D7FF] border border-[#00D7FF]/30">
|
||||
{TOKENOMICS_VERSION}
|
||||
</span>
|
||||
</h3>
|
||||
<p className="text-slate-600 dark:text-gray-400 text-sm mt-1">
|
||||
Total Proposed Supply: <strong className="text-slate-900 dark:text-white font-mono">{TOKEN_INFO.totalSupply}</strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Total Supply & Version Badge */}
|
||||
<div className="flex items-center gap-3 p-3 rounded-xl bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 self-start md:self-auto">
|
||||
<div className="w-10 h-10 rounded-lg bg-gradient-to-tr from-[#FF8C32] to-[#00D7FF] flex items-center justify-center p-0.5 shadow-md">
|
||||
<div className="w-full h-full bg-white dark:bg-[#0a0c14] rounded-[6px] flex items-center justify-center">
|
||||
<Sparkles className="w-4 h-4 text-[#FF8C32]" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[10px] uppercase font-bold text-slate-500 dark:text-gray-400 tracking-wider">
|
||||
Total Proposed Pool
|
||||
</span>
|
||||
<span className="text-[9px] font-mono font-black text-[#FF8C32]">
|
||||
{TOKENOMICS_VERSION}
|
||||
</span>
|
||||
</div>
|
||||
<div className="font-mono text-sm font-black text-slate-900 dark:text-white">
|
||||
10,000,000,000 BMALPHA
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Visualizer: Donut Chart & Active Allocation Spotlight */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center p-6 sm:p-8 rounded-2xl bg-slate-50/80 dark:bg-white/[0.03] border border-slate-200 dark:border-white/10 mb-10">
|
||||
|
||||
{/* Donut Chart Visualizer */}
|
||||
<div className="lg:col-span-5 flex flex-col items-center justify-center relative">
|
||||
<div className="relative w-[230px] h-[230px] sm:w-[260px] sm:h-[260px]">
|
||||
<svg viewBox="0 0 220 220" className="w-full h-full transform -rotate-90">
|
||||
{TOKEN_DISTRIBUTION.map((item) => {
|
||||
const strokeDasharray = `${(item.percentage / 100) * circumference} ${circumference}`;
|
||||
const strokeDashoffset = -((cumulativeAngle / 100) * circumference);
|
||||
cumulativeAngle += item.percentage;
|
||||
const isHovered = activeSegment === item.id;
|
||||
|
||||
return (
|
||||
<circle
|
||||
key={item.id}
|
||||
cx={center}
|
||||
cy={center}
|
||||
r={radius}
|
||||
fill="transparent"
|
||||
stroke={item.color}
|
||||
strokeWidth={isHovered ? strokeWidth + 6 : strokeWidth}
|
||||
strokeDasharray={strokeDasharray}
|
||||
strokeDashoffset={strokeDashoffset}
|
||||
strokeLinecap="butt"
|
||||
className="cursor-pointer transition-all duration-300 hover:opacity-100"
|
||||
style={{
|
||||
opacity: activeSegment ? (isHovered ? 1 : 0.4) : 0.9,
|
||||
filter: isHovered ? `drop-shadow(0 0 12px ${item.color}80)` : 'none',
|
||||
}}
|
||||
onMouseEnter={() => setActiveSegment(item.id)}
|
||||
onMouseLeave={() => setActiveSegment(null)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</svg>
|
||||
|
||||
{/* Donut Center Dynamic Details */}
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center text-center p-4 pointer-events-none">
|
||||
<span className="text-[10px] font-bold uppercase tracking-wider text-slate-500 dark:text-gray-400">
|
||||
{selectedItem ? selectedItem.category : 'Hover to Explore'}
|
||||
</span>
|
||||
<span className="font-display font-black text-3xl sm:text-4xl text-slate-900 dark:text-white mt-0.5">
|
||||
{selectedItem.percentage}%
|
||||
</span>
|
||||
<span className="font-mono text-xs font-bold text-[#FF8C32] dark:text-[#FFA843]">
|
||||
{selectedItem.shortAmount}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-[11px] text-slate-500 dark:text-gray-400 mt-4 text-center">
|
||||
Tap or hover any slice to inspect token amounts & purpose
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Active Allocation Detail Card */}
|
||||
<div className="lg:col-span-7 flex flex-col justify-between h-full space-y-4">
|
||||
<div className="p-5 sm:p-6 rounded-2xl bg-white dark:bg-[#161b2b] border border-slate-200 dark:border-white/10 shadow-md">
|
||||
<div className="flex items-center justify-between gap-3 mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="w-10 h-10 rounded-xl flex items-center justify-center text-white shadow-sm"
|
||||
style={{ backgroundColor: selectedItem.color }}
|
||||
>
|
||||
{React.createElement(iconMap[selectedItem.iconName] || Users, { className: 'w-5 h-5 text-white' })}
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-display font-black text-xl text-slate-900 dark:text-white">
|
||||
{selectedItem.category}
|
||||
</h4>
|
||||
<span className="text-xs font-mono font-bold text-slate-500 dark:text-gray-400">
|
||||
{selectedItem.amount} BM Alpha Tokens
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="px-3.5 py-1.5 rounded-full font-display font-black text-base border"
|
||||
style={{
|
||||
color: selectedItem.color,
|
||||
borderColor: `${selectedItem.color}50`,
|
||||
backgroundColor: `${selectedItem.color}15`,
|
||||
}}
|
||||
>
|
||||
{selectedItem.percentage}%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Purpose Highlight */}
|
||||
<div className="pt-3 border-t border-slate-200 dark:border-white/5">
|
||||
<div className="text-[10px] font-bold uppercase tracking-widest text-slate-500 dark:text-gray-400 mb-1 flex items-center gap-1.5">
|
||||
<Info className="w-3.5 h-3.5" />
|
||||
PURPOSE OF THIS ALLOCATION
|
||||
</div>
|
||||
<p className="text-slate-800 dark:text-gray-200 text-sm sm:text-base font-medium leading-relaxed">
|
||||
{selectedItem.purpose}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Quick Metrics Bar */}
|
||||
<div className="grid grid-cols-2 gap-3 mt-4 pt-3 border-t border-slate-200 dark:border-white/5 text-xs">
|
||||
<div className="p-2.5 rounded-lg bg-slate-50 dark:bg-white/5">
|
||||
<div className="text-[10px] text-slate-500 dark:text-gray-400 font-medium">Exact Allocation</div>
|
||||
<div className="font-mono font-bold text-slate-900 dark:text-white mt-0.5">{selectedItem.amount}</div>
|
||||
</div>
|
||||
<div className="p-2.5 rounded-lg bg-slate-50 dark:bg-white/5">
|
||||
<div className="text-[10px] text-slate-500 dark:text-gray-400 font-medium">Share of 10B Total</div>
|
||||
<div className="font-mono font-bold text-slate-900 dark:text-white mt-0.5">{selectedItem.shortAmount} ({selectedItem.percentage}%)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Segment Selector Pills */}
|
||||
<div className="flex flex-wrap gap-2 pt-2">
|
||||
{TOKEN_DISTRIBUTION.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
type="button"
|
||||
onClick={() => setActiveSegment(item.id)}
|
||||
onMouseEnter={() => setActiveSegment(item.id)}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all cursor-pointer flex items-center gap-2 border ${
|
||||
activeSegment === item.id
|
||||
? 'bg-slate-900 text-white dark:bg-white dark:text-black border-transparent shadow-md'
|
||||
: 'bg-white dark:bg-white/5 text-slate-700 dark:text-gray-300 border-slate-200 dark:border-white/10 hover:border-slate-400'
|
||||
}`}
|
||||
>
|
||||
<span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: item.color }} />
|
||||
<span>{item.category}</span>
|
||||
<span className="text-[10px] opacity-75 font-mono">({item.percentage}%)</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Multi-Segment Allocation Bar */}
|
||||
<div className="mb-10">
|
||||
<div className="flex items-center justify-between text-xs font-bold uppercase tracking-wider text-slate-600 dark:text-gray-300 mb-2">
|
||||
<span>Overall Allocation Breakdown</span>
|
||||
<span className="font-mono text-[#00A6DB] dark:text-[#00D7FF]">100% Fully Accounted</span>
|
||||
</div>
|
||||
<div className="h-4 w-full rounded-full bg-slate-200 dark:bg-white/5 overflow-hidden flex border border-slate-300 dark:border-white/10 shadow-inner">
|
||||
{TOKEN_DISTRIBUTION.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
style={{ width: `${item.percentage}%`, backgroundColor: item.color }}
|
||||
className="h-full cursor-pointer hover:opacity-80 transition-all relative group"
|
||||
onMouseEnter={() => setActiveSegment(item.id)}
|
||||
onClick={() => setActiveSegment(item.id)}
|
||||
title={`${item.category}: ${item.percentage}% (${item.shortAmount})`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 6 Allocation Cards Grid */}
|
||||
<div className="mb-12">
|
||||
<h4 className="font-display text-lg font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<TrendingUp className="w-4 h-4 text-[#FF8C32]" />
|
||||
<span>PROPOSED ALLOCATION BREAKDOWN</span>
|
||||
</h4>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5">
|
||||
{TOKEN_DISTRIBUTION.map((item) => {
|
||||
const Icon = iconMap[item.iconName] || Users;
|
||||
const isSelected = activeSegment === item.id;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
id={`card-${item.id}`}
|
||||
onMouseEnter={() => setActiveSegment(item.id)}
|
||||
onClick={() => setActiveSegment(item.id)}
|
||||
className={`group p-5 rounded-2xl bg-white dark:bg-[#161b2b] border transition-all duration-300 cursor-pointer shadow-sm hover:shadow-md ${
|
||||
isSelected
|
||||
? 'border-[#FF8C32] dark:border-[#00D7FF] shadow-[0_0_20px_rgba(255,140,50,0.2)] transform -translate-y-1'
|
||||
: 'border-slate-200 dark:border-white/10 hover:border-slate-300 dark:hover:border-white/20'
|
||||
}`}
|
||||
>
|
||||
{/* Top Bar: Icon, Title & Percentage */}
|
||||
<div className="flex items-start justify-between gap-3 mb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="w-10 h-10 rounded-xl flex items-center justify-center text-white shadow-sm shrink-0"
|
||||
style={{ backgroundColor: item.color }}
|
||||
>
|
||||
<Icon className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="font-display font-black text-base text-slate-900 dark:text-white group-hover:text-[#FF8C32] transition-colors">
|
||||
{item.category}
|
||||
</h5>
|
||||
<span className="font-mono text-xs font-bold text-slate-500 dark:text-gray-400">
|
||||
{item.shortAmount}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span
|
||||
className="font-display font-black text-xl px-2.5 py-0.5 rounded-full border"
|
||||
style={{
|
||||
color: item.color,
|
||||
borderColor: `${item.color}40`,
|
||||
backgroundColor: `${item.color}15`,
|
||||
}}
|
||||
>
|
||||
{item.percentage}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Progress bar inside card */}
|
||||
<div className="w-full bg-slate-100 dark:bg-white/5 h-2 rounded-full overflow-hidden my-3">
|
||||
<div
|
||||
className="h-full rounded-full transition-all duration-500"
|
||||
style={{ width: `${item.percentage * 2.5}%`, backgroundColor: item.color }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Exact token amount */}
|
||||
<div className="flex items-center justify-between text-xs font-mono text-slate-600 dark:text-gray-400 py-1.5 border-b border-slate-100 dark:border-white/5">
|
||||
<span className="text-[11px] font-sans font-medium text-slate-500">Token Count:</span>
|
||||
<span className="font-bold text-slate-900 dark:text-white">{item.amount}</span>
|
||||
</div>
|
||||
|
||||
{/* Purpose text */}
|
||||
<p className="mt-2.5 text-xs text-slate-600 dark:text-gray-300 leading-relaxed font-medium">
|
||||
{item.purpose}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Purpose of Each Allocation Section: Deep-Dive Accordion / Guidance */}
|
||||
<div className="p-6 sm:p-8 rounded-2xl bg-gradient-to-br from-slate-50 via-white to-slate-50 dark:from-[#161b2b] dark:via-[#161b2b]/80 dark:to-[#0a0c14] border border-slate-200 dark:border-white/10 shadow-lg">
|
||||
|
||||
<div className="flex items-center gap-3 mb-6 pb-4 border-b border-slate-200 dark:border-white/10">
|
||||
<div className="w-10 h-10 rounded-xl bg-[#00D7FF]/15 text-[#00A6DB] dark:text-[#00D7FF] border border-[#00D7FF]/30 flex items-center justify-center shrink-0">
|
||||
<CheckCircle2 className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-display font-black text-xl text-slate-900 dark:text-white">
|
||||
PURPOSE OF EACH ALLOCATION
|
||||
</h4>
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-gray-400 font-medium">
|
||||
How the proposed 10B supply strategically supports long-term growth and decentralization
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{TOKEN_DISTRIBUTION.map((item) => (
|
||||
<div
|
||||
key={`purpose-${item.id}`}
|
||||
className="p-4 rounded-xl bg-white dark:bg-white/5 border border-slate-200 dark:border-white/5 flex items-start gap-3.5 hover:border-slate-300 dark:hover:border-white/15 transition-colors"
|
||||
>
|
||||
<span
|
||||
className="w-3 h-3 rounded-full mt-1 shrink-0"
|
||||
style={{ backgroundColor: item.color }}
|
||||
/>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-display font-black text-sm text-slate-900 dark:text-white">
|
||||
{item.category}
|
||||
</span>
|
||||
<span
|
||||
className="text-[10px] font-mono font-bold px-2 py-0.5 rounded-full"
|
||||
style={{
|
||||
color: item.color,
|
||||
backgroundColor: `${item.color}15`,
|
||||
}}
|
||||
>
|
||||
{item.percentage}% ({item.shortAmount})
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs sm:text-sm text-slate-600 dark:text-gray-300 mt-1 leading-relaxed">
|
||||
{item.purpose}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Version Governance Note */}
|
||||
<div className="mt-6 pt-4 border-t border-slate-200 dark:border-white/5 flex flex-col sm:flex-row sm:items-center justify-between gap-2 text-[11px] text-slate-500 dark:text-gray-400">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[#FF8C32]" />
|
||||
<span><strong>Specification:</strong> BM Alpha Tokenomics {TOKENOMICS_VERSION}</span>
|
||||
</div>
|
||||
<div>
|
||||
Proposed distribution subject to community input & future governance iterations.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,167 @@
|
||||
import React from 'react';
|
||||
import { Users, Sparkles, Zap, Shield, Gift, Heart } from 'lucide-react';
|
||||
import globalNetImg from '../assets/images/global_network_1786969619613.jpg';
|
||||
import giftBoxImg from '../assets/images/futuristic_gift_box_1786969590300.jpg';
|
||||
import cakeImg from '../assets/images/holographic_cake_1786969603927.jpg';
|
||||
|
||||
export const WhySection: React.FC = () => {
|
||||
const cards = [
|
||||
{
|
||||
id: 'why-community',
|
||||
title: 'COMMUNITY',
|
||||
tag: 'Global Family',
|
||||
description: 'Built around a growing community that wants to participate, share, and have fun.',
|
||||
points: ['Decentralized celebrations', 'Worldwide member milestones', 'Community airdrops & rewards'],
|
||||
image: globalNetImg,
|
||||
icon: Users,
|
||||
accentColor: 'text-[#00D7FF]',
|
||||
badgeBg: 'bg-[#00D7FF]/15 text-[#00D7FF] border-[#00D7FF]/30',
|
||||
glow: 'group-hover:shadow-[0_0_35px_rgba(0,215,255,0.25)]',
|
||||
borderHover: 'group-hover:border-[#00D7FF]/60'
|
||||
},
|
||||
{
|
||||
id: 'why-memes',
|
||||
title: 'MEMES',
|
||||
tag: 'Pure Energy',
|
||||
description: 'Internet culture meets BirthdayMessaging energy.',
|
||||
points: ['Viral crypto culture', 'Continuous meme contests', 'Unbox the Alpha every day'],
|
||||
image: giftBoxImg,
|
||||
icon: Sparkles,
|
||||
accentColor: 'text-[#FF8C32]',
|
||||
badgeBg: 'bg-[#FF8C32]/15 text-[#FF8C32] border-[#FF8C32]/30',
|
||||
glow: 'group-hover:shadow-[0_0_35px_rgba(255,140,50,0.3)]',
|
||||
borderHover: 'group-hover:border-[#FF8C32]/60'
|
||||
},
|
||||
{
|
||||
id: 'why-solana',
|
||||
title: 'ON SOLANA',
|
||||
tag: 'Lightning Chain',
|
||||
description: 'Fast, low-cost transactions powered by the Solana ecosystem.',
|
||||
points: ['Sub-cent transaction fees', '400ms block confirmations', 'Instant Raydium & Jupiter liquidity'],
|
||||
image: cakeImg,
|
||||
icon: Zap,
|
||||
accentColor: 'text-[#00D7FF]',
|
||||
badgeBg: 'bg-white/10 text-white border-white/20',
|
||||
glow: 'group-hover:shadow-[0_0_35px_rgba(0,215,255,0.25)]',
|
||||
borderHover: 'group-hover:border-[#00D7FF]/60'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="why-bm-alpha" className="py-24 relative overflow-hidden bg-transparent">
|
||||
{/* Subtle background divider light */}
|
||||
<div className="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
<div className="absolute bottom-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
||||
{/* Section Header */}
|
||||
<div className="text-center max-w-3xl mx-auto mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-xs font-bold text-[#FF8C32] mb-4 shadow-sm">
|
||||
<Gift className="w-3.5 h-3.5 text-[#FF8C32]" />
|
||||
THE CONCEPT
|
||||
</div>
|
||||
|
||||
<h2
|
||||
id="why-bm-alpha-heading"
|
||||
className="font-display text-4xl sm:text-5xl font-black text-slate-900 dark:text-white tracking-tight"
|
||||
>
|
||||
WHY <span className="text-gradient-brand">BM ALPHA?</span>
|
||||
</h2>
|
||||
|
||||
<p
|
||||
id="why-bm-alpha-copy"
|
||||
className="mt-5 text-lg sm:text-xl text-slate-700 dark:text-gray-300 font-semibold leading-relaxed"
|
||||
>
|
||||
BM Alpha is more than a meme. It's the community's front door into the next chapter of{' '}
|
||||
<span className="text-[#00A6DB] dark:text-[#00D7FF] font-bold">BirthdayMessaging</span>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 3 Main Feature Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{cards.map((card) => {
|
||||
const Icon = card.icon;
|
||||
return (
|
||||
<div
|
||||
key={card.id}
|
||||
id={card.id}
|
||||
className={`group relative flex flex-col rounded-2xl bg-white/90 dark:bg-[#161b2b]/90 border border-slate-200 dark:border-white/10 overflow-hidden transition-all duration-500 ${card.borderHover} ${card.glow} hover:-translate-y-1.5 backdrop-blur-xl shadow-md dark:shadow-lg`}
|
||||
>
|
||||
{/* Artwork Graphic Container */}
|
||||
<div className="relative h-64 sm:h-72 w-full overflow-hidden bg-slate-900/10 dark:bg-black/50">
|
||||
<img
|
||||
src={card.image}
|
||||
alt={card.title}
|
||||
className="w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-700 opacity-90 group-hover:opacity-100"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-white/95 via-white/40 dark:from-[#161b2b] dark:via-[#161b2b]/30 to-transparent" />
|
||||
|
||||
{/* Floating Tag Badge */}
|
||||
<div className="absolute top-4 right-4">
|
||||
<span className={`text-[10px] font-extrabold px-3 py-1 rounded-full border backdrop-blur-md ${card.badgeBg} uppercase tracking-wider`}>
|
||||
{card.tag}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Icon Emblem */}
|
||||
<div className="absolute bottom-4 left-6 w-12 h-12 rounded-2xl bg-white/95 dark:bg-[#0a0c14]/95 border border-slate-200 dark:border-white/10 p-2.5 flex items-center justify-center shadow-lg">
|
||||
<Icon className={`w-6 h-6 ${card.accentColor}`} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card Content Body */}
|
||||
<div className="p-6 sm:p-7 flex-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<h3 className="font-display font-black text-2xl text-slate-900 dark:text-white tracking-tight group-hover:text-[#FF8C32] transition-colors">
|
||||
{card.title}
|
||||
</h3>
|
||||
|
||||
<p className="mt-3 text-sm sm:text-base text-slate-600 dark:text-gray-300 leading-relaxed font-medium">
|
||||
{card.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature Highlights */}
|
||||
<div className="mt-6 pt-5 border-t border-slate-200 dark:border-white/5 space-y-2">
|
||||
{card.points.map((point, idx) => (
|
||||
<div key={idx} className="flex items-center gap-2 text-xs font-medium text-slate-600 dark:text-gray-400">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-[#FF8C32]" />
|
||||
<span>{point}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Supporting BirthdayMessaging Ecosystem Callout */}
|
||||
<div className="mt-12 p-6 sm:p-8 rounded-2xl bg-white/90 dark:bg-[#161b2b]/90 border border-slate-200 dark:border-white/10 flex flex-col sm:flex-row items-center justify-between gap-6 backdrop-blur-xl shadow-md dark:shadow-lg">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-[#FF8C32]/15 border border-[#FF8C32]/30 flex items-center justify-center shrink-0">
|
||||
<Heart className="w-6 h-6 text-[#FF8C32]" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-display font-bold text-slate-900 dark:text-white text-base sm:text-lg">
|
||||
The BirthdayMessaging Ecosystem
|
||||
</h4>
|
||||
<p className="text-slate-600 dark:text-gray-400 text-xs sm:text-sm mt-0.5 font-medium">
|
||||
Connecting millions celebrating birthdays globally through joyful Web3 utility and viral culture.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
href="#token"
|
||||
className="shrink-0 px-5 py-2.5 rounded-full text-xs font-bold font-display text-slate-800 dark:text-white bg-slate-100 hover:bg-[#FF8C32] dark:bg-white/10 dark:hover:bg-[#FF8C32] hover:text-black dark:hover:text-black border border-slate-300 dark:border-white/10 transition-colors"
|
||||
>
|
||||
VIEW TOKENOMICS
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user