Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -3,209 +3,115 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import HeroSplit from "@/components/sections/hero/HeroSplit";
+import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
-import TextAbout from "@/components/sections/about/TextAbout";
+import SplitAbout from "@/components/sections/about/SplitAbout";
-import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
+import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
-import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
+import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
-import ContactSplit from "@/components/sections/contact/ContactSplit";
+import ContactText from "@/components/sections/contact/ContactText";
-import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { Zap, Target } from "lucide-react";
 
-export default function ArchitectureStudioPage() {
+export default function MinimalistArchitectureStudio() {
     return (
         <ThemeProvider
-            defaultButtonVariant="expand-hover"
+            defaultButtonVariant="text-shift"
             defaultTextAnimation="reveal-blur"
             borderRadius="soft"
-            contentWidth="smallMedium"
+            contentWidth="mediumLarge"
-            sizing="largeSizeMediumTitles"
+            sizing="large"
-            background="aurora"
+            background="none"
-            cardStyle="glass-elevated"
+            cardStyle="outline"
-            primaryButtonStyle="double-inset"
+            primaryButtonStyle="flat"
             secondaryButtonStyle="solid"
-            headingFontWeight="bold"
+            headingFontWeight="normal"
         >
             <ReactLenis root>
                 <div id="nav" data-section="nav">
                     <NavbarLayoutFloatingInline
-                        brandName="Studio"
+                        brandName="ARC"
                         navItems={[
-                            { name: "Work", id: "projects" },
+                            { name: "Projects", id: "projects" },
                             { name: "Philosophy", id: "philosophy" },
                             { name: "Contact", id: "contact" }
                         ]}
                         button={{
-                            text: "Inquire",
+                            text: "Enquire",                            href: "#contact"
-                            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
+                    <HeroLogoBillboard
+                        logoText="ARCH"
+                        description="Minimalist architectural practice dedicated to spatial clarity and material honesty."
+                        buttons={[{ text: "View Projects", href: "#projects" }]}
                         background={{ variant: "plain" }}
-                        title="Timeless Architecture"
-                        description="We craft spaces that transcend trend, marrying restraint with precision. Each project is a dialogue between site, material, and intention."
-                        imagePosition="right"
                         imageSrc="https://img.b2bpic.net/free-photo/minimalist-architectural-building-details_23-2151870844.jpg"
-                        imageAlt="modern building architecture minimalist interior concrete"
+                        imageAlt="Architecture detail"
-                        buttons={[
-                            { text: "View Work", href: "projects" }
-                        ]}
-                        mediaAnimation="slide-up"
-                        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
+                    <SplitAbout
-                        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."
+                        title="Our Philosophy"
+                        description="We believe in the power of less. Our work is defined by a commitment to pure geometry, light, and the honest expression of materials. We create environments that serve as a canvas for life, free from unnecessary ornamentation."
+                        textboxLayout="split"
                         useInvertedBackground={false}
-                        className="py-32 md:py-48"
+                        bulletPoints={[
-                        containerClassName="max-w-4xl"
+                            { title: "Spatial Clarity", description: "Designing spaces that breathe." },
-                        titleClassName="text-3xl md:text-5xl font-light leading-relaxed text-center"
+                            { title: "Material Honesty", description: "Celebrating raw, natural textures." }
+                        ]}
+                        imageSrc="https://img.b2bpic.net/free-photo/white-facade-modern-building_181624-6180.jpg"
                     />
                 </div>
 
                 <div id="projects" data-section="projects">
-                    <FeatureCardSix
+                    <FeatureCardOne
-                        title="Selected Projects"
+                        title="Selected Works"
-                        description="Recent work exploring materiality, form, and spatial integrity"
+                        gridVariant="uniform-all-items-equal"
+                        animationType="slide-up"
                         textboxLayout="default"
-                        useInvertedBackground={true}
+                        useInvertedBackground={false}
+                        description="Our featured projects illustrate a commitment to timeless design principles."
                         features={[
-                            {
+                            { title: "Monolithic House", description: "A private residence centered around light and shadow.", imageSrc: "https://img.b2bpic.net/free-photo/city-building-sky_23-2148107055.jpg" },
-                                title: "Riverside Residence",
+                            { title: "Concrete Studio", description: "An adaptive reuse project focusing on spatial flow.", imageSrc: "https://img.b2bpic.net/free-photo/concrete-structure-blue-sky_181624-5763.jpg" }
-                                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"
-                        textBoxTitleClassName="text-4xl md:text-6xl font-light tracking-tight"
-                        textBoxDescriptionClassName="text-base md:text-lg font-light"
-                        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
+                    <MetricCardOne
-                        title="Our Practice"
+                        title="Practice Metrics"
-                        description="Metrics that matter to us"
+                        gridVariant="uniform-all-items-equal"
+                        animationType="blur-reveal"
                         textboxLayout="default"
                         useInvertedBackground={false}
-                        gridVariant="uniform-all-items-equal"
+                        description="Defining our impact in space and design."
-                        animationType="slide-up"
                         metrics={[
-                            {
+                            { id: "1", value: "15+", title: "Years Experience", description: "Refining the art of space.", icon: Zap },
-                                id: "1",
+                            { id: "2", value: "80+", title: "Completed Projects", description: "Defining quiet luxury.", icon: Target }
-                                value: "18+",
-                                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"
-                        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"
                     />
                 </div>
 
                 <div id="contact" data-section="contact">
-                    <ContactSplit
+                    <ContactText
+                        text="The architecture of our collaboration begins here."
                         background={{ variant: "plain" }}
-                        tag="Get in Touch"
+                        useInvertedBackground={false}
-                        title="Let's Discuss Your Project"
+                        buttons={[{ text: "Start a Conversation", href: "mailto:hello@arc.com" }]}
-                        description="We explore commissions where thoughtful design and client vision align. Tell us about your space, your aspirations, your constraints."
-                        useInvertedBackground={true}
-                        imageSrc="https://img.b2bpic.net/free-photo/grey-concrete-building-blue-sky_181624-6496.jpg"
-                        imageAlt="studio workspace architects design drafting collaboration"
-                        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="ARCH"
-                        columns={[
+                        leftLink={{ text: "Privacy", href: "#" }}
-                            {
+                        rightLink={{ text: "© 2025", href: "#" }}
-                                title: "Studio",
-                                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>
     );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
+  --background: #ffffff;
-  --card: #1a1a1a;
+  --card: #f9f9f9;
-  --foreground: #f0f8ffe6;
+  --foreground: #000000;
-  --primary-cta: #cee7ff;
+  --primary-cta: #000000;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #e5e5e5;
   --secondary-cta-text: #f0f8ffe6;
-  --accent: #737373;
+  --accent: #cccccc;
-  --background-accent: #737373;
+  --background-accent: #f4f4f4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);