Update src/app/services/page.tsx

Merge version_3 into main

src/app/about/page.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import AboutMetric from '@/components/sections/about/AboutMetric';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { Award, Shield, Zap } from "lucide-react";
+
+export default function AboutPage() {
+  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">
+      <ReactLenis root>
+        <NavbarLayoutFloatingInline
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "/about" },
+            { name: "Features", id: "/features" },
+            { name: "Services", id: "/services" }
+          ]}
+          brandName="ELITE PRINTING"
+          button={{ text: "Contact" }}
+        />
+        <div className="pt-32">
+          <AboutMetric
+            title="Our Mission"
+            metrics={[
+              { icon: Award, label: "Projects Completed", value: "5000+" },
+              { icon: Zap, label: "Turnaround", value: "Rapid" },
+              { icon: Shield, label: "Quality", value: "Guaranteed" }
+            ]}
+            metricsAnimation="slide-up"
+            useInvertedBackground={false}
+          />
+        </div>
+        <FooterLogoEmphasis
+          logoText="ELITE PRINTING"
+          columns={[{ items: [{ label: "Home", href: "/" }, { label: "Contact", href: "#contact" }] }]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="mediumLarge"
+        sizing="largeSmallSizeLargeTitles"
+        background="floatingGradient"
+        cardStyle="soft-shadow"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="glass"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <NavbarLayoutFloatingInline
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Pricing", id: "/pricing" },
+            { name: "Testimonials", id: "/testimonials" },
+            { name: "Contact", id: "/contact" }
+          ]}
+          brandName="ELITE PRINTING"
+          button={{ text: "Get A Quote", href: "/contact" }}
+        />
+        <ContactSplit
+          tag="Contact"
+          useInvertedBackground={true}
+          background={{ variant: "plain" }}
+          title="Ready to print?"
+          description="Contact our team for a fast quote or visit us."
+          imageSrc="http://img.b2bpic.net/free-photo/workplace-with-laptop_23-2147651756.jpg"
+        />
+        <FooterLogoEmphasis
+          columns={[{ items: [{ label: "Home", href: "/" }, { label: "Pricing", href: "/pricing" }] }]}
+          logoText="ELITE PRINTING"
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/features/page.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { ArrowRight, Zap, Shield, Target } from "lucide-react";
+
+export default function FeaturesPage() {
+  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">
+      <ReactLenis root>
+        <NavbarLayoutFloatingInline
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "/about" },
+            { name: "Features", id: "/features" },
+            { name: "Services", id: "/services" }
+          ]}
+          brandName="ELITE PRINTING"
+          button={{ text: "Contact" }}
+        />
+        <div className="pt-32">
+          <FeatureCardTwentySix
+            textboxLayout="inline-image"
+            useInvertedBackground={false}
+            title="Our Core Features"
+            description="High performance printing technology and custom designs."
+            features={[
+              { title: "High Speed", description: "Fast delivery every time.", buttonIcon: ArrowRight },
+              { title: "Premium Quality", description: "Highest standards of ink and paper.", buttonIcon: Shield },
+              { title: "Custom Design", description: "Tailored to your exact specs.", buttonIcon: Target },
+              { title: "Scaleable", description: "From 1 to 1,000,000 units.", buttonIcon: Zap }
+            ]}
+          />
+        </div>
+        <FooterLogoEmphasis
+          logoText="ELITE PRINTING"
+          columns={[{ items: [{ label: "Home", href: "/" }, { label: "Contact", href: "#contact" }] }]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -12,7 +12,7 @@ import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
-import { Award, Shield, Zap, ArrowRight } from "lucide-react";
+import { Award, Shield, Zap, ArrowRight, Star } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -32,13 +32,13 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        { name: "Home", id: "#hero" },
+        { name: "Home", id: "/" },
-        { name: "Services", id: "#services" },
+        { name: "Pricing", id: "/pricing" },
-        { name: "Testimonials", id: "#testimonials" },
+        { name: "Testimonials", id: "/testimonials" },
-        { name: "Contact", id: "#contact" }
+        { name: "Contact", id: "/contact" }
       ]}
       brandName="ELITE PRINTING"
-      button={{ text: "Get A Quote", href: "#contact" }}
+      button={{ text: "Get A Quote", href: "/contact" }}
     />
   </div>
 
@@ -48,7 +48,7 @@ export default function LandingPage() {
       title="Elite Printing Solutions for Your Business"
       description="Professional printing from business cards to large-scale banners. We handle your social media designs and custom packaging with precision."
       tag="Quality Marketing & Printing"
-      buttons={[{ text: "Request Free Quote", href: "#contact" }]}
+      buttons={[{ text: "Request Free Quote", href: "/contact" }]}
       mediaItems={[
         { imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-holding-color-palette_23-2149345284.jpg", imageAlt: "Elite Printing Studio" },
         { imageSrc: "http://img.b2bpic.net/free-photo/still-life-cmyk-toners-assortment_23-2149120697.jpg", imageAlt: "Print machine expertise" }
@@ -87,87 +87,14 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="services" data-section="services">
-      <ProductCardOne
-      animationType="slide-up"
-      textboxLayout="split-description"
-      gridVariant="four-items-2x2-equal-grid"
-      useInvertedBackground={true}
-      products={[
-        { id: "p1", name: "Premium Business Cards", price: "From £30", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pacdli" },
-        { id: "p2", name: "Marketing Flyers", price: "From £40", imageSrc: "http://img.b2bpic.net/free-photo/back-school-concept-with-multicolored-notebooks-white-wall-flat-lay_176474-7006.jpg" },
-        { id: "p3", name: "Outdoor Banners", price: "From £75", imageSrc: "http://img.b2bpic.net/free-photo/clean-white-banner-city_23-2147764790.jpg" },
-        { id: "p4", name: "T-Shirt Branding", price: "From £15/ea", imageSrc: "http://img.b2bpic.net/free-photo/autumn-person-with-cozy-clothes_23-2149137848.jpg" },
-        { id: "p5", name: "Luxury Gift Bags", price: "From £50", imageSrc: "http://img.b2bpic.net/free-photo/furoshiki-package-flower-arrangement_23-2150274467.jpg" },
-        { id: "p6", name: "Stationery Kits", price: "From £120", imageSrc: "http://img.b2bpic.net/free-vector/business-stationery-zigzag-striped_23-2147569911.jpg" }
-      ]}
-      title="Printing Products"
-      description="Browse our most popular printing solutions."
-    />
-  </div>
-
-  <div id="pricing" data-section="pricing">
-      <PricingCardEight
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      plans={[
-        { id: "small", badge: "Essential", price: "£50", subtitle: "For small events", features: ["100 Flyers", "50 Business Cards", "Basic Design"], buttons: [{ text: "Select" }] },
-        { id: "pro", badge: "Professional", price: "£250", subtitle: "Business growth", features: ["500 Flyers", "250 Business Cards", "1x Banner", "Full Branding"], buttons: [{ text: "Select" }] },
-        { id: "enterprise", badge: "Enterprise", price: "£600", subtitle: "Total package", features: ["2000 Flyers", "1000 Business Cards", "3x Banners", "Full Social Media Package"], buttons: [{ text: "Select" }] }
-      ]}
-      title="Transparent Pricing"
-      description="Simple pricing for all your printing needs."
-    />
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwelve
-      useInvertedBackground={true}
-      testimonials={[
-        { id: "1", name: "Alice M.", imageSrc: "http://img.b2bpic.net/free-photo/employee-working-with-trendy-clothes_482257-78860.jpg" },
-        { id: "2", name: "Bob K.", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-employees-looking-laptop-laughing_74855-4007.jpg" },
-        { id: "3", name: "Charlie P.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-groom-classy-black-suit-stands-dark-room_8353-7083.jpg" },
-        { id: "4", name: "Diana S.", imageSrc: "http://img.b2bpic.net/free-photo/laughing-business-people-watching-something-tablet-computer_1262-14270.jpg" },
-        { id: "5", name: "Edward L.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-mature-businessman-using-digital-tablet-caf_23-2147955292.jpg" }
-      ]}
-      cardTitle="Client Reviews"
-      cardTag="What they say"
-      cardAnimation="slide-up"
-    />
-  </div>
-
-  <div id="socialproof" data-section="socialproof">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={[
-        "Alpha Print", "Beta Signs", "Gamma Pack", "Delta Media", "Epsilon Cloth", "Zeta Design", "Omega Marketing"
-      ]}
-      title="Trusted Partners"
-      description="Working with industry leaders."
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactSplit
-      tag="Contact"
-      useInvertedBackground={true}
-      background={{ variant: "plain" }}
-      title="Ready to print?"
-      description="Contact our team for a fast quote or visit us."
-      imageSrc="http://img.b2bpic.net/free-photo/workplace-with-laptop_23-2147651756.jpg"
-    />
-  </div>
-
   <div id="footer" data-section="footer">
       <FooterLogoEmphasis
       columns={[
         {
           items: [
-            { label: "Services", href: "#services" },
+            { label: "Services", href: "/#services" },
-            { label: "Pricing", href: "#pricing" },
+            { label: "Pricing", href: "/pricing" },
-            { label: "Contact", href: "#contact" }
+            { label: "Contact", href: "/contact" }
           ]
         },
         {

src/app/pricing/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { Star } from "lucide-react";
+
+export default function PricingPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="mediumLarge"
+        sizing="largeSmallSizeLargeTitles"
+        background="floatingGradient"
+        cardStyle="soft-shadow"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="glass"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <NavbarLayoutFloatingInline
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Pricing", id: "/pricing" },
+            { name: "Testimonials", id: "/testimonials" },
+            { name: "Contact", id: "/contact" }
+          ]}
+          brandName="ELITE PRINTING"
+          button={{ text: "Get A Quote", href: "/contact" }}
+        />
+        <PricingCardEight
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          plans={[
+            { id: "small", badge: "Essential", price: "£50", subtitle: "For small events", features: ["100 Flyers", "50 Business Cards", "Basic Design"], buttons: [{ text: "Select" }] },
+            { id: "pro", badge: "Most Popular", badgeIcon: Star, price: "£250", subtitle: "Business growth", features: ["500 Flyers", "250 Business Cards", "1x Banner", "Full Branding"], buttons: [{ text: "Select" }] },
+            { id: "enterprise", badge: "Enterprise", price: "£600", subtitle: "Total package", features: ["2000 Flyers", "1000 Business Cards", "3x Banners", "Full Social Media Package"], buttons: [{ text: "Select" }] }
+          ]}
+          title="Transparent Pricing"
+          description="Simple pricing for all your printing needs."
+        />
+        <FooterLogoEmphasis
+          columns={[
+            { items: [{ label: "Home", href: "/" }, { label: "Contact", href: "/contact" }] }
+          ]}
+          logoText="ELITE PRINTING"
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/services/page.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+
+export default function ServicesPage() {
+  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">
+      <ReactLenis root>
+        <NavbarLayoutFloatingInline
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "/about" },
+            { name: "Features", id: "/features" },
+            { name: "Services", id: "/services" }
+          ]}
+          brandName="ELITE PRINTING"
+          button={{ text: "Contact" }}
+        />
+        <div className="pt-32">
+          <ProductCardTwo
+            animationType="slide-up"
+            textboxLayout="split-description"
+            gridVariant="four-items-2x2-equal-grid"
+            title="Our Services"
+            description="Comprehensive printing and design services for all needs."
+            useInvertedBackground={false}
+            products={[
+              { id: "1", name: "Design Service", price: "From £50", brand: "Elite", rating: 5, reviewCount: "48", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pacdli&_wi=1" },
+              { id: "2", name: "Printing Service", price: "From £20", brand: "Elite", rating: 5, reviewCount: "120", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pacdli&_wi=2" },
+              { id: "3", name: "Binding Service", price: "From £10", brand: "Elite", rating: 5, reviewCount: "35", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pacdli&_wi=3" }
+            ]}
+          />
+        </div>
+        <FooterLogoEmphasis
+          logoText="ELITE PRINTING"
+          columns={[{ items: [{ label: "Home", href: "/" }, { label: "Contact", href: "#contact" }] }]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/testimonials/page.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+
+export default function TestimonialsPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="icon-arrow"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="mediumLarge"
+        sizing="largeSmallSizeLargeTitles"
+        background="floatingGradient"
+        cardStyle="soft-shadow"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="glass"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <NavbarLayoutFloatingInline
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Pricing", id: "/pricing" },
+            { name: "Testimonials", id: "/testimonials" },
+            { name: "Contact", id: "/contact" }
+          ]}
+          brandName="ELITE PRINTING"
+          button={{ text: "Get A Quote", href: "/contact" }}
+        />
+        <TestimonialCardTwelve
+          useInvertedBackground={true}
+          testimonials={[
+            { id: "1", name: "Alice M.", imageSrc: "http://img.b2bpic.net/free-photo/employee-working-with-trendy-clothes_482257-78860.jpg" },
+            { id: "2", name: "Bob K.", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-employees-looking-laptop-laughing_74855-4007.jpg" },
+            { id: "3", name: "Charlie P.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-groom-classy-black-suit-stands-dark-room_8353-7083.jpg" }
+          ]}
+          cardTitle="Client Reviews"
+          cardTag="What they say"
+          cardAnimation="slide-up"
+        />
+        <FooterLogoEmphasis
+          columns={[{ items: [{ label: "Home", href: "/" }, { label: "Pricing", href: "/pricing" }] }]}
+          logoText="ELITE PRINTING"
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}