pages

src/pages/BusPage.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+    import threeBusses from "../assets/images/three_busses.jpg";
+    import twoBusses from "../assets/images/two_busses.jpg";
+    import fiveBusses from "../assets/images/five_busses.jpg";
+    import singleRampLeftClosed from "../assets/images/single_ramp_left_closed.jpg";
+    import threeRampsOpen from "../assets/images/three_ramps_open.jpg";
+    import twoTourBuses from "../assets/images/two_tour_busses.jpg";
+    import tourBusSide from "../assets/images/tour_bus_side.jpg";
+    import tourBusSideLogo from "../assets/images/tour_bus_side_logo.jpg";
+    import Carousel from "../lib/components/carousel/Carousel.svelte";
+
+    let minibusCarouselItems: string[] = [
+        threeBusses,
+        twoBusses,
+        fiveBusses,
+        singleRampLeftClosed,
+        threeRampsOpen,
+    ];
+
+    let tourBusCarouselItems: string[] = [
+        twoTourBuses,
+        tourBusSide,
+        tourBusSideLogo,
+    ];
+</script>
+
+<h1 class="text-xl font-semibold md:text-2xl">Buss</h1>
+
+<section
+    id="minibus"
+    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">Minibusser</h2>
+        <p class="md:text-lg">
+            Vi har idag fire minibusser, to Mercedes Sprinter og to Ford
+            Transit. Vi har også en fullelektrisk Mercedes EQV og en Mitsubishi
+            Outlander.
+            <br />Vi finner løsninger for grupper fra 5 - 32 passasjerer med
+            støtte for inntil 3 rullestolbrukere samtidig
+        </p>
+    </div>
+    <div class="md:w-96">
+        <Carousel
+            items={minibusCarouselItems}
+            buttonClass="bg-primary-200"
+            let:item
+        >
+            <div class="w-96 overflow-hidden shadow-sm">
+                <img class="card w-full object-cover" src={item} alt="" />
+            </div>
+        </Carousel>
+    </div>
+</section>
+
+<section
+    id="tour"
+    class="mt-12 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">Turbusser</h2>
+        <p class="md:text-lg">
+            Vi er medeier i Storfjord Turbuss AS som har tre turbusser.
+            <br />Storfjord Turbuss AS ble etablert i 2018, og vi utfører
+            turkjøring og lager pakkeløsninger etter dine ønsker og behov.
+            <br />Vår målsetning er å alltid være det naturlige førstevalget av
+            transportør
+        </p>
+    </div>
+    <div class="md:w-96">
+        <Carousel
+            items={tourBusCarouselItems}
+            buttonClass="bg-primary-200"
+            let:item
+        >
+            <div class="w-96 overflow-hidden shadow-sm">
+                <img class="card w-full object-cover" src={item} alt="" />
+            </div>
+        </Carousel>
+    </div>
+</section>