Update src/app/studio-gallery/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -31,6 +31,7 @@ export default function ArchitectureStudioPage() {
                         navItems={[
                             { name: "Work", id: "projects" },
                             { name: "Philosophy", id: "philosophy" },
+                            { name: "Studio Gallery", id: "/studio-gallery" },
                             { name: "Contact", id: "contact" }
                         ]}
                         button={{
@@ -48,7 +49,7 @@ export default function ArchitectureStudioPage() {
                         title="Crafting Spaces. Inspiring Lives."
                         description="We design and build bespoke architectural and interior solutions, creating timeless spaces that harmonise function, form, and environment."
                         imagePosition="right"
-                        imageSrc="https://img.b2bpic.net/free-photo/minimalist-architectural-building-details_23-2151870844.jpg"
+                        imageSrc="https://img.b2bpic.net/free-photo/minimalist-architectural-building-details_23-2151870844.jpg?_wi=1"
                         imageAlt="modern building architecture minimalist interior concrete"
                         buttons={[
                             { text: "View Work", href: "projects" }
@@ -123,6 +124,9 @@ export default function ArchitectureStudioPage() {
                                 id: "4",                                value: "25",                                description: "Dedicated Professionals"
                             }
                         ]}
+                        buttons={[
+                            { text: "View Studio Images", href: "/studio-gallery" }
+                        ]}
                         className="py-24 md:py-32"
                         textBoxTitleClassName="text-4xl md:text-6xl font-light tracking-tight"
                         textBoxDescriptionClassName="text-base md:text-lg font-light"

src/app/studio-gallery/page.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
+
+export default function StudioGalleryPage() {
+    const navItems = [
+        { name: "Work", id: "projects" },
+        { name: "Philosophy", id: "philosophy" },
+        { name: "Studio Gallery", id: "/studio-gallery" },
+        { name: "Contact", id: "contact" }
+    ];
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="expand-hover"
+            defaultTextAnimation="reveal-blur"
+            borderRadius="soft"
+            contentWidth="smallMedium"
+            sizing="largeSizeMediumTitles"
+            background="noise"
+            cardStyle="solid"
+            primaryButtonStyle="flat"
+            secondaryButtonStyle="solid"
+            headingFontWeight="normal"
+        >
+            <ReactLenis root>
+                <div id="nav" data-section="nav">
+                    <NavbarLayoutFloatingInline
+                        brandName="HPA Design Studio"
+                        navItems={navItems}
+                        button={{
+                            text: "Get in Touch",                            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="studio-gallery-content" data-section="studio-gallery-content">
+                    <FeatureCardSix
+                        title="Our Studio & Spaces"
+                        description="A visual journey through our design philosophy and completed projects, showcasing the harmony of form, function, and environment."
+                        textboxLayout="default"
+                        useInvertedBackground={true}
+                        features={[
+                            {
+                                title: "Design Process",                                description: "Our team collaborates from concept to completion, ensuring every detail aligns with the client's vision and our commitment to excellence.",                                imageSrc: "https://img.b2bpic.net/free-photo/architectural-model-design_23-2150937402.jpg"
+                            },
+                            {
+                                title: "Interior Perspectives",                                description: "Crafting serene and functional interiors that blend natural materials with modern aesthetics, designed for comfort and elegance.",                                imageSrc: "https://img.b2bpic.net/free-photo/minimalist-concrete-interior_23-2148780287.jpg"
+                            },
+                            {
+                                title: "Collaborative Workspaces",                                description: "Our studio promotes creativity and teamwork, with open spaces and natural light fostering innovation and a stimulating environment.",                                imageSrc: "https://img.b2bpic.net/free-photo/modern-office-space_23-2149021480.jpg"
+                            },
+                            {
+                                title: "Materiality & Detail",                                description: "An emphasis on high-quality materials and meticulous detailing defines our architectural approach, creating spaces that are both robust and refined.",                                imageSrc: "https://img.b2bpic.net/free-photo/minimalist-architectural-building-details_23-2151870844.jpg?_wi=2"
+                            }
+                        ]}
+                        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="footer" data-section="footer">
+                    <FooterBaseReveal
+                        logoText="HPA Design Studio"
+                        columns={[
+                            {
+                                title: "Studio",                                items: [
+                                    { label: "About", href: "philosophy" },
+                                    { label: "Work", href: "projects" },
+                                    { label: "Services", href: "#" }
+                                ]
+                            },
+                            {
+                                title: "Connect",                                items: [
+                                    { label: "hello@hpadesign.com", href: "#" },
+                                    { label: "Inquire", href: "contact" }
+                                ]
+                            },
+                            {
+                                title: "Practice",                                items: [
+                                    { label: "Residential", href: "#" },
+                                    { label: "Commercial", href: "#" },
+                                    { label: "Adaptive Reuse", href: "#" }
+                                ]
+                            }
+                        ]}
+                        copyrightText="© 2025 HPA Design Studio. Architect & Interior Design Solutions."
+                        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>
+    );
+}