Update src/app/page.tsx

src/app/page.tsx

@@ -2,210 +2,122 @@
 
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import HeroSplit from "@/components/sections/hero/HeroSplit";
+import HeroCarouselLogo from "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo";
-import TextAbout from "@/components/sections/about/TextAbout";
+import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
-import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
+import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
-import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
+import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
-import ContactSplit from "@/components/sections/contact/ContactSplit";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
-import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { Wrench, ShieldCheck, Square } from "lucide-react";
 
-export default function ArchitectureStudioPage() {
+export default function AluminiumServicesPage() {
     return (
         <ThemeProvider
             defaultButtonVariant="expand-hover"
             defaultTextAnimation="reveal-blur"
             borderRadius="soft"
-            contentWidth="smallMedium"
+            contentWidth="medium"
             sizing="largeSizeMediumTitles"
-            background="aurora"
+            background="noise"
-            cardStyle="glass-elevated"
+            cardStyle="solid"
-            primaryButtonStyle="double-inset"
+            primaryButtonStyle="flat"
             secondaryButtonStyle="solid"
-            headingFontWeight="bold"
+            headingFontWeight="semibold"
         >
             <ReactLenis root>
                 <div id="nav" data-section="nav">
-                    <NavbarLayoutFloatingInline
+                    <NavbarStyleCentered
-                        brandName="Studio"
+                        brandName="ALU-TECH"
                         navItems={[
-                            { name: "Work", id: "projects" },
+                            { name: "Services", id: "philosophy" },
-                            { name: "Philosophy", id: "philosophy" },
+                            { name: "Projects", id: "projects" },
                             { name: "Contact", id: "contact" }
                         ]}
-                        button={{
+                        button={{ text: "Quote", href: "contact" }}
-                            text: "Inquire",
+                        className="bg-background/80 backdrop-blur-md"
-                            href: "contact"
-                        }}
-                        className="text-xs tracking-widest uppercase"
-                        navItemClassName="text-sm font-light tracking-wide"
-                        buttonClassName="px-6 py-2 text-sm tracking-widest uppercase"
                     />
                 </div>
 
                 <div id="hero" data-section="hero">
-                    <HeroSplit
+                    <HeroCarouselLogo
-                        background={{ variant: "plain" }}
+                        logoText="Premium Aluminium Fabrication & Finishing"
-                        title="Timeless Architecture"
+                        description="Mastering the art of powdercoating, anodising, and precision window fabrication. Industrial strength, architectural finesse."
-                        description="We craft spaces that transcend trend, marrying restraint with precision. Each project is a dialogue between site, material, and intention."
+                        buttons={[{ text: "Our Expertise", href: "philosophy" }]}
-                        imagePosition="right"
+                        slides={[
-                        imageSrc="https://img.b2bpic.net/free-photo/minimalist-architectural-building-details_23-2151870844.jpg"
+                            { imageSrc: "https://img.b2bpic.net/free-photo/aluminium-profile-raw-material_23-2148450702.jpg", imageAlt: "Aluminium profiles" },
-                        imageAlt="modern building architecture minimalist interior concrete"
+                            { imageSrc: "https://img.b2bpic.net/free-photo/industrial-metal-workshop_23-2148107055.jpg", imageAlt: "Metal coating workshop" }
-                        buttons={[
-                            { text: "View Work", href: "projects" }
                         ]}
-                        mediaAnimation="slide-up"
+                        className="py-24"
-                        className="py-24 md:py-32"
-                        containerClassName="max-w-7xl"
-                        titleClassName="text-5xl md:text-7xl font-light tracking-tight leading-tight"
-                        descriptionClassName="text-sm md:text-xl font-light leading-relaxed"
-                        buttonClassName="px-8 py-3 text-sm tracking-widest uppercase mt-2"
                     />
                 </div>
 
                 <div id="philosophy" data-section="philosophy">
-                    <TextAbout
+                    <TestimonialAboutCard
-                        title="We believe architecture should speak quietly. Good design requires no explanation—it exists with purpose and restraint, allowing inhabitants to inhabit space without distraction. Our practice centers on understanding context, respecting material honesty, and creating timeless environments."
+                        tag="Quality First"
-                        useInvertedBackground={false}
+                        title="Our Commitment to Excellence"
-                        className="py-32 md:py-48"
+                        description="We specialize in high-end aluminium solutions. From industrial-grade powdercoating to bespoke architectural window fabrication, our processes ensure longevity and aesthetic perfection."
-                        containerClassName="max-w-4xl"
+                        subdescription="ISO-certified quality management ensures consistent finish quality across every batch, large or small."
-                        titleClassName="text-3xl md:text-5xl font-light leading-relaxed text-center"
+                        icon={ShieldCheck}
+                        imageSrc="https://img.b2bpic.net/free-photo/modern-window-construction-details_23-2148143210.jpg"
+                        className="py-32"
+                        useInvertedBackground={true}
                     />
                 </div>
 
                 <div id="projects" data-section="projects">
-                    <FeatureCardSix
+                    <FeatureCardTwentyOne
-                        title="Selected Projects"
+                        title="Integrated Services"
-                        description="Recent work exploring materiality, form, and spatial integrity"
+                        description="End-to-end aluminium solutions designed for the modern built environment."
-                        textboxLayout="default"
+                        tag="Solutions"
-                        useInvertedBackground={true}
+                        accordionItems={[
-                        features={[
+                            { id: "p1", title: "Industrial Powdercoating", content: "Advanced electrostatic coating process for maximum durability and UV resistance in diverse architectural conditions." },
-                            {
+                            { id: "p2", title: "Precision Anodising", content: "Electrochemical process to increase natural oxide layer thickness, providing corrosion resistance and metallic aesthetic." },
-                                title: "Riverside Residence",
+                            { id: "p3", title: "Custom Window Systems", content: "Engineering bespoke window and door fabrication with high-performance thermal insulation and sleek minimalist profiles." }
-                                description: "A private home responding to its landscape. Concrete, glass, and timber create a dialogue between structure and nature. Site-specific design honoring the waterfront context.",
-                                imageSrc: "https://img.b2bpic.net/free-photo/city-building-sky_23-2148107055.jpg"
-                            },
-                            {
-                                title: "Corporate Headquarters",
-                                description: "Minimal office complex emphasizing natural light and material authenticity. Steel structure with stone cladding defines a calm, focused work environment.",
-                                imageSrc: "https://img.b2bpic.net/free-photo/imposing-building-near-smaller-black-building_23-2148252731.jpg"
-                            },
-                            {
-                                title: "Urban Studio",
-                                description: "Adaptive reuse of an industrial warehouse into creative workspace. Careful preservation of existing structure with restrained new interventions.",
-                                imageSrc: "https://img.b2bpic.net/free-photo/concrete-structure-blue-sky_181624-5763.jpg"
-                            },
-                            {
-                                title: "Botanical Pavilion",
-                                description: "Public garden structure exploring sustainable materials and transparent design. Steel framework with living walls creates a permeable space for community gathering.",
-                                imageSrc: "https://img.b2bpic.net/free-photo/white-facade-modern-building_181624-6180.jpg"
-                            }
                         ]}
-                        className="py-32 md:py-48"
+                        imageSrc="https://img.b2bpic.net/free-photo/metal-texture-background_23-2148107055.jpg"
-                        textBoxTitleClassName="text-4xl md:text-6xl font-light tracking-tight"
+                        className="py-32"
-                        textBoxDescriptionClassName="text-base md:text-lg font-light"
+                        useInvertedBackground={false}
-                        cardTitleClassName="text-4xl md:text-5xl font-light tracking-tight mb-4"
-                        cardDescriptionClassName="text-lg md:text-xl font-light leading-relaxed"
-                        stepNumberClassName="mb-4"
                     />
                 </div>
 
                 <div id="metrics" data-section="metrics">
-                    <MetricCardTwo
+                    <MetricCardThree
-                        title="Our Practice"
+                        title="Operational Standards"
-                        description="Metrics that matter to us"
+                        description="Built on precision and reliability."
-                        textboxLayout="default"
-                        useInvertedBackground={false}
-                        gridVariant="uniform-all-items-equal"
                         animationType="slide-up"
                         metrics={[
-                            {
+                            { id: "m1", icon: Wrench, title: "Fabrication Capacity", value: "500+ tons" },
-                                id: "1",
+                            { id: "m2", icon: Square, title: "Window Projects", value: "1200+" },
-                                value: "18+",
+                            { id: "m3", icon: ShieldCheck, title: "Warranty Coverage", value: "20 Yrs" }
-                                description: "Years of Practice"
-                            },
-                            {
-                                id: "2",
-                                value: "120+",
-                                description: "Completed Projects"
-                            },
-                            {
-                                id: "3",
-                                value: "4",
-                                description: "Principal Architects"
-                            },
-                            {
-                                id: "4",
-                                value: "42",
-                                description: "Studio Team Members"
-                            }
                         ]}
-                        className="py-24 md:py-32"
+                        className="py-24"
-                        textBoxTitleClassName="text-4xl md:text-6xl font-light tracking-tight"
+                        textboxLayout="default"
-                        textBoxDescriptionClassName="text-base md:text-lg font-light"
+                        useInvertedBackground={false}
-                        valueClassName="text-9xl md:text-7xl font-light"
-                        metricDescriptionClassName="text-sm md:text-base font-light uppercase tracking-wide"
                     />
                 </div>
 
                 <div id="contact" data-section="contact">
-                    <ContactSplit
+                    <ContactCenter
-                        background={{ variant: "plain" }}
+                        tag="Enquiries"
-                        tag="Get in Touch"
+                        title="Request a Quote"
-                        title="Let's Discuss Your Project"
+                        description="Start your next project with industry-leading aluminium expertise. Our team is ready to review your specifications."
-                        description="We explore commissions where thoughtful design and client vision align. Tell us about your space, your aspirations, your constraints."
+                        background={{ variant: "animated-grid" }}
-                        useInvertedBackground={true}
+                        buttonText="Submit Enquiry"
-                        imageSrc="https://img.b2bpic.net/free-photo/grey-concrete-building-blue-sky_181624-6496.jpg"
+                        className="py-32"
-                        imageAlt="studio workspace architects design drafting collaboration"
+                        useInvertedBackground={false}
-                        mediaPosition="right"
-                        mediaAnimation="slide-up"
-                        inputPlaceholder="your@email.com"
-                        buttonText="Send"
-                        termsText="We respect your inquiry. Connect with us within 48 hours."
-                        className="py-32 md:py-48"
-                        tagClassName="text-sm uppercase tracking-widest"
-                        titleClassName="text-4xl md:text-5xl font-light tracking-tight leading-tight mt-4"
-                        descriptionClassName="text-base md:text-lg font-light leading-relaxed mt-3"
-                        buttonClassName="px-8 py-3 text-sm tracking-widest uppercase"
-                        termsClassName="text-sm font-light mt-4"
                     />
                 </div>
 
                 <div id="footer" data-section="footer">
-                    <FooterBaseReveal
+                    <FooterLogoReveal
-                        logoText="Studio X"
+                        logoText="ALU-TECH Industries"
-                        columns={[
+                        leftLink={{ text: "Privacy Policy", href: "#" }}
-                            {
+                        rightLink={{ text: "Terms of Trade", href: "#" }}
-                                title: "Studio",
+                        className="py-12 bg-card"
-                                items: [
-                                    { label: "About", href: "philosophy" },
-                                    { label: "Work", href: "projects" }
-                                ]
-                            },
-                            {
-                                title: "Connect",
-                                items: [
-                                    { label: "hello@studiox.com", href: "#" },
-                                    { label: "Contact", href: "contact" }
-                                ]
-                            },
-                            {
-                                title: "Practice",
-                                items: [
-                                    { label: "Residential", href: "#" },
-                                    { label: "Commercial", href: "#" },
-                                    { label: "Adaptive Reuse", href: "#" }
-                                ]
-                            }
-                        ]}
-                        copyrightText="© 2025 Studio. Timeless architecture."
-                        className="mt-0"
-                        columnTitleClassName="text-base uppercase tracking-widest font-light mb-0"
-                        columnItemClassName="text-base font-light"
-                        copyrightTextClassName="text-sm font-light"
                     />
                 </div>
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}