Merge version_3 into main

Merge version_3 into main

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>
+  );
+}

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>
+  );
+}

src/app/layout.tsx

@@ -1,57 +1,29 @@
 import type { Metadata } from "next";
-import { Halant } from "next/font/google";
-import { Inter } from "next/font/google";
-import { Nunito } from "next/font/google";
+import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
 
-const halant = Halant({
-  variable: "--font-halant",  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
+const geist = Geist({
+  variable: "--font-geist-sans",  subsets: ["latin"],
 });
 
-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
-});
-
-const nunito = Nunito({
-  variable: "--font-nunito",  subsets: ["latin"],
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "Alfabs Aluminum Services | Premium Fabrication & Installation",  description: "Expert aluminum services for windows, doors, facades, and railings. Quality craftsmanship for residential and commercial projects.",  keywords: "aluminum, fabrication, installation, windows, doors, facades, railings, commercial, residential",  metadataBase: new URL("https://alfabs.com"),
-  alternates: {
-    canonical: "https://alfabs.com"},
-  openGraph: {
-    title: "Alfabs Aluminum Services | Premium Fabrication & Installation",    description: "Transform your vision with our expert aluminum solutions and professional craftsmanship.",    url: "https://alfabs.com",    siteName: "Alfabs",    type: "website",    images: [
-      {
-        url: "http://img.b2bpic.net/free-photo/large-steel-factory-warehouse_1127-3265.jpg",        alt: "Alfabs Aluminum Services"},
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",    title: "Alfabs Aluminum Services",    description: "Premium aluminum fabrication and installation for your projects.",    images: ["http://img.b2bpic.net/free-photo/large-steel-factory-warehouse_1127-3265.jpg"],
-  },
-  robots: {
-    index: true,
-    follow: true,
-  },
+  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,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${halant.variable} ${inter.variable} ${nunito.variable} antialiased`}
-        >
-          <Tag />
-          {children}
-        
+    <html lang="en">
+      <body className={`${geist.variable} ${geistMono.variable}`}>
+        {children}
+      
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -1419,7 +1391,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
 }

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"
@@ -53,17 +53,20 @@ export default function LandingPage() {
           testimonials={[
             {
               name: "James Mitchell",              handle: "Construction Manager, BuildRight Co.",              testimonial: "Alfabs delivered exceptional quality on our commercial project. Professional team, perfect execution.",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1",              imageAlt: "James Mitchell"},
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1",              imageAlt: "James Mitchell"
+            },
             {
               name: "Sarah Chen",              handle: "Architect, Design Studios",              testimonial: "Outstanding craftsmanship and attention to detail. They exceeded our expectations on every front.",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2",              imageAlt: "Sarah Chen"},
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2",              imageAlt: "Sarah Chen"
+            },
             {
               name: "Michael Rodriguez",              handle: "Property Developer",              testimonial: "Reliable, punctual, and high-quality work. Alfabs is our trusted partner for all aluminum needs.",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3",              imageAlt: "Michael Rodriguez"},
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3",              imageAlt: "Michael Rodriguez"
+            },
           ]}
           buttons={[
-            { text: "Get Started", href: "contact" },
-            { text: "Learn More", href: "services" },
+            { text: "Request Quote", href: "/contact" },
+            { text: "Learn More", href: "/services" },
           ]}
           background={{ variant: "plain" }}
           useInvertedBackground={false}
@@ -81,43 +84,51 @@ export default function LandingPage() {
               title: "Window Systems",              description: "Custom aluminum window frames engineered for durability, aesthetics, and thermal performance. Ideal for residential and commercial applications.",              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/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"},
+                  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. Designed for security, style, and ease of operation.",              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/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"},
+                  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. Weather-resistant and architecturally stunning.",              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/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"},
+                  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. Perfect for balconies, terraces, and architectural accents.",              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/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"},
+                  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}
-          buttons={[{ text: "View Portfolio", href: "projects" }]}
+          buttons={[{ text: "View Portfolio", href: "/projects" }]}
         />
       </div>
 
@@ -125,8 +136,9 @@ export default function LandingPage() {
         <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. 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" }]}
+            "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" }]}
           showBorder={true}
           useInvertedBackground={false}
         />
@@ -140,11 +152,14 @@ export default function LandingPage() {
           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: "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: "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: "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"
+            },
           ]}
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
@@ -159,13 +174,17 @@ export default function LandingPage() {
           tag="By The Numbers"
           metrics={[
             {
-              id: "1",              value: "500+",              description: "Successful projects completed across residential and commercial sectors"},
+              id: "1",              value: "500+",              description: "Successful projects completed across residential and commercial sectors"
+            },
             {
-              id: "2",              value: "15+",              description: "Years of industry expertise and proven track record of excellence"},
+              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: "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"},
+              id: "4",              value: "50+",              description: "Team members dedicated to precision craftsmanship and customer service"
+            },
           ]}
           metricsAnimation="slide-up"
           useInvertedBackground={false}
@@ -179,13 +198,17 @@ export default function LandingPage() {
           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: "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: "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: "Sarah Chen"
+            },
             {
-              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Michael Rodriguez"},
+              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"
@@ -214,13 +237,16 @@ export default function LandingPage() {
           socialLinks={[
             {
               icon: Linkedin,
-              href: "https://linkedin.com",              ariaLabel: "LinkedIn"},
+              href: "https://linkedin.com",              ariaLabel: "LinkedIn"
+            },
             {
               icon: Twitter,
-              href: "https://twitter.com",              ariaLabel: "Twitter"},
+              href: "https://twitter.com",              ariaLabel: "Twitter"
+            },
             {
               icon: Mail,
-              href: "mailto:hello@alfabs.com",              ariaLabel: "Email"},
+              href: "mailto:hello@alfabs.com",              ariaLabel: "Email"
+            },
           ]}
         />
       </div>

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>
+  );
+}

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>
+  );
+}