Initial BM Alpha landing page

2026-08-22 06:14:10 +02:00
commit 3fa0497b17
33 changed files with 7464 additions and 0 deletions
@@ -0,0 +1,99 @@
+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 August 24.
+          </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>
+  );
+};