← back to Homesonspec

Homepage: 3 featured homes on load — Value / Mid-range / Luxury price tiers, real listings with builder photos

ba86ab2a74bac10cf780bcba08af6b72fcf1007f · 2026-07-22 20:10:12 -0700 · Steve

Files touched

• M apps/web/src/app/page.tsx

Diff

commit ba86ab2a74bac10cf780bcba08af6b72fcf1007f
Author: Steve <steve@designerwallcoverings.com>
Date:   Wed Jul 22 20:10:12 2026 -0700

    Homepage: 3 featured homes on load — Value / Mid-range / Luxury price tiers, real listings with builder photos
---
 apps/web/src/app/page.tsx | 58 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index b9129b0..14e5e7d 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -43,6 +43,30 @@ export default async function HomePage() {
     href: `/communities/${c.slug}`,
   }));
 
+  // Three featured homes on load — one value, one mid-range, one luxury — each a
+  // real published listing, preferring ones with builder photos.
+  const featuredSelect = {
+    id: true, street: true, city: true, state: true, price: true,
+    beds: true, bathsTotal: true, sqft: true, images: true,
+    community: { select: { name: true } }, builder: { select: { name: true } },
+  } as const;
+  const featBase = {
+    status: "PUBLISHED" as const,
+    isDemo: false,
+    freshness: { not: "INACTIVE" as const },
+    images: { isEmpty: false },
+  };
+  const [lowHome, midHome, highHome] = await Promise.all([
+    prisma.inventoryHome.findFirst({ where: { ...featBase, price: { gte: 150000, lt: 400000 } }, orderBy: { price: "desc" }, select: featuredSelect }),
+    prisma.inventoryHome.findFirst({ where: { ...featBase, price: { gte: 400000, lt: 650000 } }, orderBy: { price: "asc" }, select: featuredSelect }),
+    prisma.inventoryHome.findFirst({ where: { ...featBase, price: { gte: 750000 } }, orderBy: { price: "desc" }, select: featuredSelect }),
+  ]);
+  const featured = [
+    { tier: "Value", home: lowHome },
+    { tier: "Mid-range", home: midHome },
+    { tier: "Luxury", home: highHome },
+  ].filter((f): f is { tier: string; home: NonNullable<typeof f.home> } => f.home !== null);
+
   return (
     <div>
       <section className="relative overflow-hidden bg-gradient-to-b from-brand-950 via-brand-900 to-brand-800 px-4 py-20 text-white">
@@ -98,6 +122,40 @@ export default async function HomePage() {
         </div>
       </section>
 
+      {featured.length > 0 && (
+        <section className="mx-auto max-w-7xl px-4 py-14" data-testid="featured-homes">
+          <p className="eyebrow">Featured now</p>
+          <h2 className="mt-1 font-display text-2xl font-semibold text-brand-900">Homes at every price</h2>
+          <div className="mt-6 grid gap-5 sm:grid-cols-3">
+            {featured.map(({ tier, home }) => (
+              <Link key={home.id} href={`/homes/${home.id}`} className="card-interactive overflow-hidden">
+                <div className="relative h-44 bg-gradient-to-br from-brand-800 via-brand-700 to-brand-500">
+                  {home.images[0] ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img src={home.images[0]} alt={`${home.community.name} home`} className="absolute inset-0 h-full w-full object-cover" />
+                  ) : null}
+                  <span className="absolute left-3 top-3 inline-flex items-center rounded-full bg-white/95 px-2.5 py-0.5 text-xs font-semibold text-brand-800 shadow-sm">
+                    {tier}
+                  </span>
+                </div>
+                <div className="p-4">
+                  <div className="font-display text-2xl font-semibold text-brand-900">
+                    {home.price === null ? "Price on request" : `$${Number(home.price).toLocaleString()}`}
+                  </div>
+                  <div className="mt-0.5 truncate text-sm text-neutral-600">
+                    {home.street ?? "Address from builder"} · {home.city}, {home.state}
+                  </div>
+                  <div className="mt-1 text-sm text-neutral-500">
+                    {home.beds ?? "—"} bd · {home.bathsTotal?.toString() ?? "—"} ba · {home.sqft?.toLocaleString() ?? "—"} sqft
+                  </div>
+                  <div className="mt-2 text-xs text-neutral-400">{home.builder.name} · {home.community.name}</div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </section>
+      )}
+
       <section className="mx-auto max-w-7xl px-4 py-14">
         <div className="flex items-end justify-between">
           <div>

← 4be9de7 deploy-full.sh: also ship collectors + publisher + schemas s  ·  back to Homesonspec  ·  Featured homes: spread price bands (value ~250-380k / mid ~4 f4b686d →