1059 lines
49 KiB
TypeScript
1059 lines
49 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import { motion, AnimatePresence } from 'motion/react';
|
||
import {
|
||
Sparkles,
|
||
Clock,
|
||
Coins,
|
||
ShieldCheck,
|
||
Gift,
|
||
Flame,
|
||
Award,
|
||
Crown,
|
||
CheckCircle2,
|
||
ExternalLink,
|
||
ChevronRight,
|
||
Package,
|
||
Zap,
|
||
Lock,
|
||
Globe,
|
||
Users,
|
||
Vote,
|
||
Star,
|
||
Check,
|
||
ArrowRight,
|
||
Eye,
|
||
Sliders,
|
||
DollarSign,
|
||
TrendingUp,
|
||
Gift as GiftIcon
|
||
} from 'lucide-react';
|
||
import { SectionHeading } from '../ui/SectionHeading';
|
||
import { GlassCard } from '../ui/GlassCard';
|
||
import { Badge } from '../ui/Badge';
|
||
import { Button } from '../ui/Button';
|
||
|
||
// Import generated image of the 3 coins
|
||
import coinShowcaseImg from '../../assets/images/birthday_memecoins_1785932159451.jpg';
|
||
|
||
interface MemeCoinLaunchSectionProps {
|
||
onOpenWaitlist: () => void;
|
||
onOpenTokenomics: () => void;
|
||
}
|
||
|
||
export const MemeCoinLaunchSection: React.FC<MemeCoinLaunchSectionProps> = ({
|
||
onOpenWaitlist,
|
||
onOpenTokenomics
|
||
}) => {
|
||
const [activeTab, setActiveTab] = useState<'material' | 'non-material'>('material');
|
||
|
||
// Custom Investment Calculator State
|
||
const [customAmount, setCustomAmount] = useState<number>(25); // Default micro investment $25
|
||
const quickAmounts = [1, 5, 10, 25, 50, 100, 250, 1000, 5000];
|
||
|
||
// Countdown timer calculation targeting November 18, 2026 at 10:00 PM GMT
|
||
const [timeLeft, setTimeLeft] = useState({
|
||
days: 0,
|
||
hours: 0,
|
||
minutes: 0,
|
||
seconds: 0
|
||
});
|
||
|
||
useEffect(() => {
|
||
const launchDate = new Date('2026-11-18T22:00:00Z').getTime();
|
||
|
||
const updateTimer = () => {
|
||
const now = new Date().getTime();
|
||
const difference = launchDate - now;
|
||
|
||
if (difference > 0) {
|
||
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
|
||
const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||
const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
|
||
const seconds = Math.floor((difference % (1000 * 60)) / 1000);
|
||
|
||
setTimeLeft({ days, hours, minutes, seconds });
|
||
} else {
|
||
setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
|
||
}
|
||
};
|
||
|
||
updateTimer();
|
||
const interval = setInterval(updateTimer, 1000);
|
||
return () => clearInterval(interval);
|
||
}, []);
|
||
|
||
// Calculation function for custom token amount and unlocked perks based on custom dollar input
|
||
const calculateInvestmentDetails = (amount: number) => {
|
||
const safeAmount = Math.max(1, isNaN(amount) ? 1 : amount);
|
||
|
||
// Base rate: 1,000 $SX per $1
|
||
// Volume bonus tiers:
|
||
// $1 - $49: standard rate (1,000 $SX / $)
|
||
// $50 - $249: +10% bonus (1,100 $SX / $)
|
||
// $250 - $999: +20% bonus (1,200 $SX / $)
|
||
// $1,000 - $4,999: +50% bonus (1,500 $SX / $)
|
||
// $5,000+: +80% bonus (1,800 $SX / $)
|
||
let rate = 1000;
|
||
let bonusPercentage = 0;
|
||
|
||
if (safeAmount >= 5000) {
|
||
rate = 1800;
|
||
bonusPercentage = 80;
|
||
} else if (safeAmount >= 1000) {
|
||
rate = 1500;
|
||
bonusPercentage = 50;
|
||
} else if (safeAmount >= 250) {
|
||
rate = 1200;
|
||
bonusPercentage = 20;
|
||
} else if (safeAmount >= 50) {
|
||
rate = 1100;
|
||
bonusPercentage = 10;
|
||
}
|
||
|
||
const totalTokens = safeAmount * rate;
|
||
|
||
// Material Perks unlocked
|
||
const materialPerks: string[] = [
|
||
`${totalTokens.toLocaleString()} $SX Meme Coin Launch Allocation`,
|
||
`Official Digital Supporter Badge & Certificate`
|
||
];
|
||
|
||
if (safeAmount >= 50) {
|
||
const microAppsCount = Math.min(23, Math.floor(safeAmount / 25));
|
||
materialPerks.push(`${microAppsCount} Free US$17 Marketing MicroApps of choice`);
|
||
}
|
||
|
||
if (safeAmount >= 250) {
|
||
const coinCount = safeAmount >= 1000 ? 'Full 3-Coin Set (Alpha, Beta, Gamma)' : '1 Minted Physical Collector Coin';
|
||
materialPerks.push(`${coinCount} with Worldwide Shipping`);
|
||
}
|
||
|
||
if (safeAmount >= 1000) {
|
||
materialPerks.push('Lifetime Unlimited Pass to ALL 23 US$17 MicroApps');
|
||
materialPerks.push('Software Revenue Buyback Dividend Pool Access');
|
||
materialPerks.push('Physical Founders Swag Box (Team Hoodie & Hardware Wallet Case)');
|
||
}
|
||
|
||
if (safeAmount >= 5000) {
|
||
materialPerks.push('Numbered Serialized Gold-Plated 3-Coin Master Set');
|
||
materialPerks.push('Permanent Enterprise Pass for all future BM Connect tools');
|
||
}
|
||
|
||
// Non-Material Perks unlocked
|
||
const nonMaterialPerks: string[] = [
|
||
'Supporter Discord Role & Lounge Access',
|
||
'Whitelisted Presale Launch Access',
|
||
'Public Wall of Supporters Listing'
|
||
];
|
||
|
||
if (safeAmount >= 50) {
|
||
nonMaterialPerks.push('Priority Software Update Notifications');
|
||
}
|
||
|
||
if (safeAmount >= 250) {
|
||
nonMaterialPerks.push('Private Beta Testing Access for All 30+ Core Apps');
|
||
nonMaterialPerks.push('Insider Alpha Telegram Channel Entry');
|
||
nonMaterialPerks.push('Quarterly Founders AMA Voice Calls');
|
||
}
|
||
|
||
if (safeAmount >= 1000) {
|
||
nonMaterialPerks.push('VIP Founder Discord & Direct Developer Chat Access');
|
||
nonMaterialPerks.push('On-Chain Founder Wall Permanent Name Inscription');
|
||
nonMaterialPerks.push('Treasury Governance Voting Rights');
|
||
}
|
||
|
||
if (safeAmount >= 5000) {
|
||
nonMaterialPerks.push('Treasury Advisory Board Seat & Direct Founder Line');
|
||
nonMaterialPerks.push('Protocol Governance Veto & Acquisition Proposal Voting');
|
||
nonMaterialPerks.push('Exclusive VIP Annual Retreat & Physical Event Passes');
|
||
}
|
||
|
||
// Calculate next milestone progress
|
||
let nextMilestoneAmount = 50;
|
||
let nextMilestoneName = 'Supporter Tier ($50)';
|
||
let nextMilestonePerk = 'Unlock 2 Free US$17 MicroApps';
|
||
|
||
if (safeAmount >= 50 && safeAmount < 250) {
|
||
nextMilestoneAmount = 250;
|
||
nextMilestoneName = 'Enthusiast Tier ($250)';
|
||
nextMilestonePerk = 'Unlock 1 Physical Minted Collector Coin & Beta Access';
|
||
} else if (safeAmount >= 250 && safeAmount < 1000) {
|
||
nextMilestoneAmount = 1000;
|
||
nextMilestoneName = 'VIP Whale Tier ($1,000)';
|
||
nextMilestonePerk = 'Unlock Full 3-Coin Set, Swag Box & Lifetime Unlimited Pass';
|
||
} else if (safeAmount >= 1000 && safeAmount < 5000) {
|
||
nextMilestoneAmount = 5000;
|
||
nextMilestoneName = 'Treasury Guardian ($5,000)';
|
||
nextMilestonePerk = 'Unlock Gold-Plated Master Set & Advisory Board Seat';
|
||
} else if (safeAmount >= 5000) {
|
||
nextMilestoneAmount = 10000;
|
||
nextMilestoneName = 'Legendary Backer ($10,000)';
|
||
nextMilestonePerk = 'Maximum Protocol Allocation & Co-Founder Mentorship';
|
||
}
|
||
|
||
const neededForNext = Math.max(0, nextMilestoneAmount - safeAmount);
|
||
const progressPercent = Math.min(100, Math.round((safeAmount / nextMilestoneAmount) * 100));
|
||
|
||
return {
|
||
safeAmount,
|
||
totalTokens,
|
||
bonusPercentage,
|
||
materialPerks,
|
||
nonMaterialPerks,
|
||
nextMilestoneAmount,
|
||
nextMilestoneName,
|
||
nextMilestonePerk,
|
||
neededForNext,
|
||
progressPercent
|
||
};
|
||
};
|
||
|
||
const calcDetails = calculateInvestmentDetails(customAmount);
|
||
|
||
const pillars = [
|
||
{
|
||
id: 'alpha',
|
||
code: 'ALPHA',
|
||
title: 'THE REMINDER',
|
||
tagline: 'The first one to remember.',
|
||
motto: 'EVERY BIRTHDAY MATTERS • I REMEMBERED YOU',
|
||
symbol: 'Candle & Letter A',
|
||
colors: 'Tangerine Orange & Gold',
|
||
badge: 'Pillar 01',
|
||
description: 'The foundation token powering automated relationship reminders, contact syncing, and notification dispatch across all 30+ apps.',
|
||
role: 'Automated Trigger Utility'
|
||
},
|
||
{
|
||
id: 'beta',
|
||
code: 'BETA',
|
||
title: 'THE CELEBRATION',
|
||
tagline: 'Celebrate every moment.',
|
||
motto: 'SHARE JOY • SPREAD LOVE • MAKE EVERY DAY SPECIAL',
|
||
symbol: 'Balloons, Gift Box & Letter B',
|
||
colors: 'Sky Blue & Antique Bronze',
|
||
badge: 'Pillar 02',
|
||
description: 'The utility & access engine granting lifetime MicroApp access, campaign customization, and direct-response offer generation.',
|
||
role: 'MicroApp & Access Engine'
|
||
},
|
||
{
|
||
id: 'gamma',
|
||
code: 'GAMMA',
|
||
title: 'THE MEMORY',
|
||
tagline: 'Memories that never fade.',
|
||
motto: 'MEMORIES LAST FOREVER • CONNECTIONS THAT COUNT',
|
||
symbol: 'Calendar, Bell & Letter G',
|
||
colors: 'Sky Blue & Deep Gold',
|
||
badge: 'Pillar 03',
|
||
description: 'The governance and vault token linking revenue buybacks, on-chain treasury voting rights, and long-term ecosystem equity.',
|
||
role: 'Treasury & Governance Vault'
|
||
}
|
||
];
|
||
|
||
const rewardTiers = [
|
||
{
|
||
name: 'Micro Backer',
|
||
price: '$1 – $49',
|
||
tokens: '1,000 – 49,000 $SX',
|
||
materialRewards: [
|
||
'1,000 $SX per $1 USD Invested',
|
||
'Official Digital Collector Badge',
|
||
'Whitelisted Presale Token Allocation'
|
||
],
|
||
nonMaterialRewards: [
|
||
'Supporter Discord Role & Lounge Access',
|
||
'Public Wall of Supporters Listing',
|
||
'Early Software Launch Notifications'
|
||
],
|
||
highlight: false,
|
||
badgeText: 'Micro Investment Welcome'
|
||
},
|
||
{
|
||
name: 'Supporter Tier',
|
||
price: '$50',
|
||
tokens: '55,000 $SX Tokens (+10% Bonus)',
|
||
materialRewards: [
|
||
'55,000 $SX Meme Coin Launch Allocation',
|
||
'2 Free US$17 Marketing MicroApps of choice',
|
||
'Official Digital Collector Badge'
|
||
],
|
||
nonMaterialRewards: [
|
||
'Supporter Discord Role & Lounge Access',
|
||
'Whitelisted Presale Launch Access',
|
||
'Public Wall of Supporters Listing'
|
||
],
|
||
highlight: false,
|
||
badgeText: 'Great Starter'
|
||
},
|
||
{
|
||
name: 'Enthusiast Tier',
|
||
price: '$250',
|
||
tokens: '300,000 $SX Tokens (+20% Bonus)',
|
||
materialRewards: [
|
||
'300,000 $SX Meme Coin Launch Allocation',
|
||
'1 Minted Physical Collector Coin (Alpha, Beta, or Gamma)',
|
||
'Full Access to 5 MicroApps in Program Store',
|
||
'Ecosystem Sticker & Decal Collector Pack'
|
||
],
|
||
nonMaterialRewards: [
|
||
'Private Beta Testing Access for All 30+ Core Apps',
|
||
'Insider Alpha Telegram Channel Entry',
|
||
'Quarterly Founders AMA Voice Calls'
|
||
],
|
||
highlight: false,
|
||
badgeText: 'Collector Item Included'
|
||
},
|
||
{
|
||
name: 'VIP Whale Tier',
|
||
price: '$1,000',
|
||
tokens: '1,500,000 $SX Tokens (+50% Bonus)',
|
||
materialRewards: [
|
||
'1,500,000 $SX Meme Coin Launch Allocation',
|
||
'Full 3-Coin Physical Minted Collector Box Set (Alpha, Beta, Gamma)',
|
||
'Lifetime Unlimited Pass to ALL 23 US$17 MicroApps',
|
||
'Software Revenue Buyback Dividend Pool Access',
|
||
'Physical Founders Swag Box (Embroidered Hoodie & Cold Wallet Case)'
|
||
],
|
||
nonMaterialRewards: [
|
||
'VIP Founder Discord & Direct Developer Chat Access',
|
||
'On-Chain Founder Wall Permanent Name Inscription',
|
||
'Treasury Governance Voting Rights',
|
||
'1-on-1 Strategy Onboarding Session'
|
||
],
|
||
highlight: true,
|
||
badgeText: 'Most Popular'
|
||
},
|
||
{
|
||
name: 'Treasury Guardian',
|
||
price: '$5,000+',
|
||
tokens: '9,000,000+ $SX Tokens (+80% Bonus)',
|
||
materialRewards: [
|
||
'9,000,000+ $SX Meme Coin Allocation + Bonus Yield',
|
||
'Numbered Serialized Gold-Plated Physical 3-Coin Master Set',
|
||
'Permanent Lifetime Enterprise Pass to ALL Apps & Future Tools',
|
||
'Maximum Share of Subscription Revenue Buyback Pool',
|
||
'Deluxe Founders Hardware & Apparel Luxury Box'
|
||
],
|
||
nonMaterialRewards: [
|
||
'Treasury Advisory Board Seat & Direct Founder Line',
|
||
'Protocol Governance Veto & Acquisition Proposal Voting',
|
||
'Exclusive VIP Annual Retreat & Physical Event Passes',
|
||
'Custom Co-Branded SaaS Portal Integration'
|
||
],
|
||
highlight: false,
|
||
badgeText: 'Maximum Impact'
|
||
}
|
||
];
|
||
|
||
return (
|
||
<section id="memecoin-launch" className="py-24 bg-slate-950 relative overflow-hidden border-t border-slate-900">
|
||
{/* Background ambient glow */}
|
||
<div className="absolute top-1/3 left-1/2 -translate-x-1/2 w-[800px] h-[800px] bg-gradient-to-tr from-orange-600/15 via-amber-500/10 to-sky-500/15 rounded-full blur-[150px] pointer-events-none" />
|
||
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||
|
||
{/* Launch Banner Header with Live Countdown */}
|
||
<div className="mb-16 p-8 sm:p-12 rounded-3xl bg-gradient-to-br from-slate-900 via-orange-950/40 to-slate-950 border border-orange-500/40 shadow-2xl relative overflow-hidden">
|
||
<div className="flex flex-col lg:flex-row items-center justify-between gap-8">
|
||
<div className="flex-1 text-left">
|
||
<div className="flex items-center gap-3 mb-3">
|
||
<Badge variant="tangerine" showDot={true}>
|
||
Official Funding Launch • November 18th at 10 PM GMT
|
||
</Badge>
|
||
<span className="text-xs font-mono text-sky-400 font-semibold flex items-center gap-1">
|
||
<Flame className="w-3.5 h-3.5" /> 100% Revenue Backed
|
||
</span>
|
||
</div>
|
||
|
||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white tracking-tight">
|
||
BirthdayMessaging <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-amber-400 to-sky-400">Meme Coin Launch</span>
|
||
</h2>
|
||
|
||
<p className="text-sm sm:text-base text-slate-300 mt-4 leading-relaxed max-w-2xl">
|
||
We are launching the official <strong>$SX BirthdayMessaging Meme Coin</strong> on <strong>November 18th at 10 PM GMT</strong> to fund our rapid software expansion! Backers can invest <strong>ANY amount ($1, $5, $10, $50, $1,000+)</strong> and receive proportional token allocations, physical collector coins, micro-app access, and on-chain revenue dividends.
|
||
</p>
|
||
|
||
<div className="flex flex-wrap items-center gap-4 mt-8">
|
||
<Button
|
||
variant="glow"
|
||
size="lg"
|
||
onClick={onOpenWaitlist}
|
||
icon={<Coins className="w-5 h-5" />}
|
||
>
|
||
Join Nov 18, 10 PM GMT Presale Whitelist
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="lg"
|
||
onClick={onOpenTokenomics}
|
||
icon={<ShieldCheck className="w-5 h-5 text-sky-400" />}
|
||
>
|
||
Tokenomics & Smart Contract
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Countdown Clock Box */}
|
||
<div className="w-full lg:w-auto p-6 sm:p-8 rounded-2xl bg-slate-950/90 border border-orange-500/30 backdrop-blur-xl shadow-2xl flex flex-col items-center text-center">
|
||
<div className="flex items-center gap-2 text-xs font-mono uppercase tracking-widest text-orange-400 font-bold mb-4">
|
||
<Clock className="w-4 h-4 animate-pulse" /> Launch Countdown (Nov 18, 10 PM GMT)
|
||
</div>
|
||
|
||
<div className="grid grid-cols-4 gap-3 sm:gap-4 font-mono">
|
||
<div className="flex flex-col items-center bg-slate-900 border border-slate-800 rounded-xl px-3 sm:px-4 py-3 min-w-[65px] sm:min-w-[75px]">
|
||
<span className="text-2xl sm:text-3xl font-extrabold text-white">{timeLeft.days}</span>
|
||
<span className="text-[10px] text-slate-400 uppercase mt-1">Days</span>
|
||
</div>
|
||
<div className="flex flex-col items-center bg-slate-900 border border-slate-800 rounded-xl px-3 sm:px-4 py-3 min-w-[65px] sm:min-w-[75px]">
|
||
<span className="text-2xl sm:text-3xl font-extrabold text-orange-400">{timeLeft.hours}</span>
|
||
<span className="text-[10px] text-slate-400 uppercase mt-1">Hours</span>
|
||
</div>
|
||
<div className="flex flex-col items-center bg-slate-900 border border-slate-800 rounded-xl px-3 sm:px-4 py-3 min-w-[65px] sm:min-w-[75px]">
|
||
<span className="text-2xl sm:text-3xl font-extrabold text-sky-400">{timeLeft.minutes}</span>
|
||
<span className="text-[10px] text-slate-400 uppercase mt-1">Mins</span>
|
||
</div>
|
||
<div className="flex flex-col items-center bg-slate-900 border border-slate-800 rounded-xl px-3 sm:px-4 py-3 min-w-[65px] sm:min-w-[75px]">
|
||
<span className="text-2xl sm:text-3xl font-extrabold text-amber-400">{timeLeft.seconds}</span>
|
||
<span className="text-[10px] text-slate-400 uppercase mt-1">Secs</span>
|
||
</div>
|
||
</div>
|
||
|
||
<p className="text-[11px] text-slate-400 font-mono mt-4">
|
||
Fair public launch • Open to all sizes ($1+) • Guaranteed liquidity lock
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* CUSTOM INVESTMENT CALCULATOR SECTION */}
|
||
<div className="mb-20">
|
||
<SectionHeading
|
||
badgeText="Flexible Micro & Custom Investment"
|
||
badgeVariant="tangerine"
|
||
title="Invest ANY Amount You Want"
|
||
gradientTitle="From $1 to $10,000+"
|
||
subtitle="Every dollar counts! Type or select any custom investment amount below to see your exact calculated $SX token allocation and unlocked physical & digital rewards."
|
||
/>
|
||
|
||
<GlassCard gradientBorder={true} className="p-6 sm:p-10">
|
||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
|
||
|
||
{/* Left Column: Interactive Input Controls */}
|
||
<div className="lg:col-span-6 flex flex-col gap-6">
|
||
<div>
|
||
<div className="flex items-center justify-between mb-2">
|
||
<label className="text-xs font-mono uppercase tracking-widest text-orange-400 font-bold flex items-center gap-1.5">
|
||
<DollarSign className="w-4 h-4" /> Enter Your Custom Investment ($ USD)
|
||
</label>
|
||
<span className="text-xs font-mono text-slate-400">Min $1 • No Max Limit</span>
|
||
</div>
|
||
|
||
{/* Input Box */}
|
||
<div className="relative">
|
||
<span className="absolute left-4 top-1/2 -translate-y-1/2 text-2xl font-bold text-orange-400 font-mono">$</span>
|
||
<input
|
||
type="number"
|
||
min="1"
|
||
max="100000"
|
||
value={customAmount}
|
||
onChange={(e) => setCustomAmount(Math.max(1, parseInt(e.target.value) || 1))}
|
||
className="w-full bg-slate-950 border-2 border-orange-500/50 focus:border-orange-400 rounded-2xl pl-10 pr-4 py-4 text-3xl font-extrabold text-white font-mono focus:outline-none focus:ring-2 focus:ring-orange-500/30 transition-all shadow-inner"
|
||
placeholder="e.g. 10"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Quick Selection Buttons */}
|
||
<div>
|
||
<span className="text-xs font-mono text-slate-400 font-semibold block mb-2">
|
||
Quick Select Amount:
|
||
</span>
|
||
<div className="flex flex-wrap gap-2">
|
||
{quickAmounts.map((amt) => (
|
||
<button
|
||
key={amt}
|
||
onClick={() => setCustomAmount(amt)}
|
||
className={`px-3.5 py-2 rounded-xl text-xs font-mono font-bold transition-all cursor-pointer border ${
|
||
customAmount === amt
|
||
? 'bg-orange-600 border-orange-400 text-white shadow-md shadow-orange-600/30 scale-105'
|
||
: 'bg-slate-900 border-slate-800 text-slate-300 hover:border-slate-700 hover:text-white'
|
||
}`}
|
||
>
|
||
${amt}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Range Slider */}
|
||
<div>
|
||
<div className="flex justify-between text-xs font-mono text-slate-400 mb-1">
|
||
<span>$1 Micro</span>
|
||
<span>$250 Enthusiast</span>
|
||
<span>$1,000 VIP</span>
|
||
<span>$5,000+ Guardian</span>
|
||
</div>
|
||
<input
|
||
type="range"
|
||
min="1"
|
||
max="5000"
|
||
step="1"
|
||
value={Math.min(5000, customAmount)}
|
||
onChange={(e) => setCustomAmount(parseInt(e.target.value))}
|
||
className="w-full h-2 bg-slate-900 rounded-lg appearance-none cursor-pointer accent-orange-500"
|
||
/>
|
||
</div>
|
||
|
||
{/* Next Milestone Progress Bar */}
|
||
<div className="p-4 rounded-xl bg-slate-950/80 border border-slate-800/80">
|
||
<div className="flex items-center justify-between text-xs mb-2">
|
||
<span className="font-semibold text-slate-300 flex items-center gap-1.5">
|
||
<TrendingUp className="w-3.5 h-3.5 text-sky-400" /> Next Milestone: {calcDetails.nextMilestoneName}
|
||
</span>
|
||
<span className="font-mono text-orange-400 font-bold">
|
||
{calcDetails.progressPercent}%
|
||
</span>
|
||
</div>
|
||
<div className="w-full bg-slate-900 h-2 rounded-full overflow-hidden mb-2">
|
||
<div
|
||
className="bg-gradient-to-r from-orange-500 to-amber-400 h-full transition-all duration-300"
|
||
style={{ width: `${calcDetails.progressPercent}%` }}
|
||
/>
|
||
</div>
|
||
{calcDetails.neededForNext > 0 ? (
|
||
<p className="text-[11px] text-slate-400 leading-snug">
|
||
💡 Add <strong className="text-orange-300">${calcDetails.neededForNext}</strong> more to unlock: <span className="text-sky-300">{calcDetails.nextMilestonePerk}</span>
|
||
</p>
|
||
) : (
|
||
<p className="text-[11px] text-emerald-400 font-semibold">
|
||
🎉 Maximum Guardian Tier unlocked! You get gold-plated physical coin master sets and enterprise tools.
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right Column: Calculated Output Card */}
|
||
<div className="lg:col-span-6 p-6 sm:p-8 rounded-2xl bg-gradient-to-b from-slate-900 via-slate-950 to-slate-950 border border-orange-500/40 shadow-2xl relative">
|
||
|
||
{calcDetails.bonusPercentage > 0 && (
|
||
<div className="absolute -top-3 right-6 bg-gradient-to-r from-amber-500 to-orange-500 text-slate-950 font-mono text-[10px] font-black uppercase tracking-wider px-3 py-1 rounded-full shadow-md flex items-center gap-1">
|
||
<Sparkles className="w-3 h-3" /> +{calcDetails.bonusPercentage}% Volume Bonus Token Yield
|
||
</div>
|
||
)}
|
||
|
||
<span className="text-xs font-mono uppercase tracking-widest text-slate-400 font-bold block mb-1">
|
||
Your Calculated Allocation for <span className="text-white">${calcDetails.safeAmount}</span>
|
||
</span>
|
||
|
||
{/* Big Token Display */}
|
||
<div className="flex items-baseline gap-2 mt-2">
|
||
<span className="text-4xl sm:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-amber-300 to-sky-400 font-mono">
|
||
{calcDetails.totalTokens.toLocaleString()}
|
||
</span>
|
||
<span className="text-lg font-bold text-sky-400 font-mono">$SX Tokens</span>
|
||
</div>
|
||
|
||
<div className="mt-6 pt-6 border-t border-slate-800/80">
|
||
<span className="text-xs font-mono uppercase tracking-widest text-orange-400 font-bold block mb-3 flex items-center gap-1.5">
|
||
<Package className="w-4 h-4" /> Unlocked Material Rewards:
|
||
</span>
|
||
<ul className="flex flex-col gap-2.5">
|
||
{calcDetails.materialPerks.map((perk, i) => (
|
||
<li key={i} className="text-xs text-slate-200 flex items-start gap-2">
|
||
<CheckCircle2 className="w-4 h-4 text-orange-400 flex-shrink-0 mt-0.5" />
|
||
<span>{perk}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="mt-5 pt-5 border-t border-slate-800/80">
|
||
<span className="text-xs font-mono uppercase tracking-widest text-sky-400 font-bold block mb-3 flex items-center gap-1.5">
|
||
<Crown className="w-4 h-4" /> Unlocked Digital & Community Perks:
|
||
</span>
|
||
<ul className="flex flex-col gap-2.5">
|
||
{calcDetails.nonMaterialPerks.map((perk, i) => (
|
||
<li key={i} className="text-xs text-slate-200 flex items-start gap-2">
|
||
<CheckCircle2 className="w-4 h-4 text-sky-400 flex-shrink-0 mt-0.5" />
|
||
<span>{perk}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="mt-8">
|
||
<Button
|
||
variant="glow"
|
||
size="lg"
|
||
className="w-full"
|
||
onClick={onOpenWaitlist}
|
||
icon={<ArrowRight className="w-4 h-4" />}
|
||
>
|
||
Reserve ${calcDetails.safeAmount} Allocation ({calcDetails.totalTokens.toLocaleString()} $SX)
|
||
</Button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</GlassCard>
|
||
</div>
|
||
|
||
{/* Section Heading for Pillars */}
|
||
<SectionHeading
|
||
badgeText="The Three Pillars of Memory"
|
||
badgeVariant="sky"
|
||
title="Alpha, Beta & Gamma Coins"
|
||
gradientTitle="Tangerine & Sky Blue"
|
||
subtitle="Discover the three core coin pillars representing BirthdayMessaging.io: The Reminder, The Celebration, and The Memory."
|
||
/>
|
||
|
||
{/* Two-Image Community Showcase */}
|
||
<div id="showcase-images" className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">
|
||
|
||
{/* Coin artwork card */}
|
||
<div className="overflow-hidden rounded-3xl border border-slate-800 bg-slate-950 shadow-2xl">
|
||
<div className="relative p-4 sm:p-5">
|
||
<span className="absolute left-7 top-7 z-10 rounded-full border border-orange-500/40 bg-slate-950/95 px-3 py-2 text-[10px] sm:text-xs font-mono font-bold uppercase tracking-widest text-orange-400">
|
||
Official Physical Minted Artifact
|
||
</span>
|
||
|
||
<a href="#showcase-coin-viewer"
|
||
aria-label="View full-size BM Alpha coin image"
|
||
className="block cursor-zoom-in">
|
||
<img
|
||
src="https://res.cloudinary.com/gg3hylnv/image/upload/v1792532111/image_93eb6f_4K.png"
|
||
alt="BM Alpha commemorative copper coin"
|
||
className="h-[420px] sm:h-[520px] w-full rounded-2xl bg-slate-950 object-contain object-center"
|
||
loading="lazy"
|
||
/>
|
||
</a>
|
||
|
||
<a href="#showcase-coin-viewer"
|
||
aria-label="View full-size BM Alpha coin image"
|
||
className="absolute right-7 top-7 z-20 flex h-12 w-12 items-center justify-center rounded-full border border-slate-600 bg-slate-950/95 text-white shadow-lg transition hover:scale-110 hover:border-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-400">
|
||
<span aria-hidden="true" className="pointer-events-none absolute left-1/2 top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2">
|
||
<span className="absolute left-1/2 top-0 h-5 w-px -translate-x-1/2 bg-current"></span>
|
||
<span className="absolute left-0 top-1/2 h-px w-5 -translate-y-1/2 bg-current"></span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div className="border-t border-slate-800 bg-gradient-to-b from-slate-900 to-slate-950 p-6 sm:p-7">
|
||
<h3 className="text-xl sm:text-2xl font-bold text-white">BM Alpha Commemorative Coin</h3>
|
||
<p className="mt-3 leading-relaxed text-slate-300">
|
||
The BM Alpha coin represents the reminder: every birthday matters, and every meaningful connection deserves to be remembered.
|
||
</p>
|
||
<p className="mt-4 text-xs sm:text-sm font-semibold text-orange-400">
|
||
Click the plus icon or image to view it full size.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Community artwork card */}
|
||
<div className="overflow-hidden rounded-3xl border border-slate-800 bg-slate-950 shadow-2xl">
|
||
<div className="relative p-4 sm:p-5">
|
||
<span className="absolute left-7 top-7 z-10 rounded-full border border-sky-500/40 bg-slate-950/95 px-3 py-2 text-[10px] sm:text-xs font-mono font-bold uppercase tracking-widest text-sky-400">
|
||
BM Connect Community Movement
|
||
</span>
|
||
|
||
<a href="#showcase-community-viewer"
|
||
aria-label="View full-size BM Connect community image"
|
||
className="block cursor-zoom-in">
|
||
<img
|
||
src="https://res.cloudinary.com/gg3hylnv/image/upload/v1792532072/image_116649_4K_1.jpg"
|
||
alt="Different generations and communities connected through BM Connect"
|
||
className="h-[420px] sm:h-[520px] w-full rounded-2xl bg-slate-950 object-contain object-center"
|
||
loading="lazy"
|
||
/>
|
||
</a>
|
||
|
||
<a href="#showcase-community-viewer"
|
||
aria-label="View full-size BM Connect community image"
|
||
className="absolute right-7 top-7 z-20 flex h-12 w-12 items-center justify-center rounded-full border border-slate-600 bg-slate-950/95 text-white shadow-lg transition hover:scale-110 hover:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-400">
|
||
<span aria-hidden="true" className="pointer-events-none absolute left-1/2 top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2">
|
||
<span className="absolute left-1/2 top-0 h-5 w-px -translate-x-1/2 bg-current"></span>
|
||
<span className="absolute left-0 top-1/2 h-px w-5 -translate-y-1/2 bg-current"></span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div className="border-t border-slate-800 bg-gradient-to-b from-slate-900 to-slate-950 p-6 sm:p-7">
|
||
<h3 className="text-xl sm:text-2xl font-bold text-white">Different Faces. One Humanity.</h3>
|
||
<p className="mt-3 leading-relaxed text-slate-300">
|
||
The people and relationships at the heart of BirthdayMessaging.io and the BM Connect ecosystem.
|
||
</p>
|
||
<p className="mt-4 text-xs sm:text-sm font-semibold text-sky-400">
|
||
Click the plus icon or image to view it full size.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{/* In-page image viewer: the website remains open behind the overlay */}
|
||
<div id="showcase-coin-viewer"
|
||
className="fixed inset-0 z-[9999] hidden items-center justify-center bg-black/95 p-4 target:flex sm:p-8"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-label="Full-size BM Alpha coin image">
|
||
<a href="#showcase-images"
|
||
className="absolute inset-0 cursor-default"
|
||
aria-label="Close image viewer"></a>
|
||
<a href="#showcase-images"
|
||
className="absolute right-4 top-4 z-20 flex h-12 w-12 items-center justify-center rounded-full border border-white/40 bg-slate-900 text-3xl leading-none text-white hover:bg-slate-700"
|
||
aria-label="Close image viewer">×</a>
|
||
<img
|
||
src="https://res.cloudinary.com/gg3hylnv/image/upload/v1792532111/image_93eb6f_4K.png"
|
||
alt="BM Alpha commemorative copper coin, full size"
|
||
className="pointer-events-none relative z-10 max-h-[88vh] max-w-[95vw] object-contain"
|
||
/>
|
||
</div>
|
||
|
||
<div id="showcase-community-viewer"
|
||
className="fixed inset-0 z-[9999] hidden items-center justify-center bg-black/95 p-4 target:flex sm:p-8"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-label="Full-size BM Connect community image">
|
||
<a href="#showcase-images"
|
||
className="absolute inset-0 cursor-default"
|
||
aria-label="Close image viewer"></a>
|
||
<a href="#showcase-images"
|
||
className="absolute right-4 top-4 z-20 flex h-12 w-12 items-center justify-center rounded-full border border-white/40 bg-slate-900 text-3xl leading-none text-white hover:bg-slate-700"
|
||
aria-label="Close image viewer">×</a>
|
||
<img
|
||
src="https://res.cloudinary.com/gg3hylnv/image/upload/v1792532072/image_116649_4K_1.jpg"
|
||
alt="BM Connect community artwork, full size"
|
||
className="pointer-events-none relative z-10 max-h-[88vh] max-w-[95vw] object-contain"
|
||
/>
|
||
</div>
|
||
|
||
{/* 3 Pillars Cards */}
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-20">
|
||
{pillars.map((pillar) => (
|
||
<GlassCard key={pillar.id} gradientBorder={true} className="flex flex-col justify-between">
|
||
<div>
|
||
<div className="flex items-center justify-between mb-4">
|
||
<Badge variant={pillar.id === 'alpha' ? 'tangerine' : pillar.id === 'beta' ? 'sky' : 'neutral'}>
|
||
{pillar.badge}
|
||
</Badge>
|
||
<span className="text-xs font-mono text-slate-400">{pillar.colors}</span>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-3 mb-2">
|
||
<div className="w-10 h-10 rounded-xl bg-gradient-to-tr from-orange-500 to-amber-600 flex items-center justify-center text-white font-black text-lg shadow-md">
|
||
{pillar.code[0]}
|
||
</div>
|
||
<div>
|
||
<h3 className="text-xl font-bold text-white">{pillar.code}</h3>
|
||
<span className="text-xs font-mono text-orange-300 font-semibold">{pillar.title}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<p className="text-xs font-medium italic text-sky-300 mt-2">
|
||
"{pillar.tagline}"
|
||
</p>
|
||
|
||
<p className="text-xs text-slate-300 mt-3 leading-relaxed">
|
||
{pillar.description}
|
||
</p>
|
||
|
||
<div className="mt-4 p-3 rounded-xl bg-slate-950 border border-slate-800 text-[11px] font-mono text-slate-300">
|
||
<span className="text-orange-400 font-bold block mb-1">Engraved Motto:</span>
|
||
{pillar.motto}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-6 pt-3 border-t border-slate-800/80 flex items-center justify-between text-xs font-mono">
|
||
<span className="text-slate-400">Ecosystem Role:</span>
|
||
<span className="font-bold text-sky-400">{pillar.role}</span>
|
||
</div>
|
||
</GlassCard>
|
||
))}
|
||
</div>
|
||
|
||
{/* What Investors Get (Material & Non-Material Rewards) */}
|
||
<div className="mb-20">
|
||
<SectionHeading
|
||
badgeText="Investor & Buyer Benefits"
|
||
badgeVariant="tangerine"
|
||
title="What You Get When You"
|
||
gradientTitle="Invest & Buy Tokens"
|
||
subtitle="We reward our community with a blend of high-value tangible physical assets and exclusive digital ecosystem privileges."
|
||
/>
|
||
|
||
{/* Tab Controls: Material vs Non-Material */}
|
||
<div className="flex justify-center mb-10">
|
||
<div className="p-1.5 rounded-2xl bg-slate-900 border border-slate-800 inline-flex gap-2">
|
||
<button
|
||
onClick={() => setActiveTab('material')}
|
||
className={`px-6 py-2.5 rounded-xl text-xs sm:text-sm font-bold transition-all cursor-pointer flex items-center gap-2 ${
|
||
activeTab === 'material'
|
||
? 'bg-orange-600 text-white shadow-lg shadow-orange-600/30'
|
||
: 'text-slate-400 hover:text-white'
|
||
}`}
|
||
>
|
||
<Package className="w-4 h-4" />
|
||
<span>Material Rewards (Physical & Tangible)</span>
|
||
</button>
|
||
<button
|
||
onClick={() => setActiveTab('non-material')}
|
||
className={`px-6 py-2.5 rounded-xl text-xs sm:text-sm font-bold transition-all cursor-pointer flex items-center gap-2 ${
|
||
activeTab === 'non-material'
|
||
? 'bg-sky-600 text-white shadow-lg shadow-sky-600/30'
|
||
: 'text-slate-400 hover:text-white'
|
||
}`}
|
||
>
|
||
<Award className="w-4 h-4" />
|
||
<span>Non-Material Rewards (Privileges & Roles)</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Tab Content Display */}
|
||
<AnimatePresence mode="wait">
|
||
{activeTab === 'material' ? (
|
||
<motion.div
|
||
key="material"
|
||
initial={{ opacity: 0, y: 15 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: -15 }}
|
||
transition={{ duration: 0.3 }}
|
||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
|
||
>
|
||
<GlassCard className="flex flex-col justify-between">
|
||
<div>
|
||
<div className="w-12 h-12 rounded-2xl bg-orange-600/20 border border-orange-500/40 flex items-center justify-center text-orange-400 mb-4">
|
||
<Coins className="w-6 h-6" />
|
||
</div>
|
||
<h4 className="text-base font-bold text-white">Minted Physical Coins</h4>
|
||
<p className="text-xs text-slate-400 mt-2 leading-relaxed">
|
||
Heavyweight solid antique bronze/gold physical commemorative coins (Alpha, Beta, Gamma) delivered worldwide with engraved serial numbers.
|
||
</p>
|
||
</div>
|
||
<div className="mt-4 pt-3 border-t border-slate-800 text-[11px] font-mono text-orange-300">
|
||
Shipped directly to qualified buyers
|
||
</div>
|
||
</GlassCard>
|
||
|
||
<GlassCard className="flex flex-col justify-between">
|
||
<div>
|
||
<div className="w-12 h-12 rounded-2xl bg-amber-600/20 border border-amber-500/40 flex items-center justify-center text-amber-400 mb-4">
|
||
<Zap className="w-6 h-6" />
|
||
</div>
|
||
<h4 className="text-base font-bold text-white">Lifetime MicroApp Pass</h4>
|
||
<p className="text-xs text-slate-400 mt-2 leading-relaxed">
|
||
Permanent $0 access pass to all 23 US$17 marketing MicroApps in our store plus future tools without recurring monthly fees.
|
||
</p>
|
||
</div>
|
||
<div className="mt-4 pt-3 border-t border-slate-800 text-[11px] font-mono text-amber-300">
|
||
Worth $391+ in immediate software value
|
||
</div>
|
||
</GlassCard>
|
||
|
||
<GlassCard className="flex flex-col justify-between">
|
||
<div>
|
||
<div className="w-12 h-12 rounded-2xl bg-sky-600/20 border border-sky-500/40 flex items-center justify-center text-sky-400 mb-4">
|
||
<Flame className="w-6 h-6" />
|
||
</div>
|
||
<h4 className="text-base font-bold text-white">SaaS Revenue Buybacks</h4>
|
||
<p className="text-xs text-slate-400 mt-2 leading-relaxed">
|
||
Smart-contract automated token buybacks funded directly by subscription profits from BirthdayMessaging 2.0 & MicroApps.
|
||
</p>
|
||
</div>
|
||
<div className="mt-4 pt-3 border-t border-slate-800 text-[11px] font-mono text-sky-300">
|
||
Direct software revenue token sink
|
||
</div>
|
||
</GlassCard>
|
||
|
||
<GlassCard className="flex flex-col justify-between">
|
||
<div>
|
||
<div className="w-12 h-12 rounded-2xl bg-emerald-600/20 border border-emerald-500/40 flex items-center justify-center text-emerald-400 mb-4">
|
||
<Package className="w-6 h-6" />
|
||
</div>
|
||
<h4 className="text-base font-bold text-white">Founders Swag Box</h4>
|
||
<p className="text-xs text-slate-400 mt-2 leading-relaxed">
|
||
Custom physical team hoodie, metal hardware wallet sleeve, and signed certificate of early backing from the team.
|
||
</p>
|
||
</div>
|
||
<div className="mt-4 pt-3 border-t border-slate-800 text-[11px] font-mono text-emerald-300">
|
||
Whale & Guardian Tier Perks
|
||
</div>
|
||
</GlassCard>
|
||
</motion.div>
|
||
) : (
|
||
<motion.div
|
||
key="non-material"
|
||
initial={{ opacity: 0, y: 15 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: -15 }}
|
||
transition={{ duration: 0.3 }}
|
||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
|
||
>
|
||
<GlassCard className="flex flex-col justify-between">
|
||
<div>
|
||
<div className="w-12 h-12 rounded-2xl bg-sky-600/20 border border-sky-500/40 flex items-center justify-center text-sky-400 mb-4">
|
||
<Crown className="w-6 h-6" />
|
||
</div>
|
||
<h4 className="text-base font-bold text-white">VIP Discord & Telegram</h4>
|
||
<p className="text-xs text-slate-400 mt-2 leading-relaxed">
|
||
Exclusive VIP founder roles, direct chat access with lead developers, private alpha leaks, and priority feature suggestions.
|
||
</p>
|
||
</div>
|
||
<div className="mt-4 pt-3 border-t border-slate-800 text-[11px] font-mono text-sky-300">
|
||
Direct access to team
|
||
</div>
|
||
</GlassCard>
|
||
|
||
<GlassCard className="flex flex-col justify-between">
|
||
<div>
|
||
<div className="w-12 h-12 rounded-2xl bg-orange-600/20 border border-orange-500/40 flex items-center justify-center text-orange-400 mb-4">
|
||
<Lock className="w-6 h-6" />
|
||
</div>
|
||
<h4 className="text-base font-bold text-white">Private Beta Testing</h4>
|
||
<p className="text-xs text-slate-400 mt-2 leading-relaxed">
|
||
First-in-line access to test new software releases across all 30+ core platforms, web miners, and CRMs before public launch.
|
||
</p>
|
||
</div>
|
||
<div className="mt-4 pt-3 border-t border-slate-800 text-[11px] font-mono text-orange-300">
|
||
Early adopter advantage
|
||
</div>
|
||
</GlassCard>
|
||
|
||
<GlassCard className="flex flex-col justify-between">
|
||
<div>
|
||
<div className="w-12 h-12 rounded-2xl bg-amber-600/20 border border-amber-500/40 flex items-center justify-center text-amber-400 mb-4">
|
||
<Star className="w-6 h-6" />
|
||
</div>
|
||
<h4 className="text-base font-bold text-white">On-Chain Founder Wall</h4>
|
||
<p className="text-xs text-slate-400 mt-2 leading-relaxed">
|
||
Permanent, immutable inscription of your wallet address or handle on the BM Connect On-Chain Public Hall of Fame.
|
||
</p>
|
||
</div>
|
||
<div className="mt-4 pt-3 border-t border-slate-800 text-[11px] font-mono text-amber-300">
|
||
Forever recorded on blockchain
|
||
</div>
|
||
</GlassCard>
|
||
|
||
<GlassCard className="flex flex-col justify-between">
|
||
<div>
|
||
<div className="w-12 h-12 rounded-2xl bg-purple-600/20 border border-purple-500/40 flex items-center justify-center text-purple-400 mb-4">
|
||
<Vote className="w-6 h-6" />
|
||
</div>
|
||
<h4 className="text-base font-bold text-white">Treasury Governance Rights</h4>
|
||
<p className="text-xs text-slate-400 mt-2 leading-relaxed">
|
||
Vote on treasury capital deployment, software acquisitions, developer grant approvals, and quarterly burn schedules.
|
||
</p>
|
||
</div>
|
||
<div className="mt-4 pt-3 border-t border-slate-800 text-[11px] font-mono text-purple-300">
|
||
True community control
|
||
</div>
|
||
</GlassCard>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
|
||
{/* Investment Tiers Comparison */}
|
||
<div className="mb-12">
|
||
<SectionHeading
|
||
badgeText="Presale Contribution Tiers"
|
||
badgeVariant="sky"
|
||
title="Explore Preset Launch Tiers"
|
||
gradientTitle="November 18th, 10 PM GMT Allotments"
|
||
subtitle="Choose a preset tier below or type any custom dollar amount above to reserve your $SX tokens."
|
||
/>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-5">
|
||
{rewardTiers.map((tier, idx) => (
|
||
<GlassCard
|
||
key={tier.name}
|
||
gradientBorder={tier.highlight}
|
||
className={`flex flex-col justify-between relative ${
|
||
tier.highlight ? 'ring-2 ring-orange-500/50 bg-slate-900/90' : ''
|
||
}`}
|
||
>
|
||
{tier.badgeText && (
|
||
<div className={`absolute -top-3 left-1/2 -translate-x-1/2 text-white font-mono text-[9px] font-extrabold uppercase tracking-widest px-2.5 py-0.5 rounded-full shadow-md whitespace-nowrap ${
|
||
tier.highlight ? 'bg-gradient-to-r from-orange-500 to-amber-500' : 'bg-slate-800 border border-slate-700 text-slate-300'
|
||
}`}>
|
||
{tier.badgeText}
|
||
</div>
|
||
)}
|
||
|
||
<div>
|
||
<h3 className="text-base font-bold text-white mt-2">{tier.name}</h3>
|
||
<div className="text-2xl font-extrabold text-orange-400 font-mono mt-1">
|
||
{tier.price}
|
||
</div>
|
||
<span className="text-[11px] font-mono text-sky-400 font-semibold block mt-0.5">
|
||
{tier.tokens}
|
||
</span>
|
||
|
||
<div className="mt-5">
|
||
<span className="text-[10px] font-mono uppercase tracking-widest text-slate-400 font-bold block mb-1.5">
|
||
📦 Material Perks:
|
||
</span>
|
||
<ul className="flex flex-col gap-1.5">
|
||
{tier.materialRewards.map((m, i) => (
|
||
<li key={i} className="text-[11px] text-slate-300 flex items-start gap-1.5 leading-snug">
|
||
<CheckCircle2 className="w-3 h-3 text-orange-400 flex-shrink-0 mt-0.5" />
|
||
<span>{m}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="mt-3 pt-3 border-t border-slate-800">
|
||
<span className="text-[10px] font-mono uppercase tracking-widest text-slate-400 font-bold block mb-1.5">
|
||
👑 Non-Material Perks:
|
||
</span>
|
||
<ul className="flex flex-col gap-1.5">
|
||
{tier.nonMaterialRewards.map((nm, i) => (
|
||
<li key={i} className="text-[11px] text-slate-300 flex items-start gap-1.5 leading-snug">
|
||
<CheckCircle2 className="w-3 h-3 text-sky-400 flex-shrink-0 mt-0.5" />
|
||
<span>{nm}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-6">
|
||
<Button
|
||
variant={tier.highlight ? 'glow' : 'outline'}
|
||
size="sm"
|
||
className="w-full text-xs"
|
||
onClick={onOpenWaitlist}
|
||
icon={<ArrowRight className="w-3 h-3" />}
|
||
>
|
||
Select & Reserve
|
||
</Button>
|
||
</div>
|
||
</GlassCard>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Footer Guarantee Box */}
|
||
<div className="p-6 rounded-2xl bg-slate-900/80 border border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-4">
|
||
<div className="flex items-center gap-3">
|
||
<ShieldCheck className="w-6 h-6 text-sky-400 flex-shrink-0" />
|
||
<p className="text-xs text-slate-300">
|
||
<strong>100% Micro-Friendly & Transparent:</strong> Everyone is welcome regardless of contribution size ($1 to $10,000+). Smart contracts audited on-chain. Liquidity locked permanently upon the November 18, 10 PM GMT launch.
|
||
</p>
|
||
</div>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={onOpenWaitlist}
|
||
className="flex-shrink-0"
|
||
>
|
||
Join Launch Whitelist →
|
||
</Button>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|