pfadi-bussle/pages/index.tsx

import Image from 'next/image'
import Link from 'next/link'
import Layout from '../components/layout'

import bussleImage from '../public/bussle.webp'

export default function Home() {
  return (
    <Layout>
      <div className="mt-6 sm:text-center">
        <h1 className="text-xl tracking-tight font-extrabold text-gray-900 sm:text-2xl md:text-3xl">
          <span className="block text-blue-800 xl:inline">Pfadi-Bussle</span>{' '}
          <span className="block xl:inline">
            des Freundeskreis des VCP Rosenfeld e.V.
          </span>
        </h1>
        <p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl">
          Für Lager, Vereinsausflüge, Urlaubsreisen, Umzüge, etc. kann man unser
          Pfadi-Bussle mieten.
        </p>
        <p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl">
          Das Bussle ist ein VW T5 Kleinbus mit 9 Sitzplätzen (inkl. Fahrer),
          mit Klimaanlage, Radio/CD/Aux und Anhängerkupplung. Die zweite und
          dritte Sitzreihe können ausgebaut werden.
        </p>
        <p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl">
          <Link href="/prices" className="underline hover:text-blue-700">
            Preise
          </Link>{' '}
          und{' '}
          <Link href="/terms" className="underline hover:text-blue-700">
            Mietbedingungen
          </Link>
        </p>
        <div className="mt-5 sm:mt-8 sm:flex sm:justify-center">
          <div className="rounded-md shadow">
            <Link
              href="/book"
              className="w-full flex items-center justify-center px-6 py-2 border border-transparent text-base font-medium rounded-md text-white bg-blue-800 hover:bg-blue-900 md:py-2 md:text-lg md:px-5"
            >
              Zur Buchungsanfrage
            </Link>
          </div>
        </div>
        <p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl">
          Du hast weiter Fragen melde Dich gerne per
          <br />
          <a
            className="underline hover:text-blue-700"
            href="mailto:pfadibussle@tomru.space"
          >
            E-Mail
          </a>
          , Telefon{' '}
          <a
            className="underline hover:text-blue-700"
            href="tel:+4915121225362"
          >
            0151 / 21 22 53 62
          </a>{' '}
          oder{' '}
          <Link
            href="https://wa.me/4915121225362"
            className="underline inline-flex flex-row items-baseline hover:text-blue-700"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="fill-current h-4 inline"
              viewBox="0 0 738 741"
            >
              <title>Whatsapp</title>
              <path d="M630 108A368 368 0 0052 551L0 741l195-51a368 368 0 00435-582M370 672c-55 0-108-14-155-42l-11-7-116 31 31-113-7-12A304 304 0 01370 62a303 303 0 01306 305c-1 169-137 305-306 305m168-228l-63-30c-8-3-15-4-21 5l-29 36c-5 6-10 7-20 2-9-5-38-14-73-46-28-24-46-54-51-63-6-9-1-14 4-19l13-16c5-5 7-9 10-15s1-12-1-16l-28-68c-8-18-15-16-21-16h-18c-6 0-16 2-24 11-9 9-32 31-32 77s33 88 37 94c5 7 65 99 157 139l52 19c22 7 42 6 58 4 18-3 54-22 62-44 8-21 8-40 5-43-2-4-8-6-17-11" />
            </svg>
          </Link>
        </p>
        <p className="flex justify-center mt-3 sm:mt-5 sm:text-lg md:text-xl">
          <Image
            src={bussleImage}
            sizes="(max-width: 800px) 100vw"
            alt="Bild des Pfadi-Bussles"
          />
        </p>
      </div>
    </Layout>
  )
}