From fa0d5010639f63208d2c4453ae79dc17b252dc6e Mon Sep 17 00:00:00 2001
From: Frank John Begornia <frank.begornia@yahoo.com>
Date: Thu, 20 Nov 2025 21:13:26 +0800
Subject: [PATCH] feat: implement new designer page layout with turntable
 animation and start designing button

---
 app/pages/designer.vue | 441 +++++++++++++++++++++++++++++++++
 app/pages/index.vue    | 545 +++++++++--------------------------------
 2 files changed, 558 insertions(+), 428 deletions(-)
 create mode 100644 app/pages/designer.vue

diff --git a/app/pages/designer.vue b/app/pages/designer.vue
new file mode 100644
index 0000000..09137c7
--- /dev/null
+++ b/app/pages/designer.vue
@@ -0,0 +1,441 @@
+<script setup lang="ts">
+import DesignerCanvas from "~/components/designer/DesignerCanvas.vue";
+import DesignerPreview from "~/components/designer/DesignerPreview.vue";
+import DesignerToolbar from "~/components/designer/DesignerToolbar.vue";
+import TemplatePicker from "~/components/designer/TemplatePicker.vue";
+
+import { useSlipmatDesigner } from "~/composables/useSlipmatDesigner";
+import type { ExportedDesign } from "~/composables/useSlipmatDesigner";
+
+const {
+  templates,
+  selectedTemplate,
+  selectTemplate,
+  loadDesign,
+  displaySize,
+  templateLabel,
+  productionPixelSize,
+  previewUrl,
+  registerCanvas,
+  unregisterCanvas,
+  addTextbox,
+  addShape,
+  addImageFromFile,
+  clearDesign,
+  downloadPreview,
+  downloadProduction,
+  exportDesign,
+  isExporting,
+  activeFillColor,
+  activeStrokeColor,
+  canStyleSelection,
+  setActiveFillColor,
+  setActiveStrokeColor,
+  setBackgroundColor,
+  zoomLevel,
+  minZoom,
+  maxZoom,
+  setZoom,
+  zoomIn,
+  zoomOut,
+  resetZoom,
+} = useSlipmatDesigner();
+
+const DESIGN_PRICE_USD = 39.99;
+
+const { user, backendUser, initAuth, isLoading } = useAuth();
+const loginModal = useLoginModal();
+const route = useRoute();
+const router = useRouter();
+const config = useRuntimeConfig();
+
+const activeDesignId = ref<string | null>(
+  typeof route.query.designId === "string" ? route.query.designId : null
+);
+const loadedDesignId = ref<string | null>(null);
+const isDesignLoading = ref(false);
+const isCheckoutPending = ref(false);
+const checkoutError = ref<string | null>(null);
+const lastExportedDesign = ref<ExportedDesign | null>(null);
+
+type LoadDesignInput = Parameters<typeof loadDesign>[0];
+
+type StorageUploadResponse = {
+  bucket: string;
+  objectName: string;
+  publicUrl: string;
+  presignedUrl?: string | null;
+  presignedUrlExpiresIn?: number | null;
+};
+
+const uploadDesignAsset = async (
+  file: Blob,
+  filename: string,
+  options?: { prefix?: string; bucket?: string }
+): Promise<StorageUploadResponse> => {
+  if (!process.client) {
+    throw new Error("Asset uploads can only run in the browser context.");
+  }
+
+  const backendUrl = config.public.backendUrl;
+  if (!backendUrl) {
+    throw new Error("Backend URL is not configured.");
+  }
+
+  const formData = new FormData();
+  formData.append("file", file, filename);
+  if (options?.prefix) {
+    formData.append("prefix", options.prefix);
+  }
+  if (options?.bucket) {
+    formData.append("bucket", options.bucket);
+  }
+
+  return await $fetch<StorageUploadResponse>("/storage/upload", {
+    baseURL: backendUrl,
+    method: "POST",
+    headers: {
+      "content-type": "multipart/form-data",
+    },
+    body: formData,
+  });
+};
+
+const persistDesign = async (designId: string, design: ExportedDesign) => {
+  const safeDesignIdBase = designId.replace(/[^a-zA-Z0-9_-]/g, "-") || "design";
+  const assetBasePath = `designs/${safeDesignIdBase}`;
+  const timestamp = Date.now();
+
+  if (!design.previewBlob || !design.productionBlob) {
+    throw new Error("Design assets are missing; please export again.");
+  }
+
+  const canvasJsonString =
+    typeof design.canvasJson === "string"
+      ? design.canvasJson
+      : JSON.stringify(design.canvasJson);
+
+  const prefix = `${assetBasePath}/`;
+
+  const [previewUpload, productionUpload, canvasUpload] = await Promise.all([
+    uploadDesignAsset(design.previewBlob, `preview-${timestamp}.png`, {
+      prefix,
+    }),
+    uploadDesignAsset(design.productionBlob, `production-${timestamp}.png`, {
+      prefix,
+    }),
+    uploadDesignAsset(
+      new Blob([canvasJsonString], { type: "application/json" }),
+      `canvas-${timestamp}.json`,
+      { prefix }
+    ),
+  ]);
+
+  await $fetch("/api/designs", {
+    method: "POST",
+    body: {
+      designId,
+      templateId: design.templateId,
+      ownerEmail: user.value?.email ?? null,
+  ownerId: backendUser.value?.id ?? null,
+      previewUrl: previewUpload.publicUrl,
+      productionUrl: productionUpload.publicUrl,
+      canvasJson: canvasUpload.publicUrl,
+      metadata: {
+        designName: templateLabel.value,
+        storage: {
+          preview: {
+            objectName: previewUpload.objectName,
+            bucket: previewUpload.bucket,
+          },
+          production: {
+            objectName: productionUpload.objectName,
+            bucket: productionUpload.bucket,
+          },
+          canvas: {
+            objectName: canvasUpload.objectName,
+            bucket: canvasUpload.bucket,
+          },
+        },
+        storagePaths: {
+          preview: previewUpload.objectName,
+          production: productionUpload.objectName,
+          canvas: canvasUpload.objectName,
+        },
+      },
+    },
+  });
+
+  return {
+    previewUrl: previewUpload.publicUrl,
+    productionUrl: productionUpload.publicUrl,
+    canvasJsonUrl: canvasUpload.publicUrl,
+  };
+};
+
+const loadDesignById = async (designId: string) => {
+  if (!process.client) {
+    return;
+  }
+
+  isDesignLoading.value = true;
+  try {
+    const design = await $fetch<{
+      designId?: string;
+      templateId?: string | null;
+      previewUrl?: string | null;
+      productionUrl?: string | null;
+      canvasJson?: unknown;
+    }>(`/api/designs/${designId}`);
+
+    if (!design?.canvasJson) {
+      throw new Error("Saved design is missing canvas data.");
+    }
+
+    let canvasPayload: LoadDesignInput["canvasJson"] =
+      design.canvasJson as LoadDesignInput["canvasJson"];
+
+    if (typeof design.canvasJson === "string") {
+      const trimmed = design.canvasJson.trim();
+      const isRemoteSource = /^https?:\/\//i.test(trimmed);
+
+      if (isRemoteSource) {
+        const response = await fetch(trimmed);
+        if (!response.ok) {
+          throw new Error("Failed to download saved canvas data.");
+        }
+        canvasPayload =
+          (await response.text()) as LoadDesignInput["canvasJson"];
+      } else {
+        canvasPayload = trimmed as LoadDesignInput["canvasJson"];
+      }
+    }
+
+    await loadDesign({
+      templateId: design.templateId ?? null,
+      canvasJson: canvasPayload,
+      previewUrl: design.previewUrl ?? null,
+    });
+
+    loadedDesignId.value = designId;
+    lastExportedDesign.value = null;
+  } catch (error: any) {
+    console.error("Failed to load saved design", error);
+  } finally {
+    isDesignLoading.value = false;
+  }
+};
+
+watch(
+  () => route.query.designId,
+  (value) => {
+    const nextId = typeof value === "string" ? value : null;
+    if (nextId !== activeDesignId.value) {
+      activeDesignId.value = nextId;
+    }
+  }
+);
+
+watch(
+  activeDesignId,
+  (designId) => {
+    if (!designId || designId === loadedDesignId.value) {
+      return;
+    }
+    loadDesignById(designId);
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  initAuth();
+});
+
+const handleTemplateSelect = (templateId: string) => {
+  selectTemplate(templateId);
+};
+
+const handleExport = async () => {
+  const result = await exportDesign();
+  if (result) {
+    lastExportedDesign.value = result;
+  }
+};
+
+const handleCheckout = async () => {
+  if (!process.client) {
+    return;
+  }
+
+  initAuth();
+
+  if (isLoading.value) {
+    for (
+      let attempt = 0;
+      attempt < 10 && isLoading.value && !user.value;
+      attempt += 1
+    ) {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    }
+  }
+
+  if (!user.value) {
+    loginModal.value = true;
+    return;
+  }
+
+  checkoutError.value = null;
+  isCheckoutPending.value = true;
+
+  try {
+    let exportResult = await exportDesign();
+    if (!exportResult) {
+      exportResult = lastExportedDesign.value;
+    }
+    if (!exportResult) {
+      throw new Error("Unable to export the current design. Please try again.");
+    }
+    lastExportedDesign.value = exportResult;
+
+    const designId =
+      activeDesignId.value ??
+      (typeof crypto !== "undefined" && "randomUUID" in crypto
+        ? crypto.randomUUID()
+        : `design-${Date.now()}`);
+
+    await persistDesign(designId, exportResult);
+
+    activeDesignId.value = designId;
+    loadedDesignId.value = designId;
+
+    if (
+      typeof route.query.designId !== "string" ||
+      route.query.designId !== designId
+    ) {
+      await router.replace({ query: { designId } });
+    }
+
+    const successUrlTemplate = `${window.location.origin}/checkout/success?session_id={CHECKOUT_SESSION_ID}`;
+    const cancelUrl = window.location.href;
+
+    const session = await $fetch<{ id: string; url?: string | null }>(
+      "/api/checkout.session",
+      {
+        method: "POST",
+        body: {
+          designId,
+          templateId: exportResult.templateId,
+          designName: templateLabel.value,
+          amount: DESIGN_PRICE_USD,
+          currency: "usd",
+          successUrl: successUrlTemplate,
+          cancelUrl,
+          customerEmail: user.value?.email ?? undefined,
+        },
+      }
+    );
+
+    if (!session?.id) {
+      throw new Error("Stripe session could not be created.");
+    }
+
+    if (session.url) {
+      window.location.href = session.url;
+      return;
+    }
+
+    const fallbackRedirect = successUrlTemplate.replace(
+      "{CHECKOUT_SESSION_ID}",
+      session.id
+    );
+    window.location.href = fallbackRedirect;
+  } catch (err: any) {
+    console.error("Checkout failed", err);
+    checkoutError.value =
+      err?.message ?? "Unable to start checkout. Please try again.";
+  } finally {
+    isCheckoutPending.value = false;
+  }
+};
+</script>
+
+<template>
+  <main class="min-h-screen bg-slate-950 pb-16 text-slate-100">
+    <AppNavbar />
+    <div class="mx-auto max-w-6xl px-4 pt-12 sm:px-6 lg:px-8">
+      <header class="space-y-3">
+        <p class="text-sm uppercase tracking-[0.35em] text-sky-400">
+          Slipmatz Designer
+        </p>
+        <h1 class="text-3xl font-bold text-white sm:text-4xl">
+          Craft custom slipmats ready for the pressing plant.
+        </h1>
+      </header>
+
+      <section class="mt-10 grid gap-8 lg:grid-cols-[320px_minmax(0,1fr)]">
+        <div class="space-y-6">
+          <TemplatePicker
+            :templates="templates"
+            :selected-template-id="selectedTemplate.id"
+            @select="handleTemplateSelect"
+          />
+
+          <DesignerPreview
+            :preview-url="previewUrl"
+            :template-label="templateLabel"
+            :production-pixels="productionPixelSize"
+            :is-exporting="isExporting || isDesignLoading"
+            :is-checkout-pending="isCheckoutPending"
+            :checkout-price="DESIGN_PRICE_USD"
+            :checkout-error="checkoutError"
+            @export="handleExport"
+            @download-preview="downloadPreview"
+            @download-production="downloadProduction"
+            @checkout="handleCheckout"
+          />
+        </div>
+
+        <div class="flex flex-col gap-6">
+          <div
+            class="rounded-3xl border border-slate-800/60 bg-linear-to-br from-slate-900 via-slate-950 to-black shadow-2xl shadow-slate-950/60"
+          >
+            <DesignerToolbar
+              :on-add-text="addTextbox"
+              :on-add-circle="() => addShape('circle')"
+              :on-add-rectangle="() => addShape('rect')"
+              :on-clear="clearDesign"
+              :on-import-image="addImageFromFile"
+              :on-fill-change="setActiveFillColor"
+              :on-stroke-change="setActiveStrokeColor"
+              :on-background-change="setBackgroundColor"
+              :active-fill="activeFillColor"
+              :active-stroke="activeStrokeColor"
+              :active-background="selectedTemplate.backgroundColor"
+              :can-style-selection="canStyleSelection"
+              :zoom="zoomLevel"
+              :min-zoom="minZoom"
+              :max-zoom="maxZoom"
+              :on-zoom-change="setZoom"
+              :on-zoom-in="zoomIn"
+              :on-zoom-out="zoomOut"
+              :on-zoom-reset="resetZoom"
+            />
+            <div class="p-6">
+              <DesignerCanvas
+                :size="displaySize"
+                :background-color="selectedTemplate.backgroundColor"
+                :register-canvas="registerCanvas"
+                :unregister-canvas="unregisterCanvas"
+              />
+              <p class="mt-4 text-sm text-slate-400">
+                Safe zone and bleed guides update automatically when you switch
+                templates. Use the toolbar to layer text, shapes, and imagery
+                inside the circular boundary.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </main>
+</template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 09137c7..ffd5091 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,441 +1,130 @@
 <script setup lang="ts">
-import DesignerCanvas from "~/components/designer/DesignerCanvas.vue";
-import DesignerPreview from "~/components/designer/DesignerPreview.vue";
-import DesignerToolbar from "~/components/designer/DesignerToolbar.vue";
-import TemplatePicker from "~/components/designer/TemplatePicker.vue";
-
-import { useSlipmatDesigner } from "~/composables/useSlipmatDesigner";
-import type { ExportedDesign } from "~/composables/useSlipmatDesigner";
-
-const {
-  templates,
-  selectedTemplate,
-  selectTemplate,
-  loadDesign,
-  displaySize,
-  templateLabel,
-  productionPixelSize,
-  previewUrl,
-  registerCanvas,
-  unregisterCanvas,
-  addTextbox,
-  addShape,
-  addImageFromFile,
-  clearDesign,
-  downloadPreview,
-  downloadProduction,
-  exportDesign,
-  isExporting,
-  activeFillColor,
-  activeStrokeColor,
-  canStyleSelection,
-  setActiveFillColor,
-  setActiveStrokeColor,
-  setBackgroundColor,
-  zoomLevel,
-  minZoom,
-  maxZoom,
-  setZoom,
-  zoomIn,
-  zoomOut,
-  resetZoom,
-} = useSlipmatDesigner();
-
-const DESIGN_PRICE_USD = 39.99;
-
-const { user, backendUser, initAuth, isLoading } = useAuth();
-const loginModal = useLoginModal();
-const route = useRoute();
 const router = useRouter();
-const config = useRuntimeConfig();
 
-const activeDesignId = ref<string | null>(
-  typeof route.query.designId === "string" ? route.query.designId : null
-);
-const loadedDesignId = ref<string | null>(null);
-const isDesignLoading = ref(false);
-const isCheckoutPending = ref(false);
-const checkoutError = ref<string | null>(null);
-const lastExportedDesign = ref<ExportedDesign | null>(null);
-
-type LoadDesignInput = Parameters<typeof loadDesign>[0];
-
-type StorageUploadResponse = {
-  bucket: string;
-  objectName: string;
-  publicUrl: string;
-  presignedUrl?: string | null;
-  presignedUrlExpiresIn?: number | null;
-};
-
-const uploadDesignAsset = async (
-  file: Blob,
-  filename: string,
-  options?: { prefix?: string; bucket?: string }
-): Promise<StorageUploadResponse> => {
-  if (!process.client) {
-    throw new Error("Asset uploads can only run in the browser context.");
-  }
-
-  const backendUrl = config.public.backendUrl;
-  if (!backendUrl) {
-    throw new Error("Backend URL is not configured.");
-  }
-
-  const formData = new FormData();
-  formData.append("file", file, filename);
-  if (options?.prefix) {
-    formData.append("prefix", options.prefix);
-  }
-  if (options?.bucket) {
-    formData.append("bucket", options.bucket);
-  }
-
-  return await $fetch<StorageUploadResponse>("/storage/upload", {
-    baseURL: backendUrl,
-    method: "POST",
-    headers: {
-      "content-type": "multipart/form-data",
-    },
-    body: formData,
-  });
-};
-
-const persistDesign = async (designId: string, design: ExportedDesign) => {
-  const safeDesignIdBase = designId.replace(/[^a-zA-Z0-9_-]/g, "-") || "design";
-  const assetBasePath = `designs/${safeDesignIdBase}`;
-  const timestamp = Date.now();
-
-  if (!design.previewBlob || !design.productionBlob) {
-    throw new Error("Design assets are missing; please export again.");
-  }
-
-  const canvasJsonString =
-    typeof design.canvasJson === "string"
-      ? design.canvasJson
-      : JSON.stringify(design.canvasJson);
-
-  const prefix = `${assetBasePath}/`;
-
-  const [previewUpload, productionUpload, canvasUpload] = await Promise.all([
-    uploadDesignAsset(design.previewBlob, `preview-${timestamp}.png`, {
-      prefix,
-    }),
-    uploadDesignAsset(design.productionBlob, `production-${timestamp}.png`, {
-      prefix,
-    }),
-    uploadDesignAsset(
-      new Blob([canvasJsonString], { type: "application/json" }),
-      `canvas-${timestamp}.json`,
-      { prefix }
-    ),
-  ]);
-
-  await $fetch("/api/designs", {
-    method: "POST",
-    body: {
-      designId,
-      templateId: design.templateId,
-      ownerEmail: user.value?.email ?? null,
-  ownerId: backendUser.value?.id ?? null,
-      previewUrl: previewUpload.publicUrl,
-      productionUrl: productionUpload.publicUrl,
-      canvasJson: canvasUpload.publicUrl,
-      metadata: {
-        designName: templateLabel.value,
-        storage: {
-          preview: {
-            objectName: previewUpload.objectName,
-            bucket: previewUpload.bucket,
-          },
-          production: {
-            objectName: productionUpload.objectName,
-            bucket: productionUpload.bucket,
-          },
-          canvas: {
-            objectName: canvasUpload.objectName,
-            bucket: canvasUpload.bucket,
-          },
-        },
-        storagePaths: {
-          preview: previewUpload.objectName,
-          production: productionUpload.objectName,
-          canvas: canvasUpload.objectName,
-        },
-      },
-    },
-  });
-
-  return {
-    previewUrl: previewUpload.publicUrl,
-    productionUrl: productionUpload.publicUrl,
-    canvasJsonUrl: canvasUpload.publicUrl,
-  };
-};
-
-const loadDesignById = async (designId: string) => {
-  if (!process.client) {
-    return;
-  }
-
-  isDesignLoading.value = true;
-  try {
-    const design = await $fetch<{
-      designId?: string;
-      templateId?: string | null;
-      previewUrl?: string | null;
-      productionUrl?: string | null;
-      canvasJson?: unknown;
-    }>(`/api/designs/${designId}`);
-
-    if (!design?.canvasJson) {
-      throw new Error("Saved design is missing canvas data.");
-    }
-
-    let canvasPayload: LoadDesignInput["canvasJson"] =
-      design.canvasJson as LoadDesignInput["canvasJson"];
-
-    if (typeof design.canvasJson === "string") {
-      const trimmed = design.canvasJson.trim();
-      const isRemoteSource = /^https?:\/\//i.test(trimmed);
-
-      if (isRemoteSource) {
-        const response = await fetch(trimmed);
-        if (!response.ok) {
-          throw new Error("Failed to download saved canvas data.");
-        }
-        canvasPayload =
-          (await response.text()) as LoadDesignInput["canvasJson"];
-      } else {
-        canvasPayload = trimmed as LoadDesignInput["canvasJson"];
-      }
-    }
-
-    await loadDesign({
-      templateId: design.templateId ?? null,
-      canvasJson: canvasPayload,
-      previewUrl: design.previewUrl ?? null,
-    });
-
-    loadedDesignId.value = designId;
-    lastExportedDesign.value = null;
-  } catch (error: any) {
-    console.error("Failed to load saved design", error);
-  } finally {
-    isDesignLoading.value = false;
-  }
-};
-
-watch(
-  () => route.query.designId,
-  (value) => {
-    const nextId = typeof value === "string" ? value : null;
-    if (nextId !== activeDesignId.value) {
-      activeDesignId.value = nextId;
-    }
-  }
-);
-
-watch(
-  activeDesignId,
-  (designId) => {
-    if (!designId || designId === loadedDesignId.value) {
-      return;
-    }
-    loadDesignById(designId);
-  },
-  { immediate: true }
-);
-
-onMounted(() => {
-  initAuth();
-});
-
-const handleTemplateSelect = (templateId: string) => {
-  selectTemplate(templateId);
-};
-
-const handleExport = async () => {
-  const result = await exportDesign();
-  if (result) {
-    lastExportedDesign.value = result;
-  }
-};
-
-const handleCheckout = async () => {
-  if (!process.client) {
-    return;
-  }
-
-  initAuth();
-
-  if (isLoading.value) {
-    for (
-      let attempt = 0;
-      attempt < 10 && isLoading.value && !user.value;
-      attempt += 1
-    ) {
-      await new Promise((resolve) => setTimeout(resolve, 50));
-    }
-  }
-
-  if (!user.value) {
-    loginModal.value = true;
-    return;
-  }
-
-  checkoutError.value = null;
-  isCheckoutPending.value = true;
-
-  try {
-    let exportResult = await exportDesign();
-    if (!exportResult) {
-      exportResult = lastExportedDesign.value;
-    }
-    if (!exportResult) {
-      throw new Error("Unable to export the current design. Please try again.");
-    }
-    lastExportedDesign.value = exportResult;
-
-    const designId =
-      activeDesignId.value ??
-      (typeof crypto !== "undefined" && "randomUUID" in crypto
-        ? crypto.randomUUID()
-        : `design-${Date.now()}`);
-
-    await persistDesign(designId, exportResult);
-
-    activeDesignId.value = designId;
-    loadedDesignId.value = designId;
-
-    if (
-      typeof route.query.designId !== "string" ||
-      route.query.designId !== designId
-    ) {
-      await router.replace({ query: { designId } });
-    }
-
-    const successUrlTemplate = `${window.location.origin}/checkout/success?session_id={CHECKOUT_SESSION_ID}`;
-    const cancelUrl = window.location.href;
-
-    const session = await $fetch<{ id: string; url?: string | null }>(
-      "/api/checkout.session",
-      {
-        method: "POST",
-        body: {
-          designId,
-          templateId: exportResult.templateId,
-          designName: templateLabel.value,
-          amount: DESIGN_PRICE_USD,
-          currency: "usd",
-          successUrl: successUrlTemplate,
-          cancelUrl,
-          customerEmail: user.value?.email ?? undefined,
-        },
-      }
-    );
-
-    if (!session?.id) {
-      throw new Error("Stripe session could not be created.");
-    }
-
-    if (session.url) {
-      window.location.href = session.url;
-      return;
-    }
-
-    const fallbackRedirect = successUrlTemplate.replace(
-      "{CHECKOUT_SESSION_ID}",
-      session.id
-    );
-    window.location.href = fallbackRedirect;
-  } catch (err: any) {
-    console.error("Checkout failed", err);
-    checkoutError.value =
-      err?.message ?? "Unable to start checkout. Please try again.";
-  } finally {
-    isCheckoutPending.value = false;
-  }
+const startDesigning = () => {
+  router.push('/designer');
 };
 </script>
 
 <template>
-  <main class="min-h-screen bg-slate-950 pb-16 text-slate-100">
-    <AppNavbar />
-    <div class="mx-auto max-w-6xl px-4 pt-12 sm:px-6 lg:px-8">
-      <header class="space-y-3">
-        <p class="text-sm uppercase tracking-[0.35em] text-sky-400">
-          Slipmatz Designer
-        </p>
-        <h1 class="text-3xl font-bold text-white sm:text-4xl">
-          Craft custom slipmats ready for the pressing plant.
-        </h1>
-      </header>
+  <div class="relative min-h-screen overflow-hidden bg-linear-to-br from-slate-950 via-slate-900 to-slate-950">
+    <!-- Background Pattern -->
+    <div class="absolute inset-0 opacity-20">
+      <div class="absolute inset-0" style="background-image: radial-gradient(circle at 1px 1px, rgb(71 85 105) 1px, transparent 0); background-size: 40px 40px;"></div>
+    </div>
 
-      <section class="mt-10 grid gap-8 lg:grid-cols-[320px_minmax(0,1fr)]">
-        <div class="space-y-6">
-          <TemplatePicker
-            :templates="templates"
-            :selected-template-id="selectedTemplate.id"
-            @select="handleTemplateSelect"
-          />
-
-          <DesignerPreview
-            :preview-url="previewUrl"
-            :template-label="templateLabel"
-            :production-pixels="productionPixelSize"
-            :is-exporting="isExporting || isDesignLoading"
-            :is-checkout-pending="isCheckoutPending"
-            :checkout-price="DESIGN_PRICE_USD"
-            :checkout-error="checkoutError"
-            @export="handleExport"
-            @download-preview="downloadPreview"
-            @download-production="downloadProduction"
-            @checkout="handleCheckout"
-          />
-        </div>
-
-        <div class="flex flex-col gap-6">
-          <div
-            class="rounded-3xl border border-slate-800/60 bg-linear-to-br from-slate-900 via-slate-950 to-black shadow-2xl shadow-slate-950/60"
-          >
-            <DesignerToolbar
-              :on-add-text="addTextbox"
-              :on-add-circle="() => addShape('circle')"
-              :on-add-rectangle="() => addShape('rect')"
-              :on-clear="clearDesign"
-              :on-import-image="addImageFromFile"
-              :on-fill-change="setActiveFillColor"
-              :on-stroke-change="setActiveStrokeColor"
-              :on-background-change="setBackgroundColor"
-              :active-fill="activeFillColor"
-              :active-stroke="activeStrokeColor"
-              :active-background="selectedTemplate.backgroundColor"
-              :can-style-selection="canStyleSelection"
-              :zoom="zoomLevel"
-              :min-zoom="minZoom"
-              :max-zoom="maxZoom"
-              :on-zoom-change="setZoom"
-              :on-zoom-in="zoomIn"
-              :on-zoom-out="zoomOut"
-              :on-zoom-reset="resetZoom"
-            />
-            <div class="p-6">
-              <DesignerCanvas
-                :size="displaySize"
-                :background-color="selectedTemplate.backgroundColor"
-                :register-canvas="registerCanvas"
-                :unregister-canvas="unregisterCanvas"
-              />
-              <p class="mt-4 text-sm text-slate-400">
-                Safe zone and bleed guides update automatically when you switch
-                templates. Use the toolbar to layer text, shapes, and imagery
-                inside the circular boundary.
-              </p>
+    <!-- Animated Slipmat -->
+    <div class="absolute inset-0 flex items-center justify-center">
+      <div class="relative">
+        <!-- Turntable Base -->
+        <div class="absolute -inset-48 rounded-full bg-linear-to-br from-slate-800 to-slate-900 opacity-50 blur-3xl"></div>
+        
+        <!-- Spinning Slipmat -->
+        <div class="relative h-[600px] w-[600px] sm:h-[700px] sm:w-[700px] md:h-[800px] md:w-[800px] animate-spin-slow">
+          <!-- Vinyl Record Background -->
+          <div class="absolute inset-0 rounded-full bg-linear-to-br from-slate-900 via-slate-800 to-black shadow-2xl"></div>
+          
+          <!-- Grooves -->
+          <div class="absolute inset-8 rounded-full border-2 border-slate-700/30"></div>
+          <div class="absolute inset-16 rounded-full border-2 border-slate-700/20"></div>
+          <div class="absolute inset-24 rounded-full border-2 border-slate-700/10"></div>
+          
+          <!-- Center Label -->
+          <div class="absolute inset-0 flex items-center justify-center">
+            <div class="h-48 w-48 sm:h-56 sm:w-56 md:h-64 md:w-64 rounded-full bg-linear-to-br from-sky-500 to-blue-600 shadow-lg flex items-center justify-center">
+              <div class="h-16 w-16 sm:h-20 sm:w-20 md:h-24 md:w-24 rounded-full bg-slate-950 shadow-inner"></div>
             </div>
           </div>
+          
+          <!-- Slipmat Design Elements -->
+          <div class="absolute inset-32 rounded-full border-4 border-sky-500/20"></div>
+          
+          <!-- Decorative Dots -->
+          <div class="absolute left-1/2 top-16 h-3 w-3 -translate-x-1/2 rounded-full bg-sky-400"></div>
+          <div class="absolute bottom-16 left-1/2 h-3 w-3 -translate-x-1/2 rounded-full bg-sky-400"></div>
+          <div class="absolute left-16 top-1/2 h-3 w-3 -translate-y-1/2 rounded-full bg-sky-400"></div>
+          <div class="absolute right-16 top-1/2 h-3 w-3 -translate-y-1/2 rounded-full bg-sky-400"></div>
         </div>
-      </section>
+        
+        <!-- Tonearm -->
+        <div class="absolute -right-24 top-1/2 h-2 w-40 sm:w-48 origin-left -translate-y-1/2 rotate-12 bg-linear-to-r from-slate-700 to-slate-600 shadow-lg"></div>
+        <div class="absolute -right-28 top-1/2 h-4 w-4 -translate-y-1/2 rounded-full bg-slate-600 shadow-lg"></div>
+      </div>
     </div>
-  </main>
+
+    <!-- Content -->
+    <div class="relative z-20 flex min-h-screen flex-col items-center justify-between px-4 py-12 text-center">
+      <!-- Top Section - Title & Description -->
+      <div class="w-full space-y-4 pt-8">
+        <h1 class="text-6xl font-bold tracking-tight text-white drop-shadow-2xl sm:text-7xl md:text-8xl lg:text-9xl">
+          Slipmatz
+        </h1>
+        <p class="text-xl text-sky-400 drop-shadow-lg sm:text-2xl md:text-3xl">
+          Design Custom Slipmats for Your Vinyl
+        </p>
+        <div class="mx-auto max-w-2xl space-y-2 px-4 pt-2">
+          <p class="text-base text-slate-300 drop-shadow-lg sm:text-lg">
+            Create professional, print-ready slipmat designs in minutes.
+          </p>
+          <p class="text-sm text-slate-400 drop-shadow-md sm:text-base">
+            Perfect for DJs, record labels, and vinyl enthusiasts.
+          </p>
+        </div>
+      </div>
+
+      <!-- Middle Section - Spacer (Turntable is in background) -->
+      <div class="flex-1"></div>
+
+      <!-- Bottom Section - Button & Stats -->
+      <div class="w-full space-y-12 pb-8">
+        <div>
+          <NuxtLink
+            to="/designer"
+            class="group relative inline-flex overflow-hidden rounded-full bg-linear-to-r from-sky-500 to-blue-600 px-12 py-5 text-xl font-bold text-white shadow-2xl transition-all hover:scale-105 hover:shadow-sky-500/50 active:scale-95"
+          >
+            <span class="relative z-10 flex items-center gap-3">
+              Start Designing
+              <svg class="h-6 w-6 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
+              </svg>
+            </span>
+            <div class="absolute inset-0 bg-linear-to-r from-blue-600 to-sky-500 opacity-0 transition-opacity group-hover:opacity-100"></div>
+          </NuxtLink>
+        </div>
+
+        <div class="mx-auto grid max-w-4xl gap-8 px-4 sm:grid-cols-3">
+          <div class="space-y-2 backdrop-blur-sm">
+            <div class="text-3xl font-bold text-sky-400 drop-shadow-lg md:text-4xl">12"</div>
+            <div class="text-sm text-slate-400 drop-shadow-md">Standard Size</div>
+          </div>
+          <div class="space-y-2 backdrop-blur-sm">
+            <div class="text-3xl font-bold text-sky-400 drop-shadow-lg md:text-4xl">300 DPI</div>
+            <div class="text-sm text-slate-400 drop-shadow-md">Print Quality</div>
+          </div>
+          <div class="space-y-2 backdrop-blur-sm">
+            <div class="text-3xl font-bold text-sky-400 drop-shadow-lg md:text-4xl">$39.99</div>
+            <div class="text-sm text-slate-400 drop-shadow-md">Per Design</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Bottom Wave -->
+    <div class="absolute bottom-0 left-0 right-0 h-32 bg-linear-to-t from-slate-950 to-transparent"></div>
+  </div>
 </template>
+
+<style scoped>
+@keyframes spin-slow {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin-slow {
+  animation: spin-slow 8s linear infinite;
+}
+</style>