Initial commit

components/CTA.tsx

@@ -0,0 +1,44 @@
+export default function CTA() {
+  return (
+    <section className="bg-primary text-white py-20 md:py-28 relative overflow-hidden">
+      {/* Background decorative elements */}
+      <div className="absolute inset-0 opacity-10">
+        <div className="absolute top-10 right-10 w-48 h-48 bg-white rounded-full blur-3xl"></div>
+        <div className="absolute bottom-10 left-10 w-64 h-64 bg-white rounded-full blur-3xl"></div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-6 text-center relative z-10">
+        <div className="space-y-6 animate-slideDown">
+          <h2 className="text-5xl md:text-6xl font-black leading-tight">
+            Ready to Protect <span className="text-yellow-200">Your Legacy?</span>
+          </h2>
+          <p className="text-lg md:text-xl opacity-95 max-w-2xl mx-auto leading-relaxed font-medium">
+            Join thousands of families who have learned to safeguard their future through our expert-led webinars. Take control today.
+          </p>
+          
+          <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
+            <a
+              href="/webinars"
+              className="inline-flex items-center justify-center gap-2 rounded-xl px-8 py-4 text-lg font-bold bg-white text-primary shadow-lg shadow-black/20 border border-white/70 transition-all duration-300 hover:-translate-y-1 hover:bg-white/90"
+            >
+              🚀 Browse Free Webinars
+            </a>
+            <a
+              href="/contact"
+              className="inline-flex items-center justify-center gap-2 rounded-xl px-8 py-4 text-lg font-bold border-2 border-white/70 text-white bg-white/10 backdrop-blur-sm transition-all duration-300 hover:bg-white/20 hover:-translate-y-1"
+            >
+              📧 Contact Our Experts
+            </a>
+          </div>
+
+          {/* Trust badge */}
+          <div className="pt-6 flex items-center justify-center gap-4 flex-wrap text-sm font-semibold">
+            <span className="bg-white/15 backdrop-blur-sm px-4 py-2 rounded-full border border-white/20">✅ 15,000+ Students</span>
+            <span className="bg-white/15 backdrop-blur-sm px-4 py-2 rounded-full border border-white/20">⭐ 4.9/5 Rating</span>
+            <span className="bg-white/15 backdrop-blur-sm px-4 py-2 rounded-full border border-white/20">🎓 100% Free Options</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/Footer.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+export default function Footer() {
+  const [socials, setSocials] = useState<any>({});
+
+  useEffect(() => {
+    fetch("/api/public/app-setup")
+      .then((r) => r.json())
+      .then((d) => setSocials(d?.setup?.socials || {}))
+      .catch(() => setSocials({}));
+  }, []);
+
+  return (
+    <footer className="bg-gradient-to-b from-[#0b1426] to-[#050a15] text-white mt-20">
+      <div className="max-w-7xl mx-auto px-6 py-16 grid md:grid-cols-4 gap-12">
+        <div className="space-y-4 group">
+          <div className="flex items-center gap-3 hover-lift">
+            <div className="h-11 w-11 rounded-xl bg-primary text-white flex items-center justify-center text-lg font-bold shadow-glow group-hover:shadow-lg transition-all duration-300">🏛️</div>
+            <div>
+              <div className="font-bold text-lg">Estate Pro</div>
+              <div className="text-xs text-white/60 font-semibold">Education Hub</div>
+            </div>
+          </div>
+          <p className="text-sm text-white/80 leading-relaxed font-medium">
+            Empowering families with expert knowledge to protect their legacy and secure their financial future for generations.
+          </p>
+        </div>
+
+        <div className="space-y-4">
+          <h3 className="font-bold text-lg flex items-center gap-2">🔗 Quick Links</h3>
+          <div className="space-y-2.5 text-white/80">
+            <Link href="/webinars" className="block hover:text-white hover:translate-x-1 transition-all duration-300 font-medium">→ All Webinars</Link>
+            <Link href="/resources" className="block hover:text-white hover:translate-x-1 transition-all duration-300 font-medium">→ Free Resources</Link>
+            <Link href="/pricing" className="block hover:text-white hover:translate-x-1 transition-all duration-300 font-medium">→ Pricing</Link>
+            <Link href="/about" className="block hover:text-white hover:translate-x-1 transition-all duration-300 font-medium">→ About Us</Link>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h3 className="font-bold text-lg flex items-center gap-2">🤝 Support</h3>
+          <div className="space-y-2.5 text-white/80">
+            <Link href="/help" className="block hover:text-white hover:translate-x-1 transition-all duration-300 font-medium">→ Help Center</Link>
+            <Link href="/contact" className="block hover:text-white hover:translate-x-1 transition-all duration-300 font-medium">→ Contact Us</Link>
+            <Link href="/privacy" className="block hover:text-white hover:translate-x-1 transition-all duration-300 font-medium">→ Privacy Policy</Link>
+            <Link href="/terms" className="block hover:text-white hover:translate-x-1 transition-all duration-300 font-medium">→ Terms of Service</Link>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h3 className="font-bold text-lg flex items-center gap-2">📧 Connect</h3>
+          <div className="space-y-4">
+            <a href="mailto:info@estateplanningedu.com" className="block text-white/80 hover:text-white hover:translate-x-1 transition-all duration-300 font-medium">📧 info@estateplanningedu.com</a>
+            <div className="flex gap-4 text-2xl">
+              {socials.twitter && <a href={socials.twitter} className="hover:scale-125 hover:text-blue-400 transition-all duration-300">𝕏</a>}
+              {socials.linkedin && <a href={socials.linkedin} className="hover:scale-125 hover:text-blue-300 transition-all duration-300">🔗</a>}
+              {socials.youtube && <a href={socials.youtube} className="hover:scale-125 hover:text-red-400 transition-all duration-300">▶</a>}
+              {socials.instagram && <a href={socials.instagram} className="hover:scale-125 hover:text-pink-400 transition-all duration-300">📸</a>}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="border-t border-white/10 py-6 px-6 text-center space-y-2">
+        <p className="text-xs text-white/60 font-medium">© {new Date().getFullYear()} Estate Planning Education Center. All rights reserved. 🛡️</p>
+        <p className="text-xs text-white/50">Helping families build wealth and protect their legacy with confidence</p>
+      </div>
+    </footer>
+  );
+}

components/Hero.tsx

@@ -0,0 +1,109 @@
+export default function Hero() {
+  return (
+    <section className="relative overflow-hidden bg-gradient-to-br from-primary via-primary-dark to-primary-dark py-24 md:py-32">
+      {/* Animated background elements */}
+      <div className="absolute inset-0 opacity-15">
+        <div className="absolute top-20 left-10 w-72 h-72 bg-white rounded-full blur-3xl animate-float"></div>
+        <div className="absolute bottom-10 right-20 w-96 h-96 bg-white rounded-full blur-3xl animate-float" style={{ animationDelay: "1s" }}></div>
+        <div className="absolute top-1/2 left-1/2 w-80 h-80 bg-white rounded-full blur-3xl animate-float" style={{ animationDelay: "2s" }}></div>
+      </div>
+
+      <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 px-6 items-center relative z-10">
+        <div className="space-y-8 animate-slideDown">
+          <div className="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-full text-sm font-semibold text-white border border-white/20 hover:bg-white/15 transition-all duration-300">
+            <span className="inline-block w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
+            <span>Free & Premium Webinars</span>
+          </div>
+
+          <div className="space-y-4">
+            <h1 className="text-5xl md:text-6xl lg:text-7xl font-black leading-tight text-white">
+              Learn Estate <br />
+              <span className="bg-gradient-to-r from-yellow-200 to-pink-200 bg-clip-text text-transparent">
+                Planning Smart
+              </span>
+            </h1>
+
+            <p className="text-lg md:text-xl text-white/85 max-w-xl leading-relaxed font-medium">
+              Master wills, trusts, and asset protection with our expert-led webinars. Build confidence in financial planning for your family's future.
+            </p>
+          </div>
+
+          <div className="flex flex-col sm:flex-row gap-4 pt-4">
+            <a
+              href="/webinars"
+              className="inline-flex items-center justify-center gap-2 rounded-xl px-8 py-4 text-lg font-bold bg-white text-primary shadow-lg shadow-black/10 transition-all duration-300 hover:-translate-y-1 hover:bg-white/90"
+            >
+              Browse Webinars
+            </a>
+            <a
+              href="/about"
+              className="inline-flex items-center justify-center gap-2 rounded-xl px-8 py-4 text-lg font-bold border border-white/50 text-white bg-white/10 backdrop-blur-sm transition-all duration-300 hover:bg-white/20 hover:-translate-y-1"
+            >
+              Learn More
+            </a>
+          </div>
+
+          <div className="grid grid-cols-3 gap-6 pt-8 border-t border-white/20">
+            <div className="group hover-lift">
+              <div className="text-4xl md:text-5xl font-black text-white group-hover:text-yellow-200 transition-colors duration-300">500+</div>
+              <div className="text-xs text-white/70 mt-2 font-semibold uppercase tracking-wider">Webinars</div>
+            </div>
+            <div className="group hover-lift">
+              <div className="text-4xl md:text-5xl font-black text-white group-hover:text-pink-200 transition-colors duration-300">15K+</div>
+              <div className="text-xs text-white/70 mt-2 font-semibold uppercase tracking-wider">Students</div>
+            </div>
+            <div className="group hover-lift">
+              <div className="text-4xl md:text-5xl font-black text-white group-hover:text-blue-200 transition-colors duration-300">4.9</div>
+              <div className="text-xs text-white/70 mt-2 font-semibold uppercase tracking-wider">Rating</div>
+            </div>
+          </div>
+        </div>
+
+        <div className="relative group animate-slideUp">
+            <div className="absolute -inset-0.5 bg-gradient-to-br from-yellow-400 to-pink-400 rounded-2xl opacity-10 group-hover:opacity-20 blur transition duration-500 group-hover:blur-lg"></div>
+          <div className="relative bg-white/10 backdrop-blur-xl rounded-2xl p-8 border border-white/20 shadow-xl group-hover:shadow-2xl transition-all duration-300 group-hover:-translate-y-2">
+            <div className="flex items-center justify-between mb-6">
+              <h3 className="text-base font-bold text-white">🔴 Next Live Session</h3>
+              <span className="flex items-center gap-2 text-xs bg-danger/90 px-3 py-1.5 rounded-full text-white font-semibold shadow-lg">
+                <span className="w-2.5 h-2.5 bg-white rounded-full animate-pulse"></span>
+                LIVE NOW
+              </span>
+            </div>
+
+            <div className="space-y-4">
+              <div>
+                <h4 className="text-xl font-bold text-white leading-snug">Understanding Revocable Living Trusts</h4>
+              </div>
+
+              <div className="space-y-3 text-white/90 font-medium">
+                <div className="flex items-center gap-3 hover:text-white transition-colors">
+                  <span className="text-xl">📅</span>
+                  <span>March 15, 2024</span>
+                </div>
+                <div className="flex items-center gap-3 hover:text-white transition-colors">
+                  <span className="text-xl">🕑</span>
+                  <span>2:00 PM – 3:30 PM EST</span>
+                </div>
+                <div className="flex items-center gap-3 hover:text-white transition-colors">
+                  <span className="text-xl">👩‍⚖️</span>
+                  <span>Sarah Mitchell, Estate Attorney</span>
+                </div>
+                <div className="flex items-center gap-3 hover:text-white transition-colors">
+                  <span className="text-xl">👥</span>
+                  <span>12 spots remaining</span>
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between pt-6 mt-6 border-t border-white/20">
+                <div className="text-2xl font-black text-green-300">FREE</div>
+                <button className="btn-primary !bg-gradient-to-r from-primary to-secondary !px-6 !py-3 text-white font-bold hover:shadow-glow hover:-translate-y-1">
+                  ✨ Reserve Seat
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/Navbar.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import Link from "next/link";
+import ThemeToggle from "./ThemeToggle";
+import { useEffect, useState, useRef } from "react";
+
+export default function Navbar() {
+  const [me, setMe] = useState<any>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const loadUser = () => {
+    fetch("/api/auth/me")
+      .then((r) => r.json())
+      .then((d) => setMe(d))
+      .catch(() => setMe(null));
+  };
+
+  useEffect(() => {
+    loadUser();
+    
+    // Listen for profile updates
+    const handleProfileUpdate = () => {
+      loadUser();
+    };
+    window.addEventListener('profile-updated', handleProfileUpdate);
+    
+    return () => {
+      window.removeEventListener('profile-updated', handleProfileUpdate);
+    };
+  }, []);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setMenuOpen(false);
+      }
+    }
+
+    if (menuOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [menuOpen]);
+
+  const user = me?.user;
+  const initials = user?.firstName && user?.lastName ? `${user.firstName[0]}${user.lastName[0]}`.toUpperCase() : "U";
+
+  return (
+    <>
+      <header className="sticky top-0 z-40 border-b border-gray-200/50 dark:border-slate-700/50 bg-white/80 dark:bg-darkbg/80 backdrop-blur-md shadow-sm">
+        <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
+          <Link href="/" className="flex items-center gap-3 hover:opacity-90 transition-opacity duration-300 group">
+            <div className="h-10 w-10 rounded-lg bg-gradient-to-br from-primary to-primary-dark text-white flex items-center justify-center shadow-md group-hover:shadow-lg transition-all duration-300 text-lg">
+              📊
+            </div>
+            <div className="leading-tight hidden sm:block">
+              <div className="font-bold text-sm text-gray-900 dark:text-white">
+                Estate Pro
+              </div>
+              <div className="text-xs text-gray-500 dark:text-gray-400 font-medium">Planning Hub</div>
+            </div>
+          </Link>
+
+          <nav className="hidden md:flex items-center gap-8 text-sm font-medium">
+            <Link href="/" className="text-gray-700 dark:text-gray-300 hover:text-primary transition-colors duration-300 relative group">
+              Home
+              <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-primary group-hover:w-full transition-all duration-300" />
+            </Link>
+            <Link href="/webinars" className="text-gray-700 dark:text-gray-300 hover:text-primary transition-colors duration-300 relative group">
+              Webinars
+              <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-primary group-hover:w-full transition-all duration-300" />
+            </Link>
+            <Link href="/resources" className="text-gray-700 dark:text-gray-300 hover:text-primary transition-colors duration-300 relative group">
+              Resources
+              <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-primary group-hover:w-full transition-all duration-300" />
+            </Link>
+            <Link href="/about" className="text-gray-700 dark:text-gray-300 hover:text-primary transition-colors duration-300 relative group">
+              About
+              <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-primary group-hover:w-full transition-all duration-300" />
+            </Link>
+            <Link href="/contact" className="text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors duration-300 relative group">
+              Contact
+              <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-primary group-hover:w-full transition-all duration-300" />
+            </Link>
+          </nav>
+
+          <div className="flex items-center gap-4">
+            <ThemeToggle />
+            {user ? (
+              <div className="relative" ref={menuRef}>
+                <button
+                  className="h-11 w-11 rounded-full bg-primary text-white flex items-center justify-center shadow-glow hover:shadow-xl hover:scale-110 transition-all duration-300 active:scale-95"
+                  onClick={() => setMenuOpen((v) => !v)}
+                  aria-label="Account menu"
+                >
+                  {user.avatarUrl ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img src={user.avatarUrl} alt="Avatar" className="h-11 w-11 rounded-full object-cover border-2 border-white/20" />
+                  ) : (
+                    <span className="text-sm font-bold">{initials}</span>
+                  )}
+                </button>
+
+                {menuOpen && (
+                  <div className="absolute right-0 mt-3 w-56 rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-800 shadow-elevation-3 dark:shadow-elevation-4 backdrop-blur-xl p-2 text-sm z-50 animate-slideUp">
+                    {user.role === "ADMIN" && (
+                      <>
+                        <div className="px-3 py-2 text-xs font-semibold text-primary uppercase tracking-wider mb-1">Admin</div>
+                        <Link className="block px-4 py-2.5 rounded-lg hover:bg-primary/10 dark:hover:bg-primary/20 transition-colors duration-200 font-medium text-gray-700 dark:text-gray-200" href="/admin">
+                          📊 Dashboard
+                        </Link>
+                        <Link className="block px-4 py-2.5 rounded-lg hover:bg-primary/10 dark:hover:bg-primary/20 transition-colors duration-200 font-medium text-gray-700 dark:text-gray-200" href="/admin/contact-messages">
+                          📧 Messages
+                        </Link>
+                        <hr className="my-2 border-gray-200 dark:border-gray-700" />
+                      </>
+                    )}
+                    <Link className="block px-4 py-2.5 rounded-lg hover:bg-primary/10 dark:hover:bg-primary/20 transition-colors duration-200 font-medium text-gray-700 dark:text-gray-200" href="/account/webinars">
+                      🎓 My Webinars
+                    </Link>
+                    <Link className="block px-4 py-2.5 rounded-lg hover:bg-primary/10 dark:hover:bg-primary/20 transition-colors duration-200 font-medium text-gray-700 dark:text-gray-200" href="/account/settings">
+                      ⚙️ Settings
+                    </Link>
+                    <hr className="my-2 border-gray-200 dark:border-gray-700" />
+                    <button
+                      className="w-full text-left px-4 py-2.5 rounded-lg hover:bg-danger/10 dark:hover:bg-danger/20 transition-colors duration-200 font-medium text-danger"
+                      onClick={async () => {
+                        await fetch("/api/auth/logout", { method: "POST" });
+                        window.location.href = "/";
+                      }}
+                    >
+                      🚪 Logout
+                    </button>
+                  </div>
+                )}
+              </div>
+            ) : (
+              <>
+                <Link
+                  href="/signin"
+                  className="px-4 py-2 text-sm font-semibold text-gray-700 dark:text-gray-300 hover:text-primary transition-colors duration-300"
+                >
+                  Sign In
+                </Link>
+                <Link
+                  href="/signup"
+                  className="btn-primary btn-sm"
+                >
+                  Get Started
+                </Link>
+              </>
+            )}
+          </div>
+        </div>
+      </header>
+    </>
+  );
+}

components/Providers.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import { ThemeProvider } from 'next-themes'
+import { ReactNode } from 'react'
+
+export default function Providers({
+  children,
+}: {
+  children: ReactNode
+}) {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      {children}
+    </ThemeProvider>
+  )
+}

components/Testimonials.tsx

@@ -0,0 +1,80 @@
+const items = [
+  { quote: "The webinar on revocable living trusts was incredibly informative. I finally understand how to protect my assets and avoid probate.", name: "James Wilson", title: "Small Business Owner", role: "👨‍💼" },
+  { quote: "As a senior citizen, I was confused about healthcare directives. The instructor explained everything clearly and answered all my questions.", name: "Margaret Foster", title: "Retiree", role: "👵" },
+  { quote: "The tax planning webinar saved me thousands. I learned strategies I never knew existed. Worth every penny and more!", name: "Carlos Rodriguez", title: "Real Estate Investor", role: "🏢" },
+];
+
+export default function Testimonials() {
+  return (
+    <section className="py-28 bg-gradient-to-br from-white via-white to-blue-50 dark:from-darkbg dark:via-darkbg dark:to-slate-900">
+      <div className="max-w-7xl mx-auto px-6">
+        <div className="text-center space-y-3 mb-16">
+          <h2 className="text-5xl font-black text-gray-900 dark:text-white">
+            ⭐ Trusted by <span className="text-primary">Thousands</span>
+          </h2>
+          <p className="text-lg text-gray-600 dark:text-gray-300 font-medium max-w-2xl mx-auto">
+            Real feedback from people who transformed their financial future with us
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-3 gap-6 mt-12">
+          {items.map((t) => (
+            <div
+              key={t.name}
+              className="group relative"
+            >
+              {/* Gradient border effect */}
+              <div className="absolute -inset-0.5 bg-primary rounded-2xl opacity-0 group-hover:opacity-100 blur transition duration-300 group-hover:blur-lg"></div>
+
+              <div className="relative bg-white dark:bg-slate-800/80 rounded-2xl shadow-soft group-hover:shadow-elevation-3 p-8 transition-all duration-300 group-hover:-translate-y-2 backdrop-blur-sm border border-gray-100 dark:border-slate-700">
+                {/* Top accent */}
+                <div className="absolute top-0 left-0 w-1 h-12 bg-primary rounded-bl-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+
+                {/* Star rating */}
+                <div className="flex gap-1 text-xl">
+                  {[...Array(5)].map((_, i) => (
+                    <span key={i} className="group-hover:scale-110 transition-transform duration-300" style={{ transitionDelay: `${i * 50}ms` }}>
+                      ⭐
+                    </span>
+                  ))}
+                </div>
+
+                {/* Quote */}
+                <p className="text-gray-700 dark:text-gray-300 mt-5 leading-relaxed font-medium text-sm md:text-base">
+                  "{t.quote}"
+                </p>
+
+                {/* Author */}
+                <div className="mt-6 flex items-center gap-4 pt-6 border-t border-gray-100 dark:border-slate-700">
+                  <div className="h-12 w-12 rounded-full bg-primary flex items-center justify-center text-xl font-bold text-white shadow-glow group-hover:shadow-lg transition-all duration-300">
+                    {t.role}
+                  </div>
+                  <div>
+                    <div className="font-bold text-gray-900 dark:text-white text-sm md:text-base">{t.name}</div>
+                    <div className="text-xs text-gray-500 dark:text-gray-400 font-semibold">{t.title}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Trust metrics */}
+        <div className="grid md:grid-cols-3 gap-6 mt-20 pt-12 border-t border-gray-200 dark:border-gray-700">
+          <div className="text-center hover-lift">
+            <div className="text-4xl font-black text-primary">15,000+</div>
+            <div className="text-gray-600 dark:text-gray-400 font-semibold mt-2">Students Graduated</div>
+          </div>
+          <div className="text-center hover-lift">
+            <div className="text-4xl font-black text-secondary">4.9⭐</div>
+            <div className="text-gray-600 dark:text-gray-400 font-semibold mt-2">Average Rating</div>
+          </div>
+          <div className="text-center hover-lift">
+            <div className="text-4xl font-black text-accent">500+</div>
+            <div className="text-gray-600 dark:text-gray-400 font-semibold mt-2">Expert-Led Courses</div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/ThemeToggle.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+export default function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  if (!mounted) return null;
+
+  const isDark = theme === "dark";
+  return (
+    <button
+      className="btn-ghost btn-sm px-3 py-2 rounded-lg border border-gray-300 dark:border-slate-600 hover:bg-gray-100 dark:hover:bg-slate-700 shadow-sm"
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      aria-label="Toggle theme"
+      title={isDark ? "Switch to light mode" : "Switch to dark mode"}
+    >
+      {isDark ? "🌙" : "☀️"}
+    </button>
+  );
+}

components/UpcomingWebinars.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+export default function UpcomingWebinars() {
+  const [data, setData] = useState<any>(null);
+  const [categories, setCategories] = useState<string[]>([]);
+  const [active, setActive] = useState<string>("All");
+
+  useEffect(() => {
+    fetch("/api/public/app-setup")
+      .then((r) => r.json())
+      .then((d) => setCategories(["All", ...(d?.setup?.categories || [])]))
+      .catch(() => setCategories(["All"]));
+  }, []);
+
+  useEffect(() => {
+    fetch("/api/webinars")
+      .then((r) => r.json())
+      .then(setData)
+      .catch(() => setData({ ok: false, message: "Something went wrong. Please contact the website owner." }));
+  }, []);
+
+  const webinars = data?.ok ? data.webinars : [];
+  const filtered = active === "All" ? webinars : webinars.filter((w: any) => w.category === active);
+
+  return (
+    <section className="py-28 bg-gradient-to-br from-gray-50 via-white to-blue-50 dark:from-slate-900 dark:via-darkbg dark:to-slate-900">
+      <div className="max-w-7xl mx-auto px-6">
+        <div className="space-y-8">
+          {/* Header */}
+          <div className="text-center space-y-3">
+            <h2 className="text-5xl font-black text-gray-900 dark:text-white">
+              📚 Upcoming <span className="text-primary">Webinars</span>
+            </h2>
+            <p className="text-lg text-gray-600 dark:text-gray-300 font-medium">Register now to secure your spot in our expert-led sessions</p>
+          </div>
+
+          {/* Category Filter */}
+          <div className="flex flex-wrap gap-3 justify-center">
+            {categories.map((c) => (
+              <button
+                key={c}
+                onClick={() => setActive(c)}
+                className={`px-6 py-2.5 rounded-full text-sm font-bold transition-all duration-300 border-2 ${
+                  active === c
+                    ? "bg-primary text-white border-transparent shadow-glow hover:shadow-lg"
+                    : "border-gray-300 dark:border-slate-600 text-gray-700 dark:text-gray-300 hover:border-primary hover:text-primary dark:hover:text-primary"
+                }`}
+              >
+                {c}
+              </button>
+            ))}
+          </div>
+
+          {/* Webinars Table */}
+          <div className="overflow-hidden rounded-2xl shadow-soft border border-gray-200 dark:border-slate-700">
+            <div className="overflow-x-auto">
+              <div className="bg-gray-50 dark:bg-slate-800 grid grid-cols-5 gap-4 px-6 py-4 text-xs font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+                <div className="col-span-2">📝 Webinar</div>
+                <div>📅 Date & Time</div>
+                <div>👨‍🏫 Instructor</div>
+                <div className="text-right">💰 Price</div>
+              </div>
+              
+              <div className="divide-y divide-gray-200 dark:divide-slate-700 bg-white dark:bg-slate-800/50">
+                {!data ? (
+                  <div className="px-6 py-8 text-center">
+                    <div className="inline-flex items-center gap-2 text-gray-600 dark:text-gray-400 font-medium">
+                      <div className="w-4 h-4 border-2 border-primary border-r-transparent rounded-full animate-spin"></div>
+                      Loading webinars...
+                    </div>
+                  </div>
+                ) : !data.ok ? (
+                  <div className="px-6 py-8 text-center text-danger font-semibold">{data.message}</div>
+                ) : filtered.length === 0 ? (
+                  <div className="px-6 py-8 text-center text-gray-600 dark:text-gray-400 font-medium">No webinars found in this category</div>
+                ) : (
+                  filtered.map((w: any) => (
+                    <div key={w.id} className="grid grid-cols-5 gap-4 px-6 py-4 items-center hover:bg-gray-50 dark:hover:bg-slate-700/30 transition-colors duration-200 group">
+                      {/* Webinar Title & Tags */}
+                      <div className="col-span-2 space-y-2">
+                        <div className="font-bold text-gray-900 dark:text-white group-hover:text-primary transition-colors">{w.title}</div>
+                        <div className="flex gap-2 flex-wrap">
+                          <span className={`px-3 py-1 rounded-full text-xs font-bold ${
+                            w.priceCents <= 0
+                              ? "bg-success/15 text-success dark:text-emerald-400"
+                              : "bg-secondary/15 text-secondary dark:text-pink-400"
+                          }`}>
+                            {w.priceCents <= 0 ? "✨ FREE" : "⭐ PREMIUM"}
+                          </span>
+                          <span className="px-3 py-1 rounded-full text-xs font-bold bg-primary/15 text-primary dark:text-indigo-400">
+                            {w.category}
+                          </span>
+                        </div>
+                      </div>
+
+                      {/* Date & Time */}
+                      <div className="text-sm font-semibold text-gray-600 dark:text-gray-400">
+                        {new Date(w.startAt).toLocaleDateString()} <br />
+                        <span className="text-xs opacity-80">{new Date(w.startAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
+                      </div>
+
+                      {/* Instructor */}
+                      <div className="text-sm font-semibold text-gray-600 dark:text-gray-400">{w.speaker}</div>
+
+                      {/* Price & Button */}
+                      <div className="flex items-center justify-end gap-4">
+                        <div className={`text-lg font-black ${w.priceCents <= 0 ? "text-success" : "text-primary"}`}>
+                          {w.priceCents <= 0 ? "FREE" : `$${(w.priceCents / 100).toFixed(0)}`}
+                        </div>
+                        <Link href={`/webinars/${w.id}`} className="btn-primary !px-5 !py-2.5 text-sm font-bold whitespace-nowrap">
+                          {w.priceCents <= 0 ? "🎓 Register" : "💳 Purchase"}
+                        </Link>
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* View All Link */}
+          <div className="text-center">
+            <Link href="/webinars" className="inline-flex items-center gap-2 text-lg font-bold text-primary hover:text-secondary transition-colors duration-300 hover-lift">
+              🔗 View All Webinars <span className="group-hover:translate-x-1 transition-transform">→</span>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/WhyWithUs.tsx

@@ -0,0 +1,60 @@
+const items = [
+  { title: "Expert Instructors", desc: "Learn from licensed attorneys and certified estate planners", icon: "🧑‍🏫" },
+  { title: "Live & On-Demand", desc: "Join live sessions or watch recordings at your convenience", icon: "🎥" },
+  { title: "Certificates", desc: "Earn completion certificates for premium courses", icon: "🏅" },
+  { title: "Secure Platform", desc: "Your data and payments are protected with enterprise security", icon: "🔒" },
+];
+
+export default function WhyWithUs() {
+  return (
+    <section className="py-28 bg-gradient-to-br from-gray-50 via-white to-blue-50 dark:from-darkbg dark:via-slate-900 dark:to-slate-900">
+      <div className="max-w-7xl mx-auto px-6">
+        <div className="text-center space-y-3 mb-16">
+          <h2 className="text-5xl font-black text-gray-900 dark:text-white">
+            🌟 Why Learn With <span className="text-primary">Us?</span>
+          </h2>
+          <p className="text-lg text-gray-600 dark:text-gray-300 font-medium max-w-2xl mx-auto">
+            Expert guidance, practical knowledge, and actionable insights to protect your legacy
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-4 gap-6 mt-12">
+          {items.map((it, idx) => (
+            <div
+              key={it.title}
+              className="group relative"
+            >
+              {/* Subtle background gradient */}
+              <div className="absolute -inset-0.5 bg-primary/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-sm"></div>
+
+              <div className="relative bg-white dark:bg-slate-800/60 rounded-2xl p-8 border border-gray-200 dark:border-slate-700 transition-all duration-300 group-hover:shadow-elevation-2 group-hover:-translate-y-1 backdrop-blur-sm h-full flex flex-col">
+                {/* Top border accent */}
+                <div className="absolute top-0 left-0 right-0 h-1 bg-primary opacity-0 group-hover:opacity-100 rounded-t-2xl transition-opacity duration-300"></div>
+
+                {/* Icon */}
+                <div className="h-16 w-16 rounded-2xl bg-primary/20 flex items-center justify-center text-4xl group-hover:scale-110 group-hover:shadow-glow transition-all duration-300 mx-auto">
+                  {it.icon}
+                </div>
+
+                {/* Title */}
+                <h3 className="font-bold text-lg text-gray-900 dark:text-white mt-5 text-center group-hover:text-primary transition-colors duration-300">
+                  {it.title}
+                </h3>
+
+                {/* Description */}
+                <p className="text-sm text-gray-600 dark:text-gray-400 mt-3 text-center leading-relaxed flex-grow font-medium">
+                  {it.desc}
+                </p>
+
+                {/* Bottom accent bar */}
+                <div className="mt-5 pt-5 border-t border-gray-200 dark:border-slate-700 text-xs font-bold text-primary dark:text-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-center">
+                  Learn More →
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

components/admin/AdminSidebar.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+interface AdminSidebarProps {
+  userName?: string
+}
+
+export default function AdminSidebar({ userName }: AdminSidebarProps) {
+  const pathname = usePathname()
+
+  const isActive = (href: string) => {
+    // Exact match for dashboard
+    if (href === '/admin') {
+      return pathname === '/admin' || pathname === '/admin/analytics'
+    }
+    // For other routes, check if pathname starts with href
+    return pathname.startsWith(href)
+  }
+
+  const menuItems = [
+    { href: '/admin', label: '📊 Dashboard', icon: '📊' },
+    { href: '/admin/users', label: '👥 Users', icon: '👥' },
+    { href: '/admin/webinars', label: '📹 Webinars', icon: '📹' },
+    { href: '/admin/registrations', label: '📝 Registrations', icon: '📝' },
+    { href: '/admin/contact-messages', label: '📧 Messages', icon: '📧' },
+    { href: '/admin/setup', label: '⚙️ Setup', icon: '⚙️' },
+  ]
+
+  return (
+    <aside className="w-64 bg-white dark:bg-slate-800 border-r border-gray-200 dark:border-slate-700 h-screen sticky top-0 overflow-y-auto shadow-sm">
+      <div className="p-6 border-b border-gray-200 dark:border-slate-700">
+        <div className="mb-8">
+          <div className="flex items-center gap-3 mb-3">
+            <div className="h-10 w-10 rounded-lg bg-gradient-to-br from-primary to-primary-dark text-white flex items-center justify-center font-bold text-lg">
+              ⚙️
+            </div>
+            <h2 className="text-xl font-bold text-gray-900 dark:text-white">Admin</h2>
+          </div>
+          {userName && (
+            <p className="text-xs text-gray-600 dark:text-gray-400 font-medium">
+              👤 {userName}
+            </p>
+          )}
+        </div>
+
+        <nav className="space-y-1">
+          {menuItems.map((item) => {
+            const active = isActive(item.href);
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={`flex items-center gap-3 px-4 py-2.5 rounded-lg transition-all duration-200 font-medium text-sm ${
+                  active
+                    ? 'bg-primary text-white shadow-md'
+                    : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-slate-700'
+                }`}
+              >
+                <span className="text-base">{item.icon}</span>
+                <span>{item.label.split(' ')[1]}</span>
+              </Link>
+            );
+          })}
+        </nav>
+      </div>
+
+      <div className="absolute bottom-0 left-0 right-0 p-6 border-t border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800/50 backdrop-blur-sm">
+        <Link
+          href="/"
+          className="flex items-center justify-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300 hover:text-primary transition-colors py-2"
+        >
+          <span>←</span>
+          <span>Back to Site</span>
+        </Link>
+      </div>
+    </aside>
+  )
+}

components/admin/WebinarModal.tsx

@@ -0,0 +1,338 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+interface WebinarModalProps {
+  webinar?: any;
+  onClose: () => void;
+  onSave: () => void;
+}
+
+export default function WebinarModal({ webinar, onClose, onSave }: WebinarModalProps) {
+  const isEdit = !!webinar;
+  const [form, setForm] = useState({
+    title: "",
+    description: "",
+    speaker: "",
+    startAt: new Date(Date.now() + 86400000).toISOString().slice(0, 16),
+    duration: 90,
+    bannerUrl: "",
+    category: "Basics",
+    visibility: "PUBLIC",
+    isActive: true,
+    capacity: 25,
+    priceCents: 0,
+  });
+  const [learningPoints, setLearningPoints] = useState<string[]>([""]);
+  const [msg, setMsg] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (webinar) {
+      setForm({
+        title: webinar.title || "",
+        description: webinar.description || "",
+        speaker: webinar.speaker || "",
+        startAt: webinar.startAt ? new Date(webinar.startAt).toISOString().slice(0, 16) : "",
+        duration: webinar.duration || 90,
+        bannerUrl: webinar.bannerUrl || "",
+        category: webinar.category || "Basics",
+        visibility: webinar.visibility || "PUBLIC",
+        isActive: webinar.isActive ?? true,
+        capacity: webinar.capacity || 25,
+        priceCents: webinar.priceCents || 0,
+      });
+      
+      // Load learning points if available
+      if (webinar.learningPoints && Array.isArray(webinar.learningPoints) && webinar.learningPoints.length > 0) {
+        setLearningPoints(webinar.learningPoints);
+      } else {
+        setLearningPoints([""]);
+      }
+    }
+  }, [webinar]);
+
+  function addLearningPoint() {
+    setLearningPoints([...learningPoints, ""]);
+  }
+
+  function removeLearningPoint(index: number) {
+    if (learningPoints.length > 1) {
+      setLearningPoints(learningPoints.filter((_, i) => i !== index));
+    }
+  }
+
+  function updateLearningPoint(index: number, value: string) {
+    const updated = [...learningPoints];
+    updated[index] = value;
+    setLearningPoints(updated);
+  }
+
+  async function handleSubmit() {
+    setMsg(null);
+    setLoading(true);
+
+    // Validate required fields
+    if (!form.title.trim()) {
+      setLoading(false);
+      setMsg("❌ Title is required");
+      return;
+    }
+    if (!form.description.trim()) {
+      setLoading(false);
+      setMsg("❌ Description is required");
+      return;
+    }
+    if (!form.speaker.trim()) {
+      setLoading(false);
+      setMsg("❌ Speaker is required");
+      return;
+    }
+    if (form.duration < 15) {
+      setLoading(false);
+      setMsg("❌ Duration must be at least 15 minutes");
+      return;
+    }
+    if (form.capacity < 1) {
+      setLoading(false);
+      setMsg("❌ Capacity must be at least 1");
+      return;
+    }
+
+    // Filter out empty learning points
+    const filteredPoints = learningPoints.filter(p => p.trim() !== "");
+
+    const payload = {
+      ...form,
+      duration: Number(form.duration),
+      capacity: Number(form.capacity),
+      priceCents: Number(form.priceCents),
+      startAt: new Date(form.startAt).toISOString(),
+      learningPoints: filteredPoints,
+    };
+
+    const res = isEdit
+      ? await fetch(`/api/webinars/${webinar.id}`, {
+          method: "PATCH",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify(payload),
+        })
+      : await fetch("/api/webinars", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify(payload),
+        });
+
+    const d = await res.json();
+    setLoading(false);
+
+    if (!d.ok) {
+      setMsg(d.message);
+      return;
+    }
+
+    setMsg(isEdit ? "Webinar updated!" : "Webinar created!");
+    setTimeout(() => {
+      onSave();
+      onClose();
+    }, 1000);
+  }
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2 className="modal-title">
+            {isEdit ? "✏️ Edit Webinar" : "🎓 Create New Webinar"}
+          </h2>
+          <button onClick={onClose} className="modal-close-btn">
+            ✕
+          </button>
+        </div>
+
+        <div className="modal-body space-y-4">
+          {msg && (
+            <div className={`p-4 rounded-xl text-sm font-medium ${msg.includes("!") || msg.includes("✅") ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20" : "bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/20"}`}>
+              {msg}
+            </div>
+          )}
+          
+          <div>
+            <label className="block text-sm font-semibold mb-2 text-slate-700 dark:text-slate-300">📝 Title *</label>
+            <input
+              className="input-field w-full"
+              placeholder="e.g., Estate Planning Fundamentals"
+              value={form.title}
+              onChange={(e) => setForm({ ...form, title: e.target.value })}
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-semibold mb-2 text-slate-700 dark:text-slate-300">📄 Description *</label>
+            <textarea
+              className="input-field w-full"
+              rows={4}
+              placeholder="Describe what participants will learn..."
+              value={form.description}
+              onChange={(e) => setForm({ ...form, description: e.target.value })}
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-semibold mb-2 text-slate-700 dark:text-slate-300">🎤 Speaker *</label>
+              <input
+                className="input-field w-full"
+                placeholder="e.g., Dr. Jane Smith"
+                value={form.speaker}
+                onChange={(e) => setForm({ ...form, speaker: e.target.value })}
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-semibold mb-2 text-slate-700 dark:text-slate-300">🏷️ Category *</label>
+              <select
+                className="input-field w-full"
+                value={form.category}
+                onChange={(e) => setForm({ ...form, category: e.target.value })}
+              >
+                <option value="Basics">Basics</option>
+                <option value="Planning">Planning</option>
+                <option value="Tax">Tax</option>
+                <option value="Healthcare">Healthcare</option>
+                <option value="Advanced">Advanced</option>
+              </select>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-semibold mb-2 text-slate-700 dark:text-slate-300">📅 Start Date & Time *</label>
+              <input
+                className="input-field w-full"
+                type="datetime-local"
+                value={form.startAt}
+                onChange={(e) => setForm({ ...form, startAt: e.target.value })}
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-semibold mb-2 text-slate-700 dark:text-slate-300">⏱️ Duration (minutes) *</label>
+              <input
+                className="input-field w-full"
+                type="number"
+                min="15"
+                step="15"
+                value={form.duration}
+                onChange={(e) => setForm({ ...form, duration: Number(e.target.value) })}
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-semibold mb-2 text-slate-700 dark:text-slate-300">👥 Capacity *</label>
+              <input
+                className="input-field w-full"
+                type="number"
+                min="1"
+                value={form.capacity}
+                onChange={(e) => setForm({ ...form, capacity: Number(e.target.value) })}
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-semibold mb-2 text-slate-700 dark:text-slate-300">
+                💰 Price {form.priceCents === 0 ? <span className="text-green-600 dark:text-green-400">(FREE)</span> : <span className="text-blue-600 dark:text-blue-400">(PAID)</span>}
+              </label>
+              <input
+                className="input-field w-full"
+                type="number"
+                min="0"
+                placeholder="0 for free"
+                value={form.priceCents}
+                onChange={(e) => setForm({ ...form, priceCents: Number(e.target.value) })}
+              />
+              <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">
+                ${(form.priceCents / 100).toFixed(2)} {form.priceCents === 0 && "- This webinar will be free"}
+              </p>
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-semibold mb-2 text-slate-700 dark:text-slate-300">🖼️ Banner Image URL (optional)</label>
+            <input
+              className="input-field w-full"
+              placeholder="https://example.com/banner.jpg"
+              value={form.bannerUrl}
+              onChange={(e) => setForm({ ...form, bannerUrl: e.target.value })}
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-semibold mb-2 text-slate-700 dark:text-slate-300">📚 Learning Points</label>
+            <div className="space-y-2">
+              {learningPoints.map((point, index) => (
+                <div key={index} className="flex gap-2">
+                  <input
+                    className="input-field flex-1"
+                    placeholder={`Learning point ${index + 1}`}
+                    value={point}
+                    onChange={(e) => updateLearningPoint(index, e.target.value)}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => removeLearningPoint(index)}
+                    className="px-3 py-2 bg-red-500/10 hover:bg-red-500/20 text-red-600 dark:text-red-400 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                    disabled={learningPoints.length === 1}
+                    title="Remove point"
+                  >
+                    🗑️
+                  </button>
+                </div>
+              ))}
+              <button
+                type="button"
+                onClick={addLearningPoint}
+                className="w-full px-4 py-2 bg-primary/10 hover:bg-primary/20 text-primary rounded-lg transition-colors font-medium text-sm"
+              >
+                ➕ Add Learning Point
+              </button>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-semibold mb-2 text-slate-700 dark:text-slate-300">👁️ Visibility</label>
+              <select
+                className="input-field w-full"
+                value={form.visibility}
+                onChange={(e) => setForm({ ...form, visibility: e.target.value })}
+              >
+                <option value="PUBLIC">Public</option>
+                <option value="PRIVATE">Private</option>
+              </select>
+            </div>
+            <div className="flex items-end">
+              <label className="flex items-center gap-2 cursor-pointer">
+                <input
+                  type="checkbox"
+                  className="w-5 h-5 rounded border-gray-300 text-primary focus:ring-primary"
+                  checked={form.isActive}
+                  onChange={(e) => setForm({ ...form, isActive: e.target.checked })}
+                />
+                <span className="text-sm font-semibold text-slate-700 dark:text-slate-300">✅ Active</span>
+              </label>
+            </div>
+          </div>
+        </div>
+
+        <div className="modal-footer">
+          <button onClick={onClose} className="btn-secondary" disabled={loading}>
+            ❌ Cancel
+          </button>
+          <button onClick={handleSubmit} className="btn-primary" disabled={loading}>
+            {loading ? "⏳ Saving..." : isEdit ? "✅ Update Webinar" : "🎓 Create Webinar"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

components/auth/AuthModal.tsx

@@ -0,0 +1,410 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+type AuthModalProps = {
+  open: "login" | "register" | null;
+  onClose: () => void;
+  onSwitch: (mode: "login" | "register") => void;
+};
+
+export default function AuthModal({ open, onClose, onSwitch }: AuthModalProps) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [msg, setMsg] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [passwordStrength, setPasswordStrength] = useState<{
+    met: boolean;
+    missing: string[];
+  }>({ met: false, missing: [] });
+  const [providers, setProviders] = useState<{
+    google?: boolean;
+    github?: boolean;
+    facebook?: boolean;
+    discord?: boolean;
+  }>({});
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleEscape);
+    return () => window.removeEventListener("keydown", handleEscape);
+  }, [onClose]);
+
+  useEffect(() => {
+    setMsg("");
+    setEmail("");
+    setPassword("");
+    setConfirmPassword("");
+    setFirstName("");
+    setLastName("");
+  }, [open]);
+
+  // Load OAuth provider configuration
+  useEffect(() => {
+    const loadProviders = async () => {
+      try {
+        const res = await fetch("/api/public/app-setup");
+        const data = await res.json();
+        if (data.setup?.data?.oauth) {
+          setProviders({
+            google: data.setup.data.oauth.google?.enabled,
+            github: data.setup.data.oauth.github?.enabled,
+            facebook: data.setup.data.oauth.facebook?.enabled,
+            discord: data.setup.data.oauth.discord?.enabled,
+          });
+        }
+      } catch (err) {
+        console.error("Failed to load OAuth providers:", err);
+      }
+    };
+
+    loadProviders();
+  }, []);
+
+  // Validate password strength
+  useEffect(() => {
+    const missing: string[] = [];
+    if (password.length < 8 || password.length > 20) missing.push("8-20 characters");
+    if (!/[A-Z]/.test(password)) missing.push("uppercase letter");
+    if (!/\d/.test(password)) missing.push("number");
+    if (/\s/.test(password)) missing.push("no spaces");
+    setPasswordStrength({ met: missing.length === 0, missing });
+  }, [password]);
+
+  const handleSignUp = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setBusy(true);
+    setMsg("");
+
+    try {
+      if (!firstName.trim() || !lastName.trim()) {
+        setMsg("First and last name are required");
+        setBusy(false);
+        return;
+      }
+
+      if (password !== confirmPassword) {
+        setMsg("Passwords do not match");
+        setBusy(false);
+        return;
+      }
+
+      if (!passwordStrength.met) {
+        setMsg(`Password must contain: ${passwordStrength.missing.join(", ")}`);
+        setBusy(false);
+        return;
+      }
+
+      const res = await fetch("/api/auth/register", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          firstName,
+          lastName,
+          email,
+          password,
+          confirmPassword,
+        }),
+      });
+
+      const data = await res.json();
+
+      if (!data.ok) {
+        setMsg(data.message || "Sign up failed");
+        setBusy(false);
+        return;
+      }
+
+      setMsg("✅ Account created! Redirecting...");
+      setTimeout(() => {
+        window.location.href = "/account/webinars";
+      }, 1500);
+    } catch (err: any) {
+      setMsg(err?.message || "Sign up failed. Please try again.");
+      setBusy(false);
+    }
+  };
+
+  const handleSignIn = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setBusy(true);
+    setMsg("");
+
+    try {
+      const res = await fetch("/api/auth/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password }),
+      });
+
+      const data = await res.json();
+
+      if (!data.ok) {
+        setMsg(data.message || "Sign in failed");
+        setBusy(false);
+        return;
+      }
+
+      // Redirect based on user role
+      const userRole = data.user?.role;
+      if (userRole === "ADMIN") {
+        window.location.href = "/admin";
+      } else {
+        window.location.href = "/account/webinars";
+      }
+    } catch (err: any) {
+      setMsg(err?.message || "Sign in failed. Please try again.");
+      setBusy(false);
+    }
+  };
+
+  const handleOAuthSignIn = async (provider: "google" | "github" | "facebook" | "discord") => {
+    try {
+      setBusy(true);
+      // Better Auth OAuth flow: Redirect to /api/auth/{provider}
+      // BetterAuth will handle the redirect to the provider's OAuth endpoint
+      const redirectUrl = `/api/auth/${provider}`;
+      
+      // Get the provider's OAuth authorization URL
+      const res = await fetch(`${redirectUrl}?action=signin`, {
+        method: "GET",
+      });
+      
+      if (!res.ok) {
+        throw new Error(`OAuth redirect failed: ${res.statusText}`);
+      }
+      
+      // BetterAuth returns a redirect, follow it
+      window.location.href = redirectUrl;
+    } catch (err: any) {
+      setMsg(`${provider} sign in failed. Please try again.`);
+      setBusy(false);
+    }
+  };
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onClose} />
+
+      <div className="relative bg-white dark:bg-slate-900 rounded-2xl shadow-2xl max-w-md w-full p-8 max-h-[90vh] overflow-y-auto">
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 text-2xl leading-none"
+        >
+          ✕
+        </button>
+
+        <h2 className="text-3xl font-bold mb-6 text-gray-900 dark:text-white">
+          {open === "login" ? "👤 Sign In" : "🚀 Sign Up"}
+        </h2>
+
+        {open === "register" && (
+          <>
+            <input
+              type="text"
+              placeholder="First Name"
+              value={firstName}
+              onChange={(e) => setFirstName(e.target.value)}
+              className="input-field w-full mb-4"
+              disabled={busy}
+            />
+            <input
+              type="text"
+              placeholder="Last Name"
+              value={lastName}
+              onChange={(e) => setLastName(e.target.value)}
+              className="input-field w-full mb-4"
+              disabled={busy}
+            />
+          </>
+        )}
+
+        <input
+          type="email"
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className="input-field w-full mb-4"
+          disabled={busy}
+        />
+
+        <input
+          type="password"
+          placeholder="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          className="input-field w-full mb-2"
+          disabled={busy}
+        />
+
+        {open === "register" && (
+          <>
+            <div className="mb-4 text-sm">
+              {password && (
+                <div className="grid grid-cols-2 gap-2">
+                  {[
+                    { label: "8-20 chars", check: password.length >= 8 && password.length <= 20 },
+                    { label: "Uppercase", check: /[A-Z]/.test(password) },
+                    { label: "Number", check: /\d/.test(password) },
+                    { label: "No spaces", check: !/\s/.test(password) },
+                  ].map(({ label, check }) => (
+                    <div key={label} className={check ? "text-success" : "text-danger"}>
+                      {check ? "✅" : "❌"} {label}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            <input
+              type="password"
+              placeholder="Confirm Password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              className="input-field w-full mb-4"
+              disabled={busy}
+            />
+          </>
+        )}
+
+        {msg && (
+          <div
+            className={`p-4 rounded-lg font-semibold text-center mb-4 ${
+              msg.includes("error") || msg.includes("failed") || msg.includes("must") || msg.includes("not")
+                ? "bg-danger/15 text-danger dark:bg-danger/25 dark:text-danger-light border-2 border-danger/30"
+                : "bg-success/15 text-success dark:bg-success/25 dark:text-success-light border-2 border-success/30"
+            }`}
+          >
+            {msg}
+          </div>
+        )}
+
+        <button
+          className="btn-primary w-full mb-4"
+          disabled={busy}
+          onClick={open === "login" ? handleSignIn : handleSignUp}
+        >
+          {busy ? "⏳ Processing…" : open === "login" ? "👤 Sign In" : "🚀 Sign Up"}
+        </button>
+
+        {/* OAuth Buttons */}
+        {Object.values(providers).some(p => p) && (
+          <>
+            <div className="relative mb-6">
+              <div className="absolute inset-0 flex items-center">
+                <div className="w-full border-t border-gray-300 dark:border-slate-600"></div>
+              </div>
+              <div className="relative flex justify-center text-sm">
+                <span className="px-2 bg-white dark:bg-slate-900 text-gray-600 dark:text-gray-400 font-medium">
+                  Or continue with
+                </span>
+              </div>
+            </div>
+
+            <div className="space-y-2.5 mb-4">
+              {providers.google && (
+                <button
+                  onClick={() => handleOAuthSignIn("google")}
+                  disabled={busy}
+                  className="w-full flex items-center justify-center gap-3 px-4 py-3 bg-white dark:bg-slate-800 border-2 border-gray-200 dark:border-slate-700 rounded-xl font-medium text-gray-700 dark:text-gray-200 text-sm transition-all duration-200 hover:border-blue-500 hover:shadow-md dark:hover:border-blue-400 dark:hover:bg-slate-700 active:scale-95 disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:border-gray-200 disabled:dark:hover:border-slate-700"
+                  title="Continue with Google account"
+                  aria-label="Continue with Google"
+                >
+                  <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none">
+                    <g clipPath="url(#clip0)">
+                      <path
+                        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                        fill="#4285F4"
+                      />
+                      <path
+                        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                        fill="#34A853"
+                      />
+                      <path
+                        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                        fill="#FBBC05"
+                      />
+                      <path
+                        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                        fill="#EA4335"
+                      />
+                    </g>
+                  </svg>
+                  <span>Continue with Google</span>
+                  {busy && <span className="ml-auto animate-spin">⟳</span>}
+                </button>
+              )}
+              
+              {providers.github && (
+                <button
+                  onClick={() => handleOAuthSignIn("github")}
+                  disabled={busy}
+                  className="w-full flex items-center justify-center gap-3 px-4 py-3 bg-white dark:bg-slate-800 border-2 border-gray-200 dark:border-slate-700 rounded-xl font-medium text-gray-700 dark:text-gray-200 text-sm transition-all duration-200 hover:border-gray-900 dark:hover:border-white hover:shadow-md dark:hover:bg-slate-700 active:scale-95 disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:border-gray-200 disabled:dark:hover:border-slate-700"
+                  title="Continue with GitHub account"
+                  aria-label="Continue with GitHub"
+                >
+                  <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v 3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                  </svg>
+                  <span>Continue with GitHub</span>
+                  {busy && <span className="ml-auto animate-spin">⟳</span>}
+                </button>
+              )}
+              
+              {providers.facebook && (
+                <button
+                  onClick={() => handleOAuthSignIn("facebook")}
+                  disabled={busy}
+                  className="w-full flex items-center justify-center gap-3 px-4 py-3 bg-white dark:bg-slate-800 border-2 border-gray-200 dark:border-slate-700 rounded-xl font-medium text-gray-700 dark:text-gray-200 text-sm transition-all duration-200 hover:border-blue-600 hover:shadow-md dark:hover:border-blue-400 dark:hover:bg-slate-700 active:scale-95 disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:border-gray-200 disabled:dark:hover:border-slate-700"
+                  title="Continue with Facebook account"
+                  aria-label="Continue with Facebook"
+                >
+                  <svg className="w-5 h-5" viewBox="0 0 24 24" fill="#1877F2">
+                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
+                  </svg>
+                  <span>Continue with Facebook</span>
+                  {busy && <span className="ml-auto animate-spin">⟳</span>}
+                </button>
+              )}
+              
+              {providers.discord && (
+                <button
+                  onClick={() => handleOAuthSignIn("discord")}
+                  disabled={busy}
+                  className="w-full flex items-center justify-center gap-3 px-4 py-3 bg-white dark:bg-slate-800 border-2 border-gray-200 dark:border-slate-700 rounded-xl font-medium text-gray-700 dark:text-gray-200 text-sm transition-all duration-200 hover:border-indigo-500 hover:shadow-md dark:hover:border-indigo-400 dark:hover:bg-slate-700 active:scale-95 disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:border-gray-200 disabled:dark:hover:border-slate-700"
+                  title="Continue with Discord account"
+                  aria-label="Continue with Discord"
+                >
+                  <svg className="w-5 h-5" viewBox="0 0 24 24" fill="#5865F2">
+                    <path d="M20.317 4.3671a19.8062 19.8062 0 00-4.8851-1.5152.074.074 0 00-.0786.0371c-.211.3667-.4385.8453-.6005 1.2242-.5792-.0869-1.159-.0869-1.7335 0-.1624-.3928-.3957-.8575-.6021-1.2242a.077.077 0 00-.0785-.037 19.7355 19.7355 0 00-4.8852 1.515.0699.0699 0 00-.032.0274C.533 9.046-.32 13.58.0992 18.057a.082.082 0 00.031.0605c1.3143 1.0025 2.5871 1.6095 3.8343 2.0057a.0771.0771 0 00.084-.0271c.46-.6137.87-1.2646 1.225-1.9475a.077.077 0 00-.0422-.1062 12.906 12.906 0 01-1.838-.878.0771.0771 0 00-.008-.1277c.123-.092.246-.189.365-.276a.073.073 0 01.076-.01 19.896 19.896 0 0017.152 0 .073.073 0 01.076.01c.119.087.242.184.365.276a.077.077 0 00-.009.1277 12.823 12.823 0 01-1.838.878.0768.0768 0 00-.042.1062c.356.727.765 1.382 1.225 1.9475a.076.076 0 00.084.027 19.858 19.858 0 003.8343-2.0057.0822.0822 0 00.032-.0605c.464-4.547-.775-8.522-3.282-12.037a.0703.0703 0 00-.031-.0274zM8.02 15.3312c-1.1825 0-2.1569-.9718-2.1569-2.1575 0-1.1918.9556-2.1575 2.1569-2.1575 1.2108 0 2.1757.9718 2.1568 2.1575 0 1.1857-.9556 2.1575-2.1568 2.1575zm7.9605 0c-1.1825 0-2.1569-.9718-2.1569-2.1575 0-1.1918.9556-2.1575 2.1569-2.1575 1.2108 0 2.1757.9718 2.1568 2.1575 0 1.1857-.946 2.1575-2.1568 2.1575z" />
+                  </svg>
+                  <span>Continue with Discord</span>
+                  {busy && <span className="ml-auto animate-spin">⟳</span>}
+                </button>
+              )}
+            </div>
+          </>
+        )}
+
+        <div className="text-center text-sm text-gray-600 dark:text-gray-400">
+          {open === "login" ? "Don't have an account? " : "Already have an account? "}
+          <button
+            onClick={() => onSwitch(open === "login" ? "register" : "login")}
+            className="text-primary hover:underline font-semibold"
+            disabled={busy}
+          >
+            {open === "login" ? "Sign up" : "Sign in"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+