Initial commit
This commit is contained in:
User
@@ -0,0 +1,960 @@
|
||||
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 August 24, 2026 00:00:00 UTC
|
||||
const [timeLeft, setTimeLeft] = useState({
|
||||
days: 0,
|
||||
hours: 0,
|
||||
minutes: 0,
|
||||
seconds: 0
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const launchDate = new Date('2026-08-24T00: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 Software X 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 • August 24th
|
||||
</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>August 24th</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 Aug 24 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 (August 24)
|
||||
</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."
|
||||
/>
|
||||
|
||||
{/* Showcase Image Banner */}
|
||||
<div className="mb-16 relative rounded-3xl overflow-hidden border border-slate-800 shadow-2xl bg-slate-950 group">
|
||||
<img
|
||||
src={coinShowcaseImg}
|
||||
alt="BirthdayMessaging.io Alpha, Beta, Gamma Commemorative Coins"
|
||||
className="w-full h-auto object-cover rounded-3xl transition-transform duration-500 group-hover:scale-[1.01]"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-transparent to-transparent opacity-80" />
|
||||
<div className="absolute bottom-4 left-4 sm:bottom-8 sm:left-8 right-4 sm:right-8 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<span className="text-xs font-mono text-orange-400 font-bold uppercase tracking-widest">
|
||||
Official Physical Minted Artifacts
|
||||
</span>
|
||||
<h3 className="text-xl sm:text-2xl font-bold text-white mt-1">
|
||||
Alpha • Beta • Gamma Collector Series
|
||||
</h3>
|
||||
</div>
|
||||
<Badge variant="tangerine">Collect All 3</Badge>
|
||||
</div>
|
||||
</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 Software X 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="August 24th 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 August 24 launch.
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onOpenWaitlist}
|
||||
className="flex-shrink-0"
|
||||
>
|
||||
Join Launch Whitelist →
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user