[object Object]

← back to Homesonspec

web: large mobile-only brand logo leading the homepage hero (TK-11155)

edbd4388aaaa9def65d0de58e46c2a52e5ce9699 · 2026-09-03 15:07:07 -0700 · Steve

Add a transparent-background house-mark SVG (public/logo-mark.svg, brand
navy/orange, distinct from icon.svg's opaque app-icon variant) and render
it large (h-36 w-36, capped at 55vw) with the "Homes on Spec" wordmark
above the existing "Every new home..." headline in the hero. Scoped with
sm:hidden so desktop/tablet layout is unchanged; only mobile viewports get
the large lead logo.

Verified: pnpm --filter @homesonspec/web build succeeds (Next 16 compiles,
typechecks, and generates all routes). Not deployed.

Reversible: git revert this commit.

Files touched

Diff

commit edbd4388aaaa9def65d0de58e46c2a52e5ce9699
Author: Steve <steve@designerwallcoverings.com>
Date:   Thu Sep 3 15:07:07 2026 -0700

    web: large mobile-only brand logo leading the homepage hero (TK-11155)
    
    Add a transparent-background house-mark SVG (public/logo-mark.svg, brand
    navy/orange, distinct from icon.svg's opaque app-icon variant) and render
    it large (h-36 w-36, capped at 55vw) with the "Homes on Spec" wordmark
    above the existing "Every new home..." headline in the hero. Scoped with
    sm:hidden so desktop/tablet layout is unchanged; only mobile viewports get
    the large lead logo.
    
    Verified: pnpm --filter @homesonspec/web build succeeds (Next 16 compiles,
    typechecks, and generates all routes). Not deployed.
    
    Reversible: git revert this commit.
---
 apps/web/public/logo-mark.svg |  8 ++++++++
 apps/web/src/app/page.tsx     | 16 ++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/apps/web/public/logo-mark.svg b/apps/web/public/logo-mark.svg
new file mode 100644
index 00000000..2ea4ecd8
--- /dev/null
+++ b/apps/web/public/logo-mark.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="Homes on Spec">
+  <!-- Transparent-background house mark (brand navy/orange), for use on any
+       colored surface — e.g. the mobile hero on a navy gradient background.
+       Shares the same house geometry as icon.svg (which has its own opaque
+       backing for use as an app/tab icon). -->
+  <path d="M256 108 L412 250 H316 V404 H196 V250 H100 Z" fill="#ffffff"/>
+  <rect x="222" y="300" width="68" height="104" rx="6" fill="#e07b39"/>
+</svg>
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 2981595f..a650a244 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -84,6 +84,22 @@ export default async function HomePage() {
         {/* subtle radial glow behind the headline */}
         <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(60%_50%_at_50%_0%,rgba(244,169,52,0.14),transparent_70%)]" />
         <div className="relative mx-auto max-w-3xl text-center">
+          {/* Mobile-only lead logo: large/full-screen-prominent brand mark ahead of the
+              headline. Hidden at sm+ where the header nav already carries the wordmark
+              and this would just add redundant vertical space to the desktop hero. */}
+          <div className="mb-6 flex flex-col items-center sm:hidden" aria-hidden="false">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src="/logo-mark.svg"
+              alt="Homes on Spec"
+              width={160}
+              height={160}
+              className="h-36 w-36 max-w-[55vw] drop-shadow-[0_4px_18px_rgba(0,0,0,0.25)]"
+            />
+            <p className="mt-3 font-display text-3xl font-semibold tracking-tight text-white">
+              Homes on Spec
+            </p>
+          </div>
           <p className="eyebrow text-accent-300">Verified from the source</p>
           <h1 className="mt-3 font-display text-4xl font-semibold leading-[1.05] tracking-tight sm:text-6xl">
             Every new home.<br className="hidden sm:block" /> Every builder. One search.

← b233a41e web: disable the site-wide InstallPrompt PWA banner (TK-1115  ·  back to Homesonspec  ·  auto-data-snapshot: 2026-09-03T15:45:08 (1 data files) — app 754ecba2 →