@tanstack/create 0.65.0 → 0.67.0

package/src/frameworks/react/add-ons/shopify/assets/src/server/shopify/oauth.ts.ejs

@@ -0,0 +1,301 @@
+<% if (addOnOption.shopify.customerAccount !== 'enabled') { ignoreFile(); return; } %>
+import { getCustomerEnv } from '#/server/shopify/env'
+
+/**
+ * OAuth 2.1 Authorization Code + PKCE flow for the Shopify Customer Account
+ * API. We're a public client (browser + Start backend), so no client secret —
+ * security comes from the PKCE verifier proof.
+ *
+ * No usable npm client exists for Customer Account API as of 2026-05; this is
+ * a hand-rolled implementation using Web APIs only (portable across Node,
+ * Workers, Vercel, Netlify, Bun, Deno).
+ */
+
+const SCOPE = 'openid email customer-account-api:full'
+
+type DiscoveryDocument = {
+  authorizationEndpoint: string
+  tokenEndpoint: string
+  endSessionEndpoint: string
+  graphqlEndpoint: string
+}
+
+let discoveryCache: DiscoveryDocument | null = null
+
+async function fetchDiscovery(): Promise<DiscoveryDocument> {
+  if (discoveryCache) return discoveryCache
+  const env = getCustomerEnv()
+  const base = `https://shopify.com/${env.SHOPIFY_CUSTOMER_ACCOUNT_SHOP_ID}`
+  const [oidcRes, customerRes] = await Promise.all([
+    fetch(`${base}/.well-known/openid-configuration`),
+    fetch(`${base}/.well-known/customer-account-api`),
+  ])
+  if (!oidcRes.ok || !customerRes.ok) {
+    throw new Error(
+      `Customer Account discovery failed (${oidcRes.status} / ${customerRes.status}). Verify SHOPIFY_CUSTOMER_ACCOUNT_SHOP_ID.`,
+    )
+  }
+  const oidc = (await oidcRes.json()) as {
+    authorization_endpoint: string
+    token_endpoint: string
+    end_session_endpoint: string
+  }
+  const customer = (await customerRes.json()) as {
+    graphql_api: { endpoint: string }
+  }
+  discoveryCache = {
+    authorizationEndpoint: oidc.authorization_endpoint,
+    tokenEndpoint: oidc.token_endpoint,
+    endSessionEndpoint: oidc.end_session_endpoint,
+    graphqlEndpoint: customer.graphql_api.endpoint,
+  }
+  return discoveryCache
+}
+
+export async function getDiscovery() {
+  return fetchDiscovery()
+}
+
+/* ─── Base64url + crypto helpers (Web Crypto only) ──────────────────────── */
+
+function bufferToBase64Url(buffer: ArrayBuffer): string {
+  const bytes = new Uint8Array(buffer)
+  let str = ''
+  for (let i = 0; i < bytes.byteLength; i++) {
+    str += String.fromCharCode(bytes[i]!)
+  }
+  return btoa(str).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
+}
+
+function base64UrlEncode(input: string): string {
+  return bufferToBase64Url(new TextEncoder().encode(input).buffer as ArrayBuffer)
+}
+
+function base64UrlDecode(input: string): string {
+  const padded = input.replace(/-/g, '+').replace(/_/g, '/')
+  const padding = (4 - (padded.length % 4)) % 4
+  return atob(padded + '='.repeat(padding))
+}
+
+function randomBytes(n: number): Uint8Array {
+  const arr = new Uint8Array(n)
+  crypto.getRandomValues(arr)
+  return arr
+}
+
+function randomString(byteLength: number): string {
+  return bufferToBase64Url(randomBytes(byteLength).buffer as ArrayBuffer)
+}
+
+async function sha256(input: string): Promise<ArrayBuffer> {
+  return crypto.subtle.digest('SHA-256', new TextEncoder().encode(input))
+}
+
+/* ─── PKCE ──────────────────────────────────────────────────────────────── */
+
+export type PkcePair = { codeVerifier: string; codeChallenge: string }
+
+export async function createPkcePair(): Promise<PkcePair> {
+  const codeVerifier = randomString(48)
+  const codeChallenge = bufferToBase64Url(await sha256(codeVerifier))
+  return { codeVerifier, codeChallenge }
+}
+
+export function createState(): string {
+  return randomString(24)
+}
+
+/* ─── Authorize / token / logout URLs ───────────────────────────────────── */
+
+export async function buildAuthorizationUrl(input: {
+  state: string
+  codeChallenge: string
+}): Promise<string> {
+  const env = getCustomerEnv()
+  const discovery = await fetchDiscovery()
+  const url = new URL(discovery.authorizationEndpoint)
+  url.searchParams.set('client_id', env.SHOPIFY_CUSTOMER_ACCOUNT_CLIENT_ID)
+  url.searchParams.set('scope', SCOPE)
+  url.searchParams.set('response_type', 'code')
+  url.searchParams.set('redirect_uri', env.SHOPIFY_CUSTOMER_ACCOUNT_REDIRECT_URI)
+  url.searchParams.set('state', input.state)
+  url.searchParams.set('code_challenge', input.codeChallenge)
+  url.searchParams.set('code_challenge_method', 'S256')
+  return url.toString()
+}
+
+type TokenResponse = {
+  access_token: string
+  refresh_token: string
+  id_token: string
+  expires_in: number
+  token_type: 'Bearer'
+}
+
+export async function exchangeCodeForTokens(input: {
+  code: string
+  codeVerifier: string
+}): Promise<TokenResponse> {
+  const env = getCustomerEnv()
+  const discovery = await fetchDiscovery()
+  const body = new URLSearchParams({
+    grant_type: 'authorization_code',
+    client_id: env.SHOPIFY_CUSTOMER_ACCOUNT_CLIENT_ID,
+    code: input.code,
+    redirect_uri: env.SHOPIFY_CUSTOMER_ACCOUNT_REDIRECT_URI,
+    code_verifier: input.codeVerifier,
+  })
+  const res = await fetch(discovery.tokenEndpoint, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+      Origin: new URL(env.SHOPIFY_CUSTOMER_ACCOUNT_REDIRECT_URI).origin,
+    },
+    body,
+  })
+  if (!res.ok) {
+    throw new Error(
+      `Token exchange failed: ${res.status} ${res.statusText} ${await res.text()}`,
+    )
+  }
+  return (await res.json()) as TokenResponse
+}
+
+export async function refreshTokens(refreshToken: string): Promise<TokenResponse> {
+  const env = getCustomerEnv()
+  const discovery = await fetchDiscovery()
+  const body = new URLSearchParams({
+    grant_type: 'refresh_token',
+    client_id: env.SHOPIFY_CUSTOMER_ACCOUNT_CLIENT_ID,
+    refresh_token: refreshToken,
+  })
+  const res = await fetch(discovery.tokenEndpoint, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+      Origin: new URL(env.SHOPIFY_CUSTOMER_ACCOUNT_REDIRECT_URI).origin,
+    },
+    body,
+  })
+  if (!res.ok) {
+    throw new Error(`Token refresh failed: ${res.status} ${res.statusText}`)
+  }
+  return (await res.json()) as TokenResponse
+}
+
+export async function buildEndSessionUrl(idToken: string): Promise<string> {
+  const env = getCustomerEnv()
+  const discovery = await fetchDiscovery()
+  const url = new URL(discovery.endSessionEndpoint)
+  url.searchParams.set('id_token_hint', idToken)
+  url.searchParams.set(
+    'post_logout_redirect_uri',
+    new URL('/', env.SHOPIFY_CUSTOMER_ACCOUNT_REDIRECT_URI).toString(),
+  )
+  return url.toString()
+}
+
+/* ─── Signed session cookie helpers (HS256) ─────────────────────────────── */
+
+let cachedHmacKey: CryptoKey | null = null
+
+async function getHmacKey(): Promise<CryptoKey> {
+  if (cachedHmacKey) return cachedHmacKey
+  const env = getCustomerEnv()
+  cachedHmacKey = await crypto.subtle.importKey(
+    'raw',
+    new TextEncoder().encode(env.SHOPIFY_SESSION_SECRET),
+    { name: 'HMAC', hash: 'SHA-256' },
+    false,
+    ['sign', 'verify'],
+  )
+  return cachedHmacKey
+}
+
+export type CustomerSession = {
+  accessToken: string
+  refreshToken: string
+  idToken: string
+  expiresAt: number
+}
+
+export async function signSession(session: CustomerSession): Promise<string> {
+  const key = await getHmacKey()
+  const payload = base64UrlEncode(JSON.stringify(session))
+  const sig = await crypto.subtle.sign(
+    'HMAC',
+    key,
+    new TextEncoder().encode(payload),
+  )
+  return `${payload}.${bufferToBase64Url(sig)}`
+}
+
+export async function verifySession(
+  signed: string,
+): Promise<CustomerSession | null> {
+  const [payload, sig] = signed.split('.')
+  if (!payload || !sig) return null
+  const key = await getHmacKey()
+  const sigBytes = Uint8Array.from(base64UrlDecode(sig), (c) => c.charCodeAt(0))
+  const ok = await crypto.subtle.verify(
+    'HMAC',
+    key,
+    sigBytes,
+    new TextEncoder().encode(payload),
+  )
+  if (!ok) return null
+  try {
+    return JSON.parse(base64UrlDecode(payload)) as CustomerSession
+  } catch {
+    return null
+  }
+}
+
+export function buildSession(token: TokenResponse): CustomerSession {
+  return {
+    accessToken: token.access_token,
+    refreshToken: token.refresh_token,
+    idToken: token.id_token,
+    expiresAt: Date.now() + token.expires_in * 1000,
+  }
+}
+
+export type OAuthFlightState = {
+  state: string
+  codeVerifier: string
+  redirectAfter: string
+}
+
+export async function signFlightState(
+  state: OAuthFlightState,
+): Promise<string> {
+  const key = await getHmacKey()
+  const payload = base64UrlEncode(JSON.stringify(state))
+  const sig = await crypto.subtle.sign(
+    'HMAC',
+    key,
+    new TextEncoder().encode(payload),
+  )
+  return `${payload}.${bufferToBase64Url(sig)}`
+}
+
+export async function verifyFlightState(
+  signed: string,
+): Promise<OAuthFlightState | null> {
+  const [payload, sig] = signed.split('.')
+  if (!payload || !sig) return null
+  const key = await getHmacKey()
+  const sigBytes = Uint8Array.from(base64UrlDecode(sig), (c) => c.charCodeAt(0))
+  const ok = await crypto.subtle.verify(
+    'HMAC',
+    key,
+    sigBytes,
+    new TextEncoder().encode(payload),
+  )
+  if (!ok) return null
+  try {
+    return JSON.parse(base64UrlDecode(payload)) as OAuthFlightState
+  } catch {
+    return null
+  }
+}

package/src/frameworks/react/add-ons/shopify/assets/src/server/shopify/storefront-client.ts

@@ -0,0 +1,101 @@
+import { getStorefrontEnv } from './env'
+
+type ShopifyFetchInput<TVariables> = {
+  query: string
+  variables?: TVariables
+  /**
+   * Optional buyer IP, forwarded to Shopify's bot-protection headers.
+   * Only meaningful with the private token.
+   */
+  buyerIp?: string
+}
+
+type ShopifyResponse<TData> = {
+  data?: TData
+  errors?: Array<{ message: string; locations?: unknown; path?: unknown }>
+}
+
+export class ShopifyError extends Error {
+  constructor(
+    message: string,
+    public readonly errors?: ShopifyResponse<unknown>['errors'],
+  ) {
+    super(message)
+    this.name = 'ShopifyError'
+  }
+}
+
+/**
+ * Read the buyer's IP from a Request's headers in a runtime-portable way.
+ * Cloudflare uses `cf-connecting-ip`; Vercel/Netlify/Node behind a proxy use
+ * `x-forwarded-for`. Returns undefined if neither header is present.
+ */
+export function getBuyerIp(headers: Headers): string | undefined {
+  const cf = headers.get('cf-connecting-ip')
+  if (cf) return cf
+  const fwd = headers.get('x-forwarded-for')
+  if (fwd) return fwd.split(',')[0]?.trim()
+  return undefined
+}
+
+/**
+ * Server-side Storefront API client. Prefers the private access token (higher
+ * rate limits + buyer-IP forwarding); falls back to the public token so the
+ * default demo store works with zero setup.
+ *
+ * Use in route loaders and server functions only — never in browser code.
+ */
+export async function shopifyServerFetch<
+  TData,
+  TVariables = Record<string, unknown>,
+>(input: ShopifyFetchInput<TVariables>): Promise<TData> {
+  const env = getStorefrontEnv()
+  const usingPrivate = Boolean(env.SHOPIFY_PRIVATE_STOREFRONT_TOKEN)
+  const token =
+    env.SHOPIFY_PRIVATE_STOREFRONT_TOKEN ?? env.SHOPIFY_PUBLIC_STOREFRONT_TOKEN
+
+  if (!token) {
+    throw new ShopifyError(
+      'Shopify Storefront token missing. Set SHOPIFY_PUBLIC_STOREFRONT_TOKEN in .env.local.',
+    )
+  }
+
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+    Accept: 'application/json',
+  }
+  if (usingPrivate) {
+    headers['Shopify-Storefront-Private-Token'] = token
+    if (input.buyerIp) headers['Shopify-Storefront-Buyer-IP'] = input.buyerIp
+  } else {
+    headers['X-Shopify-Storefront-Access-Token'] = token
+  }
+
+  const url = `https://${env.SHOPIFY_STORE_DOMAIN}/api/${env.SHOPIFY_STOREFRONT_API_VERSION}/graphql.json`
+  const response = await fetch(url, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify({ query: input.query, variables: input.variables }),
+  })
+
+  if (!response.ok) {
+    throw new ShopifyError(
+      `Shopify API error: ${response.status} ${response.statusText}`,
+    )
+  }
+
+  const json = (await response.json()) as ShopifyResponse<TData>
+
+  if (json.errors?.length) {
+    throw new ShopifyError(
+      json.errors.map((e) => e.message).join('\n'),
+      json.errors,
+    )
+  }
+
+  if (!json.data) {
+    throw new ShopifyError('Shopify API returned no data and no errors.')
+  }
+
+  return json.data
+}

package/src/frameworks/react/add-ons/shopify/info.json

@@ -0,0 +1,104 @@
+{
+  "name": "Shopify",
+  "description": "Headless Shopify storefront — products, cart, Shopify-hosted checkout, and optional customer accounts. Mounts /shop/* routes alongside your existing app.",
+  "phase": "add-on",
+  "modes": ["file-router"],
+  "type": "add-on",
+  "category": "other",
+  "color": "#5A31F4",
+  "priority": 80,
+  "link": "https://shopify.dev/docs/storefronts/headless",
+  "dependsOn": ["tanstack-query"],
+  "options": {
+    "customerAccount": {
+      "type": "select",
+      "label": "Customer Accounts",
+      "description": "Add /shop/account/* routes (Shopify Customer Account API, OAuth setup required).",
+      "default": "disabled",
+      "options": [
+        { "value": "disabled", "label": "No (skip account routes)" },
+        { "value": "enabled", "label": "Yes (include OAuth + account dashboard)" }
+      ]
+    }
+  },
+  "integrations": [
+    {
+      "type": "header-user",
+      "jsName": "ShopifyHeaderCart",
+      "path": "src/integrations/shopify/header-cart.tsx"
+    }
+  ],
+  "routes": [
+    {
+      "icon": "ShoppingBag",
+      "url": "/shop",
+      "name": "Shop",
+      "path": "src/routes/shop.index.tsx",
+      "jsName": "ShopIndex"
+    },
+    {
+      "url": "/shop/cart",
+      "name": "Cart",
+      "path": "src/routes/shop.cart.tsx",
+      "jsName": "ShopCart"
+    }
+  ],
+  "envVars": [
+    {
+      "name": "SHOPIFY_STORE_DOMAIN",
+      "description": "Your store's myshopify.com domain. Defaults to Shopify's public Hydrogen demo store.",
+      "required": false,
+      "secret": false,
+      "file": ".env.local"
+    },
+    {
+      "name": "SHOPIFY_STOREFRONT_API_VERSION",
+      "description": "Storefront API version (e.g. 2026-01).",
+      "required": false,
+      "secret": false,
+      "file": ".env.local"
+    },
+    {
+      "name": "SHOPIFY_PUBLIC_STOREFRONT_TOKEN",
+      "description": "Public Storefront API token. Defaults to Shopify's public Hydrogen demo token.",
+      "required": false,
+      "secret": false,
+      "file": ".env.local"
+    },
+    {
+      "name": "SHOPIFY_PRIVATE_STOREFRONT_TOKEN",
+      "description": "Optional private Storefront API token. Higher rate limits + buyer-IP forwarding when set.",
+      "required": false,
+      "secret": true,
+      "file": ".env.local"
+    },
+    {
+      "name": "SHOPIFY_CUSTOMER_ACCOUNT_CLIENT_ID",
+      "description": "Customer Account API client ID. Required when customerAccount=enabled.",
+      "required": false,
+      "secret": true,
+      "file": ".env.local"
+    },
+    {
+      "name": "SHOPIFY_CUSTOMER_ACCOUNT_SHOP_ID",
+      "description": "Numeric Shop ID (Shopify admin > Settings > Customer accounts). Required when customerAccount=enabled.",
+      "required": false,
+      "secret": false,
+      "file": ".env.local"
+    },
+    {
+      "name": "SHOPIFY_CUSTOMER_ACCOUNT_REDIRECT_URI",
+      "description": "OAuth callback URL. Defaults to http://localhost:3000/shop/account/callback.",
+      "required": false,
+      "secret": false,
+      "file": ".env.local"
+    },
+    {
+      "name": "SHOPIFY_SESSION_SECRET",
+      "description": "32+ char secret used to sign customer session cookies. Required when customerAccount=enabled.",
+      "required": false,
+      "secret": true,
+      "file": ".env.local"
+    }
+  ]
+}

package/src/frameworks/react/add-ons/shopify/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@shopify/hydrogen-react": "^2026.1.0",
+    "valibot": "^1.0.0"
+  }
+}

package/src/frameworks/react/add-ons/shopify/small-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 109 124" width="32" height="36"><path fill="#95BF47" d="M74.7 14.8c0-.4-.4-.6-.7-.7-.3-.1-6.2-.5-6.2-.5s-4.1-4.1-4.6-4.6c-.5-.5-1.4-.3-1.7-.2 0 0-.9.3-2.4.7-.2-.8-.6-1.7-1.1-2.7-1.6-3.1-4-4.7-6.9-4.8-.2 0-.4 0-.6.1-.1-.1-.2-.2-.2-.3C49.1.7 47.5.1 45.6.1c-3.7.1-7.5 2.8-10.5 7.6-2.1 3.4-3.7 7.6-4.2 10.9-4.3 1.3-7.3 2.3-7.4 2.3-2.2.7-2.2.7-2.5 2.8-.2 1.5-5.8 45.4-5.8 45.4l47.3 8.2 20.5-5.1c0-.1-8.3-56-8.3-56.4zm-15-3.7c-1.1.3-2.4.7-3.7 1.2 0-1.9-.3-4.5-1.1-6.7 2.7.4 4 3.5 4.8 5.5zm-6.2 1.9c-2.5.8-5.3 1.6-8.1 2.5.8-3 2.3-6 4.1-8 .7-.7 1.7-1.6 2.8-2.1 1.2 2.4 1.4 5.7 1.2 7.6zm-5.1-9.7c.9 0 1.7.2 2.4.6-1.1.6-2.1 1.4-3.1 2.4-2.4 2.6-4.3 6.7-5 10.6-2.4.7-4.7 1.5-6.8 2.1 1.4-6.4 6.6-15.5 12.5-15.7z"/><path fill="#5E8E3E" d="M74 14.1c-.3-.1-6.2-.5-6.2-.5s-4.1-4.1-4.6-4.6c-.2-.2-.4-.3-.7-.3v75l20.5-5.1S74.4 22.7 74.4 22.3c0-.4-.4-.6-.4-.6.1.1-.4-7.6 0-7.6z"/><path fill="#FFF" d="M51.4 25.7l-2.4 8.9s-2.7-1.2-5.8-1c-4.6.3-4.6 3.2-4.6 3.9.2 3.9 10.6 4.8 11.2 14.1.5 7.3-3.9 12.3-10.1 12.7-7.5.5-11.6-3.9-11.6-3.9l1.6-6.8s4.2 3.1 7.5 2.9c2.2-.1 2.9-1.9 2.9-3.1-.3-5.1-8.7-4.8-9.3-13.3-.4-7.2 4.3-14.4 14.6-15.1 4-.3 6 .7 6 .7z"/></svg>

package/src/frameworks/react/examples/shopify-storefront/README.md

@@ -0,0 +1,39 @@
+# Shopify Storefront
+
+A storefront-first TanStack Start template. Bundles the [Shopify add-on](../../add-ons/shopify)
+plus a polished home page so the home route (`/`) is your shop landing.
+
+```bash
+npx @tanstack/cli create my-shop --template shopify-storefront
+```
+
+## What you get
+
+- `/` — Storefront landing (replaces the default home)
+- `/shop` — Catalog landing with collections sidebar
+- `/shop/products/$handle`, `/shop/collections/$handle`, `/shop/cart`, `/shop/search`,
+  `/shop/pages/$handle`, `/shop/policies/$handle` — full Hydrogen-demo parity
+- `/shop/account/*` — optional, if you opted into customer accounts during scaffold
+
+The default `.env.local` points at Shopify's public Hydrogen demo store, so you'll
+see real products on first run with zero setup. See
+[the add-on README](../../add-ons/shopify/README.md) for connecting your own store.
+
+## Brand swap-out
+
+Three files own the look-and-feel:
+
+- `src/routes/index.tsx` — the home page hero + featured collections
+- `src/components/ShopHero.tsx` — the marquee
+- `src/components/FeaturedCollections.tsx` — the collection cards
+
+The shop's design tokens (`--storefront-bg`, `--storefront-fg`, `--storefront-accent`,
+etc.) are defined in the Shopify add-on's `src/components/shop/shop.css`. Override
+those six variables in your own CSS to re-skin the entire storefront.
+
+## Removing demo content
+
+To strip the hero/landing and use the bare add-on instead:
+
+1. Delete `src/components/ShopHero.tsx` and `src/components/FeaturedCollections.tsx`.
+2. Replace `src/routes/index.tsx` with a redirect to `/shop` (or your preferred home).

package/src/frameworks/react/examples/shopify-storefront/assets/src/components/FeaturedCollections.tsx

@@ -0,0 +1,43 @@
+import { Link } from '@tanstack/react-router'
+
+import { ShopImage } from '#/components/shop/shop-image'
+import type { CollectionListItem } from '#/lib/shopify/queries'
+
+type FeaturedCollectionsProps = {
+  collections: ReadonlyArray<CollectionListItem>
+}
+
+export function FeaturedCollections({ collections }: FeaturedCollectionsProps) {
+  if (collections.length === 0) return null
+  return (
+    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+      {collections.map((collection) => (
+        <Link
+          key={collection.id}
+          to="/shop/collections/$handle"
+          params={{ handle: collection.handle }}
+          className="group relative block overflow-hidden rounded-2xl bg-[var(--storefront-line)] no-underline"
+          style={{ aspectRatio: '4 / 5' }}
+        >
+          {collection.image && (
+            <ShopImage
+              src={collection.image.url}
+              alt={collection.image.altText ?? collection.title}
+              width={800}
+              height={1000}
+              sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
+              className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.04]"
+            />
+          )}
+          <div className="absolute inset-0 bg-gradient-to-t from-black/55 via-black/0 to-black/0" />
+          <div className="absolute inset-x-0 bottom-0 p-6 text-white">
+            <h3 className="text-2xl font-medium tracking-tight">
+              {collection.title}
+            </h3>
+            <p className="mt-1 text-sm text-white/80">Shop the collection →</p>
+          </div>
+        </Link>
+      ))}
+    </div>
+  )
+}

package/src/frameworks/react/examples/shopify-storefront/assets/src/components/ShopHero.tsx

@@ -0,0 +1,39 @@
+import { Link } from '@tanstack/react-router'
+
+type ShopHeroProps = {
+  title: string
+  tagline: string
+}
+
+export function ShopHero({ title, tagline }: ShopHeroProps) {
+  return (
+    <section className="relative isolate overflow-hidden border-b border-[var(--storefront-line)]">
+      <div className="mx-auto flex max-w-7xl flex-col items-start gap-8 px-4 py-24 sm:px-6 sm:py-32 lg:px-8 lg:py-40">
+        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--storefront-fg-muted)]">
+          New season · 2026
+        </p>
+        <h1 className="max-w-3xl text-5xl font-medium tracking-tight sm:text-6xl lg:text-7xl">
+          {title}
+        </h1>
+        <p className="max-w-xl text-lg text-[var(--storefront-fg-muted)]">
+          {tagline}
+        </p>
+        <div className="mt-2 flex flex-wrap gap-3">
+          <Link
+            to="/shop"
+            className="rounded-full bg-[var(--storefront-accent)] px-6 py-3 text-sm font-medium text-[var(--storefront-accent-fg)] no-underline transition hover:opacity-90"
+          >
+            Shop all
+          </Link>
+          <Link
+            to="/shop/search"
+            search={{ q: '' }}
+            className="rounded-full border border-[var(--storefront-fg)] px-6 py-3 text-sm font-medium no-underline text-[var(--storefront-fg)] transition hover:bg-[var(--storefront-fg)] hover:text-[var(--storefront-bg)]"
+          >
+            Search
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}