140 lines
4.7 KiB
Vue
140 lines
4.7 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted } from "vue";
|
|
|
|
const router = useRouter();
|
|
|
|
const startDesigning = () => {
|
|
router.push("/designer");
|
|
};
|
|
|
|
onMounted(() => {
|
|
// Import model-viewer on client-side only
|
|
if (process.client) {
|
|
import("@google/model-viewer");
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative min-h-screen overflow-hidden bg-white">
|
|
<!-- Subtle Background Pattern -->
|
|
<div class="absolute inset-0 opacity-5">
|
|
<div
|
|
class="absolute inset-0"
|
|
style="
|
|
background-image: radial-gradient(
|
|
circle at 1px 1px,
|
|
rgb(156 163 175) 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-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">
|
|
<h1
|
|
class="text-6xl font-bold tracking-tight text-slate-900 sm:text-7xl md:text-8xl"
|
|
>
|
|
TableJerseys
|
|
</h1>
|
|
<div class="space-y-4">
|
|
<p
|
|
class="text-2xl font-semibold text-slate-700 sm:text-3xl md:text-4xl"
|
|
>
|
|
Design custom jerseys for your table
|
|
</p>
|
|
|
|
<p class="text-base text-slate-600 sm:text-lg">
|
|
Create professional, print-ready jersey designs in minutes
|
|
</p>
|
|
<p class="text-sm text-slate-500 sm:text-base">
|
|
Perfect for sports teams, events, and table enthusiasts.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<NuxtLink
|
|
to="/designer"
|
|
class="group relative inline-flex overflow-hidden rounded-lg border-2 border-slate-900 bg-slate-900 px-12 py-5 text-xl font-bold text-white shadow-lg transition-all hover:bg-white hover:text-slate-900 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>
|
|
</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 lg:text-left">
|
|
<div class="text-3xl font-bold text-slate-900 md:text-4xl">
|
|
Custom
|
|
</div>
|
|
<div class="text-sm text-slate-600">Any Size</div>
|
|
</div>
|
|
<div class="space-y-2 text-center lg:text-left">
|
|
<div class="text-3xl font-bold text-slate-900 md:text-4xl">
|
|
300 DPI
|
|
</div>
|
|
<div class="text-sm text-slate-600">Print Quality</div>
|
|
</div>
|
|
<div class="space-y-2 text-center lg:text-left">
|
|
<div class="text-3xl font-bold text-slate-900 md:text-4xl">
|
|
$39.99
|
|
</div>
|
|
<div class="text-sm text-slate-600">Per Design</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Side - 3D Model -->
|
|
<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-[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"
|
|
>
|
|
<model-viewer
|
|
src="/LAMESA.glb"
|
|
alt="Table with Jersey"
|
|
auto-rotate
|
|
rotation-per-second="15deg"
|
|
camera-controls
|
|
shadow-intensity="1"
|
|
class="w-full h-full"
|
|
style="--poster-color: transparent"
|
|
></model-viewer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|