src/app/portfolio/page.tsx

@@ -6,10 +6,14 @@ import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'
 export default function PortfolioPage() {
   const navItems = [{ name: "Home", id: "/" }, { name: "Services", id: "/services" }, { name: "Portfolio", id: "/portfolio" }, { name: "Pricing", id: "/pricing" }, { name: "Contact", id: "/contact" }];
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingInline navItems={navItems} brandName="SecureFence" />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline navItems={navItems} brandName="SecureFence" button={{ text: "Contact" }} />
+      </div>
       <div className="min-h-[60vh] flex items-center justify-center"><h1 className="text-4xl font-bold">Our Portfolio</h1></div>
-      <FooterLogoEmphasis columns={[{ items: [{ label: "Services", href: "/services" }, { label: "Portfolio", href: "/portfolio" }, { label: "Pricing", href: "/pricing" }, { label: "Contact", href: "/contact" }] }]} logoText="SecureFence" />
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis logoText="SecureFence" columns={[{ items: [{ label: "Services", href: "/services" }, { label: "Portfolio", href: "/portfolio" }, { label: "Pricing", href: "/pricing" }, { label: "Contact", href: "/contact" }] }]} />
+      </div>
     </ThemeProvider>
   );
 }

src/app/pricing/page.tsx

@@ -1,22 +1,29 @@
 "use client";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
+import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 
 export default function PricingPage() {
   const navItems = [{ name: "Home", id: "/" }, { name: "Services", id: "/services" }, { name: "Portfolio", id: "/portfolio" }, { name: "Pricing", id: "/pricing" }, { name: "Contact", id: "/contact" }];
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingInline navItems={navItems} brandName="SecureFence" />
-      <PricingCardNine
-        animationType="slide-up"
-        title="Our Pricing Plans"
-        description="Simple, transparent pricing for all residential projects."
-        textboxLayout="default"
-        plans={[{ id: "basic", title: "Basic", price: "$500", period: "avg", features: ["Standard installation", "1 year warranty"], button: { text: "Get Quote" } }]}
-      />
-      <FooterLogoEmphasis columns={[{ items: [{ label: "Services", href: "/services" }, { label: "Portfolio", href: "/portfolio" }, { label: "Pricing", href: "/pricing" }, { label: "Contact", href: "/contact" }] }]} logoText="SecureFence" />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline navItems={navItems} brandName="SecureFence" button={{ text: "Contact" }} />
+      </div>
+      <div id="pricing" data-section="pricing">
+        <PricingCardEight
+          animationType="slide-up"
+          title="Our Pricing Plans"
+          description="Simple, transparent pricing for all residential projects."
+          textboxLayout="default"
+          useInvertedBackground={false}
+          plans={[{ id: "basic", badge: "Essential", price: "$500", subtitle: "Average residential project", features: ["Standard installation", "1 year warranty"], buttons: [{ text: "Get Quote" }] }]}
+        />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis logoText="SecureFence" columns={[{ items: [{ label: "Services", href: "/services" }, { label: "Portfolio", href: "/portfolio" }, { label: "Pricing", href: "/pricing" }, { label: "Contact", href: "/contact" }] }]} />
+      </div>
     </ThemeProvider>
   );
 }

src/app/services/page.tsx

@@ -7,14 +7,22 @@ import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'
 export default function ServicesPage() {
   const navItems = [{ name: "Home", id: "/" }, { name: "Services", id: "/services" }, { name: "Portfolio", id: "/portfolio" }, { name: "Pricing", id: "/pricing" }, { name: "Contact", id: "/contact" }];
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingInline navItems={navItems} brandName="SecureFence" />
-      <FeatureCardTwentyOne
-        title="Our Comprehensive Services"
-        description="Detailed breakdown of our professional fencing solutions."
-        accordionItems={[{ id: "1", title: "Full Service Installation", content: "End-to-end installation process." }, { id: "2", title: "Repair & Maintenance", content: "Fast and reliable repairs." }]}
-      />
-      <FooterLogoEmphasis columns={[{ items: [{ label: "Services", href: "/services" }, { label: "Portfolio", href: "/portfolio" }, { label: "Pricing", href: "/pricing" }, { label: "Contact", href: "/contact" }] }]} logoText="SecureFence" />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline navItems={navItems} brandName="SecureFence" button={{ text: "Contact" }} />
+      </div>
+      <div id="features" data-section="features">
+        <FeatureCardTwentyOne
+          title="Our Comprehensive Services"
+          description="Detailed breakdown of our professional fencing solutions."
+          accordionItems={[{ id: "1", title: "Full Service Installation", content: "End-to-end installation process." }, { id: "2", title: "Repair & Maintenance", content: "Fast and reliable repairs." }]}
+          videoSrc="https://www.youtube.com/embed/dQw4w9WgXcQ"
+          useInvertedBackground={false}
+        />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis logoText="SecureFence" columns={[{ items: [{ label: "Services", href: "/services" }, { label: "Portfolio", href: "/portfolio" }, { label: "Pricing", href: "/pricing" }, { label: "Contact", href: "/contact" }] }]} />
+      </div>
     </ThemeProvider>
   );
 }