Update src/app/layout.tsx

src/app/about/page.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
+import { Rocket } 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>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "About", id: "/about" },
+              { name: "Work", id: "/work" },
+              { name: "Services", id: "/services" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            button={{ text: "Get Quote", href: "/contact" }}
+          />
+        </div>
+        <div className="pt-32 pb-20">
+          <MetricSplitMediaAbout
+            title="Engineering Success"
+            description="We believe that great technology is invisible. Our team focuses on building tools that empower businesses to scale seamlessly."
+            metrics={[{ value: "5+", title: "Years Experience" }, { value: "100+", title: "Projects Completed" }]}
+            useInvertedBackground={false}
+            tag="Our Mission"
+            tagIcon={Rocket}
+            imageSrc="http://img.b2bpic.net/free-photo/elegant-cozy-office-lifestyle_23-2149636247.jpg"
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="SiteCraft"
+            copyrightText="© 2026 | SiteCraft Solutions"
+            columns={[
+              { title: "Agency", items: [{ label: "Our Approach", href: "/about" }, { label: "Portfolio", href: "/work" }] },
+              { title: "Solutions", items: [{ label: "Full-stack Dev", href: "#" }, { label: "Cloud Infra", href: "#" }, { label: "SEO Audit", href: "#" }] },
+              { title: "Office", items: [{ label: "San Francisco", href: "#" }, { label: "London", href: "#" }] },
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import ContactText from "@/components/sections/contact/ContactText";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+
+export default function ContactPage() {
+  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>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "About", id: "/about" },
+              { name: "Work", id: "/work" },
+              { name: "Services", id: "/services" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            button={{ text: "Get Quote", href: "/contact" }}
+          />
+        </div>
+        <div className="py-32">
+          <ContactText
+            text="Let's Build Something Great"
+            background={{ variant: "rotated-rays-animated" }}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="SiteCraft"
+            copyrightText="© 2026 | SiteCraft Solutions"
+            columns={[
+              { title: "Agency", items: [{ label: "Our Approach", href: "/about" }, { label: "Portfolio", href: "/work" }] },
+              { title: "Solutions", items: [{ label: "Full-stack Dev", href: "#" }, { label: "Cloud Infra", href: "#" }, { label: "SEO Audit", href: "#" }] },
+              { title: "Office", items: [{ label: "San Francisco", href: "#" }, { label: "London", href: "#" }] },
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -18,7 +18,7 @@ const inter = Inter({
   subsets: ["latin"],
 });
 
-export const metadata: Metadata = { title: 'SiteCraft | Engineering-First Website Development Agency', description: 'We build high-performance, conversion-focused websites for ambitious companies. Custom web development, UX strategy, and enterprise-grade performance.' };
+export const metadata: Metadata = { title: 'SiteCraft', description: 'Professional digital solutions' };
 
 export default function RootLayout({
   children,

src/app/page.tsx

@@ -33,12 +33,12 @@ export default function WebAgency2Page() {
         <NavbarLayoutFloatingOverlay
           brandName="SiteCraft"
           navItems={[
+            { name: "About", id: "/about" },
             { name: "Work", id: "work" },
             { name: "Services", id: "services" },
-            { name: "Approach", id: "about" },
-            { name: "Contact", id: "contact" },
+            { name: "Contact", id: "/contact" },
           ]}
-          button={{ text: "Get Quote", href: "#contact" }}
+          button={{ text: "Get Quote", href: "/contact" }}
         />
         <HeroSplitDoubleCarousel
           title="We Engineer High-Growth Digital Assets"
@@ -48,7 +48,7 @@ export default function WebAgency2Page() {
           tagAnimation="slide-up"
           background={{ variant: "canvas-reveal" }}
           buttons={[
-            { text: "Start Building", href: "#contact" },
+            { text: "Start Building", href: "/contact" },
             { text: "Our Portfolio", href: "#work" },
           ]}
           buttonAnimation="slide-up"
@@ -149,7 +149,7 @@ export default function WebAgency2Page() {
           title="Architect Your Next Digital Venture"
           description="Engineering talent, design expertise, and strategy in one place. Let's discuss your project specs."
           background={{ variant: "rotated-rays-animated" }}
-          buttons={[{ text: "Book a Technical Consultation", href: "#contact" }]}
+          buttons={[{ text: "Book a Technical Consultation", href: "/contact" }]}
           buttonAnimation="slide-up"
           useInvertedBackground={false}
         />
@@ -157,7 +157,7 @@ export default function WebAgency2Page() {
           logoText="SiteCraft"
           copyrightText="© 2026 | SiteCraft Solutions"
           columns={[
-            { title: "Agency", items: [{ label: "Our Approach", href: "#about" }, { label: "Portfolio", href: "#work" }] },
+            { title: "Agency", items: [{ label: "Our Approach", href: "/about" }, { label: "Portfolio", href: "#work" }] },
             { title: "Solutions", items: [{ label: "Full-stack Dev", href: "#" }, { label: "Cloud Infra", href: "#" }, { label: "SEO Audit", href: "#" }] },
             { title: "Office", items: [{ label: "San Francisco", href: "#" }, { label: "London", href: "#" }] },
           ]}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
-  --card: #161616;
-  --foreground: #f0f0f0;
-  --primary-cta: #ffffff;
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #000612e6;
+  --primary-cta: #15479c;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1e1e1e;
+  --secondary-cta: #f9f9f9;
   --secondary-cta-text: #e0e0e0;
-  --accent: #d0d0d0;
-  --background-accent: #9a9a9a;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);