195 lines
12 KiB
TypeScript
195 lines
12 KiB
TypeScript
"use client";
|
|
|
|
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 TextAbout from "@/components/sections/about/TextAbout";
|
|
import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
|
|
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
|
|
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
|
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
|
|
|
export default function ArchitectureStudioPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSizeMediumTitles"
|
|
background="aurora"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Studio"
|
|
navItems={[
|
|
{ name: "Work", id: "projects" },
|
|
{ name: "Philosophy", id: "philosophy" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Inquire", 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
|
|
background={{ variant: "plain" }}
|
|
title="Timeless Architecture"
|
|
description="Experience living in spaces designed for tranquility and lasting beauty, where intentional design transforms your vision into a timeless environment."
|
|
imagePosition="right"
|
|
imageSrc="https://img.b2bpic.net/free-photo/minimalist-architectural-building-details_23-2151870844.jpg"
|
|
imageAlt="modern building architecture minimalist interior concrete"
|
|
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
|
|
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."
|
|
useInvertedBackground={false}
|
|
className="py-32 md:py-48"
|
|
containerClassName="max-w-4xl"
|
|
titleClassName="text-3xl md:text-5xl font-light leading-relaxed text-center"
|
|
/>
|
|
</div>
|
|
|
|
<div id="projects" data-section="projects">
|
|
<FeatureCardSix
|
|
title="Selected Projects"
|
|
description="Recent work exploring materiality, form, and spatial integrity"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Riverside Residence", 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", buttons: [{ text: "View Project", href: "#project-1" }]
|
|
},
|
|
{
|
|
id: 2,
|
|
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", buttons: [{ text: "View Project", href: "#project-2" }]
|
|
},
|
|
{
|
|
id: 3,
|
|
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", buttons: [{ text: "View Project", href: "#project-3" }]
|
|
},
|
|
{
|
|
id: 4,
|
|
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", buttons: [{ text: "View Project", href: "#project-4" }]
|
|
}
|
|
]}
|
|
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
|
|
title="Our Practice"
|
|
description="Metrics that matter to us"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "1", 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
|
|
background={{ variant: "plain" }}
|
|
tag="Get in Touch"
|
|
title="Let's Discuss Your Project"
|
|
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
|
|
columns={[
|
|
{
|
|
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>
|
|
);
|
|
}
|