@pylonsync/create-pylon 0.11.1 → 0.11.3

package/templates/local-service/app/(marketing)/page.tsx

@@ -1,13 +1,6 @@
 import React from "react";
 import { type Metadata } from "@pylonsync/react";
-import {
-  WRAP,
-  Eyebrow,
-  Divider,
-  SectionHead,
-  ImagePlaceholder,
-  LiveBadge,
-} from "@/components/marketing";
+import { WRAP, Divider, ImagePlaceholder, LiveBadge } from "@/components/marketing";
 import { BookingWidget } from "./booking-widget";
 import { siteConfig } from "@/lib/site.config";
 
@@ -21,10 +14,13 @@ export const metadata: Metadata = {
   },
 };
 
-// `app/(marketing)/page.tsx` → `/` (the group segment adds no URL prefix). Server-rendered single-page site for an appointment
-// business. Hero, services, reviews, location, and FAQ are static server HTML
-// (SEO + first paint); the booking section (#book) is a client island
-// (<BookingWidget>) with live slot availability. All copy comes from siteConfig.
+// `app/(marketing)/page.tsx` → `/` (the group segment adds no URL prefix).
+// Server-rendered single-page site for an appointment business, laid out like
+// a barbershop poster: cream page, condensed uppercase display type, full-width
+// rules between sections. Hero, price list, reviews, location, and FAQ are
+// static server HTML (SEO + first paint); the booking section (#book) is a
+// client island (<BookingWidget>) with live slot availability. All copy comes
+// from siteConfig.
 //
 // Does not read `auth`, so the public page stays cacheable; the nav's signed-in
 // state is resolved in the layout.
@@ -32,45 +28,42 @@ export default function LandingPage() {
   const { hero, services, booking, reviews, location, faq } = siteConfig;
 
   return (
-    <div className="bg-white text-zinc-900">
+    <div className="bg-cream text-ink">
       {/* ============================= HERO ============================= */}
-      <section className={`${WRAP} pt-16 pb-14 sm:pt-20`}>
-        <div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-14">
-          <div>
-            <p className="font-mono text-[11px] uppercase tracking-[0.16em] text-brand">
-              {hero.tagline}
-            </p>
-            <h1 className="mt-4 text-balance text-[2.5rem] font-semibold leading-[1.04] tracking-[-0.02em] sm:text-[3.25rem]">
-              {hero.headline}
-            </h1>
-            <p className="mt-5 max-w-xl text-[17px] leading-relaxed text-zinc-500">
-              {hero.subcopy}
-            </p>
-            <div className="mt-7 flex flex-wrap items-center gap-4">
-              <a
-                href="#book"
-                className="inline-flex items-center rounded-full bg-brand px-5 py-2.5 text-sm font-medium text-white transition-opacity hover:opacity-90"
-              >
-                {hero.ctaLabel}
-              </a>
-              <a href="#services" className="text-sm font-medium text-zinc-700 hover:text-zinc-900">
-                See the menu →
-              </a>
+      <section className={`${WRAP} pt-10 pb-12 sm:pt-14`}>
+        <h1 className="font-display text-balance text-[4.25rem] leading-[0.9] tracking-[0.005em] sm:text-[7rem] lg:text-[9.5rem]">
+          {hero.headline}
+        </h1>
+
+        <div className="mt-8 grid gap-8 lg:mt-10 lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)] lg:gap-12">
+          <div className="flex flex-col justify-between gap-8">
+            <p className="max-w-xl text-[17px] leading-relaxed sm:text-[19px]">{hero.subcopy}</p>
+            <div>
+              <div className="flex flex-wrap items-center gap-4">
+                <a
+                  href="#book"
+                  className="inline-flex h-12 items-center bg-brand px-7 font-display text-[22px] tracking-[0.04em] text-cream transition-opacity hover:opacity-90"
+                >
+                  {hero.ctaLabel}
+                </a>
+                <a
+                  href="#services"
+                  className="font-display text-[22px] tracking-[0.04em] underline decoration-1 underline-offset-[6px] hover:text-brand"
+                >
+                  See the prices
+                </a>
+              </div>
+              <dl className="mt-10 grid grid-cols-3 gap-4 border-t border-ink pt-5">
+                <QuickFact label="Hours" value={hero.quickFacts.hours} />
+                <QuickFact label="Area" value={hero.quickFacts.area} />
+                <QuickFact label="Call" value={hero.quickFacts.phone} />
+              </dl>
             </div>
-            <dl className="mt-10 grid max-w-lg grid-cols-3 gap-4 border-t border-zinc-200/70 pt-6">
-              <QuickFact label="Hours" value={hero.quickFacts.hours} />
-              <QuickFact label="Area" value={hero.quickFacts.area} />
-              <QuickFact label="Call" value={hero.quickFacts.phone} />
-            </dl>
           </div>
 
-          {/* Hero photo — replace the placeholder with a real shot of your shop. */}
-          <div className="relative mx-auto w-full max-w-sm lg:max-w-none">
-            <ImagePlaceholder
-              shape="portrait"
-              title="A photo of your shop"
-              hint="Swap for an <img> in app/(marketing)/page.tsx"
-            />
+          {/* Hero photo. Swap public/images/hero.jpg for a shot of your shop. */}
+          <div className="relative w-full">
+            <ImagePlaceholder shape="portrait" title="The shop" src="/images/hero.jpg" />
             <div className="absolute left-4 top-4">
               <LiveBadge>Availability updates live</LiveBadge>
             </div>
@@ -80,114 +73,130 @@ export default function LandingPage() {
 
       {/* =========================== SERVICES ========================== */}
       <Divider />
-      <section id="services" className={`${WRAP} py-14`}>
-        <SectionHead eyebrow={services.eyebrow} title={services.headline} />
-        <div className="mt-8 grid gap-4 sm:grid-cols-2">
+      <section id="services" className={`${WRAP} py-12`}>
+        <h2 className="font-display text-[3rem] leading-none sm:text-[4rem]">{services.headline}</h2>
+        <ol className="mt-8 border-t border-ink">
           {services.items.map((s) => (
-            <div
-              key={s.slug}
-              className="flex items-start justify-between gap-4 rounded-xl border border-zinc-200 bg-paper p-5"
-            >
-              <div>
-                <h3 className="text-[15px] font-semibold text-zinc-900">{s.name}</h3>
-                {s.description ? (
-                  <p className="mt-1.5 text-[13.5px] leading-relaxed text-zinc-500">
-                    {s.description}
-                  </p>
-                ) : null}
-                <p className="mt-2 text-[12px] uppercase tracking-wide text-zinc-400">
+            <li key={s.slug} className="border-b border-ink py-5">
+              <div className="flex items-baseline gap-4">
+                <h3 className="shrink-0 font-display text-[2rem] leading-none sm:text-[2.5rem]">
+                  {s.name}
+                </h3>
+                <span className="hidden shrink-0 text-[13px] text-ink/60 sm:inline">
                   {s.durationMin} min
-                </p>
+                </span>
+                <span
+                  aria-hidden
+                  className="mb-[0.35em] min-w-6 flex-1 border-b border-dotted border-ink/60"
+                />
+                <span className="shrink-0 font-display text-[2rem] leading-none text-brand sm:text-[2.5rem]">
+                  {s.price}
+                </span>
               </div>
-              <div className="shrink-0 text-[15px] font-semibold text-brand">{s.price}</div>
-            </div>
+              {s.description ? (
+                <p className="mt-2 max-w-xl text-[14px] leading-relaxed text-ink/70">
+                  <span className="sm:hidden">{s.durationMin} min. </span>
+                  {s.description}
+                </p>
+              ) : null}
+            </li>
           ))}
-        </div>
+        </ol>
       </section>
 
       {/* ============================ BOOKING ========================== */}
       {booking.enabled ? (
-        <>
-          <Divider />
-          <section id="book" className={`${WRAP} py-14`}>
-            <SectionHead
-              eyebrow={booking.eyebrow}
-              title={booking.headline}
-              body={booking.subcopy}
-            />
-            <div className="mt-8">
+        <section id="book" className="bg-ink text-cream">
+          <div className={`${WRAP} py-14`}>
+            <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] lg:gap-12">
+              <div>
+                <h2 className="font-display text-[3rem] leading-none sm:text-[4rem]">
+                  {booking.headline}
+                </h2>
+                <p className="mt-5 max-w-sm text-[15px] leading-relaxed text-cream/75">
+                  {booking.subcopy}
+                </p>
+                <p className="mt-6 text-[13px] text-cream/60">
+                  Or call{" "}
+                  <a href={`tel:${location.phone}`} className="text-cream underline underline-offset-4">
+                    {location.phone}
+                  </a>
+                </p>
+              </div>
               <BookingWidget />
             </div>
-          </section>
-        </>
+          </div>
+        </section>
       ) : null}
 
       {/* ============================ REVIEWS ========================== */}
       {reviews && reviews.items.length > 0 ? (
-        <>
-          <Divider />
-          <section className={`${WRAP} py-14`}>
-            <SectionHead eyebrow={reviews.eyebrow} title={reviews.headline} />
-            <div className="mt-8 grid gap-5 sm:grid-cols-3">
-              {reviews.items.map((r) => (
-                <figure
-                  key={r.name}
-                  className="flex flex-col rounded-2xl border border-zinc-200 bg-paper p-6"
-                >
+        <section className={`${WRAP} py-12`}>
+          <h2 className="font-display text-[3rem] leading-none sm:text-[4rem]">{reviews.headline}</h2>
+          <div className="mt-8 grid gap-10 border-t border-ink pt-8 md:grid-cols-3 md:gap-8">
+            {reviews.items.map((r) => (
+              <figure key={r.name}>
+                <blockquote className="font-display text-balance text-[1.75rem] leading-[1.05] sm:text-[2rem]">
+                  &ldquo;{r.quote}&rdquo;
+                </blockquote>
+                <figcaption className="mt-4 text-[13px] text-ink/70">
+                  {r.name}
                   {r.rating ? (
-                    <div className="text-[13px] tracking-wide text-brand">
-                      {"★".repeat(r.rating)}
-                      <span className="text-zinc-200">{"★".repeat(5 - r.rating)}</span>
-                    </div>
+                    <span className="ml-2 text-brand" aria-label={`${r.rating} out of 5`}>
+                      {r.rating}/5
+                    </span>
                   ) : null}
-                  <blockquote className="mt-3 text-[14px] leading-relaxed text-zinc-600">
-                    &ldquo;{r.quote}&rdquo;
-                  </blockquote>
-                  <figcaption className="mt-4 text-[13px] font-semibold text-zinc-900">
-                    {r.name}
-                  </figcaption>
-                </figure>
-              ))}
-            </div>
-          </section>
-        </>
+                </figcaption>
+              </figure>
+            ))}
+          </div>
+        </section>
       ) : null}
 
       {/* =========================== LOCATION ========================== */}
       <Divider />
-      <section className={`${WRAP} py-14`}>
-        <div className="grid gap-8 lg:grid-cols-[1fr_1fr]">
+      <section id="visit" className={`${WRAP} py-12`}>
+        <div className="grid gap-8 lg:grid-cols-2 lg:gap-12">
           <div>
-            <SectionHead eyebrow={location.eyebrow} title={location.headline} />
-            <div className="mt-6 space-y-3 text-[14px] leading-relaxed text-zinc-600">
-              <p>{location.address}</p>
-              <p className="text-zinc-500">{location.hoursText}</p>
-              <p>
-                <a href={`tel:${location.phone}`} className="font-medium text-brand">
-                  {location.phone}
-                </a>{" "}
-                ·{" "}
-                <a href={`mailto:${location.email}`} className="text-zinc-600 hover:text-zinc-900">
-                  {location.email}
-                </a>
-              </p>
-              <a
-                href="#book"
-                className="mt-2 inline-flex items-center rounded-full bg-zinc-900 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-zinc-700"
-              >
-                {siteConfig.hero.ctaLabel}
-              </a>
-            </div>
+            <h2 className="font-display text-[3rem] leading-none sm:text-[4rem]">{location.headline}</h2>
+            <dl className="mt-6 grid gap-5 text-[15px] leading-relaxed">
+              <div>
+                <dt className="text-[11px] font-medium uppercase tracking-wide text-ink/60">Address</dt>
+                <dd className="mt-1">{location.address}</dd>
+              </div>
+              <div>
+                <dt className="text-[11px] font-medium uppercase tracking-wide text-ink/60">Hours</dt>
+                <dd className="mt-1">{location.hoursText}</dd>
+              </div>
+              <div>
+                <dt className="text-[11px] font-medium uppercase tracking-wide text-ink/60">Contact</dt>
+                <dd className="mt-1">
+                  <a href={`tel:${location.phone}`} className="text-brand">
+                    {location.phone}
+                  </a>{" "}
+                  ·{" "}
+                  <a href={`mailto:${location.email}`} className="underline underline-offset-4">
+                    {location.email}
+                  </a>
+                </dd>
+              </div>
+            </dl>
+            <a
+              href="#book"
+              className="mt-8 inline-flex h-12 items-center bg-ink px-7 font-display text-[22px] tracking-[0.04em] text-cream transition-opacity hover:opacity-90"
+            >
+              {hero.ctaLabel}
+            </a>
           </div>
           {location.mapEmbedUrl ? (
             <iframe
               title="Map"
               src={location.mapEmbedUrl}
-              className="h-64 w-full rounded-2xl border border-zinc-200"
+              className="h-72 w-full border border-ink"
               loading="lazy"
             />
           ) : (
-            <div className="grid h-64 place-items-center rounded-2xl border border-zinc-200 bg-paper text-sm text-zinc-400">
+            <div className="grid h-72 place-items-center border border-ink bg-paper text-sm text-ink/60">
               Drop a Google Maps embed URL in <code className="mx-1">location.mapEmbedUrl</code>
             </div>
           )}
@@ -198,21 +207,18 @@ export default function LandingPage() {
       {faq && faq.items.length > 0 ? (
         <>
           <Divider />
-          <section className={`${WRAP} py-14`}>
-            <Eyebrow>{faq.eyebrow}</Eyebrow>
-            <h2 className="mt-4 text-balance text-2xl font-semibold leading-[1.15] tracking-[-0.02em] sm:text-3xl">
-              {faq.headline}
-            </h2>
-            <div className="mt-8 divide-y divide-zinc-200/70 border-y border-zinc-200/70">
+          <section className={`${WRAP} py-12`}>
+            <h2 className="font-display text-[3rem] leading-none sm:text-[4rem]">{faq.headline}</h2>
+            <div className="mt-8 divide-y divide-ink border-y border-ink">
               {faq.items.map((f) => (
                 <details key={f.q} className="group py-5">
-                  <summary className="flex cursor-pointer items-center justify-between text-[15px] font-medium text-zinc-900 marker:hidden [&::-webkit-details-marker]:hidden">
+                  <summary className="flex cursor-pointer items-center justify-between text-[16px] font-medium marker:hidden [&::-webkit-details-marker]:hidden">
                     {f.q}
-                    <span className="text-brand transition-transform group-open:rotate-45">+</span>
+                    <span className="font-display text-[24px] leading-none text-brand transition-transform group-open:rotate-45">
+                      +
+                    </span>
                   </summary>
-                  <p className="mt-3 max-w-2xl text-[14px] leading-relaxed text-zinc-500">
-                    {f.a}
-                  </p>
+                  <p className="mt-3 max-w-2xl text-[14.5px] leading-relaxed text-ink/70">{f.a}</p>
                 </details>
               ))}
             </div>
@@ -226,8 +232,8 @@ export default function LandingPage() {
 function QuickFact({ label, value }: { label: string; value: string }) {
   return (
     <div>
-      <dt className="text-[11px] font-medium uppercase tracking-wide text-zinc-400">{label}</dt>
-      <dd className="mt-1 text-[13.5px] font-medium text-zinc-900">{value}</dd>
+      <dt className="text-[11px] font-medium uppercase tracking-wide text-ink/60">{label}</dt>
+      <dd className="mt-1 text-[14px] font-medium">{value}</dd>
     </div>
   );
 }

package/templates/local-service/app/globals.css

@@ -19,6 +19,9 @@
   --brand: #4f46e5;
   --brand-soft: #eef2ff;
   --paper: #fafafa;
+  /* The marketing pages: a cream poster, near-black type. Set from lib/site.config.ts. */
+  --ink: #161412;
+  --cream: #f4efe6;
   --background: oklch(1 0 0);
   --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
@@ -112,6 +115,8 @@
   --color-brand: var(--brand);
   --color-brand-soft: var(--brand-soft);
   --color-paper: var(--paper);
+  --color-ink: var(--ink);
+  --color-cream: var(--cream);
   --color-chart-1: var(--chart-1);
   --color-chart-2: var(--chart-2);
   --color-chart-3: var(--chart-3);
@@ -153,3 +158,9 @@
     cursor: pointer;
   }
 }
+
+/* Headlines, service names, and pull quotes. Bebas Neue is declared in app.ts. */
+.font-display {
+  font-family: var(--font-display, "Oswald", "Arial Narrow", Impact, sans-serif);
+  text-transform: uppercase;
+}

package/templates/local-service/app/layout.tsx

@@ -21,6 +21,8 @@ export default function RootLayout({ children }: LayoutProps) {
           "--brand": colors.brand,
           "--brand-soft": colors.brandSoft,
           "--paper": colors.paper,
+          "--ink": colors.ink,
+          "--cream": colors.cream,
         } as React.CSSProperties
       }
     >

package/templates/local-service/app.ts

@@ -143,6 +143,15 @@ const manifest = buildManifest({
       display: "swap",
       preload: true,
     }),
+    // The condensed display face for the headline, service names, and pull quotes.
+    font({
+      family: "Bebas Neue",
+      variable: "--font-display",
+      weights: ["400"],
+      subsets: ["latin"],
+      display: "swap",
+      preload: true,
+    }),
   ],
   routes: await discoverAppRoutes(),
 });

package/templates/local-service/components/marketing.tsx

@@ -8,14 +8,6 @@ import React from "react";
 // Shared container: a contained, centered column.
 export const WRAP = "mx-auto w-full max-w-5xl px-6";
 
-export function Eyebrow({ children }: { children: React.ReactNode }) {
-  return (
-    <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.14em] text-brand">
-      {children}
-    </p>
-  );
-}
-
 // "New / Coming soon"-style pill for the hero.
 export function Badge({ children }: { children: React.ReactNode }) {
   return (
@@ -26,36 +18,9 @@ export function Badge({ children }: { children: React.ReactNode }) {
   );
 }
 
+// A full-bleed rule between sections, like the rules on a printed price board.
 export function Divider() {
-  return (
-    <div className={WRAP}>
-      <div className="border-t border-zinc-200/70" />
-    </div>
-  );
-}
-
-export function SectionHead({
-  eyebrow,
-  title,
-  body,
-}: {
-  eyebrow: string;
-  title: string;
-  body?: string;
-}) {
-  return (
-    <div>
-      <Eyebrow>{eyebrow}</Eyebrow>
-      <h2 className="mt-4 text-balance text-2xl font-semibold leading-[1.15] tracking-[-0.02em] sm:text-3xl">
-        {title}
-      </h2>
-      {body ? (
-        <p className="mt-4 max-w-xl text-[15px] leading-relaxed text-zinc-500">
-          {body}
-        </p>
-      ) : null}
-    </div>
-  );
+  return <div className="border-t border-ink" />;
 }
 
 // A grid of value props — icon + title + body.
@@ -105,11 +70,14 @@ export function ImagePlaceholder({
   shape = "landscape",
   title,
   hint,
+  src,
   className = "",
 }: {
   shape?: "landscape" | "portrait" | "square" | "circle";
   title: string;
   hint?: string;
+  /** A real image. The template ships one under public/images; swap it for yours. */
+  src?: string;
   className?: string;
 }) {
   const aspect =
@@ -118,7 +86,14 @@ export function ImagePlaceholder({
       : shape === "square" || shape === "circle"
         ? "aspect-square"
         : "aspect-[4/3]";
-  const radius = shape === "circle" ? "rounded-full" : "rounded-2xl";
+  const radius = shape === "circle" ? "rounded-full" : "";
+  if (src) {
+    return (
+      <div className={`relative overflow-hidden bg-zinc-100 ${aspect} ${radius} ${className}`}>
+        <img src={src} alt={title} className="absolute inset-0 size-full object-cover" loading="lazy" />
+      </div>
+    );
+  }
   return (
     <div
       className={`relative grid place-items-center overflow-hidden border-2 border-dashed border-zinc-300 bg-zinc-50 ${aspect} ${radius} ${className}`}
@@ -149,7 +124,7 @@ export function ImagePlaceholder({
 // visible (e.g. "Availability updates live"). Pure decoration; no client JS.
 export function LiveBadge({ children }: { children: React.ReactNode }) {
   return (
-    <span className="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white/95 px-3 py-1.5 text-[12.5px] font-medium text-zinc-700 shadow-sm backdrop-blur">
+    <span className="inline-flex items-center gap-2 border border-ink bg-cream px-3 py-1.5 text-[12.5px] font-medium text-ink">
       <span className="relative flex size-2">
         <span className="absolute inline-flex size-2 animate-ping rounded-full bg-green-500/60" />
         <span className="relative inline-flex size-2 rounded-full bg-green-600" />

package/templates/local-service/lib/site.config.ts

@@ -20,7 +20,8 @@ export type BaseConfig = {
     copyrightName: string;
     socials: Social[];
   };
-  colors: { brand: string; brandSoft: string; paper: string };
+  // brand: the one accent (deep red). ink/cream: the poster's type and page colors.
+  colors: { brand: string; brandSoft: string; paper: string; ink: string; cream: string };
   seo: { title: string; description: string };
 };
 
@@ -46,13 +47,11 @@ export type LocalServiceConfig = BaseConfig & {
     quickFacts: { hours: string; area: string; phone: string };
   };
   services: {
-    eyebrow: string;
     headline: string;
     items: ServiceItem[];
   };
   booking: {
     enabled: boolean;
-    eyebrow: string;
     headline: string;
     subcopy: string;
     slotMinutes: number; // granularity of offered start times, e.g. 30
@@ -62,9 +61,8 @@ export type LocalServiceConfig = BaseConfig & {
     hours: Record<number, DayHours>;
     confirmationMessage: string;
   };
-  reviews?: { eyebrow: string; headline: string; items: Review[] };
+  reviews?: { headline: string; items: Review[] };
   location: {
-    eyebrow: string;
     headline: string;
     address: string;
     mapEmbedUrl?: string;
@@ -72,7 +70,7 @@ export type LocalServiceConfig = BaseConfig & {
     phone: string;
     email: string;
   };
-  faq?: { eyebrow: string; headline: string; items: Faq[] };
+  faq?: { headline: string; items: Faq[] };
 };
 
 /* ----------------------------- config ---------------------------- */
@@ -84,7 +82,7 @@ export const siteConfig: LocalServiceConfig = {
     domain: "northgatebarbers.com",
     email: "hello@northgatebarbers.example",
     footerBlurb:
-      "A neighborhood barbershop in Dallas. Classic cuts, hot-towel shaves, and a chair that's always ready. Book in ten seconds.",
+      "A neighborhood barbershop in Dallas. Haircuts, beard trims, and hot-towel shaves. Book a chair online.",
     copyrightName: "Northgate Barbers",
     socials: [
       {
@@ -95,7 +93,7 @@ export const siteConfig: LocalServiceConfig = {
     ],
   },
 
-  colors: { brand: "#b45309", brandSoft: "#fef3c7", paper: "#fafaf9" },
+  colors: { brand: "#9b1c1c", brandSoft: "#f6dcd7", paper: "#ebe4d6", ink: "#161412", cream: "#f4efe6" },
 
   seo: {
     title: "Northgate Barbers — classic cuts in Dallas. Book online.",
@@ -105,9 +103,9 @@ export const siteConfig: LocalServiceConfig = {
 
   hero: {
     tagline: "Dallas · est. 2014",
-    headline: "A proper haircut, booked in ten seconds.",
+    headline: "Haircuts, beard trims, and hot-towel shaves.",
     subcopy:
-      "Classic cuts, beard work, and hot-towel shaves from experienced barbers. The booking calendar updates as chairs fill.",
+      "A neighborhood barbershop on Lower Greenville since 2014. Walk in or book a chair online. The calendar updates as chairs fill.",
     ctaLabel: "Book a chair",
     quickFacts: {
       hours: "Tue–Sat, 9–6",
@@ -117,8 +115,7 @@ export const siteConfig: LocalServiceConfig = {
   },
 
   services: {
-    eyebrow: "Services",
-    headline: "Services and prices, up front.",
+    headline: "Prices",
     items: [
       {
         slug: "haircut",
@@ -153,8 +150,7 @@ export const siteConfig: LocalServiceConfig = {
 
   booking: {
     enabled: true,
-    eyebrow: "Book",
-    headline: "Find a time that's open.",
+    headline: "Book a chair",
     subcopy:
       "Pick a service and a day from the live availability calendar. Book without creating an account or making a phone call.",
     slotMinutes: 30,
@@ -174,8 +170,7 @@ export const siteConfig: LocalServiceConfig = {
   },
 
   reviews: {
-    eyebrow: "Reviews",
-    headline: "Regulars say it best.",
+    headline: "What regulars say",
     items: [
       {
         quote:
@@ -199,8 +194,7 @@ export const siteConfig: LocalServiceConfig = {
   },
 
   location: {
-    eyebrow: "Visit",
-    headline: "Find us on Greenville.",
+    headline: "Find us",
     address: "1845 Greenville Ave, Dallas, TX 75206",
     mapEmbedUrl: "",
     hoursText: "Tue–Wed 9–6 · Thu–Fri 9–7 · Sat 9–4 · Sun–Mon closed",
@@ -209,20 +203,19 @@ export const siteConfig: LocalServiceConfig = {
   },
 
   faq: {
-    eyebrow: "Questions",
-    headline: "Good to know.",
+    headline: "Questions",
     items: [
       {
         q: "Do you take walk-ins?",
-        a: "When a chair's open, sure — but booking online guarantees your time, and you can see exactly what's free.",
+        a: "Yes, when a chair is open. Booking online holds your time, and you can see what is free.",
       },
       {
         q: "What if I need to cancel?",
-        a: "Just give us a call. No charge for cancellations with a few hours' notice.",
+        a: "Call the shop. There is no charge for cancellations with a few hours' notice.",
       },
       {
         q: "How should I pay?",
-        a: "Cash or card in the shop. Booking online doesn't charge you anything — you pay after the cut.",
+        a: "Cash or card in the shop. Booking online does not charge you. You pay after the cut.",
       },
     ],
   },