Bob AI: [Block: faq-accordion-one|FAQ Accordion One|/block...

src/app/page.tsx

@@ -8,10 +8,13 @@ import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwent
 import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import FooterBase1 from '@/components/sections/footer/FooterBase1';
 import { Camera, Zap, Sparkles, Monitor, Shield, Star, Heart } from "lucide-react";
-import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
-import CardStack from '@/components/cardStack/CardStack';
+import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import TeamCardOne1 from '@/components/sections/team/TeamCardOne1';
+import TextAbout from '@/components/sections/about/TextAbout';
+import FaqAccordionOne from '@/components/sections/faq/FaqAccordionOne';
 
 export default function LandingPage() {
   return (
@@ -28,7 +31,7 @@ export default function LandingPage() {
       headingFontWeight="light"
     >
       <div id="hero" data-section="hero">
-        <HeroBillboardScroll title="Explore the Latest iPhone Models" description="Discover the latest features and designs in our iPhone collection. From photography to performance, we've got you covered." background={{ variant: "downward-rays-animated" }} tag="New Arrivals" tagIcon="Calendar" buttons={[{ label: "Shop Now", href: "/iphones", className: "bg-black text-white hover:bg-gray-800" }]} imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" ariaLabel="iPhone Collection Hero Section" />
+        <HeroLogoBillboard logoText="iPhone Store" description="Explore the latest iPhone models with cutting-edge features and sleek designs." buttons={[{ label: "Shop Now", href: "/iphones", className: "bg-black text-white hover:bg-gray-800" }]} background={{ variant: "downward-rays-animated" }} imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" ariaLabel="iPhone Collection Hero Section" />
       </div>
 
       <div id="nav" data-section="nav">
@@ -205,60 +208,122 @@ export default function LandingPage() {
       </div>
 
       <div id="layout" data-section="layout">
-        <CardStack mode="buttons" gridVariant="timeline" title="Bestsellers" description="Check out our top-selling iPhone accessories." buttons={[{ text: "Shop Now", href: "#" }]} className="mb-8">
+        <FeatureCardThree features={[
-            <div className="card">
+          { id: "1", title: "Wireless Charging Stand", description: "Elegant and efficient, charges your iPhone wirelessly.", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Wireless Charging Stand" },
-                <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" alt="Wireless Charger" />
+          { id: "2", title: "Clear iPhone Case", description: "Protect your iPhone with a clear, stylish case.", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Clear iPhone Case" },
-                <div className="card-content">
+          { id: "3", title: "Bumper Case", description: "Durable bumper case for added protection.", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Bumper Case" },
-                    <h3>Wireless Charger</h3>
+          { id: "4", title: "Screen Protector", description: "Keep your iPhone screen scratch-free with this high-quality protector.", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "Screen Protector" }
-                    <p>Charge your iPhone wirelessly with ease.</p>
+        ]} carouselMode="buttons" gridVariant="timeline" title="iPhone Accessories" description="Explore our range of iPhone accessories to enhance your device." buttons={[{ text: "Shop Now", href: "#" }]} textboxLayout="left" useInvertedBackground="light" ariaLabel="iPhone Accessories Section" className="mb-8" />
       </div>
+
+      <div id="team" data-section="team">
+        <TeamCardOne1
+          title="Our Expert Team"
+          description="Meet the dedicated team behind iPhone Store, passionate about delivering the best iPhone experience."
+          teamMembers={[
+            { name: "John Doe", position: "CEO", image: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" },
+            { name: "Jane Smith", position: "CTO", image: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" },
+            { name: "Mike Johnson", position: "Head of Design", image: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" },
+            { name: "Emily Davis", position: "Marketing Director", image: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" }
+          ]}
+        />
       </div>
-            <div className="card">
+
-                <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" alt="Phone Case" />
+      <div id="navbar" data-section="navbar">
-                <div className="card-content">
+        <NavbarStyleApple
-                    <h3>Phone Case</h3>
+                  brandName="iPhone Store"
-                    <p>Protect your iPhone with our stylish case.</p>
+                  navItems={[
+                    { name: "iPhone 13", id: "products" },
+                    { name: "Waterproof Tech", id: "features" },
+                    { name: "Affordable Plans", id: "pricing" },
+                    { name: "Customer Reviews", id: "testimonials" }
+                  ]}
+                  logoUrl="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80"
+                />
       </div>
+
+      <div id="navbar" data-section="navbar">
+        <NavbarStyleApple
+                  brandName="iPhone Store"
+                  navItems={[
+                    { name: "iPhone 13", id: "products-iphone-13", image: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" },
+                    { name: "Face ID", id: "features-face-id" },
+                    { name: "AppleCare+", id: "pricing-applecare" },
+                    { name: "Customer Reviews", id: "testimonials-customers" }
+                  ]}
+                />
       </div>
-            <div className="card">
+
-                <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" alt="Screen Protector" />
+      <div id="about" data-section="about">
-                <div className="card-content">
+        <TextAbout tag="Discover" tagIcon="LightBulb" title="Explore the Latest iPhone Models" buttons={[
-                    <h3>Screen Protector</h3>
+          {
-                    <p>Keep your iPhone screen scratch-free.</p>
+            label: "View Products",
+            href: "#products",
+            variant: "primary",
+            icon: "ArrowRight"
+          },
+          {
+            label: "Learn More",
+            href: "#features",
+            variant: "secondary",
+            icon: "Info"
+          }
+        ]} useInvertedBackground="invertDefault" className="bg-gray-900" containerClassName="max-w-5xl" titleClassName="text-white" buttonContainerClassName="justify-center" buttonClassName="bg-white text-black hover:bg-gray-200" buttonTextClassName="text-sm" />
       </div>
-            </div>
+
-        </CardStack>
+      <div id="faq" data-section="faq">
+        <FaqAccordionOne
+          title="iPhone Store FAQ"
+          description="Have questions about our iPhone models? Check out our frequently asked questions below."
+          items={[
+            {
+              question: "What iPhone models do you offer?",
+              answer: "We offer the latest models including iPhone 13, iPhone 13 Pro, iPhone 13 Pro Max, and iPhone SE (2022)."
+            },
+            {
+              question: "What are the key features of the iPhone 13 Pro?",
+              answer: "The iPhone 13 Pro features a ProMotion display, A15 Bionic chip, Ceramic Shield front cover, and advanced cameras."
+            },
+            {
+              question: "Can I trade in my old iPhone?",
+              answer: "Yes, you can trade in your old iPhone for credit towards a new one. Visit our store for more details."
+            },
+            {
+              question: "How long is the warranty period?",
+              answer: "All iPhones come with a standard 1-year warranty. Extended warranty options are available upon purchase."
+            }
+          ]}
+          image="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80"
+        />
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterBaseReveal
+        <FooterBase1
                   columns={[
                     {
                       title: "Products",              items: [
                         { label: "iPhone 15 Pro", href: "#products" },
                         { label: "iPhone 15", href: "#products" },
-                { label: "iPhone SE", href: "#products" },
+                        { label: "iPhone SE", href: "#products" }
-                { label: "Compare Models", href: "#pricing" }
                       ]
                     },
                     {
                       title: "Support",              items: [
                         { label: "Help Center", href: "#contact" },
                         { label: "Contact Us", href: "#contact" },
-                { label: "Warranty Info", href: "#" },
+                        { label: "Warranty Info", href: "#" }
-                { label: "Shipping & Returns", href: "#" }
                       ]
                     },
                     {
                       title: "Company",              items: [
                         { label: "About Us", href: "#" },
                         { label: "Blog", href: "#" },
-                { label: "Careers", href: "#" },
+                        { label: "Careers", href: "#" }
-                { label: "Press", href: "#" }
                       ]
                     }
                   ]}
                   copyrightText="© 2025 iPhone Store. All rights reserved."
+                  logoUrl="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80"
                 />
       </div>
     </ThemeProvider>

src/components/sections/contact/ContactSplitForm.tsx

@@ -111,12 +111,12 @@ const ContactSplitForm = ({
 
     const getButtonConfigProps = () => {
         if (theme.defaultButtonVariant === "hover-bubble") {
-            return { bgClassName: "w-full" };
+            return { bgClassName: "w-full bg-green-500" };
         }
         if (theme.defaultButtonVariant === "icon-arrow") {
             return { className: "justify-between" };
         }
-        return {};
+        return { bgClassName: "bg-green-500" };
     };
 
     const formContent = (

src/components/sections/hero/HeroBillboardScroll.tsx

@@ -91,7 +91,7 @@ const HeroBillboardScroll = ({
     <section
       aria-label={ariaLabel}
       ref={containerRef}
-      className={cls("relative h-fit flex items-center justify-center", className)}
+      className={cls("relative h-fit flex items-center justify-center bg-[#e5b365]", className)}
     >
       <HeroBackgrounds {...background} />
       <div
@@ -108,9 +108,9 @@ const HeroBillboardScroll = ({
             tagIcon={tagIcon}
             buttons={buttons}
             className={cls("flex flex-col gap-3 md:gap-1", textBoxClassName)}
-            titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+            titleClassName={cls("text-6xl font-medium text-[#8b4513]", titleClassName)}
             descriptionClassName={cls("text-base md:text-lg leading-[1.2]", descriptionClassName)}
-            tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3", tagClassName)}
+            tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-[#8b4513] inline-flex items-center gap-2 mb-3", tagClassName)}
             buttonContainerClassName={cls("flex flex-wrap gap-4 mt-3", buttonContainerClassName)}
             buttonClassName={buttonClassName}
             buttonTextClassName={buttonTextClassName}
@@ -126,7 +126,7 @@ const HeroBillboardScroll = ({
         >
           <div className={cls("h-full w-full overflow-hidden rounded-theme-capped card p-4", cardInnerClassName)}>
             <MediaContent
-              imageSrc={imageSrc}
+              imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1920&q=80"
               videoSrc={videoSrc}
               imageAlt={imageAlt}
               videoAriaLabel={videoAriaLabel}
@@ -144,7 +144,7 @@ const HeroBillboardScroll = ({
         >
           <div className={cls("h-full w-full overflow-hidden rounded-theme-capped card p-4", cardInnerClassName)}>
             <MediaContent
-              imageSrc={imageSrc}
+              imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1920&q=80"
               videoSrc={videoSrc}
               imageAlt={imageAlt}
               videoAriaLabel={videoAriaLabel}