Added CFP and created toggle for main bottons

Author: Cryos02

src/Components/Home.tsx

@@ -10,7 +10,7 @@ import { useRef } from 'react';
 const Home = () => {
   // const MotionButton = motion(Button);
   const constraintsRef = useRef(null);
-  const IS_COMING_SOON = true; // Set to false when the event tickets are available
+  const IS_COMING_SOON = false; // Set to false when the event tickets are available
 
   return (
     <div className="relative min-h-screen flex flex-col justify-center items-center p-4 sm:p-6 md:p-10 text-white overflow-hidden">
@@ -237,89 +237,175 @@ const Home = () => {
 export default Home;
 
 const EnhancedCTAButtons = () => {
+  // ---------------------------------------------------------
+  // MANUAL TOGGLES: Control availability here
+  // ---------------------------------------------------------
+  const IS_TICKET_SALE_OPEN = false;
+  const IS_CFP_OPEN = true;
+  const IS_SPONSOR_OPEN = false; // Set to true to enable Sponsor button
+
   return (
     <div className="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6 w-full">
-      {/* Main CTA - Get Ticket */}
+
+      {/* 1. Main CTA - Get Ticket */}
       <motion.div
-        whileHover={{ scale: 1.05 }}
-        whileTap={{ scale: 0.95 }}
-        className="w-full sm:w-auto"
+        whileHover={IS_TICKET_SALE_OPEN ? { scale: 1.05 } : {}}
+        whileTap={IS_TICKET_SALE_OPEN ? { scale: 0.95 } : {}}
+        className={`w-full sm:w-auto ${!IS_TICKET_SALE_OPEN ? 'cursor-not-allowed opacity-80' : ''}`}
       >
-        <a
-          href="https://www.eventbrite.it/e/serverlessdays-milano-2025-tickets-1460042399119"
-          target="_blank"
-          className="group block w-full"
-        >
-          <button className="relative overflow-hidden w-full sm:w-auto px-8 sm:px-10 py-4 sm:py-5 bg-gradient-to-r from-white via-pink-50 to-white text-purple-900 font-black text-lg sm:text-xl rounded-2xl border-4 border-purple-200 shadow-2xl hover:shadow-purple-500/50 transition-all duration-300 ease-in-out group-hover:border-purple-300">
-            <span className="absolute inset-0 bg-gradient-to-r from-purple-100 via-pink-100 to-purple-100 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
-            <span className="relative flex items-center justify-center gap-3">
-              <motion.span
-                animate={{ rotate: [0, 10, -10, 0] }}
-                transition={{
-                  duration: 2,
-                  repeat: Infinity,
-                  ease: 'easeInOut',
-                }}
-              >
-                🎫
-              </motion.span>
-              <span>Get Your Ticket!</span>
-              <motion.span
-                animate={{ scale: [1, 1.2, 1] }}
-                transition={{
-                  duration: 2,
-                  repeat: Infinity,
-                  ease: 'easeInOut',
-                  delay: 0.5,
-                }}
-              >
-                ✨
-              </motion.span>
-            </span>
-          </button>
-        </a>
+        {IS_TICKET_SALE_OPEN ? (
+          <a
+            href="https://www.eventbrite.it/e/serverlessdays-milano-2025-tickets-1460042399119"
+            target="_blank"
+            className="group block w-full"
+          >
+            <TicketButtonContent isOpen={true} />
+          </a>
+        ) : (
+          <div className="block w-full pointer-events-none">
+             <TicketButtonContent isOpen={false} />
+          </div>
+        )}
       </motion.div>
 
-      {/* Secondary CTA - Become Sponsor */}
+      {/* 2. Secondary CTA - CFP (Become a Speaker) */}
       <motion.div
-        whileHover={{ scale: 1.05 }}
-        whileTap={{ scale: 0.95 }}
-        className="w-full sm:w-auto"
+        whileHover={IS_CFP_OPEN ? { scale: 1.05 } : {}}
+        whileTap={IS_CFP_OPEN ? { scale: 0.95 } : {}}
+        className={`w-full sm:w-auto ${!IS_CFP_OPEN ? 'cursor-not-allowed opacity-80' : ''}`}
       >
-        <a
-          href="https://drive.google.com/uc?export=download&id=1p7ZAFM7yXGp7qwGvOPjR_HuaMenHS_7W"
-          target="_blank"
-          className="group block w-full"
-        >
-          <button className="relative overflow-hidden w-full sm:w-auto px-8 sm:px-10 py-4 sm:py-5 bg-gradient-to-r from-purple-600 via-blue-600 to-purple-600 text-white font-bold text-lg sm:text-xl rounded-2xl shadow-xl hover:shadow-blue-500/50 transition-all duration-300 ease-in-out border-2 border-purple-400 group-hover:border-blue-400">
-            <span className="absolute inset-0 bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
-            <span className="relative flex items-center justify-center gap-3">
-              <motion.span
-                animate={{ rotate: [0, 360] }}
-                transition={{ duration: 3, repeat: Infinity, ease: 'linear' }}
-              >
-                🤝
-              </motion.span>
-              <span>Become a Sponsor</span>
-              <motion.span
-                animate={{ y: [0, -3, 0] }}
-                transition={{
-                  duration: 2,
-                  repeat: Infinity,
-                  ease: 'easeInOut',
-                  delay: 1,
-                }}
-              >
-                🚀
-              </motion.span>
-            </span>
-          </button>
-        </a>
+        {IS_CFP_OPEN ? (
+          <a
+            href="https://www.papercall.io/serverlessdays-milano-2026"
+            target="_blank"
+            className="group block w-full"
+          >
+             <SpeakerButtonContent isOpen={true} />
+          </a>
+        ) : (
+          <div className="block w-full pointer-events-none">
+            <SpeakerButtonContent isOpen={false} />
+          </div>
+        )}
+      </motion.div>
+
+      {/* 3. Secondary CTA - Become Sponsor */}
+      <motion.div
+        whileHover={IS_SPONSOR_OPEN ? { scale: 1.05 } : {}}
+        whileTap={IS_SPONSOR_OPEN ? { scale: 0.95 } : {}}
+        className={`w-full sm:w-auto ${!IS_SPONSOR_OPEN ? 'cursor-not-allowed opacity-80' : ''}`}
+      >
+        {IS_SPONSOR_OPEN ? (
+          <a
+            href="https://drive.google.com/uc?export=download&id=1p7ZAFM7yXGp7qwGvOPjR_HuaMenHS_7W"
+            target="_blank"
+            className="group block w-full"
+          >
+            <SponsorButtonContent isOpen={true} />
+          </a>
+        ) : (
+          <div className="block w-full pointer-events-none">
+            <SponsorButtonContent isOpen={false} />
+          </div>
+        )}
       </motion.div>
+
     </div>
   );
 };
 
+// ---------------------------------------------------------
+// HELPER COMPONENTS (Render the Button Looks)
+// ---------------------------------------------------------
+
+const TicketButtonContent = ({ isOpen }: { isOpen: boolean }) => {
+  if (isOpen) {
+    return (
+      <button className="relative overflow-hidden w-full sm:w-auto px-8 sm:px-10 py-4 sm:py-5 bg-gradient-to-r from-white via-pink-50 to-white text-purple-900 font-black text-lg sm:text-xl rounded-2xl border-4 border-purple-200 shadow-2xl hover:shadow-purple-500/50 transition-all duration-300 ease-in-out group-hover:border-purple-300 cursor-pointer">
+        <span className="absolute inset-0 bg-gradient-to-r from-purple-100 via-pink-100 to-purple-100 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
+        <span className="relative flex items-center justify-center gap-3">
+          <motion.span animate={{ rotate: [0, 10, -10, 0] }} transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}>
+            🎫
+          </motion.span>
+          <span>Get Your Ticket!</span>
+          <motion.span animate={{ scale: [1, 1.2, 1] }} transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut', delay: 0.5 }}>
+            ✨
+          </motion.span>
+        </span>
+      </button>
+    );
+  }
+  return (
+    <button className="relative overflow-hidden w-full sm:w-auto px-8 sm:px-10 py-4 sm:py-5 bg-slate-100 text-slate-400 font-bold text-lg sm:text-xl rounded-2xl border-4 border-slate-200 shadow-none cursor-not-allowed grayscale">
+      <span className="relative flex items-center justify-center gap-3">
+        <span>🎫</span>
+        <span>Tickets coming Soon</span>
+        <span>✨</span>
+      </span>
+    </button>
+  );
+};
+
+const SpeakerButtonContent = ({ isOpen }: { isOpen: boolean }) => {
+  if (isOpen) {
+    // Active: Vibrant Orchid (Pink/Purple)
+    return (
+      <button className="relative overflow-hidden w-full sm:w-auto px-8 sm:px-10 py-4 sm:py-5 bg-gradient-to-r from-purple-500 via-pink-500 to-purple-500 text-white font-bold text-lg sm:text-xl rounded-2xl shadow-xl hover:shadow-pink-500/50 transition-all duration-300 ease-in-out border-2 border-purple-300 group-hover:border-pink-300 cursor-pointer">
+        <span className="absolute inset-0 bg-gradient-to-r from-pink-500 via-purple-500 to-pink-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
+        <span className="relative flex items-center justify-center gap-3">
+          <motion.span animate={{ rotate: [0, 10, -10, 0] }} transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}>
+            📢
+          </motion.span>
+          <span>Become a Speaker</span>
+          <motion.span animate={{ y: [0, -3, 0] }} transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut', delay: 1 }}>
+            🗣️
+          </motion.span>
+        </span>
+      </button>
+    );
+  }
+  // Disabled
+  return (
+    <button className="relative overflow-hidden w-full sm:w-auto px-8 sm:px-10 py-4 sm:py-5 bg-slate-100 text-slate-400 font-bold text-lg sm:text-xl rounded-2xl border-2 border-slate-200 shadow-none cursor-not-allowed grayscale">
+      <span className="relative flex items-center justify-center gap-3">
+        <span>📢</span>
+        <span>CFP Coming Soon</span>
+        <span>🗣️</span>
+      </span>
+    </button>
+  );
+};
+
+const SponsorButtonContent = ({ isOpen }: { isOpen: boolean }) => {
+  if (isOpen) {
+    // Active: Purple/Blue
+    return (
+      <button className="relative overflow-hidden w-full sm:w-auto px-8 sm:px-10 py-4 sm:py-5 bg-gradient-to-r from-purple-600 via-blue-600 to-purple-600 text-white font-bold text-lg sm:text-xl rounded-2xl shadow-xl hover:shadow-blue-500/50 transition-all duration-300 ease-in-out border-2 border-purple-400 group-hover:border-blue-400 cursor-pointer">
+        <span className="absolute inset-0 bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
+        <span className="relative flex items-center justify-center gap-3">
+          <motion.span animate={{ rotate: [0, 360] }} transition={{ duration: 3, repeat: Infinity, ease: 'linear' }}>
+            🤝
+          </motion.span>
+          <span>Become a Sponsor</span>
+          <motion.span animate={{ y: [0, -3, 0] }} transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut', delay: 1 }}>
+            🚀
+          </motion.span>
+        </span>
+      </button>
+    );
+  }
+  // Disabled
+  return (
+    <button className="relative overflow-hidden w-full sm:w-auto px-8 sm:px-10 py-4 sm:py-5 bg-slate-100 text-slate-400 font-bold text-lg sm:text-xl rounded-2xl border-2 border-slate-200 shadow-none cursor-not-allowed grayscale">
+      <span className="relative flex items-center justify-center gap-3">
+        <span>🤝</span>
+        <span>Become Sponsor Soon</span>
+        <span>🚀</span>
+      </span>
+    </button>
+  );
+};
+
 /**
  * Renders the EarlyBirdText component.
  *