pages

src/pages/AccessibilityPage.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import singleRampLeftClosed from "../assets/images/single_ramp_left_closed.jpg";
+    import singleRampRightClosed from "../assets/images/single_ramp_right_closed.jpg";
+    import threeRampsOpen from "../assets/images/three_ramps_open.jpg";
+    import Carousel from "../lib/components/carousel/Carousel.svelte";
+
+    let rampCarouselItems: string[] = [
+        singleRampLeftClosed,
+        singleRampRightClosed,
+        threeRampsOpen,
+    ];
+</script>
+
+<h1 class="text-xl font-semibold md:text-2xl">Tilgjengelighetsfunksjoner</h1>
+
+<section
+    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">
+            Sitter du i rullestol?
+        </h2>
+        <p class="md:text-lg">
+            Vi har flere busser med rullestolstøtte, med kapasitet opp til 2
+            rullestoler per buss.
+            <br />Total kapasitet er 5 rullestilbrukere fordelt på 3 busser
+        </p>
+    </div>
+    <div class="md:w-96">
+        <Carousel
+            items={rampCarouselItems}
+            buttonClass="bg-primary-200"
+            let:item
+        >
+            <div class="h-full w-96 overflow-hidden shadow-sm">
+                <img class="card w-full object-cover" src={item} alt="" />
+            </div>
+        </Carousel>
+    </div>
+</section>

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>

src/pages/ContactPage.svelte

@@ -0,0 +1,6 @@
+<script>
+    import ContactForm from "../lib/components/ContactForm.svelte";
+</script>
+
+<h1 class="text-xl font-semibold md:text-2xl">Kontakt oss</h1>
+<ContactForm />

src/pages/HomePage.svelte

@@ -1 +1,120 @@
-Home
+<script lang="ts">
+    import header_image from "../assets/images/header_image.jpg";
+    import Carousel from "../lib/components/carousel/Carousel.svelte";
+    import ContactForm from "../lib/components/ContactForm.svelte";
+    import threeBusses from "../assets/images/three_busses.jpg";
+    import taxis from "../assets/images/taxis.jpg";
+    import wheelchairRamps from "../assets/images/three_ramps_open.jpg";
+    import twoTourBusses from "../assets/images/two_tour_busses.jpg";
+    import van from "../assets/images/van.webp";
+    import Link from "../lib/components/link/Link.svelte";
+    import { Routes } from "../lib/global/routes";
+
+    type CardCarouselItem = {
+        header: string;
+        text: string;
+        url: string;
+        image: string | null;
+    };
+
+    let carouselItems: CardCarouselItem[] = [
+        {
+            image: threeBusses,
+            header: "Minibusstransport",
+            text: "Vi har 4 minibusser i ulike størrelser",
+            url: `${Routes.bus.url}#minibus`,
+        },
+        {
+            image: taxis,
+            header: "Taxikjøring",
+            text: "Vi kjører taxi med kapasitet opptil 8 personer",
+            url: `${Routes.taxi.url}#person`,
+        },
+        {
+            image: wheelchairRamps,
+            header: "Rullestoltransport",
+            text: "Fire av våre biler er rullestoltilpasset med plass til inntil 3 rullestoler",
+            url: `${Routes.accessibility.url}`,
+        },
+        {
+            image: twoTourBusses,
+            header: "Turbuss",
+            text: "Vi er medeier i Storfjord Turbuss AS, som har tre moderne turbusser for inntil 50 personer",
+            url: `${Routes.bus.url}#tour`,
+        },
+        {
+            image: van,
+            header: "Pakketaxi",
+            text: "Vi har tilbud om pakketaxi. Både småpakker og volumkrevende gods kan transporteres",
+            url: `${Routes.taxi.url}#package`,
+        },
+    ];
+</script>
+
+<div class="flex gap-8">
+    <div class="overflow-hidden">
+        <div>
+            <img
+                src={header_image}
+                class="rounded-md border-2 border-contrast-100"
+                alt="Minibusses lined up in a row"
+            />
+
+            <h1 class="mt-4 text-xl font-semibold md:text-2xl">
+                Med komfort og sikkerhet i førersetet<br />Bli med på en trygg
+                og behagelig tur
+            </h1>
+            <p class="mt-2 font-medium opacity-70 md:text-lg">
+                Minibusservice Stene AS driver personbefordring med taxi,
+                minibuss og busser.
+                <br />Vi har lang erfaring og finner gode løsninger for kundene
+                våre.
+                <br />Kontraktskjøring for helseforetak, busselskap og kommune
+                utgjør størsteparten av oppdragene våre, men vi tilbyr også
+                turer for privatpersoner, bedrifter og turister.
+                <br />Vi er godkjent lærebedrift og setter kunden og miljøet i
+                fokus. Vi har både elektriske, hybride og dieselkjøretøy i
+                flåten
+            </p>
+        </div>
+
+        <div class="mt-12">
+            <h1 class="text-xl font-semibold md:text-2xl">Våre tjenester</h1>
+
+            <Carousel
+                class="mt-2 rounded-md border-2 border-contrast-100 bg-primary-300 p-4 shadow-inner"
+                items={carouselItems}
+                let:item
+            >
+                <div
+                    class="card flex h-full w-64 flex-col overflow-hidden border-contrast-100 shadow-sm transition-transform"
+                >
+                    {#if item.image}
+                        <img
+                            class="h-44 w-full border-b-2 border-contrast-100 object-cover"
+                            src={item.image}
+                            alt=""
+                        />
+                    {/if}
+                    <div class="flex grow flex-col p-4">
+                        <h3 class="font-semibold">
+                            {item.header}
+                        </h3>
+                        <p class="grow whitespace-normal">
+                            {item.text}
+                        </p>
+                        <Link
+                            class="hi mt-2 w-fit font-semibold"
+                            href={item.url}>Les mer...</Link
+                        >
+                    </div>
+                </div>
+            </Carousel>
+        </div>
+
+        <div class="mt-12">
+            <h1 class="text-xl font-semibold md:text-2xl">Kontakt oss</h1>
+            <ContactForm />
+        </div>
+    </div>
+</div>

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>