ctmmediagroup/SoftwareX
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update launch date and image showcase

Browse Source
This commit is contained in:
solomonchitore
2026-10-28 07:59:01 +02:00
parent 80861600cd
commit d3846e3e97
3 changed files with 126 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Navbar.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ export const Navbar: React.FC<NavbarProps> = ({
const navLinks = [
{ label: 'Ecosystem', href: '#ecosystem' },
{ label: 'Sep 3 Launch', href: '#memecoin-launch' },
{ label: 'Nov 18 Launch', href: '#memecoin-launch' },
{ label: 'Why Community', href: '#community-funding' },
{ label: 'Features', href: '#features' },
{ label: 'Roadmap', href: '#roadmap' },
src/components/sections/MemeCoinLaunchSection.tsx
+123 -25
View File
@@ -50,7 +50,7 @@ export const MemeCoinLaunchSection: React.FC<MemeCoinLaunchSectionProps> = ({
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 September 3, 2026 at 10:00 PM GMT
// Countdown timer calculation targeting November 18, 2026 at 10:00 PM GMT
const [timeLeft, setTimeLeft] = useState({
days: 0,
hours: 0,
@@ -59,7 +59,7 @@ export const MemeCoinLaunchSection: React.FC<MemeCoinLaunchSectionProps> = ({
});
useEffect(() => {
const launchDate = new Date('2026-09-03T22:00:00Z').getTime();
const launchDate = new Date('2026-11-18T22:00:00Z').getTime();
const updateTimer = () => {
const now = new Date().getTime();
@@ -357,7 +357,7 @@ export const MemeCoinLaunchSection: React.FC<MemeCoinLaunchSectionProps> = ({
<div className="flex-1 text-left">
<div className="flex items-center gap-3 mb-3">
<Badge variant="tangerine" showDot={true}>
Official Funding Launch • September 3rd at 10 PM GMT
Official Funding Launch • November 18th at 10 PM GMT
</Badge>
<span className="text-xs font-mono text-sky-400 font-semibold flex items-center gap-1">
<Flame className="w-3.5 h-3.5" /> 100% Revenue Backed
@@ -369,7 +369,7 @@ export const MemeCoinLaunchSection: React.FC<MemeCoinLaunchSectionProps> = ({
</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>September 3rd at 10 PM GMT</strong> to fund our rapid software expansion! Backers can invest <strong>ANY amount ($1, $5, $10, $50, $1,000+)</strong> and receive proportional token allocations, physical collector coins, micro-app access, and on-chain revenue dividends.
We are launching the official <strong>$SX BirthdayMessaging Meme Coin</strong> on <strong>November 18th at 10 PM GMT</strong> to fund our rapid software expansion! Backers can invest <strong>ANY amount ($1, $5, $10, $50, $1,000+)</strong> and receive proportional token allocations, physical collector coins, micro-app access, and on-chain revenue dividends.
</p>
<div className="flex flex-wrap items-center gap-4 mt-8">
@@ -379,7 +379,7 @@ export const MemeCoinLaunchSection: React.FC<MemeCoinLaunchSectionProps> = ({
onClick={onOpenWaitlist}
icon={<Coins className="w-5 h-5" />}
>
Join Sep 3, 10 PM GMT Presale Whitelist
Join Nov 18, 10 PM GMT Presale Whitelist
</Button>
<Button
variant="outline"
@@ -395,7 +395,7 @@ export const MemeCoinLaunchSection: React.FC<MemeCoinLaunchSectionProps> = ({
{/* 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 (Sep 3, 10 PM GMT)
<Clock className="w-4 h-4 animate-pulse" /> Launch Countdown (Nov 18, 10 PM GMT)
</div>
<div className="grid grid-cols-4 gap-3 sm:gap-4 font-mono">
@@ -607,26 +607,124 @@ export const MemeCoinLaunchSection: React.FC<MemeCoinLaunchSectionProps> = ({
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
{/* Two-Image Community Showcase */}
<div id="showcase-images" className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">
{/* Coin artwork card */}
<div className="overflow-hidden rounded-3xl border border-slate-800 bg-slate-950 shadow-2xl">
<div className="relative p-4 sm:p-5">
<span className="absolute left-7 top-7 z-10 rounded-full border border-orange-500/40 bg-slate-950/95 px-3 py-2 text-[10px] sm:text-xs font-mono font-bold uppercase tracking-widest text-orange-400">
Official Physical Minted Artifact
</span>
<h3 className="text-xl sm:text-2xl font-bold text-white mt-1">
Alpha • Beta • Gamma Collector Series
</h3>
<a href="#showcase-coin-viewer"
aria-label="View full-size BM Alpha coin image"
className="block cursor-zoom-in">
<img
src="https://res.cloudinary.com/gg3hylnv/image/upload/v1792532111/image_93eb6f_4K.png"
alt="BM Alpha commemorative copper coin"
className="h-[420px] sm:h-[520px] w-full rounded-2xl bg-slate-950 object-contain object-center"
loading="lazy"
/>
</a>
<a href="#showcase-coin-viewer"
aria-label="View full-size BM Alpha coin image"
className="absolute right-7 top-7 z-20 flex h-12 w-12 items-center justify-center rounded-full border border-slate-600 bg-slate-950/95 text-white shadow-lg transition hover:scale-110 hover:border-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-400">
<span aria-hidden="true" className="pointer-events-none absolute left-1/2 top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2">
<span className="absolute left-1/2 top-0 h-5 w-px -translate-x-1/2 bg-current"></span>
<span className="absolute left-0 top-1/2 h-px w-5 -translate-y-1/2 bg-current"></span>
</span>
</a>
</div>
<div className="border-t border-slate-800 bg-gradient-to-b from-slate-900 to-slate-950 p-6 sm:p-7">
<h3 className="text-xl sm:text-2xl font-bold text-white">BM Alpha Commemorative Coin</h3>
<p className="mt-3 leading-relaxed text-slate-300">
The BM Alpha coin represents the reminder: every birthday matters, and every meaningful connection deserves to be remembered.
</p>
<p className="mt-4 text-xs sm:text-sm font-semibold text-orange-400">
Click the plus icon or image to view it full size.
</p>
</div>
<Badge variant="tangerine">Collect All 3</Badge>
</div>
{/* Community artwork card */}
<div className="overflow-hidden rounded-3xl border border-slate-800 bg-slate-950 shadow-2xl">
<div className="relative p-4 sm:p-5">
<span className="absolute left-7 top-7 z-10 rounded-full border border-sky-500/40 bg-slate-950/95 px-3 py-2 text-[10px] sm:text-xs font-mono font-bold uppercase tracking-widest text-sky-400">
BM Connect Community Movement
</span>
<a href="#showcase-community-viewer"
aria-label="View full-size BM Connect community image"
className="block cursor-zoom-in">
<img
src="https://res.cloudinary.com/gg3hylnv/image/upload/v1792532072/image_116649_4K_1.jpg"
alt="Different generations and communities connected through BM Connect"
className="h-[420px] sm:h-[520px] w-full rounded-2xl bg-slate-950 object-contain object-center"
loading="lazy"
/>
</a>
<a href="#showcase-community-viewer"
aria-label="View full-size BM Connect community image"
className="absolute right-7 top-7 z-20 flex h-12 w-12 items-center justify-center rounded-full border border-slate-600 bg-slate-950/95 text-white shadow-lg transition hover:scale-110 hover:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-400">
<span aria-hidden="true" className="pointer-events-none absolute left-1/2 top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2">
<span className="absolute left-1/2 top-0 h-5 w-px -translate-x-1/2 bg-current"></span>
<span className="absolute left-0 top-1/2 h-px w-5 -translate-y-1/2 bg-current"></span>
</span>
</a>
</div>
<div className="border-t border-slate-800 bg-gradient-to-b from-slate-900 to-slate-950 p-6 sm:p-7">
<h3 className="text-xl sm:text-2xl font-bold text-white">Different Faces. One Humanity.</h3>
<p className="mt-3 leading-relaxed text-slate-300">
The people and relationships at the heart of BirthdayMessaging.io and the BM Connect ecosystem.
</p>
<p className="mt-4 text-xs sm:text-sm font-semibold text-sky-400">
Click the plus icon or image to view it full size.
</p>
</div>
</div>
</div>
{/* In-page image viewer: the website remains open behind the overlay */}
<div id="showcase-coin-viewer"
className="fixed inset-0 z-[9999] hidden items-center justify-center bg-black/95 p-4 target:flex sm:p-8"
role="dialog"
aria-modal="true"
aria-label="Full-size BM Alpha coin image">
<a href="#showcase-images"
className="absolute inset-0 cursor-default"
aria-label="Close image viewer"></a>
<a href="#showcase-images"
className="absolute right-4 top-4 z-20 flex h-12 w-12 items-center justify-center rounded-full border border-white/40 bg-slate-900 text-3xl leading-none text-white hover:bg-slate-700"
aria-label="Close image viewer">×</a>
<img
src="https://res.cloudinary.com/gg3hylnv/image/upload/v1792532111/image_93eb6f_4K.png"
alt="BM Alpha commemorative copper coin, full size"
className="pointer-events-none relative z-10 max-h-[88vh] max-w-[95vw] object-contain"
/>
</div>
<div id="showcase-community-viewer"
className="fixed inset-0 z-[9999] hidden items-center justify-center bg-black/95 p-4 target:flex sm:p-8"
role="dialog"
aria-modal="true"
aria-label="Full-size BM Connect community image">
<a href="#showcase-images"
className="absolute inset-0 cursor-default"
aria-label="Close image viewer"></a>
<a href="#showcase-images"
className="absolute right-4 top-4 z-20 flex h-12 w-12 items-center justify-center rounded-full border border-white/40 bg-slate-900 text-3xl leading-none text-white hover:bg-slate-700"
aria-label="Close image viewer">×</a>
<img
src="https://res.cloudinary.com/gg3hylnv/image/upload/v1792532072/image_116649_4K_1.jpg"
alt="BM Connect community artwork, full size"
className="pointer-events-none relative z-10 max-h-[88vh] max-w-[95vw] object-contain"
/>
</div>
{/* 3 Pillars Cards */}
@@ -861,7 +959,7 @@ export const MemeCoinLaunchSection: React.FC<MemeCoinLaunchSectionProps> = ({
badgeText="Presale Contribution Tiers"
badgeVariant="sky"
title="Explore Preset Launch Tiers"
gradientTitle="September 3rd, 10 PM GMT Allotments"
gradientTitle="November 18th, 10 PM GMT Allotments"
subtitle="Choose a preset tier below or type any custom dollar amount above to reserve your $SX tokens."
/>
@@ -941,7 +1039,7 @@ export const MemeCoinLaunchSection: React.FC<MemeCoinLaunchSectionProps> = ({
<div className="flex items-center gap-3">
<ShieldCheck className="w-6 h-6 text-sky-400 flex-shrink-0" />
<p className="text-xs text-slate-300">
<strong>100% Micro-Friendly & Transparent:</strong> Everyone is welcome regardless of contribution size ($1 to $10,000+). Smart contracts audited on-chain. Liquidity locked permanently upon the September 3, 10 PM GMT launch.
<strong>100% Micro-Friendly & Transparent:</strong> Everyone is welcome regardless of contribution size ($1 to $10,000+). Smart contracts audited on-chain. Liquidity locked permanently upon the November 18, 10 PM GMT launch.
</p>
</div>
<Button
wrangler.jsonc
+2 -1
View File
@@ -1,11 +1,12 @@
{
"$schema": "node_modules/wrangler/config-schema.json",
"name": "react-example",
"name": "software-x",
"compatibility_date": "2026-08-28",
"observability": {
"enabled": true
},
"assets": {
"directory": "./dist",
"not_found_handling": "single-page-application"
}
}