100 lines
4.9 KiB
TypeScript
100 lines
4.9 KiB
TypeScript
import React from 'react';
|
|
import { MessagesSquare, Twitter, Sparkles, MessageCircle } from 'lucide-react';
|
|
import { YOUR_DISCORD_URL, YOUR_WHATSAPP_URL, YOUR_X_URL } from '../config';
|
|
import { triggerBirthdayConfetti } from '../utils/confetti';
|
|
|
|
export const CommunityCTA: React.FC = () => {
|
|
const handleCommunityClick = () => {
|
|
triggerBirthdayConfetti();
|
|
};
|
|
|
|
return (
|
|
<section className="py-20 sm:py-28 relative overflow-hidden">
|
|
{/* Container with Tangerine to Sky Blue Immersive UI Gradient Backdrop */}
|
|
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative">
|
|
|
|
<div
|
|
id="final-community-cta-box"
|
|
className="relative rounded-3xl overflow-hidden p-8 sm:p-14 lg:p-16 border border-slate-200 dark:border-white/20 shadow-[0_0_60px_rgba(255,140,50,0.25)] text-center"
|
|
>
|
|
{/* Intense glowing gradient background */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-[#FF8C32] via-[#FFA843] to-[#00D7FF] pointer-events-none -z-10 opacity-75" />
|
|
{/* Theme-aware glass overlay for high-contrast readability */}
|
|
<div className="absolute inset-0 bg-white/85 dark:bg-[#0a0c14]/80 backdrop-blur-md pointer-events-none -z-10" />
|
|
|
|
{/* Floating cyber particles */}
|
|
<div className="absolute -top-24 -left-24 w-72 h-72 bg-[#FF8C32]/30 rounded-full blur-3xl pointer-events-none" />
|
|
<div className="absolute -bottom-24 -right-24 w-72 h-72 bg-[#00D7FF]/30 rounded-full blur-3xl pointer-events-none" />
|
|
|
|
{/* Badge */}
|
|
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-black/10 dark:bg-black/40 border border-slate-300 dark:border-white/20 text-xs font-bold text-slate-800 dark:text-white mb-6 backdrop-blur-md">
|
|
<Sparkles className="w-4 h-4 text-[#FF8C32]" />
|
|
<span>THE COUNTDOWN HAS BEGUN</span>
|
|
</div>
|
|
|
|
{/* Heading */}
|
|
<h2
|
|
id="community-cta-heading"
|
|
className="font-display text-4xl sm:text-6xl lg:text-7xl font-black text-slate-900 dark:text-white tracking-tight leading-tight"
|
|
>
|
|
DON'T MISS THE ALPHA.
|
|
</h2>
|
|
|
|
{/* Subheading */}
|
|
<p
|
|
id="community-cta-subheading"
|
|
className="mt-4 text-xl sm:text-2xl lg:text-3xl font-extrabold text-[#00A6DB] dark:text-[#00D7FF] drop-shadow-sm"
|
|
>
|
|
BM Alpha launches October 28 at 10 PM GMT.
|
|
</p>
|
|
|
|
<p className="mt-3 text-slate-700 dark:text-gray-300 text-sm sm:text-base max-w-xl mx-auto font-medium">
|
|
Be part of the earliest wave. Join our official channels for real-time launch alerts, meme drops, and birthday giveaways.
|
|
</p>
|
|
|
|
{/* Action CTAs */}
|
|
<div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 max-w-2xl mx-auto">
|
|
<a
|
|
id="cta-join-whatsapp"
|
|
href={YOUR_WHATSAPP_URL}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
onClick={handleCommunityClick}
|
|
className="w-full sm:w-auto flex-1 flex items-center justify-center gap-2 px-6 py-3.5 rounded-full font-display font-black text-xs sm:text-sm text-white bg-emerald-600 hover:bg-emerald-500 shadow-xl transition-all duration-300 transform hover:-translate-y-0.5 active:scale-95"
|
|
>
|
|
<MessageCircle className="w-4 h-4 text-white" />
|
|
<span>JOIN WHATSAPP</span>
|
|
</a>
|
|
|
|
<a
|
|
id="cta-join-discord"
|
|
href={YOUR_DISCORD_URL}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
onClick={handleCommunityClick}
|
|
className="w-full sm:w-auto flex-1 flex items-center justify-center gap-2 px-6 py-3.5 rounded-full font-display font-black text-xs sm:text-sm text-white bg-[#5865F2] hover:bg-[#4752C4] shadow-[0_0_20px_rgba(88,101,242,0.35)] transition-all duration-300 transform hover:-translate-y-0.5 active:scale-95"
|
|
>
|
|
<MessagesSquare className="w-4 h-4 text-white" />
|
|
<span>JOIN DISCORD</span>
|
|
</a>
|
|
|
|
<a
|
|
id="cta-follow-x"
|
|
href={YOUR_X_URL}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
onClick={handleCommunityClick}
|
|
className="w-full sm:w-auto flex-1 flex items-center justify-center gap-2 px-6 py-3.5 rounded-full font-display font-black text-xs sm:text-sm text-slate-900 dark:text-white bg-white/80 dark:bg-[#0a0c14]/90 hover:bg-white dark:hover:bg-white/10 border border-slate-300 dark:border-white/20 hover:border-[#FF8C32] shadow-xl transition-all duration-300 transform hover:-translate-y-0.5"
|
|
>
|
|
<Twitter className="w-4 h-4 text-[#FF8C32]" />
|
|
<span>FOLLOW ON X</span>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|