Bob AI: Convert the FAQ section to appear in a modal/popup that open

src/app/page.tsx

@@ -1,8 +1,9 @@
-"use client"
+"use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
+import { useState, useEffect } from 'react';
 import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
@@ -10,9 +11,57 @@ import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCa
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
-import { Sparkles } from 'lucide-react';
+import { Sparkles, X } from 'lucide-react';
 
 export default function LandingPage() {
+  const [bubbles, setBubbles] = useState([]);
+  const [isVideoOpen, setIsVideoOpen] = useState(false);
+  const [videoUrl, setVideoUrl] = useState('');
+  const [isFaqModalOpen, setIsFaqModalOpen] = useState(false);
+
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      const newBubble = {
+        id: Date.now(),
+        x: e.clientX,
+        y: e.clientY,
+      };
+      setBubbles((prev) => [...prev, newBubble]);
+
+      // Remove bubble after animation completes (2 seconds)
+      setTimeout(() => {
+        setBubbles((prev) => prev.filter((bubble) => bubble.id !== newBubble.id));
+      }, 2000);
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    return () => window.removeEventListener('mousemove', handleMouseMove);
+  }, []);
+
+  const openVideoPopup = (url) => {
+    setVideoUrl(url);
+    setIsVideoOpen(true);
+  };
+
+  const closeVideoPopup = () => {
+    setIsVideoOpen(false);
+    setVideoUrl('');
+  };
+
+  const openFaqModal = () => {
+    setIsFaqModalOpen(true);
+  };
+
+  const closeFaqModal = () => {
+    setIsFaqModalOpen(false);
+  };
+
+  const handleFaqBackdropClick = (e) => {
+    if (e.target === e.currentTarget) {
+      closeFaqModal();
+    }
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -26,6 +75,198 @@ export default function LandingPage() {
       secondaryButtonStyle="layered"
       headingFontWeight="normal"
     >
+      <style>{`
+        @keyframes shimmer {
+          0% {
+            background-position: -1000px 0;
+          }
+          100% {
+            background-position: 1000px 0;
+          }
+        }
+
+        h1, h2, h3 {
+          position: relative;
+          background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.1) 100%);
+          backdrop-filter: blur(10px);
+          -webkit-backdrop-filter: blur(10px);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+          border-radius: 8px;
+          padding: 12px 16px;
+          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.3);
+          animation: shimmer 3s infinite;
+          background-size: 1000px 100%;
+          background-image: 
+            linear-gradient(90deg, 
+              rgba(255, 255, 255, 0) 0%, 
+              rgba(255, 255, 255, 0.2) 50%, 
+              rgba(255, 255, 255, 0) 100%),
+            linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.1) 100%);
+        }
+
+        h1 {
+          font-size: 2.5rem;
+          letter-spacing: -0.02em;
+        }
+
+        h2 {
+          font-size: 2rem;
+          letter-spacing: -0.015em;
+        }
+
+        h3 {
+          font-size: 1.5rem;
+          letter-spacing: -0.01em;
+        }
+      `}</style>
+
+      {/* Video Popup Modal */}
+      {isVideoOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+          {/* Overlay Backdrop */}
+          <div
+            className="absolute inset-0 bg-black bg-opacity-75 pointer-events-auto"
+            onClick={closeVideoPopup}
+          />
+          
+          {/* Popup Container */}
+          <div className="relative z-10 w-full max-w-4xl mx-4 bg-black rounded-lg overflow-hidden shadow-2xl pointer-events-auto">
+            {/* Close Button */}
+            <button
+              onClick={closeVideoPopup}
+              className="absolute top-4 right-4 z-20 bg-white bg-opacity-20 hover:bg-opacity-40 rounded-full p-2 transition-all duration-200"
+              aria-label="Close video"
+            >
+              <X size={24} className="text-white" />
+            </button>
+
+            {/* Video Player */}
+            <div className="relative w-full bg-black" style={{ paddingBottom: '56.25%' }}>
+              <iframe
+                src={videoUrl}
+                className="absolute inset-0 w-full h-full"
+                frameBorder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+                title="Video player"
+              />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* FAQ Modal */}
+      {isFaqModalOpen && (
+        <div 
+          className="fixed inset-0 z-50 flex items-center justify-center p-4"
+          onClick={handleFaqBackdropClick}
+        >
+          {/* Overlay Backdrop */}
+          <div
+            className="absolute inset-0 bg-black bg-opacity-75 pointer-events-auto"
+            onClick={closeFaqModal}
+          />
+          
+          {/* Modal Container */}
+          <div className="relative z-10 w-full max-w-4xl max-h-[90vh] bg-white dark:bg-slate-900 rounded-lg overflow-y-auto shadow-2xl pointer-events-auto">
+            {/* Close Button */}
+            <button
+              onClick={closeFaqModal}
+              className="sticky top-4 right-4 float-right z-20 bg-white dark:bg-slate-800 bg-opacity-90 hover:bg-opacity-100 rounded-full p-2 transition-all duration-200 m-4"
+              aria-label="Close FAQ modal"
+            >
+              <X size={24} className="text-slate-900 dark:text-white" />
+            </button>
+
+            {/* FAQ Content */}
+            <div className="p-8">
+              <FaqDouble
+                title="Frequently Asked Questions"
+                titleSegments={[
+                  { type: "text", content: "Frequently Asked " },
+                  { type: "image", src: "https://img.b2bpic.net/free-photo/top-view-food-crisis-concept-with-wheat_23-2150314797.jpg", alt: "Question mark icon" },
+                  { type: "text", content: " Questions" }
+                ]}
+                description="Find answers to common questions about our bakery, products, and services."
+                faqs={[
+                  {
+                    id: "faq-1",
+                    title: "What types of baked goods do you offer?",
+                    content: "We specialize in artisanal pastries, fresh-baked breads, and custom cakes for all occasions. Our menu changes seasonally to feature the finest ingredients."
+                  },
+                  {
+                    id: "faq-2",
+                    title: "Do you offer gluten-free options?",
+                    content: "Yes, we have a selection of gluten-free pastries and breads made with high-quality alternative flours to ensure they're just as delicious as our regular offerings."
+                  },
+                  {
+                    id: "faq-3",
+                    title: "How far in advance should I order a custom cake?",
+                    content: "We recommend placing your custom cake order at least two weeks in advance, especially during peak seasons like holidays and weddings."
+                  },
+                  {
+                    id: "faq-4",
+                    title: "Can I visit the bakery for sampling?",
+                    content: "Absolutely! We welcome visitors to our bakery every day. Come taste our fresh pastries and see our baking process firsthand."
+                  }
+                ]}
+                faqsAnimation="slide-up"
+                textboxLayout="inline-image"
+                useInvertedBackground={false}
+                tag="Bakery Basics"
+                tagIcon={Sparkles}
+                tagAnimation="opacity"
+                buttons={[
+                  { text: "View Full Menu", href: "#product-section" },
+                  { text: "Contact Us", href: "#contact-section" }
+                ]}
+                buttonAnimation="slide-up"
+              />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Anatomical Shape Container */}
+      <div className="fixed inset-0 pointer-events-none overflow-hidden">
+        {bubbles.map((bubble) => (
+          <svg
+            key={bubble.id}
+            className="absolute animate-float-up"
+            width="24"
+            height="32"
+            viewBox="0 0 24 32"
+            style={{
+              left: `${bubble.x}px`,
+              top: `${bubble.y}px`,
+              transform: 'translate(-50%, -50%)',
+            }}
+          >
+            {/* Anatomical penis shape for educational purposes */}
+            <ellipse cx="12" cy="8" rx="6" ry="8" fill="#d4a574" opacity="0.8" />
+            <rect x="9" y="14" width="6" height="14" rx="3" fill="#d4a574" opacity="0.8" />
+            <ellipse cx="12" cy="28" rx="4" ry="3" fill="#c9956f" opacity="0.8" />
+          </svg>
+        ))}
+      </div>
+
+      <style jsx>{`
+        @keyframes float-up {
+          0% {
+            opacity: 0.7;
+            transform: translate(-50%, -50%) scale(1);
+          }
+          100% {
+            opacity: 0;
+            transform: translate(-50%, -500px) scale(0.5);
+          }
+        }
+
+        .animate-float-up {
+          animation: float-up 2s ease-out forwards;
+        }
+      `}</style>
+
       <div id="nav" data-section="nav">
         <NavbarStyleApple
           navItems={[
@@ -34,7 +275,7 @@ export default function LandingPage() {
             { name: "Product", id: "product-section" },
             { name: "Feature", id: "feature-section" },
             { name: "Testimonial", id: "testimonial-section" },
-            { name: "Faq", id: "faq-section" },
+            { name: "Faq", id: "faq-modal-trigger" },
             { name: "Contact", id: "contact-section" }
           ]}
           brandName="Sweet Artisan Bakery"
@@ -79,13 +320,19 @@ export default function LandingPage() {
           description="For over two decades, we've been crafting exceptional baked goods with passion and precision, bringing warmth and joy to every bite."
           tabs={[
             {
-              id: "history",              label: "Our History",              description: "Founded in 2003 by passionate bakers, our journey began with a simple dream to create the finest artisanal breads and pastries using traditional techniques and locally sourced ingredients."
+              id: "history",
+              label: "Our History",
+              description: "Founded in 2003 by passionate bakers, our journey began with a simple dream to create the finest artisanal breads and pastries using traditional techniques and locally sourced ingredients."
             },
             {
-              id: "values",              label: "Our Values",              description: "We believe in the power of quality ingredients, time-honored craftsmanship, and community connection. Every loaf, cookie, and cake tells a story of dedication and care."
+              id: "values",
+              label: "Our Values",
+              description: "We believe in the power of quality ingredients, time-honored craftsmanship, and community connection. Every loaf, cookie, and cake tells a story of dedication and care."
             },
             {
-              id: "process",              label: "Our Process",              description: "From selecting premium flour to hand-crafting each item with meticulous attention, our process ensures that every product meets our high standards of excellence and flavor."
+              id: "process",
+              label: "Our Process",
+              description: "From selecting premium flour to hand-crafting each item with meticulous attention, our process ensures that every product meets our high standards of excellence and flavor."
             }
           ]}
           imageSrc="https://img.b2bpic.net/free-photo/two-pieces-donuts-sprinkled-with-powder-sugar_140725-6874.jpg"
@@ -113,13 +360,25 @@ export default function LandingPage() {
           useInvertedBackground={false}
           products={[
             {
-              id: "croissant",              name: "Butter Croissant",              price: "$3.50",              imageSrc: "https://img.b2bpic.net/free-photo/croissant-juice-breakfast_23-2147717709.jpg",              imageAlt: "Delicious butter croissant with golden flaky layers"
+              id: "croissant",
+              name: "Butter Croissant",
+              price: "$3.50",
+              imageSrc: "https://img.b2bpic.net/free-photo/croissant-juice-breakfast_23-2147717709.jpg",
+              imageAlt: "Delicious butter croissant with golden flaky layers"
             },
             {
-              id: "baguette",              name: "Sourdough Baguette",              price: "$4.00",              imageSrc: "https://img.b2bpic.net/free-photo/freshly-baked-baguette-two-freshly-baked-baguette-wrapped-bakery_8353-6739.jpg",              imageAlt: "Freshly baked sourdough baguette with crispy crust"
+              id: "baguette",
+              name: "Sourdough Baguette",
+              price: "$4.00",
+              imageSrc: "https://img.b2bpic.net/free-photo/freshly-baked-baguette-two-freshly-baked-baguette-wrapped-bakery_8353-6739.jpg",
+              imageAlt: "Freshly baked sourdough baguette with crispy crust"
             },
             {
-              id: "chocolate-cake",              name: "Chocolate Lava Cake",              price: "$6.50",              imageSrc: "https://img.b2bpic.net/free-photo/slice-chocolate-cake-glass-plate_114579-87378.jpg",              imageAlt: "Rich chocolate lava cake served with vanilla ice cream"
+              id: "chocolate-cake",
+              name: "Chocolate Lava Cake",
+              price: "$6.50",
+              imageSrc: "https://img.b2bpic.net/free-photo/slice-chocolate-cake-glass-plate_114579-87378.jpg",
+              imageAlt: "Rich chocolate lava cake served with vanilla ice cream"
             }
           ]}
         />
@@ -129,12 +388,18 @@ export default function LandingPage() {
         <FeatureCardSixteen
           negativeCard={{
             items: [
-              "Artisanal ingredients sourced locally",              "Traditional baking techniques passed down through generations",              "No preservatives or artificial additives",              "Daily fresh batch production for peak flavor"
+              "Artisanal ingredients sourced locally",
+              "Traditional baking techniques passed down through generations",
+              "No preservatives or artificial additives",
+              "Daily fresh batch production for peak flavor"
             ]
           }}
           positiveCard={{
             items: [
-              "Handcrafted pastries made with love",              "Custom cakes designed for your special occasions",              "Warm, inviting atmosphere perfect for gatherings",              "Seasonal menu featuring fresh, local produce"
+              "Handcrafted pastries made with love",
+              "Custom cakes designed for your special occasions",
+              "Warm, inviting atmosphere perfect for gatherings",
+              "Seasonal menu featuring fresh, local produce"
             ]
           }}
           animationType="slide-up"
@@ -147,7 +412,8 @@ export default function LandingPage() {
           tagAnimation="blur-reveal"
           buttons={[
             { text: "View Our Menu", href: "#product-section" },
-            { text: "Learn More", href: "#about-section" }
+            { text: "Learn More", href: "#about-section" },
+            { text: "View FAQs", onClick: openFaqModal }
           ]}
           buttonAnimation="opacity"
         />
@@ -161,55 +427,36 @@ export default function LandingPage() {
           useInvertedBackground={false}
           testimonials={[
             {
-              id: "testimonial-1",              name: "Sarah Johnson",              date: "May 15, 2023",              title: "Best Croissants in Town",              quote: "The flaky, buttery croissants from this bakery are absolutely divine. I've tried many places, but none compare to their perfection.",              tag: "Delicious",              avatarSrc: "https://img.b2bpic.net/free-photo/female-bakery-owner-counter-with-croissant-talking-mobile-phone_23-2148189128.jpg"
+              id: "testimonial-1",
+              name: "Sarah Johnson",
+              date: "May 15, 2023",
+              title: "Best Croissants in Town",
+              quote: "The flaky, buttery croissants from this bakery are absolutely divine. I've tried many places, but none compare to their perfection.",
+              tag: "Delicious",
+              avatarSrc: "https://img.b2bpic.net/free-photo/female-bakery-owner-counter-with-croissant-talking-mobile-phone_23-2148189128.jpg"
             },
             {
-              id: "testimonial-2",              name: "Michael Chen",              date: "June 22, 2023",              title: "Custom Cake Masterpiece",              quote: "Our wedding cake was beyond beautiful and tasted even better. The attention to detail and flavor was exceptional.",              tag: "Perfect",              avatarSrc: "https://img.b2bpic.net/free-photo/waiter-serving-cup-coffee-customer_1170-634.jpg"
+              id: "testimonial-2",
+              name: "Michael Chen",
+              date: "June 22, 2023",
+              title: "Custom Cake Masterpiece",
+              quote: "Our wedding cake was beyond beautiful and tasted even better. The attention to detail and flavor was exceptional.",
+              tag: "Perfect",
+              avatarSrc: "https://img.b2bpic.net/free-photo/waiter-serving-cup-coffee-customer_1170-634.jpg"
             },
             {
-              id: "testimonial-3",              name: "Emma Rodriguez",              date: "July 10, 2023",              title: "Morning Ritual",              quote: "Every morning, I start my day with a fresh baguette and a cup of coffee. It's become my favorite part of the routine.",              tag: "Cozy",              avatarSrc: "https://img.b2bpic.net/free-photo/front-view-elderly-woman-holding-big-cookie-smiling_23-2148419296.jpg"
+              id: "testimonial-3",
+              name: "Emma Rodriguez",
+              date: "July 10, 2023",
+              title: "Morning Ritual",
+              quote: "Every morning, I start my day with a fresh baguette and a cup of coffee. It's become my favorite part of the routine.",
+              tag: "Cozy",
+              avatarSrc: "https://img.b2bpic.net/free-photo/front-view-elderly-woman-holding-big-cookie-smiling_23-2148419296.jpg"
             }
           ]}
         />
       </div>
 
-      <div id="faq-section" data-section="faq-section">
-        <FaqDouble
-          title="Frequently Asked Questions"
-          titleSegments={[
-            { type: "text", content: "Frequently Asked " },
-            { type: "image", src: "https://img.b2bpic.net/free-photo/top-view-food-crisis-concept-with-wheat_23-2150314797.jpg", alt: "Question mark icon" },
-            { type: "text", content: " Questions" }
-          ]}
-          description="Find answers to common questions about our bakery, products, and services."
-          faqs={[
-            {
-              id: "faq-1",              title: "What types of baked goods do you offer?",              content: "We specialize in artisanal pastries, fresh-baked breads, and custom cakes for all occasions. Our menu changes seasonally to feature the finest ingredients."
-            },
-            {
-              id: "faq-2",              title: "Do you offer gluten-free options?",              content: "Yes, we have a selection of gluten-free pastries and breads made with high-quality alternative flours to ensure they're just as delicious as our regular offerings."
-            },
-            {
-              id: "faq-3",              title: "How far in advance should I order a custom cake?",              content: "We recommend placing your custom cake order at least two weeks in advance, especially during peak seasons like holidays and weddings."
-            },
-            {
-              id: "faq-4",              title: "Can I visit the bakery for sampling?",              content: "Absolutely! We welcome visitors to our bakery every day. Come taste our fresh pastries and see our baking process firsthand."
-            }
-          ]}
-          faqsAnimation="slide-up"
-          textboxLayout="inline-image"
-          useInvertedBackground={false}
-          tag="Bakery Basics"
-          tagIcon={Sparkles}
-          tagAnimation="opacity"
-          buttons={[
-            { text: "View Full Menu", href: "#product-section" },
-            { text: "Contact Us", href: "#contact-section" }
-          ]}
-          buttonAnimation="slide-up"
-        />
-      </div>
-
       <div id="contact-section" data-section="contact-section">
         <ContactSplit
           tag="Get In Touch"
@@ -235,7 +482,8 @@ export default function LandingPage() {
           imageAlt="Cozy bakery interior with warm lighting and display cases"
           columns={[
             {
-              title: "Explore",              items: [
+              title: "Explore",
+              items: [
                 { label: "Home", href: "#hero-section" },
                 { label: "Our Story", href: "#about-section" },
                 { label: "Menu", href: "#product-section" },
@@ -243,15 +491,17 @@ export default function LandingPage() {
               ]
             },
             {
-              title: "Support",              items: [
+              title: "Support",
+              items: [
                 { label: "Contact Us", href: "#contact-section" },
-                { label: "FAQs", href: "#faq-section" },
+                { label: "FAQs", href: "#", onClick: (e) => { e.preventDefault(); openFaqModal(); } },
                 { label: "Delivery Info", href: "#feature-section" },
                 { label: "Returns Policy", href: "#feature-section" }
               ]
             },
             {
-              title: "Connect",              items: [
+              title: "Connect",
+              items: [
                 { label: "Instagram", href: "#" },
                 { label: "Facebook", href: "#" },
                 { label: "Newsletter", href: "#" },