create-githat-app 1.8.5 → 1.8.7

package/templates/marketplace/app/account/sessions/page.tsx.hbs

@@ -0,0 +1,180 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useSessions } from '@githat/nextjs';
+import type { Session } from '@githat/nextjs';
+
+/**
+ * /account/sessions — Active session management for {{businessName}}.
+ *
+ * Lists all active sessions with device/IP/country info.
+ * Users can revoke individual sessions or sign out everywhere else.
+ */
+export default function SessionsPage() {
+  const { list, revoke, revokeAll } = useSessions();
+  const [sessions, setSessions] = useState<Session[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [revoking, setRevoking] = useState<string | null>(null);
+  const [revokingAll, setRevokingAll] = useState(false);
+
+  async function load() {
+    setLoading(true);
+    setError(null);
+    try {
+      const { sessions: data } = await list();
+      setSessions(data);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to load sessions');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => { load(); }, []);
+
+  async function handleRevoke(sessionId: string) {
+    setRevoking(sessionId);
+    try {
+      await revoke(sessionId);
+      setSessions((prev) => prev.filter((s) => s.id !== sessionId));
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to revoke session');
+    } finally {
+      setRevoking(null);
+    }
+  }
+
+  async function handleRevokeAll() {
+    if (!confirm('Sign out of all other devices?')) return;
+    setRevokingAll(true);
+    try {
+      await revokeAll();
+      setSessions((prev) => prev.filter((s) => s.current));
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to revoke sessions');
+    } finally {
+      setRevokingAll(false);
+    }
+  }
+
+  const otherCount = sessions.filter((s) => !s.current).length;
+
+  return (
+    <main
+      style=\{{
+        maxWidth: '720px',
+        margin: '0 auto',
+        padding: 'var(--space-8, 2rem) var(--space-4, 1rem)',
+        color: 'var(--fg, #111)',
+      }}
+    >
+      <header style=\{{ marginBottom: '1.5rem' }}>
+        <div style=\{{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.25rem' }}>
+          <a href="/account/security" style=\{{ color: 'var(--fg-muted, #666)', textDecoration: 'none', fontSize: '0.875rem' }}>
+            Security
+          </a>
+          <span style=\{{ color: 'var(--fg-muted, #666)' }}>›</span>
+          <span style=\{{ fontSize: '0.875rem' }}>Active sessions</span>
+        </div>
+        <h1 style=\{{ fontSize: '1.875rem', fontWeight: 700, margin: 0 }}>Active sessions</h1>
+        <p style=\{{ color: 'var(--fg-muted, #666)', marginTop: '0.25rem' }}>
+          Devices signed in to your {{businessName}} account.
+        </p>
+      </header>
+
+      {error && (
+        <div style=\{{ padding: '0.75rem 1rem', background: '#fef2f2', border: '1px solid #fecaca', borderRadius: '6px', color: '#dc2626', marginBottom: '1rem' }}>
+          {error}
+        </div>
+      )}
+
+      {otherCount > 0 && (
+        <div style=\{{ marginBottom: '1.5rem' }}>
+          <button
+            onClick={handleRevokeAll}
+            disabled={revokingAll}
+            style=\{{
+              padding: '0.5rem 1.25rem',
+              background: '#fef2f2',
+              color: '#dc2626',
+              border: '1px solid #fecaca',
+              borderRadius: '6px',
+              cursor: revokingAll ? 'not-allowed' : 'pointer',
+              fontWeight: 500,
+            }}
+          >
+            {revokingAll ? 'Signing out...' : `Sign out everywhere else (${otherCount})`}
+          </button>
+        </div>
+      )}
+
+      {loading ? (
+        <p style=\{{ color: 'var(--fg-muted, #666)' }}>Loading sessions...</p>
+      ) : sessions.length === 0 ? (
+        <p style=\{{ color: 'var(--fg-muted, #666)' }}>No active sessions found.</p>
+      ) : (
+        <div style=\{{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+          {sessions.map((session) => (
+            <div
+              key={session.id}
+              style=\{{
+                padding: '1rem 1.25rem',
+                border: session.current ? '1px solid #6366f1' : '1px solid var(--border, #e5e7eb)',
+                borderRadius: '8px',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'flex-start',
+                gap: '1rem',
+              }}
+            >
+              <div style=\{{ flex: 1, minWidth: 0 }}>
+                <div style=\{{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.25rem' }}>
+                  <span style=\{{ fontWeight: 600, fontSize: '0.9rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                    {session.userAgent || 'Unknown device'}
+                  </span>
+                  {session.current && (
+                    <span style=\{{
+                      padding: '0.1rem 0.5rem',
+                      background: '#ede9fe',
+                      color: '#6366f1',
+                      borderRadius: '999px',
+                      fontSize: '0.75rem',
+                      fontWeight: 600,
+                      whiteSpace: 'nowrap',
+                    }}>
+                      This device
+                    </span>
+                  )}
+                </div>
+                <div style=\{{ fontSize: '0.8rem', color: 'var(--fg-muted, #666)', display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
+                  {session.ipAddress && <span>{session.ipAddress}</span>}
+                  {session.country && <span>{session.country}</span>}
+                  <span>Last active {new Date(session.lastActiveAt).toLocaleDateString()}</span>
+                </div>
+              </div>
+              {!session.current && (
+                <button
+                  onClick={() => handleRevoke(session.id)}
+                  disabled={revoking === session.id}
+                  style=\{{
+                    padding: '0.375rem 0.875rem',
+                    background: 'transparent',
+                    border: '1px solid var(--border, #e5e7eb)',
+                    borderRadius: '6px',
+                    cursor: revoking === session.id ? 'not-allowed' : 'pointer',
+                    fontSize: '0.875rem',
+                    whiteSpace: 'nowrap',
+                    flexShrink: 0,
+                  }}
+                >
+                  {revoking === session.id ? 'Revoking...' : 'Revoke'}
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </main>
+  );
+}

package/templates/marketplace/app/admin/page.tsx.hbs

@@ -5,15 +5,15 @@ import { useAuth } from '@githat/nextjs';
 /**
  * Seller dashboard — `/admin`.
  *
- * Auth-gated: a logged-in colmadero lands here to manage products,
- * orders, hours, and bank payouts. This is a placeholder shell —
- * wire the data fetches in your own backend.
+ * Auth-gated: a signed-in seller lands here to manage products,
+ * orders, and bank payouts. This is a placeholder shell —
+ * wire the data fetches to your own backend.
  *
- * The four sections below mirror what a real bodega owner asks first:
- *   1. ¿Quién me debe? (today's pending orders)
- *   2. ¿Qué se está vendiendo? (this week's revenue)
- *   3. ¿Qué tengo en stock? (inventory)
- *   4. ¿Cuándo me pagan? (next payout date)
+ * The four tiles below reflect what a seller typically wants to know:
+ *   1. Pending orders (how many need fulfilling today)
+ *   2. Revenue this week
+ *   3. Active products (in stock)
+ *   4. Next payout date (via Sebastn)
  */
 export default function AdminPage() {
   const { isSignedIn, user, isLoading } = useAuth();
@@ -29,10 +29,10 @@ export default function AdminPage() {
     <div style=\{{ background: 'var(--bg)', color: 'var(--fg)', minHeight: 'calc(100vh - 64px)' }}>
       <div style=\{{ maxWidth: '64rem', margin: '0 auto', padding: 'var(--space-8) var(--space-4)' }}>
         <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2rem', marginBottom: 'var(--space-2)' }}>
-          Hola, {user?.name || 'colmadero'}.
+          Welcome back, {user?.name || 'seller'}.
         </h1>
         <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-8)' }}>
-          Esto es lo que está pasando hoy en tu colmado.
+          Here's what's happening in your store today.
         </p>
 
         <div style=\{{
@@ -40,17 +40,17 @@ export default function AdminPage() {
           gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
           gap: 'var(--space-4)',
         }}>
-          <Stat label="Pedidos pendientes" value="—" hint="Today's open orders" />
-          <Stat label="Ventas esta semana" value="$—" hint="This week's revenue" />
-          <Stat label="Productos activos" value="—" hint="In stock right now" />
-          <Stat label="Próximo pago" value="—" hint="Next bank payout" />
+          <Stat label="Pending orders" value="—" hint="Today's open orders" />
+          <Stat label="Revenue this week" value="$—" hint="This week's sales" />
+          <Stat label="Active products" value="—" hint="In stock right now" />
+          <Stat label="Next payout" value="—" hint="Next bank payout via Sebastn" />
         </div>
 
         <p style=\{{ marginTop: 'var(--space-12)', fontSize: '0.875rem', color: 'var(--fg-subtle)' }}>
           This dashboard is a starter shell — wire each tile to your
           real data layer (Postgres, DynamoDB, Sebastn webhooks).
-          See <code>src/lib/anon-session.ts</code> for the cart-side
-          model.
+          Products are configured in <code>src/data/products.ts</code>.
+          See <code>src/lib/anon-session.ts</code> for the guest cart model.
         </p>
       </div>
     </div>
@@ -75,7 +75,7 @@ function Stat({ label, value, hint }: { label: string; value: string; hint: stri
 function Loading() {
   return (
     <div style=\{{ display: 'flex', minHeight: 'calc(100vh - 64px)', alignItems: 'center', justifyContent: 'center', color: 'var(--fg-muted)' }}>
-      Un momentico…
+      Loading…
     </div>
   );
 }
@@ -84,9 +84,9 @@ function SignInPrompt() {
   return (
     <div style=\{{ display: 'flex', minHeight: 'calc(100vh - 64px)', alignItems: 'center', justifyContent: 'center' }}>
       <div style=\{{ textAlign: 'center', maxWidth: '24rem' }}>
-        <h2 style=\{{ fontFamily: 'var(--font-wordmark)', marginBottom: 'var(--space-3)' }}>Inicia sesión</h2>
+        <h2 style=\{{ fontFamily: 'var(--font-wordmark)', marginBottom: 'var(--space-3)' }}>Sign in to continue</h2>
         <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-4)' }}>
-          Sign in to see your colmado's dashboard.
+          Sign in to see your store's dashboard.
         </p>
         <a href="/sign-in" style=\{{ color: 'var(--primary)' }}>Sign in →</a>
       </div>

package/templates/marketplace/app/cart/page.tsx.hbs

@@ -5,28 +5,30 @@ import Link from 'next/link';
 import { SignInButton, SignUpButton, useAuth } from '@githat/nextjs';
 
 /**
- * Tu funda — anonymous-aware cart.
+ * Cart page — anonymous-aware.
  *
  * Three checkout choices, in the order they should appear:
  *   1. Continue as guest (the DEFAULT) — primary button.
  *   2. Sign in (existing GitHat user).
- *   3. Sign up (new GitHat user, gets cart history).
+ *   3. Sign up (new GitHat user, gets order history).
  *
- * The order matters: the colmado UX promise is "you don't have to
- * make an account to shop." If you're tempted to make sign-up the
- * primary button "for the data," re-read CULTURE.md.
+ * The order matters: the UX promise is "you don't have to make an
+ * account to shop." Guest checkout is the primary path.
  *
  * Real cart line items should come from your backend (read by the
- * anon-session id from `src/lib/anon-session.ts`). The hard-coded
- * sample below is just the shell.
+ * anon-session id from `src/lib/anon-session.ts`). The sample below
+ * is just a placeholder shell — replace sampleItems with a fetch or
+ * a cart state hook connected to your data layer.
  */
 export default function CartPage() {
   const { isSignedIn } = useAuth();
   const [emailForReceipt, setEmailForReceipt] = useState('');
+
+  // TODO: replace with real cart items from your backend or cart state
   const sampleItems = [
-    { id: '1', name: 'Plátanos verdes (3)', price: 1.5, store: "Doña Yolanda" },
-    { id: '2', name: 'Presidente fría (6-pack)', price: 9.0, store: "Don Tito" },
-    { id: '3', name: 'Recarga Claro $5', price: 5.0, store: "Doña Yolanda" },
+    { id: '1', name: 'Sample product 1', price: 9.99, store: 'Store A' },
+    { id: '2', name: 'Sample product 2', price: 14.99, store: 'Store B' },
+    { id: '3', name: 'Sample product 3', price: 4.99, store: 'Store A' },
   ];
   const total = sampleItems.reduce((s, i) => s + i.price, 0);
 
@@ -34,10 +36,10 @@ export default function CartPage() {
     <div style=\{{ background: 'var(--bg)', color: 'var(--fg)', minHeight: 'calc(100vh - 64px)' }}>
       <div style=\{{ maxWidth: '40rem', margin: '0 auto', padding: 'var(--space-8) var(--space-4)' }}>
         <h1 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '2rem', marginBottom: 'var(--space-2)' }}>
-          Tu funda
+          Your cart
         </h1>
         <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-6)' }}>
-          Your bag. Edit, then choose how you want to pay.
+          Review your items, then choose how you want to pay.
         </p>
 
         <ul style=\{{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 'var(--space-3)', marginBottom: 'var(--space-6)' }}>
@@ -53,7 +55,7 @@ export default function CartPage() {
             }}>
               <div>
                 <div style=\{{ fontWeight: 600 }}>{it.name}</div>
-                <div style=\{{ fontSize: '0.75rem', color: 'var(--fg-muted)' }}>De tu colmadero, {it.store}</div>
+                <div style=\{{ fontSize: '0.75rem', color: 'var(--fg-muted)' }}>From {it.store}</div>
               </div>
               <div style=\{{ fontWeight: 600 }}>${it.price.toFixed(2)}</div>
             </li>
@@ -80,9 +82,9 @@ export default function CartPage() {
           border: '1px solid var(--border)',
           background: 'var(--surface-sub)',
         }}>
-          <h2 style=\{{ fontSize: '1.25rem', marginBottom: 'var(--space-2)' }}>¿Cómo lo pagamos?</h2>
+          <h2 style=\{{ fontSize: '1.25rem', marginBottom: 'var(--space-2)' }}>How would you like to pay?</h2>
           <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-4)', fontSize: '0.875rem' }}>
-            How would you like to pay? You don't need an account.
+            You don't need an account to check out.
           </p>
 
           {!isSignedIn && (
@@ -93,7 +95,7 @@ export default function CartPage() {
                 style=\{{ marginBottom: 'var(--space-4)' }}
               >
                 <label htmlFor="email" style=\{{ display: 'block', marginBottom: 'var(--space-2)', fontSize: '0.875rem' }}>
-                  Email para el recibo (we'll send the receipt and that's it)
+                  Email for your receipt (we'll send the receipt and that's it)
                 </label>
                 <div style=\{{ display: 'flex', gap: 'var(--space-2)' }}>
                   <input
@@ -102,7 +104,7 @@ export default function CartPage() {
                     required
                     value={emailForReceipt}
                     onChange={(e) => setEmailForReceipt(e.target.value)}
-                    placeholder="tu@email.com"
+                    placeholder="you@email.com"
                     style=\{{
                       flex: 1,
                       padding: 'var(--space-3)',
@@ -121,16 +123,16 @@ export default function CartPage() {
                     fontWeight: 600,
                     cursor: 'pointer',
                   }}>
-                    Pagar como invitado
+                    Check out as guest
                   </button>
                 </div>
                 <p style=\{{ marginTop: 'var(--space-2)', fontSize: '0.75rem', color: 'var(--fg-subtle)' }}>
-                  Continue as guest. No password, no account, no saved data.
+                  No password, no account, no saved data.
                 </p>
               </form>
 
               <div style=\{{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap', alignItems: 'center', marginTop: 'var(--space-4)', paddingTop: 'var(--space-4)', borderTop: '1px dashed var(--border)' }}>
-                <span style=\{{ fontSize: '0.875rem', color: 'var(--fg-muted)' }}>O si quieres guardar tus datos:</span>
+                <span style=\{{ fontSize: '0.875rem', color: 'var(--fg-muted)' }}>Or save your details for next time:</span>
                 <SignInButton />
                 <SignUpButton />
               </div>
@@ -147,7 +149,7 @@ export default function CartPage() {
               fontWeight: 600,
               textDecoration: 'none',
             }}>
-              Pagar →
+              Check out →
             </Link>
           )}
         </section>

package/templates/marketplace/app/layout.tsx.hbs

@@ -4,8 +4,8 @@ import Link from 'next/link';
 import './globals.css';
 
 export const metadata = {
-  title: '{{businessName}} — el colmado de tu barrio',
-  description: '{{description}}',
+  title: '{{businessName}} — your marketplace',
+  description: '{{businessName}} — shop local, built with GitHat.',
 };
 
 /**
@@ -13,15 +13,15 @@ export const metadata = {
  *
  * Header has three slots, in order of importance:
  *   1. Wordmark (always visible)
- *   2. Tu funda — cart icon, anonymous-aware
+ *   2. Cart link — anonymous-aware
  *   3. "Save my stuff" / Sign in — low contrast, never a gate
  *
- * The "Vende en {{businessName}}" link sits in the footer, not the
+ * The "Sell on {{businessName}}" link sits in the footer, not the
  * header. Sellers are a small minority of visitors; shoppers come first.
  */
 export default function RootLayout({ children }{{#if typescript}}: { children: React.ReactNode }{{/if}}) {
   return (
-    <html lang="es">
+    <html lang="en">
       <body>
         <GitHatProvider config=\{{
           publishableKey: process.env.NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY || '',
@@ -54,7 +54,7 @@ export default function RootLayout({ children }{{#if typescript}}: { children: R
             </Link>
             <nav style=\{{ display: 'flex', alignItems: 'center', gap: 'var(--space-4, 1rem)', fontSize: '0.875rem' }}>
               <Link href="/cart" style=\{{ color: 'var(--fg, inherit)', textDecoration: 'none' }}>
-                Tu funda
+                Cart
               </Link>
               <Link href="/sign-in" style=\{{ color: 'var(--fg-subtle, #71717a)', textDecoration: 'none' }}>
                 Save my stuff
@@ -70,7 +70,7 @@ export default function RootLayout({ children }{{#if typescript}}: { children: R
             textAlign: 'center',
           }}>
             <Link href="/sell" style=\{{ color: 'var(--fg-muted, #525252)', textDecoration: 'none' }}>
-              ¿Tienes un colmado? Vende aquí →
+              Sell on {{businessName}} →
             </Link>
             <span style=\{{ display: 'block', marginTop: 'var(--space-2, 0.5rem)' }}>
               {{businessName}} — built on GitHat + Sebastn.

package/templates/marketplace/app/page.tsx.hbs

@@ -4,26 +4,27 @@ import { useState } from 'react';
 import Link from 'next/link';
 import { useAuth } from '@githat/nextjs';
 import { CATEGORIES } from '../src/lib/categories';
+import { getAvailableProducts } from '../src/data/products';
 
 /**
- * Marketplace homepage — colmado-flavored.
+ * Marketplace homepage.
  *
  * Anonymous-first: visitors browse and search without signing in.
  * The header has a low-contrast "Save my stuff" link that opens
- * GitHat sign-in, but it's never a gate. See CULTURE.md for the
- * cultural framing — this is a colmado, not a checkout terminal.
+ * GitHat sign-in, but it's never a gate.
  *
- * Real product data should come from your backend (Postgres,
- * DynamoDB, Sebastn-stored inventory) — this file just renders
- * the shell + seed categories.
+ * Product data comes from src/data/products.ts — edit that file to
+ * add your products. When you're ready for a real backend, replace
+ * getAvailableProducts() with a fetch to your API.
  */
 export default function Home() {
   const { isSignedIn } = useAuth();
   const [query, setQuery] = useState('');
+  const featuredProducts = getAvailableProducts().slice(0, 6);
 
   return (
     <div style=\{{ background: 'var(--bg)', color: 'var(--fg)', minHeight: 'calc(100vh - 64px)' }}>
-      {/* Hero — bilingual, warm, anti-Amazon */}
+      {/* Hero */}
       <section style=\{{
         padding: 'var(--space-8) var(--space-4)',
         background: 'linear-gradient(180deg, var(--surface-sub), var(--bg))',
@@ -35,22 +36,18 @@ export default function Home() {
           lineHeight: 1.1,
           marginBottom: 'var(--space-3)',
         }}>
-          Cerquita de ti, todo lo que necesitas.
+          {{businessName}}
         </h1>
         <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-6)', fontSize: '1.125rem' }}>
-          {{businessName}} — el colmado de tu barrio, ahora en tu teléfono.
-          <br />
-          <span style=\{{ fontSize: '0.875rem', opacity: 0.7 }}>
-            Pídelo y te lo llevamos. <em>Order it, we'll bring it to you.</em>
-          </span>
+          Shop local. Browse products, add to your cart, and check out — no account needed.
         </p>
 
         <form
-          onSubmit={(e) => { e.preventDefault(); window.location.href = `/buscar?q=${encodeURIComponent(query)}`; }}
+          onSubmit={(e) => { e.preventDefault(); window.location.href = `/search?q=${encodeURIComponent(query)}`; }}
           style=\{{ maxWidth: '32rem', margin: '0 auto' }}
         >
           <label htmlFor="q" style=\{{ display: 'block', textAlign: 'left', marginBottom: 'var(--space-2)', fontSize: '0.875rem', color: 'var(--fg-muted)' }}>
-            Busca lo que te haga falta
+            Search for anything
           </label>
           <div style=\{{ display: 'flex', gap: 'var(--space-2)' }}>
             <input
@@ -58,7 +55,7 @@ export default function Home() {
               type="search"
               value={query}
               onChange={(e) => setQuery(e.target.value)}
-              placeholder="Plátano, Presidente fría, recargas Claro…"
+              placeholder="Search products…"
               style=\{{
                 flex: 1,
                 padding: 'var(--space-3) var(--space-4)',
@@ -78,7 +75,7 @@ export default function Home() {
               fontWeight: 600,
               cursor: 'pointer',
             }}>
-              Buscar
+              Search
             </button>
           </div>
         </form>
@@ -86,16 +83,17 @@ export default function Home() {
         {isSignedIn && (
           <p style=\{{ marginTop: 'var(--space-6)', fontSize: '0.875rem' }}>
             <Link href="/cart" style=\{{ color: 'var(--primary)' }}>
-              Lo de siempre →
+              Your usual order →
             </Link>
-            <span style=\{{ color: 'var(--fg-subtle)' }}> (your usual order, one click away)</span>
+            <span style=\{{ color: 'var(--fg-subtle)' }}> (one click away)</span>
           </p>
         )}
       </section>
 
+      {/* Categories */}
       <section style=\{{ padding: 'var(--space-8) var(--space-4)' }}>
         <div style=\{{ maxWidth: '64rem', margin: '0 auto' }}>
-          <h2 style=\{{ fontSize: '1.5rem', marginBottom: 'var(--space-4)' }}>Categorías</h2>
+          <h2 style=\{{ fontSize: '1.5rem', marginBottom: 'var(--space-4)' }}>Categories</h2>
           <div style=\{{
             display: 'grid',
             gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
@@ -104,7 +102,7 @@ export default function Home() {
             {CATEGORIES.map((cat) => (
               <Link
                 key={cat.slug}
-                href={`/buscar?cat=${cat.slug}`}
+                href={`/search?cat=${cat.slug}`}
                 style=\{{
                   display: 'flex',
                   flexDirection: 'column',
@@ -120,15 +118,68 @@ export default function Home() {
                 }}
               >
                 <span style=\{{ fontSize: '2rem' }} aria-hidden>{cat.emoji}</span>
-                <span style=\{{ fontWeight: 600, fontSize: '0.875rem' }}>{cat.es}</span>
-                <span style=\{{ fontSize: '0.75rem', color: 'var(--fg-muted)' }}>{cat.en}</span>
+                <span style=\{{ fontWeight: 600, fontSize: '0.875rem' }}>{cat.label}</span>
               </Link>
             ))}
           </div>
         </div>
       </section>
 
-      <section style=\{{ padding: 'var(--space-8) var(--space-4)', background: 'var(--surface-sub)' }}>
+      {/* Featured products — pulled from src/data/products.ts */}
+      {featuredProducts.length > 0 && (
+        <section style=\{{ padding: 'var(--space-8) var(--space-4)', background: 'var(--surface-sub)' }}>
+          <div style=\{{ maxWidth: '64rem', margin: '0 auto' }}>
+            <h2 style=\{{ fontSize: '1.5rem', marginBottom: 'var(--space-4)' }}>Featured products</h2>
+            <div style=\{{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))',
+              gap: 'var(--space-4)',
+            }}>
+              {featuredProducts.map((product) => (
+                <div
+                  key={product.id}
+                  style=\{{
+                    padding: 'var(--space-4)',
+                    borderRadius: 'var(--radius-md, 0.5rem)',
+                    border: '1px solid var(--border)',
+                    background: 'var(--surface)',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 'var(--space-2)',
+                  }}
+                >
+                  <div style=\{{ fontWeight: 600 }}>{product.name}</div>
+                  <div style=\{{ fontSize: '0.875rem', color: 'var(--fg-muted)', flex: 1 }}>{product.description}</div>
+                  <div style=\{{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <span style=\{{ fontWeight: 600, fontSize: '1.125rem' }}>${product.price.toFixed(2)}</span>
+                    <button
+                      onClick={() => {/* TODO: add to cart */}}
+                      style=\{{
+                        padding: 'var(--space-2) var(--space-4)',
+                        borderRadius: 'var(--radius-md, 0.5rem)',
+                        border: 'none',
+                        background: 'var(--primary)',
+                        color: 'var(--bg)',
+                        fontWeight: 600,
+                        cursor: 'pointer',
+                        fontSize: '0.875rem',
+                      }}
+                    >
+                      Add to cart
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+            <p style=\{{ marginTop: 'var(--space-4)', fontSize: '0.75rem', color: 'var(--fg-subtle)' }}>
+              Products are loaded from <code>src/data/products.ts</code>. Edit that file to add your own.
+            </p>
+          </div>
+        </section>
+      )}
+
+      {/* Value props */}
+      <section style=\{{ padding: 'var(--space-8) var(--space-4)' }}>
         <div style=\{{
           maxWidth: '64rem',
           margin: '0 auto',
@@ -138,11 +189,11 @@ export default function Home() {
         }}>
           <div>
             <h3 style=\{{ fontFamily: 'var(--font-wordmark)', fontSize: '1.5rem', marginBottom: 'var(--space-2)' }}>
-              ¿Tienes un colmado?
+              Have a shop? Sell here.
             </h3>
             <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-3)' }}>
-              Pon tu tienda online en cinco minutos. Tu propia página,
-              tus precios, tus pedidos. Te quedas con el 96%.
+              Get your products online in five minutes. Your page, your prices,
+              your orders. You keep 96%.
             </p>
             <Link href="/sell" style=\{{
               display: 'inline-block',
@@ -153,7 +204,7 @@ export default function Home() {
               fontWeight: 600,
               textDecoration: 'none',
             }}>
-              Vende en {{businessName}} →
+              Start selling →
             </Link>
           </div>
           <div>
@@ -161,9 +212,9 @@ export default function Home() {
               Buying without signing in?
             </h3>
             <p style=\{{ color: 'var(--fg-muted)', marginBottom: 'var(--space-3)' }}>
-              Adelante. You don't need an account to browse, add to your
-              funda, or check out. Sign up only if you want to save
-              addresses, see past orders, or use store credit.
+              Go ahead. You don't need an account to browse, add to your
+              cart, or check out. Sign up only if you want to save
+              your address, see past orders, or use store credit.
             </p>
             {!isSignedIn && (
               <Link href="/sign-in" style=\{{ fontSize: '0.875rem', color: 'var(--primary)' }}>