import React, { useState, useEffect, useRef } from "react"; import { motion } from "framer-motion"; import { Button } from "@/components/ui/button"; import { Phone } from "lucide-react"; export default function LandingPage() { const isClickScrolling = useRef(false); const [form, setForm] = useState({ name: "", whatsapp: "" }); const [contactForm, setContactForm] = useState({ name: "", phone: "", whatsapp: "", inquiry: "" }); // Countdown duration: 10 hours const targetDate = new Date(); targetDate.setHours(targetDate.getHours() + 10); const calculateTimeLeft = () => { const diff = targetDate.getTime() - new Date().getTime(); if (diff <= 0) return null; return { hours: Math.floor(diff / (1000 * 60 * 60)), minutes: Math.floor((diff / (1000 * 60)) % 60), seconds: Math.floor((diff / 1000) % 60), }; }; const [timeLeft, setTimeLeft] = useState(calculateTimeLeft()); const [activeSection, setActiveSection] = useState("enroll"); // Live join popup rotation const joinData = [ { name: "Aman", city: "Surat", time: "2 min ago" }, { name: "Rohit", city: "Ahmedabad", time: "5 min ago" }, { name: "Neha", city: "Vadodara", time: "8 min ago" }, { name: "Priya", city: "Mumbai", time: "12 min ago" }, ]; const [currentJoinIndex, setCurrentJoinIndex] = useState(0); const [isMuted, setIsMuted] = useState(true); useEffect(() => { // ๐Ÿ”ฅ Meta Pixel Base Code (replace YOUR_PIXEL_ID) if (!(window as any).fbq) { !(function (f: any, b: any, e: any, v: any, n?: any, t?: any, s?: any) { if (f.fbq) return; n = f.fbq = function () { n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments); }; if (!f._fbq) f._fbq = n; n.push = n; n.loaded = true; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = true; t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s); })(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '123456789012345'); // ๐Ÿ‘ˆ replace (window as any).fbq('track', 'PageView'); } const timer = setInterval(() => { setTimeLeft(calculateTimeLeft()); }, 1000); const sections = ["enroll", "curriculum", "pricing", "contact"]; const onScroll = () => { if (isClickScrolling.current) return; let current = "enroll"; sections.forEach((id) => { const el = document.getElementById(id); if (el && window.scrollY + 120 >= el.offsetTop) current = id; }); setActiveSection(current); }; window.addEventListener("scroll", onScroll); // rotate join popup names const joinTimer = setInterval(() => { setCurrentJoinIndex((prev) => (prev + 1) % joinData.length); }, 3500); return () => { clearInterval(timer); clearInterval(joinTimer); window.removeEventListener("scroll", onScroll); }; }, []); const handleEnrollSubmit = (e: React.FormEvent) => { e.preventDefault(); if (form.name.trim().length < 2) return alert("Enter valid name"); if (!/^[6789][0-9]{9}$/.test(form.whatsapp)) return alert("Invalid WhatsApp number"); // ๐Ÿ”ฅ Meta Conversion Event if ((window as any).fbq) { (window as any).fbq('track', 'Lead'); } window.location.href = "/thank-you.html"; }; const handleContactSubmit = (e: React.FormEvent) => { e.preventDefault(); alert("Thank you! We will contact you shortly."); }; const handleStickyClick = (id: string) => { isClickScrolling.current = true; setActiveSection(id); const el = document.getElementById(id); if (el) { window.scrollTo({ top: el.offsetTop - 90, behavior: "smooth" }); } setTimeout(() => { isClickScrolling.current = false; }, 700); }; return (
{/* Mobile View Wrapper */}
{/* Sticky Navigation */}
{["curriculum", "pricing", "enroll", "contact"].map((id) => ( ))}
{/* Hero & Enroll */}
Traders Indian Stock Market Trading Mastery

Beginner se Advanced tak โ€” simple language, real examples aur practical approach.

{timeLeft && (
{Object.entries(timeLeft).map(([k, v]) => (
{v}
{k}
))}
)}
{/* Enroll Form BELOW Timer */}
{ let raw = e.target.value.replace(/[^A-Za-z\s]/g, ""); raw = raw.replace(/\s+/g, " ").trimStart(); const parts = raw.split(" ").slice(0, 2); const formatted = parts.map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join(" "); setForm({ ...form, name: formatted }); }} />
{ const val = e.target.value.replace(/\D/g, ""); if (val.length === 1 && !/[6789]/.test(val)) return; setForm({ ...form, whatsapp: val }); }} />
{/* Optional WhatsApp Chat Button */} WhatsApp Chat on WhatsApp
{/* Trust Badge */} {/* Trust Badge */}
โญ Trusted by 500+ Learners
{/* Video Section (Above Contact) */} {/* Video Section (Vertical โ€“ Above Contact) */}
{/* Video 1 */}
{/* Video 2 */}
{/* Video 3 */}
{/* Video 4 */}
{/* Contact Section */}

Contact Us

{ let raw = e.target.value.replace(/[^A-Za-z\s]/g, ""); raw = raw.replace(/\s+/g, " ").trimStart(); const parts = raw.split(" ").slice(0, 2); const formatted = parts.map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join(" "); setContactForm({ ...contactForm, name: formatted }); }} />
{ const val = e.target.value.replace(/\D/g, ""); if (val.length === 1 && !/[6-9]/.test(val)) return; setContactForm({ ...contactForm, phone: val }); }} />
{ const val = e.target.value.replace(/\D/g, ""); if (val.length === 1 && !/[6789]/.test(val)) return; setContactForm({ ...contactForm, whatsapp: val }); }} />