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" />
+<head>
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		%sveltekit.head%
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
-	</head>
+	%sveltekit.head%
-	<body data-sveltekit-preload-data="hover">
+</head>
-		<div style="display: contents">%sveltekit.body%</div>
+
-	</body>
+<body data-sveltekit-preload-data="hover">
-</html>
+	<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>
+<div class="mx-auto flex max-w-7xl flex-col items-center gap-8">
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+	<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>
@@ -1,6 +1,9 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { enhancedImages } from '@sveltejs/enhanced-img';
 import { defineConfig } from 'vite';
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [
 		enhancedImages(),
 		sveltekit()]
 });