add car pages

package.json

@@ -14,7 +14,7 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-static": "^1.0.4",
+		"@sveltejs/adapter-vercel": "^3.0.1",
 		"@sveltejs/kit": "^1.0.0",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
 		"@typescript-eslint/parser": "^5.45.0",

src/lib/components/CarCard.svelte

@@ -13,11 +13,13 @@
 	export let maxKmh: number;
 	export let cylinders: number;
 	export let roundsPerMin: number;
+	export let href: string;
 </script>
 
-<div
+<a
 	class="w-[250px] md:w-[350px] h-[400px] md:h-[500px] absolute bg-white rounded-xl p-2"
 	style="transform: rotateY({rotation}deg) translateZ(200px);"
+	href={'/car/' + href}
 >
 	<div class="bg-zinc-700 h-full rounded-xl overflow-hidden">
 		<h1
@@ -37,4 +39,4 @@
 			<DetailBox icon={carStatIcons.cylinders} title="Zylinder" value={cylinders} />
 		</div>
 	</div>
-</div>
+</a>

src/lib/constants/cars.ts

@@ -1,48 +1,79 @@
+//eslint-disable-next-line
+//@ts-ignore
 import ferrariImg from '$lib/assets/ferrari_488.jpeg?h=200&webp';
+//eslint-disable-next-line
+//@ts-ignore
 import fordImg from '$lib/assets/ford_mustang.jpeg?h=200&webp';
+//eslint-disable-next-line
+//@ts-ignore
 import lamborghiniImg from '$lib/assets/lamborghini_hurracan.jpeg?h=200&webp';
 
-interface Car {
+export interface Car {
 	img: string;
 	title: string;
+	shortTitle: string;
 	ps: number;
 	toHundred: number;
 	length: number;
 	maxKmh: number;
 	cylinders: number;
 	roundsPerMin: number;
+	description: string[];
 }
 
 const mustang: Car = {
 	img: fordImg,
 	title: 'Ford Mustang V8 GT Modell 2017',
+	shortTitle: 'ford',
 	ps: 421,
 	toHundred: 4.8,
 	length: 4.78,
 	maxKmh: 250,
 	cylinders: 8,
-	roundsPerMin: 6500
+	roundsPerMin: 6500,
+	description: [
+		'Erleben Sie das ultimative Fahrvergnügen im kraftvollen Ford Mustang V8 GT Modell 2017! Tauchen Sie ein in eine Welt voller Geschwindigkeit, Adrenalin und unvergleichlicher Leistung.',
+		'Wir bieten Ihnen ein exklusives Erlebnis, bei dem Sie die Wahl haben: Entweder 18 km auf der renommierten Rennstrecke Anneau du Rhin oder 36 km entlang einer atemberaubenden Bergstraße. Ganz gleich, für welche Option Sie sich entscheiden, der Ford Mustang V8 GT wird Ihre Erwartungen übertreffen.',
+		'Auf der Rennstrecke Anneau du Rhin können Sie Ihre Fahrkünste auf die Probe stellen und Ihre Rundenzeiten verbessern. Fühlen Sie den Nervenkitzel, wenn Sie mit unglaublicher Geschwindigkeit durch Kurven rasen und die Geraden erobern. Dies ist die perfekte Gelegenheit, um die beeindruckende Leistung des Ford Mustang V8 GT zu erleben.',
+		'Alternativ können Sie sich für die Fahrt entlang der malerischen Bergstraße entscheiden. Genießen Sie die atemberaubende Landschaft, während Sie das brüllende Triebwerk des Ford Mustang V8 GT auf kurvenreichen Straßen spüren. Jeder Moment wird zu einem unvergesslichen Abenteuer.',
+		'Unsere erfahrenen Instruktoren stehen Ihnen zur Seite, um Ihnen alle notwendigen Kenntnisse und Fähigkeiten zu vermitteln, damit Sie das Beste aus Ihrer Fahrt herausholen können. Sie werden lernen, wie man den Ford Mustang V8 GT sicher und souverän lenkt, um das volle Potenzial dieses kultigen Muscle Cars auszuschöpfen.'
+	]
 };
 const hurracan: Car = {
 	img: lamborghiniImg,
 	title: 'Lamborghini Huracán',
+	shortTitle: 'lamborghini',
 	ps: 610,
 	toHundred: 3.2,
 	length: 4.5,
 	maxKmh: 325,
 	cylinders: 10,
-	roundsPerMin: 8250
+	roundsPerMin: 8250,
+	description: [
+		'Erleben Sie das ultimative Fahrvergnügen im Lamborghini Huracán! Tauchen Sie ein in eine Welt voller Geschwindigkeit, Adrenalin und unvergleichlicher Leistung.',
+		'Wir bieten Ihnen ein exklusives Erlebnis, bei dem Sie die Wahl haben: Entweder 9 km auf der renommierten Rennstrecke Anneau du Rhin oder 18 km entlang einer atemberaubenden Bergstraße. Ganz gleich, für welche Option Sie sich entscheiden, der Lamborghini Huracán wird Ihre Erwartungen übertreffen.',
+		'Auf der Rennstrecke Anneau du Rhin können Sie Ihre Fahrkünste auf die Probe stellen und Ihre Rundenzeiten verbessern. Fühlen Sie den Nervenkitzel, wenn Sie mit unglaublicher Geschwindigkeit durch Kurven rasen und die Geraden erobern. Dies ist die perfekte Gelegenheit, um den Huracán in seinem Element zu erleben.',
+		'Alternativ können Sie sich für die Fahrt entlang der malerischen Bergstraße entscheiden. Genießen Sie die atemberaubende Landschaft, während Sie die Kraft und Agilität des Lamborghini Huracán auf kurvenreichen Straßen spüren. Jeder Moment wird zu einem unvergesslichen Abenteuer.',
+		'Unsere erfahrenen Instruktoren stehen Ihnen zur Seite, um Ihnen alle notwendigen Kenntnisse und Fähigkeiten zu vermitteln, damit Sie das Beste aus Ihrer Fahrt herausholen können. Sie werden lernen, wie man den Huracán sicher und souverän lenkt, um das volle Potenzial dieses atemberaubenden Supersportwagens auszuschöpfen.'
+	]
 };
 
 const ferrari: Car = {
 	img: ferrariImg,
 	title: 'Ferrari F488 GTB',
+	shortTitle: 'ferrari',
 	ps: 670,
 	toHundred: 3,
 	length: 4.56,
 	maxKmh: 330,
 	cylinders: 8,
-	roundsPerMin: 8000
+	roundsPerMin: 8000,
+	description: [
+		'Bereit für ein unvergessliches Abenteuer voller Geschwindigkeit und Adrenalin? Steigen Sie ein in den legendären Ferrari F488 GTB und erleben Sie eine Fahrt, die Ihnen den Atem rauben wird!',
+		'Unser exklusives Angebot führt Sie entweder auf die berühmte Rennstrecke Anneau du Rhin, wo Sie 9 km voller Kurven, Geraden und Herausforderungen meistern können. Spüren Sie die unbändige Kraft des Ferraris, während Sie die Rundenzeiten verbessern und Ihre Fahrkünste bis an die Grenzen bringen.',
+		'Wenn Sie hingegen die Schönheit der Natur und eine atemberaubende Landschaft genießen möchten, bieten wir Ihnen die Möglichkeit, 18 km auf einer spektakulären Bergstraße zu erleben. Kurvenreich und anspruchsvoll, werden Sie den Ferrari F488 GTB durch die malerischen Straßen steuern und das Zusammenspiel von Leistung und Präzision spüren.',
+		'Egal, für welche Option Sie sich entscheiden, Sie werden von unseren erfahrenen Instruktoren gründlich eingewiesen, um das Beste aus Ihrem Ferrari-Erlebnis herauszuholen. Sie werden lernen, wie man den Sportwagen sicher und effektiv handhabt, damit Sie jeden Moment in vollen Zügen genießen können.'
+	]
 };
 
 export default [mustang, hurracan, ferrari];

src/routes/+page.svelte

@@ -23,6 +23,10 @@
 	}
 </script>
 
+<svelte:head>
+	<title>Geburtstag</title>
+	<meta name="description" content="Alles gute zum 20. 🎉" />
+</svelte:head>
 <div class="h-screen w-full overflow-hidden grid place-items-center bg-zinc-900">
 	<div class="relative w-[250px] md:w-[350px] h-[400px] md:h-[500px] carousel-container ">
 		<div
@@ -32,7 +36,7 @@
 			style="transform: rotateY({current * partialRotation}deg);"
 		>
 			{#each cars as car, i}
-				<CarCard rotation={i * partialRotation} {...car} />
+				<CarCard rotation={i * partialRotation} {...car} href={car.shortTitle} />
 			{/each}
 		</div>
 		<div class="hidden md:block md:absolute -bottom-28 left-1/2 -translate-x-1/2 space-x-3">

src/routes/car/[slug]/+layout.svelte

@@ -0,0 +1,5 @@
+<div class="min-h-screen w-full flex items-center bg-zinc-900">
+	<div class="max-w-3xl w-full p-5 text-white">
+		<slot />
+	</div>
+</div>

src/routes/car/[slug]/+page.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Car } from '$lib/constants/cars';
+
+	interface PageData {
+		car: Car;
+	}
+	/** @type {import('./$types').PageData} */
+	export let data: PageData;
+	const { car } = data;
+</script>
+
+<div class="flex flex-col">
+	<img class="object-cover w-full h-full rounded-md overflow-hidden" alt="" src={car.img} />
+	<h1 class="text-2xl font-bold text-center mt-5">{car.title}</h1>
+	{#each car.description as line}
+		<p class="mt-2">{line}</p>
+	{/each}
+</div>

src/routes/car/[slug]/+page.ts

@@ -0,0 +1,19 @@
+import { error } from '@sveltejs/kit';
+import cars from '$lib/constants/cars';
+
+interface Params {
+	params: {
+		slug: string;
+	};
+}
+
+/** @type {import('./$types').PageLoad} */
+export function load({ params }: Params) {
+	const car = cars.find((car) => car.shortTitle === params.slug);
+	if (!car) {
+		throw error(404, 'Not found');
+	}
+	return {
+		car
+	};
+}

svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from '@sveltejs/adapter-static';
+import adapter from '@sveltejs/adapter-vercel';
 import { vitePreprocess } from '@sveltejs/kit/vite';
 
 /** @type {import('@sveltejs/kit').Config} */