131 lines
5.9 KiB
Vue
131 lines
5.9 KiB
Vue
<script setup lang="ts">
|
|
const router = useRouter();
|
|
|
|
const startDesigning = () => {
|
|
router.push('/designer');
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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>
|
|
</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>
|