webmaster/tablejerseys-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: standardize string quotes and improve layout in designer and index pages
All checks were successful
Deploy Production / deploy (push) Successful in 2m2s
Details

Browse Source
This commit is contained in:
Frank John Begornia
2026-01-13 21:49:34 +08:00
parent 28a9b17fa7
commit b6403bde4f
2 changed files with 42 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
app/pages/index.vue
View File

@@ -38,7 +38,7 @@ onMounted(() => {
>
<!-- Top Section - Split Layout -->
<div
class="flex flex-1 flex-col items-center justify-between gap-8 lg:flex-row lg:gap-16"
class="flex flex-1 flex-col-reverse items-center justify-between gap-8 lg:flex-row lg:gap-16"
>
<!-- Left Side - Title & Description -->
<div class="w-full space-y-8 text-center lg:w-1/2 lg:text-left">
@@ -54,70 +54,6 @@ onMounted(() => {
Design custom jerseys for your table
</p>
<!-- Simple preview 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">
<div
class="flex h-full w-full items-center justify-center rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-slate-100 shadow-lg overflow-hidden"
>
<!-- Rotating Table with Fitted Cover -->
<div
class="animate-spin-slow relative"
style="transform-style: preserve-3d"
>
<div class="relative">
<!-- Table with fitted cover -->
<div class="relative">
<!-- Table Top -->
<div
class="relative h-24 w-40 rounded-t-sm bg-gradient-to-br from-slate-800 via-slate-700 to-slate-900 shadow-xl"
>
<!-- Jersey design on top of cover -->
<div
class="absolute inset-4 flex items-center justify-center rounded-lg bg-gradient-to-br from-blue-400 via-white to-red-400 shadow-lg border-2 border-slate-300"
>
<div class="text-center">
<div class="text-2xl font-bold text-slate-800">
23
</div>
<div
class="text-[7px] font-semibold text-slate-600 tracking-wider"
>
CUSTOM
</div>
</div>
</div>
</div>
<!-- Fitted Cover Skirt (draping down) -->
<div
class="absolute top-24 left-0 right-0 h-16 bg-gradient-to-b from-slate-800 via-slate-900 to-slate-950 rounded-b-sm shadow-2xl"
>
<!-- Fabric folds/creases -->
<div
class="absolute inset-0 opacity-30"
style="
background: repeating-linear-gradient(
90deg,
transparent,
transparent 8px,
rgba(0, 0, 0, 0.3) 8px,
rgba(0, 0, 0, 0.3) 9px
);
"
></div>
<!-- Shadow at bottom -->
<div
class="absolute bottom-0 left-0 right-0 h-2 bg-black/40"
></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p class="text-base text-slate-600 sm:text-lg">
Create professional, print-ready jersey designs in minutes
</p>
@@ -175,10 +111,10 @@ onMounted(() => {
</div>
<!-- Right Side - 3D Model -->
<div class="relative hidden w-full lg:block lg:w-1/2">
<div class="relative w-full lg:w-1/2">
<div class="relative mx-auto max-w-4xl">
<div
class="relative mx-auto h-[300px] w-[300px] sm:h-[600px] sm:w-[600px]"
class="relative mx-auto h-[300px] w-[300px] sm:h-[400px] sm:w-[400px] md:h-[500px] md:w-[500px] lg:h-[600px] lg:w-[600px]"
>
<div
class="flex h-full w-full items-center justify-center rounded-2xl border-2 border-slate-300 bg-linear-to-br from-slate-700 to-slate-900 shadow-xl overflow-hidden"