Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -6,9 +6,10 @@ import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloating
 import HeroSplit from "@/components/sections/hero/HeroSplit";
 import TextAbout from "@/components/sections/about/TextAbout";
 import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
-import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
-import FooterMedia from "@/components/sections/footer/FooterMedia";
+import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
+import { BarChart3, Users, Building2, Zap } from "lucide-react";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterCard from "@/components/sections/footer/FooterCard";
 
 export default function ArchitectureStudioPage() {
     return (
@@ -34,7 +35,7 @@ export default function ArchitectureStudioPage() {
                             { name: "Start", id: "contact" }
                         ]}
                         button={{
-                            text: "Get Started",                            href: "#contact"
+                            text: "Get Started", href: "#contact"
                         }}
                         className="text-xs tracking-widest uppercase"
                         navItemClassName="text-sm font-light tracking-wide"
@@ -80,16 +81,16 @@ export default function ArchitectureStudioPage() {
                         useInvertedBackground={true}
                         features={[
                             {
-                                title: "Zenith Towers",                                description: "A vertical masterpiece focusing on high-density living without compromising spatial privacy. Features modular living pods.",                                imageSrc: "http://img.b2bpic.net/free-photo/modern-skyscrapers-business-district_23-2148836767.jpg"
+                                title: "Zenith Towers", description: "A vertical masterpiece focusing on high-density living without compromising spatial privacy. Features modular living pods.", imageSrc: "http://img.b2bpic.net/free-photo/modern-skyscrapers-business-district_23-2148836767.jpg"
                             },
                             {
-                                title: "Oceanic Library",                                description: "Designed as a public sanctuary, this structure utilizes translucent panels to dissolve walls into the surrounding nature.",                                imageSrc: "http://img.b2bpic.net/free-photo/hallway-building_23-2149397556.jpg"
+                                title: "Oceanic Library", description: "Designed as a public sanctuary, this structure utilizes translucent panels to dissolve walls into the surrounding nature.", imageSrc: "http://img.b2bpic.net/free-photo/hallway-building_23-2149397556.jpg"
                             },
                             {
-                                title: "Industrial Hub",                                description: "Repurposed factory district now housing a collective creative ecosystem for emerging tech startups and artists.",                                imageSrc: "http://img.b2bpic.net/free-photo/new-business-district-garibaldi_268835-740.jpg"
+                                title: "Industrial Hub", description: "Repurposed factory district now housing a collective creative ecosystem for emerging tech startups and artists.", imageSrc: "http://img.b2bpic.net/free-photo/new-business-district-garibaldi_268835-740.jpg"
                             },
                             {
-                                title: "Highline Bridge",                                description: "Connecting fractured urban segments through seamless, green-integrated pathways that prioritize pedestrian flow.",                                imageSrc: "http://img.b2bpic.net/free-photo/sunset-bridge-road_1321-1655.jpg"
+                                title: "Highline Bridge", description: "Connecting fractured urban segments through seamless, green-integrated pathways that prioritize pedestrian flow.", imageSrc: "http://img.b2bpic.net/free-photo/sunset-bridge-road_1321-1655.jpg"
                             }
                         ]}
                         className="py-32 md:py-48"
@@ -102,57 +103,43 @@ export default function ArchitectureStudioPage() {
                 </div>
 
                 <div id="metrics" data-section="metrics">
-                    <MetricCardTwo
+                    <MetricCardThree
                         title="Tangible Impact"
-                        description="Data behind our structural successes"
+                        description="Performance metrics defining our excellence in the field."
                         textboxLayout="default"
                         useInvertedBackground={false}
-                        gridVariant="uniform-all-items-equal"
                         animationType="slide-up"
                         metrics={[
-                            { id: "1", value: "25", description: "Global Honors" },
-                            { id: "2", value: "150", description: "Units Built" },
-                            { id: "3", value: "12", description: "Partner Cities" },
-                            { id: "4", value: "100%", description: "Sustainable Energy" }
+                            { id: "1", icon: BarChart3, title: "Global Honors", value: "25+" },
+                            { id: "2", icon: Building2, title: "Units Completed", value: "150+" },
+                            { id: "3", icon: Users, title: "Active Cities", value: "12" },
+                            { id: "4", icon: Zap, title: "Net Zero Projects", value: "100%" }
                         ]}
                         className="py-24 md:py-32"
+                        cardClassName="bg-transparent border border-white/10"
                         textBoxTitleClassName="text-4xl md:text-6xl font-light tracking-tight"
-                        textBoxDescriptionClassName="text-base md:text-lg font-light"
-                        valueClassName="text-9xl md:text-7xl font-light"
-                        metricDescriptionClassName="text-sm md:text-base font-light uppercase tracking-wide"
+                        valueClassName="text-4xl font-bold"
+                        metricTitleClassName="text-sm uppercase tracking-wider opacity-70"
                     />
                 </div>
 
                 <div id="contact" data-section="contact">
-                    <ContactCenter
+                    <ContactCTA
                         tag="Collaboration"
                         title="Initiate Your Vision"
                         description="We are currently accepting new commissions that challenge standard conventions. Let us explore the possibilities of your upcoming project."
                         useInvertedBackground={true}
                         background={{ variant: "plain" }}
-                        buttonText="Submit Proposal"
+                        buttons={[{ text: "Submit Proposal", href: "#contact" }]}
                         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"
                     />
                 </div>
 
                 <div id="footer" data-section="footer">
-                    <FooterMedia
+                    <FooterCard
                         logoText="Apex Studio"
-                        imageSrc="http://img.b2bpic.net/free-photo/modern-glass-skyscraper-background-with-sky-clouds-reflection_231208-6848.jpg?_wi=2"
-                        columns={[
-                            { title: "Navigation", items: [{ label: "Philosophy", href: "#philosophy" }, { label: "Portfolio", href: "#projects" }] },
-                            { title: "Direct", items: [{ label: "hello@apex-studio.io", href: "#" }, { label: "Inquire", href: "#contact" }] },
-                            { title: "Expertise", items: [{ label: "Design", href: "#" }, { label: "Consultancy", href: "#" }, { label: "Urbanism", href: "#" }] }
-                        ]}
                         copyrightText="© 2025 Apex Studio. All rights reserved."
-                        className="py-12 bg-neutral-900 text-white"
-                        columnTitleClassName="text-sm uppercase tracking-widest font-semibold mb-4"
-                        columnItemClassName="text-sm font-light hover:underline"
-                        copyrightTextClassName="text-xs font-light text-neutral-400"
+                        className="py-12 bg-white/5"
                     />
                 </div>
             </ReactLenis>