padreug/nr-interior-design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: real home page — hero, studio voice, project teasers, CTA

Browse source 
Five-section composition that lets the visitor judge the studio in
under one screen plus one scroll: full-bleed living-room hero with
the brand line in Fraunces overlay, a centered Studio paragraph
that picks the brief's own words ("oversized windows … warm woods …
matte black accents … refined but deeply human"), a two-up Selected
work grid linking to Boulder and Asheville, and a closing CTA.

The hero leans on Boulder 08 (mid-century living room with emerald
tile) — it reads as restorative and inviting, the right note for an
above-the-fold image; the Asheville moodiness comes through on the
project teaser card immediately below.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Padreug 2026-05-27 11:25:28 +02:00
commit 533e94352f
1 changed files with 112 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

117
src/views/HomeView.vue
View file

@ -1,8 +1,115 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import { RouterLink } from 'vue-router'
import { AspectRatio } from '@/components/ui/aspect-ratio'
import { Button } from '@/components/ui/button'
import { projects } from '@/data/projects'
</script>
<template>
<main class="mx-auto max-w-2xl space-y-6 p-8">
<h1 class="text-3xl font-bold">Earth Walker Design</h1>
<p class="text-muted-foreground">Home view — content arriving in a later commit.</p>
</main>
<div class="bg-background">
<!-- Hero -->
<section class="relative -mt-16 overflow-hidden">
<img
src="/images/boulder/08.jpg"
alt="Living room with mid-century sofa and emerald tile fireplace surround"
class="h-screen min-h-[640px] w-full object-cover"
/>
<div
class="absolute inset-0 bg-gradient-to-b from-black/15 via-transparent to-black/45"
></div>
<div
class="absolute right-0 bottom-14 left-0 mx-auto max-w-[1400px] px-6 text-white md:bottom-20 md:px-10"
>
<p class="text-xs uppercase tracking-[0.22em] text-white/80">
Earth Walker Design
</p>
<h1
class="mt-4 max-w-3xl font-serif text-4xl font-light leading-[1.05] tracking-tight md:text-6xl lg:text-7xl"
>
Grounded, architectural,<br />
restorative interiors.
</h1>
</div>
</section>
<!-- Philosophy -->
<section class="px-6 py-24 md:py-32">
<div class="mx-auto max-w-3xl text-center">
<p class="eyebrow">Studio</p>
<p
class="text-foreground/80 mt-6 font-serif text-2xl font-light leading-relaxed md:text-3xl"
>
A balance of minimalism and soul. Oversized windows and natural light.
Warm woods, matte black accents, layered textures. Refined, but deeply
human.
</p>
<p class="text-muted-foreground mt-8 text-base md:text-lg">
The studio works closely with a small number of homes each year, slowly
and intentionally — letting the architecture, the light, and the people
who live there set the brief.
</p>
</div>
</section>
<!-- Projects teaser -->
<section class="border-border/60 border-t px-6 py-20 md:px-10 md:py-28">
<div class="mx-auto max-w-[1400px]">
<div class="flex items-baseline justify-between">
<div>
<p class="eyebrow">Selected work</p>
<h2
class="mt-3 font-serif text-3xl font-light tracking-tight md:text-5xl"
>
Two homes, one sensibility.
</h2>
</div>
<RouterLink
to="/portfolio"
class="text-foreground/70 hover:text-foreground hidden text-xs uppercase tracking-[0.22em] transition-colors md:inline-flex"
>
View all
</RouterLink>
</div>
<div class="mt-12 grid gap-10 md:grid-cols-2 md:gap-14">
<RouterLink
v-for="project in projects"
:key="project.slug"
:to="`/portfolio/${project.slug}`"
class="group block"
>
<AspectRatio :ratio="4 / 5" class="overflow-hidden bg-muted">
<img
:src="project.cover"
:alt="project.coverAlt"
loading="lazy"
decoding="async"
class="h-full w-full object-cover transition-transform duration-[900ms] ease-out group-hover:scale-[1.03]"
/>
</AspectRatio>
<div class="mt-5 flex items-baseline justify-between">
<h3 class="font-serif text-2xl font-light tracking-tight md:text-3xl">
{{ project.name }}
</h3>
<p class="eyebrow">{{ project.eyebrow }}</p>
</div>
</RouterLink>
</div>
</div>
</section>
<!-- Closing CTA -->
<section class="border-border/60 border-t px-6 py-24 text-center md:py-32 md:px-10">
<p class="eyebrow">Inquiries</p>
<h2 class="mx-auto mt-4 max-w-2xl font-serif text-3xl font-light md:text-5xl">
A small studio, available by appointment.
</h2>
<p class="text-muted-foreground mx-auto mt-6 max-w-prose">
Send a few notes about your home and the feeling you're hoping for.
</p>
<Button as-child class="mt-10">
<RouterLink to="/contact">Begin a conversation</RouterLink>
</Button>
</section>
</div>
</template>