From 0e4e41d67211e41996748f288ec510205c8f0a66 Mon Sep 17 00:00:00 2001
From: Frank John Begornia <frank.begornia@yahoo.com>
Date: Tue, 2 Dec 2025 23:06:22 +0800
Subject: [PATCH] style: enhance layout for designer page and add mobile
 turntable view

---
 app/pages/designer.vue | 34 ++++++++++++++++++++--------------
 app/pages/index.vue    | 16 ++++++++++++++--
 2 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/app/pages/designer.vue b/app/pages/designer.vue
index 2a1e9a0..5e82337 100644
--- a/app/pages/designer.vue
+++ b/app/pages/designer.vue
@@ -373,23 +373,29 @@ const handleCheckout = async () => {
         </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"
-          />
+      <section class="mt-10 flex flex-col gap-8 lg:grid lg:grid-cols-[320px_minmax(0,1fr)] lg:gap-6">
+        <!-- Left Sidebar - Template Picker and Preview (together on desktop, separate on mobile) -->
+        <div class="contents lg:block lg:space-y-6">
+          <div class="order-1">
+            <TemplatePicker
+              :templates="templates"
+              :selected-template-id="selectedTemplate.id"
+              @select="handleTemplateSelect"
+            />
+          </div>
 
-          <DesignerPreview
-            :is-checkout-pending="isCheckoutPending"
-            :checkout-price="DESIGN_PRICE_USD"
-            :checkout-error="checkoutError"
-            @checkout="handleCheckout"
-          />
+          <div class="order-3">
+            <DesignerPreview
+              :is-checkout-pending="isCheckoutPending"
+              :checkout-price="DESIGN_PRICE_USD"
+              :checkout-error="checkoutError"
+              @checkout="handleCheckout"
+            />
+          </div>
         </div>
 
-        <div class="flex flex-col gap-6">
+        <!-- Designer Canvas - Second on mobile, right column on desktop -->
+        <div class="order-2 flex flex-col gap-6 lg:order-0">
           <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"
           >
diff --git a/app/pages/index.vue b/app/pages/index.vue
index eaf6a88..d8ca1e7 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -26,6 +26,18 @@ const startDesigning = () => {
             <p class="text-2xl font-semibold text-sky-400 drop-shadow-lg sm:text-3xl md:text-4xl">
               Design custom slipmats for your vinyl
             </p>
+
+            <!-- Turntable for mobile view -->
+            <div class="relative mx-auto my-8 block lg:hidden">
+              <div class="relative mx-auto h-[280px] w-[280px] sm:h-80 sm:w-80">
+                <img 
+                  src="/SLIPMATZ.svg" 
+                  alt="Slipmatz Logo" 
+                  class="absolute inset-0 h-full w-full object-contain"
+                />
+              </div>
+            </div>
+
             <p class="text-base text-slate-300 drop-shadow-lg sm:text-lg">
               Create professional, print-ready slipmat designs in minutes
             </p>
@@ -66,10 +78,10 @@ const startDesigning = () => {
         </div>
 
         <!-- Right Side - Animated Slipmat -->
-        <div class="relative w-full lg:w-1/2">
+        <div class="relative hidden w-full lg:block lg:w-1/2">
           <div class="relative mx-auto max-w-4xl">
             <!-- Turntable Base -->
-            <!-- <div class="absolute -inset-32 rounded-full bg-linear-to-br from-slate-800 to-slate-900 opacity-50 blur-3xl"></div> -->
+            <div class="absolute -inset-32 rounded-full bg-linear-to-br from-slate-800 to-slate-900 opacity-50 blur-3xl"></div>
             
             <!-- Spinning Slipmat with SVG -->
             <div class="relative mx-auto h-[300px] w-[300px] sm:h-[900px] sm:w-[900px]">