fix(reviews): remove redundant comment in ProductDetailReviewsPanel component

Gitea Actions does not evaluate fromJson() in matrix strategy — matrix.app
was always empty, breaking turbo prune. Replaced with two explicit jobs
(build-storefront, build-admin) each with a plain if: condition.

The deploy job uses always() + !contains(needs.*.result, 'failure') so it
runs when either build succeeded and skips when a build was cancelled/failed.
Parallelism is preserved — both apps still build simultaneously when both change.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.gitea/workflows/ci.yml

@@ -0,0 +1,32 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - feat #"**" # TODO: change to "**" after testing
+
+jobs:
+  ci:
+    name: Lint, Typecheck & Test
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Typecheck
+        run: npm run type-check
+
+      - name: Test
+        run: npm run test:once

.gitea/workflows/deploy-staging.yml

@@ -0,0 +1,258 @@
+name: Deploy — Staging
+
+on:
+  push:
+    branches:
+      - staging
+
+# Gitea Actions has no environment-level secrets (unlike GitHub Actions).
+# Staging and production secrets live at repo level, distinguished by prefix.
+# Production workflow uses the same names with PROD_ prefix.
+#
+# Required secrets (repo → Settings → Secrets and Variables → Actions):
+#   STAGING_REGISTRY                                    — host:port/owner
+#   STAGING_REGISTRY_USER                               — Gitea username
+#   STAGING_REGISTRY_TOKEN                              — Gitea PAT (package:write)
+#   STAGING_SSH_HOST                                    — host.containers.internal
+#   STAGING_SSH_USER                                    — SSH user on the VPS
+#   STAGING_SSH_KEY                                     — SSH private key (full PEM)
+#   STAGING_SSH_PORT                                    — (optional) defaults to 22
+#   STAGING_NEXT_PUBLIC_CONVEX_URL
+#   STAGING_STOREFRONT_NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+#   STAGING_ADMIN_NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+#   STAGING_NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
+#   STAGING_NEXT_PUBLIC_CLOUDINARY_API_KEY
+#   STAGING_NEXT_PUBLIC_IMAGE_PROCESSING_API_URL
+#   STAGING_NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
+#   STAGING_STOREFRONT_CLERK_SECRET_KEY
+#   STAGING_ADMIN_CLERK_SECRET_KEY
+#   STAGING_CLOUDINARY_API_SECRET
+
+jobs:
+  # ── 0. Detect changes ────────────────────────────────────────────────────────
+  # Determines which apps need to be rebuilt on this push.
+  # Shared paths (packages/, convex/, root config) mark both apps as changed.
+
+  changes:
+    name: Detect changed apps
+    runs-on: ubuntu-latest
+    outputs:
+      storefront: ${{ steps.detect.outputs.storefront }}
+      admin: ${{ steps.detect.outputs.admin }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - name: Determine affected apps
+        id: detect
+        run: |
+          BASE=$(git rev-parse HEAD~1 2>/dev/null || git hash-object -t tree /dev/null)
+          CHANGED=$(git diff --name-only "$BASE" HEAD)
+
+          STOREFRONT=false
+          ADMIN=false
+
+          # Shared paths affect both apps
+          if echo "$CHANGED" | grep -qE '^(package\.json|package-lock\.json|turbo\.json|packages/|convex/)'; then
+            STOREFRONT=true
+            ADMIN=true
+          fi
+
+          echo "$CHANGED" | grep -q '^apps/storefront/' && STOREFRONT=true || true
+          echo "$CHANGED" | grep -q '^apps/admin/'      && ADMIN=true      || true
+
+          echo "storefront=${STOREFRONT}" >> "$GITHUB_OUTPUT"
+          echo "admin=${ADMIN}"           >> "$GITHUB_OUTPUT"
+
+  # ── 1. CI ───────────────────────────────────────────────────────────────────
+
+  ci:
+    name: Lint, Typecheck & Test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - run: npm ci
+      - run: npm run lint
+      - run: npm run type-check
+      - run: npm run test:once
+
+  # ── 2a. Build storefront ─────────────────────────────────────────────────────
+
+  build-storefront:
+    name: Build & push — storefront
+    needs: [ci, changes]
+    if: needs.changes.outputs.storefront == 'true'
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - run: npm ci
+
+      - name: Prune workspace
+        run: |
+          npx turbo prune storefront --docker
+          cp -r convex out/full/convex
+          cp package-lock.json out/package-lock.json
+
+      - name: Authenticate with registry
+        run: |
+          mkdir -p ~/.docker
+          AUTH=$(echo -n "${{ secrets.STAGING_REGISTRY_USER }}:${{ secrets.STAGING_REGISTRY_TOKEN }}" | base64 -w 0)
+          REGISTRY_HOST=$(echo "${{ secrets.STAGING_REGISTRY }}" | cut -d'/' -f1)
+          echo "{\"auths\":{\"${REGISTRY_HOST}\":{\"auth\":\"${AUTH}\"}}}" > ~/.docker/config.json
+
+      - name: Build & push
+        env:
+          NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ secrets.STAGING_STOREFRONT_NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
+          NEXT_PUBLIC_CONVEX_URL: ${{ secrets.STAGING_NEXT_PUBLIC_CONVEX_URL }}
+          NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: ${{ secrets.STAGING_NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY }}
+        run: |
+          SHORT_SHA="${GITHUB_SHA::7}"
+          IMAGE="${{ secrets.STAGING_REGISTRY }}/storefront"
+          docker build \
+            -f apps/storefront/Dockerfile \
+            --build-arg NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="$NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY" \
+            --build-arg NEXT_PUBLIC_CONVEX_URL="$NEXT_PUBLIC_CONVEX_URL" \
+            --build-arg NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="$NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY" \
+            --load -t "${IMAGE}:staging" ./out
+          docker tag "${IMAGE}:staging" "${IMAGE}:sha-${SHORT_SHA}"
+          docker push "${IMAGE}:staging"
+          docker push "${IMAGE}:sha-${SHORT_SHA}"
+
+  # ── 2b. Build admin ──────────────────────────────────────────────────────────
+
+  build-admin:
+    name: Build & push — admin
+    needs: [ci, changes]
+    if: needs.changes.outputs.admin == 'true'
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - run: npm ci
+
+      - name: Prune workspace
+        run: |
+          npx turbo prune admin --docker
+          cp -r convex out/full/convex
+          cp package-lock.json out/package-lock.json
+
+      - name: Authenticate with registry
+        run: |
+          mkdir -p ~/.docker
+          AUTH=$(echo -n "${{ secrets.STAGING_REGISTRY_USER }}:${{ secrets.STAGING_REGISTRY_TOKEN }}" | base64 -w 0)
+          REGISTRY_HOST=$(echo "${{ secrets.STAGING_REGISTRY }}" | cut -d'/' -f1)
+          echo "{\"auths\":{\"${REGISTRY_HOST}\":{\"auth\":\"${AUTH}\"}}}" > ~/.docker/config.json
+
+      - name: Build & push
+        env:
+          NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ secrets.STAGING_ADMIN_NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
+          NEXT_PUBLIC_CONVEX_URL: ${{ secrets.STAGING_NEXT_PUBLIC_CONVEX_URL }}
+          NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME: ${{ secrets.STAGING_NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME }}
+          NEXT_PUBLIC_CLOUDINARY_API_KEY: ${{ secrets.STAGING_NEXT_PUBLIC_CLOUDINARY_API_KEY }}
+          NEXT_PUBLIC_IMAGE_PROCESSING_API_URL: ${{ secrets.STAGING_NEXT_PUBLIC_IMAGE_PROCESSING_API_URL }}
+        run: |
+          SHORT_SHA="${GITHUB_SHA::7}"
+          IMAGE="${{ secrets.STAGING_REGISTRY }}/admin"
+          docker build \
+            -f apps/admin/Dockerfile \
+            --build-arg NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="$NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY" \
+            --build-arg NEXT_PUBLIC_CONVEX_URL="$NEXT_PUBLIC_CONVEX_URL" \
+            --build-arg NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="$NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME" \
+            --build-arg NEXT_PUBLIC_CLOUDINARY_API_KEY="$NEXT_PUBLIC_CLOUDINARY_API_KEY" \
+            --build-arg NEXT_PUBLIC_IMAGE_PROCESSING_API_URL="$NEXT_PUBLIC_IMAGE_PROCESSING_API_URL" \
+            --load -t "${IMAGE}:staging" ./out
+          docker tag "${IMAGE}:staging" "${IMAGE}:sha-${SHORT_SHA}"
+          docker push "${IMAGE}:staging"
+          docker push "${IMAGE}:sha-${SHORT_SHA}"
+
+  # ── 3. Deploy ────────────────────────────────────────────────────────────────
+  # Runs when at least one app changed and no build failed.
+  # `always()` is required so the job isn't auto-skipped when one build job
+  # was skipped (Gitea/GitHub skip downstream jobs of skipped jobs by default).
+
+  deploy:
+    name: Deploy to staging VPS
+    needs: [build-storefront, build-admin, changes]
+    if: |
+      always() &&
+      (needs.changes.outputs.storefront == 'true' || needs.changes.outputs.admin == 'true') &&
+      !contains(needs.*.result, 'failure') &&
+      !contains(needs.*.result, 'cancelled')
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Write SSH key
+        run: |
+          mkdir -p ~/.ssh
+          echo "${{ secrets.STAGING_SSH_KEY }}" > ~/.ssh/staging
+          chmod 600 ~/.ssh/staging
+
+      - name: Pull & restart containers on VPS
+        env:
+          REGISTRY: ${{ secrets.STAGING_REGISTRY }}
+          REGISTRY_USER: ${{ secrets.STAGING_REGISTRY_USER }}
+          REGISTRY_TOKEN: ${{ secrets.STAGING_REGISTRY_TOKEN }}
+          SSH_HOST: ${{ secrets.STAGING_SSH_HOST }}
+          SSH_USER: ${{ secrets.STAGING_SSH_USER }}
+          SSH_PORT: ${{ secrets.STAGING_SSH_PORT }}
+          CLERK_SECRET_KEY: ${{ secrets.STAGING_STOREFRONT_CLERK_SECRET_KEY }}
+          ADMIN_CLERK_SECRET_KEY: ${{ secrets.STAGING_ADMIN_CLERK_SECRET_KEY }}
+          CLOUDINARY_API_SECRET: ${{ secrets.STAGING_CLOUDINARY_API_SECRET }}
+          STOREFRONT_CHANGED: ${{ needs.changes.outputs.storefront }}
+          ADMIN_CHANGED: ${{ needs.changes.outputs.admin }}
+        run: |
+          REGISTRY_HOST=$(echo "$REGISTRY" | cut -d'/' -f1)
+          COMPOSE_B64=$(sed "s|\${REGISTRY}|${REGISTRY}|g" deploy/staging/compose.yml | base64 -w 0)
+
+          ssh -i ~/.ssh/staging \
+              -p "${SSH_PORT:-22}" \
+              -o StrictHostKeyChecking=accept-new \
+              "${SSH_USER}@${SSH_HOST}" bash -s << EOF
+          set -euo pipefail
+
+          echo "${REGISTRY_TOKEN}" \
+            | podman login "${REGISTRY_HOST}" \
+                -u "${REGISTRY_USER}" --password-stdin --tls-verify=false
+
+          [ "${STOREFRONT_CHANGED}" = "true" ] && podman pull --tls-verify=false "${REGISTRY}/storefront:staging"
+          [ "${ADMIN_CHANGED}"      = "true" ] && podman pull --tls-verify=false "${REGISTRY}/admin:staging"
+
+          mkdir -p /opt/staging
+          echo "${COMPOSE_B64}" | base64 -d > /opt/staging/compose.yml
+
+          printf 'CLERK_SECRET_KEY=%s\nADMIN_CLERK_SECRET_KEY=%s\nCLOUDINARY_API_SECRET=%s\n' \
+            "${CLERK_SECRET_KEY}" "${ADMIN_CLERK_SECRET_KEY}" "${CLOUDINARY_API_SECRET}" \
+            > /opt/staging/.env
+          chmod 600 /opt/staging/.env
+
+          SERVICES=""
+          [ "${STOREFRONT_CHANGED}" = "true" ] && SERVICES="\${SERVICES} storefront"
+          [ "${ADMIN_CHANGED}"      = "true" ] && SERVICES="\${SERVICES} admin"
+
+          cd /opt/staging
+          podman compose up -d --force-recreate --remove-orphans \${SERVICES}
+
+          podman image prune -f
+          EOF

.gitignore

@@ -30,7 +30,6 @@ yarn-error.log*
 *.tsbuildinfo
 
 # Convex
-convex/_generated
 apps/admin/.env.staging
 apps/storefront/.env.staging
 convex/.env.staging

apps/admin/Dockerfile

@@ -0,0 +1,68 @@
+# Build context: ./out  (turbo prune admin --docker)
+# out/json/  — package.json files only   → used by deps stage for layer caching
+# out/full/  — full pruned monorepo       → used by builder stage for source
+# out/package-lock.json
+
+# ── Stage 1: deps ────────────────────────────────────────────────────────────
+FROM node:20-alpine AS deps
+
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Upgrade npm to match the project's packageManager (npm@11). The package-lock.json
+# was generated with npm 11 — npm 10 (bundled with node:20) can't fully parse it,
+# causing turbo prune to generate an incomplete pruned lockfile and npm ci to miss
+# packages.
+RUN npm install -g npm@11 --quiet
+
+COPY json/ .
+COPY package-lock.json .
+RUN npm ci
+
+# ── Stage 2: builder ─────────────────────────────────────────────────────────
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+COPY --from=deps /app/node_modules ./node_modules
+COPY full/ .
+
+# NEXT_PUBLIC_* vars are baked into the client bundle at build time by Next.js.
+# They must be present here (not just at runtime) or SSG/prerender fails.
+# Passed via --build-arg in CI. Note: Gitea secrets use a STAGING_/PROD_ prefix
+# which is stripped by the workflow before being forwarded here as build args.
+ARG NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+ARG NEXT_PUBLIC_CONVEX_URL
+ARG NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
+ARG NEXT_PUBLIC_CLOUDINARY_API_KEY
+ARG NEXT_PUBLIC_IMAGE_PROCESSING_API_URL
+ENV NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=$NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY \
+    NEXT_PUBLIC_CONVEX_URL=$NEXT_PUBLIC_CONVEX_URL \
+    NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=$NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME \
+    NEXT_PUBLIC_CLOUDINARY_API_KEY=$NEXT_PUBLIC_CLOUDINARY_API_KEY \
+    NEXT_PUBLIC_IMAGE_PROCESSING_API_URL=$NEXT_PUBLIC_IMAGE_PROCESSING_API_URL \
+    NEXT_TELEMETRY_DISABLED=1
+
+RUN npx turbo build --filter=admin
+
+# ── Stage 3: runner ──────────────────────────────────────────────────────────
+FROM node:20-alpine AS runner
+
+WORKDIR /app
+
+ENV NODE_ENV=production \
+    NEXT_TELEMETRY_DISABLED=1 \
+    HOSTNAME=0.0.0.0 \
+    PORT=3001
+
+RUN addgroup -g 1001 -S nodejs && adduser -S nextjs -u 1001
+
+COPY --from=builder --chown=nextjs:nodejs /app/apps/admin/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/apps/admin/.next/static ./apps/admin/.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/apps/admin/public ./apps/admin/public
+
+USER nextjs
+
+EXPOSE 3001
+
+CMD ["node", "apps/admin/server.js"]

apps/admin/eslint.config.mjs

@@ -0,0 +1,12 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const compat = new FlatCompat({ baseDirectory: __dirname });
+
+const config = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  { ignores: [".next/**", "node_modules/**"] },
+];
+export default config;

apps/admin/next.config.js

@@ -1,7 +1,10 @@
+/* eslint-disable @typescript-eslint/no-require-imports -- Next.js config commonly uses require */
 const path = require("path");
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  output: "standalone",
+  outputFileTracingRoot: path.join(__dirname, "../.."),
   transpilePackages: ["@repo/convex", "@repo/types", "@repo/utils"],
   turbopack: {
     root: path.join(__dirname, "..", ".."),

apps/admin/package.json

@@ -6,7 +6,7 @@
     "dev": "next dev --port 3001",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint .",
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
@@ -29,7 +29,7 @@
     "radix-ui": "^1.4.3",
     "react-hook-form": "^7.71.2",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^2.6.1",
+    "tailwind-merge": "^3.4.0",
     "zod": "^3.25.76"
   },
   "devDependencies": {

apps/admin/src/app/(dashboard)/images/page.tsx

@@ -5,7 +5,10 @@ import { useQuery } from "convex/react"
 import { api } from "../../../../../../convex/_generated/api"
 import type { Id } from "../../../../../../convex/_generated/dataModel"
 import { ProductSearchSection } from "../../../components/shared/ProductSearchSection"
-import { ProductImageCarousel } from "../../../components/images/ProductImageCarousel"
+import {
+  ProductImageCarousel,
+  type ProductImage,
+} from "../../../components/images/ProductImageCarousel"
 import { ImageUploadSection } from "../../../components/images/ImageUploadSection"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Separator } from "@/components/ui/separator"
@@ -79,7 +82,7 @@ export default function ImagesPage() {
               </div>
             ) : (
               <ProductImageCarousel
-                images={images as any}
+                images={images as ProductImage[]}
                 onAddMore={() => setShowUpload(true)}
               />
             )}

apps/admin/src/app/(dashboard)/products/[id]/edit/page.tsx

@@ -53,8 +53,8 @@ export default function EditProductPage() {
         categoryId: payload.categoryId as Id<"categories">,
       })
       router.push("/products")
-    } catch (e: any) {
-      setError(e?.message ?? "Failed to save product. Please try again.")
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : "Failed to save product. Please try again.")
       setIsSubmitting(false)
     }
   }
@@ -64,8 +64,8 @@ export default function EditProductPage() {
     try {
       await archiveProduct({ id: productId })
       router.push("/products")
-    } catch (e: any) {
-      setError(e?.message ?? "Failed to archive product.")
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : "Failed to archive product.")
       setIsArchiving(false)
     }
   }

apps/admin/src/app/(dashboard)/products/new/page.tsx

@@ -33,8 +33,8 @@ export default function NewProductPage() {
         categoryId: payload.categoryId as Id<"categories">,
       })
       router.push("/products")
-    } catch (e: any) {
-      setError(e?.message ?? "Failed to create product. Please try again.")
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : "Failed to create product. Please try again.")
       setIsSubmitting(false)
     }
   }

apps/admin/src/app/(dashboard)/products/page.tsx

@@ -199,11 +199,14 @@ export default function ProductsPage() {
     ? searchResults === undefined
     : listStatus === "LoadingFirstPage"
 
-  const rawProducts = isSearching ? (searchResults ?? []) : listResults
+  const rawProducts = useMemo(
+    () => (isSearching ? (searchResults ?? []) : listResults),
+    [isSearching, searchResults, listResults],
+  )
 
   const products = useMemo(() => {
     if (!sortField) return rawProducts
-    return [...rawProducts].sort((a: any, b: any) => {
+    return [...rawProducts].sort((a: PreviewProduct, b: PreviewProduct) => {
       const aVal: string =
         sortField === "name"
           ? (a.name ?? "")
@@ -235,8 +238,8 @@ export default function ProductsPage() {
     setVisibleCols((prev) => ({ ...prev, [key]: checked }))
   }
 
-  function openPreview(product: any) {
-    setPreviewProduct(product as PreviewProduct)
+  function openPreview(product: PreviewProduct) {
+    setPreviewProduct(product)
     setPreviewOpen(true)
   }
 
@@ -374,7 +377,7 @@ export default function ProductsPage() {
                 </TableCell>
               </TableRow>
             ) : (
-              products.map((product: any) => {
+              products.map((product: PreviewProduct) => {
                 const statusCfg =
                   STATUS_CONFIG[product.status as keyof typeof STATUS_CONFIG]
                 return (

apps/admin/src/app/layout.tsx

@@ -1,21 +1,11 @@
 import type { Metadata } from "next";
-import { DM_Sans, Geist, Geist_Mono } from "next/font/google";
+import { DM_Sans } from "next/font/google";
 import { ClerkProvider } from "@clerk/nextjs";
 import { ConvexClientProvider } from "@repo/convex";
 import { Toaster } from "sonner";
 import "./globals.css";
 
-const dmSans = DM_Sans({subsets:['latin'],variable:'--font-sans'});
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+const dmSans = DM_Sans({ subsets: ["latin"], variable: "--font-sans" });
 
 export const metadata: Metadata = {
   title: {

apps/admin/src/components/images/ImageUploadSection.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { useState, useRef } from "react"
+import Image from "next/image"
 import { useMutation } from "convex/react"
 import { api } from "../../../../../convex/_generated/api"
 import type { Id } from "../../../../../convex/_generated/dataModel"
@@ -61,8 +62,8 @@ export function ImageUploadSection({
       })
 
       if (!res.ok) {
-        const errJson = await res.json().catch(() => ({}))
-        throw new Error((errJson as any).detail ?? "Background removal failed")
+        const errJson = (await res.json().catch(() => ({}))) as { detail?: string }
+        throw new Error(errJson.detail ?? "Background removal failed")
       }
 
       const blob = await res.blob()
@@ -100,8 +101,8 @@ export function ImageUploadSection({
     })
 
     if (!uploadRes.ok) {
-      const errJson = await uploadRes.json().catch(() => ({}))
-      throw new Error((errJson as any).error ?? "Upload failed")
+      const errJson = (await uploadRes.json().catch(() => ({}))) as { error?: string }
+      throw new Error(errJson.error ?? "Upload failed")
     }
 
     const { url } = await uploadRes.json()
@@ -188,8 +189,14 @@ export function ImageUploadSection({
           <div className="space-y-1">
             <p className="text-xs font-medium text-muted-foreground">Original</p>
             {localUrl && (
-              <div className="aspect-square overflow-hidden rounded-md border bg-muted">
-                <img src={localUrl} alt="Original" className="h-full w-full object-contain" />
+              <div className="relative aspect-square overflow-hidden rounded-md border bg-muted">
+                <Image
+                  src={localUrl}
+                  alt="Original"
+                  fill
+                  className="object-contain"
+                  unoptimized
+                />
               </div>
             )}
           </div>
@@ -199,11 +206,13 @@ export function ImageUploadSection({
             {isProcessing ? (
               <Skeleton className="aspect-square w-full rounded-md" />
             ) : processedUrl ? (
-              <div className="aspect-square overflow-hidden rounded-md border bg-[conic-gradient(#e5e7eb_25%,_#fff_25%,_#fff_50%,_#e5e7eb_50%,_#e5e7eb_75%,_#fff_75%)] bg-[length:16px_16px]">
-                <img
+              <div className="relative aspect-square overflow-hidden rounded-md border bg-[conic-gradient(#e5e7eb_25%,_#fff_25%,_#fff_50%,_#e5e7eb_50%,_#e5e7eb_75%,_#fff_75%)] bg-[length:16px_16px]">
+                <Image
                   src={processedUrl}
                   alt="Background removed"
-                  className="h-full w-full object-contain"
+                  fill
+                  className="object-contain"
+                  unoptimized
                 />
               </div>
             ) : processingError ? (

apps/admin/src/components/images/ProductImageCarousel.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { useState, useEffect } from "react"
+import Image from "next/image"
 import {
   DndContext,
   closestCenter,
@@ -35,7 +36,7 @@ import { Button } from "@/components/ui/button"
 import { HugeiconsIcon } from "@hugeicons/react"
 import { Delete02Icon, ImageAdd01Icon, DragDropVerticalIcon } from "@hugeicons/core-free-icons"
 
-interface ProductImage {
+export interface ProductImage {
   _id: Id<"productImages">
   url: string
   alt?: string
@@ -105,11 +106,12 @@ function SortableImageCard({
 
         {/* Row 2 in DOM → Row 2 visually (middle stays middle) */}
         {/* Image — appears in CENTER */}
-        <div className="w-28 aspect-square rotate-180 overflow-hidden rounded-md border bg-muted">
-          <img
+        <div className="relative w-28 aspect-square rotate-180 overflow-hidden rounded-md border bg-muted">
+          <Image
             src={image.url}
             alt={image.alt ?? "Product image"}
-            className="h-full w-full object-contain"
+            fill
+            className="object-contain"
           />
         </div>
 

apps/admin/src/components/images/ProductSearchSection.tsx

@@ -84,7 +84,7 @@ export function ProductSearchSection({ onSelect, onClear, selectedId }: ProductS
 
       {!isLoading && results && results.length > 0 && (
         <ul className="max-w-sm divide-y rounded-md border">
-          {results.map((product: any) => (
+          {results.map((product: { _id: string; name: string }) => (
             <li key={product._id}>
               <button
                 type="button"

apps/admin/src/components/layout/sidebar/app-sidebar.tsx

@@ -1,8 +1,6 @@
 "use client";
 
 import * as React from "react";
-import { HugeiconsIcon } from "@hugeicons/react";
-import { Store01Icon } from "@hugeicons/core-free-icons";
 import {
   Sidebar,
   SidebarContent,

apps/admin/src/components/orders/actions/AcceptReturnButton.tsx

@@ -24,8 +24,8 @@ export function AcceptReturnButton({ orderId }: Props) {
       } else {
         toast.error((result as { success: false; code: string; message: string }).message)
       }
-    } catch (e: any) {
-      toast.error(e?.message ?? "Failed to accept return.")
+    } catch (e: unknown) {
+      toast.error(e instanceof Error ? e.message : "Failed to accept return.")
     } finally {
       setIsLoading(false)
     }

apps/admin/src/components/orders/actions/CreateLabelButton.tsx

@@ -24,8 +24,8 @@ export function CreateLabelButton({ orderId }: Props) {
       } else {
         toast.error((result as { success: false; code: string; message: string }).message)
       }
-    } catch (e: any) {
-      toast.error(e?.message ?? "Failed to create shipping label.")
+    } catch (e: unknown) {
+      toast.error(e instanceof Error ? e.message : "Failed to create shipping label.")
     } finally {
       setIsLoading(false)
     }

apps/admin/src/components/orders/actions/IssueRefundButton.tsx

@@ -37,8 +37,8 @@ export function IssueRefundButton({ orderId, total, currency }: Props) {
       await issueRefund({ orderId })
       toast.success("Refund issued.")
       setOpen(false)
-    } catch (e: any) {
-      toast.error(e?.message ?? "Failed to issue refund.")
+    } catch (e: unknown) {
+      toast.error(e instanceof Error ? e.message : "Failed to issue refund.")
     } finally {
       setIsLoading(false)
     }

apps/admin/src/components/orders/actions/MarkReturnReceivedButton.tsx

@@ -32,8 +32,8 @@ export function MarkReturnReceivedButton({ orderId }: Props) {
       await markReceived({ id: orderId })
       toast.success("Return marked as received.")
       setOpen(false)
-    } catch (e: any) {
-      toast.error(e?.message ?? "Failed to mark return as received.")
+    } catch (e: unknown) {
+      toast.error(e instanceof Error ? e.message : "Failed to mark return as received.")
     } finally {
       setIsLoading(false)
     }

apps/admin/src/components/orders/actions/UpdateStatusDialog.tsx

@@ -62,8 +62,8 @@ export function UpdateStatusDialog({ orderId, currentStatus }: Props) {
       const label = ORDER_STATUS_CONFIG[selectedStatus as OrderStatus]?.label
       toast.success(`Status updated to ${label ?? selectedStatus}`)
       setOpen(false)
-    } catch (e: any) {
-      toast.error(e?.message ?? "Failed to update status.")
+    } catch (e: unknown) {
+      toast.error(e instanceof Error ? e.message : "Failed to update status.")
     } finally {
       setIsSubmitting(false)
     }

apps/admin/src/components/shared/ProductSearchSection.tsx

@@ -84,7 +84,7 @@ export function ProductSearchSection({ onSelect, onClear, selectedId }: ProductS
 
       {!isLoading && results && results.length > 0 && (
         <ul className="max-w-sm divide-y rounded-md border">
-          {results.map((product: any) => (
+          {results.map((product: { _id: string; name: string }) => (
             <li key={product._id}>
               <button
                 type="button"

apps/admin/src/components/variants/CreateVariantDialog.tsx

@@ -68,8 +68,8 @@ export function CreateVariantDialog({
 
       toast.success(`Variant "${values.name}" created`)
       onOpenChange(false)
-    } catch (e: any) {
-      toast.error(e?.message ?? "Failed to create variant")
+    } catch (e: unknown) {
+      toast.error(e instanceof Error ? e.message : "Failed to create variant")
     } finally {
       setIsSubmitting(false)
     }

apps/admin/src/components/variants/EditVariantDialog.tsx

@@ -69,8 +69,8 @@ export function EditVariantDialog({
 
       toast.success(`"${values.name}" updated`)
       onOpenChange(false)
-    } catch (e: any) {
-      toast.error(e?.message ?? "Failed to update variant")
+    } catch (e: unknown) {
+      toast.error(e instanceof Error ? e.message : "Failed to update variant")
     } finally {
       setIsSubmitting(false)
     }

apps/admin/src/components/variants/VariantsTable.tsx

@@ -103,8 +103,8 @@ function VariantActionsMenu({
     try {
       await updateVariant({ id: variant._id, isActive: !variant.isActive })
       toast.success(`"${variant.name}" ${variant.isActive ? "deactivated" : "activated"}`)
-    } catch (e: any) {
-      toast.error(e?.message ?? "Failed to update variant")
+    } catch (e: unknown) {
+      toast.error(e instanceof Error ? e.message : "Failed to update variant")
     } finally {
       setIsToggling(false)
     }
@@ -116,8 +116,8 @@ function VariantActionsMenu({
       await deleteVariant({ id: variant._id })
       toast.success(`"${variant.name}" deleted`)
       setDeleteOpen(false)
-    } catch (e: any) {
-      toast.error(e?.message ?? "Failed to delete variant")
+    } catch (e: unknown) {
+      toast.error(e instanceof Error ? e.message : "Failed to delete variant")
     } finally {
       setIsDeleting(false)
     }

apps/storefront/Dockerfile

@@ -0,0 +1,81 @@
+# Build context: ./out  (turbo prune storefront --docker)
+# out/json/  — package.json files only   → used by deps stage for layer caching
+# out/full/  — full pruned monorepo       → used by builder stage for source
+# out/package-lock.json
+
+# ── Stage 1: deps ────────────────────────────────────────────────────────────
+# Install ALL dependencies (dev + prod) using only the package.json tree.
+# This layer is shared with the builder stage and only rebuilds when
+# a package.json or the lock file changes — not when source code changes.
+FROM node:20-alpine AS deps
+
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Upgrade npm to match the project's packageManager (npm@11). The package-lock.json
+# was generated with npm 11 — npm 10 (bundled with node:20) can't fully parse it,
+# causing turbo prune to generate an incomplete pruned lockfile and npm ci to miss
+# packages like @heroui/react.
+RUN npm install -g npm@11 --quiet
+
+COPY json/ .
+COPY package-lock.json .
+RUN npm ci
+
+# ── Stage 2: builder ─────────────────────────────────────────────────────────
+# Full monorepo source + build artifact.
+# next build produces .next/standalone/ because output: "standalone" is set
+# in next.config.js — that's what makes the runner stage small.
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy everything from the deps stage — not just /app/node_modules.
+# @heroui/react cannot be hoisted to the root by npm and is installed at
+# apps/storefront/node_modules/ instead. Copying only the root node_modules
+# would leave it missing. Copying all of /app/ brings both root and
+# workspace-level node_modules, then full/ layers the source on top.
+COPY --from=deps /app/ ./
+COPY full/ .
+
+# NEXT_PUBLIC_* vars are baked into the client bundle at build time by Next.js.
+# They must be present here (not just at runtime) or SSG/prerender fails.
+# Passed via --build-arg in CI. Note: Gitea secrets use a STAGING_/PROD_ prefix
+# which is stripped by the workflow before being forwarded here as build args.
+ARG NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+ARG NEXT_PUBLIC_CONVEX_URL
+ARG NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
+ENV NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=$NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY \
+    NEXT_PUBLIC_CONVEX_URL=$NEXT_PUBLIC_CONVEX_URL \
+    NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=$NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY \
+    NEXT_TELEMETRY_DISABLED=1
+
+RUN npx turbo build --filter=storefront
+
+# ── Stage 3: runner ──────────────────────────────────────────────────────────
+# Minimal runtime image — only the standalone bundle, static assets, and public dir.
+# No source code, no dev dependencies, no build tools.
+FROM node:20-alpine AS runner
+
+WORKDIR /app
+
+ENV NODE_ENV=production \
+    NEXT_TELEMETRY_DISABLED=1 \
+    HOSTNAME=0.0.0.0 \
+    PORT=3000
+
+# Non-root user for security
+RUN addgroup -g 1001 -S nodejs && adduser -S nextjs -u 1001
+
+# outputFileTracingRoot is set to the repo root, so the standalone directory mirrors
+# the full monorepo tree. server.js lands at apps/storefront/server.js inside
+# standalone/, not at the root. Static files and public/ must be copied separately.
+COPY --from=builder --chown=nextjs:nodejs /app/apps/storefront/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/apps/storefront/.next/static ./apps/storefront/.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/apps/storefront/public ./apps/storefront/public
+
+USER nextjs
+
+EXPOSE 3000
+
+CMD ["node", "apps/storefront/server.js"]

apps/storefront/eslint.config.mjs

@@ -0,0 +1,12 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const compat = new FlatCompat({ baseDirectory: __dirname });
+
+const config = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  { ignores: [".next/**", "node_modules/**"] },
+];
+export default config;

apps/storefront/next.config.js

@@ -1,7 +1,12 @@
+/* eslint-disable @typescript-eslint/no-require-imports -- Next.js config commonly uses require */
 const path = require("path");
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  output: "standalone",
+  // Required in a monorepo: tells Next.js to trace files from the repo root
+  // so the standalone bundle includes files from packages/
+  outputFileTracingRoot: path.join(__dirname, "../.."),
   transpilePackages: ["@repo/convex", "@repo/types", "@repo/utils"],
   turbopack: {
     root: path.join(__dirname, "..", ".."),

apps/storefront/package.json

@@ -6,7 +6,7 @@
     "dev": "next dev --port 3000",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint .",
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
@@ -18,6 +18,8 @@
     "@repo/utils": "*",
     "@stripe/react-stripe-js": "^5.6.0",
     "@stripe/stripe-js": "^8.8.0",
-    "framer-motion": "^11.0.0"
+    "framer-motion": "^11.0.0",
+    "lucide-react": "^0.400.0",
+    "react-markdown": "^10.1.0"
   }
 }

apps/storefront/public/images/payment-methods/apple_pay.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="⚙    as-b2 as-z as-10 as-11 as-9a as-13 as-14 as-4q as-3 ⚙1q16c7l"><path fill="#F6F8FA" d="M0 0h32v32H0z"></path><path d="M26.672 8H5.328c-.163 0-.327.002-.49.004a3.265 3.265 0 0 0-.49.043 1.56 1.56 0 0 0-1.148.837c-.076.149-.124.3-.153.464a3.442 3.442 0 0 0-.043.49L3 10.06v12.255c0 .164.002.328.004.492.004.163.014.328.043.489a1.562 1.562 0 0 0 .837 1.148c.149.076.3.124.464.153a3.3 3.3 0 0 0 .49.044l.223.003h21.877l.226-.003c.162-.005.326-.015.488-.044a1.65 1.65 0 0 0 .465-.153c.295-.15.534-.389.683-.683.074-.147.126-.304.153-.466.027-.161.041-.324.043-.488.002-.075.003-.149.003-.224l.001-.268V10.062c0-.075-.002-.15-.004-.225a3.243 3.243 0 0 0-.043-.489 1.567 1.567 0 0 0-1.3-1.301 3.274 3.274 0 0 0-.49-.043L26.938 8h-.266Z" fill="#000"></path><path d="M26.672 8.555h.262c.071 0 .143.002.215.004.123.003.27.009.405.034.118.022.217.053.312.103a1.004 1.004 0 0 1 .54.751c.025.134.032.28.035.405l.004.214v12.515c0 .07-.002.141-.004.212 0 .136-.012.272-.034.406a1.08 1.08 0 0 1-.102.311.996.996 0 0 1-.44.44c-.098.05-.202.084-.31.102a2.822 2.822 0 0 1-.404.035 8.19 8.19 0 0 1-.217.002H5.064c-.071 0-.143 0-.212-.002a2.832 2.832 0 0 1-.406-.035 1.087 1.087 0 0 1-.312-.102.995.995 0 0 1-.44-.44 1.09 1.09 0 0 1-.102-.312 2.744 2.744 0 0 1-.033-.405 10.392 10.392 0 0 1-.004-.213V10.066c0-.072.001-.143.004-.215.003-.124.01-.269.034-.405.018-.108.052-.213.102-.31a.998.998 0 0 1 .44-.441 1.11 1.11 0 0 1 .311-.103c.135-.02.27-.032.406-.033l.213-.004h21.607Z" fill="#fff"></path><path d="M10.098 13.599c.223-.28.373-.652.333-1.035-.325.016-.723.214-.953.494-.207.238-.39.628-.342.994.366.032.731-.183.962-.453Zm.33.524c-.531-.032-.984.302-1.237.302-.254 0-.643-.286-1.063-.278a1.567 1.567 0 0 0-1.331.81c-.571.983-.151 2.442.404 3.244.27.396.594.833 1.022.817.405-.016.564-.26 1.055-.26s.634.26 1.062.252c.444-.008.722-.396.991-.793.31-.453.437-.889.444-.913-.007-.007-.857-.333-.864-1.308-.007-.818.666-1.206.699-1.23-.382-.563-.976-.627-1.183-.642m4.626-1.106c1.155 0 1.959.796 1.959 1.955 0 1.162-.82 1.963-1.988 1.963h-1.278v2.032h-.924v-5.95h2.231Zm-1.307 3.143h1.06c.804 0 1.261-.433 1.261-1.184 0-.75-.457-1.18-1.257-1.18h-1.064v2.364Zm3.508 1.574c0-.759.581-1.224 1.612-1.282l1.187-.07v-.334c0-.482-.326-.771-.87-.771-.515 0-.837.247-.915.635h-.84c.049-.784.716-1.362 1.788-1.362 1.052 0 1.724.557 1.724 1.428v2.99h-.853v-.714h-.02c-.252.483-.802.788-1.37.788-.85 0-1.443-.528-1.443-1.308Zm2.8-.39v-.343l-1.069.065c-.53.037-.832.273-.832.644 0 .38.313.627.791.627.623 0 1.11-.428 1.11-.994Zm1.692 3.22v-.722c.066.017.215.017.289.017.413 0 .635-.174.771-.619 0-.009.078-.264.078-.268l-1.566-4.342h.965l1.098 3.53h.016l1.097-3.53h.94l-1.625 4.565c-.37 1.052-.8 1.39-1.699 1.39a3.699 3.699 0 0 1-.363-.021Z" fill="#000"></path></svg>

apps/storefront/public/images/payment-methods/billie.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="⚙    as-b2 as-z as-10 as-11 as-9a as-13 as-14 as-4q as-3 ⚙1q16c7l"><path fill="#1C1C1E" d="M0 0h32v32H0z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M22.968 10.853c0 .856-.097 1.792-.283 2.666l.003-.002c1.747 1.328 2.78 3.345 2.78 5.48 0 3.86-3.305 7.003-7.363 7.003H8.25V11.004c0-1.925.844-3.786 2.316-5.104A7.537 7.537 0 0 1 15.6 4c.16 0 .322.006.481.014 3.795.228 6.887 3.296 6.887 6.84Zm-7.884 11.87h3.015c2.157 0 3.913-1.67 3.913-3.724 0-1.025-.434-1.95-1.136-2.624-1.33 2.412-3.228 4.493-5.792 6.349Zm4.27-10.117a9.985 9.985 0 0 0 .168-1.756c0-1.841-1.64-3.443-3.656-3.563a3.994 3.994 0 0 0-2.933 1.003c-.797.713-1.237 1.677-1.237 2.716v1.6h7.658Zm-1.255 2.666h-6.408v6.452c3.089-1.875 5.21-3.942 6.624-6.447-.07-.005-.145-.005-.216-.005Z" fill="#fff"></path></svg>

apps/storefront/public/images/payment-methods/cartes.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="⚙    as-b2 as-z as-10 as-11 as-9a as-13 as-14 as-4q as-3 ⚙1q16c7l"><path fill="#016797" d="M0 0h32v32H0z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M17.434 10.495v5.115h8.164a2.557 2.557 0 0 0 0-5.115h-8.164Zm-.697 5.115c-.046-1.006-.297-1.909-.72-2.675a5.076 5.076 0 0 0-2.007-2.007c-.852-.47-1.874-.728-3.019-.728H9.91c-1.145 0-2.166.258-3.018.728a5.076 5.076 0 0 0-2.007 2.007c-.471.853-.729 1.874-.729 3.019s.258 2.166.729 3.019A5.076 5.076 0 0 0 6.89 20.98c.852.47 1.873.728 3.018.728h1.082c1.145 0 2.167-.257 3.019-.728a5.076 5.076 0 0 0 2.007-2.007c.423-.766.674-1.669.72-2.675h-6.09v-.688h6.09Zm.697.688v5.115h8.164a2.557 2.557 0 0 0 0-5.115h-8.164Z" fill="#fff"></path></svg>

apps/storefront/public/images/payment-methods/discovery_card.svg

@@ -0,0 +1 @@
+<svg class="icon icon--full-color" viewBox="0 0 38 24" width="38" height="24" role="img" aria-labelledby="pi-discover" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="pi-discover">Discover</title><path fill="#000" opacity=".07" d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"></path><path d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32z" fill="#fff"></path><path d="M3.57 7.16H2v5.5h1.57c.83 0 1.43-.2 1.96-.63.63-.52 1-1.3 1-2.11-.01-1.63-1.22-2.76-2.96-2.76zm1.26 4.14c-.34.3-.77.44-1.47.44h-.29V8.1h.29c.69 0 1.11.12 1.47.44.37.33.59.84.59 1.37 0 .53-.22 1.06-.59 1.39zm2.19-4.14h1.07v5.5H7.02v-5.5zm3.69 2.11c-.64-.24-.83-.4-.83-.69 0-.35.34-.61.8-.61.32 0 .59.13.86.45l.56-.73c-.46-.4-1.01-.61-1.62-.61-.97 0-1.72.68-1.72 1.58 0 .76.35 1.15 1.35 1.51.42.15.63.25.74.31.21.14.32.34.32.57 0 .45-.35.78-.83.78-.51 0-.92-.26-1.17-.73l-.69.67c.49.73 1.09 1.05 1.9 1.05 1.11 0 1.9-.74 1.9-1.81.02-.89-.35-1.29-1.57-1.74zm1.92.65c0 1.62 1.27 2.87 2.9 2.87.46 0 .86-.09 1.34-.32v-1.26c-.43.43-.81.6-1.29.6-1.08 0-1.85-.78-1.85-1.9 0-1.06.79-1.89 1.8-1.89.51 0 .9.18 1.34.62V7.38c-.47-.24-.86-.34-1.32-.34-1.61 0-2.92 1.28-2.92 2.88zm12.76.94l-1.47-3.7h-1.17l2.33 5.64h.58l2.37-5.64h-1.16l-1.48 3.7zm3.13 1.8h3.04v-.93h-1.97v-1.48h1.9v-.93h-1.9V8.1h1.97v-.94h-3.04v5.5zm7.29-3.87c0-1.03-.71-1.62-1.95-1.62h-1.59v5.5h1.07v-2.21h.14l1.48 2.21h1.32l-1.73-2.32c.81-.17 1.26-.72 1.26-1.56zm-2.16.91h-.31V8.03h.33c.67 0 1.03.28 1.03.82 0 .55-.36.85-1.05.85z" fill="#231F20"></path><path d="M20.16 12.86a2.931 2.931 0 100-5.862 2.931 2.931 0 000 5.862z" fill="url(#pi-paint0_linear)"></path><path opacity=".65" d="M20.16 12.86a2.931 2.931 0 100-5.862 2.931 2.931 0 000 5.862z" fill="url(#pi-paint1_linear)"></path><path d="M36.57 7.506c0-.1-.07-.15-.18-.15h-.16v.48h.12v-.19l.14.19h.14l-.16-.2c.06-.01.1-.06.1-.13zm-.2.07h-.02v-.13h.02c.06 0 .09.02.09.06 0 .05-.03.07-.09.07z" fill="#231F20"></path><path d="M36.41 7.176c-.23 0-.42.19-.42.42 0 .23.19.42.42.42.23 0 .42-.19.42-.42 0-.23-.19-.42-.42-.42zm0 .77c-.18 0-.34-.15-.34-.35 0-.19.15-.35.34-.35.18 0 .33.16.33.35 0 .19-.15.35-.33.35z" fill="#231F20"></path><path d="M37 12.984S27.09 19.873 8.976 23h26.023a2 2 0 002-1.984l.024-3.02L37 12.985z" fill="#F48120"></path><defs><linearGradient id="pi-paint0_linear" x1="21.657" y1="12.275" x2="19.632" y2="9.104" gradientUnits="userSpaceOnUse"><stop stop-color="#F89F20"></stop><stop offset=".25" stop-color="#F79A20"></stop><stop offset=".533" stop-color="#F68D20"></stop><stop offset=".62" stop-color="#F58720"></stop><stop offset=".723" stop-color="#F48120"></stop><stop offset="1" stop-color="#F37521"></stop></linearGradient><linearGradient id="pi-paint1_linear" x1="21.338" y1="12.232" x2="18.378" y2="6.446" gradientUnits="userSpaceOnUse"><stop stop-color="#F58720"></stop><stop offset=".359" stop-color="#E16F27"></stop><stop offset=".703" stop-color="#D4602C"></stop><stop offset=".982" stop-color="#D05B2E"></stop></linearGradient></defs></svg>

apps/storefront/public/images/payment-methods/google_pay.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" class="⚙    as-b2 as-z as-10 as-11 as-9a as-13 as-14 as-4q as-3 ⚙1q16c7l"><path fill="#F5F6F8" d="M0 0h32v32H0z"></path><path fill="#3C4043" d="M15.135 16.453v3.008h-.954v-7.428h2.53c.641 0 1.188.214 1.636.642.457.427.686.95.686 1.566 0 .63-.229 1.153-.686 1.575-.443.423-.99.632-1.636.632h-1.576v.005Zm0-3.505v2.59h1.596c.378 0 .696-.13.944-.383.254-.253.383-.561.383-.91a1.24 1.24 0 0 0-.383-.9 1.238 1.238 0 0 0-.944-.392h-1.596v-.005Zm6.393 1.262c.706 0 1.263.19 1.67.567.408.378.612.895.612 1.551v3.133h-.91v-.706h-.04c-.392.581-.92.87-1.575.87-.562 0-1.03-.165-1.407-.498a1.587 1.587 0 0 1-.567-1.242c0-.527.199-.945.597-1.253.397-.313.93-.468 1.59-.468.567 0 1.034.105 1.397.314v-.22c0-.332-.129-.61-.392-.844a1.347 1.347 0 0 0-.925-.348c-.532 0-.954.223-1.263.676l-.84-.527c.462-.671 1.148-1.004 2.053-1.004Zm-1.233 3.69c0 .248.105.457.318.62.21.165.458.25.741.25.403 0 .76-.15 1.074-.448.313-.298.472-.646.472-1.049-.298-.234-.71-.353-1.242-.353-.388 0-.711.095-.97.278-.263.194-.393.428-.393.701ZM29 14.375l-3.182 7.318h-.984l1.183-2.56-2.098-4.758h1.039l1.511 3.649h.02l1.472-3.65H29Z"></path><path fill="#4285F4" d="M11.339 15.846a5 5 0 0 0-.08-.895h-4v1.64l2.304.001a1.974 1.974 0 0 1-.856 1.321v1.065h1.372c.8-.742 1.26-1.837 1.26-3.132Z"></path><path fill="#34A853" d="M8.707 17.913c-.381.258-.873.409-1.448.409-1.111 0-2.054-.75-2.392-1.758H3.453v1.097a4.26 4.26 0 0 0 3.806 2.346c1.15 0 2.117-.379 2.82-1.03l-1.372-1.064Z"></path><path fill="#FABB05" d="M4.735 15.75c0-.284.047-.558.133-.816v-1.097H3.453A4.236 4.236 0 0 0 3 15.749c0 .688.164 1.338.453 1.913l1.415-1.098a2.568 2.568 0 0 1-.133-.815Z"></path><path fill="#E94235" d="M7.258 13.177c.628 0 1.19.216 1.634.639l1.216-1.215a4.091 4.091 0 0 0-2.85-1.11 4.26 4.26 0 0 0-3.806 2.346l1.415 1.098c.338-1.01 1.28-1.758 2.391-1.758Z"></path></svg>

apps/storefront/public/images/payment-methods/klarna.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="⚙    as-b2 as-z as-10 as-11 as-9a as-13 as-14 as-4q as-3 ⚙1q16c7l"><path fill="#FFA8CD" d="M0 0h32v32H0z"></path><path fill="#0B051D" d="M23.665 6h-4.342c0 3.571-2.185 6.771-5.506 9.057l-1.305.914V6H8v20h4.512v-9.914L19.975 26h5.506l-7.18-9.486c3.264-2.371 5.392-6.057 5.364-10.514Z"></path></svg>

apps/storefront/public/images/payment-methods/link.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="⚙    as-b2 as-z as-10 as-11 as-9a as-13 as-14 as-4q as-3 ⚙1q16c7l"><path fill="#00D66F" d="M0 0h32v32H0z"></path><path fill="#011E0F" d="M15.144 6H10c1 4.18 3.923 7.753 7.58 10C13.917 18.246 11 21.82 10 26h5.144c1.275-3.867 4.805-7.227 9.142-7.914v-4.18c-4.344-.68-7.874-4.04-9.142-7.906Z"></path></svg>

apps/storefront/public/images/payment-methods/master_card.svg

@@ -0,0 +1 @@
+<svg class="icon icon--full-color" viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg" role="img" width="38" height="24" aria-labelledby="pi-master"><title id="pi-master">Mastercard</title><path opacity=".07" d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"></path><path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32"></path><circle fill="#EB001B" cx="15" cy="12" r="7"></circle><circle fill="#F79E1B" cx="23" cy="12" r="7"></circle><path fill="#FF5F00" d="M22 12c0-2.4-1.2-4.5-3-5.7-1.8 1.3-3 3.4-3 5.7s1.2 4.5 3 5.7c1.8-1.2 3-3.3 3-5.7z"></path></svg>

apps/storefront/public/images/payment-methods/revoult_pay.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="⚙    as-b2 as-z as-10 as-11 as-9a as-13 as-14 as-4q as-3 ⚙1q16c7l"><path fill="#191C1F" d="M0 0h32v32H0z"></path><path fill="#fff" d="M13.465 10.936H10V26h3.465V10.936Z"></path><path fill="#fff" d="M24.332 11.797C24.332 8.601 21.911 6 18.935 6H10v3.217h8.51c1.347 0 2.462 1.138 2.487 2.536.012.7-.232 1.36-.688 1.86-.456.5-1.066.776-1.717.776h-3.315c-.117 0-.213.102-.213.229v2.86a.24.24 0 0 0 .04.133L20.73 26h4.117l-5.638-8.412c2.84-.153 5.124-2.717 5.124-5.79Z"></path></svg>

apps/storefront/public/images/payment-methods/visa_card.svg

@@ -0,0 +1 @@
+<svg class="icon icon--full-color" viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg" role="img" width="38" height="24" aria-labelledby="pi-visa"><title id="pi-visa">Visa</title><path opacity=".07" d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"></path><path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32"></path><path d="M28.3 10.1H28c-.4 1-.7 1.5-1 3h1.9c-.3-1.5-.3-2.2-.6-3zm2.9 5.9h-1.7c-.1 0-.1 0-.2-.1l-.2-.9-.1-.2h-2.4c-.1 0-.2 0-.2.2l-.3.9c0 .1-.1.1-.1.1h-2.1l.2-.5L27 8.7c0-.5.3-.7.8-.7h1.5c.1 0 .2 0 .2.2l1.4 6.5c.1.4.2.7.2 1.1.1.1.1.1.1.2zm-13.4-.3l.4-1.8c.1 0 .2.1.2.1.7.3 1.4.5 2.1.4.2 0 .5-.1.7-.2.5-.2.5-.7.1-1.1-.2-.2-.5-.3-.8-.5-.4-.2-.8-.4-1.1-.7-1.2-1-.8-2.4-.1-3.1.6-.4.9-.8 1.7-.8 1.2 0 2.5 0 3.1.2h.1c-.1.6-.2 1.1-.4 1.7-.5-.2-1-.4-1.5-.4-.3 0-.6 0-.9.1-.2 0-.3.1-.4.2-.2.2-.2.5 0 .7l.5.4c.4.2.8.4 1.1.6.5.3 1 .8 1.1 1.4.2.9-.1 1.7-.9 2.3-.5.4-.7.6-1.4.6-1.4 0-2.5.1-3.4-.2-.1.2-.1.2-.2.1zm-3.5.3c.1-.7.1-.7.2-1 .5-2.2 1-4.5 1.4-6.7.1-.2.1-.3.3-.3H18c-.2 1.2-.4 2.1-.7 3.2-.3 1.5-.6 3-1 4.5 0 .2-.1.2-.3.2M5 8.2c0-.1.2-.2.3-.2h3.4c.5 0 .9.3 1 .8l.9 4.4c0 .1 0 .1.1.2 0-.1.1-.1.1-.1l2.1-5.1c-.1-.1 0-.2.1-.2h2.1c0 .1 0 .1-.1.2l-3.1 7.3c-.1.2-.1.3-.2.4-.1.1-.3 0-.5 0H9.7c-.1 0-.2 0-.2-.2L7.9 9.5c-.2-.2-.5-.5-.9-.6-.6-.3-1.7-.5-1.9-.5L5 8.2z" fill="#142688"></path></svg>

apps/storefront/src/app/page.tsx

@@ -7,6 +7,7 @@ import { RecentlyAddedSection } from "../components/sections/hompepage/products-
 import { SpecialOffersSection } from "../components/sections/hompepage/products-sections/special-offers/SpecialOffersSection";
 import { TopPicksSection } from "../components/sections/hompepage/products-sections/top-picks/TopPicsSection";
 import { WishlistSection } from "../components/sections/hompepage/wishlist/WishlistSection";
+import { CustomerConfidenceBooster } from "../components/sections/CustomerConfidenceBooster";
 import { Toast } from "@heroui/react";
 
 export default function HomePage() {
@@ -20,6 +21,7 @@ export default function HomePage() {
       <RecentlyAddedSection />
       <SpecialOffersSection />
       <TopPicksSection />
+      <CustomerConfidenceBooster />
       <NewsletterSection />
     </main>
   );

apps/storefront/src/components/checkout/content/AddressSelector.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button, Chip, RadioGroup, Radio, Label, Skeleton } from "@heroui/react";
+import { Button, Chip, RadioGroup, Radio, Skeleton } from "@heroui/react";
 import type { CheckoutAddress } from "@/lib/checkout/types";
 
 type AddressSelectorProps = {

apps/storefront/src/components/layout/footer/Footer.tsx

@@ -1,5 +1,24 @@
+import Image from "next/image";
 import { BrandLogo } from "@/components/layout/BrandLogo";
 
+const carriers = [
+  { name: "DPD", src: "/images/carriers/dpd.png", width: 30, height: 15 },
+  { name: "Evri", src: "/images/carriers/evri.png", width: 30, height: 15 },
+];
+
+const paymentMethods = [
+  { name: "Visa", src: "/images/payment-methods/visa_card.svg" },
+  { name: "Mastercard", src: "/images/payment-methods/master_card.svg" },
+  { name: "Discover", src: "/images/payment-methods/discovery_card.svg" },
+  { name: "Apple Pay", src: "/images/payment-methods/apple_pay.svg" },
+  { name: "Google Pay", src: "/images/payment-methods/google_pay.svg" },
+  { name: "Link", src: "/images/payment-methods/link.svg" },
+  { name: "Revolut Pay", src: "/images/payment-methods/revoult_pay.svg" },
+  { name: "Billie", src: "/images/payment-methods/billie.svg" },
+  { name: "Cartes", src: "/images/payment-methods/cartes.svg" },
+  { name: "Klarna", src: "/images/payment-methods/klarna.svg" },
+];
+
 const linkClasses =
   "text-sm text-[#3d5554] transition-colors hover:text-[#38a99f]";
 
@@ -217,6 +236,61 @@ export function Footer() {
           {/* Column 4 — Utility */}
           <FooterColumn groups={utilityGroups} />
         </div>
+
+        {/* Carrier partners + Payment methods */}
+        <section
+          className="border-t border-[#e8f7f6] px-4 py-6 lg:px-6"
+          aria-label="Delivery and payment options"
+        >
+          <div className="mx-auto flex min-w-0 max-w-[1400px] flex-col gap-6 md:flex-row md:items-center md:justify-between">
+            {/* Delivery partners — left */}
+            <div className="flex flex-col items-center gap-3 sm:flex-row sm:justify-center sm:gap-6 md:justify-start">
+              <p className="text-xs font-medium text-[#3d5554]">
+                DELIVERY PARTNERS
+              </p>
+              <div className="flex flex-wrap items-center justify-center gap-6 md:justify-start">
+                {carriers.map((carrier) => (
+                  <span
+                    key={carrier.name}
+                    className="flex items-center justify-center rounded px-3 py-2"
+                    title={carrier.name}
+                  >
+                    <Image
+                      src={carrier.src}
+                      alt={carrier.name}
+                      width={carrier.width}
+                      height={carrier.height}
+                      className="h-5 w-auto object-contain md:h-6"
+                    />
+                  </span>
+                ))}
+              </div>
+            </div>
+            {/* Payment methods — right */}
+            <div className="flex flex-col items-center gap-3 sm:flex-row sm:justify-center sm:gap-4 md:justify-end">
+              <p className="text-xs font-medium text-[#3d5554]">
+                PAYMENT METHODS
+              </p>
+              <div className="flex flex-wrap items-center justify-center gap-3 md:justify-end">
+                {paymentMethods.map((method) => (
+                  <span
+                    key={method.name}
+                    className="flex items-center justify-center px-2 "
+                    title={method.name}
+                  >
+                    <Image
+                      src={method.src}
+                      alt={method.name}
+                      width={30}
+                      height={15}
+                      className="h-6 w-auto max-w-10 object-contain md:h-7"
+                    />
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
       </div>
 
       {/* Copyright bar */}
@@ -239,10 +313,10 @@ export function Footer() {
               Privacy Policy
             </a>
             <a
-              href="/sitemap"
+              href="/data-protection"
               className="text-xs text-white/80 transition-colors hover:text-white"
             >
-              Site Map
+              Data Protection
             </a>
           </div>
         </div>

apps/storefront/src/components/layout/header/desktop/HeaderUserAction.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Link from "next/link";
 import { useConvexAuth } from "convex/react";
 import { UserButton } from "@clerk/nextjs";
 
@@ -27,7 +28,7 @@ export function HeaderUserAction() {
 
   if (isLoading || !isAuthenticated) {
     return (
-      <a
+      <Link
         href="/sign-in"
         className="group flex flex-col items-center gap-1"
       >
@@ -48,7 +49,7 @@ export function HeaderUserAction() {
         <span className="text-[10px] font-medium tracking-wide text-[#3d5554] transition-colors group-hover:text-[#236f6b]">
           Sign In
         </span>
-      </a>
+      </Link>
     );
   }
 

apps/storefront/src/components/layout/header/mobile/MobileHeaderUserAction.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Link from "next/link";
 import { useConvexAuth } from "convex/react";
 import { UserButton } from "@clerk/nextjs";
 
@@ -27,7 +28,7 @@ export function MobileHeaderUserAction() {
 
   if (isLoading || !isAuthenticated) {
     return (
-      <a
+      <Link
         href="/sign-in"
         className="flex h-8 w-8 items-center justify-center rounded-full border border-[#d9e8e7] bg-[#f9fcfb]"
       >
@@ -45,7 +46,7 @@ export function MobileHeaderUserAction() {
           <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
           <circle cx="12" cy="7" r="4" />
         </svg>
-      </a>
+      </Link>
     );
   }
 

apps/storefront/src/components/product-detail/reviews/ProductDetailReviewsPanel.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { useQuery } from "convex/react";
 import { api } from "../../../../../../convex/_generated/api";
 import type { Id } from "../../../../../../convex/_generated/dataModel";
-import { ReviewSortOption } from "@/lib/product-detail/types";
+import type { ProductDetailReview, ReviewSortOption } from "@/lib/product-detail/types";
 import { ReviewSortBar } from "./ReviewSortBar";
 import { ReviewList } from "./ReviewList";
 import { ReviewForm } from "./ReviewForm";
@@ -27,7 +27,7 @@ export function ProductDetailReviewsPanel({ productId, initialRating, initialRev
         productId: productId as Id<"products">,
         sortBy,
         limit: offset + LIMIT,
-        offset: 0, // In this pattern, we increase limit to fetch more pages without resetting offset, so previously fetched array grows
+        offset: 0,
     });
 
     if (result === undefined) return <ProductDetailReviewsSkeleton />;
@@ -58,7 +58,7 @@ export function ProductDetailReviewsPanel({ productId, initialRating, initialRev
                         onSortChange={handleSortChange}
                     />
                     <ReviewList
-                        reviews={page as any}
+                        reviews={page as ProductDetailReview[]}
                         total={total}
                         hasMore={hasMore}
                         isLoading={result === undefined}

apps/storefront/src/components/product-detail/sections/ProductDetailDescriptionSection.tsx

@@ -1,11 +1,16 @@
+import ReactMarkdown from "react-markdown";
+
 type ProductDetailDescriptionSectionProps = {
-  /** Product description (HTML or plain text); server-rendered in initial HTML per SEO. */
+  /** Product description (Markdown); server-rendered in initial HTML per SEO. */
   description?: string | null;
 };
 
+const descriptionClasses =
+  "max-w-3xl text-sm leading-relaxed text-[var(--foreground)]/80 [&_ol]:mb-3 [&_ol]:list-inside [&_ol]:list-decimal [&_p:last-child]:mb-0 [&_p]:mb-3 [&_ul]:mb-3 [&_ul]:list-inside [&_ul]:list-disc";
+
 /**
  * Description content for the PDP tabs section.
- * Renders inside a parent <section> provided by ProductDetailTabsSection.
+ * Renders Markdown as HTML inside a parent <section> provided by ProductDetailTabsSection.
  * If empty, shows a short fallback message.
  */
 export function ProductDetailDescriptionSection({
@@ -15,10 +20,9 @@ export function ProductDetailDescriptionSection({
     typeof description === "string" && description.trim().length > 0;
 
   return hasContent ? (
-    <div
-      className="max-w-3xl text-sm leading-relaxed text-[var(--foreground)]/80 [&_ol]:mb-3 [&_ol]:list-inside [&_ol]:list-decimal [&_p:last-child]:mb-0 [&_p]:mb-3 [&_ul]:mb-3 [&_ul]:list-inside [&_ul]:list-disc"
-      dangerouslySetInnerHTML={{ __html: description!.trim() }}
-    />
+    <div className={descriptionClasses}>
+      <ReactMarkdown>{description!.trim()}</ReactMarkdown>
+    </div>
   ) : (
     <p className="text-sm text-[var(--muted)]">No description available.</p>
   );

apps/storefront/src/components/product-detail/sections/ProductDetailHeroSection.tsx

@@ -206,7 +206,10 @@ export function ProductDetailHeroSection({
   const [addError, setAddError] = useState<string | null>(null);
 
   const images: ProductDetailImage[] = product.images ?? [];
-  const variants: ProductDetailVariant[] = product.variants ?? [];
+  const variants = useMemo(
+    () => (product.variants ?? []) as ProductDetailVariant[],
+    [product.variants],
+  );
   const mainImage = images[selectedImageIndex] ?? images[0];
   const dimensions = useMemo(
     () => getAttributeDimensions(variants),

apps/storefront/src/components/product-detail/sections/ProductDetailHeroSectionWrapper.tsx

@@ -23,7 +23,7 @@ export async function ProductDetailHeroSectionWrapper({
 
   return (
     <ProductDetailHeroSection
-      product={product as any}
+      product={product}
       category={category}
       subCategory={subCategory}
     />

apps/storefront/src/components/product-detail/sections/ProductDetailSectionsWrapper.tsx

@@ -1,4 +1,3 @@
-import { Suspense } from "react";
 import { fetchQuery } from "convex/nextjs";
 import { notFound } from "next/navigation";
 import { api } from "../../../../../../convex/_generated/api";

apps/storefront/src/components/sections/CustomerConfidenceBooster.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+/**
+ * Customer confidence booster: trust badges (Free Shipping, Easy Returns, Secure Checkout).
+ * Rendered below product grids on shop pages and homepage. PetPaws theme, mobile-first.
+ */
+export function CustomerConfidenceBooster() {
+  const items: { title: string; subheading: string; icon: React.ReactNode }[] = [
+    {
+      title: "Free Shipping",
+      subheading: "No extra costs (T&C apply)",
+      icon: (
+        <svg
+          className="size-8 shrink-0"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden
+        >
+          <path d="M5 18H3c-.6 0-1-.4-1-1V7c0-.6.4-1 1-1h10c.6 0 1 .4 1 1v2" />
+          <path d="M19 10h2l-1.5 4.5L18 10h2" />
+          <path d="M14 10h4" />
+          <path d="M2 14h15.5" />
+          <circle cx="7" cy="18" r="2" />
+          <path d="M9 18h6" />
+          <circle cx="17" cy="18" r="2" />
+        </svg>
+      ),
+    },
+    {
+      title: "Easy Returns",
+      subheading: "Return with ease",
+      icon: (
+        <svg
+          className="size-8 shrink-0"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden
+        >
+          <path d="M16 3h5v5" />
+          <path d="M8 3H3v5" />
+          <path d="M12 22v-8.3a4 4 0 0 0-1.2-2.9L3 7" />
+          <path d="m3 7 7.8 7.8a4 4 0 0 1 1.2 2.9V22" />
+          <path d="M21 7l-7.8 7.8a4 4 0 0 1-1.2 2.9V12" />
+        </svg>
+      ),
+    },
+    {
+      title: "Secure Checkout",
+      subheading: "Secure payment",
+      icon: (
+        <svg
+          className="size-8 shrink-0"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden
+        >
+          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+        </svg>
+      ),
+    },
+  ];
+
+  return (
+    <section
+      aria-label="Why shop with us"
+      className="w-full border border-[#d9e8e7] bg-gradient-to-r from-[#e8f7f6] to-[#f0f8f7] px-4 py-6 md:px-6 md:py-8 m-16 max-w-7xl mx-auto rounded-xl"
+    >
+      <div className="mx-auto grid w-full max-w-4xl grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 md:gap-8">
+        {items.map(({ title, subheading, icon }) => (
+          <div
+            key={title}
+            className="flex flex-col items-center gap-3 text-center"
+          >
+            <div
+              className="flex size-12 items-center justify-center rounded-full bg-white text-[#236f6b] shadow-sm ring-1 ring-[#d9e8e7]"
+              aria-hidden
+            >
+              {icon}
+            </div>
+            <div className="flex flex-col gap-0.5">
+              <span
+                className="block font-[family-name:var(--font-fraunces)] text-base font-semibold text-[#1a2e2d] md:text-lg"
+              >
+                {title}
+              </span>
+              <span className="block text-sm text-[#3d5554]">
+                {subheading}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

apps/storefront/src/components/shop/PetCategoryPage.tsx

@@ -25,6 +25,7 @@ import { ShopToolbar, type SortOption } from "@/components/shop/ShopToolbar";
 import { ShopEmptyState } from "@/components/shop/state/ShopEmptyState";
 import { ShopErrorState } from "@/components/shop/state/ShopErrorState";
 import { ShopProductGridSkeleton } from "@/components/shop/state/ShopProductGridSkeleton";
+import { CustomerConfidenceBooster } from "@/components/sections/CustomerConfidenceBooster";
 
 const SORT_OPTIONS: SortOption[] = [
   { value: "newest", label: "Newest" },
@@ -192,6 +193,9 @@ export function PetCategoryPage({ slug }: { slug: PetCategorySlug }) {
                   }))}
                 />
               )}
+            <div className="mt-8">
+              <CustomerConfidenceBooster />
+            </div>
             </div>
           </div>
         </div>

apps/storefront/src/components/shop/RecentlyAddedPage.tsx

@@ -13,6 +13,7 @@ import { ShopToolbar, type SortOption } from "@/components/shop/ShopToolbar";
 import { ShopEmptyState } from "@/components/shop/state/ShopEmptyState";
 import { ShopErrorState } from "@/components/shop/state/ShopErrorState";
 import { ShopProductGridSkeleton } from "@/components/shop/state/ShopProductGridSkeleton";
+import { CustomerConfidenceBooster } from "@/components/sections/CustomerConfidenceBooster";
 import {
   filterStateFromSearchParams,
   mergeFilterStateIntoSearchParams,
@@ -162,6 +163,9 @@ export function RecentlyAddedPage() {
                 }))}
               />
             )}
+            <div className="mt-8">
+              <CustomerConfidenceBooster />
+            </div>
           </div>
         </div>
       </div>

apps/storefront/src/components/shop/ShopFilterContent.tsx

@@ -22,16 +22,6 @@ type ShopFilterContentProps = {
   isLoading?: boolean;
 };
 
-const FILTER_SECTION_IDS = [
-  "brand",
-  "tags",
-  "petSize",
-  "ageRange",
-  "specialDiet",
-  "material",
-  "flavor",
-] as const;
-
 export function ShopFilterContent({
   options,
   value,

apps/storefront/src/components/shop/ShopFilterSidebar.tsx

@@ -9,7 +9,6 @@ import type { ShopFilterState } from "@/lib/shop/filterState";
  * otherwise renders children (e.g. sub-category links).
  */
 export function ShopFilterSidebar({
-  children,
   className,
   filterOptions,
   filterState,

apps/storefront/src/components/shop/ShopIndexContent.tsx

@@ -14,6 +14,7 @@ import { ShopToolbar, type SortOption } from "@/components/shop/ShopToolbar";
 import { ShopEmptyState } from "@/components/shop/state/ShopEmptyState";
 import { ShopErrorState } from "@/components/shop/state/ShopErrorState";
 import { ShopProductGridSkeleton } from "@/components/shop/state/ShopProductGridSkeleton";
+import { CustomerConfidenceBooster } from "@/components/sections/CustomerConfidenceBooster";
 import {
   filterStateFromSearchParams,
   filterStateToSearchParams,
@@ -162,6 +163,9 @@ export function ShopIndexContent() {
                 }))}
               />
             )}
+            <div className="mt-8">
+              <CustomerConfidenceBooster />
+            </div>
           </div>
         </div>
       </div>

apps/storefront/src/components/shop/ShopToolbar.tsx

@@ -10,7 +10,6 @@ export function ShopToolbar({
   currentSort,
   onSortChange,
   onOpenFilter,
-  resultCount,
 }: {
   sortOptions: SortOption[];
   currentSort: string;

apps/storefront/src/components/shop/SubCategoryPageContent.tsx

@@ -16,6 +16,7 @@ import { ShopToolbar, type SortOption } from "@/components/shop/ShopToolbar";
 import { ShopEmptyState } from "@/components/shop/state/ShopEmptyState";
 import { ShopErrorState } from "@/components/shop/state/ShopErrorState";
 import { ShopProductGridSkeleton } from "@/components/shop/state/ShopProductGridSkeleton";
+import { CustomerConfidenceBooster } from "@/components/sections/CustomerConfidenceBooster";
 import {
   filterStateFromSearchParams,
   filterStateToSearchParams,
@@ -209,6 +210,9 @@ export function SubCategoryPageContent({
                 }))}
               />
             )}
+            <div className="mt-8">
+              <CustomerConfidenceBooster />
+            </div>
           </div>
         </div>
       </div>

apps/storefront/src/components/shop/TagShopPage.tsx

@@ -13,6 +13,7 @@ import { ShopToolbar, type SortOption } from "@/components/shop/ShopToolbar";
 import { ShopEmptyState } from "@/components/shop/state/ShopEmptyState";
 import { ShopErrorState } from "@/components/shop/state/ShopErrorState";
 import { ShopProductGridSkeleton } from "@/components/shop/state/ShopProductGridSkeleton";
+import { CustomerConfidenceBooster } from "@/components/sections/CustomerConfidenceBooster";
 import {
   filterStateFromSearchParams,
   mergeFilterStateIntoSearchParams,
@@ -168,6 +169,9 @@ export function TagShopPage({
                 }))}
               />
             )}
+            <div className="mt-8">
+              <CustomerConfidenceBooster />
+            </div>
           </div>
         </div>
       </div>

apps/storefront/src/components/shop/TopCategoryPage.tsx

@@ -15,6 +15,7 @@ import { ShopToolbar, type SortOption } from "@/components/shop/ShopToolbar";
 import { ShopEmptyState } from "@/components/shop/state/ShopEmptyState";
 import { ShopErrorState } from "@/components/shop/state/ShopErrorState";
 import { ShopProductGridSkeleton } from "@/components/shop/state/ShopProductGridSkeleton";
+import { CustomerConfidenceBooster } from "@/components/sections/CustomerConfidenceBooster";
 import {
   PET_CATEGORY_SLUGS,
   TOP_CATEGORY_SLUGS,
@@ -247,6 +248,9 @@ export function TopCategoryPage({ slug }: { slug: TopCategorySlug }) {
                 }))}
               />
             )}
+            <div className="mt-8">
+              <CustomerConfidenceBooster />
+            </div>
           </div>
         </div>
       </div>

apps/storefront/src/components/wishlist/WishlistPageView.tsx

@@ -15,8 +15,7 @@ import { WishlistSignInPrompt } from "./state/WishlistSignInPrompt";
 export function WishlistPageView() {
   const { isAuthenticated, isLoading: authLoading } = useConvexAuth();
   const { items, isLoading, isEmpty } = useWishlist();
-  const { removeItem, isRemoving, addToCart, isAddingToCart } =
-    useWishlistMutations();
+  const { removeItem, isRemoving, addToCart } = useWishlistMutations();
 
   const [removeTarget, setRemoveTarget] = useState<WishlistItem | null>(null);
   const [removingId, setRemovingId] = useState<string | null>(null);

apps/storefront/src/components/wishlist/state/WishlistEmptyState.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import Link from "next/link";
-import { WISHLIST_PATH } from "@/lib/wishlist/constants";
 
 function HeartIcon() {
   return (

apps/storefront/src/lib/checkout/useAddressMutations.ts

@@ -3,6 +3,7 @@
 import { useMutation } from "convex/react";
 import { useCallback } from "react";
 import { api } from "../../../../../convex/_generated/api";
+import type { Id } from "../../../../../convex/_generated/dataModel";
 import type { AddressFormData } from "./types";
 
 /**
@@ -52,7 +53,7 @@ export function useAddressMutations(): {
       data: Partial<AddressFormData> & { isValidated?: boolean },
     ): Promise<void> => {
       await updateMutation({
-        id: id as any,
+        id: id as Id<"addresses">,
         ...(data.firstName !== undefined && { firstName: data.firstName }),
         ...(data.lastName !== undefined && { lastName: data.lastName }),
         ...(data.phone !== undefined && { phone: data.phone }),
@@ -69,14 +70,14 @@ export function useAddressMutations(): {
 
   const setDefault = useCallback(
     async (id: string): Promise<void> => {
-      await setDefaultMutation({ id: id as any });
+      await setDefaultMutation({ id: id as Id<"addresses"> });
     },
     [setDefaultMutation],
   );
 
   const markValidated = useCallback(
     async (id: string, isValidated: boolean): Promise<void> => {
-      await markValidatedMutation({ id: id as any, isValidated });
+      await markValidatedMutation({ id: id as Id<"addresses">, isValidated });
     },
     [markValidatedMutation],
   );

apps/storefront/src/lib/checkout/useShippingRate.test.tsx

@@ -114,7 +114,7 @@ describe("useShippingRate", () => {
 
     expect(result.current.result).toBeNull();
     expect(result.current.error).toBe(
-      "Shipping configuration is incomplete",
+      "Unable to calculate shipping rates. Please try again.",
     );
   });
 
@@ -140,7 +140,9 @@ describe("useShippingRate", () => {
     );
 
     await waitFor(() => {
-      expect(result.current.error).toBe("Network timeout");
+      expect(result.current.error).toBe(
+        "Unable to calculate shipping rates. Please try again.",
+      );
     });
 
     mockActionFn.mockResolvedValue(sampleResult);

apps/storefront/src/lib/search/useClickOutside.test.tsx

@@ -17,7 +17,7 @@ describe("useClickOutside", () => {
 
   it("does not call handler when enabled is false", () => {
     const handler = vi.fn();
-    const { result } = renderHook(() => {
+    renderHook(() => {
       const ref = useRef<HTMLDivElement>(document.createElement("div"));
       useClickOutside([ref], handler, false);
       return ref;

apps/storefront/src/lib/session/useCartSession.test.tsx

@@ -5,8 +5,14 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { renderHook } from "@testing-library/react";
 import { useCartSession } from "./useCartSession";
 
-const mockUseAuth = vi.fn();
-vi.mock("@clerk/nextjs", () => ({ useAuth: () => mockUseAuth() }));
+const mockUseConvexAuth = vi.fn();
+vi.mock("convex/react", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("convex/react")>();
+  return {
+    ...actual,
+    useConvexAuth: () => mockUseConvexAuth(),
+  };
+});
 
 const mockGetGuestSessionId = vi.fn();
 const mockSetGuestSessionCookie = vi.fn();
@@ -21,17 +27,18 @@ describe("useCartSession", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     mockGenerateGuestSessionId.mockReturnValue("generated-uuid-123");
+    mockUseConvexAuth.mockReturnValue({ isLoading: false, isAuthenticated: false });
   });
 
   it("returns authenticated session when loaded and signed in", () => {
-    mockUseAuth.mockReturnValue({ isLoaded: true, isSignedIn: true });
+    mockUseConvexAuth.mockReturnValue({ isLoading: false, isAuthenticated: true });
     const { result } = renderHook(() => useCartSession());
     expect(result.current).toEqual({ sessionId: undefined, isGuest: false });
     expect(mockGetGuestSessionId).not.toHaveBeenCalled();
   });
 
   it("returns guest session with cookie value when not signed in and cookie present", () => {
-    mockUseAuth.mockReturnValue({ isLoaded: true, isSignedIn: false });
+    mockUseConvexAuth.mockReturnValue({ isLoading: false, isAuthenticated: false });
     mockGetGuestSessionId.mockReturnValue("cookie-uuid-456");
     const { result } = renderHook(() => useCartSession());
     expect(result.current).toEqual({
@@ -44,7 +51,7 @@ describe("useCartSession", () => {
   });
 
   it("returns guest session and sets cookie when not signed in and cookie missing", () => {
-    mockUseAuth.mockReturnValue({ isLoaded: true, isSignedIn: false });
+    mockUseConvexAuth.mockReturnValue({ isLoading: false, isAuthenticated: false });
     mockGetGuestSessionId.mockReturnValue(null);
     const { result } = renderHook(() => useCartSession());
     expect(result.current).toEqual({
@@ -57,7 +64,7 @@ describe("useCartSession", () => {
   });
 
   it("treats not-loaded auth as guest and uses cookie when present", () => {
-    mockUseAuth.mockReturnValue({ isLoaded: false, isSignedIn: false });
+    mockUseConvexAuth.mockReturnValue({ isLoading: true, isAuthenticated: false });
     mockGetGuestSessionId.mockReturnValue("existing-guest-id");
     const { result } = renderHook(() => useCartSession());
     expect(result.current).toEqual({
@@ -68,7 +75,7 @@ describe("useCartSession", () => {
   });
 
   it("treats not-loaded auth as guest and creates session when cookie missing", () => {
-    mockUseAuth.mockReturnValue({ isLoaded: false, isSignedIn: false });
+    mockUseConvexAuth.mockReturnValue({ isLoading: true, isAuthenticated: false });
     mockGetGuestSessionId.mockReturnValue(null);
     const { result } = renderHook(() => useCartSession());
     expect(result.current).toEqual({
@@ -79,7 +86,7 @@ describe("useCartSession", () => {
   });
 
   it("returns authenticated only when both isLoaded and isSignedIn are true", () => {
-    mockUseAuth.mockReturnValue({ isLoaded: true, isSignedIn: false });
+    mockUseConvexAuth.mockReturnValue({ isLoading: false, isAuthenticated: false });
     mockGetGuestSessionId.mockReturnValue("guest-id");
     const { result } = renderHook(() => useCartSession());
     expect(result.current.isGuest).toBe(true);

convex/_generated/api.d.ts

@@ -0,0 +1,247 @@
+/* eslint-disable */
+/**
+ * Generated `api` utility.
+ *
+ * THIS CODE IS AUTOMATICALLY GENERATED.
+ *
+ * To regenerate, run `npx convex dev`.
+ * @module
+ */
+
+import type * as addresses from "../addresses.js";
+import type * as adminInvitations from "../adminInvitations.js";
+import type * as carts from "../carts.js";
+import type * as categories from "../categories.js";
+import type * as checkout from "../checkout.js";
+import type * as checkoutActions from "../checkoutActions.js";
+import type * as emails from "../emails.js";
+import type * as fulfillmentActions from "../fulfillmentActions.js";
+import type * as http from "../http.js";
+import type * as model_carts from "../model/carts.js";
+import type * as model_categories from "../model/categories.js";
+import type * as model_checkout from "../model/checkout.js";
+import type * as model_orders from "../model/orders.js";
+import type * as model_products from "../model/products.js";
+import type * as model_shippo from "../model/shippo.js";
+import type * as model_stripe from "../model/stripe.js";
+import type * as model_users from "../model/users.js";
+import type * as orders from "../orders.js";
+import type * as products from "../products.js";
+import type * as returnActions from "../returnActions.js";
+import type * as reviews from "../reviews.js";
+import type * as shippoWebhook from "../shippoWebhook.js";
+import type * as stripeActions from "../stripeActions.js";
+import type * as users from "../users.js";
+import type * as wishlists from "../wishlists.js";
+
+import type {
+  ApiFromModules,
+  FilterApi,
+  FunctionReference,
+} from "convex/server";
+
+declare const fullApi: ApiFromModules<{
+  addresses: typeof addresses;
+  adminInvitations: typeof adminInvitations;
+  carts: typeof carts;
+  categories: typeof categories;
+  checkout: typeof checkout;
+  checkoutActions: typeof checkoutActions;
+  emails: typeof emails;
+  fulfillmentActions: typeof fulfillmentActions;
+  http: typeof http;
+  "model/carts": typeof model_carts;
+  "model/categories": typeof model_categories;
+  "model/checkout": typeof model_checkout;
+  "model/orders": typeof model_orders;
+  "model/products": typeof model_products;
+  "model/shippo": typeof model_shippo;
+  "model/stripe": typeof model_stripe;
+  "model/users": typeof model_users;
+  orders: typeof orders;
+  products: typeof products;
+  returnActions: typeof returnActions;
+  reviews: typeof reviews;
+  shippoWebhook: typeof shippoWebhook;
+  stripeActions: typeof stripeActions;
+  users: typeof users;
+  wishlists: typeof wishlists;
+}>;
+
+/**
+ * A utility for referencing Convex functions in your app's public API.
+ *
+ * Usage:
+ * ```js
+ * const myFunctionReference = api.myModule.myFunction;
+ * ```
+ */
+export declare const api: FilterApi<
+  typeof fullApi,
+  FunctionReference<any, "public">
+>;
+
+/**
+ * A utility for referencing Convex functions in your app's internal API.
+ *
+ * Usage:
+ * ```js
+ * const myFunctionReference = internal.myModule.myFunction;
+ * ```
+ */
+export declare const internal: FilterApi<
+  typeof fullApi,
+  FunctionReference<any, "internal">
+>;
+
+export declare const components: {
+  resend: {
+    lib: {
+      cancelEmail: FunctionReference<
+        "mutation",
+        "internal",
+        { emailId: string },
+        null
+      >;
+      cleanupAbandonedEmails: FunctionReference<
+        "mutation",
+        "internal",
+        { olderThan?: number },
+        null
+      >;
+      cleanupOldEmails: FunctionReference<
+        "mutation",
+        "internal",
+        { olderThan?: number },
+        null
+      >;
+      createManualEmail: FunctionReference<
+        "mutation",
+        "internal",
+        {
+          from: string;
+          headers?: Array<{ name: string; value: string }>;
+          replyTo?: Array<string>;
+          subject: string;
+          to: Array<string> | string;
+        },
+        string
+      >;
+      get: FunctionReference<
+        "query",
+        "internal",
+        { emailId: string },
+        {
+          bcc?: Array<string>;
+          bounced?: boolean;
+          cc?: Array<string>;
+          clicked?: boolean;
+          complained: boolean;
+          createdAt: number;
+          deliveryDelayed?: boolean;
+          errorMessage?: string;
+          failed?: boolean;
+          finalizedAt: number;
+          from: string;
+          headers?: Array<{ name: string; value: string }>;
+          html?: string;
+          opened: boolean;
+          replyTo: Array<string>;
+          resendId?: string;
+          segment: number;
+          status:
+            | "waiting"
+            | "queued"
+            | "cancelled"
+            | "sent"
+            | "delivered"
+            | "delivery_delayed"
+            | "bounced"
+            | "failed";
+          subject?: string;
+          template?: {
+            id: string;
+            variables?: Record<string, string | number>;
+          };
+          text?: string;
+          to: Array<string>;
+        } | null
+      >;
+      getStatus: FunctionReference<
+        "query",
+        "internal",
+        { emailId: string },
+        {
+          bounced: boolean;
+          clicked: boolean;
+          complained: boolean;
+          deliveryDelayed: boolean;
+          errorMessage: string | null;
+          failed: boolean;
+          opened: boolean;
+          status:
+            | "waiting"
+            | "queued"
+            | "cancelled"
+            | "sent"
+            | "delivered"
+            | "delivery_delayed"
+            | "bounced"
+            | "failed";
+        } | null
+      >;
+      handleEmailEvent: FunctionReference<
+        "mutation",
+        "internal",
+        { event: any },
+        null
+      >;
+      sendEmail: FunctionReference<
+        "mutation",
+        "internal",
+        {
+          bcc?: Array<string>;
+          cc?: Array<string>;
+          from: string;
+          headers?: Array<{ name: string; value: string }>;
+          html?: string;
+          options: {
+            apiKey: string;
+            initialBackoffMs: number;
+            onEmailEvent?: { fnHandle: string };
+            retryAttempts: number;
+            testMode: boolean;
+          };
+          replyTo?: Array<string>;
+          subject?: string;
+          template?: {
+            id: string;
+            variables?: Record<string, string | number>;
+          };
+          text?: string;
+          to: Array<string>;
+        },
+        string
+      >;
+      updateManualEmail: FunctionReference<
+        "mutation",
+        "internal",
+        {
+          emailId: string;
+          errorMessage?: string;
+          resendId?: string;
+          status:
+            | "waiting"
+            | "queued"
+            | "cancelled"
+            | "sent"
+            | "delivered"
+            | "delivery_delayed"
+            | "bounced"
+            | "failed";
+        },
+        null
+      >;
+    };
+  };
+};

convex/_generated/api.js

@@ -0,0 +1,23 @@
+/* eslint-disable */
+/**
+ * Generated `api` utility.
+ *
+ * THIS CODE IS AUTOMATICALLY GENERATED.
+ *
+ * To regenerate, run `npx convex dev`.
+ * @module
+ */
+
+import { anyApi, componentsGeneric } from "convex/server";
+
+/**
+ * A utility for referencing Convex functions in your app's API.
+ *
+ * Usage:
+ * ```js
+ * const myFunctionReference = api.myModule.myFunction;
+ * ```
+ */
+export const api = anyApi;
+export const internal = anyApi;
+export const components = componentsGeneric();

convex/_generated/dataModel.d.ts

@@ -0,0 +1,60 @@
+/* eslint-disable */
+/**
+ * Generated data model types.
+ *
+ * THIS CODE IS AUTOMATICALLY GENERATED.
+ *
+ * To regenerate, run `npx convex dev`.
+ * @module
+ */
+
+import type {
+  DataModelFromSchemaDefinition,
+  DocumentByName,
+  TableNamesInDataModel,
+  SystemTableNames,
+} from "convex/server";
+import type { GenericId } from "convex/values";
+import schema from "../schema.js";
+
+/**
+ * The names of all of your Convex tables.
+ */
+export type TableNames = TableNamesInDataModel<DataModel>;
+
+/**
+ * The type of a document stored in Convex.
+ *
+ * @typeParam TableName - A string literal type of the table name (like "users").
+ */
+export type Doc<TableName extends TableNames> = DocumentByName<
+  DataModel,
+  TableName
+>;
+
+/**
+ * An identifier for a document in Convex.
+ *
+ * Convex documents are uniquely identified by their `Id`, which is accessible
+ * on the `_id` field. To learn more, see [Document IDs](https://docs.convex.dev/using/document-ids).
+ *
+ * Documents can be loaded using `db.get(tableName, id)` in query and mutation functions.
+ *
+ * IDs are just strings at runtime, but this type can be used to distinguish them from other
+ * strings when type checking.
+ *
+ * @typeParam TableName - A string literal type of the table name (like "users").
+ */
+export type Id<TableName extends TableNames | SystemTableNames> =
+  GenericId<TableName>;
+
+/**
+ * A type describing your Convex data model.
+ *
+ * This type includes information about what tables you have, the type of
+ * documents stored in those tables, and the indexes defined on them.
+ *
+ * This type is used to parameterize methods like `queryGeneric` and
+ * `mutationGeneric` to make them type-safe.
+ */
+export type DataModel = DataModelFromSchemaDefinition<typeof schema>;

convex/_generated/server.d.ts

@@ -0,0 +1,143 @@
+/* eslint-disable */
+/**
+ * Generated utilities for implementing server-side Convex query and mutation functions.
+ *
+ * THIS CODE IS AUTOMATICALLY GENERATED.
+ *
+ * To regenerate, run `npx convex dev`.
+ * @module
+ */
+
+import {
+  ActionBuilder,
+  HttpActionBuilder,
+  MutationBuilder,
+  QueryBuilder,
+  GenericActionCtx,
+  GenericMutationCtx,
+  GenericQueryCtx,
+  GenericDatabaseReader,
+  GenericDatabaseWriter,
+} from "convex/server";
+import type { DataModel } from "./dataModel.js";
+
+/**
+ * Define a query in this Convex app's public API.
+ *
+ * This function will be allowed to read your Convex database and will be accessible from the client.
+ *
+ * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
+ * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
+ */
+export declare const query: QueryBuilder<DataModel, "public">;
+
+/**
+ * Define a query that is only accessible from other Convex functions (but not from the client).
+ *
+ * This function will be allowed to read from your Convex database. It will not be accessible from the client.
+ *
+ * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
+ * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
+ */
+export declare const internalQuery: QueryBuilder<DataModel, "internal">;
+
+/**
+ * Define a mutation in this Convex app's public API.
+ *
+ * This function will be allowed to modify your Convex database and will be accessible from the client.
+ *
+ * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
+ * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
+ */
+export declare const mutation: MutationBuilder<DataModel, "public">;
+
+/**
+ * Define a mutation that is only accessible from other Convex functions (but not from the client).
+ *
+ * This function will be allowed to modify your Convex database. It will not be accessible from the client.
+ *
+ * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
+ * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
+ */
+export declare const internalMutation: MutationBuilder<DataModel, "internal">;
+
+/**
+ * Define an action in this Convex app's public API.
+ *
+ * An action is a function which can execute any JavaScript code, including non-deterministic
+ * code and code with side-effects, like calling third-party services.
+ * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive.
+ * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}.
+ *
+ * @param func - The action. It receives an {@link ActionCtx} as its first argument.
+ * @returns The wrapped action. Include this as an `export` to name it and make it accessible.
+ */
+export declare const action: ActionBuilder<DataModel, "public">;
+
+/**
+ * Define an action that is only accessible from other Convex functions (but not from the client).
+ *
+ * @param func - The function. It receives an {@link ActionCtx} as its first argument.
+ * @returns The wrapped function. Include this as an `export` to name it and make it accessible.
+ */
+export declare const internalAction: ActionBuilder<DataModel, "internal">;
+
+/**
+ * Define an HTTP action.
+ *
+ * The wrapped function will be used to respond to HTTP requests received
+ * by a Convex deployment if the requests matches the path and method where
+ * this action is routed. Be sure to route your httpAction in `convex/http.js`.
+ *
+ * @param func - The function. It receives an {@link ActionCtx} as its first argument
+ * and a Fetch API `Request` object as its second.
+ * @returns The wrapped function. Import this function from `convex/http.js` and route it to hook it up.
+ */
+export declare const httpAction: HttpActionBuilder;
+
+/**
+ * A set of services for use within Convex query functions.
+ *
+ * The query context is passed as the first argument to any Convex query
+ * function run on the server.
+ *
+ * This differs from the {@link MutationCtx} because all of the services are
+ * read-only.
+ */
+export type QueryCtx = GenericQueryCtx<DataModel>;
+
+/**
+ * A set of services for use within Convex mutation functions.
+ *
+ * The mutation context is passed as the first argument to any Convex mutation
+ * function run on the server.
+ */
+export type MutationCtx = GenericMutationCtx<DataModel>;
+
+/**
+ * A set of services for use within Convex action functions.
+ *
+ * The action context is passed as the first argument to any Convex action
+ * function run on the server.
+ */
+export type ActionCtx = GenericActionCtx<DataModel>;
+
+/**
+ * An interface to read from the database within Convex query functions.
+ *
+ * The two entry points are {@link DatabaseReader.get}, which fetches a single
+ * document by its {@link Id}, or {@link DatabaseReader.query}, which starts
+ * building a query.
+ */
+export type DatabaseReader = GenericDatabaseReader<DataModel>;
+
+/**
+ * An interface to read from and write to the database within Convex mutation
+ * functions.
+ *
+ * Convex guarantees that all writes within a single mutation are
+ * executed atomically, so you never have to worry about partial writes leaving
+ * your data in an inconsistent state. See [the Convex Guide](https://docs.convex.dev/understanding/convex-fundamentals/functions#atomicity-and-optimistic-concurrency-control)
+ * for the guarantees Convex provides your functions.
+ */
+export type DatabaseWriter = GenericDatabaseWriter<DataModel>;

convex/_generated/server.js

@@ -0,0 +1,93 @@
+/* eslint-disable */
+/**
+ * Generated utilities for implementing server-side Convex query and mutation functions.
+ *
+ * THIS CODE IS AUTOMATICALLY GENERATED.
+ *
+ * To regenerate, run `npx convex dev`.
+ * @module
+ */
+
+import {
+  actionGeneric,
+  httpActionGeneric,
+  queryGeneric,
+  mutationGeneric,
+  internalActionGeneric,
+  internalMutationGeneric,
+  internalQueryGeneric,
+} from "convex/server";
+
+/**
+ * Define a query in this Convex app's public API.
+ *
+ * This function will be allowed to read your Convex database and will be accessible from the client.
+ *
+ * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
+ * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
+ */
+export const query = queryGeneric;
+
+/**
+ * Define a query that is only accessible from other Convex functions (but not from the client).
+ *
+ * This function will be allowed to read from your Convex database. It will not be accessible from the client.
+ *
+ * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
+ * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
+ */
+export const internalQuery = internalQueryGeneric;
+
+/**
+ * Define a mutation in this Convex app's public API.
+ *
+ * This function will be allowed to modify your Convex database and will be accessible from the client.
+ *
+ * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
+ * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
+ */
+export const mutation = mutationGeneric;
+
+/**
+ * Define a mutation that is only accessible from other Convex functions (but not from the client).
+ *
+ * This function will be allowed to modify your Convex database. It will not be accessible from the client.
+ *
+ * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
+ * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
+ */
+export const internalMutation = internalMutationGeneric;
+
+/**
+ * Define an action in this Convex app's public API.
+ *
+ * An action is a function which can execute any JavaScript code, including non-deterministic
+ * code and code with side-effects, like calling third-party services.
+ * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive.
+ * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}.
+ *
+ * @param func - The action. It receives an {@link ActionCtx} as its first argument.
+ * @returns The wrapped action. Include this as an `export` to name it and make it accessible.
+ */
+export const action = actionGeneric;
+
+/**
+ * Define an action that is only accessible from other Convex functions (but not from the client).
+ *
+ * @param func - The function. It receives an {@link ActionCtx} as its first argument.
+ * @returns The wrapped function. Include this as an `export` to name it and make it accessible.
+ */
+export const internalAction = internalActionGeneric;
+
+/**
+ * Define an HTTP action.
+ *
+ * The wrapped function will be used to respond to HTTP requests received
+ * by a Convex deployment if the requests matches the path and method where
+ * this action is routed. Be sure to route your httpAction in `convex/http.js`.
+ *
+ * @param func - The function. It receives an {@link ActionCtx} as its first argument
+ * and a Fetch API `Request` object as its second.
+ * @returns The wrapped function. Import this function from `convex/http.js` and route it to hook it up.
+ */
+export const httpAction = httpActionGeneric;

convex/carts.test.ts

@@ -26,6 +26,8 @@ async function setupUserAndVariant(t: ReturnType<typeof convexTest>) {
       status: "active",
       categoryId,
       tags: [],
+      parentCategorySlug: "toys",
+      childCategorySlug: "toys",
     });
     variantId = await ctx.db.insert("productVariants", {
       productId,
@@ -35,6 +37,8 @@ async function setupUserAndVariant(t: ReturnType<typeof convexTest>) {
       stockQuantity: 50,
       attributes: { color: "Red" },
       isActive: true,
+      weight: 100,
+      weightUnit: "g",
     });
   });
 

convex/stripeActions.test.ts

@@ -129,7 +129,7 @@ async function setupFullCheckoutContext(
       productId,
       name: "1kg Bag",
       sku: "PK-001",
-      price: overrides?.price ?? 24.99,
+      price: overrides?.price ?? 2499,
       stockQuantity: overrides?.stockQuantity ?? 50,
       isActive: overrides?.isActive ?? true,
       weight: 1000,
@@ -151,7 +151,7 @@ async function setupFullCheckoutContext(
           productId,
           variantId,
           quantity: 2,
-          price: overrides?.price ?? 24.99,
+          price: overrides?.price ?? 2499,
         },
       ],
       createdAt: Date.now(),
@@ -294,7 +294,7 @@ describe("stripeActions.createCheckoutSession", () => {
       price_data: {
         currency: "gbp",
         product_data: { name: "Premium Kibble — 1kg Bag" },
-        unit_amount: Math.round(24.99 * 100),
+        unit_amount: 2499,
       },
       quantity: 2,
     });

deploy/staging/.env.example

@@ -0,0 +1,15 @@
+# Runtime secrets for staging containers.
+# Copy this file to /opt/staging/.env on the VPS and fill in the values.
+# NEXT_PUBLIC_* vars are already baked into the Docker images at build time —
+# only server-side secrets that Next.js reads at runtime go here.
+
+# Storefront — Clerk server-side key
+CLERK_SECRET_KEY=
+
+# Admin — Clerk server-side key (different Clerk instance)
+# Add a second .env or use per-service env_file if keys differ per container.
+# For now a single .env is shared; storefront ignores keys it doesn't use.
+
+# Stripe (used by storefront checkout server actions if any)
+STRIPE_SECRET_KEY=
+STRIPE_WEBHOOK_SECRET=

deploy/staging/compose.yml

@@ -0,0 +1,25 @@
+name: petloft-staging
+
+services:
+  storefront:
+    image: ${REGISTRY}/storefront:staging
+    restart: unless-stopped
+    ports:
+      - "3001:3000"
+    env_file:
+      - path: .env
+        required: false
+    environment:
+      - CLERK_SECRET_KEY
+
+  admin:
+    image: ${REGISTRY}/admin:staging
+    restart: unless-stopped
+    ports:
+      - "3002:3001"
+    env_file:
+      - path: .env
+        required: false
+    environment:
+      - CLERK_SECRET_KEY=${ADMIN_CLERK_SECRET_KEY}
+      - CLOUDINARY_API_SECRET

package.json

@@ -30,6 +30,7 @@
     "react-dom": "^19.2.4",
     "stripe": "^20.4.0",
     "svix": "^1.86.0",
+    "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.2.0"
   },
   "devDependencies": {

vitest.config.ts

@@ -1,8 +1,24 @@
+import path from "node:path";
 import { defineConfig } from "vitest/config";
 
 export default defineConfig({
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "apps/storefront/src"),
+    },
+  },
   test: {
     environment: "edge-runtime",
     server: { deps: { inline: ["convex-test"] } },
+    onUnhandledError(error): boolean | void {
+      const msg = error?.message ?? String(error);
+      if (
+        typeof msg === "string" &&
+        msg.includes("Write outside of transaction") &&
+        msg.includes("_scheduled_functions")
+      ) {
+        return false;
+      }
+    },
   },
 });