From ecb71f54e7df8796fa0c476d8cb8f4d9c41b7860 Mon Sep 17 00:00:00 2001
From: Thomas Ruoff <ThomasRuoff@gmail.com>
Date: Sat, 13 Mar 2021 00:16:07 +0100
Subject: [PATCH] extract layout and apply to all pages

---
 components/layout.tsx |  13 +++
 pages/book.tsx        |  15 ++--
 pages/impressum.tsx   |  88 ++++++++++---------
 pages/index.tsx       | 100 +++++++++++-----------
 pages/prices.tsx      | 103 +++++++++++------------
 pages/privacy.tsx     | 190 +++++++++++++++++++++---------------------
 pages/terms.tsx       |  52 +++++-------
 styles/index.css      |   2 +-
 8 files changed, 274 insertions(+), 289 deletions(-)
 create mode 100644 components/layout.tsx

diff --git a/components/layout.tsx b/components/layout.tsx
new file mode 100644
index 0000000..e2ccf10
--- /dev/null
+++ b/components/layout.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import Footer from '../components/footer'
+import Header from '../components/header'
+
+export default function Home({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Header />
+      <main className="main">{children}</main>
+      <Footer />
+    </>
+  )
+}
diff --git a/pages/book.tsx b/pages/book.tsx
index a43a9eb..6c2b001 100644
--- a/pages/book.tsx
+++ b/pages/book.tsx
@@ -1,16 +1,11 @@
-import React from 'react'
-import Footer from '../components/footer'
-import Header from '../components/header'
+import Layout from '../components/layout'
 import Wizard from '../components/wizard/index'
 
 export default function Home() {
   return (
-    <>
-      <Header />
-      <main className="main">
-        <Wizard />
-      </main>
-      <Footer />
-    </>
+    <Layout>
+      <h1 className="mb-3 text-xl font-extrabold">Buchungsanfrage</h1>
+      <Wizard />
+    </Layout>
   )
 }
diff --git a/pages/impressum.tsx b/pages/impressum.tsx
index dea03b8..7e0a466 100644
--- a/pages/impressum.tsx
+++ b/pages/impressum.tsx
@@ -1,55 +1,51 @@
-import React from 'react'
-import Header from '../components/header'
+import Layout from '../components/layout'
 
 export default function Impressum() {
   return (
-    <>
-      <Header />
-      <main className="main">
-        <h1 className="mb-3 text-xl font-extrabold">Impressum</h1>
+    <Layout>
+      <h1 className="mb-3 text-xl font-extrabold">Impressum</h1>
 
-        <address className="mb-3">
-          Freundeskreis des VCP Rosenfeld e.V.
-          <br />
-          Mozartstr. 11
-          <br />
-          72348 Rosenfeld
-          <br />
-        </address>
+      <address className="mb-3">
+        Freundeskreis des VCP Rosenfeld e.V.
+        <br />
+        Mozartstr. 11
+        <br />
+        72348 Rosenfeld
+        <br />
+      </address>
 
-        <h2 className="text-lg">1. Vorsitzender:</h2>
-        <address className="mb-3">
-          Kevin Deckert
-          <br />
-          Mozartstr. 11
-          <br />
-          72348 Rosenfeld
-          <br />
-          Telefon: +49 7428 3423
-          <br />
-        </address>
+      <h2 className="text-lg">1. Vorsitzender:</h2>
+      <address className="mb-3">
+        Kevin Deckert
+        <br />
+        Mozartstr. 11
+        <br />
+        72348 Rosenfeld
+        <br />
+        Telefon: +49 7428 3423
+        <br />
+      </address>
 
-        <h2 className="text-lg">
-          Bussle-Wart und Technisch Verantwortlicher dieser Webanwendung:
-        </h2>
-        <address className="mb-3">
-          Thomas Ruoff
-          <br />
-          Mömpelgardgasse 25
-          <br />
-          72348 Rosenfeld
-          <br />
-          Telefon: +49 151 21225362
-          <br />
-        </address>
+      <h2 className="text-lg">
+        Bussle-Wart und Technisch Verantwortlicher dieser Webanwendung:
+      </h2>
+      <address className="mb-3">
+        Thomas Ruoff
+        <br />
+        Mömpelgardgasse 25
+        <br />
+        72348 Rosenfeld
+        <br />
+        Telefon: +49 151 21225362
+        <br />
+      </address>
 
-        <p>
-          Das Impressum gilt für:{' '}
-          <a className="link" href="https://pfadi-bussle.tomru.space">
-            https://pfadi-bussle.tomru.space
-          </a>
-        </p>
-      </main>
-    </>
+      <p>
+        Das Impressum gilt für:{' '}
+        <a className="link" href="https://pfadi-bussle.tomru.space">
+          https://pfadi-bussle.tomru.space
+        </a>
+      </p>
+    </Layout>
   )
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index a9b8b94..146b7ba 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,61 +1,55 @@
-import React from 'react'
 import Link from 'next/link'
-import Footer from '../components/footer'
-import Header from '../components/header'
+import Layout from '../components/layout'
 
 export default function Home() {
   return (
-    <>
-      <Header />
-      <main className="main">
-        <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>
-          <div className="mt-5 sm:mt-8 sm:flex sm:justify-center">
-            <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-blue-800 hover:bg-blue-900 md:py-2 md:text-lg md:px-5">
-                  Zur Buchungsanfrage
-                </a>
-              </Link>
-            </div>
+    <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>
+        <div className="mt-5 sm:mt-8 sm:flex sm:justify-center">
+          <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-blue-800 hover:bg-blue-900 md:py-2 md:text-lg md:px-5">
+                Zur Buchungsanfrage
+              </a>
+            </Link>
           </div>
-          <p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl">
-            Du hast weiter Fragen melde Dich gerne bei Thomas Ruoff per
-            <br />
-            <a className="link" href="mailto:pfadibussle@tomru.space">
-              E-Mail
-            </a>
-            , Telefon{' '}
-            <a className="link" href="tel:+4915121225362">
-              0151 / 21225302
-            </a>{' '}
-            oder{' '}
-            <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-3 inline hover:text-gray-700"
-                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>
         </div>
-      </main>
-      <Footer />
-    </>
+        <p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl">
+          Du hast weiter Fragen melde Dich gerne bei Thomas Ruoff per
+          <br />
+          <a className="link" href="mailto:pfadibussle@tomru.space">
+            E-Mail
+          </a>
+          , Telefon{' '}
+          <a className="link" href="tel:+4915121225362">
+            0151 / 21225302
+          </a>{' '}
+          oder{' '}
+          <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-3 inline hover:text-gray-700"
+              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>
+      </div>
+    </Layout>
   )
 }
diff --git a/pages/prices.tsx b/pages/prices.tsx
index 063bb4e..e90c02f 100644
--- a/pages/prices.tsx
+++ b/pages/prices.tsx
@@ -1,58 +1,55 @@
-import Header from '../components/header'
+import Layout from '../components/layout'
 
 export default function Prices() {
   return (
-    <>
-      <Header />
-      <main className="main text-gray-900">
-        <h1 className="mb-3 text-xl font-extrabold">Preise</h1>
-        <table className="divide-y divide-gray-200">
-          <thead className="bg-gray-50">
-            <tr>
-              <th
-                scope="col"
-                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              >
-                Gefahrene Kilomenter
-              </th>
-              <th
-                scope="col"
-                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              >
-                Kosten
-              </th>
-              <th
-                scope="col"
-                className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-              >
-                Bemerkungen
-              </th>
-            </tr>
-          </thead>
-          <tbody className="bg-white divide-y divide-gray-200">
-            <tr>
-              <td className="px-6 py-4 whitespace-nowrap">bis 200 km</td>
-              <td className="px-6 py-4 whitespace-nowrap">0,42 Euro / km</td>
-              <td className="px-6 py-4 whitespace-nowrap">inklusive Sprit</td>
-            </tr>
-            <tr>
-              <td className="px-6 py-4 whitespace-nowrap">201-1000 km</td>
-              <td className="px-6 py-4 whitespace-nowrap">0,25 Euro / km</td>
-              <td className="px-6 py-4 whitespace-nowrap">exclusive Sprit</td>
-            </tr>
-            <tr>
-              <td className="px-6 py-4 whitespace-nowrap">1001-2000 km</td>
-              <td className="px-6 py-4 whitespace-nowrap">0,20 Euro / km</td>
-              <td className="px-6 py-4 whitespace-nowrap">exclusive Sprit</td>
-            </tr>
-            <tr>
-              <td className="px-6 py-4 whitespace-nowrap">ab 2001 km</td>
-              <td className="px-6 py-4 whitespace-nowrap">0,18 Euro / km</td>
-              <td className="px-6 py-4 whitespace-nowrap">exclusive Sprit</td>
-            </tr>
-          </tbody>
-        </table>
-      </main>
-    </>
+    <Layout>
+      <h1 className="mb-3 text-xl font-extrabold">Preise</h1>
+      <table className="divide-y divide-gray-200">
+        <thead className="bg-gray-50">
+          <tr>
+            <th
+              scope="col"
+              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+            >
+              Gefahrene Kilomenter
+            </th>
+            <th
+              scope="col"
+              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+            >
+              Kosten
+            </th>
+            <th
+              scope="col"
+              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+            >
+              Bemerkungen
+            </th>
+          </tr>
+        </thead>
+        <tbody className="bg-white divide-y divide-gray-200">
+          <tr>
+            <td className="px-6 py-4 whitespace-nowrap">bis 200 km</td>
+            <td className="px-6 py-4 whitespace-nowrap">0,42 Euro / km</td>
+            <td className="px-6 py-4 whitespace-nowrap">inklusive Sprit</td>
+          </tr>
+          <tr>
+            <td className="px-6 py-4 whitespace-nowrap">201-1000 km</td>
+            <td className="px-6 py-4 whitespace-nowrap">0,25 Euro / km</td>
+            <td className="px-6 py-4 whitespace-nowrap">exclusive Sprit</td>
+          </tr>
+          <tr>
+            <td className="px-6 py-4 whitespace-nowrap">1001-2000 km</td>
+            <td className="px-6 py-4 whitespace-nowrap">0,20 Euro / km</td>
+            <td className="px-6 py-4 whitespace-nowrap">exclusive Sprit</td>
+          </tr>
+          <tr>
+            <td className="px-6 py-4 whitespace-nowrap">ab 2001 km</td>
+            <td className="px-6 py-4 whitespace-nowrap">0,18 Euro / km</td>
+            <td className="px-6 py-4 whitespace-nowrap">exclusive Sprit</td>
+          </tr>
+        </tbody>
+      </table>
+    </Layout>
   )
 }
diff --git a/pages/privacy.tsx b/pages/privacy.tsx
index f04b0f5..cd2559b 100644
--- a/pages/privacy.tsx
+++ b/pages/privacy.tsx
@@ -1,105 +1,101 @@
 import React from 'react'
-import Header from '../components/header'
+import Layout from '../components/layout'
 
 export default function Privacy() {
   return (
-    <>
-      <Header />
-      <main className="main text-gray-900">
-        <h1 className="mb-3 text-xl font-extrabold">Datenschutzerklärung</h1>
-        <h2 className="mb-2 text-lg font-extrabold">Geltungsbereich</h2>
-        <p className="mb-2">
-          Diese Datenschutzerklärung soll die Nutzer dieser Website gemäß
-          Bundesdatenschutzgesetz und Telemediengesetz über die Art, den Umfang
-          und den Zweck der Erhebung und Verwendung personenbezogener Daten
-          durch den Websitebetreiber{' '}
-          <a className="link" href="mailto:pfadibussle@tomru.space">
-            Thomas Ruoff
-          </a>{' '}
-          informieren.
-        </p>
-        <p className="mb-2">
-          Der Websitebetreiber nimmt Ihren Datenschutz sehr ernst und behandelt
-          Ihre personenbezogenen Daten vertraulich und entsprechend der
-          gesetzlichen Vorschriften. Bedenken Sie, dass die Datenübertragung im
-          Internet grundsätzlich mit Sicherheitslücken bedacht sein kann. Ein
-          vollumfänglicher Schutz vor dem Zugriff durch Fremde ist nicht
-          realisierbar.
-        </p>
-        <h2 className="mb-2 text-lg font-extrabold">Zugriffsdaten</h2>
-        <p className="mb-2">
-          Der Websitebetreiber bzw. Seitenprovider erhebt Daten über Zugriffe
-          auf die Seite und speichert diese als „Server-Logfiles“ ab. Folgende
-          Daten werden so protokolliert:{' '}
-        </p>
-        <ul className="mb-2 list-disc list-inside">
-          <li>Besuchte URL</li>
-          <li>Uhrzeit zum Zeitpunkt des Zugriffes</li>
-          <li>Menge der gesendeten Daten in Byte</li>
-          <li>Quelle/Verweis, von welchem Sie auf die Seite gelangten</li>
-          <li>Verwendeter Browser</li>
-          <li>Verwendetes Betriebssystem</li>
-          <li>Verwendete IP-Adresse</li>
-        </ul>
+    <Layout>
+      <h1 className="mb-3 text-xl font-extrabold">Datenschutzerklärung</h1>
+      <h2 className="mb-2 text-lg font-extrabold">Geltungsbereich</h2>
+      <p className="mb-2">
+        Diese Datenschutzerklärung soll die Nutzer dieser Website gemäß
+        Bundesdatenschutzgesetz und Telemediengesetz über die Art, den Umfang
+        und den Zweck der Erhebung und Verwendung personenbezogener Daten durch
+        den Websitebetreiber{' '}
+        <a className="link" href="mailto:pfadibussle@tomru.space">
+          Thomas Ruoff
+        </a>{' '}
+        informieren.
+      </p>
+      <p className="mb-2">
+        Der Websitebetreiber nimmt Ihren Datenschutz sehr ernst und behandelt
+        Ihre personenbezogenen Daten vertraulich und entsprechend der
+        gesetzlichen Vorschriften. Bedenken Sie, dass die Datenübertragung im
+        Internet grundsätzlich mit Sicherheitslücken bedacht sein kann. Ein
+        vollumfänglicher Schutz vor dem Zugriff durch Fremde ist nicht
+        realisierbar.
+      </p>
+      <h2 className="mb-2 text-lg font-extrabold">Zugriffsdaten</h2>
+      <p className="mb-2">
+        Der Websitebetreiber bzw. Seitenprovider erhebt Daten über Zugriffe auf
+        die Seite und speichert diese als „Server-Logfiles“ ab. Folgende Daten
+        werden so protokolliert:{' '}
+      </p>
+      <ul className="mb-2 list-disc list-inside">
+        <li>Besuchte URL</li>
+        <li>Uhrzeit zum Zeitpunkt des Zugriffes</li>
+        <li>Menge der gesendeten Daten in Byte</li>
+        <li>Quelle/Verweis, von welchem Sie auf die Seite gelangten</li>
+        <li>Verwendeter Browser</li>
+        <li>Verwendetes Betriebssystem</li>
+        <li>Verwendete IP-Adresse</li>
+      </ul>
 
-        <p className="mb-2">
-          Die erhobenen Daten dienen lediglich statistischen Auswertungen und
-          zur Verbesserung der Website. Der Websitebetreiber behält sich
-          allerdings vor, die Server-Logfiles nachträglich zu überprüfen,
-          sollten konkrete Anhaltspunkte auf eine rechtswidrige Nutzung
-          hinweisen.
-        </p>
+      <p className="mb-2">
+        Die erhobenen Daten dienen lediglich statistischen Auswertungen und zur
+        Verbesserung der Website. Der Websitebetreiber behält sich allerdings
+        vor, die Server-Logfiles nachträglich zu überprüfen, sollten konkrete
+        Anhaltspunkte auf eine rechtswidrige Nutzung hinweisen.
+      </p>
 
-        <h2 className="mb-2 text-lg font-extrabold">Cookies</h2>
-        <p className="mb-2">Diese Website verwendet keine Cookies.</p>
-        <h2 className="mb-2 text-lg font-extrabold">Benutzerkonto</h2>
-        <p className="mb-2">
-          Um über dieses Angebot Buchungsanfragen tätigen zu können, ist kein
-          Kundenkonto notwendig noch vorgesehen.
-        </p>
-        <h2 className="mb-2 text-lg font-extrabold">
-          Buchungsanfragedaten merken
-        </h2>
-        <p className="mb-2">
-          Wenn sie eine Buchungsanfrage tätigen, wird Ihnen angeboten, die
-          Buchunsanfragedaten für die nächste Buchung zu merken um weitere
-          Anfragen zu beschleunigen. Die Speicherung der Buchungsdaten erfolgt
-          dabei nicht auf unserem Server sondern nur in Ihrem Browser, genauer
-          auf Ihrem Endgerät im s.g. LocalStorage. Diese Daten sind also nicht
-          in unserem Besitzt noch habe wir Zugriff darauf. Erste wenn eine
-          weitere Buchunsanfrage, mit den bei Ihnen gespeicherten Daten
-          vorausgefüllt und abgeschickt wird, erhalten wir Zugriff drauf. Es
-          besteht somit keinen Unterschied, ob sie die Daten manuell oder mit
-          dieser Funktion vorausfüllen lassen. Die für diese Funktion in Ihrem
-          Browser gespeicherten Daten umfassen ausschließlich Daten welche sie
-          vorher zum Zwecke einer Buchungsanfrage eingegeben haben. Ob sie
-          aktuell Buchungsdaten gespeichert haben, wir Ihnen als Info-Nachricht
-          in der Buchungsanfragemaske angezeigt. Alle gespeicherten Felder
-          werden in diesem Fall auch gleich im Formular transparent
-          vorausgefüllt. Falls Sie diese Daten löschen möchten, können Sie dies
-          über einen Link in der Info-Nachricht bewerkstelligen.
-        </p>
-        <h2 className="mb-2 text-lg font-extrabold">Buchungsanfrage</h2>
-        <p className="mb-2">
-          Sämtliche Daten, welche im Rahmen einer Bestellabwicklung von den
-          Kunden eingegeben werden, werden gespeichert. Dazu gehören:
-        </p>
-        <ul className="mb-2 list-disc list-inside">
-          <li>Start- und Enddatum der Anfrage</li>
-          <li>Zweck und Ziel der Fahrt (sofern angegeben)</li>
-          <li>Verein (sofern angegeben)</li>
-          <li>Name</li>
-          <li>Adresse</li>
-          <li>E-Mail-Adresse</li>
-          <li>Telefonnummer (falls angegeben)</li>
-        </ul>
-        <p className="mb-2">
-          Jene Daten, welche zur Auftragsabwicklung zwingend notwendig sind,
-          werden an dritte Dienstleister weitergegeben. Sowie die Aufbewahrung
-          Ihrer Daten nicht mehr erforderlich oder gesetzlich geboten ist,
-          werden diese gelöscht.
-        </p>
-      </main>
-    </>
+      <h2 className="mb-2 text-lg font-extrabold">Cookies</h2>
+      <p className="mb-2">Diese Website verwendet keine Cookies.</p>
+      <h2 className="mb-2 text-lg font-extrabold">Benutzerkonto</h2>
+      <p className="mb-2">
+        Um über dieses Angebot Buchungsanfragen tätigen zu können, ist kein
+        Kundenkonto notwendig noch vorgesehen.
+      </p>
+      <h2 className="mb-2 text-lg font-extrabold">
+        Buchungsanfragedaten merken
+      </h2>
+      <p className="mb-2">
+        Wenn sie eine Buchungsanfrage tätigen, wird Ihnen angeboten, die
+        Buchunsanfragedaten für die nächste Buchung zu merken um weitere
+        Anfragen zu beschleunigen. Die Speicherung der Buchungsdaten erfolgt
+        dabei nicht auf unserem Server sondern nur in Ihrem Browser, genauer auf
+        Ihrem Endgerät im s.g. LocalStorage. Diese Daten sind also nicht in
+        unserem Besitzt noch habe wir Zugriff darauf. Erste wenn eine weitere
+        Buchunsanfrage, mit den bei Ihnen gespeicherten Daten vorausgefüllt und
+        abgeschickt wird, erhalten wir Zugriff drauf. Es besteht somit keinen
+        Unterschied, ob sie die Daten manuell oder mit dieser Funktion
+        vorausfüllen lassen. Die für diese Funktion in Ihrem Browser
+        gespeicherten Daten umfassen ausschließlich Daten welche sie vorher zum
+        Zwecke einer Buchungsanfrage eingegeben haben. Ob sie aktuell
+        Buchungsdaten gespeichert haben, wir Ihnen als Info-Nachricht in der
+        Buchungsanfragemaske angezeigt. Alle gespeicherten Felder werden in
+        diesem Fall auch gleich im Formular transparent vorausgefüllt. Falls Sie
+        diese Daten löschen möchten, können Sie dies über einen Link in der
+        Info-Nachricht bewerkstelligen.
+      </p>
+      <h2 className="mb-2 text-lg font-extrabold">Buchungsanfrage</h2>
+      <p className="mb-2">
+        Sämtliche Daten, welche im Rahmen einer Bestellabwicklung von den Kunden
+        eingegeben werden, werden gespeichert. Dazu gehören:
+      </p>
+      <ul className="mb-2 list-disc list-inside">
+        <li>Start- und Enddatum der Anfrage</li>
+        <li>Zweck und Ziel der Fahrt (sofern angegeben)</li>
+        <li>Verein (sofern angegeben)</li>
+        <li>Name</li>
+        <li>Adresse</li>
+        <li>E-Mail-Adresse</li>
+        <li>Telefonnummer (falls angegeben)</li>
+      </ul>
+      <p className="mb-2">
+        Jene Daten, welche zur Auftragsabwicklung zwingend notwendig sind,
+        werden an dritte Dienstleister weitergegeben. Sowie die Aufbewahrung
+        Ihrer Daten nicht mehr erforderlich oder gesetzlich geboten ist, werden
+        diese gelöscht.
+      </p>
+    </Layout>
   )
 }
diff --git a/pages/terms.tsx b/pages/terms.tsx
index c225487..de5ce98 100644
--- a/pages/terms.tsx
+++ b/pages/terms.tsx
@@ -1,34 +1,28 @@
-import React from 'react'
-import Header from '../components/header'
+import Layout from '../components/layout'
 
 export default function Terms() {
   return (
-    <>
-      <Header />
-      <main className="main text-gray-900 mt-6">
-        <h1 className="mb-3 text-xl font-extrabold">
-          Allgemeine Geschäftsbedinungen
-        </h1>
-        <h2 className="mb-2 text-lg font-extrabold">
-          Grundlegende Bedingungen
-        </h2>
-        <p>
-          Die nachstenden Bedingungen gelten für Verträge zwischen Freundeskreis
-          des VCP Rosenfeld e.V.- nachfolgend Anbieter genannt - und Kunden,
-          welche auf https://pfadi-bussle.tomru.space geschlossen werden.
-          <br />
-          Für diese Veträge wird der Anbieter von Thomas Ruoff, Mömpelgardgasse
-          25, 72348 Rosenfeld - nachfolgend dem Bussle-Warte - vertreten.
-        </p>
-        <h2 className="mb-2 text-lg font-extrabold">Vertragsgegenstand</h2>
-        <p className="mb-2">TODO</p>
-        <h2 className="mb-2 text-lg font-extrabold">Vertragsschluss</h2>
-        <p className="mb-2">TODO</p>
-        <h2 className="mb-2 text-lg font-extrabold">Vertragsdauer</h2>
-        <p className="mb-2">TODO</p>
-        <h2 className="mb-2 text-lg font-extrabold">Vertragsdauer</h2>
-        <p className="mb-2">TODO</p>
-      </main>
-    </>
+    <Layout>
+      <h1 className="mb-3 text-xl font-extrabold">
+        Allgemeine Geschäftsbedinungen
+      </h1>
+      <h2 className="mb-2 text-lg font-extrabold">Grundlegende Bedingungen</h2>
+      <p>
+        Die nachstenden Bedingungen gelten für Verträge zwischen Freundeskreis
+        des VCP Rosenfeld e.V.- nachfolgend Anbieter genannt - und Kunden,
+        welche auf https://pfadi-bussle.tomru.space geschlossen werden.
+        <br />
+        Für diese Veträge wird der Anbieter von Thomas Ruoff, Mömpelgardgasse
+        25, 72348 Rosenfeld - nachfolgend dem Bussle-Warte - vertreten.
+      </p>
+      <h2 className="mb-2 text-lg font-extrabold">Vertragsgegenstand</h2>
+      <p className="mb-2">TODO</p>
+      <h2 className="mb-2 text-lg font-extrabold">Vertragsschluss</h2>
+      <p className="mb-2">TODO</p>
+      <h2 className="mb-2 text-lg font-extrabold">Vertragsdauer</h2>
+      <p className="mb-2">TODO</p>
+      <h2 className="mb-2 text-lg font-extrabold">Vertragsdauer</h2>
+      <p className="mb-2">TODO</p>
+    </Layout>
   )
 }
diff --git a/styles/index.css b/styles/index.css
index 532504a..5a1ed40 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -18,7 +18,7 @@
 }
 
 .form {
-  @apply w-full mt-6 p-6;
+  @apply w-full;
 }
 
 .fsw {