Add Base site

2024-11-15 18:34:15 +02:00
parent d902ac6b6a
commit aecacb29ed
21 changed files with 667 additions and 14 deletions
@@ -1,3 +1,27 @@
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
+
+body {
+    @apply bg-zinc-800 text-zinc-400 lg:text-xl;
+}
+
+input {
+    @apply bg-zinc-700 rounded-md p-2;
+}
+
+textarea {
+    @apply bg-zinc-700 rounded-md p-2;
+}
+
+.button {
+    @apply bg-zinc-700 rounded-md p-2 px-14;
+}
+
+.button-primary {
+    @apply bg-zinc-600 rounded-md p-2;
+}
+
+h2 {
+    @apply text-3xl font-bold;
+}
@@ -1,12 +1,15 @@
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
-</html>
+
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	%sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
+
+</html>
@@ -0,0 +1,21 @@
+<footer class="mt-8 flex flex-col items-center justify-center gap-8 bg-zinc-900 py-8 text-zinc-400">
+	<div class="flex items-center gap-2 lg:gap-20">
+		<a href="https://www.vastuugroup.fi/fi-fi/" aria-label="Luotettavakumppani">
+			<enhanced:img src="/static/luotettavakumppani.png?w=200" alt="Luotettavakumppani" />
+		</a>
+		<a href="https://helsinki.chamber.fi/" aria-label="Kauppakamari">
+			<enhanced:img src="/static/kauppakamari.png?w=200" alt="Kauppakamari" />
+		</a>
+		<a href="https://www.yrittajat.fi/" aria-label="Yrittäjät jäsenyritys">
+			<enhanced:img src="/static/yrittajat.png?w=200" alt="Yrittäjät 2022" />
+		</a>
+	</div>
+	<p>
+		&copy; {new Date().getFullYear()} Bomanza Transport Oy
+	</p>
+	<div class="flex flex-col justify-between md:flex-row lg:gap-12">
+		<p>[email protected]</p>
+		<p>+358 40 702 4437</p>
+		<p>Y 3129807-3</p>
+	</div>
+</footer>
@@ -0,0 +1,31 @@
+<header class="mb-8 flex flex-col items-center gap-8 bg-zinc-900 py-8 text-zinc-400">
+	<div>
+		<a href="/" class="flex items-center gap-4">
+			<enhanced:img src="/static/logoCircle.png?w=90" class="w-12" alt="Bomanza Transport Oy" />
+			<h1 class="text-xl font-bold lg:text-2xl">Bomanza Transport Oy</h1>
+		</a>
+	</div>
+	<div class="flex flex-col items-center gap-2 md:flex-auto md:flex-row">
+		<span class="info">RUNKOLIIKENNE</span><span class="info">KOTI- JA ULKOMAANAJOT</span>
+	</div>
+	<nav>
+		<ul class="flex items-center gap-8">
+			<li><a href="/">Etusivu</a></li>
+			<li><a href="/kalusto">Kalusto</a></li>
+			<li><a href="/ota-yhteytta">Ota yhteyttä</a></li>
+		</ul>
+	</nav>
+</header>
+
+<style lang="postcss">
+	@import url('https://fonts.cdnfonts.com/css/capture-it');
+
+	.info {
+		font-family: 'Capture It', sans-serif;
+		@apply text-sm lg:text-xl;
+	}
+
+	li {
+		@apply text-lg hover:text-zinc-200;
+	}
+</style>
@@ -1,6 +1,18 @@
 <script lang="ts">
+	import Footer from '$lib/components/Footer.svelte';
+	import Header from '$lib/components/Header.svelte';
 	import '../app.css';
 	let { children } = $props();
 </script>

-{@render children()}
+<svelte:head>
+	<title>Bomanza Transport Oy</title>
+</svelte:head>
+
+<div class="flex min-h-screen flex-col">
+	<Header />
+	<main class="container mx-auto flex-grow">
+		{@render children()}
+	</main>
+	<Footer />
+</div>
@@ -1,2 +1,9 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<div class="mx-auto flex max-w-7xl flex-col items-center gap-8">
+	<h2>Tervetuloa!</h2>
+	<p class="px-8">
+		Transport Bomanza Oy on Loviisassa vuonna 2020 perustettu kuljetusliike, joka tarjoaa
+		luotettavaa koti- ja ulkomaanliikennettä omalla kalustollaan. Toimintamme painottuu
+		Manner-Eurooppaan, jonne viemme suomalaisia tuotteita ja tuomme takaisin juuri sitä, mitä
+		tarvitset. Mikäli tarvitset kuljetuspalveluita, ota rohkeasti yhteyttä – autamme mielellämme!
+	</p>
+</div>
@@ -0,0 +1,35 @@
+<div class="max-w-1/2 mx-auto flex flex-col items-center justify-center gap-12">
+	<article>
+		<p>
+			Kalustona toimii Scania R500 4x2 vetopöytäauto, jolla ajetaan Euroopan liikennettä. Tämä
+			luotettava ja tehokas ajoneuvo takaa sujuvat ja turvalliset kuljetukset pitkillekin matkoille.
+		</p>
+		<enhanced:img src="/static/truck1.webp?w=800" alt="Kalusto" />
+	</article>
+	<article>
+		<enhanced:img src="/static/truck2.webp?w=1200" alt="Kalusto" />
+		<p>
+			Auto täyttää EURO 5 -päästöluokkavaatimukset, mikä takaa ympäristöystävällisemmän ajon. Sen
+			alhainen päästötaso auttaa vähentämään liikenteen ympäristövaikutuksia ja täyttää tiukat
+			Euroopan unionin säädökset.
+		</p>
+	</article>
+	<article>
+		<p>
+			Perässä kulkee kylmäkoneella varustettu kärry, joka avautuu kokonaan sivulta. Tämä
+			mahdollistaa erilaisten herkempien ja lämpötilaa vaativien tuotteiden kuljetuksen
+			turvallisesti ja tehokkaasti.
+		</p>
+		<enhanced:img src="/static/truck3.webp?w=800" alt="Kalusto" />
+	</article>
+</div>
+
+<style lang="postcss">
+	article {
+		@apply flex items-center justify-center gap-4;
+	}
+
+	img {
+		@apply rounded-md;
+	}
+</style>
@@ -0,0 +1,22 @@
+<div class="flex flex-col gap-8 px-4">
+	<h2>Ota yhteyttä</h2>
+	<form method="post" class="flex flex-col gap-4">
+		<p>
+			Ota rohkeasti yhteyttä, jos tarvitset kuljetuspalveluita tai haluat pyytää tarjouksen.
+			Vastaamme kysymyksiisi mielellämme.
+		</p>
+		<label for="name">Nimi:</label>
+		<input type="text" name="name" id="name" />
+		<label for="email">Sähköposti:</label>
+		<input type="email" name="email" id="email" />
+		<label for="message">Viesti:</label>
+		<textarea name="message" id="message"></textarea>
+		<button class="button mx-auto" type="submit">Lähetä</button>
+	</form>
+</div>
+
+<style>
+	textarea {
+		height: 200px;
+	}
+</style>