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

style: enhance layout for designer page and add mobile turntable view

Browse Source
This commit is contained in:
Frank John Begornia
2025-12-02 23:06:22 +08:00
parent 39c820cf21
commit 0e4e41d672
2 changed files with 34 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/pages/index.vue
View File

@@ -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]">