Update src/app/contact/page.tsx

src/app/about/page.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Instagram, Twitter } from "lucide-react";
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="small"
+        sizing="mediumSizeLargeTitles"
+        background="grid"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="layered"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Services", id: "/services" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Mkay Designs"
+          />
+        </div>
+
+        <div id="about" data-section="about">
+          <InlineImageSplitTextAbout
+            heading={[{ type: 'text', content: 'Our Story & Mission' }]}
+            useInvertedBackground={false}
+            ariaLabel="About us section"
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoText="Mkay Designs"
+            copyrightText="© 2025 Mkay Designs | Nairobi, Kenya"
+            socialLinks={[
+              { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+              { icon: Twitter, href: "#", ariaLabel: "Twitter" },
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Instagram, Twitter, MessageCircle } from "lucide-react";
+
+export default function ContactPage() {
+  return (
+    <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">
+          <NavbarStyleCentered 
+            navItems={[{name: "Home", id: "/"}, {name: "Portfolio", id: "/portfolio"}, {name: "Testimonials", id: "/testimonials"}, {name: "Contact", id: "/contact"}]} 
+          />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactSplit 
+              tag="Contact"
+              title="Let's Connect"
+              description="Contact us for a quote or general inquiry."
+              mediaAnimation="slide-up"
+              useInvertedBackground={false}
+              background={{ variant: "plain" }}
+          />
+          <div className="mt-8 flex justify-center">
+              <a href="https://wa.me/254700000000" className="flex items-center gap-2 bg-green-500 text-white px-6 py-3 rounded-full hover:bg-green-600">
+                  <MessageCircle /> Chat on WhatsApp
+              </a>
+          </div>
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterCard 
+            logoText="Mkay Designs" 
+            copyrightText="© 2025 Mkay Designs | Nairobi, Kenya" 
+            socialLinks={[{icon: Instagram, href: "#", ariaLabel: "Instagram"}, {icon: Twitter, href: "#", ariaLabel: "Twitter"}]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -29,22 +29,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Services",
-          id: "services",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "/" },
+        { name: "Portfolio", id: "/portfolio" },
+        { name: "Testimonials", id: "/testimonials" },
+        { name: "Contact", id: "/contact" },
       ]}
       brandName="Mkay Designs"
     />
@@ -53,19 +41,12 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroBillboard
       background={{
-        variant: "gradient-bars",
-      }}
+        variant: "gradient-bars"}}
       title="Crafting Your Dream Space in Kenya"
       description="Mkay Designs transforms your vision into a living masterpiece. Bringing bespoke interior elegance to residential and commercial projects across the region."
       buttons={[
-        {
-          text: "View Projects",
-          href: "#services",
-        },
-        {
-          text: "Get a Consultation",
-          href: "#contact",
-        },
+        { text: "View Portfolio", href: "/portfolio" },
+        { text: "Get a Consultation", href: "/contact" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/luxurious-outdoor-living-space-with-comfortable-sofa_23-2152008212.jpg"
       mediaAnimation="slide-up"
@@ -77,136 +58,25 @@ export default function LandingPage() {
       useInvertedBackground={false}
       title="The Mkay Design Philosophy"
       metrics={[
-        {
-          icon: Award,
-          label: "Years Experience",
-          value: "10+",
-        },
-        {
-          icon: Home,
-          label: "Projects Completed",
-          value: "500+",
-        },
-        {
-          icon: Sparkles,
-          label: "Happy Clients",
-          value: "98%",
-        },
+        { icon: Award, label: "Years Experience", value: "10+" },
+        { icon: Home, label: "Projects Completed", value: "500+" },
+        { icon: Sparkles, label: "Happy Clients", value: "98%" },
       ]}
       metricsAnimation="slide-up"
     />
   </div>
 
-  <div id="services" data-section="services">
-      <FeatureCardSeven
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          id: 1,
-          title: "Residential Design",
-          description: "Creating intimate and functional homes that feel like a sanctuary tailored just for you.",
-          imageSrc: "http://img.b2bpic.net/free-photo/creative-fengshui-practice-home-arrangement_23-2149135745.jpg",
-        },
-        {
-          id: 2,
-          title: "Commercial Solutions",
-          description: "Inspiring workspaces that elevate brand identity and foster team productivity.",
-          imageSrc: "http://img.b2bpic.net/free-photo/view-futuristic-light-lamp-design_23-2151037575.jpg",
-        },
-        {
-          id: 3,
-          title: "Space Planning",
-          description: "Optimizing every square foot for maximum aesthetic impact and utility.",
-          imageSrc: "http://img.b2bpic.net/free-vector/professional-office-interior-with-flat-design_23-2147907710.jpg",
-        },
-      ]}
-      title="Our Design Services"
-      description="From concept to completion, we manage every detail to ensure your space reflects your unique personality and professional identity."
-    />
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="asymmetric-60-wide-40-narrow"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          name: "Amina Otieno",
-          role: "Homeowner",
-          company: "Nairobi Estate",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-styled-small-entryway_23-2150712947.jpg",
-        },
-        {
-          id: "2",
-          name: "David Mwangi",
-          role: "CEO",
-          company: "Tech Innovate",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/interior-modern-office_23-2147668767.jpg",
-        },
-        {
-          id: "3",
-          name: "Sarah Juma",
-          role: "Director",
-          company: "Creative Hub",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-rich-woman-sitting-home_23-2149722559.jpg",
-        },
-        {
-          id: "4",
-          name: "Kevin Otieno",
-          role: "Partner",
-          company: "Law Firm",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/wooden-bowl-water_1252-815.jpg",
-        },
-      ]}
-      title="What Our Clients Say"
-      description="Discover why clients across Nairobi and beyond trust Mkay Designs to bring their spaces to life."
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={false}
-      background={{
-        variant: "gradient-bars",
-      }}
-      text="Ready to redefine your space? Let's discuss your project today and bring your vision to life."
-      buttons={[
-        {
-          text: "Call +254 700 000 000",
-          href: "tel:+254700000000",
-        },
-      ]}
-    />
-  </div>
-
   <div id="footer" data-section="footer">
       <FooterCard
       logoText="Mkay Designs"
       copyrightText="© 2025 Mkay Designs | Nairobi, Kenya"
       socialLinks={[
-        {
-          icon: Instagram,
-          href: "#",
-          ariaLabel: "Instagram",
-        },
-        {
-          icon: Twitter,
-          href: "#",
-          ariaLabel: "Twitter",
-        },
+        { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+        { icon: Twitter, href: "#", ariaLabel: "Twitter" },
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/portfolio/page.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Instagram, Twitter } from "lucide-react";
+
+export default function PortfolioPage() {
+  return (
+    <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">
+          <NavbarStyleCentered 
+            navItems={[{name: "Home", id: "/"}, {name: "Portfolio", id: "/portfolio"}, {name: "Testimonials", id: "/testimonials"}, {name: "Contact", id: "/contact"}]} 
+          />
+        </div>
+        <div id="portfolio" data-section="portfolio">
+            <FeatureCardNine 
+                title="Our Portfolio"
+                description="Explore our recent residential and commercial design projects."
+                animationType="slide-up"
+                textboxLayout="default"
+                showStepNumbers={false}
+                useInvertedBackground={false}
+                features={[
+                    { id: 1, title: "Luxury Villa", description: "Modern residential design in Nairobi.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/luxurious-outdoor-living-space-with-comfortable-sofa_23-2152008212.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/interior-modern-office_23-2147668767.jpg" } },
+                    { id: 2, title: "Modern Office", description: "Creative workspace transformation.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/interior-modern-office_23-2147668767.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/luxurious-outdoor-living-space-with-comfortable-sofa_23-2152008212.jpg" } }
+                ]}
+            />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterCard 
+            logoText="Mkay Designs" 
+            copyrightText="© 2025 Mkay Designs | Nairobi, Kenya" 
+            socialLinks={[{icon: Instagram, href: "#", ariaLabel: "Instagram"}, {icon: Twitter, href: "#", ariaLabel: "Twitter"}]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/services/page.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Instagram, Twitter } from "lucide-react";
+
+export default function ServicesPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="small"
+        sizing="mediumSizeLargeTitles"
+        background="grid"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="layered"
+        headingFontWeight="normal"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Services", id: "/services" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Mkay Designs"
+          />
+        </div>
+
+        <div id="services" data-section="services">
+          <FeatureCardThree
+            title="Our Comprehensive Services"
+            description="Detailed offerings tailored to your specific interior design needs."
+            gridVariant="three-columns-all-equal-width"
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            features={[
+              { id: "1", title: "Full Home Redesign", description: "Complete transformations from floor to ceiling.", imageSrc: "http://img.b2bpic.net/free-photo/luxurious-outdoor-living-space-with-comfortable-sofa_23-2152008212.jpg" },
+              { id: "2", title: "Workspace Optimization", description: "Enhancing commercial spaces for efficiency.", imageSrc: "http://img.b2bpic.net/free-photo/interior-modern-office_23-2147668767.jpg" },
+              { id: "3", title: "Bespoke Furniture Design", description: "Custom pieces crafted to your exact specifications.", imageSrc: "http://img.b2bpic.net/free-photo/wooden-bowl-water_1252-815.jpg" }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoText="Mkay Designs"
+            copyrightText="© 2025 Mkay Designs | Nairobi, Kenya"
+            socialLinks={[
+              { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+              { icon: Twitter, href: "#", ariaLabel: "Twitter" },
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fcf6ec;
-  --card: #f3ede2;
-  --foreground: #2e2521;
-  --primary-cta: #2e2521;
+  --background: #f5f4f0;
+  --card: #ffffff;
+  --foreground: #1a1a1a;
+  --primary-cta: #2c2c2c;
   --primary-cta-text: #fcf6ec;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #f5f4f0;
   --secondary-cta-text: #2e2521;
-  --accent: #b2a28b;
-  --background-accent: #b2a28b;
+  --accent: #8a8a8a;
+  --background-accent: #e8e6e1;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/testimonials/page.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Instagram, Twitter } from "lucide-react";
+
+export default function TestimonialsPage() {
+  return (
+    <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">
+          <NavbarStyleCentered 
+            navItems={[{name: "Home", id: "/"}, {name: "Portfolio", id: "/portfolio"}, {name: "Testimonials", id: "/testimonials"}, {name: "Contact", id: "/contact"}]} 
+          />
+        </div>
+        <div id="testimonials" data-section="testimonials">
+            <TestimonialCardFive 
+                title="Client Reviews"
+                description="What our clients say about our bespoke design services."
+                textboxLayout="default"
+                useInvertedBackground={false}
+                testimonials={[
+                    { id: "1", name: "Amina Otieno", date: "2024-01-01", title: "Review", quote: "Absolutely transformed my home vision!", tag: "User", avatarSrc: "" },
+                    { id: "2", name: "David Mwangi", date: "2024-02-01", title: "Review", quote: "Outstanding office interior design.", tag: "User", avatarSrc: "" }
+                ]}
+            />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterCard 
+            logoText="Mkay Designs" 
+            copyrightText="© 2025 Mkay Designs | Nairobi, Kenya" 
+            socialLinks={[{icon: Instagram, href: "#", ariaLabel: "Instagram"}, {icon: Twitter, href: "#", ariaLabel: "Twitter"}]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}