pages

src/pages/TaxiPage.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+    import taxis from "../assets/images/taxis.jpg";
+    import van from "../assets/images/van.webp";
+    import Carousel from "../lib/components/carousel/Carousel.svelte";
+
+    let taxiCarouselItems: string[] = [taxis];
+    let packageTaxiCarouselItems: string[] = [van];
+</script>
+
+<h1 class="text-xl font-semibold md:text-2xl">Taxi</h1>
+
+<section
+    id="person"
+    class="mt-4 justify-between gap-5 rounded-md bg-primary-300 p-4 shadow-inner md:flex"
+>
+    <div>
+        <h2 class="grow text-lg font-semibold md:text-xl">Persontaxi</h2>
+        <p class="md:text-lg">
+            Vi har taxier som dekker de fleste behov.
+            <br />Rullestoltransport, firehjulstrekk og helelektrisk bil er noen
+            av tilbudene våre.
+            <br />Taxiene våre kan ta opp til 8 passasjerer
+        </p>
+    </div>
+    <div class="md:w-96">
+        <Carousel
+            items={taxiCarouselItems}
+            buttonClass="bg-primary-200"
+            let:item
+        >
+            <div class="card w-96 overflow-hidden shadow-sm">
+                <img class="w-full object-cover" src={item} alt="" />
+            </div>
+        </Carousel>
+    </div>
+</section>
+
+<section
+    id="package"
+    class="mt-4 justify-between gap-5 rounded-md bg-primary-300 p-4 shadow-inner md:flex"
+>
+    <div>
+        <h2 class="grow text-lg font-semibold md:text-xl">Pakketaxi</h2>
+        <p class="md:text-lg">
+            Vi har tilbud om pakketaxi. Både småpakker og volumkrevende gods kan
+            transporteres
+        </p>
+    </div>
+    <div class="md:w-96">
+        <Carousel
+            items={packageTaxiCarouselItems}
+            buttonClass="bg-primary-200"
+            let:item
+        >
+            <div class="card w-96 overflow-hidden">
+                <img class="w-full object-cover" src={item} alt="" />
+            </div>
+        </Carousel>
+    </div>
+</section>