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

Merge pull request #11 from franknstayn/feat/dev

Browse Source 
Refactor code structure for improved readability and maintainability
This commit is contained in:
franknstayn
2025-12-02 22:12:32 +08:00
committed by GitHub
parent cabf1dc2c0 d1f06d0361
commit b7b8f6873f
2 changed files with 1828 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
app/pages/index.vue
View File

@@ -13,97 +13,73 @@ const startDesigning = () => {
<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>
<!-- 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>
<!-- Main Content Grid -->
<div class="relative z-20 flex min-h-screen flex-col px-4 py-12 md:px-8 lg:px-16">
<!-- Top Section - Split Layout -->
<div class="flex flex-1 flex-col 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">
<h1 class="text-6xl font-bold tracking-tight text-white drop-shadow-2xl sm:text-7xl md:text-8xl">
Slipmatz
</h1>
<div class="space-y-4">
<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>
<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 DJ's, record labels, and vinyl enthusiast.
</p>
</div>
<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>
<!-- Stats Section - Now on Left Side -->
<div class="mx-auto grid max-w-4xl gap-8 pt-12 grid-cols-3 sm:grid-cols-3 lg:mx-0">
<div class="space-y-2 text-center backdrop-blur-sm lg:text-left">
<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 text-center backdrop-blur-sm lg:text-left">
<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 text-center backdrop-blur-sm lg:text-left">
<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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- Right Side - Animated Slipmat -->
<div class="relative w-full 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> -->
<!-- Spinning Slipmat with SVG -->
<div class="relative mx-auto h-[300px] w-[300px] sm:h-[900px] sm:w-[900px]">
<img
src="/SLIPMATZ.svg"
alt="Slipmatz Logo"
class="absolute inset-0 h-full w-full object-contain"
/>
</div>
</div>
</div>
</div>

1765
public/SLIPMATZ.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 187 KiB