@weft-js/create 0.1.0 → 0.1.2

package/templates/catalog/files/src/server/catalog.ts

@@ -0,0 +1,107 @@
+import { query } from '@weft-js/start'
+import { and, asc, count, eq, gt, gte, lte, ne } from 'drizzle-orm'
+import { z } from 'zod'
+import { categories, products } from '#/db/schema'
+import { PAGE_SIZE } from '#/lib/catalog'
+
+const card = {
+  slug: products.slug,
+  name: products.name,
+  priceCents: products.priceCents,
+  stock: products.stock,
+}
+
+export type ProductCardRow = { slug: string; name: string; priceCents: number; stock: number }
+
+// The aisles are on every page and hardly ever change.
+export const listCategories = query({
+  tags: ['categories'],
+  cache: { life: 'hours' },
+  run: ({ ctx }) =>
+    ctx.db
+      .select({ slug: categories.slug, name: categories.name })
+      .from(categories)
+      .orderBy(asc(categories.id)),
+})
+
+export const getCategory = query({
+  input: z.object({ slug: z.string().max(200) }),
+  tags: ['categories'],
+  run: async ({ input, ctx }) => {
+    const [category] = await ctx.db.select().from(categories).where(eq(categories.slug, input.slug))
+    return category ?? null
+  },
+})
+
+export const featuredProducts = query({
+  tags: ['products'],
+  run: ({ ctx }) =>
+    ctx.db
+      .select(card)
+      .from(products)
+      .where(eq(products.featured, true))
+      .orderBy(asc(products.id))
+      .limit(12),
+})
+
+export const listProducts = query({
+  input: z.object({
+    categoryId: z.number().int().positive(),
+    min: z.number().int().min(0).nullable(),
+    max: z.number().int().min(0).nullable(),
+    stock: z.boolean(),
+    page: z.number().int().min(1),
+  }),
+  tags: ['products'],
+  run: async ({ input, ctx }) => {
+    const where = and(
+      eq(products.categoryId, input.categoryId),
+      input.min !== null ? gte(products.priceCents, input.min * 100) : undefined,
+      input.max !== null ? lte(products.priceCents, input.max * 100) : undefined,
+      input.stock ? gt(products.stock, 0) : undefined,
+    )
+    const [rows, [found]] = await Promise.all([
+      ctx.db
+        .select(card)
+        .from(products)
+        .where(where)
+        .orderBy(asc(products.priceCents), asc(products.id))
+        .limit(PAGE_SIZE)
+        .offset((input.page - 1) * PAGE_SIZE),
+      ctx.db.select({ total: count() }).from(products).where(where),
+    ])
+    return { rows, total: found!.total }
+  },
+})
+
+export const getProduct = query({
+  input: z.object({ slug: z.string().max(200) }),
+  tags: ['products', 'categories'],
+  run: async ({ input, ctx }) => {
+    const [product] = await ctx.db
+      .select({
+        ...card,
+        id: products.id,
+        description: products.description,
+        categoryId: products.categoryId,
+        categorySlug: categories.slug,
+        categoryName: categories.name,
+      })
+      .from(products)
+      .innerJoin(categories, eq(categories.id, products.categoryId))
+      .where(eq(products.slug, input.slug))
+    return product ?? null
+  },
+})
+
+export const relatedProducts = query({
+  input: z.object({ id: z.number().int().positive(), categoryId: z.number().int().positive() }),
+  tags: ['products'],
+  run: ({ input, ctx }) =>
+    ctx.db
+      .select(card)
+      .from(products)
+      .where(and(eq(products.categoryId, input.categoryId), ne(products.id, input.id)))
+      .orderBy(asc(products.id))
+      .limit(4),
+})

package/templates/catalog/files/src/theme.css

@@ -0,0 +1,159 @@
+/*
+ * Mendwell's own CSS, over warp's tokens. The oxblood, the gallery whites, the geometric type and the round corners are warp()
+ * options in weft.config.ts; this file is the shape of the pages and the material colours. Change those options first.
+ */
+html { scroll-behavior: smooth; }
+body { margin: 0; }
+.site { display: flex; flex-direction: column; min-block-size: 100dvh; }
+/* what this file's @container rules answer to */
+.site > main { flex: 1; container-type: inline-size; }
+
+.site-head {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 10;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--warp-space-group);
+  padding: var(--warp-space-related) max(var(--warp-space-page), calc((100% - var(--warp-layout-wide)) / 2 + var(--warp-space-page)));
+  background: var(--warp-color-page);
+  border-block-end: 1px solid var(--warp-color-border);
+}
+.site-foot {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: var(--warp-space-related);
+  margin-block-start: var(--warp-space-page);
+  padding: var(--warp-space-group) max(var(--warp-space-page), calc((100% - var(--warp-layout-wide)) / 2));
+  border-block-start: 1px solid var(--warp-color-border);
+}
+.site-foot p { margin: 0; color: var(--warp-color-text-subtle); }
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--warp-space-tight);
+  font-size: var(--warp-text-heading-size);
+  font-weight: var(--warp-text-heading-weight);
+  color: var(--warp-color-text);
+  text-decoration: none;
+}
+.logo { display: block; inline-size: 1.75rem; block-size: 1.75rem; flex: none; }
+
+.cart-link {
+  min-inline-size: 5rem;
+  padding: var(--warp-space-tight) var(--warp-space-related);
+  border: 1px solid var(--warp-color-border);
+  border-radius: var(--warp-radius-round);
+  color: var(--warp-color-text);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  text-decoration: none;
+}
+.cart-link:hover { border-color: var(--warp-color-accent-solid); color: var(--warp-color-accent-text); }
+
+.page { padding-block: var(--warp-space-section) var(--warp-space-page); }
+.crumb { color: var(--warp-color-text-subtle); font-size: var(--warp-text-caption-size); }
+
+.hero { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--warp-space-section); align-items: center; padding-block: var(--warp-space-page); }
+.lede { max-inline-size: 34rem; font-size: var(--warp-text-heading-size); line-height: var(--warp-text-body-leading); }
+.hero-art { display: grid; grid-template-columns: 1fr 1fr; gap: var(--warp-space-related); }
+.hero-art .art:first-child { grid-column: span 2; aspect-ratio: 2 / 1; }
+@container (max-width: 760px) { .hero { grid-template-columns: 1fr; } }
+
+.cta {
+  justify-self: start;
+  inline-size: fit-content;
+  padding: var(--warp-space-related) var(--warp-space-group);
+  border-radius: var(--warp-radius-round);
+  background: var(--warp-color-accent-solid);
+  color: var(--warp-color-accent-on-solid);
+  font-weight: var(--warp-text-heading-weight);
+  text-decoration: none;
+}
+.cta:hover { background: var(--warp-color-accent-solid-hover); }
+
+/* Aisles read as a ruled index on the home page, and as a scrolling strip beside a category */
+.aisles { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); border-block-start: 2px solid var(--warp-color-text); }
+.aisles a {
+  padding-block: var(--warp-space-related);
+  border-block-end: 1px solid var(--warp-color-border);
+  color: var(--warp-color-text);
+  font-size: var(--warp-text-heading-size);
+  font-weight: var(--warp-text-heading-weight);
+  text-decoration: none;
+}
+.aisles a:hover { color: var(--warp-color-accent-text); }
+.aisles[data-compact] { display: flex; gap: var(--warp-space-tight); overflow-x: auto; border: 0; }
+.aisles[data-compact] a {
+  flex: none;
+  padding: var(--warp-space-tight) var(--warp-space-related);
+  border: 1px solid var(--warp-color-border);
+  border-radius: var(--warp-radius-round);
+  font-size: var(--warp-text-body-size);
+  font-weight: inherit;
+}
+.aisles[data-compact] a[aria-current="page"] { background: var(--warp-color-text); border-color: var(--warp-color-text); color: var(--warp-color-page); }
+
+.product { display: flex; flex-direction: column; gap: var(--warp-space-tight); color: var(--warp-color-text); text-decoration: none; }
+.product:hover .product-name { color: var(--warp-color-accent-text); }
+.product:hover .art svg { transform: translateY(-3px); }
+.product [data-shape="block"] { aspect-ratio: 1; }
+.product-foot { display: flex; align-items: center; gap: var(--warp-space-tight); }
+.price { font-weight: var(--warp-text-heading-weight); font-variant-numeric: tabular-nums; }
+.price-lg { font-size: var(--warp-text-title-size); }
+
+.art {
+  --ink: #6f665c;
+  --ground: light-dark(#ebe7df, #2a2624);
+  display: grid;
+  place-items: center;
+  aspect-ratio: 1;
+  border-radius: var(--warp-radius-surface);
+  background: var(--ground);
+  overflow: hidden;
+}
+.art svg { display: block; inline-size: 62%; max-block-size: 80%; fill: var(--ink); transition: transform 160ms ease; }
+@media (prefers-reduced-motion: reduce) { .art svg { transition: none; } }
+.art[data-material="oak"] { --ink: #a9793f; --ground: light-dark(#f1e6d3, #2e261a); }
+.art[data-material="linen"] { --ink: #9b9077; --ground: light-dark(#f2eee2, #2a2822); }
+.art[data-material="copper"] { --ink: #b4602f; --ground: light-dark(#f6e3d6, #331f15); }
+.art[data-material="slate"] { --ink: #56636f; --ground: light-dark(#e2e6ea, #20262c); }
+.art[data-material="walnut"] { --ink: #5f4030; --ground: light-dark(#ebdfd6, #2b211c); }
+.art[data-material="cedar"] { --ink: #a2472e; --ground: light-dark(#f4dfd6, #311c16); }
+.art[data-material="ceramic"] { --ink: #4f8a8b; --ground: light-dark(#dcecec, #1a2a2a); }
+.art[data-material="brass"] { --ink: #a78a2c; --ground: light-dark(#f4edcf, #2d2912); }
+
+.filters { position: sticky; inset-block-start: 5rem; align-self: start; }
+.price-range { display: grid; grid-template-columns: 1fr 1fr; gap: var(--warp-space-tight); }
+
+.blank { padding-block: var(--warp-space-section); align-items: start; }
+
+.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--warp-space-related); }
+.pager [aria-disabled="true"] { color: var(--warp-color-text-subtle); }
+
+.detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--warp-space-section); align-items: start; }
+@container (max-width: 760px) { .detail { grid-template-columns: 1fr; } }
+.form-error { margin: 0; color: var(--warp-color-critical-text); font-size: var(--warp-text-caption-size); }
+.form-error:empty, .added:empty { display: none; }
+.added { margin: 0; color: var(--warp-color-positive-text); font-size: var(--warp-text-caption-size); }
+
+.promises { padding-block-start: var(--warp-space-section); border-block-start: 2px solid var(--warp-color-text); }
+
+.lines { list-style: none; margin: 0; padding: 0; }
+.line {
+  display: grid;
+  grid-template-columns: 4.5rem minmax(0, 1fr) auto 5.5rem auto;
+  gap: var(--warp-space-related);
+  align-items: center;
+  padding-block: var(--warp-space-related);
+  border-block-end: 1px solid var(--warp-color-border);
+}
+.line .price { text-align: end; }
+@container (max-width: 640px) { .line { grid-template-columns: 4.5rem minmax(0, 1fr) auto; } .line .stepper { grid-column: 2; } }
+.stepper { display: inline-flex; align-items: center; gap: var(--warp-space-tight); font-variant-numeric: tabular-nums; }
+.total { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--warp-text-heading-size); }
+
+.system-page { min-block-size: 60dvh; justify-content: center; }

package/templates/catalog/files/weft.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from '@weft-js/core/config'
+import { warp } from '@weft-js/warp/plugin'
+
+export default defineConfig({
+  site: {
+    name: 'Mendwell',
+    locale: 'en_US',
+    title: '%s · Mendwell',
+    description: 'Mendwell sells everyday goods made to be used hard and repaired when they wear.',
+    head: '<link rel="icon" href="/favicon.svg" type="image/svg+xml">',
+  },
+  plugins: [
+    warp({
+      seed: { accent: '#8a2435' },
+      dials: { expression: 'balanced', density: 'comfortable' },
+      radius: 'round',
+      fields: 'classic',
+      fonts: {
+        display: '"Avenir Next", "Century Gothic", Futura, ui-sans-serif, system-ui, sans-serif',
+        body: '"Avenir Next", "Segoe UI", ui-sans-serif, system-ui, sans-serif',
+      },
+      tokens: {
+        '--warp-color-page': 'light-dark(#f7f6f3, #141213)',
+        '--warp-color-surface': 'light-dark(#fdfcfa, #1d1a1b)',
+        '--warp-color-surface-raised': 'light-dark(#ffffff, #231f20)',
+        '--warp-color-surface-sunken': 'light-dark(#f1efea, #0e0c0d)',
+      },
+    }),
+  ],
+})

package/templates/catalog/template.json

@@ -0,0 +1,20 @@
+{
+  "requires": { "db": "postgres", "auth": false },
+  "pages": ["/", "/c/[slug]", "/p/[slug]", "/cart"],
+  "warp": {
+    "seed": { "accent": "#8a2435" },
+    "dials": { "expression": "balanced", "density": "comfortable" },
+    "radius": "round",
+    "fields": "classic",
+    "fonts": {
+      "display": "\"Avenir Next\", \"Century Gothic\", Futura, ui-sans-serif, system-ui, sans-serif",
+      "body": "\"Avenir Next\", \"Segoe UI\", ui-sans-serif, system-ui, sans-serif"
+    },
+    "tokens": {
+      "--warp-color-page": "light-dark(#f7f6f3, #141213)",
+      "--warp-color-surface": "light-dark(#fdfcfa, #1d1a1b)",
+      "--warp-color-surface-raised": "light-dark(#ffffff, #231f20)",
+      "--warp-color-surface-sunken": "light-dark(#f1efea, #0e0c0d)"
+    }
+  }
+}

package/templates/landing/files/.weft/plugins.lock.json

@@ -0,0 +1,42 @@
+{
+  "version": 1,
+  "plugins": {
+    "@weft-js/plugin-media": {
+      "version": null,
+      "integrity": null,
+      "permissions": [
+        "env:WEFT_MEDIA_DIR",
+        "fs.read:**/*.{png,jpg,jpeg,gif,webp,avif,svg,mp4,m4v,mov,webm,mkv,ogv,mp3,wav,flac,ogg,oga,opus,m4a,aac}",
+        "native",
+        "spawn:ssimulacra2"
+      ],
+      "provides": [
+        "media.build",
+        "media.server"
+      ],
+      "undeclared": []
+    },
+    "@weft-js/text": {
+      "version": null,
+      "integrity": null,
+      "permissions": [
+        "fs.read:**/*.{woff2,woff,ttf,otf}"
+      ],
+      "provides": [
+        "font.build"
+      ],
+      "undeclared": []
+    },
+    "@weft-js/warp": {
+      "version": null,
+      "integrity": null,
+      "permissions": [
+        "fs.read:node_modules/@weft-js/warp-core/**",
+        "fs.write:$TMPDIR/warp-seed-*",
+        "spawn:node"
+      ],
+      "provides": [],
+      "undeclared": []
+    }
+  }
+}

package/templates/landing/files/assets/fonts/LICENSE-figtree.txt

@@ -0,0 +1,93 @@
+Copyright 2022 The Figtree Project Authors (https://github.com/erikdkennedy/figtree) Figtree-Italic[wght].ttf: Copyright 2022 The Figtree Project Authors (https://github.com/erikdkennedy/figtree)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/templates/landing/files/drizzle/.schema-hash

@@ -0,0 +1 @@
+204a1483d863f832

package/templates/landing/files/drizzle/0000_landing.sql

@@ -0,0 +1,6 @@
+CREATE TABLE IF NOT EXISTS "waitlist" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"email" text NOT NULL,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL,
+	CONSTRAINT "waitlist_email_unique" UNIQUE("email")
+);

package/templates/landing/files/drizzle/meta/0000_snapshot.json

@@ -0,0 +1,60 @@
+{
+  "id": "9b1ae0da-72e2-4dd2-9669-a1794558fe77",
+  "prevId": "00000000-0000-0000-0000-000000000000",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.waitlist": {
+      "name": "waitlist",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "waitlist_email_unique": {
+          "name": "waitlist_email_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "email"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    }
+  },
+  "enums": {},
+  "schemas": {},
+  "sequences": {},
+  "roles": {},
+  "policies": {},
+  "views": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}

package/templates/landing/files/drizzle/meta/_journal.json

@@ -0,0 +1,13 @@
+{
+  "version": "7",
+  "dialect": "postgresql",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "7",
+      "when": 1793541999257,
+      "tag": "0000_landing",
+      "breakpoints": true
+    }
+  ]
+}

package/templates/landing/files/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="16" cy="16" r="15" fill="#c2410c"/></svg>

package/templates/landing/files/src/components/SiteFooter.tsx

@@ -0,0 +1,24 @@
+import { Link } from '@weft-js/start'
+
+export function SiteFooter() {
+  return (
+    <footer class="site-foot">
+      <div class="wrap">
+        <div class="site-bar">
+          <div class="site-foot-brand">
+            <Link href="/" class="brand">
+              Emberline
+            </Link>
+            <p>Hear what customers keep asking for.</p>
+          </div>
+          <nav aria-label="Footer">
+            <Link href="/pricing">Pricing</Link>
+            <Link href="/privacy">Privacy</Link>
+            <Link href="mailto:hello@emberline.example">hello@emberline.example</Link>
+          </nav>
+        </div>
+        <p class="site-foot-legal">© 2026 Emberline. Built for teams that listen.</p>
+      </div>
+    </footer>
+  )
+}

package/templates/landing/files/src/components/SiteHeader.tsx

@@ -0,0 +1,23 @@
+import { Link } from '@weft-js/start'
+
+// Plain elements, not warp's Center and Row: nothing here runs, so nothing here has to ship.
+export function SiteHeader() {
+  return (
+    <header class="site-head">
+      <div class="wrap site-bar">
+        <Link href="/" class="brand">
+          Emberline
+        </Link>
+        <div class="site-links">
+          <nav aria-label="Main">
+            <Link href="/pricing">Pricing</Link>
+            <Link href="/privacy">Privacy</Link>
+          </nav>
+          <Link href="/#join" class="cta" data-size="sm">
+            Get early access
+          </Link>
+        </div>
+      </div>
+    </header>
+  )
+}

package/templates/landing/files/src/components/WaitlistForm.tsx

@@ -0,0 +1,36 @@
+import { Form, type FormApi } from '@weft-js/start'
+import { Alert, Button, Input, Stack, Text } from '@weft-js/warp'
+import { joinWaitlist } from '#/server/waitlist'
+
+export function WaitlistForm() {
+  return (
+    <Form of={joinWaitlist} class="waitlist">
+      {(form: FormApi) => (
+        <Stack gap="related">
+          {form.message.value && (
+            <Alert tone="critical" title="That didn't go through" live>
+              Your email wasn't saved. Please try again in a moment.
+            </Alert>
+          )}
+          <div class="waitlist-row">
+            <Input
+              label="Email"
+              type="email"
+              autocomplete="email"
+              required
+              {...form.field('email')}
+              value={String(form.value('email') ?? '')}
+            />
+            <Button type="submit" size="lg" loading={form.pending.value}>
+              Join
+            </Button>
+          </div>
+          <form.Error name="email" class="waitlist-error" />
+          <Text role="caption" subtle>
+            We'll write when your place comes up, and not before.
+          </Text>
+        </Stack>
+      )}
+    </Form>
+  )
+}

package/templates/landing/files/src/db/schema.ts

@@ -0,0 +1,7 @@
+import { pgTable, text, timestamp, uuid } from 'drizzle-orm/pg-core'
+
+export const waitlist = pgTable('waitlist', {
+  id: uuid('id').primaryKey().defaultRandom(),
+  email: text('email').notNull().unique(),
+  createdAt: timestamp('created_at', { withTimezone: true }).notNull().defaultNow(),
+})

package/templates/landing/files/src/routes/404.tsx

@@ -0,0 +1,24 @@
+import { Link, type Meta } from '@weft-js/start'
+import { Center, Heading, Stack, Text } from '@weft-js/warp'
+
+export const meta: Meta = { title: 'Page not found' }
+
+export default function NotFound() {
+  return (
+    <section class="page-head">
+      <Center max="narrow" gutter>
+        <Stack gap="group" align="center">
+          <Heading level={1} role="display">
+            We can't find that page
+          </Heading>
+          <Text class="lede" subtle>
+            The link may be old, or the address mistyped.
+          </Text>
+          <Link href="/" class="cta">
+            Back to the home page
+          </Link>
+        </Stack>
+      </Center>
+    </section>
+  )
+}