119 lines
4.9 KiB
Vue
119 lines
4.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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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>
|
|
<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>
|
|
</div>
|
|
|
|
<!-- Right Side - Animated Slipmat -->
|
|
<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>
|
|
|
|
<!-- 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>
|
|
</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>
|