From 999bdd773ea9d4f47234e797c0140f1541b33ac2 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 6 Mar 2026 20:18:35 +0000
Subject: [PATCH 1/6] Add src/app/about/page.tsx

---
 src/app/about/page.tsx | 137 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 137 insertions(+)
 create mode 100644 src/app/about/page.tsx

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
new file mode 100644
index 0000000..82dd8a9
--- /dev/null
+++ b/src/app/about/page.tsx
@@ -0,0 +1,137 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
+import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
+import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterCard from "@/components/sections/footer/FooterCard";
+import { Mail, Twitter, Linkedin } from "lucide-react";
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeMediumTitles"
+      background="circleGradient"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          brandName="Alfabs"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Services", id: "/services" },
+            { name: "About", id: "/about" },
+            { name: "Projects", id: "/projects" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          bottomLeftText="Aluminum Excellence"
+          bottomRightText="hello@alfabs.com"
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <TextSplitAbout
+          title="About Alfabs"
+          description={[
+            "With over 15 years of industry experience, Alfabs Aluminum Services has established itself as a leader in premium aluminum fabrication and installation in Karachi. Our commitment to excellence drives every project we undertake, whether it's residential renovation or large-scale commercial development.",            "We combine cutting-edge technology with traditional craftsmanship to deliver solutions that exceed expectations. Our team of skilled professionals takes pride in transforming architectural visions into tangible, high-quality results that stand the test of time. We utilize advanced fabrication techniques and quality materials to ensure durability and aesthetic excellence.",            "From residential renovations to large-scale commercial installations, we bring expertise, reliability, and innovation to every endeavor. Your project deserves nothing less than Alfabs' dedication to perfection. We've built lasting relationships with architects, contractors, and property developers throughout Karachi by consistently delivering outstanding results and exceptional customer service."
+          ]}
+          buttons={[{ text: "Start Your Project", href: "/contact" }]}
+          showBorder={true}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="metrics" data-section="metrics">
+        <MetricCardFourteen
+          title="Our Track Record"
+          tag="By The Numbers"
+          metrics={[
+            {
+              id: "1",              value: "500+",              description: "Successful projects completed across residential and commercial sectors in Karachi"
+            },
+            {
+              id: "2",              value: "15+",              description: "Years of industry expertise and proven track record of excellence"
+            },
+            {
+              id: "3",              value: "98%",              description: "Client satisfaction rate with on-time delivery and quality assurance"
+            },
+            {
+              id: "4",              value: "50+",              description: "Team members dedicated to precision craftsmanship and customer service"
+            },
+          ]}
+          metricsAnimation="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardFifteen
+          testimonial="Alfabs transformed our vision into reality with exceptional professionalism. Their attention to detail and commitment to quality set them apart. Highly recommended for any aluminum project in Karachi."
+          rating={5}
+          author="Emily Watson, Design Director"
+          avatars={[
+            {
+              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Emily Watson"
+            },
+            {
+              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "James Mitchell"
+            },
+            {
+              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Sarah Chen"
+            },
+            {
+              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Michael Rodriguez"
+            },
+          ]}
+          ratingAnimation="slide-up"
+          avatarsAnimation="slide-up"
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Get In Touch"
+          title="Let's Work Together"
+          description="Contact our team today to discuss your aluminum fabrication and installation needs. We're here to help bring your vision to life."
+          tagIcon={Mail}
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          inputPlaceholder="your@email.com"
+          buttonText="Send Inquiry"
+          termsText="We respect your privacy. Your information will be used only to assist with your project inquiry."
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterCard
+          logoText="Alfabs"
+          copyrightText="© 2025 Alfabs Aluminum Services. All rights reserved."
+          socialLinks={[
+            {
+              icon: Linkedin,
+              href: "https://linkedin.com",              ariaLabel: "LinkedIn"
+            },
+            {
+              icon: Twitter,
+              href: "https://twitter.com",              ariaLabel: "Twitter"
+            },
+            {
+              icon: Mail,
+              href: "mailto:hello@alfabs.com",              ariaLabel: "Email"
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

From 6c65eabbb7cccea96a9df7016c285d9b80dfcdd3 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 6 Mar 2026 20:18:35 +0000
Subject: [PATCH 2/6] Add src/app/contact/page.tsx

---
 src/app/contact/page.tsx | 153 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 153 insertions(+)
 create mode 100644 src/app/contact/page.tsx

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
new file mode 100644
index 0000000..4c0b76d
--- /dev/null
+++ b/src/app/contact/page.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterCard from "@/components/sections/footer/FooterCard";
+import { Mail, Twitter, Linkedin, Phone, MapPin, Clock } from "lucide-react";
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeMediumTitles"
+      background="circleGradient"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          brandName="Alfabs"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Services", id: "/services" },
+            { name: "About", id: "/about" },
+            { name: "Projects", id: "/projects" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          bottomLeftText="Aluminum Excellence"
+          bottomRightText="hello@alfabs.com"
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Get In Touch"
+          title="Contact Alfabs - Premium Aluminum Solutions in Karachi"
+          description="Have questions about our aluminum fabrication and installation services? We'd love to hear from you. Reach out to our team and let's discuss how we can help bring your project to life."
+          tagIcon={Mail}
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          inputPlaceholder="your@email.com"
+          buttonText="Send Inquiry"
+          termsText="We respect your privacy. Your information will be used only to assist with your project inquiry. We typically respond within 24 hours."
+        />
+      </div>
+
+      <div className="w-full bg-card py-16 md:py-24">
+        <div className="mx-auto max-w-6xl px-4 md:px-8">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div className="flex flex-col items-center text-center">
+              <div className="rounded-lg bg-primary-cta/10 p-4 mb-4">
+                <MapPin className="w-6 h-6 text-primary-cta" />
+              </div>
+              <h3 className="text-lg font-semibold mb-2">Our Location</h3>
+              <p className="text-foreground/70">
+                Karachi, Pakistan
+              </p>
+              <p className="text-foreground/70 text-sm mt-1">
+                Serving the Greater Karachi Area
+              </p>
+            </div>
+
+            <div className="flex flex-col items-center text-center">
+              <div className="rounded-lg bg-primary-cta/10 p-4 mb-4">
+                <Phone className="w-6 h-6 text-primary-cta" />
+              </div>
+              <h3 className="text-lg font-semibold mb-2">Phone</h3>
+              <p className="text-foreground/70">
+                +92 (21) XXXX-XXXX
+              </p>
+              <p className="text-foreground/70 text-sm mt-1">
+                Available Monday - Friday
+              </p>
+            </div>
+
+            <div className="flex flex-col items-center text-center">
+              <div className="rounded-lg bg-primary-cta/10 p-4 mb-4">
+                <Clock className="w-6 h-6 text-primary-cta" />
+              </div>
+              <h3 className="text-lg font-semibold mb-2">Business Hours</h3>
+              <p className="text-foreground/70">
+                9:00 AM - 6:00 PM
+              </p>
+              <p className="text-foreground/70 text-sm mt-1">
+                Saturday - Thursday
+              </p>
+            </div>
+          </div>
+
+          <div className="mt-12 text-center">
+            <h2 className="text-2xl md:text-3xl font-semibold mb-4">Why Choose Alfabs?</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl mx-auto">
+              <div className="text-left">
+                <h4 className="font-semibold mb-2 flex items-center gap-2">
+                  <span className="inline-block w-2 h-2 rounded-full bg-primary-cta"></span>
+                  Expert Craftsmanship
+                </h4>
+                <p className="text-foreground/70 text-sm">15+ years of industry experience delivering exceptional results.</p>
+              </div>
+              <div className="text-left">
+                <h4 className="font-semibold mb-2 flex items-center gap-2">
+                  <span className="inline-block w-2 h-2 rounded-full bg-primary-cta"></span>
+                  Quality Materials
+                </h4>
+                <p className="text-foreground/70 text-sm">We use premium aluminum and components from trusted suppliers.</p>
+              </div>
+              <div className="text-left">
+                <h4 className="font-semibold mb-2 flex items-center gap-2">
+                  <span className="inline-block w-2 h-2 rounded-full bg-primary-cta"></span>
+                  On-Time Delivery
+                </h4>
+                <p className="text-foreground/70 text-sm">We respect your timeline and deliver projects as promised.</p>
+              </div>
+              <div className="text-left">
+                <h4 className="font-semibold mb-2 flex items-center gap-2">
+                  <span className="inline-block w-2 h-2 rounded-full bg-primary-cta"></span>
+                  Competitive Pricing
+                </h4>
+                <p className="text-foreground/70 text-sm">Transparent quotes with no hidden costs or surprises.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterCard
+          logoText="Alfabs"
+          copyrightText="© 2025 Alfabs Aluminum Services. All rights reserved."
+          socialLinks={[
+            {
+              icon: Linkedin,
+              href: "https://linkedin.com",              ariaLabel: "LinkedIn"
+            },
+            {
+              icon: Twitter,
+              href: "https://twitter.com",              ariaLabel: "Twitter"
+            },
+            {
+              icon: Mail,
+              href: "mailto:hello@alfabs.com",              ariaLabel: "Email"
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

From 6e9f083dd782571cdb8f8f4280cafb2fab4ac60f Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 6 Mar 2026 20:18:36 +0000
Subject: [PATCH 3/6] Update src/app/layout.tsx

---
 src/app/layout.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 181dd57..5832386 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -11,7 +11,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",  description: "Generated by create next app"};
+  title: "Alfabs - Premium Aluminum Solutions in Karachi",  description: "Professional aluminum fabrication and installation services in Karachi. Custom windows, doors, facades, and railings for residential and commercial projects."
+};
 
 export default function RootLayout({
   children,

From 712c4a31de5aed744cb7a38265378a6dd5edfcb9 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 6 Mar 2026 20:18:36 +0000
Subject: [PATCH 4/6] Update src/app/page.tsx

---
 src/app/page.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index a1201e9..dc371e6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -30,11 +30,11 @@ export default function LandingPage() {
         <NavbarStyleFullscreen
           brandName="Alfabs"
           navItems={[
-            { name: "Home", id: "home" },
-            { name: "Services", id: "services" },
-            { name: "About", id: "about" },
-            { name: "Projects", id: "projects" },
-            { name: "Contact", id: "contact" },
+            { name: "Home", id: "/" },
+            { name: "Services", id: "/services" },
+            { name: "About", id: "/about" },
+            { name: "Projects", id: "/projects" },
+            { name: "Contact", id: "/contact" },
           ]}
           bottomLeftText="Aluminum Excellence"
           bottomRightText="hello@alfabs.com"
@@ -65,8 +65,8 @@ export default function LandingPage() {
             },
           ]}
           buttons={[
-            { text: "Request Quote", href: "contact" },
-            { text: "Learn More", href: "services" },
+            { text: "Request Quote", href: "/contact" },
+            { text: "Learn More", href: "/services" },
           ]}
           background={{ variant: "plain" }}
           useInvertedBackground={false}
@@ -128,7 +128,7 @@ export default function LandingPage() {
           animationType="blur-reveal"
           textboxLayout="default"
           useInvertedBackground={true}
-          buttons={[{ text: "View Portfolio", href: "projects" }]}
+          buttons={[{ text: "View Portfolio", href: "/projects" }]}
         />
       </div>
 
@@ -138,7 +138,7 @@ export default function LandingPage() {
           description={[
             "With over 15 years of industry experience, Alfabs Aluminum Services has established itself as a leader in premium aluminum fabrication and installation. Our commitment to excellence drives every project we undertake.",            "We combine cutting-edge technology with traditional craftsmanship to deliver solutions that exceed expectations. Our team of skilled professionals takes pride in transforming architectural visions into tangible, high-quality results.",            "From residential renovations to large-scale commercial installations, we bring expertise, reliability, and innovation to every endeavor. Your project deserves nothing less than Alfabs' dedication to perfection."
           ]}
-          buttons={[{ text: "Contact Our Team", href: "contact" }]}
+          buttons={[{ text: "Contact Our Team", href: "/contact" }]}
           showBorder={true}
           useInvertedBackground={false}
         />

From 77fb27da3cb9013cbe48df7b90ffedabb1ad2be9 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 6 Mar 2026 20:18:37 +0000
Subject: [PATCH 5/6] Add src/app/projects/page.tsx

---
 src/app/projects/page.tsx | 108 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 src/app/projects/page.tsx

diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
new file mode 100644
index 0000000..8254c6d
--- /dev/null
+++ b/src/app/projects/page.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import ProductCardOne from "@/components/sections/product/ProductCardOne";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterCard from "@/components/sections/footer/FooterCard";
+import { Image, Mail, Twitter, Linkedin } from "lucide-react";
+
+export default function ProjectsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeMediumTitles"
+      background="circleGradient"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          brandName="Alfabs"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Services", id: "/services" },
+            { name: "About", id: "/about" },
+            { name: "Projects", id: "/projects" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          bottomLeftText="Aluminum Excellence"
+          bottomRightText="hello@alfabs.com"
+        />
+      </div>
+
+      <div id="projects" data-section="projects">
+        <ProductCardOne
+          title="Featured Projects"
+          description="Showcasing our finest work across residential and commercial sectors in Karachi. Each project represents our commitment to quality, precision, and customer satisfaction. From modern office complexes to luxury residential developments, explore how Alfabs has transformed architectural visions into reality."
+          tag="Portfolio"
+          tagIcon={Image}
+          products={[
+            {
+              id: "1",              name: "Downtown Office Complex",              price: "Commercial",              imageSrc: "http://img.b2bpic.net/free-photo/low-angle-view-skyscrapers_1359-44.jpg?_wi=2",              imageAlt: "Downtown office building with aluminum facades"
+            },
+            {
+              id: "2",              name: "Luxury Residential Tower",              price: "Residential",              imageSrc: "http://img.b2bpic.net/free-photo/modern-design-stone-building_23-2148252734.jpg?_wi=3",              imageAlt: "Modern residential tower with premium aluminum systems"
+            },
+            {
+              id: "3",              name: "Retail Center Renovation",              price: "Commercial",              imageSrc: "http://img.b2bpic.net/free-photo/low-angle-view-skyscrapers_1359-44.jpg?_wi=3",              imageAlt: "Retail center with modern aluminum storefronts"
+            },
+            {
+              id: "4",              name: "Corporate Headquarters",              price: "Commercial",              imageSrc: "http://img.b2bpic.net/free-photo/modern-design-stone-building_23-2148252734.jpg?_wi=4",              imageAlt: "Corporate headquarters with custom aluminum facade"
+            },
+            {
+              id: "5",              name: "Residential Complex",              price: "Residential",              imageSrc: "http://img.b2bpic.net/free-photo/low-angle-view-skyscrapers_1359-44.jpg?_wi=4",              imageAlt: "Multi-story residential complex with aluminum windows and doors"
+            },
+            {
+              id: "6",              name: "Shopping Mall Extension",              price: "Commercial",              imageSrc: "http://img.b2bpic.net/free-photo/modern-design-stone-building_23-2148252734.jpg?_wi=5",              imageAlt: "Shopping mall extension with modern aluminum design"
+            },
+          ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Get In Touch"
+          title="Start Your Next Project"
+          description="Ready to bring your vision to life? Contact our team today to discuss your aluminum fabrication and installation requirements."
+          tagIcon={Mail}
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          inputPlaceholder="your@email.com"
+          buttonText="Send Inquiry"
+          termsText="We respect your privacy. Your information will be used only to assist with your project inquiry."
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterCard
+          logoText="Alfabs"
+          copyrightText="© 2025 Alfabs Aluminum Services. All rights reserved."
+          socialLinks={[
+            {
+              icon: Linkedin,
+              href: "https://linkedin.com",              ariaLabel: "LinkedIn"
+            },
+            {
+              icon: Twitter,
+              href: "https://twitter.com",              ariaLabel: "Twitter"
+            },
+            {
+              icon: Mail,
+              href: "mailto:hello@alfabs.com",              ariaLabel: "Email"
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

From 6dfd397672eb9fd765cc310b7d408ab50e6dd71e Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 6 Mar 2026 20:18:37 +0000
Subject: [PATCH 6/6] Add src/app/services/page.tsx

---
 src/app/services/page.tsx | 133 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 133 insertions(+)
 create mode 100644 src/app/services/page.tsx

diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
new file mode 100644
index 0000000..2b56604
--- /dev/null
+++ b/src/app/services/page.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterCard from "@/components/sections/footer/FooterCard";
+import { Briefcase, DoorOpen, Building, Shield, Wind, Mail, Twitter, Linkedin } from "lucide-react";
+
+export default function ServicesPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeMediumTitles"
+      background="circleGradient"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          brandName="Alfabs"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Services", id: "/services" },
+            { name: "About", id: "/about" },
+            { name: "Projects", id: "/projects" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          bottomLeftText="Aluminum Excellence"
+          bottomRightText="hello@alfabs.com"
+        />
+      </div>
+
+      <div id="services" data-section="services">
+        <FeatureCardTwentyFive
+          title="Our Comprehensive Services"
+          description="Alfabs offers a complete range of aluminum fabrication and installation services designed to meet the diverse needs of residential and commercial projects across Karachi. Each service is delivered with precision, quality, and professionalism."
+          tag="What We Offer"
+          tagIcon={Briefcase}
+          features={[
+            {
+              title: "Window Systems",              description: "Custom aluminum window frames engineered for durability, aesthetics, and thermal performance. Our windows combine modern design with weather resistance, ideal for both residential and commercial applications. We offer various styles including sliding, casement, and fixed windows.",              icon: Wind,
+              mediaItems: [
+                {
+                  imageSrc: "http://img.b2bpic.net/free-photo/man-servant-washing-windows_23-2149530810.jpg",                  imageAlt: "Modern aluminum window installation"
+                },
+                {
+                  imageSrc: "http://img.b2bpic.net/free-photo/modern-design-stone-building_23-2148252734.jpg?_wi=1",                  imageAlt: "Residential window project showcase"
+                },
+              ],
+            },
+            {
+              title: "Door Solutions",              description: "Premium aluminum doors including sliding, pivot, and entrance systems. Our doors are designed for security, style, and ease of operation. From contemporary slide doors to elegant pivot entrances, we have solutions for every architectural requirement.",              icon: DoorOpen,
+              mediaItems: [
+                {
+                  imageSrc: "http://img.b2bpic.net/free-photo/portraif-caucasian-woman-romantic-elegant-pink-long-dress-vacation-luxury-rich-villa-hotel-with-amazing-tropical-palm-trees-view-female-classic-white-hat_343596-2056.jpg",                  imageAlt: "Aluminum door installation"
+                },
+                {
+                  imageSrc: "http://img.b2bpic.net/free-photo/low-angle-view-skyscrapers_1359-44.jpg?_wi=1",                  imageAlt: "Commercial entrance project"
+                },
+              ],
+            },
+            {
+              title: "Building Facades",              description: "Modern facade systems that enhance your building's appearance and performance. Our aluminum facades are weather-resistant, architecturally stunning, and engineered for longevity. Perfect for commercial buildings, shopping centers, and residential complexes.",              icon: Building,
+              mediaItems: [
+                {
+                  imageSrc: "http://img.b2bpic.net/free-photo/background-white-note-song-entertainment_1127-2772.jpg",                  imageAlt: "Modern aluminum facade design"
+                },
+                {
+                  imageSrc: "http://img.b2bpic.net/free-photo/circular-saw-miter-saw-photographed-workshop-atmosphere_169016-12976.jpg",                  imageAlt: "Facade fabrication workshop"
+                },
+              ],
+            },
+            {
+              title: "Safety Railings",              description: "Durable aluminum railings that combine safety with elegant design. Our railings are perfect for balconies, terraces, staircases, and architectural accents. Built to international safety standards while maintaining aesthetic appeal.",              icon: Shield,
+              mediaItems: [
+                {
+                  imageSrc: "http://img.b2bpic.net/free-photo/young-woman-by-shopping-center_1303-16433.jpg",                  imageAlt: "Premium aluminum railings"
+                },
+                {
+                  imageSrc: "http://img.b2bpic.net/free-photo/modern-design-stone-building_23-2148252734.jpg?_wi=2",                  imageAlt: "Railing installation project"
+                },
+              ],
+            },
+          ]}
+          animationType="blur-reveal"
+          textboxLayout="default"
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Get In Touch"
+          title="Ready to Discuss Your Project?"
+          description="Contact our team today to learn more about our services and how we can help bring your vision to life."
+          tagIcon={Mail}
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          inputPlaceholder="your@email.com"
+          buttonText="Send Inquiry"
+          termsText="We respect your privacy. Your information will be used only to assist with your project inquiry."
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterCard
+          logoText="Alfabs"
+          copyrightText="© 2025 Alfabs Aluminum Services. All rights reserved."
+          socialLinks={[
+            {
+              icon: Linkedin,
+              href: "https://linkedin.com",              ariaLabel: "LinkedIn"
+            },
+            {
+              icon: Twitter,
+              href: "https://twitter.com",              ariaLabel: "Twitter"
+            },
+            {
+              icon: Mail,
+              href: "mailto:hello@alfabs.com",              ariaLabel: "Email"
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}