tomru/pfadi-bussle
1
0
Fork 0
mirror of https://github.com/tomru/pfadi-bussle.git synced 2026-03-03 14:37:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

add entry page with tailwind examples 😅

Browse Source
This commit is contained in:
Thomas Ruoff
2020-11-25 00:38:45 +01:00
parent 2b0bc396c3
commit 54da0c7f9a
4 changed files with 81 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/header.tsx
View File

@@ -7,9 +7,11 @@ export default function Header({ label = 'Pfadi Bussle' }: { label?: string }) {
const { username, role } = useContext(UserContext)
return (
<>
<div className="flex flex-row items-center p-3 my-3 text-white bg-gray-600 rounded-sm">
<div className="flex flex-row items-center p-3 my-3 text-white bg-gray-400 rounded-sm">
<h1 className="mr-3 flex-grow text-2xl">
<Link href="/">{label}</Link>
<Link href="/">
<a className="text-indigo-600 font-extrabold">{label}</a>
</Link>
</h1>
<Logo className="w-40 flex-shrink-0 text-white" />
</div>

22
pages/book.tsx Normal file
View File

@@ -0,0 +1,22 @@
import Head from 'next/head'
import React from 'react'
import Footer from '../components/footer'
import Header from '../components/header'
import Wizard from '../components/wizard/index'
export default function Home() {
return (
<>
<Head>
<title>Pfadi Bussle</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Header label="Pfadi Bussle" />
<main className="main">
<Wizard />
</main>
<Footer />
</>
)
}

59
pages/index.tsx
View File

@@ -1,20 +1,69 @@
import Head from 'next/head'
import React from 'react'
import Head from 'next/head'
import Link from 'next/link'
import Footer from '../components/footer'
import Header from '../components/header'
import Wizard from '../components/wizard/index'
export default function Home() {
return (
<>
<Head>
<title>Pfadi Bussle Buchung</title>
<title>Pfadi Bussle</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Header label="Pfadi Bussle Buchung" />
<Header label="Pfadi Bussle" />
<main className="main">
<Wizard />
<div className="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>
</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.
</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">
Zur Buchungsanfrage
</a>
</Link>
</div>
</div>
</div>
<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">
Du hast weiter Fragen melde Dich gerne bei Thomas Ruoff per{' '}
<a className="link" href="mailto:pfadibussle@mail.id0.link">
E-Mail
</a>
, Telefon{' '}
<a className="link" href="tel:+4915121225362">
0151 / 21225302
</a>{' '}
oder{' '}
<a href="https://wa.me/4915121225362">
<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>
</a>
</p>
</main>
<Footer />
</>

2
styles/index.css
View File

@@ -28,7 +28,7 @@
}
.form {
@apply w-full bg-blue-100 p-6 rounded;
@apply w-full bg-blue-50 p-6 rounded;
}
.fsw {