@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/shop/app/(marketing)/layout.tsx

@@ -1,117 +1,135 @@
 import React from "react";
 import { Link, type PageAuth } from "@pylonsync/react";
 import { siteConfig } from "@/lib/site.config";
+import { CartButton } from "@/components/cart-button";
+import { WRAP } from "@/components/marketing";
 
 // `(marketing)` is a ROUTE GROUP: the parens segment is stripped from every
 // URL (so `(marketing)/page.tsx` still serves `/`), and this layout wraps only
-// the pages inside the group — a slim nav up top and a footer below, both
-// driven by lib/site.config.ts. /login and /dashboard sit outside the group
-// and render bare in the root shell. `auth.user_id` is resolved server-side
-// from the session cookie before any HTML is sent, so the nav shows
-// "Dashboard" once the owner is signed in and "Sign in" otherwise — no flash,
-// no client fetch.
+// the pages inside the group: an announcement bar, a sticky nav, and a footer,
+// all driven by lib/site.config.ts. /login and /dashboard sit outside the
+// group and render bare in the root shell. `auth.user_id` is resolved
+// server-side from the session cookie before any HTML is sent, so the nav
+// shows "Dashboard" once the owner is signed in and "Sign in" otherwise.
 interface LayoutProps {
   children: React.ReactNode;
   auth: PageAuth;
 }
 
+const NAV_LINKS = [
+  { label: "Shop", href: "/#shop" },
+  { label: "Studio", href: "/#studio" },
+  { label: "Shipping", href: "/#shipping" },
+];
+
+const NAV_LINK =
+  "relative text-[14px] text-ink/80 transition-colors duration-300 hover:text-ink after:absolute after:inset-x-0 after:-bottom-1 after:h-px after:origin-left after:scale-x-0 after:bg-ink after:transition-transform after:duration-500 after:ease-out-quint hover:after:scale-x-100";
+
 export default function MarketingLayout({ children, auth }: LayoutProps) {
   // A guest session (minted by <EnsureGuest> for the live stock grid) has a
-  // `guest_…` user id — that's an anonymous visitor, NOT the signed-in owner,
-  // so it shouldn't flip the nav to "Dashboard".
+  // `guest_…` user id. That is an anonymous visitor, not the signed-in owner,
+  // so it does not flip the nav to "Dashboard".
   const signedIn = Boolean(auth?.user_id && !auth.user_id.startsWith("guest_"));
   const { brand } = siteConfig;
 
   return (
-    <>
-      <header className="sticky top-0 z-30 bg-white/80 backdrop-blur">
-        <div className="mx-auto flex h-14 max-w-3xl items-center justify-between px-6">
-          <Link href="/" className="flex items-center gap-2">
-            <span className="flex size-6 items-center justify-center rounded-[7px] bg-zinc-900 text-[13px] font-bold text-white">
-              {brand.letter}
-            </span>
-            <span className="text-[15px] font-semibold tracking-tight text-zinc-900">
-              {brand.name}
-            </span>
+    <div className="grain flex min-h-screen flex-col bg-warm-white text-ink">
+      <div className="bg-espresso text-warm-white/85">
+        <p className={`${WRAP} flex min-h-9 items-center justify-center py-2 text-center text-[12px] leading-snug tracking-[0.01em] sm:text-[12.5px]`}>
+          {brand.announcement}
+        </p>
+      </div>
+
+      <header className="sticky top-0 z-30 border-b border-ink/10 bg-warm-white/85 backdrop-blur-md">
+        <div className={`${WRAP} grid h-16 grid-cols-[1fr_auto_1fr] items-center`}>
+          <nav className="hidden items-center gap-8 md:flex" aria-label="Sections">
+            {NAV_LINKS.map((l) => (
+              <a key={l.href} href={l.href} className={NAV_LINK}>
+                {l.label}
+              </a>
+            ))}
+          </nav>
+          <Link
+            href="/"
+            className="font-display col-start-1 justify-self-start text-[25px] leading-none tracking-[-0.015em] text-ink md:col-start-2 md:justify-self-center"
+          >
+            {brand.name}
           </Link>
-          <nav className="flex items-center gap-2">
+          <div className="col-start-3 flex items-center justify-end gap-1 sm:gap-3">
             {signedIn ? (
-              <Link
-                href="/dashboard"
-                className="inline-flex items-center rounded-full bg-zinc-900 px-3.5 py-1.5 text-[13px] font-medium text-white transition-colors hover:bg-zinc-700"
-              >
+              <Link href="/dashboard" className={`${NAV_LINK} hidden sm:inline`}>
                 Dashboard
               </Link>
             ) : (
-              <Link
-                href="/login"
-                className="rounded-full px-3 py-1.5 text-[13px] font-medium text-zinc-600 transition-colors hover:text-zinc-900"
-              >
+              <Link href="/login" className={`${NAV_LINK} hidden sm:inline`}>
                 Sign in
               </Link>
             )}
-          </nav>
+            {/* A client island: it reads the shared cart store so its count
+                matches the grid. */}
+            <CartButton />
+          </div>
         </div>
       </header>
 
       <main className="flex-1">{children}</main>
 
       <SiteFooter />
-    </>
+    </div>
   );
 }
 
 function SiteFooter() {
   const { brand } = siteConfig;
   return (
-    <footer className="border-t border-zinc-200/70 bg-white">
-      <div className="mx-auto max-w-3xl px-6 py-12">
-        <div className="flex flex-col items-start justify-between gap-6 sm:flex-row">
-          <div className="max-w-sm">
-            <Link href="/" className="inline-flex items-center gap-2">
-              <span className="flex size-6 items-center justify-center rounded-[7px] bg-zinc-900 text-[13px] font-bold text-white">
-                {brand.letter}
-              </span>
-              <span className="text-[15px] font-semibold tracking-tight text-zinc-900">
-                {brand.name}
-              </span>
+    <footer className="bg-espresso text-warm-white">
+      <div className={`${WRAP} pt-20 pb-10`}>
+        <div className="grid gap-12 md:grid-cols-[1.4fr_1fr_1fr_1fr]">
+          <div className="max-w-xs">
+            <Link href="/" className="font-display text-[32px] leading-none tracking-[-0.015em]">
+              {brand.name}
             </Link>
-            <p className="mt-3 text-[13px] leading-relaxed text-zinc-500">
-              {brand.footerBlurb}
-            </p>
+            <p className="mt-4 text-[14px] leading-relaxed text-warm-white/60">{brand.footerBlurb}</p>
           </div>
-          <div className="flex items-center gap-4">
-            {brand.socials.map((s) => (
-              <a
-                key={s.label}
-                href={s.href}
-                aria-label={s.label}
-                className="text-zinc-400 transition-colors hover:text-zinc-900"
-              >
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                  <path d={s.path} />
-                </svg>
+          <FooterColumn title="Shop">
+            {NAV_LINKS.map((l) => (
+              <li key={l.href}>
+                <a href={l.href} className="transition-colors hover:text-warm-white">
+                  {l.label}
+                </a>
+              </li>
+            ))}
+          </FooterColumn>
+          <FooterColumn title="Studio">
+            {brand.address.map((line) => (
+              <li key={line}>{line}</li>
+            ))}
+          </FooterColumn>
+          <FooterColumn title="Contact">
+            <li>
+              <a href={`mailto:${brand.email}`} className="transition-colors hover:text-warm-white">
+                {brand.email}
               </a>
+            </li>
+            {brand.socials.map((s) => (
+              <li key={s.label}>
+                <a href={s.href} className="inline-flex items-center gap-2 transition-colors hover:text-warm-white">
+                  <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                    <path d={s.path} />
+                  </svg>
+                  {s.label}
+                </a>
+              </li>
             ))}
-            <a
-              href={`mailto:${brand.email}`}
-              aria-label="Email"
-              className="text-zinc-400 transition-colors hover:text-zinc-900"
-            >
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <rect x="3" y="5" width="18" height="14" rx="2" />
-                <path d="m3 7 9 6 9-6" />
-              </svg>
-            </a>
-          </div>
+          </FooterColumn>
         </div>
-        <div className="mt-10 flex flex-col items-start justify-between gap-3 border-t border-zinc-200/70 pt-6 text-[12px] text-zinc-400 sm:flex-row sm:items-center">
+        <div className="mt-20 flex flex-col items-start justify-between gap-3 border-t border-warm-white/10 pt-6 text-[12.5px] text-warm-white/50 sm:flex-row sm:items-center">
           <span>
             © {new Date().getFullYear()} {brand.copyrightName}
           </span>
           <span>
             Built with{" "}
-            <a href="https://pylonsync.com" className="font-medium text-zinc-600 hover:text-zinc-900">
+            <a href="https://pylonsync.com" className="text-warm-white/80 transition-colors hover:text-warm-white">
               Pylon
             </a>
           </span>
@@ -120,3 +138,12 @@ function SiteFooter() {
     </footer>
   );
 }
+
+function FooterColumn({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <h3 className="text-[13px] font-medium text-warm-white">{title}</h3>
+      <ul className="mt-4 space-y-2.5 text-[14px] text-warm-white/60">{children}</ul>
+    </div>
+  );
+}

package/templates/shop/app/(marketing)/not-found.tsx

@@ -1,23 +1,24 @@
 import React from "react";
 import { Link, type NotFoundProps } from "@pylonsync/react";
+import { WRAP, BUTTON_DARK } from "@/components/marketing";
 
 // `(marketing)/not-found.tsx` → rendered at HTTP 404 for any unmatched URL
 // (and when a page calls `response.notFound()`). It lives inside the
 // `(marketing)` group on purpose: a group segment adds no URL prefix, so this
-// is still the root 404 boundary, but it wraps in the marketing layout — a
-// missing URL gets the site nav + footer instead of a bare page. Hydrated, so
-// the link is a client nav.
+// is still the root 404 boundary, but it wraps in the marketing layout, so a
+// missing URL gets the site nav + footer. Hydrated, so the link is a client nav.
 export default function NotFound(_props: NotFoundProps) {
   return (
-    <div className="mx-auto flex min-h-[60vh] max-w-3xl flex-col items-center justify-center px-6 text-center">
-      <h1 className="text-3xl font-semibold tracking-tight">404</h1>
-      <p className="mt-2 text-zinc-500">We couldn&apos;t find that page.</p>
-      <Link
-        href="/"
-        className="mt-6 inline-flex h-10 items-center rounded-full bg-zinc-900 px-5 text-sm font-medium text-white transition-colors hover:bg-zinc-700"
-      >
-        Back home
+    <section className={`${WRAP} flex min-h-[64vh] flex-col items-start justify-center py-24`}>
+      <h1 className="font-display text-[3rem] font-light leading-none tracking-[-0.03em] text-ink sm:text-[4.25rem]">
+        Page not found.
+      </h1>
+      <p className="mt-5 max-w-[40ch] text-[17px] leading-relaxed text-ink-2">
+        The link may be old, or the product may be gone for good.
+      </p>
+      <Link href="/#shop" className={`${BUTTON_DARK} mt-9`}>
+        Back to the shop
       </Link>
-    </div>
+    </section>
   );
 }

package/templates/shop/app/(marketing)/page.tsx

@@ -1,95 +1,156 @@
 import React from "react";
 import { type Metadata } from "@pylonsync/react";
-import { WRAP, Eyebrow, Divider, SectionHead, FeatureGrid, initials } from "@/components/marketing";
+import { ArrowRight } from "lucide-react";
+import { WRAP, BUTTON_DARK, BUTTON_LINE, SectionHeading } from "@/components/marketing";
+import { ShelfCount } from "@/components/shelf-count";
 import { ShopGrid } from "./shop-client";
 import { siteConfig } from "@/lib/site.config";
 
 export const metadata: Metadata = {
   title: siteConfig.seo.title,
   description: siteConfig.seo.description,
-  openGraph: { title: siteConfig.seo.title, description: siteConfig.seo.description, type: "website" },
+  openGraph: {
+    title: siteConfig.seo.title,
+    description: siteConfig.seo.description,
+    type: "website",
+    images: [{ url: siteConfig.hero.image, alt: siteConfig.hero.imageAlt }],
+  },
 };
 
-// `app/(marketing)/page.tsx` → `/` (the group segment adds no URL prefix). Server-rendered storefront. Hero, value props, reviews,
-// and policies are static server HTML (SEO + first paint); the product grid
-// (#shop) is a client island with live stock. All copy comes from siteConfig;
-// the product list seeds the DB on first visit. Doesn't read `auth`, so the
-// public page stays cacheable.
+// `app/(marketing)/page.tsx` → `/` (the group segment adds no URL prefix).
+// Server-rendered storefront: a full-bleed hero, the live product grid, the
+// studio story, reviews, and shipping terms. Everything except the grid (#shop)
+// and the hero's shelf count is static server HTML (SEO + first paint). All
+// copy comes from siteConfig; the product list seeds the DB on first visit.
+// Doesn't read `auth`, so the public page stays cacheable.
 export default function LandingPage() {
-  const { hero, products, valueProps, reviews, policies } = siteConfig;
+  const { hero, products, studio, reviews, policies } = siteConfig;
 
   return (
-    <div className="bg-white text-zinc-900">
-      {/* HERO */}
-      <section className={`${WRAP} pt-16 pb-12 sm:pt-20`}>
-        <p className="font-mono text-[11px] uppercase tracking-[0.16em] text-brand">{hero.tagline}</p>
-        <h1 className="mt-4 max-w-3xl 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">
-          <a href="#shop" 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>
+    <>
+      {/* HERO. Desktop: the photo fills the first screen and the copy sits on
+          its open left side. Mobile: the photo stacks above the copy. */}
+      <section className="relative overflow-hidden bg-stone md:h-[calc(100svh-100px)] md:min-h-[600px] md:max-h-[940px]">
+        <div className="relative aspect-[4/5] overflow-hidden sm:aspect-[16/10] md:absolute md:inset-0 md:aspect-auto">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={hero.image}
+            alt={hero.imageAlt}
+            fetchPriority="high"
+            className="settle size-full object-cover object-[78%_50%] md:object-[center_60%]"
+          />
+          {/* Softens the left edge so the headline reads on any crop. */}
+          <div className="absolute inset-0 hidden bg-gradient-to-r from-[#efe5d6]/70 via-[#efe5d6]/10 to-transparent md:block" />
+        </div>
+
+        <div className={`${WRAP} relative flex h-full flex-col justify-center py-12 md:py-0`}>
+          <div className="max-w-[560px]">
+            <h1 className="rise font-display text-[3.25rem] font-light leading-[0.98] tracking-[-0.03em] text-ink sm:text-[4.5rem] lg:text-[5rem] xl:text-[6rem]">
+              {hero.headline}
+            </h1>
+            <p
+              className="rise mt-7 max-w-[34ch] text-[17px] leading-[1.6] text-ink/75 sm:text-[18px]"
+              style={{ animationDelay: "120ms" }}
+            >
+              {hero.subcopy}
+            </p>
+            <div className="rise mt-9 flex flex-wrap items-center gap-3" style={{ animationDelay: "220ms" }}>
+              <a href="#shop" className={`${BUTTON_DARK} group`}>
+                {hero.ctaLabel}
+                <ArrowRight
+                  className="size-4 transition-transform duration-500 ease-out-quint group-hover:translate-x-1"
+                  strokeWidth={1.5}
+                />
+              </a>
+              <a href="#studio" className={BUTTON_LINE}>
+                {hero.secondaryLabel}
+              </a>
+            </div>
+            <div className="rise mt-10" style={{ animationDelay: "320ms" }}>
+              <ShelfCount />
+            </div>
+          </div>
         </div>
       </section>
 
       {/* PRODUCTS */}
-      <Divider />
-      <section id="shop" className={`${WRAP} py-14`}>
-        <SectionHead eyebrow={products.eyebrow} title={products.headline} />
-        <div className="mt-8">
-          <ShopGrid />
+      <section id="shop" className="scroll-mt-16 py-24 sm:py-32">
+        <div className={WRAP}>
+          <div className="flex flex-col justify-between gap-5 md:flex-row md:items-end">
+            <SectionHeading>{products.headline}</SectionHeading>
+            <p className="max-w-[40ch] text-[15.5px] leading-relaxed text-ink-2">{products.subcopy}</p>
+          </div>
+          <div className="mt-14 sm:mt-16">
+            <ShopGrid />
+          </div>
         </div>
       </section>
 
-      {/* VALUE PROPS */}
-      <Divider />
-      <section className={`${WRAP} py-14`}>
-        <SectionHead eyebrow={valueProps.eyebrow} title={valueProps.headline} />
-        <div className="mt-10">
-          <FeatureGrid items={valueProps.items} />
+      {/* STUDIO: type only. Headline on the left, story and figures on the right. */}
+      <section id="studio" className="scroll-mt-16 bg-espresso text-warm-white">
+        <div className={`${WRAP} grid gap-12 py-24 sm:py-32 md:grid-cols-[1.1fr_1fr] md:gap-20`}>
+          <h2 className="font-display max-w-[14ch] text-[2.75rem] font-light leading-[1] tracking-[-0.03em] text-balance sm:text-[4rem] lg:text-[4.75rem]">
+            {studio.headline}
+          </h2>
+          <div className="md:pt-3">
+            <div className="max-w-[46ch] space-y-4 text-[16px] leading-[1.7] text-warm-white/70">
+              {studio.body.map((p) => (
+                <p key={p}>{p}</p>
+              ))}
+            </div>
+            <dl className="mt-12 grid grid-cols-3 gap-6 border-t border-warm-white/15 pt-8">
+              {studio.facts.map((f) => (
+                <div key={f.label}>
+                  <dt className="sr-only">{f.label}</dt>
+                  <dd>
+                    <span className="font-display block text-[2rem] font-light leading-none tracking-[-0.02em] sm:text-[2.5rem]">
+                      {f.value}
+                    </span>
+                    <span className="mt-2 block text-[13px] leading-snug text-warm-white/55">{f.label}</span>
+                  </dd>
+                </div>
+              ))}
+            </dl>
+          </div>
         </div>
       </section>
 
       {/* 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">
+        <section className="py-24 sm:py-32">
+          <div className={WRAP}>
+            <SectionHeading>{reviews.headline}</SectionHeading>
+            <div className="mt-14 grid gap-12 md:grid-cols-3 md:gap-10">
               {reviews.items.map((r) => (
-                <figure key={r.name} className="flex flex-col rounded-2xl border border-zinc-200 bg-paper p-6">
-                  {r.rating ? (
-                    <div className="text-[13px] tracking-wide text-brand">
-                      {"★".repeat(r.rating)}
-                      <span className="text-zinc-200">{"★".repeat(5 - r.rating)}</span>
-                    </div>
-                  ) : null}
-                  <blockquote className="mt-3 text-[14px] leading-relaxed text-zinc-600">&ldquo;{r.quote}&rdquo;</blockquote>
-                  <figcaption className="mt-4 flex items-center gap-3">
-                    <span className="flex size-8 items-center justify-center rounded-full bg-zinc-200 text-[11px] font-semibold text-zinc-500">
-                      {initials(r.name)}
-                    </span>
-                    <div className="text-[13px] font-semibold">{r.name}</div>
+                <figure key={r.name} className="flex flex-col border-t border-ink/15 pt-7">
+                  <blockquote className="font-display text-[1.5rem] font-light leading-[1.3] tracking-[-0.01em] text-ink">
+                    &ldquo;{r.quote}&rdquo;
+                  </blockquote>
+                  <figcaption className="mt-6 text-[13.5px] text-ink-2">
+                    {r.name}
+                    {r.product ? <span className="text-ink-2/70">, on {r.product}</span> : null}
                   </figcaption>
                 </figure>
               ))}
             </div>
-          </section>
-        </>
+          </div>
+        </section>
       ) : null}
 
-      {/* POLICIES */}
-      <Divider />
-      <section className={`${WRAP} py-14`}>
-        <Eyebrow>{policies.eyebrow}</Eyebrow>
-        <h2 className="mt-4 text-balance text-2xl font-semibold leading-[1.15] tracking-[-0.02em] sm:text-3xl">{policies.headline}</h2>
-        <div className="mt-8">
-          <FeatureGrid items={policies.items.map((p) => ({ title: p.title, body: p.body }))} />
+      {/* SHIPPING AND RETURNS */}
+      <section id="shipping" className="scroll-mt-16 border-t border-ink/10 bg-stone/50 py-24 sm:py-28">
+        <div className={`${WRAP} grid gap-12 md:grid-cols-[1fr_1.6fr]`}>
+          <SectionHeading>{policies.headline}</SectionHeading>
+          <dl className="grid gap-x-12 gap-y-10 sm:grid-cols-2">
+            {policies.items.map((p) => (
+              <div key={p.title}>
+                <dt className="font-display text-[1.375rem] text-ink">{p.title}</dt>
+                <dd className="mt-2 text-[15px] leading-relaxed text-ink-2">{p.body}</dd>
+              </div>
+            ))}
+          </dl>
         </div>
       </section>
-    </div>
+    </>
   );
 }