Update src/app/services/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -29,8 +29,9 @@ export default function LandingPage() {
           <NavbarLayoutFloatingInline
             navItems={[
               { name: "Home", id: "hero" },
-              { name: "Services", id: "features" },
-              { name: "Testimonials", id: "testimonials" },
+              { name: "Services", id: "/services" },
+              { name: "Portfolio", id: "/portfolio" },
+              { name: "Pricing", id: "/pricing" },
               { name: "Contact", id: "contact" },
             ]}
             brandName="SecureFence"
@@ -119,7 +120,7 @@ export default function LandingPage() {
         <div id="footer" data-section="footer">
           <FooterLogoEmphasis
             columns={[
-              { items: [{ label: "Services", href: "#features" }, { label: "About Us", href: "#" }, { label: "Contact", href: "#contact" }] },
+              { items: [{ label: "Services", href: "/services" }, { label: "Portfolio", href: "/portfolio" }, { label: "Pricing", href: "/pricing" }, { label: "Contact", href: "#contact" }] },
               { items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
             ]}
             logoText="SecureFence"

src/app/portfolio/page.tsx

@@ -0,0 +1,19 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+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 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>
+      <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

@@ -0,0 +1,29 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+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 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

@@ -0,0 +1,28 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
+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 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>
+  );
+}