Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 1249c975d1 | |||
| 0235cfc744 | |||
| 774d6f91ba | |||
| da0c14d07c |
@@ -6,23 +6,22 @@ import "@/lib/gsap-setup";
|
|||||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||||
import Tag from "@/tag/Tag";
|
import Tag from "@/tag/Tag";
|
||||||
import { getVisualEditScript } from "@/utils/visual-edit-script";
|
import { getVisualEditScript } from "@/utils/visual-edit-script";
|
||||||
|
import { Mulish } from "next/font/google";
|
||||||
|
|
||||||
const halant = Halant({
|
|
||||||
variable: "--font-halant",
|
|
||||||
subsets: ["latin"],
|
|
||||||
weight: ["300", "400", "500", "600", "700"],
|
|
||||||
});
|
|
||||||
|
|
||||||
const inter = Inter({
|
|
||||||
variable: "--font-inter",
|
|
||||||
subsets: ["latin"],
|
|
||||||
});
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: 'Aura Architects | Minimalist Design Studio',
|
title: 'HPA Design Studio | Architect & Interior Design Solutions',
|
||||||
description: 'Crafting elegant, minimalist architectural designs for modern living. Explore our portfolio of innovative and sustainable spaces.',
|
description: 'HPA Design Studio offers minimalist architectural and interior design solutions. We craft spaces that are timeless, functional, and aesthetically serene.',
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const mulish = Mulish({
|
||||||
|
variable: "--font-mulish", subsets: ["latin"],
|
||||||
|
});
|
||||||
|
const inter = Inter({
|
||||||
|
variable: "--font-inter", subsets: ["latin"],
|
||||||
|
});
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
}: Readonly<{
|
}: Readonly<{
|
||||||
@@ -31,9 +30,7 @@ export default function RootLayout({
|
|||||||
return (
|
return (
|
||||||
<html lang="en" suppressHydrationWarning>
|
<html lang="en" suppressHydrationWarning>
|
||||||
<ServiceWrapper>
|
<ServiceWrapper>
|
||||||
<body
|
<body className={`${mulish.variable} ${inter.variable} antialiased`}>
|
||||||
className={`${halant.variable} ${inter.variable} antialiased`}
|
|
||||||
>
|
|
||||||
<Tag />
|
<Tag />
|
||||||
{children}
|
{children}
|
||||||
<script
|
<script
|
||||||
|
|||||||
@@ -18,24 +18,23 @@ export default function ArchitectureStudioPage() {
|
|||||||
borderRadius="soft"
|
borderRadius="soft"
|
||||||
contentWidth="smallMedium"
|
contentWidth="smallMedium"
|
||||||
sizing="largeSizeMediumTitles"
|
sizing="largeSizeMediumTitles"
|
||||||
background="aurora"
|
background="noise"
|
||||||
cardStyle="glass-elevated"
|
cardStyle="solid"
|
||||||
primaryButtonStyle="double-inset"
|
primaryButtonStyle="flat"
|
||||||
secondaryButtonStyle="solid"
|
secondaryButtonStyle="solid"
|
||||||
headingFontWeight="bold"
|
headingFontWeight="normal"
|
||||||
>
|
>
|
||||||
<ReactLenis root>
|
<ReactLenis root>
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarLayoutFloatingInline
|
<NavbarLayoutFloatingInline
|
||||||
brandName="Studio"
|
brandName="HPA Design Studio"
|
||||||
navItems={[
|
navItems={[
|
||||||
{ name: "Work", id: "projects" },
|
{ name: "Work", id: "projects" },
|
||||||
{ name: "Philosophy", id: "philosophy" },
|
{ name: "Philosophy", id: "philosophy" },
|
||||||
{ name: "Contact", id: "contact" }
|
{ name: "Contact", id: "contact" }
|
||||||
]}
|
]}
|
||||||
button={{
|
button={{
|
||||||
text: "Inquire",
|
text: "Get in Touch", href: "contact"
|
||||||
href: "contact"
|
|
||||||
}}
|
}}
|
||||||
className="text-xs tracking-widest uppercase"
|
className="text-xs tracking-widest uppercase"
|
||||||
navItemClassName="text-sm font-light tracking-wide"
|
navItemClassName="text-sm font-light tracking-wide"
|
||||||
@@ -46,8 +45,8 @@ export default function ArchitectureStudioPage() {
|
|||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroSplit
|
<HeroSplit
|
||||||
background={{ variant: "plain" }}
|
background={{ variant: "plain" }}
|
||||||
title="Timeless Architecture"
|
title="Crafting Spaces. Inspiring Lives."
|
||||||
description="We craft spaces that transcend trend, marrying restraint with precision. Each project is a dialogue between site, material, and intention."
|
description="We design and build bespoke architectural and interior solutions, creating timeless spaces that harmonise function, form, and environment."
|
||||||
imagePosition="right"
|
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"
|
||||||
imageAlt="modern building architecture minimalist interior concrete"
|
imageAlt="modern building architecture minimalist interior concrete"
|
||||||
@@ -65,7 +64,7 @@ export default function ArchitectureStudioPage() {
|
|||||||
|
|
||||||
<div id="philosophy" data-section="philosophy">
|
<div id="philosophy" data-section="philosophy">
|
||||||
<TextAbout
|
<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."
|
title="At HPA Design Studio, our philosophy is rooted in clarity, functionality, and enduring beauty. We believe in design that transcends fleeting trends, creating environments that are both serene and purposeful. Our approach is a thoughtful integration of site, client vision, and sustainable practices, resulting in spaces that enrich lives and stand the test of time."
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
className="py-32 md:py-48"
|
className="py-32 md:py-48"
|
||||||
containerClassName="max-w-4xl"
|
containerClassName="max-w-4xl"
|
||||||
@@ -75,30 +74,22 @@ export default function ArchitectureStudioPage() {
|
|||||||
|
|
||||||
<div id="projects" data-section="projects">
|
<div id="projects" data-section="projects">
|
||||||
<FeatureCardSix
|
<FeatureCardSix
|
||||||
title="Selected Projects"
|
title="Our Portfolio"
|
||||||
description="Recent work exploring materiality, form, and spatial integrity"
|
description="Thoughtful solutions for contemporary living and working."
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
features={[
|
features={[
|
||||||
{
|
{
|
||||||
title: "Riverside Residence",
|
title: "Riverside Residence", description: "Modern riverfront dwelling, designed to merge seamlessly with the natural landscape. Features open-plan living, expansive glass, and a material palette of concrete, wood, and steel.", imageSrc: "https://img.b2bpic.net/free-photo/modern-architecture-exterior_23-2151126131.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",
|
title: "Corporate Headquarters", description: "Sustainable and elegant corporate campus. Focus on natural light, biophilic design, and flexible workspaces, fostering productivity and well-being.", imageSrc: "https://img.b2bpic.net/free-photo/building-abstract_23-2148107053.jpg"
|
||||||
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",
|
title: "Urban Studio", description: "Adaptive reuse project transforming an industrial space into a vibrant creative hub. Respects original structure while introducing contemporary design elements.", imageSrc: "https://img.b2bpic.net/free-photo/concrete-structure-blue-sky_181624-5763.jpg"
|
||||||
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",
|
title: "Botanical Pavilion", description: "Innovative public pavilion within a botanical garden. Lightweight structure with translucent materials, creating an ethereal experience amidst nature.", imageSrc: "https://img.b2bpic.net/free-photo/white-facade-modern-building_181624-6180.jpg"
|
||||||
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"
|
className="py-32 md:py-48"
|
||||||
@@ -112,32 +103,24 @@ export default function ArchitectureStudioPage() {
|
|||||||
|
|
||||||
<div id="metrics" data-section="metrics">
|
<div id="metrics" data-section="metrics">
|
||||||
<MetricCardTwo
|
<MetricCardTwo
|
||||||
title="Our Practice"
|
title="Studio at a Glance"
|
||||||
description="Metrics that matter to us"
|
description="Our commitment to excellence and innovation."
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
gridVariant="uniform-all-items-equal"
|
gridVariant="uniform-all-items-equal"
|
||||||
animationType="slide-up"
|
animationType="slide-up"
|
||||||
metrics={[
|
metrics={[
|
||||||
{
|
{
|
||||||
id: "1",
|
id: "1", value: "18+", description: "Years of Experience"
|
||||||
value: "18+",
|
|
||||||
description: "Years of Practice"
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "2",
|
id: "2", value: "120+", description: "Completed Projects"
|
||||||
value: "120+",
|
|
||||||
description: "Completed Projects"
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "3",
|
id: "3", value: "3", description: "Principal Architects"
|
||||||
value: "4",
|
|
||||||
description: "Principal Architects"
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "4",
|
id: "4", value: "25", description: "Dedicated Professionals"
|
||||||
value: "42",
|
|
||||||
description: "Studio Team Members"
|
|
||||||
}
|
}
|
||||||
]}
|
]}
|
||||||
className="py-24 md:py-32"
|
className="py-24 md:py-32"
|
||||||
@@ -151,9 +134,9 @@ export default function ArchitectureStudioPage() {
|
|||||||
<div id="contact" data-section="contact">
|
<div id="contact" data-section="contact">
|
||||||
<ContactSplit
|
<ContactSplit
|
||||||
background={{ variant: "plain" }}
|
background={{ variant: "plain" }}
|
||||||
tag="Get in Touch"
|
tag="Connect with Us"
|
||||||
title="Let's Discuss Your Project"
|
title="Your Vision, Our Expertise"
|
||||||
description="We explore commissions where thoughtful design and client vision align. Tell us about your space, your aspirations, your constraints."
|
description="Ready to transform your ideas into exceptional spaces? Let's begin a conversation about your next architectural or interior design project."
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
imageSrc="https://img.b2bpic.net/free-photo/grey-concrete-building-blue-sky_181624-6496.jpg"
|
imageSrc="https://img.b2bpic.net/free-photo/grey-concrete-building-blue-sky_181624-6496.jpg"
|
||||||
imageAlt="studio workspace architects design drafting collaboration"
|
imageAlt="studio workspace architects design drafting collaboration"
|
||||||
@@ -161,7 +144,7 @@ export default function ArchitectureStudioPage() {
|
|||||||
mediaAnimation="slide-up"
|
mediaAnimation="slide-up"
|
||||||
inputPlaceholder="your@email.com"
|
inputPlaceholder="your@email.com"
|
||||||
buttonText="Send"
|
buttonText="Send"
|
||||||
termsText="We respect your inquiry. Connect with us within 48 hours."
|
termsText="We look forward to connecting and discussing your project within 48 hours."
|
||||||
className="py-32 md:py-48"
|
className="py-32 md:py-48"
|
||||||
tagClassName="text-sm uppercase tracking-widest"
|
tagClassName="text-sm uppercase tracking-widest"
|
||||||
titleClassName="text-4xl md:text-5xl font-light tracking-tight leading-tight mt-4"
|
titleClassName="text-4xl md:text-5xl font-light tracking-tight leading-tight mt-4"
|
||||||
@@ -173,32 +156,30 @@ export default function ArchitectureStudioPage() {
|
|||||||
|
|
||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
<FooterBaseReveal
|
<FooterBaseReveal
|
||||||
logoText="Studio X"
|
logoText="HPA Design Studio"
|
||||||
columns={[
|
columns={[
|
||||||
{
|
{
|
||||||
title: "Studio",
|
title: "Studio", items: [
|
||||||
items: [
|
|
||||||
{ label: "About", href: "philosophy" },
|
{ label: "About", href: "philosophy" },
|
||||||
{ label: "Work", href: "projects" }
|
{ label: "Work", href: "projects" },
|
||||||
|
{ label: "Services", href: "#" }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Connect",
|
title: "Connect", items: [
|
||||||
items: [
|
{ label: "hello@hpadesign.com", href: "#" },
|
||||||
{ label: "hello@studiox.com", href: "#" },
|
{ label: "Inquire", href: "contact" }
|
||||||
{ label: "Contact", href: "contact" }
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Practice",
|
title: "Practice", items: [
|
||||||
items: [
|
|
||||||
{ label: "Residential", href: "#" },
|
{ label: "Residential", href: "#" },
|
||||||
{ label: "Commercial", href: "#" },
|
{ label: "Commercial", href: "#" },
|
||||||
{ label: "Adaptive Reuse", href: "#" }
|
{ label: "Adaptive Reuse", href: "#" }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]}
|
]}
|
||||||
copyrightText="© 2025 Studio. Timeless architecture."
|
copyrightText="© 2025 HPA Design Studio. Architect & Interior Design Solutions."
|
||||||
className="mt-0"
|
className="mt-0"
|
||||||
columnTitleClassName="text-base uppercase tracking-widest font-light mb-0"
|
columnTitleClassName="text-base uppercase tracking-widest font-light mb-0"
|
||||||
columnItemClassName="text-base font-light"
|
columnItemClassName="text-base font-light"
|
||||||
@@ -208,4 +189,4 @@ export default function ArchitectureStudioPage() {
|
|||||||
</ReactLenis>
|
</ReactLenis>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -11,7 +11,7 @@ html {
|
|||||||
body {
|
body {
|
||||||
background-color: var(--background);
|
background-color: var(--background);
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
font-family: var(--font-inter-tight), sans-serif;
|
font-family: var(--font-inter), sans-serif;
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
overscroll-behavior: none;
|
overscroll-behavior: none;
|
||||||
@@ -24,5 +24,5 @@ h3,
|
|||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
font-family: var(--font-inter-tight), sans-serif;
|
font-family: var(--font-mulish), sans-serif;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,15 +10,15 @@
|
|||||||
--accent: #ffffff;
|
--accent: #ffffff;
|
||||||
--background-accent: #ffffff; */
|
--background-accent: #ffffff; */
|
||||||
|
|
||||||
--background: #f5f4f0;
|
--background: #f5f5f5;
|
||||||
--card: #ffffff;
|
--card: #ffffff;
|
||||||
--foreground: #1a1a1a;
|
--foreground: #1c1c1c;
|
||||||
--primary-cta: #2c2c2c;
|
--primary-cta: #1f3251;
|
||||||
--primary-cta-text: #f5f4f0;
|
--primary-cta-text: #f5f5f5;
|
||||||
--secondary-cta: #f5f4f0;
|
--secondary-cta: #ffffff;
|
||||||
--secondary-cta-text: #1a1a1a;
|
--secondary-cta-text: #1c1c1c;
|
||||||
--accent: #8a8a8a;
|
--accent: #15479c;
|
||||||
--background-accent: #e8e6e1;
|
--background-accent: #a8cce8;
|
||||||
|
|
||||||
/* text sizing - set by ThemeProvider */
|
/* text sizing - set by ThemeProvider */
|
||||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||||
|
|||||||
Reference in New Issue
Block a user