Initial commit
This commit is contained in:
User
@@ -0,0 +1,178 @@
|
||||
import React from 'react';
|
||||
import { Layers, Github, Twitter, MessageSquare, ShieldCheck, ArrowUpRight, Activity } from 'lucide-react';
|
||||
import { Badge } from '../ui/Badge';
|
||||
|
||||
interface FooterProps {
|
||||
onOpenWaitlist: () => void;
|
||||
onOpenTokenomics: () => void;
|
||||
onOpenVision: () => void;
|
||||
}
|
||||
|
||||
export const Footer: React.FC<FooterProps> = ({
|
||||
onOpenWaitlist,
|
||||
onOpenTokenomics,
|
||||
onOpenVision
|
||||
}) => {
|
||||
return (
|
||||
<footer className="relative bg-slate-950 border-t border-slate-900 pt-16 pb-12 overflow-hidden">
|
||||
{/* Subtle background gradient glow */}
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-3/4 h-24 bg-orange-500/5 blur-3xl rounded-full pointer-events-none" />
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 pb-12 border-b border-slate-900">
|
||||
|
||||
{/* Brand Info */}
|
||||
<div className="lg:col-span-2 flex flex-col gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-9 h-9 rounded-xl bg-gradient-to-tr from-orange-500 via-amber-500 to-sky-500 flex items-center justify-center p-[1px]">
|
||||
<div className="w-full h-full bg-slate-950 rounded-[11px] flex items-center justify-center">
|
||||
<Layers className="w-4 h-4 text-orange-400" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-xl font-bold tracking-tight text-white">
|
||||
Software <span className="text-orange-400">X</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-slate-400 max-w-sm leading-relaxed">
|
||||
Software X is the evolution of BirthdayMessaging.io, anchoring an ecosystem of 30+ digital tools funded directly by a fair community token. Zero VCs. 100% real products.
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-2 pt-2">
|
||||
<Badge variant="sky" showDot={true}>
|
||||
<Activity className="w-3 h-3 text-sky-400 inline mr-1" />
|
||||
All 30+ Products Operational
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ecosystem Column */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<h4 className="text-xs font-mono uppercase tracking-widest text-slate-400 font-semibold">
|
||||
Ecosystem Products
|
||||
</h4>
|
||||
<ul className="flex flex-col gap-2.5 text-sm">
|
||||
<li>
|
||||
<a href="#ecosystem" className="text-slate-400 hover:text-white transition-colors flex items-center gap-1 group">
|
||||
<span>BirthdayMessaging.io</span>
|
||||
<ArrowUpRight className="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#ecosystem" className="text-slate-400 hover:text-white transition-colors">
|
||||
SignalDrop Protocol
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#ecosystem" className="text-slate-400 hover:text-white transition-colors">
|
||||
CraftFlow Engine
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#ecosystem" className="text-slate-400 hover:text-white transition-colors">
|
||||
TokenLedger Treasury
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#ecosystem" className="text-slate-400 hover:text-white transition-colors">
|
||||
View All 30+ Apps
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Vision & Economics Column */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<h4 className="text-xs font-mono uppercase tracking-widest text-slate-400 font-semibold">
|
||||
Architecture & Vision
|
||||
</h4>
|
||||
<ul className="flex flex-col gap-2.5 text-sm">
|
||||
<li>
|
||||
<button onClick={onOpenVision} className="text-slate-400 hover:text-white transition-colors text-left cursor-pointer">
|
||||
Founder Manifesto
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button onClick={onOpenTokenomics} className="text-slate-400 hover:text-white transition-colors text-left cursor-pointer">
|
||||
Tokenomics & Allocation
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#why-community" className="text-slate-400 hover:text-white transition-colors">
|
||||
Why Zero VC Funding?
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#roadmap" className="text-slate-400 hover:text-white transition-colors">
|
||||
Public Development Roadmap
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<button onClick={onOpenWaitlist} className="text-slate-400 hover:text-orange-400 transition-colors text-left font-medium cursor-pointer">
|
||||
Join Early Waitlist →
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Social & Community Column */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<h4 className="text-xs font-mono uppercase tracking-widest text-slate-400 font-semibold">
|
||||
Community Channels
|
||||
</h4>
|
||||
<div className="flex items-center gap-2">
|
||||
<a
|
||||
href="https://x.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-9 h-9 rounded-lg bg-slate-900 border border-slate-800 flex items-center justify-center text-slate-400 hover:text-white hover:border-slate-700 transition-all"
|
||||
aria-label="X (Twitter)"
|
||||
>
|
||||
<Twitter className="w-4 h-4" />
|
||||
</a>
|
||||
<a
|
||||
href="https://discord.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-9 h-9 rounded-lg bg-slate-900 border border-slate-800 flex items-center justify-center text-slate-400 hover:text-white hover:border-slate-700 transition-all"
|
||||
aria-label="Discord"
|
||||
>
|
||||
<MessageSquare className="w-4 h-4" />
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-9 h-9 rounded-lg bg-slate-900 border border-slate-800 flex items-center justify-center text-slate-400 hover:text-white hover:border-slate-700 transition-all"
|
||||
aria-label="GitHub"
|
||||
>
|
||||
<Github className="w-4 h-4" />
|
||||
</a>
|
||||
</div>
|
||||
<p className="text-xs text-slate-400 leading-relaxed mt-2">
|
||||
Join 18,000+ early supporters across our active community channels.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="pt-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-400">
|
||||
<div className="flex items-center gap-2">
|
||||
<span>© 2026 Software X Labs. Built for real utility.</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-6">
|
||||
<span className="flex items-center gap-1.5 text-slate-400">
|
||||
<ShieldCheck className="w-3.5 h-3.5 text-sky-400" />
|
||||
100% On-Chain Treasury Verified
|
||||
</span>
|
||||
<a href="#faq" className="hover:text-slate-300 transition-colors">
|
||||
Privacy & Disclaimer
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,213 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { motion, AnimatePresence } from 'motion/react';
|
||||
import { Layers, Menu, X, ArrowRight, ShieldCheck, PieChart, Sparkles } from 'lucide-react';
|
||||
import { Button } from '../ui/Button';
|
||||
import { Badge } from '../ui/Badge';
|
||||
|
||||
interface NavbarProps {
|
||||
onOpenWaitlist: () => void;
|
||||
onOpenTokenomics: () => void;
|
||||
onOpenVision: () => void;
|
||||
}
|
||||
|
||||
export const Navbar: React.FC<NavbarProps> = ({
|
||||
onOpenWaitlist,
|
||||
onOpenTokenomics,
|
||||
onOpenVision
|
||||
}) => {
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setScrolled(window.scrollY > 20);
|
||||
};
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
const navLinks = [
|
||||
{ label: 'Ecosystem', href: '#ecosystem' },
|
||||
{ label: 'Aug 24 Launch', href: '#memecoin-launch' },
|
||||
{ label: 'Why Community', href: '#community-funding' },
|
||||
{ label: 'Features', href: '#features' },
|
||||
{ label: 'Roadmap', href: '#roadmap' },
|
||||
{ label: 'FAQ', href: '#faq' }
|
||||
];
|
||||
|
||||
const handleNavClick = (href: string) => {
|
||||
setMobileMenuOpen(false);
|
||||
const element = document.querySelector(href);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.header
|
||||
initial={{ y: -100 }}
|
||||
animate={{ y: 0 }}
|
||||
transition={{ duration: 0.5, ease: 'easeOut' }}
|
||||
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
||||
scrolled
|
||||
? 'bg-slate-950/80 backdrop-blur-xl border-b border-slate-800/80 shadow-2xl shadow-black/50 py-3.5'
|
||||
: 'bg-transparent py-5'
|
||||
}`}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
|
||||
{/* Brand Logo */}
|
||||
<a
|
||||
href="#"
|
||||
className="flex items-center gap-3 group focus:outline-none"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
>
|
||||
<div className="relative flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-tr from-orange-500 via-amber-500 to-sky-400 p-[1px] shadow-lg shadow-orange-500/20 group-hover:shadow-orange-500/40 transition-shadow">
|
||||
<div className="w-full h-full bg-slate-950 rounded-[11px] flex items-center justify-center">
|
||||
<Layers className="w-5 h-5 text-orange-400 group-hover:rotate-12 transition-transform duration-300" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xl font-bold tracking-tight text-white font-sans">
|
||||
Software <span className="text-orange-400">X</span>
|
||||
</span>
|
||||
<Badge variant="tangerine" showDot={true} className="hidden sm:inline-flex">
|
||||
30+ Apps
|
||||
</Badge>
|
||||
</div>
|
||||
<span className="text-[10px] text-slate-400 font-mono tracking-wider uppercase">
|
||||
BirthdayMessaging Ecosystem
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{/* Desktop Navigation Links */}
|
||||
<nav className="hidden lg:flex items-center gap-1 bg-slate-900/60 p-1.5 rounded-full border border-slate-800/80 backdrop-blur-md">
|
||||
{navLinks.map((link) => (
|
||||
<button
|
||||
key={link.label}
|
||||
onClick={() => handleNavClick(link.href)}
|
||||
className="px-4 py-1.5 text-xs font-medium text-slate-300 hover:text-white hover:bg-slate-800/60 rounded-full transition-all cursor-pointer"
|
||||
>
|
||||
{link.label}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Desktop Actions */}
|
||||
<div className="hidden sm:flex items-center gap-3">
|
||||
<button
|
||||
onClick={onOpenTokenomics}
|
||||
className="inline-flex items-center gap-1.5 text-xs font-medium text-slate-300 hover:text-white px-3 py-2 rounded-lg hover:bg-slate-800/50 transition-colors cursor-pointer"
|
||||
>
|
||||
<PieChart className="w-3.5 h-3.5 text-orange-400" />
|
||||
<span>Tokenomics</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={onOpenVision}
|
||||
className="inline-flex items-center gap-1.5 text-xs font-medium text-slate-300 hover:text-white px-3 py-2 rounded-lg hover:bg-slate-800/50 transition-colors cursor-pointer"
|
||||
>
|
||||
<ShieldCheck className="w-3.5 h-3.5 text-sky-400" />
|
||||
<span>Manifesto</span>
|
||||
</button>
|
||||
<Button
|
||||
variant="glow"
|
||||
size="sm"
|
||||
onClick={onOpenWaitlist}
|
||||
icon={<ArrowRight className="w-3.5 h-3.5" />}
|
||||
>
|
||||
Join Waitlist
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<div className="flex items-center gap-2 sm:hidden">
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={onOpenWaitlist}
|
||||
className="px-3 py-1.5 text-xs"
|
||||
>
|
||||
Waitlist
|
||||
</Button>
|
||||
<button
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
className="p-2 text-slate-400 hover:text-white bg-slate-900 rounded-xl border border-slate-800"
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
{mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.header>
|
||||
|
||||
{/* Mobile Drawer */}
|
||||
<AnimatePresence>
|
||||
{mobileMenuOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
className="fixed inset-x-0 top-[70px] z-40 bg-slate-950/95 backdrop-blur-2xl border-b border-slate-800 p-6 sm:hidden shadow-2xl"
|
||||
>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center justify-between pb-3 border-b border-slate-800">
|
||||
<span className="text-xs font-mono text-indigo-400 uppercase tracking-widest">Navigation</span>
|
||||
<Badge variant="emerald">Live Ecosystem</Badge>
|
||||
</div>
|
||||
|
||||
{navLinks.map((link) => (
|
||||
<button
|
||||
key={link.label}
|
||||
onClick={() => handleNavClick(link.href)}
|
||||
className="text-left text-base font-medium text-slate-200 hover:text-indigo-400 py-1"
|
||||
>
|
||||
{link.label}
|
||||
</button>
|
||||
))}
|
||||
|
||||
<div className="pt-4 border-t border-slate-800 flex flex-col gap-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
setMobileMenuOpen(false);
|
||||
onOpenTokenomics();
|
||||
}}
|
||||
className="flex items-center gap-2 text-sm text-slate-300 py-2"
|
||||
>
|
||||
<PieChart className="w-4 h-4 text-indigo-400" />
|
||||
<span>Tokenomics & Treasury</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setMobileMenuOpen(false);
|
||||
onOpenVision();
|
||||
}}
|
||||
className="flex items-center gap-2 text-sm text-slate-300 py-2"
|
||||
>
|
||||
<ShieldCheck className="w-4 h-4 text-emerald-400" />
|
||||
<span>Founder Manifesto</span>
|
||||
</button>
|
||||
<Button
|
||||
variant="glow"
|
||||
size="md"
|
||||
onClick={() => {
|
||||
setMobileMenuOpen(false);
|
||||
onOpenWaitlist();
|
||||
}}
|
||||
icon={<ArrowRight className="w-4 h-4" />}
|
||||
className="w-full mt-2"
|
||||
>
|
||||
Join Waitlist
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,127 @@
|
||||
import React from 'react';
|
||||
import { motion } from 'motion/react';
|
||||
import { ShieldOff, Repeat, Eye, Sparkles, PieChart, ArrowRight, Check } from 'lucide-react';
|
||||
import { SectionHeading } from '../ui/SectionHeading';
|
||||
import { GlassCard } from '../ui/GlassCard';
|
||||
import { Button } from '../ui/Button';
|
||||
import { tokenomicsPrinciples } from '../../data/tokenomics';
|
||||
|
||||
interface CommunityFundingProps {
|
||||
onOpenTokenomics: () => void;
|
||||
onOpenWaitlist: () => void;
|
||||
}
|
||||
|
||||
export const CommunityFundingSection: React.FC<CommunityFundingProps> = ({
|
||||
onOpenTokenomics,
|
||||
onOpenWaitlist
|
||||
}) => {
|
||||
const getIcon = (iconName: string) => {
|
||||
switch (iconName) {
|
||||
case 'ShieldOff': return ShieldOff;
|
||||
case 'Repeat': return Repeat;
|
||||
case 'Eye': return Eye;
|
||||
default: return Sparkles;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="community-funding" className="py-24 bg-slate-950 relative overflow-hidden border-t border-slate-900">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<SectionHeading
|
||||
badgeText="Fair Tokenomics"
|
||||
badgeVariant="tangerine"
|
||||
title="Why Community Funding?"
|
||||
gradientTitle="Real Software Backing."
|
||||
subtitle="We chose a community token over venture capital to preserve 100% independence, avoid predatory liquidation preferences, and reward our real product users."
|
||||
/>
|
||||
|
||||
{/* 4 Core Pillars Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
|
||||
{tokenomicsPrinciples.map((principle, idx) => {
|
||||
const Icon = getIcon(principle.icon);
|
||||
return (
|
||||
<motion.div
|
||||
key={principle.title}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: idx * 0.1 }}
|
||||
>
|
||||
<GlassCard className="h-full flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-tr from-orange-500 to-amber-600 flex items-center justify-center text-white mb-6 shadow-lg shadow-orange-950/40">
|
||||
<Icon className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-2">{principle.title}</h3>
|
||||
<p className="text-xs text-slate-400 leading-relaxed">{principle.description}</p>
|
||||
</div>
|
||||
<div className="mt-6 pt-3 border-t border-slate-800/80 flex items-center gap-1.5 text-xs text-sky-400 font-mono">
|
||||
<Check className="w-3.5 h-3.5" />
|
||||
<span>Enforced via Smart Contract</span>
|
||||
</div>
|
||||
</GlassCard>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Tokenomics Highlights Banner */}
|
||||
<div className="p-8 sm:p-10 rounded-3xl bg-gradient-to-r from-slate-900 via-orange-950/60 to-slate-900 border border-orange-500/30 shadow-2xl relative overflow-hidden flex flex-col lg:flex-row items-center justify-between gap-8">
|
||||
<div className="flex-1">
|
||||
<span className="text-xs font-mono text-orange-400 uppercase tracking-widest font-semibold">
|
||||
Transparent Distribution
|
||||
</span>
|
||||
<h3 className="text-2xl sm:text-3xl font-bold text-white mt-2">
|
||||
100% Verifiable On-Chain Token Allocations
|
||||
</h3>
|
||||
<p className="text-sm text-slate-300 mt-3 max-w-xl leading-relaxed">
|
||||
Explore our exact vesting schedule, liquidity locks, and engineering budget allocations before the public token launch. Zero hidden presales.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-4 mt-6">
|
||||
<Button
|
||||
variant="glow"
|
||||
size="md"
|
||||
onClick={onOpenTokenomics}
|
||||
icon={<PieChart className="w-4 h-4" />}
|
||||
>
|
||||
Open Tokenomics Breakdown
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="md"
|
||||
onClick={onOpenWaitlist}
|
||||
icon={<ArrowRight className="w-4 h-4" />}
|
||||
>
|
||||
Reserve Waitlist Spot
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full lg:w-72 p-6 rounded-2xl bg-slate-950/80 border border-slate-800 backdrop-blur-md">
|
||||
<h4 className="text-xs font-mono text-slate-400 uppercase tracking-widest mb-4">Allocation Summary</h4>
|
||||
<ul className="flex flex-col gap-3 text-xs">
|
||||
<li className="flex justify-between items-center">
|
||||
<span className="text-slate-300">Software R&D</span>
|
||||
<span className="font-mono font-bold text-orange-400">45%</span>
|
||||
</li>
|
||||
<li className="flex justify-between items-center">
|
||||
<span className="text-slate-300">Public Liquidity (Locked)</span>
|
||||
<span className="font-mono font-bold text-sky-400">30%</span>
|
||||
</li>
|
||||
<li className="flex justify-between items-center">
|
||||
<span className="text-slate-300">Community Airdrops</span>
|
||||
<span className="font-mono font-bold text-amber-400">15%</span>
|
||||
</li>
|
||||
<li className="flex justify-between items-center">
|
||||
<span className="text-slate-300">Treasury Reserve</span>
|
||||
<span className="font-mono font-bold text-sky-300">10%</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,156 @@
|
||||
import React from 'react';
|
||||
import { motion } from 'motion/react';
|
||||
import { Twitter, MessageSquare, Github, Linkedin, Send, ShieldCheck, CheckCircle2, Heart } from 'lucide-react';
|
||||
import { SectionHeading } from '../ui/SectionHeading';
|
||||
import { GlassCard } from '../ui/GlassCard';
|
||||
import { Badge } from '../ui/Badge';
|
||||
|
||||
export const CommunitySection: React.FC = () => {
|
||||
const socialChannels = [
|
||||
{
|
||||
name: 'X (Twitter)',
|
||||
icon: Twitter,
|
||||
members: '12,400+ Followers',
|
||||
description: 'Daily product updates, engineering deep dives & founder announcements.',
|
||||
link: 'https://x.com',
|
||||
badge: 'Official Feed'
|
||||
},
|
||||
{
|
||||
name: 'Discord Community',
|
||||
icon: MessageSquare,
|
||||
members: '8,200+ Members',
|
||||
description: 'Engage with core engineers, test private beta builds & join dev workshops.',
|
||||
link: 'https://discord.com',
|
||||
badge: 'Beta Testing'
|
||||
},
|
||||
{
|
||||
name: 'Telegram Hub',
|
||||
icon: Send,
|
||||
members: '5,800+ Members',
|
||||
description: 'Real-time protocol telemetry, treasury announcements & community discussion.',
|
||||
link: 'https://t.me',
|
||||
badge: 'Live Chat'
|
||||
},
|
||||
{
|
||||
name: 'GitHub Protocol',
|
||||
icon: Github,
|
||||
members: 'Open Source',
|
||||
description: 'Inspect our smart contract repositories, SDK code & SDK documentation.',
|
||||
link: 'https://github.com',
|
||||
badge: 'Verified Code'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="community" className="py-24 bg-slate-950 relative overflow-hidden border-t border-slate-900">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<SectionHeading
|
||||
badgeText="Join The Movement"
|
||||
badgeVariant="tangerine"
|
||||
title="Built Out in the Open."
|
||||
gradientTitle="Backed by Community."
|
||||
subtitle="Software X is guided by real users, software engineers, and community members worldwide."
|
||||
/>
|
||||
|
||||
{/* Social Cards Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
|
||||
{socialChannels.map((channel) => {
|
||||
const Icon = channel.icon;
|
||||
return (
|
||||
<GlassCard key={channel.name} className="flex flex-col justify-between group">
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-slate-800 border border-slate-700 flex items-center justify-center text-orange-400 group-hover:scale-110 transition-transform">
|
||||
<Icon className="w-5 h-5" />
|
||||
</div>
|
||||
<Badge variant="neutral">{channel.badge}</Badge>
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-bold text-white group-hover:text-orange-400 transition-colors">
|
||||
{channel.name}
|
||||
</h3>
|
||||
<p className="text-xs text-slate-400 mt-2 leading-relaxed">
|
||||
{channel.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 pt-3 border-t border-slate-800/80 flex items-center justify-between text-xs">
|
||||
<span className="font-mono text-slate-400">{channel.members}</span>
|
||||
<a
|
||||
href={channel.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-orange-400 hover:text-orange-300 font-medium transition-colors"
|
||||
>
|
||||
Join Channel →
|
||||
</a>
|
||||
</div>
|
||||
</GlassCard>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Founder's Signed Transparency Pledge Card */}
|
||||
<div className="p-8 sm:p-10 rounded-3xl bg-slate-900/90 border border-sky-500/30 shadow-2xl relative overflow-hidden backdrop-blur-xl">
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 pb-6 border-b border-slate-800">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-sky-950 border border-sky-500/30 flex items-center justify-center text-sky-400">
|
||||
<ShieldCheck className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-white">Founders' Public Commitment Pledge</h3>
|
||||
<p className="text-xs text-slate-400 font-mono">Signed by the Software X & BirthdayMessaging.io Core Team</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="sky" showDot={true}>
|
||||
100% Irrevocable
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-sky-400 mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="text-sm font-bold text-white">Product Before Token</h4>
|
||||
<p className="text-xs text-slate-400 mt-1 leading-relaxed">
|
||||
We pledge to prioritize real software updates across BirthdayMessaging.io and the 30+ products above speculative token marketing.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-sky-400 mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="text-sm font-bold text-white">Zero Insider Deals or Secret Discounts</h4>
|
||||
<p className="text-xs text-slate-400 mt-1 leading-relaxed">
|
||||
No venture capital funds or private insiders hold secret discounted tokens. Public liquidity is 100% permanently locked.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-sky-400 mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="text-sm font-bold text-white">Multi-Sig Public Treasury Verification</h4>
|
||||
<p className="text-xs text-slate-400 mt-1 leading-relaxed">
|
||||
100% of engineering expenditure and subscription revenue buy-backs are viewable on public smart contracts with real-time telemetry.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-sky-400 mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="text-sm font-bold text-white">Continuous Revenue Buy-Backs</h4>
|
||||
<p className="text-xs text-slate-400 mt-1 leading-relaxed">
|
||||
A dedicated percentage of subscription revenues generated by ecosystem products is automatically routed into $SX token buy-backs.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,328 @@
|
||||
import React, { useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'motion/react';
|
||||
import {
|
||||
Search,
|
||||
Gift,
|
||||
Radio,
|
||||
Zap,
|
||||
Cpu,
|
||||
UserCheck,
|
||||
BarChart3,
|
||||
ShieldCheck,
|
||||
Activity,
|
||||
ArrowUpRight,
|
||||
CheckCircle2,
|
||||
Layers,
|
||||
Mail,
|
||||
Users,
|
||||
Target,
|
||||
Database,
|
||||
HeartHandshake,
|
||||
MapPin,
|
||||
Video,
|
||||
Globe,
|
||||
FileText,
|
||||
Image,
|
||||
TrendingUp,
|
||||
Brain,
|
||||
AlertTriangle,
|
||||
CheckSquare,
|
||||
Award,
|
||||
Share2,
|
||||
BarChart,
|
||||
Tv,
|
||||
DollarSign,
|
||||
Sparkles,
|
||||
Flame,
|
||||
Sliders,
|
||||
FolderPlus,
|
||||
FileSpreadsheet,
|
||||
Coins,
|
||||
Briefcase,
|
||||
Store,
|
||||
Compass,
|
||||
Calculator,
|
||||
Building,
|
||||
Star,
|
||||
ExternalLink,
|
||||
Tag
|
||||
} from 'lucide-react';
|
||||
import { SectionHeading } from '../ui/SectionHeading';
|
||||
import { GlassCard } from '../ui/GlassCard';
|
||||
import { Badge } from '../ui/Badge';
|
||||
import { ecosystemApps } from '../../data/ecosystem';
|
||||
|
||||
interface EcosystemSectionProps {
|
||||
onOpenWaitlist: () => void;
|
||||
}
|
||||
|
||||
export const EcosystemSection: React.FC<EcosystemSectionProps> = ({ onOpenWaitlist }) => {
|
||||
const [selectedCategory, setSelectedCategory] = useState<string>('All');
|
||||
const [searchQuery, setSearchQuery] = useState<string>('');
|
||||
|
||||
const categories = [
|
||||
'All',
|
||||
'Core Apps',
|
||||
'MicroApps',
|
||||
'MiniApps & Web',
|
||||
'Blockchain & Tokens',
|
||||
'Directories & Services'
|
||||
];
|
||||
|
||||
const filteredApps = ecosystemApps.filter((app) => {
|
||||
const matchesCategory = selectedCategory === 'All' || app.category === selectedCategory;
|
||||
const matchesSearch =
|
||||
app.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
app.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
app.badgeText.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
return matchesCategory && matchesSearch;
|
||||
});
|
||||
|
||||
const getIcon = (iconName: string) => {
|
||||
switch (iconName) {
|
||||
case 'Gift': return Gift;
|
||||
case 'Zap': return Zap;
|
||||
case 'Mail': return Mail;
|
||||
case 'UserCheck': return UserCheck;
|
||||
case 'Radio': return Radio;
|
||||
case 'Activity': return Activity;
|
||||
case 'MessageSquare': return Mail;
|
||||
case 'ShieldCheck': return ShieldCheck;
|
||||
case 'Users': return Users;
|
||||
case 'Target': return Target;
|
||||
case 'Layers': return Layers;
|
||||
case 'Database': return Database;
|
||||
case 'HeartHandshake': return HeartHandshake;
|
||||
case 'MapPin': return MapPin;
|
||||
case 'Search': return Search;
|
||||
case 'Video': return Video;
|
||||
case 'Globe': return Globe;
|
||||
case 'Cpu': return Cpu;
|
||||
case 'FileText': return FileText;
|
||||
case 'Image': return Image;
|
||||
case 'TrendingUp': return TrendingUp;
|
||||
case 'Brain': return Brain;
|
||||
case 'AlertTriangle': return AlertTriangle;
|
||||
case 'CheckSquare': return CheckSquare;
|
||||
case 'Award': return Award;
|
||||
case 'Share2': return Share2;
|
||||
case 'BarChart': return BarChart;
|
||||
case 'Tv': return Tv;
|
||||
case 'DollarSign': return DollarSign;
|
||||
case 'Sparkles': return Sparkles;
|
||||
case 'Flame': return Flame;
|
||||
case 'Sliders': return Sliders;
|
||||
case 'FolderPlus': return FolderPlus;
|
||||
case 'FileSpreadsheet': return FileSpreadsheet;
|
||||
case 'Coins': return Coins;
|
||||
case 'Briefcase': return Briefcase;
|
||||
case 'Store': return Store;
|
||||
case 'Compass': return Compass;
|
||||
case 'Calculator': return Calculator;
|
||||
case 'Building': return Building;
|
||||
case 'Star': return Star;
|
||||
default: return Layers;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="ecosystem" className="py-24 bg-slate-950 relative overflow-hidden border-t border-slate-900">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<SectionHeading
|
||||
badgeText="Live Ecosystem Portfolio"
|
||||
badgeVariant="tangerine"
|
||||
title="BirthdayMessaging Products,"
|
||||
gradientTitle="Offers & Services"
|
||||
subtitle="Explore the complete suite of flagship core apps, $17 micro-SaaS marketing programs, mini-apps, blockchain initiatives, and business services."
|
||||
/>
|
||||
|
||||
{/* Filter Controls Bar */}
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-4 mb-10">
|
||||
{/* Category Tabs */}
|
||||
<div className="flex flex-wrap items-center gap-2 bg-slate-900/80 p-1.5 rounded-2xl border border-slate-800 backdrop-blur-md w-full md:w-auto">
|
||||
{categories.map((cat) => (
|
||||
<button
|
||||
key={cat}
|
||||
onClick={() => setSelectedCategory(cat)}
|
||||
className={`px-3.5 py-2 rounded-xl text-xs font-semibold transition-all cursor-pointer ${
|
||||
selectedCategory === cat
|
||||
? 'bg-orange-600 text-white shadow-lg shadow-orange-600/30'
|
||||
: 'text-slate-400 hover:text-white hover:bg-slate-800/50'
|
||||
}`}
|
||||
>
|
||||
{cat}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="relative w-full md:w-72">
|
||||
<Search className="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search products & tools..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full bg-slate-900/80 border border-slate-800 rounded-xl pl-10 pr-4 py-2 text-xs text-white placeholder-slate-400 focus:outline-none focus:border-orange-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* MicroApps Special $17 Program Banner if MicroApps selected */}
|
||||
{selectedCategory === 'MicroApps' && (
|
||||
<div className="mb-8 p-4 rounded-2xl bg-gradient-to-r from-orange-950/80 via-amber-950/60 to-slate-900 border border-orange-500/30 flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-orange-600 flex items-center justify-center text-white font-bold text-sm shadow-md">
|
||||
$17
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-bold text-white flex items-center gap-2">
|
||||
<span>22 Focused Marketing MicroApps</span>
|
||||
<Badge variant="tangerine">One-Time US$17</Badge>
|
||||
</h4>
|
||||
<p className="text-xs text-slate-300 mt-0.5">
|
||||
Pick the tool. Own it for good. No recurring plans, credits, or monthly charges.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
href="https://program-store-4z7.pages.dev/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="px-4 py-2 rounded-xl bg-orange-600 hover:bg-orange-500 text-white text-xs font-semibold flex items-center gap-2 transition-all flex-shrink-0 cursor-pointer"
|
||||
>
|
||||
<span>Visit MicroApps Store</span>
|
||||
<ExternalLink className="w-3.5 h-3.5" />
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Product Cards Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<AnimatePresence mode="popLayout">
|
||||
{filteredApps.map((app) => {
|
||||
const Icon = getIcon(app.iconName);
|
||||
const hasLink = Boolean(app.link);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={app.id}
|
||||
layout
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.9 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<GlassCard
|
||||
gradientBorder={app.featured}
|
||||
className="h-full flex flex-col justify-between group relative"
|
||||
>
|
||||
<div>
|
||||
{/* Top Header */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<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 shadow-md group-hover:scale-110 transition-transform">
|
||||
<Icon className="w-5 h-5" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{app.price && (
|
||||
<span className="text-[10px] font-mono font-bold px-2 py-0.5 rounded-md bg-orange-950 text-orange-300 border border-orange-500/30 flex items-center gap-1">
|
||||
<Tag className="w-2.5 h-2.5" />
|
||||
{app.price}
|
||||
</span>
|
||||
)}
|
||||
<Badge
|
||||
variant={
|
||||
app.category === 'Core Apps'
|
||||
? 'tangerine'
|
||||
: app.category === 'MicroApps'
|
||||
? 'sky'
|
||||
: 'neutral'
|
||||
}
|
||||
>
|
||||
{app.badgeText}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title & Description */}
|
||||
<h3 className="text-lg font-bold text-white group-hover:text-orange-400 transition-colors flex items-center justify-between">
|
||||
<span>{app.name}</span>
|
||||
{hasLink ? (
|
||||
<a
|
||||
href={app.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-orange-400 hover:text-amber-300 transition-colors"
|
||||
title="Visit Page"
|
||||
>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</a>
|
||||
) : (
|
||||
<ArrowUpRight className="w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity text-orange-400" />
|
||||
)}
|
||||
</h3>
|
||||
|
||||
<p className="text-xs text-slate-400 mt-2 leading-relaxed">
|
||||
{app.description}
|
||||
</p>
|
||||
|
||||
{/* Highlights */}
|
||||
<div className="mt-4 pt-3 border-t border-slate-800/60 flex flex-col gap-1.5">
|
||||
{app.highlights.map((h, i) => (
|
||||
<span key={i} className="text-[11px] text-slate-300 flex items-center gap-1.5">
|
||||
<CheckCircle2 className="w-3 h-3 text-sky-400 flex-shrink-0" />
|
||||
{h}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Meta & Action Link */}
|
||||
<div className="mt-6 pt-3 border-t border-slate-800/80 flex items-center justify-between text-xs text-slate-400 font-mono">
|
||||
<span>{app.usersCount}</span>
|
||||
{hasLink ? (
|
||||
<a
|
||||
href={app.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-orange-400 hover:text-amber-300 font-semibold flex items-center gap-1 transition-colors cursor-pointer"
|
||||
>
|
||||
<span>Sales Page</span>
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
</a>
|
||||
) : (
|
||||
<button
|
||||
onClick={onOpenWaitlist}
|
||||
className="text-sky-400 hover:text-sky-300 font-semibold transition-colors cursor-pointer"
|
||||
>
|
||||
{app.growthRate || 'Get Access'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</GlassCard>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* Footer Note */}
|
||||
<div className="mt-12 text-center bg-slate-900/60 p-6 rounded-2xl border border-slate-800 max-w-2xl mx-auto">
|
||||
<p className="text-xs text-slate-300 leading-relaxed font-mono">
|
||||
Explore all 23 US$17 marketing MicroApps on our central program store platform.
|
||||
</p>
|
||||
<a
|
||||
href="https://program-store-4z7.pages.dev/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-3 inline-flex items-center gap-2 text-xs font-bold text-orange-400 hover:text-amber-300 underline underline-offset-4 cursor-pointer"
|
||||
>
|
||||
<span>Open All Programs Store (https://program-store-4z7.pages.dev/)</span>
|
||||
<ExternalLink className="w-3.5 h-3.5" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,118 @@
|
||||
import React, { useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'motion/react';
|
||||
import { ChevronDown, Search, HelpCircle } from 'lucide-react';
|
||||
import { SectionHeading } from '../ui/SectionHeading';
|
||||
import { GlassCard } from '../ui/GlassCard';
|
||||
import { faqItems } from '../../data/faq';
|
||||
|
||||
export const FAQSection: React.FC = () => {
|
||||
const [selectedCategory, setSelectedCategory] = useState<string>('All');
|
||||
const [searchQuery, setSearchQuery] = useState<string>('');
|
||||
const [openFaqId, setOpenFaqId] = useState<string | null>('faq-1');
|
||||
|
||||
const categories = ['All', 'General', 'Ecosystem', 'Tokenomics', 'Security'];
|
||||
|
||||
const filteredFaqs = faqItems.filter((faq) => {
|
||||
const matchesCategory = selectedCategory === 'All' || faq.category === selectedCategory;
|
||||
const matchesSearch =
|
||||
faq.question.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
faq.answer.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
return matchesCategory && matchesSearch;
|
||||
});
|
||||
|
||||
const toggleAccordion = (id: string) => {
|
||||
setOpenFaqId(openFaqId === id ? null : id);
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="faq" className="py-24 bg-slate-950 relative overflow-hidden border-t border-slate-900">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<SectionHeading
|
||||
badgeText="Clear Answers"
|
||||
badgeVariant="sky"
|
||||
title="Frequently Asked"
|
||||
gradientTitle="Questions"
|
||||
subtitle="Everything you need to know about Software X, BirthdayMessaging.io, tokenomics, and community-driven software development."
|
||||
/>
|
||||
|
||||
{/* Filter Controls Bar */}
|
||||
<div className="flex flex-col sm:flex-row items-center justify-between gap-4 mb-10">
|
||||
<div className="flex flex-wrap items-center gap-2 bg-slate-900/80 p-1.5 rounded-xl border border-slate-800 backdrop-blur-md w-full sm:w-auto">
|
||||
{categories.map((cat) => (
|
||||
<button
|
||||
key={cat}
|
||||
onClick={() => setSelectedCategory(cat)}
|
||||
className={`px-3.5 py-1.5 rounded-lg text-xs font-semibold transition-all cursor-pointer ${
|
||||
selectedCategory === cat
|
||||
? 'bg-orange-600 text-white shadow-md'
|
||||
: 'text-slate-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{cat}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="relative w-full sm:w-64">
|
||||
<Search className="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search questions..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full bg-slate-900/80 border border-slate-800 rounded-xl pl-9 pr-3 py-1.5 text-xs text-white placeholder-slate-400 focus:outline-none focus:border-orange-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* FAQ Accordion List */}
|
||||
<div className="flex flex-col gap-4">
|
||||
{filteredFaqs.map((faq) => {
|
||||
const isOpen = openFaqId === faq.id;
|
||||
return (
|
||||
<GlassCard
|
||||
key={faq.id}
|
||||
hoverEffect={false}
|
||||
className="p-5 cursor-pointer transition-colors"
|
||||
onClick={() => toggleAccordion(faq.id)}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<h3 className="text-base font-bold text-white flex items-center gap-2">
|
||||
<HelpCircle className="w-4 h-4 text-orange-400 flex-shrink-0" />
|
||||
<span>{faq.question}</span>
|
||||
</h3>
|
||||
<div className={`p-1.5 rounded-lg bg-slate-800 text-slate-300 transition-transform duration-200 ${isOpen ? 'rotate-180 text-orange-400' : ''}`}>
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<p className="mt-4 pt-3 border-t border-slate-800/80 text-sm text-slate-300 leading-relaxed font-normal">
|
||||
{faq.answer}
|
||||
</p>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</GlassCard>
|
||||
);
|
||||
})}
|
||||
|
||||
{filteredFaqs.length === 0 && (
|
||||
<div className="p-8 text-center text-slate-400 font-mono text-xs">
|
||||
No matching questions found for "{searchQuery}".
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,184 @@
|
||||
import React, { useState } from 'react';
|
||||
import { motion } from 'motion/react';
|
||||
import { KeyRound, TrendingUp, ShieldAlert, Brain, Activity, Code2, Sparkles, Check, Terminal, Copy } from 'lucide-react';
|
||||
import { SectionHeading } from '../ui/SectionHeading';
|
||||
import { GlassCard } from '../ui/GlassCard';
|
||||
import { Badge } from '../ui/Badge';
|
||||
|
||||
export const FeaturesSection: React.FC = () => {
|
||||
const [copiedCode, setCopiedCode] = useState(false);
|
||||
const [simulatedSubCount, setSimulatedSubCount] = useState<number>(5000);
|
||||
|
||||
const calculatedBuyback = (simulatedSubCount * 18 * 0.25).toLocaleString('en-US', {
|
||||
style: 'currency',
|
||||
currency: 'USD'
|
||||
});
|
||||
|
||||
const sampleSnippet = `import { SoftwareX } from '@software-x/sdk';
|
||||
|
||||
const sx = new SoftwareX({
|
||||
identityKey: process.env.SX_IDENTITY_KEY,
|
||||
ecosystemApp: 'birthday-messaging'
|
||||
});
|
||||
|
||||
// Authenticate user across 30+ ecosystem apps
|
||||
const session = await sx.auth.verifySession(token);
|
||||
console.log('User active across apps:', session.user.apps);`;
|
||||
|
||||
const copySnippet = () => {
|
||||
navigator.clipboard.writeText(sampleSnippet);
|
||||
setCopiedCode(true);
|
||||
setTimeout(() => setCopiedCode(false), 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="features" className="py-24 bg-slate-950 relative overflow-hidden border-t border-slate-900">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<SectionHeading
|
||||
badgeText="Platform Capabilities"
|
||||
badgeVariant="sky"
|
||||
title="Engineered for Performance."
|
||||
gradientTitle="Built for Scale."
|
||||
subtitle="Software X combines modern TypeScript microservices, zero-trust SSO authentication, and automated treasury buy-backs into a cohesive developer platform."
|
||||
/>
|
||||
|
||||
{/* Bento Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
|
||||
{/* Bento Card 1: Single Sign-On (Spans 2 columns on desktop) */}
|
||||
<GlassCard gradientBorder={true} className="lg:col-span-2 flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-orange-600/20 border border-orange-500/30 flex items-center justify-center text-orange-400">
|
||||
<KeyRound className="w-5 h-5" />
|
||||
</div>
|
||||
<Badge variant="tangerine">Sub-Second Auth</Badge>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-2">
|
||||
Unified SSO & Zero-Trust Identity Key
|
||||
</h3>
|
||||
<p className="text-sm text-slate-400 leading-relaxed max-w-xl">
|
||||
One single key grants seamless authentication across BirthdayMessaging.io, SignalDrop, CraftFlow, and all 30+ ecosystem products with end-to-end client encryption.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Code Snippet Box inside Bento */}
|
||||
<div className="mt-6 p-4 rounded-xl bg-slate-950 border border-slate-800 font-mono text-xs text-slate-300 relative">
|
||||
<div className="flex items-center justify-between pb-2 mb-2 border-b border-slate-800 text-[11px] text-slate-400">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Terminal className="w-3.5 h-3.5 text-orange-400" /> software-x-auth.ts
|
||||
</span>
|
||||
<button
|
||||
onClick={copySnippet}
|
||||
className="flex items-center gap-1 hover:text-white transition-colors cursor-pointer"
|
||||
>
|
||||
{copiedCode ? <Check className="w-3 h-3 text-sky-400" /> : <Copy className="w-3 h-3" />}
|
||||
<span>{copiedCode ? 'Copied' : 'Copy'}</span>
|
||||
</button>
|
||||
</div>
|
||||
<pre className="overflow-x-auto text-[11px] leading-relaxed text-orange-200">
|
||||
{sampleSnippet}
|
||||
</pre>
|
||||
</div>
|
||||
</GlassCard>
|
||||
|
||||
{/* Bento Card 2: Interactive Buy-Back Calculator */}
|
||||
<GlassCard className="flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-sky-600/20 border border-sky-500/30 flex items-center justify-center text-sky-400">
|
||||
<TrendingUp className="w-5 h-5" />
|
||||
</div>
|
||||
<Badge variant="sky">Live Simulator</Badge>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-2">
|
||||
Automated Revenue Buy-Back Engine
|
||||
</h3>
|
||||
<p className="text-xs text-slate-400 leading-relaxed">
|
||||
Adjust simulated monthly paid subscribers across the 30+ apps to calculate quarterly treasury token buy-backs:
|
||||
</p>
|
||||
|
||||
{/* Slider Input */}
|
||||
<div className="mt-6 p-4 rounded-xl bg-slate-950 border border-slate-800">
|
||||
<div className="flex items-center justify-between text-xs text-slate-300 mb-2">
|
||||
<span>Monthly SaaS Subscribers:</span>
|
||||
<span className="font-mono font-bold text-sky-400">{simulatedSubCount.toLocaleString()}</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="1000"
|
||||
max="50000"
|
||||
step="1000"
|
||||
value={simulatedSubCount}
|
||||
onChange={(e) => setSimulatedSubCount(parseInt(e.target.value, 10))}
|
||||
className="w-full accent-sky-500 cursor-pointer"
|
||||
/>
|
||||
|
||||
<div className="mt-4 pt-3 border-t border-slate-800 flex items-center justify-between text-xs">
|
||||
<span className="text-slate-400">Est. Quarterly Treasury Buy-Back:</span>
|
||||
<span className="font-mono font-bold text-sky-300 text-sm">{calculatedBuyback}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-[11px] text-slate-400 mt-4 font-mono">
|
||||
100% of buy-backs are executed on public DEX liquidity pools.
|
||||
</p>
|
||||
</GlassCard>
|
||||
|
||||
{/* Bento Card 3: AI-Powered Orchestration */}
|
||||
<GlassCard className="flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="w-10 h-10 rounded-xl bg-orange-600/20 border border-orange-500/30 flex items-center justify-center text-orange-400 mb-4">
|
||||
<Brain className="w-5 h-5" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-2">AI-Powered Orchestration</h3>
|
||||
<p className="text-xs text-slate-400 leading-relaxed">
|
||||
Deep LLM integrations generate contextual birthday greetings, optimize message dispatch windows, and summarize team communications in real-time.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-4 pt-3 border-t border-slate-800/80 flex items-center justify-between text-xs text-orange-300 font-mono">
|
||||
<span>Latency: <180ms</span>
|
||||
<span>Gemini Powered</span>
|
||||
</div>
|
||||
</GlassCard>
|
||||
|
||||
{/* Bento Card 4: Real-Time Transparency Telemetry */}
|
||||
<GlassCard className="flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="w-10 h-10 rounded-xl bg-sky-600/20 border border-sky-500/30 flex items-center justify-center text-sky-400 mb-4">
|
||||
<Activity className="w-5 h-5" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-2">Real-Time Telemetry</h3>
|
||||
<p className="text-xs text-slate-400 leading-relaxed">
|
||||
Public dashboards display live API request rates, database pings, active subscriptions, and multi-sig wallet balances with 100% mathematical integrity.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-4 pt-3 border-t border-slate-800/80 flex items-center justify-between text-xs text-sky-300 font-mono">
|
||||
<span>On-Chain Audited</span>
|
||||
<span>Public Dashboard</span>
|
||||
</div>
|
||||
</GlassCard>
|
||||
|
||||
{/* Bento Card 5: Developer SDK & Open APIs */}
|
||||
<GlassCard className="flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="w-10 h-10 rounded-xl bg-amber-600/20 border border-amber-500/30 flex items-center justify-center text-amber-400 mb-4">
|
||||
<Code2 className="w-5 h-5" />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-white mb-2">Developer SDK & Extensions</h3>
|
||||
<p className="text-xs text-slate-400 leading-relaxed">
|
||||
Build custom micro-SaaS extensions or plug third-party software into the Software X SSO identity matrix using our open-source TypeScript SDK.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-4 pt-3 border-t border-slate-800/80 flex items-center justify-between text-xs text-amber-300 font-mono">
|
||||
<span>TypeScript Native</span>
|
||||
<span>npm i @software-x/sdk</span>
|
||||
</div>
|
||||
</GlassCard>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,257 @@
|
||||
import React, { useState } from 'react';
|
||||
import { motion } from 'motion/react';
|
||||
import { ArrowRight, ShieldCheck, Layers, Sparkles, CheckCircle2, Zap, Users, Gift, Radio, Cpu, Activity } from 'lucide-react';
|
||||
import { Button } from '../ui/Button';
|
||||
import { Badge } from '../ui/Badge';
|
||||
import { AnimatedCounter } from '../ui/AnimatedCounter';
|
||||
|
||||
interface HeroSectionProps {
|
||||
onOpenWaitlist: () => void;
|
||||
onOpenTokenomics: () => void;
|
||||
onOpenVision: () => void;
|
||||
}
|
||||
|
||||
export const HeroSection: React.FC<HeroSectionProps> = ({
|
||||
onOpenWaitlist,
|
||||
onOpenTokenomics,
|
||||
onOpenVision
|
||||
}) => {
|
||||
const [activeNode, setActiveNode] = useState<string>('birthday-messaging');
|
||||
const [quickEmail, setQuickEmail] = useState('');
|
||||
|
||||
const handleQuickSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (quickEmail) {
|
||||
onOpenWaitlist();
|
||||
}
|
||||
};
|
||||
|
||||
const ecosystemNodes = [
|
||||
{ id: 'birthday-messaging', name: 'BirthdayMessaging.io', icon: Gift, users: '85k+ Users', status: 'Live Flagship', color: 'from-pink-500 to-rose-600' },
|
||||
{ id: 'software-x-core', name: 'Software X Core', icon: Cpu, users: 'Protocol Hub', status: 'Core Protocol', color: 'from-indigo-500 to-purple-600' },
|
||||
{ id: 'signaldrop', name: 'SignalDrop Protocol', icon: Radio, users: '18k+ Users', status: 'Live App', color: 'from-emerald-500 to-teal-600' },
|
||||
{ id: 'craftflow', name: 'CraftFlow Engine', icon: Zap, users: '12k+ Creators', status: 'Live App', color: 'from-amber-500 to-orange-600' }
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="relative min-h-screen pt-32 pb-20 flex flex-col justify-center overflow-hidden bg-slate-950">
|
||||
{/* Background ambient lighting effects */}
|
||||
<div className="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-orange-600/15 rounded-full blur-[120px] pointer-events-none" />
|
||||
<div className="absolute top-1/3 left-1/4 w-[400px] h-[400px] bg-sky-600/15 rounded-full blur-[100px] pointer-events-none" />
|
||||
<div className="absolute top-1/2 right-1/4 w-[500px] h-[500px] bg-amber-600/10 rounded-full blur-[120px] pointer-events-none" />
|
||||
|
||||
{/* Grid pattern overlay */}
|
||||
<div
|
||||
className="absolute inset-0 bg-[linear-gradient(to_right,#1e293b15_1px,transparent_1px),linear-gradient(to_bottom,#1e293b15_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] pointer-events-none"
|
||||
/>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 w-full">
|
||||
<div className="flex flex-col items-center text-center">
|
||||
|
||||
{/* Top Announcement Pill */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="mb-6"
|
||||
>
|
||||
<div
|
||||
onClick={onOpenVision}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-slate-900/80 border border-orange-500/30 backdrop-blur-md cursor-pointer hover:border-orange-400/60 transition-all group"
|
||||
>
|
||||
<Badge variant="sky" showDot={true}>
|
||||
Next-Gen Launch
|
||||
</Badge>
|
||||
<span className="text-xs font-medium text-slate-300 group-hover:text-white transition-colors">
|
||||
The Evolution of BirthdayMessaging.io & 30+ Products
|
||||
</span>
|
||||
<ArrowRight className="w-3.5 h-3.5 text-orange-400 group-hover:translate-x-1 transition-transform" />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Main Headline */}
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
className="text-4xl sm:text-6xl lg:text-7xl font-extrabold text-white tracking-tight max-w-4xl leading-[1.1]"
|
||||
>
|
||||
Building World-Class Software.{' '}
|
||||
<span className="bg-gradient-to-r from-orange-400 via-amber-300 to-sky-400 bg-clip-text text-transparent">
|
||||
Powered by the Community.
|
||||
</span>
|
||||
</motion.h1>
|
||||
|
||||
{/* Subtitle */}
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="mt-6 text-lg sm:text-xl text-slate-300 max-w-2xl leading-relaxed font-normal"
|
||||
>
|
||||
Software X is the core protocol connecting 30+ live digital products. Funded by a fair community token to build real, revenue-generating software — zero VC dilution.
|
||||
</motion.p>
|
||||
|
||||
{/* Fast Email Waitlist Box */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="mt-8 w-full max-w-md"
|
||||
>
|
||||
<form onSubmit={handleQuickSubmit} className="flex flex-col sm:flex-row gap-2 bg-slate-900/90 p-2 rounded-2xl border border-slate-800 backdrop-blur-xl shadow-2xl shadow-black/60">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Enter your work email address..."
|
||||
value={quickEmail}
|
||||
onChange={(e) => setQuickEmail(e.target.value)}
|
||||
className="flex-1 bg-transparent px-4 py-3 text-sm text-white placeholder-slate-400 focus:outline-none w-full"
|
||||
required
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="glow"
|
||||
size="md"
|
||||
icon={<ArrowRight className="w-4 h-4" />}
|
||||
className="w-full sm:w-auto"
|
||||
>
|
||||
Join Waitlist
|
||||
</Button>
|
||||
</form>
|
||||
<div className="flex items-center justify-center gap-4 mt-3 text-xs text-slate-400">
|
||||
<span className="flex items-center gap-1">
|
||||
<CheckCircle2 className="w-3.5 h-3.5 text-sky-400" /> No VC Presale
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<CheckCircle2 className="w-3.5 h-3.5 text-sky-400" /> Instant Queue Position
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<CheckCircle2 className="w-3.5 h-3.5 text-sky-400" /> 100% Free Access
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Quick Metrics Bar */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="mt-12 grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-8 w-full max-w-4xl py-6 px-8 rounded-2xl bg-slate-900/50 border border-slate-800/80 backdrop-blur-md"
|
||||
>
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="text-2xl sm:text-3xl font-bold text-white font-mono">
|
||||
<AnimatedCounter end={30} suffix="+" />
|
||||
</div>
|
||||
<span className="text-xs text-slate-400 mt-1">Live Ecosystem Apps</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="text-2xl sm:text-3xl font-bold text-sky-400 font-mono">
|
||||
<AnimatedCounter end={140000} suffix="+" />
|
||||
</div>
|
||||
<span className="text-xs text-slate-400 mt-1">Active Monthly Users</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="text-2xl sm:text-3xl font-bold text-orange-400 font-mono">
|
||||
$0.00
|
||||
</div>
|
||||
<span className="text-xs text-slate-400 mt-1">Venture Capital Taken</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="text-2xl sm:text-3xl font-bold text-amber-400 font-mono">
|
||||
100%
|
||||
</div>
|
||||
<span className="text-xs text-slate-400 mt-1">On-Chain Treasury Audit</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Interactive Node Interactive Visualizer */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.8, delay: 0.5 }}
|
||||
className="mt-14 w-full max-w-5xl rounded-3xl bg-slate-900/80 border border-slate-800 p-6 sm:p-8 shadow-2xl relative overflow-hidden backdrop-blur-xl"
|
||||
>
|
||||
{/* Header of Visualizer */}
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between pb-6 border-b border-slate-800 gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-3 h-3 rounded-full bg-orange-500" />
|
||||
<div className="w-3 h-3 rounded-full bg-amber-500" />
|
||||
<div className="w-3 h-3 rounded-full bg-sky-500" />
|
||||
<span className="text-xs font-mono text-slate-400 ml-2">software-x://ecosystem-matrix.v1</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="sky">Interactive Topology</Badge>
|
||||
<button
|
||||
onClick={onOpenTokenomics}
|
||||
className="text-xs text-orange-400 hover:text-orange-300 font-medium cursor-pointer"
|
||||
>
|
||||
View Treasury →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Visual Grid Nodes */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-6">
|
||||
{ecosystemNodes.map((node) => {
|
||||
const Icon = node.icon;
|
||||
const isSelected = activeNode === node.id;
|
||||
return (
|
||||
<div
|
||||
key={node.id}
|
||||
onClick={() => setActiveNode(node.id)}
|
||||
className={`p-5 rounded-2xl border transition-all cursor-pointer flex flex-col justify-between ${
|
||||
isSelected
|
||||
? 'bg-slate-800/90 border-orange-500 shadow-xl shadow-orange-950/40 ring-1 ring-orange-500/50'
|
||||
: 'bg-slate-950/60 border-slate-800/80 hover:border-slate-700'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className={`w-10 h-10 rounded-xl bg-gradient-to-tr ${node.color} flex items-center justify-center text-white shadow-md`}>
|
||||
<Icon className="w-5 h-5" />
|
||||
</div>
|
||||
<span className="text-[11px] font-mono px-2 py-0.5 rounded bg-slate-900 text-slate-300 border border-slate-800">
|
||||
{node.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-base font-bold text-white">{node.name}</h4>
|
||||
<p className="text-xs text-slate-400 mt-1 flex items-center gap-1">
|
||||
<Users className="w-3 h-3 text-sky-400" /> {node.users}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 pt-3 border-t border-slate-800/60 flex items-center justify-between text-[11px] text-slate-400 font-mono">
|
||||
<span>Status: Operational</span>
|
||||
<span className="text-sky-400">● 99.9% Uptime</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Active Node Detail Drawer inside Hero */}
|
||||
<div className="mt-6 p-4 rounded-xl bg-slate-950/90 border border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<Activity className="w-5 h-5 text-orange-400 animate-pulse" />
|
||||
<div className="text-left">
|
||||
<p className="text-xs font-mono text-slate-400">Selected Node telemetry:</p>
|
||||
<p className="text-sm font-medium text-white">
|
||||
{activeNode === 'birthday-messaging' && 'BirthdayMessaging.io: 85,000+ Active Users • Multi-channel automated engine'}
|
||||
{activeNode === 'software-x-core' && 'Software X Core Protocol: Unified Single Sign-On and automated revenue burn contracts'}
|
||||
{activeNode === 'signaldrop' && 'SignalDrop Protocol: 18,200+ Active encrypted message routes across 24 regions'}
|
||||
{activeNode === 'craftflow' && 'CraftFlow Engine: 12,400+ Active workflows deployed with sub-50ms execution runtime'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={onOpenWaitlist}>
|
||||
Access Protocol
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,146 @@
|
||||
import React, { useState } from 'react';
|
||||
import { motion } from 'motion/react';
|
||||
import { XCircle, CheckCircle, ShieldAlert, HeartHandshake, Lock, Unlock, TrendingUp, DollarSign } from 'lucide-react';
|
||||
import { SectionHeading } from '../ui/SectionHeading';
|
||||
import { GlassCard } from '../ui/GlassCard';
|
||||
|
||||
export const ProblemSection: React.FC = () => {
|
||||
const [activeTab, setActiveTab] = useState<'vc' | 'community'>('vc');
|
||||
|
||||
const vcProblems = [
|
||||
{
|
||||
title: 'Forced Liquidation & Sudden Exits',
|
||||
description: 'VCs prioritize rapid 10x returns within 5-7 years, often forcing founders into premature acquisitions or aggressive price hikes that ruin product quality.',
|
||||
icon: ShieldAlert
|
||||
},
|
||||
{
|
||||
title: 'Hidden Cap Tables & Board Room Controls',
|
||||
description: 'Decisions are made behind closed doors by investors who rarely use the software, overriding product vision in favor of short-term quarterly targets.',
|
||||
icon: Lock
|
||||
},
|
||||
{
|
||||
title: 'User Exploitation & Aggressive Monetization',
|
||||
description: 'When growth slows, VC-backed companies monetize user data, lock features behind expensive paywalls, or shut down products after acquisitions.',
|
||||
icon: DollarSign
|
||||
}
|
||||
];
|
||||
|
||||
const communitySolutions = [
|
||||
{
|
||||
title: '100% Product-First Alignment',
|
||||
description: 'No external investor board forcing premature exits. The team focuses strictly on building extraordinary software for the actual people who use it.',
|
||||
icon: HeartHandshake
|
||||
},
|
||||
{
|
||||
title: 'Verifiable Public Treasury',
|
||||
description: '100% of community-funded treasury reserves and subscription revenues are tracked on public smart contracts with full auditability.',
|
||||
icon: Unlock
|
||||
},
|
||||
{
|
||||
title: 'Automated Value Redistribution',
|
||||
description: 'Subscription revenues generated across BirthdayMessaging.io and 30+ products automatically fund product updates and token buy-backs.',
|
||||
icon: TrendingUp
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="why-community" className="py-24 bg-slate-950 relative overflow-hidden border-t border-slate-900">
|
||||
{/* Background glow */}
|
||||
<div className="absolute top-1/2 left-0 w-96 h-96 bg-orange-500/5 rounded-full blur-[120px] pointer-events-none" />
|
||||
<div className="absolute bottom-0 right-0 w-96 h-96 bg-sky-500/5 rounded-full blur-[120px] pointer-events-none" />
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<SectionHeading
|
||||
badgeText="Why We Built Differently"
|
||||
badgeVariant="tangerine"
|
||||
title="Traditional VC Capital vs."
|
||||
gradientTitle="Community-Powered Funding"
|
||||
subtitle="Venture capital forces software companies into short-term quarterly metrics and investor-first decisions. Software X aligns founders and users directly."
|
||||
/>
|
||||
|
||||
{/* Comparison Toggle Control */}
|
||||
<div className="flex justify-center mb-10">
|
||||
<div className="bg-slate-900 p-1.5 rounded-full border border-slate-800 flex items-center gap-1 shadow-inner">
|
||||
<button
|
||||
onClick={() => setActiveTab('vc')}
|
||||
className={`px-5 py-2.5 rounded-full text-xs font-semibold transition-all cursor-pointer flex items-center gap-2 ${
|
||||
activeTab === 'vc'
|
||||
? 'bg-rose-950/80 text-rose-300 border border-rose-500/40 shadow-md'
|
||||
: 'text-slate-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<XCircle className="w-4 h-4 text-rose-400" />
|
||||
The VC Dilemma
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('community')}
|
||||
className={`px-5 py-2.5 rounded-full text-xs font-semibold transition-all cursor-pointer flex items-center gap-2 ${
|
||||
activeTab === 'community'
|
||||
? 'bg-sky-950/80 text-sky-300 border border-sky-500/40 shadow-md'
|
||||
: 'text-slate-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<CheckCircle className="w-4 h-4 text-sky-400" />
|
||||
Software X Model
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Interactive Comparison Display */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{(activeTab === 'vc' ? vcProblems : communitySolutions).map((item, idx) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={item.title}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, delay: idx * 0.1 }}
|
||||
>
|
||||
<GlassCard
|
||||
className={`h-full border-t-2 ${
|
||||
activeTab === 'vc'
|
||||
? 'border-t-rose-500/50 hover:border-rose-500/80'
|
||||
: 'border-t-sky-500/50 hover:border-sky-500/80'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className={`w-12 h-12 rounded-2xl flex items-center justify-center ${
|
||||
activeTab === 'vc'
|
||||
? 'bg-rose-950/60 text-rose-400 border border-rose-500/30'
|
||||
: 'bg-sky-950/60 text-sky-400 border border-sky-500/30'
|
||||
}`}>
|
||||
<Icon className="w-6 h-6" />
|
||||
</div>
|
||||
<span className="text-[11px] font-mono tracking-widest uppercase text-slate-400">
|
||||
0{idx + 1}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold text-white mb-2">{item.title}</h3>
|
||||
<p className="text-sm text-slate-400 leading-relaxed">{item.description}</p>
|
||||
</GlassCard>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Bottom Callout Banner */}
|
||||
<div className="mt-12 p-6 sm:p-8 rounded-2xl bg-gradient-to-r from-slate-900 via-orange-950/40 to-slate-900 border border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-orange-600/20 border border-orange-500/30 flex items-center justify-center text-orange-400 flex-shrink-0">
|
||||
<HeartHandshake className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-base font-bold text-white">Software Built to Last, Not to Flip</h4>
|
||||
<p className="text-xs sm:text-sm text-slate-400 mt-1 max-w-xl">
|
||||
By funding Software X with a community-driven model, 100% of our incentives remain anchored to building real software solutions that users love every single day.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,128 @@
|
||||
import React, { useState } from 'react';
|
||||
import { motion } from 'motion/react';
|
||||
import { CheckCircle2, Clock, Calendar, ArrowRight, ShieldCheck } from 'lucide-react';
|
||||
import { SectionHeading } from '../ui/SectionHeading';
|
||||
import { GlassCard } from '../ui/GlassCard';
|
||||
import { Badge } from '../ui/Badge';
|
||||
import { roadmapData } from '../../data/roadmap';
|
||||
|
||||
interface RoadmapSectionProps {
|
||||
onOpenWaitlist: () => void;
|
||||
}
|
||||
|
||||
export const RoadmapSection: React.FC<RoadmapSectionProps> = ({ onOpenWaitlist }) => {
|
||||
const [activePhaseIndex, setActivePhaseIndex] = useState<number>(1); // Default to current Phase 2
|
||||
|
||||
return (
|
||||
<section id="roadmap" className="py-24 bg-slate-950 relative overflow-hidden border-t border-slate-900">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<SectionHeading
|
||||
badgeText="Public Milestones"
|
||||
badgeVariant="tangerine"
|
||||
title="Transparent Roadmap."
|
||||
gradientTitle="Execution Driven."
|
||||
subtitle="Track our engineering progression step-by-step from live micro-SaaS foundation to decentralized protocol deployment."
|
||||
/>
|
||||
|
||||
{/* Phase Selection Stepper Header */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5 gap-3 mb-10">
|
||||
{roadmapData.map((phase, idx) => {
|
||||
const isSelected = activePhaseIndex === idx;
|
||||
const isCompleted = phase.status === 'completed';
|
||||
const isCurrent = phase.status === 'current';
|
||||
|
||||
return (
|
||||
<button
|
||||
key={phase.quarter}
|
||||
onClick={() => setActivePhaseIndex(idx)}
|
||||
className={`p-4 rounded-2xl border text-left transition-all cursor-pointer flex flex-col justify-between ${
|
||||
isSelected
|
||||
? 'bg-slate-900 border-orange-500 ring-1 ring-orange-500/40 shadow-xl'
|
||||
: 'bg-slate-950/60 border-slate-800/80 hover:border-slate-700'
|
||||
}`}
|
||||
>
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-[11px] font-mono text-slate-400">0{idx + 1}</span>
|
||||
{isCompleted && <Badge variant="sky" showDot={false}>Done</Badge>}
|
||||
{isCurrent && <Badge variant="tangerine" showDot={true}>Active</Badge>}
|
||||
{!isCompleted && !isCurrent && <Badge variant="neutral" showDot={false}>Upcoming</Badge>}
|
||||
</div>
|
||||
<h4 className="text-xs font-bold text-white line-clamp-1">{phase.quarter}</h4>
|
||||
</div>
|
||||
<p className="text-[11px] text-slate-400 mt-2 line-clamp-1">{phase.title}</p>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Selected Phase Active Card */}
|
||||
<motion.div
|
||||
key={activePhaseIndex}
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<GlassCard gradientBorder={true} className="p-8">
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 pb-6 border-b border-slate-800">
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge
|
||||
variant={
|
||||
roadmapData[activePhaseIndex].status === 'completed'
|
||||
? 'sky'
|
||||
: roadmapData[activePhaseIndex].status === 'current'
|
||||
? 'tangerine'
|
||||
: 'sky'
|
||||
}
|
||||
>
|
||||
{roadmapData[activePhaseIndex].quarter}
|
||||
</Badge>
|
||||
<span className="text-xs font-mono text-slate-400 flex items-center gap-1">
|
||||
<Calendar className="w-3.5 h-3.5" /> Stage {activePhaseIndex + 1} of 5
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-white mt-2">
|
||||
{roadmapData[activePhaseIndex].title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={onOpenWaitlist}
|
||||
className="text-xs font-semibold text-orange-400 hover:text-orange-300 flex items-center gap-1 cursor-pointer"
|
||||
>
|
||||
Get early waitlist updates <ArrowRight className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-slate-300 mt-6 leading-relaxed">
|
||||
{roadmapData[activePhaseIndex].description}
|
||||
</p>
|
||||
|
||||
{/* Milestones Checklist */}
|
||||
<div className="mt-8">
|
||||
<h4 className="text-xs font-mono uppercase tracking-widest text-slate-400 mb-4 font-semibold">
|
||||
Milestones & Deliverables
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{roadmapData[activePhaseIndex].milestones.map((milestone, i) => (
|
||||
<div key={i} className="p-3.5 rounded-xl bg-slate-950/80 border border-slate-800/80 flex items-start gap-3">
|
||||
<CheckCircle2 className={`w-4 h-4 mt-0.5 flex-shrink-0 ${
|
||||
roadmapData[activePhaseIndex].status === 'completed'
|
||||
? 'text-sky-400'
|
||||
: roadmapData[activePhaseIndex].status === 'current'
|
||||
? 'text-orange-400'
|
||||
: 'text-slate-500'
|
||||
}`} />
|
||||
<span className="text-xs text-slate-200 leading-relaxed">{milestone}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</GlassCard>
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,135 @@
|
||||
import React from 'react';
|
||||
import { motion } from 'motion/react';
|
||||
import { Layers, Gift, Cpu, ArrowRight, ShieldCheck, Database, RefreshCw, Zap } from 'lucide-react';
|
||||
import { SectionHeading } from '../ui/SectionHeading';
|
||||
import { GlassCard } from '../ui/GlassCard';
|
||||
|
||||
export const SolutionSection: React.FC = () => {
|
||||
return (
|
||||
<section id="solution" className="py-24 bg-slate-950 relative overflow-hidden border-t border-slate-900">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<SectionHeading
|
||||
badgeText="The Solution Architecture"
|
||||
badgeVariant="tangerine"
|
||||
title="From BirthdayMessaging.io to"
|
||||
gradientTitle="Software X Ecosystem"
|
||||
subtitle="Software X is not an abstract whitepaper. It is the evolution of a proven, live software product that already powers messaging for thousands of daily users."
|
||||
/>
|
||||
|
||||
{/* 3 Step Evolution Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
|
||||
<GlassCard gradientBorder={true} className="flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-tr from-orange-500 to-amber-600 flex items-center justify-center text-white mb-6 shadow-lg shadow-orange-950/40">
|
||||
<Gift className="w-6 h-6" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="text-xs font-mono text-orange-400 uppercase tracking-wider font-semibold">Step 01 • Foundation</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-3">BirthdayMessaging.io</h3>
|
||||
<p className="text-sm text-slate-400 leading-relaxed mb-4">
|
||||
Launched as a specialized automated messaging platform. Grew organically to 85,000+ users with zero VC funding, proving real customer demand for automated communication.
|
||||
</p>
|
||||
</div>
|
||||
<div className="pt-4 border-t border-slate-800/80 flex items-center justify-between text-xs text-slate-400 font-mono">
|
||||
<span>Status: Live & Profitable</span>
|
||||
<span className="text-sky-400">85,000+ Users</span>
|
||||
</div>
|
||||
</GlassCard>
|
||||
|
||||
<GlassCard gradientBorder={true} className="flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-tr from-sky-500 to-blue-600 flex items-center justify-center text-white mb-6 shadow-lg shadow-sky-950/40">
|
||||
<Layers className="w-6 h-6" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="text-xs font-mono text-sky-400 uppercase tracking-wider font-semibold">Step 02 • Expansion</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-3">30+ Micro-SaaS Suite</h3>
|
||||
<p className="text-sm text-slate-400 leading-relaxed mb-4">
|
||||
Expanded the technology stack into 30+ targeted digital products across encrypted messaging (SignalDrop), visual automation (CraftFlow), and live analytics.
|
||||
</p>
|
||||
</div>
|
||||
<div className="pt-4 border-t border-slate-800/80 flex items-center justify-between text-xs text-slate-400 font-mono">
|
||||
<span>Status: Operational</span>
|
||||
<span className="text-orange-400">30+ Apps</span>
|
||||
</div>
|
||||
</GlassCard>
|
||||
|
||||
<GlassCard gradientBorder={true} className="flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-tr from-amber-500 to-orange-600 flex items-center justify-center text-white mb-6 shadow-lg shadow-orange-950/40">
|
||||
<Cpu className="w-6 h-6" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="text-xs font-mono text-amber-400 uppercase tracking-wider font-semibold">Step 03 • Software X</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-3">Community Core Protocol</h3>
|
||||
<p className="text-sm text-slate-400 leading-relaxed mb-4">
|
||||
Unifying all products under a single SSO identity key and fair community token economics, ensuring net software revenues directly support treasury growth.
|
||||
</p>
|
||||
</div>
|
||||
<div className="pt-4 border-t border-slate-800/80 flex items-center justify-between text-xs text-slate-400 font-mono">
|
||||
<span>Status: Waitlist Active</span>
|
||||
<span className="text-sky-400">Protocol V1</span>
|
||||
</div>
|
||||
</GlassCard>
|
||||
</div>
|
||||
|
||||
{/* Real-time Architecture Flow Visualizer */}
|
||||
<div className="p-8 rounded-3xl bg-slate-900/90 border border-slate-800 relative overflow-hidden backdrop-blur-xl">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-6 pb-6 border-b border-slate-800">
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-white flex items-center gap-2">
|
||||
<Zap className="w-5 h-5 text-orange-400" />
|
||||
The Software X Circular Value Engine
|
||||
</h3>
|
||||
<p className="text-xs text-slate-400 mt-1">
|
||||
How real user subscription revenue drives protocol liquidity without relying on token inflation.
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-xs font-mono px-3 py-1 rounded-full bg-orange-950 text-orange-300 border border-orange-500/30">
|
||||
Zero Inflation • Product Backed
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mt-8">
|
||||
<div className="p-4 rounded-xl bg-slate-950/80 border border-slate-800 text-center">
|
||||
<div className="text-xs font-mono text-slate-400 mb-1">01. Real SaaS Users</div>
|
||||
<h4 className="text-sm font-bold text-white">SaaS Subscriptions</h4>
|
||||
<p className="text-xs text-slate-400 mt-1">Users pay standard SaaS fees for BirthdayMessaging & 30+ apps</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-xl bg-slate-950/80 border border-slate-800 text-center relative">
|
||||
<div className="hidden md:block absolute -left-3 top-1/2 -translate-y-1/2 z-10 text-orange-500">
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</div>
|
||||
<div className="text-xs font-mono text-orange-400 mb-1">02. On-Chain Revenue</div>
|
||||
<h4 className="text-sm font-bold text-white">Treasury Route</h4>
|
||||
<p className="text-xs text-slate-400 mt-1">Gross revenue routed into public multi-sig treasury smart contracts</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-xl bg-slate-950/80 border border-slate-800 text-center relative">
|
||||
<div className="hidden md:block absolute -left-3 top-1/2 -translate-y-1/2 z-10 text-orange-500">
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</div>
|
||||
<div className="text-xs font-mono text-sky-400 mb-1">03. Software Engineering</div>
|
||||
<h4 className="text-sm font-bold text-white">Continuous R&D</h4>
|
||||
<p className="text-xs text-slate-400 mt-1">Treasury directly funds senior engineers, AI models & security audits</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-xl bg-slate-950/80 border border-slate-800 text-center relative">
|
||||
<div className="hidden md:block absolute -left-3 top-1/2 -translate-y-1/2 z-10 text-orange-500">
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</div>
|
||||
<div className="text-xs font-mono text-amber-400 mb-1">04. Buy-Back & Burn</div>
|
||||
<h4 className="text-sm font-bold text-white">Token Value Loop</h4>
|
||||
<p className="text-xs text-slate-400 mt-1">Automated smart contracts execute market buy-backs of $SX</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,138 @@
|
||||
import React, { useState } from 'react';
|
||||
import { motion } from 'motion/react';
|
||||
import { ShieldCheck, Award, Zap, Sparkles } from 'lucide-react';
|
||||
import { SectionHeading } from '../ui/SectionHeading';
|
||||
import { GlassCard } from '../ui/GlassCard';
|
||||
import { AnimatedCounter } from '../ui/AnimatedCounter';
|
||||
import { Badge } from '../ui/Badge';
|
||||
|
||||
export const StatsSection: React.FC = () => {
|
||||
const [selectedRole, setSelectedRole] = useState<'developer' | 'creator' | 'supporter'>('creator');
|
||||
|
||||
const tierPerks = {
|
||||
developer: {
|
||||
title: 'Developer Tier (API Access)',
|
||||
positionBoost: 'Top 5% Priority Access',
|
||||
perks: ['Free $SX SDK API Quota', 'Access to Software X Private Auth Sandbox', 'Direct Discord Dev Channel Access']
|
||||
},
|
||||
creator: {
|
||||
title: 'Creator & User Tier',
|
||||
positionBoost: 'Top 10% Priority Access',
|
||||
perks: ['Lifetime Discount on BirthdayMessaging.io', 'Early Access to CraftFlow & SignalDrop', 'Community Governance Voting Rights']
|
||||
},
|
||||
supporter: {
|
||||
title: 'Ecosystem Believer Tier',
|
||||
positionBoost: 'Priority Tokenomics Queue',
|
||||
perks: ['Verifiable On-Chain Waitlist Badge', 'Exclusive Founder Q&A Access', 'Public Treasury Telemetry Stream']
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="py-24 bg-slate-950 relative overflow-hidden border-t border-slate-900">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<SectionHeading
|
||||
badgeText="Verified Impact"
|
||||
badgeVariant="sky"
|
||||
title="Numbers That Prove"
|
||||
gradientTitle="Real Software Adoption"
|
||||
subtitle="Software X is backed by real metrics from existing software products operating every day."
|
||||
/>
|
||||
|
||||
{/* 4 Big Metrics Grid */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
|
||||
<GlassCard className="text-center py-8">
|
||||
<div className="text-3xl sm:text-4xl font-extrabold text-white font-mono">
|
||||
<AnimatedCounter prefix="$" end={4200000} suffix="+" />
|
||||
</div>
|
||||
<p className="text-xs text-slate-400 mt-2 font-mono">Ecosystem SaaS Volume</p>
|
||||
</GlassCard>
|
||||
|
||||
<GlassCard className="text-center py-8">
|
||||
<div className="text-3xl sm:text-4xl font-extrabold text-orange-400 font-mono">
|
||||
<AnimatedCounter end={30} suffix="+" />
|
||||
</div>
|
||||
<p className="text-xs text-slate-400 mt-2 font-mono">Operational Products</p>
|
||||
</GlassCard>
|
||||
|
||||
<GlassCard className="text-center py-8">
|
||||
<div className="text-3xl sm:text-4xl font-extrabold text-sky-400 font-mono">
|
||||
<AnimatedCounter end={140000} suffix="+" />
|
||||
</div>
|
||||
<p className="text-xs text-slate-400 mt-2 font-mono">Active Monthly Users</p>
|
||||
</GlassCard>
|
||||
|
||||
<GlassCard className="text-center py-8">
|
||||
<div className="text-3xl sm:text-4xl font-extrabold text-amber-400 font-mono">
|
||||
100%
|
||||
</div>
|
||||
<p className="text-xs text-slate-400 mt-2 font-mono">On-Chain Treasury Audit</p>
|
||||
</GlassCard>
|
||||
</div>
|
||||
|
||||
{/* Interactive Community Priority Tier Estimator */}
|
||||
<div className="p-8 rounded-3xl bg-slate-900/90 border border-slate-800 backdrop-blur-xl">
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 pb-6 border-b border-slate-800">
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="tangerine">Priority Estimator</Badge>
|
||||
<span className="text-xs font-mono text-slate-400">Select Your Role:</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mt-1">
|
||||
Early Access Queue & Community Tier
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Role Selectors */}
|
||||
<div className="flex items-center gap-2 bg-slate-950 p-1.5 rounded-xl border border-slate-800">
|
||||
<button
|
||||
onClick={() => setSelectedRole('creator')}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all cursor-pointer ${
|
||||
selectedRole === 'creator' ? 'bg-orange-600 text-white' : 'text-slate-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
Software User
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSelectedRole('developer')}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all cursor-pointer ${
|
||||
selectedRole === 'developer' ? 'bg-orange-600 text-white' : 'text-slate-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
Developer
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSelectedRole('supporter')}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all cursor-pointer ${
|
||||
selectedRole === 'supporter' ? 'bg-orange-600 text-white' : 'text-slate-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
Ecosystem Believer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
<div>
|
||||
<h4 className="text-lg font-bold text-orange-300">
|
||||
{tierPerks[selectedRole].title}
|
||||
</h4>
|
||||
<p className="text-xs text-sky-400 font-mono mt-1 flex items-center gap-1">
|
||||
<Zap className="w-3.5 h-3.5" /> Boost: {tierPerks[selectedRole].positionBoost}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-3">
|
||||
{tierPerks[selectedRole].perks.map((perk, i) => (
|
||||
<div key={i} className="px-3.5 py-2 rounded-xl bg-slate-950 border border-slate-800 text-xs text-slate-300 flex items-center gap-2">
|
||||
<Award className="w-3.5 h-3.5 text-orange-400" />
|
||||
<span>{perk}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,115 @@
|
||||
import React from 'react';
|
||||
import { motion, AnimatePresence } from 'motion/react';
|
||||
import { X, PieChart, ShieldCheck, Lock, Repeat, Sparkles } from 'lucide-react';
|
||||
import { tokenomicsAllocations } from '../../data/tokenomics';
|
||||
import { Badge } from '../ui/Badge';
|
||||
import { Button } from '../ui/Button';
|
||||
|
||||
interface TokenomicsModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onOpenWaitlist: () => void;
|
||||
}
|
||||
|
||||
export const TokenomicsModal: React.FC<TokenomicsModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
onOpenWaitlist
|
||||
}) => {
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 overflow-y-auto">
|
||||
{/* Backdrop */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={onClose}
|
||||
className="fixed inset-0 bg-slate-950/85 backdrop-blur-xl"
|
||||
/>
|
||||
|
||||
{/* Modal Window */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95, y: 20 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.95, y: 20 }}
|
||||
className="relative w-full max-w-3xl bg-slate-900 border border-slate-800 rounded-3xl p-6 sm:p-10 shadow-2xl z-10 max-h-[90vh] overflow-y-auto"
|
||||
>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute top-6 right-6 p-2 rounded-xl bg-slate-800 text-slate-400 hover:text-white transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<Badge variant="tangerine">Token Economics</Badge>
|
||||
<span className="text-xs font-mono text-slate-400">Total Supply: 1,000,000,000 $SX</span>
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl sm:text-3xl font-extrabold text-white">
|
||||
Transparent Token Allocation Blueprint
|
||||
</h2>
|
||||
<p className="text-xs text-orange-400 font-mono mt-1">
|
||||
Zero insider presales. Zero VC discount tokens. 100% public smart contract vesting.
|
||||
</p>
|
||||
|
||||
{/* Allocation Bar */}
|
||||
<div className="mt-6 flex h-4 rounded-full overflow-hidden bg-slate-950 p-0.5 border border-slate-800">
|
||||
{tokenomicsAllocations.map((item) => (
|
||||
<div
|
||||
key={item.category}
|
||||
style={{ width: `${item.percentage}%`, backgroundColor: item.color }}
|
||||
className="h-full transition-all"
|
||||
title={`${item.category}: ${item.percentage}%`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Detailed Allocation List */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
|
||||
{tokenomicsAllocations.map((item) => (
|
||||
<div key={item.category} className="p-4 rounded-2xl bg-slate-950 border border-slate-800 flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs font-bold text-white flex items-center gap-2">
|
||||
<span className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: item.color }} />
|
||||
{item.category}
|
||||
</span>
|
||||
<span className="font-mono text-xs font-extrabold text-orange-300">{item.percentage}%</span>
|
||||
</div>
|
||||
<p className="text-xs text-slate-400 leading-relaxed">{item.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 pt-3 border-t border-slate-800/80 flex items-center justify-between text-[11px] font-mono text-slate-400">
|
||||
<span>Lockup: {item.lockup}</span>
|
||||
<span className="text-sky-400">{item.tokens}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-6 border-t border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-2 text-xs text-slate-400">
|
||||
<Lock className="w-4 h-4 text-sky-400" />
|
||||
<span>Multi-Sig Lockup Smart Contracts Verifiable on Blockchain</span>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="glow"
|
||||
size="md"
|
||||
onClick={() => {
|
||||
onClose();
|
||||
onOpenWaitlist();
|
||||
}}
|
||||
>
|
||||
Reserve Waitlist Spot
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</AnimatePresence>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,114 @@
|
||||
import React from 'react';
|
||||
import { motion, AnimatePresence } from 'motion/react';
|
||||
import { X, ShieldCheck, Layers, Gift, CheckCircle2, HeartHandshake } from 'lucide-react';
|
||||
import { Badge } from '../ui/Badge';
|
||||
import { Button } from '../ui/Button';
|
||||
|
||||
interface VisionManifestoModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onOpenWaitlist: () => void;
|
||||
}
|
||||
|
||||
export const VisionManifestoModal: React.FC<VisionManifestoModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
onOpenWaitlist
|
||||
}) => {
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 overflow-y-auto">
|
||||
{/* Backdrop */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={onClose}
|
||||
className="fixed inset-0 bg-slate-950/85 backdrop-blur-xl"
|
||||
/>
|
||||
|
||||
{/* Modal Window */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95, y: 20 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.95, y: 20 }}
|
||||
className="relative w-full max-w-3xl bg-slate-900 border border-slate-800 rounded-3xl p-6 sm:p-10 shadow-2xl z-10 max-h-[90vh] overflow-y-auto"
|
||||
>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute top-6 right-6 p-2 rounded-xl bg-slate-800 text-slate-400 hover:text-white transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<Badge variant="tangerine">Official Declaration</Badge>
|
||||
<span className="text-xs font-mono text-slate-400">Public Document #001</span>
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl sm:text-3xl font-extrabold text-white">
|
||||
The Software X Founder Manifesto
|
||||
</h2>
|
||||
<p className="text-xs text-orange-400 font-mono mt-1">
|
||||
Why we are funding software through a community token instead of Venture Capital.
|
||||
</p>
|
||||
|
||||
<div className="mt-6 space-y-4 text-sm text-slate-300 leading-relaxed border-t border-slate-800 pt-6 font-normal">
|
||||
<p>
|
||||
In 2024, we built <strong>BirthdayMessaging.io</strong>. It was a simple, elegant idea: automate meaningful personal messages so people never miss key milestones in the lives of their clients and loved ones. It grew organically to serve over 85,000 active users.
|
||||
</p>
|
||||
<p>
|
||||
From that single product grew an ecosystem of <strong>30+ digital micro-SaaS applications</strong> covering encrypted routing, workflow automation, and live telemetry.
|
||||
</p>
|
||||
<p>
|
||||
When it came time to scale this ecosystem into <strong>Software X</strong>, traditional venture capital firms offered millions in exchange for board seats, liquidation preferences, and exit timelines. We turned them down.
|
||||
</p>
|
||||
<p className="p-4 rounded-xl bg-slate-950 border border-orange-500/30 text-white font-medium italic">
|
||||
"When VCs fund software, the investor becomes the customer and the user becomes the product. By funding Software X through a fair community token, our incentives remain 100% aligned with our software users."
|
||||
</p>
|
||||
<h4 className="text-base font-bold text-white pt-2">Our Irrevocable Pledges:</h4>
|
||||
<ul className="space-y-2 text-xs text-slate-300 font-mono">
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-sky-400" /> 1. Real revenue-generating software always precedes token launches.
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-sky-400" /> 2. Zero VC allocations, zero secret discount presales.
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-sky-400" /> 3. Multi-sig treasury contracts audited and visible on-chain 24/7.
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-sky-400" /> 4. Software subscription profits automatically buy back $SX tokens.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-6 border-t border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-tr from-orange-500 via-amber-500 to-sky-500 flex items-center justify-center text-white font-bold text-xs">
|
||||
SX
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<p className="text-xs font-bold text-white">Software X Core Engineering Team</p>
|
||||
<p className="text-[11px] text-slate-400 font-mono">Creators of BirthdayMessaging.io</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="glow"
|
||||
size="md"
|
||||
onClick={() => {
|
||||
onClose();
|
||||
onOpenWaitlist();
|
||||
}}
|
||||
>
|
||||
Join Early Access Waitlist
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</AnimatePresence>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,296 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { motion, AnimatePresence } from 'motion/react';
|
||||
import confetti from 'canvas-confetti';
|
||||
import { CheckCircle2, Sparkles, Copy, Share2, ArrowRight, ShieldCheck, Mail, User, Tag, Lock, Users } from 'lucide-react';
|
||||
import { SectionHeading } from '../ui/SectionHeading';
|
||||
import { GlassCard } from '../ui/GlassCard';
|
||||
import { Button } from '../ui/Button';
|
||||
import { WaitlistEntry } from '../../types';
|
||||
import { registerForWaitlist, subscribeToWaitlistStats, WaitlistStats } from '../../lib/firebase';
|
||||
|
||||
export const WaitlistSection: React.FC = () => {
|
||||
const [email, setEmail] = useState('');
|
||||
const [fullName, setFullName] = useState('');
|
||||
const [role, setRole] = useState('Software User');
|
||||
const [referralInput, setReferralInput] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [submittedEntry, setSubmittedEntry] = useState<WaitlistEntry | null>(null);
|
||||
const [copiedLink, setCopiedLink] = useState(false);
|
||||
const [liveStats, setLiveStats] = useState<WaitlistStats>({
|
||||
totalCount: 2871,
|
||||
totalFundedAmount: 142500,
|
||||
recentRegistrationsCount: 1
|
||||
});
|
||||
|
||||
const rolesList = [
|
||||
'Software User',
|
||||
'Developer',
|
||||
'Community Believer',
|
||||
'Founder / Creator',
|
||||
'Ecosystem Backer'
|
||||
];
|
||||
|
||||
// Subscribe to real-time Firestore database counter
|
||||
useEffect(() => {
|
||||
const unsubscribe = subscribeToWaitlistStats((stats) => {
|
||||
setLiveStats(stats);
|
||||
});
|
||||
|
||||
// Check if user already registered previously in this browser
|
||||
const saved = localStorage.getItem('software_x_my_waitlist_entry');
|
||||
if (saved) {
|
||||
try {
|
||||
const parsed = JSON.parse(saved);
|
||||
setSubmittedEntry(parsed);
|
||||
} catch (err) {
|
||||
// ignore invalid JSON
|
||||
}
|
||||
}
|
||||
|
||||
return () => unsubscribe();
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!email) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
const result = await registerForWaitlist({
|
||||
email,
|
||||
fullName: fullName || role,
|
||||
tier: 'Supporter',
|
||||
investmentAmount: 25,
|
||||
referredBy: referralInput || undefined
|
||||
});
|
||||
|
||||
const newEntry: WaitlistEntry = {
|
||||
id: result.id,
|
||||
email: result.email,
|
||||
role: role,
|
||||
referralCode: result.referralCode,
|
||||
position: result.position,
|
||||
createdAt: new Date().toISOString()
|
||||
};
|
||||
|
||||
localStorage.setItem('software_x_my_waitlist_entry', JSON.stringify(newEntry));
|
||||
setSubmittedEntry(newEntry);
|
||||
|
||||
// Trigger Confetti Celebration!
|
||||
try {
|
||||
confetti({
|
||||
particleCount: 100,
|
||||
spread: 80,
|
||||
origin: { y: 0.6 }
|
||||
});
|
||||
} catch (err) {
|
||||
// Fallback silently
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Waitlist submit error:', err);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const copyReferralLink = () => {
|
||||
if (!submittedEntry) return;
|
||||
const link = `${window.location.origin}?ref=${submittedEntry.referralCode}`;
|
||||
navigator.clipboard.writeText(link);
|
||||
setCopiedLink(true);
|
||||
setTimeout(() => setCopiedLink(false), 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="waitlist" className="py-24 bg-slate-950 relative overflow-hidden border-t border-slate-900">
|
||||
{/* Glow shapes */}
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] h-[700px] bg-gradient-to-tr from-orange-600/20 via-amber-600/10 to-sky-500/20 rounded-full blur-[140px] pointer-events-none" />
|
||||
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
<SectionHeading
|
||||
badgeText={`Live Queue: #${liveStats.totalCount.toLocaleString()} Registered`}
|
||||
badgeVariant="sky"
|
||||
title="Join the Software X"
|
||||
gradientTitle="Early Access Waitlist"
|
||||
subtitle="Be among the first to access Software X Core Protocol, test private beta builds across 30+ products, and claim community rewards."
|
||||
/>
|
||||
|
||||
{/* Live Registered Counter Badge */}
|
||||
<div className="mb-8 flex justify-center">
|
||||
<div className="inline-flex items-center gap-2.5 px-4 py-2 rounded-full bg-slate-900/90 border border-sky-500/30 backdrop-blur-md shadow-lg">
|
||||
<Users className="w-4 h-4 text-sky-400" />
|
||||
<span className="text-xs font-mono font-bold text-slate-200">
|
||||
Real-time Database Counter: <span className="text-sky-400 font-extrabold">{liveStats.totalCount.toLocaleString()} Backers Registered</span>
|
||||
</span>
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
{!submittedEntry ? (
|
||||
<motion.div
|
||||
key="form"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
>
|
||||
<GlassCard gradientBorder={true} className="p-8 sm:p-10">
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-6">
|
||||
|
||||
{/* Email & Name Grid */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-xs font-mono uppercase tracking-widest text-slate-300 mb-2 font-semibold">
|
||||
Work or Personal Email <span className="text-orange-400">*</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Mail className="w-4 h-4 text-slate-400 absolute left-4 top-1/2 -translate-y-1/2" />
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
placeholder="[email protected]"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full bg-slate-950 border border-slate-800 rounded-xl pl-11 pr-4 py-3.5 text-sm text-white placeholder-slate-400 focus:outline-none focus:border-orange-500 focus:ring-1 focus:ring-orange-500 transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-mono uppercase tracking-widest text-slate-300 mb-2 font-semibold">
|
||||
Full Name or Handle
|
||||
</label>
|
||||
<div className="relative">
|
||||
<User className="w-4 h-4 text-slate-400 absolute left-4 top-1/2 -translate-y-1/2" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Your Name / Handle"
|
||||
value={fullName}
|
||||
onChange={(e) => setFullName(e.target.value)}
|
||||
className="w-full bg-slate-950 border border-slate-800 rounded-xl pl-11 pr-4 py-3.5 text-sm text-white placeholder-slate-400 focus:outline-none focus:border-orange-500 focus:ring-1 focus:ring-orange-500 transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Role Selector */}
|
||||
<div>
|
||||
<label className="block text-xs font-mono uppercase tracking-widest text-slate-300 mb-2 font-semibold">
|
||||
Primary Interest / Role
|
||||
</label>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2.5">
|
||||
{rolesList.map((r) => (
|
||||
<button
|
||||
key={r}
|
||||
type="button"
|
||||
onClick={() => setRole(r)}
|
||||
className={`p-3 rounded-xl border text-xs font-medium transition-all text-left cursor-pointer ${
|
||||
role === r
|
||||
? 'bg-orange-950/80 border-orange-500 text-white shadow-md'
|
||||
: 'bg-slate-950 border-slate-800 text-slate-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{r}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Optional Referral Code */}
|
||||
<div>
|
||||
<label className="block text-xs font-mono uppercase tracking-widest text-slate-400 mb-2 font-semibold">
|
||||
Optional Invite or Referral Code
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Tag className="w-4 h-4 text-slate-400 absolute left-4 top-1/2 -translate-y-1/2" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. SX-EARLY2026"
|
||||
value={referralInput}
|
||||
onChange={(e) => setReferralInput(e.target.value)}
|
||||
className="w-full bg-slate-950 border border-slate-800 rounded-xl pl-11 pr-4 py-3 text-sm text-white placeholder-slate-400 focus:outline-none focus:border-orange-500 transition-all font-mono"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Privacy Reassurance */}
|
||||
<div className="flex items-center gap-2 text-xs text-slate-400">
|
||||
<Lock className="w-3.5 h-3.5 text-sky-400" />
|
||||
<span>Zero spam. Saved securely to Firestore database.</span>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button
|
||||
type="submit"
|
||||
variant="glow"
|
||||
size="lg"
|
||||
isLoading={isSubmitting}
|
||||
icon={<ArrowRight className="w-4 h-4" />}
|
||||
className="w-full mt-2"
|
||||
>
|
||||
Reserve Priority Spot Now
|
||||
</Button>
|
||||
</form>
|
||||
</GlassCard>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="confirmation"
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
>
|
||||
<GlassCard gradientBorder={true} className="p-8 sm:p-10 text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-sky-950 border border-sky-500/40 flex items-center justify-center text-sky-400 mx-auto mb-6 shadow-xl shadow-sky-950/60">
|
||||
<CheckCircle2 className="w-8 h-8" />
|
||||
</div>
|
||||
|
||||
<span className="text-xs font-mono text-sky-400 uppercase tracking-widest font-semibold">
|
||||
Waitlist Position Reserved
|
||||
</span>
|
||||
|
||||
<h3 className="text-3xl font-extrabold text-white mt-2">
|
||||
You are #{submittedEntry.position.toLocaleString()} in line!
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-slate-300 mt-3 max-w-lg mx-auto leading-relaxed">
|
||||
Confirmation sent to <strong className="text-orange-300">{submittedEntry.email}</strong>. Share your unique invite link below to jump ahead in line for private beta builds.
|
||||
</p>
|
||||
|
||||
{/* Referral Link Box */}
|
||||
<div className="mt-8 p-4 rounded-2xl bg-slate-950 border border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-3 max-w-md mx-auto">
|
||||
<span className="font-mono text-xs text-orange-300 truncate w-full sm:w-auto">
|
||||
{window.location.origin}?ref={submittedEntry.referralCode}
|
||||
</span>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={copyReferralLink}
|
||||
icon={copiedLink ? <CheckCircle2 className="w-3.5 h-3.5 text-sky-400" /> : <Copy className="w-3.5 h-3.5" />}
|
||||
>
|
||||
{copiedLink ? 'Copied Link' : 'Copy Link'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-6 border-t border-slate-800/80 flex justify-center">
|
||||
<button
|
||||
onClick={() => {
|
||||
localStorage.removeItem('software_x_my_waitlist_entry');
|
||||
setSubmittedEntry(null);
|
||||
}}
|
||||
className="text-xs text-slate-400 hover:text-white transition-colors cursor-pointer"
|
||||
>
|
||||
← Register another email address
|
||||
</button>
|
||||
</div>
|
||||
</GlassCard>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,64 @@
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
|
||||
interface AnimatedCounterProps {
|
||||
end: number;
|
||||
duration?: number;
|
||||
prefix?: string;
|
||||
suffix?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const AnimatedCounter: React.FC<AnimatedCounterProps> = ({
|
||||
end,
|
||||
duration = 2000,
|
||||
prefix = '',
|
||||
suffix = '',
|
||||
className = ''
|
||||
}) => {
|
||||
const [count, setCount] = useState(0);
|
||||
const counterRef = useRef<HTMLSpanElement>(null);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
setIsVisible(true);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.2 }
|
||||
);
|
||||
|
||||
if (counterRef.current) {
|
||||
observer.observe(counterRef.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isVisible) return;
|
||||
|
||||
let start = 0;
|
||||
const increment = end / (duration / 16);
|
||||
const timer = setInterval(() => {
|
||||
start += increment;
|
||||
if (start >= end) {
|
||||
setCount(end);
|
||||
clearInterval(timer);
|
||||
} else {
|
||||
setCount(Math.floor(start));
|
||||
}
|
||||
}, 16);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, [end, duration, isVisible]);
|
||||
|
||||
return (
|
||||
<span ref={counterRef} className={className}>
|
||||
{prefix}
|
||||
{count.toLocaleString()}
|
||||
{suffix}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
|
||||
interface BadgeProps {
|
||||
children: React.ReactNode;
|
||||
variant?: 'emerald' | 'indigo' | 'cyan' | 'purple' | 'amber' | 'neutral' | 'tangerine' | 'sky';
|
||||
showDot?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const Badge: React.FC<BadgeProps> = ({
|
||||
children,
|
||||
variant = 'tangerine',
|
||||
showDot = true,
|
||||
className = ''
|
||||
}) => {
|
||||
const styles = {
|
||||
tangerine: {
|
||||
bg: 'bg-orange-950/70 text-orange-300 border-orange-500/40',
|
||||
dot: 'bg-orange-400'
|
||||
},
|
||||
sky: {
|
||||
bg: 'bg-sky-950/70 text-sky-300 border-sky-500/40',
|
||||
dot: 'bg-sky-400'
|
||||
},
|
||||
emerald: {
|
||||
bg: 'bg-sky-950/70 text-sky-300 border-sky-500/40',
|
||||
dot: 'bg-sky-400'
|
||||
},
|
||||
indigo: {
|
||||
bg: 'bg-orange-950/70 text-orange-300 border-orange-500/40',
|
||||
dot: 'bg-orange-400'
|
||||
},
|
||||
cyan: {
|
||||
bg: 'bg-sky-950/70 text-sky-300 border-sky-500/40',
|
||||
dot: 'bg-sky-400'
|
||||
},
|
||||
purple: {
|
||||
bg: 'bg-sky-950/70 text-sky-300 border-sky-500/40',
|
||||
dot: 'bg-sky-400'
|
||||
},
|
||||
amber: {
|
||||
bg: 'bg-orange-950/70 text-orange-300 border-orange-500/40',
|
||||
dot: 'bg-amber-400'
|
||||
},
|
||||
neutral: {
|
||||
bg: 'bg-slate-800/80 text-slate-300 border-slate-700/60',
|
||||
dot: 'bg-slate-400'
|
||||
}
|
||||
};
|
||||
|
||||
const current = styles[variant];
|
||||
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium border backdrop-blur-md shadow-inner tracking-wide ${current.bg} ${className}`}>
|
||||
{showDot && (
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className={`animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 ${current.dot}`} />
|
||||
<span className={`relative inline-flex rounded-full h-2 w-2 ${current.dot}`} />
|
||||
</span>
|
||||
)}
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import { motion } from 'motion/react';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
|
||||
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'glow';
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
isLoading?: boolean;
|
||||
icon?: React.ReactNode;
|
||||
iconPosition?: 'left' | 'right';
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const Button: React.FC<ButtonProps> = ({
|
||||
variant = 'primary',
|
||||
size = 'md',
|
||||
isLoading = false,
|
||||
icon,
|
||||
iconPosition = 'right',
|
||||
children,
|
||||
className = '',
|
||||
disabled,
|
||||
...props
|
||||
}) => {
|
||||
const baseStyles = 'inline-flex items-center justify-center font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500/50 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap rounded-xl';
|
||||
|
||||
const sizeStyles = {
|
||||
sm: 'px-3.5 py-1.5 text-xs gap-1.5',
|
||||
md: 'px-5 py-2.5 text-sm gap-2',
|
||||
lg: 'px-7 py-3.5 text-base gap-2.5 shadow-lg shadow-orange-950/20'
|
||||
};
|
||||
|
||||
const variantStyles = {
|
||||
primary: 'bg-orange-600 hover:bg-orange-500 text-white shadow-lg shadow-orange-600/25 border border-orange-500/30 hover:border-orange-400/50 hover:shadow-orange-500/35 active:scale-[0.98]',
|
||||
secondary: 'bg-slate-800/90 hover:bg-slate-700/90 text-slate-100 border border-slate-700/60 hover:border-slate-600 active:scale-[0.98]',
|
||||
outline: 'bg-transparent text-slate-200 border border-slate-700 hover:border-orange-500/50 hover:bg-orange-950/20 active:scale-[0.98]',
|
||||
ghost: 'bg-transparent text-slate-300 hover:text-white hover:bg-slate-800/60 active:scale-[0.98]',
|
||||
glow: 'relative bg-gradient-to-r from-orange-500 via-amber-500 to-sky-400 text-slate-950 font-extrabold shadow-xl shadow-orange-500/25 hover:shadow-orange-500/40 border border-amber-200/40 hover:scale-[1.02] active:scale-[0.98]'
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.button
|
||||
whileHover={{ y: -1 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className={`${baseStyles} ${sizeStyles[size]} ${variantStyles[variant]} ${className}`}
|
||||
disabled={disabled || isLoading}
|
||||
{...props}
|
||||
>
|
||||
{isLoading && <Loader2 className="w-4 h-4 animate-spin text-current" />}
|
||||
{!isLoading && icon && iconPosition === 'left' && <span className="inline-flex">{icon}</span>}
|
||||
<span>{children}</span>
|
||||
{!isLoading && icon && iconPosition === 'right' && <span className="inline-flex">{icon}</span>}
|
||||
</motion.button>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,37 @@
|
||||
import React from 'react';
|
||||
import { motion } from 'motion/react';
|
||||
|
||||
interface GlassCardProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
hoverEffect?: boolean;
|
||||
gradientBorder?: boolean;
|
||||
onClick?: () => void;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
export const GlassCard: React.FC<GlassCardProps> = ({
|
||||
children,
|
||||
className = '',
|
||||
hoverEffect = true,
|
||||
gradientBorder = false,
|
||||
onClick,
|
||||
id
|
||||
}) => {
|
||||
return (
|
||||
<motion.div
|
||||
id={id}
|
||||
whileHover={hoverEffect ? { y: -4, transition: { duration: 0.2 } } : undefined}
|
||||
onClick={onClick}
|
||||
className={`relative rounded-2xl bg-slate-900/70 backdrop-blur-xl border border-slate-800/80 p-6 shadow-xl shadow-black/40 overflow-hidden transition-all duration-300 ${
|
||||
hoverEffect ? 'hover:border-orange-500/40 hover:shadow-2xl hover:shadow-orange-950/30' : ''
|
||||
} ${
|
||||
gradientBorder ? 'before:absolute before:inset-0 before:p-[1px] before:bg-gradient-to-b before:from-orange-500/40 before:via-sky-500/20 before:to-transparent before:rounded-2xl before:-z-10' : ''
|
||||
} ${className}`}
|
||||
>
|
||||
{/* Subtle top glow line */}
|
||||
<div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-orange-500/30 to-transparent opacity-60 pointer-events-none" />
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from 'react';
|
||||
import { Badge } from './Badge';
|
||||
|
||||
interface SectionHeadingProps {
|
||||
badgeText?: string;
|
||||
badgeVariant?: 'emerald' | 'indigo' | 'cyan' | 'purple' | 'amber' | 'neutral' | 'tangerine' | 'sky';
|
||||
title: string;
|
||||
gradientTitle?: string;
|
||||
subtitle?: string;
|
||||
align?: 'left' | 'center' | 'right';
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const SectionHeading: React.FC<SectionHeadingProps> = ({
|
||||
badgeText,
|
||||
badgeVariant = 'tangerine',
|
||||
title,
|
||||
gradientTitle,
|
||||
subtitle,
|
||||
align = 'center',
|
||||
className = ''
|
||||
}) => {
|
||||
const alignmentClass = {
|
||||
left: 'text-left items-start',
|
||||
center: 'text-center items-center',
|
||||
right: 'text-right items-end'
|
||||
}[align];
|
||||
|
||||
return (
|
||||
<div className={`flex flex-col mb-12 ${alignmentClass} ${className}`}>
|
||||
{badgeText && (
|
||||
<div className="mb-4">
|
||||
<Badge variant={badgeVariant}>{badgeText}</Badge>
|
||||
</div>
|
||||
)}
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-white max-w-3xl leading-tight">
|
||||
{title}{' '}
|
||||
{gradientTitle && (
|
||||
<span className="bg-gradient-to-r from-orange-400 via-amber-300 to-sky-400 bg-clip-text text-transparent">
|
||||
{gradientTitle}
|
||||
</span>
|
||||
)}
|
||||
</h2>
|
||||
{subtitle && (
|
||||
<p className="mt-4 text-base sm:text-lg text-slate-400 max-w-2xl leading-relaxed font-normal">
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user