Update src/app/faq/page.tsx

src/app/faq/page.tsx

@@ -3,13 +3,14 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FooterBase from '@/components/sections/footer/FooterBase';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 
 export default function FaqPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
+        <div id="nav" data-section="nav">
           <NavbarStyleApple
             navItems={[
               { name: "Home", id: "/" },
@@ -18,25 +19,29 @@ export default function FaqPage() {
               { name: "FAQ", id: "/faq" },
               { name: "Contact", id: "/contact" },
             ]}
-          brandName="SMILETABS"
           />
-        <FaqDouble
-          title="Frequently Asked Questions"
-          description="Have questions? We've got answers."
-          textboxLayout="default"
+        </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitText
+            sideTitle="Frequently Asked Questions"
+            sideDescription="Have questions? We've got answers."
             faqsAnimation="slide-up"
+            useInvertedBackground={false}
             faqs={[
               { id: "1", title: "How do I use these tabs?", content: "Simply chew and brush as usual!" },
               { id: "2", title: "Are they safe?", content: "Yes, they are dentist-formulated and natural." },
             ]}
           />
-        <FooterBase
-          columns={[
-            { title: "Shop", items: [{ label: "All Products", href: "/shop" }] },
-            { title: "Support", items: [{ label: "FAQ", href: "/faq" }, { label: "Contact", href: "/contact" }] },
-          ]}
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
             logoText="SMILETABS"
+            columns={[
+              { items: [{ label: "Shop", href: "/shop" }] },
+              { items: [{ label: "FAQ", href: "/faq" }, { label: "Contact", href: "/contact" }] },
+            ]}
           />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );