From 533e94352f39c30f4cbbf118709f9c2a7d228213 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Wed, 27 May 2026 11:25:28 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20real=20home=20page=20=E2=80=94=20hero,?=
 =?UTF-8?q?=20studio=20voice,=20project=20teasers,=20CTA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/views/HomeView.vue | 117 +++++++++++++++++++++++++++++++++++++++--
 1 file changed, 112 insertions(+), 5 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index c033735..9038406 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -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>