Update src/components/Layout.tsx

src/components/Layout.tsx

@@ -1,46 +1,40 @@
 import FooterBrand from '@/components/sections/footer/FooterBrand';
 import NavbarFloatingLogo from '@/components/ui/NavbarFloatingLogo';
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
-import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
 import { Outlet } from 'react-router-dom';
-import { StyleProvider } from "@/components/ui/StyleProvider";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 
 export default function Layout() {
   const navItems = [
-  {
-    "name": "Work",    "href": "#hero"
-  },
-  {
-    "name": "About",    "href": "#about"
-  },
-  {
-    "name": "Services",    "href": "#features"
-  },
-  {
-    "name": "Pricing",    "href": "#pricing"
-  },
-  {
-    "name": "Contact",    "href": "#contact"
-  },
-  {
-    "name": "Product",    "href": "#product"
-  },
-  {
-    "name": "Metrics",    "href": "#metrics"
-  }
-];
+    { name: "Work", href: "#hero" },
+    { name: "About", href: "#about" },
+    { name: "Services", href: "#features" },
+    { name: "Pricing", href: "#pricing" },
+    { name: "Contact", href: "#contact" },
+    { name: "Product", href: "#product" },
+    { name: "Metrics", href: "#metrics" }
+  ];
 
   return (
-    <StyleProvider buttonVariant="default" siteBackground="floatingGradient" heroBackground="gradientBars">
-      <SiteBackgroundSlot />
-      <SectionErrorBoundary name="navbar">
+    <ThemeProvider 
+      defaultButtonVariant="gradient" 
+      defaultTextAnimation="entrance-slide" 
+      borderRadius="rounded" 
+      contentWidth="medium" 
+      sizing="medium" 
+      background="circleGradient" 
+      cardStyle="glass-elevated" 
+      primaryButtonStyle="gradient" 
+      secondaryButtonStyle="glass"
+    >
+      <div id="nav" data-section="nav">
         <NavbarFloatingLogo
           logo="StudioVFX"
           logoImageSrc="http://img.b2bpic.net/free-photo/blank-stationery-set-corporate-identity-template_93675-130786.jpg"
-          ctaButton={{
-            text: "Get Started",            href: "#contact"}}
-          navItems={navItems} />
-      </SectionErrorBoundary>
+          ctaButton={{ text: "Get Started", href: "#contact" }}
+          navItems={navItems}
+        />
+      </div>
       <main className="flex-grow">
         <Outlet />
       </main>
@@ -50,27 +44,21 @@ export default function Layout() {
           columns={[
             {
               items: [
-                {
-                  label: "Portfolio",                  href: "#features"},
-                {
-                  label: "Pricing",                  href: "#pricing"},
-                {
-                  label: "Services",                  href: "#features"},
+                { label: "Portfolio", href: "#features" },
+                { label: "Pricing", href: "#pricing" },
+                { label: "Services", href: "#features" },
               ],
             },
             {
               items: [
-                {
-                  label: "Contact Us",                  href: "#contact"},
-                {
-                  label: "Careers",                  href: "#"},
-                {
-                  label: "Privacy Policy",                  href: "#"},
+                { label: "Contact Us", href: "#contact" },
+                { label: "Careers", href: "#" },
+                { label: "Privacy Policy", href: "#" },
               ],
             },
           ]}
         />
       </SectionErrorBoundary>
-    </StyleProvider>
+    </ThemeProvider>
   );
 }