many visual alignments

This commit is contained in:
Thomas Ruoff
2020-11-26 00:38:34 +01:00
parent 4801525dc4
commit d546e98ab2
11 changed files with 84 additions and 95 deletions

View File

@@ -1,5 +1,4 @@
import React from 'react'
import Head from 'next/head'
import Link from 'next/link'
import Footer from '../components/footer'
import Header from '../components/header'
@@ -7,36 +6,23 @@ import Header from '../components/header'
export default function Home() {
return (
<>
<Head>
<title>Pfadi Bussle</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Header label="Pfadi Bussle" />
<Header />
<main className="main">
<div className="sm:text-center lg:text-left">
<div className="mt-6 sm:text-center lg:text-left">
<h1 className="text-xl tracking-tight font-extrabold text-gray-900 sm:text-2xl md:text-3xl">
<span className="block text-indigo-600 xl:inline">
Pfadi-Bussle
</span>{' '}
<span className="block xl:inline">des VCP Rosenfeld e.V.</span>
<span className="block text-blue-800 xl:inline">Pfadi-Bussle</span>{' '}
<span className="block xl:inline">
Freundeskreis des VCP Rosenfeld e.V.
</span>
</h1>
<p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
Der Freundeskreis des VCP Rosenfeld e.V. unterstützt und fördert die
Jugendarbeit des VCP Rosenfeld auch mit der Bereitstellung des
Pfadi-Bussles.
</p>
<p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
Für Fahrten & Lager, Vereinsausflüge, Urlaubsreisen, Umzüge, etc.
kann man unser Pfadi-Bussle mieten.
</p>
<p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
Abgerechnet wird nach gefahrenen Kilometern und Spritverbrauch.
r Lager, Vereinsausflüge, Urlaubsreisen, Umzüge, etc. kann man
unser Pfadi-Bussle mieten.
</p>
<div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
<div className="rounded-md shadow">
<Link href="/book">
<a className="w-full flex items-center justify-center px-6 py-2 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-2 md:text-lg md:px-5">
<a 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
</a>
</Link>
@@ -53,10 +39,13 @@ export default function Home() {
0151 / 21225302
</a>{' '}
oder{' '}
<a href="https://wa.me/4915121225362">
<a
href="https://wa.me/4915121225362"
className="inline-flex flex-row align-baseline"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="fill-current h-4 inline"
className="fill-current h-3 inline hover:text-gray-700"
viewBox="0 0 738 741"
>
<title>Whatsapp</title>