Redesign index page (add css files and static images & fonts)

pages/index.js

@@ -1,27 +1,17 @@
-import Link from 'next/link'
 import Head from 'next/head'
+import '../static/everypage.css'
+import '../static/css/index.css'
 
 const Index = (props) => {
     return (
         <div>
             <Nav/>
             <Bigimage text="Einfach Turniere organisieren"/>
-            <p>Dies ist die Startseite!</p>
-            <ul>
-                <li><Link href="/privacy">Datenschutzerklärung</Link></li>
-                <li><Link href="/imprint">Impressum</Link></li>
-                <li><Link href="/login">Login</Link></li>
-                <li><Link href="/register">Registrierung</Link></li>
-                <li><Link href="/list">Turnierliste</Link></li>
-                <li><Link href="/faq">FAQ</Link></li>
-                <li><Link href="/create">Turniererstellung</Link></li>
-                <li><Link as={`/t/${props.code}`} href={`/tournament?code=${props.code}`}>Turnieranzeige</Link></li>
-                <li><Link as={`/t/${props.code}/fullscreen`} href={`/tournament-fullscreen?code=${props.code}`}>Turnieranzeige (Vollbild)</Link></li>
-            </ul>
+            <Main/>
             <Footer/>
         </div>
     );
-}
+};
 
 function Footer() {
     return (
@@ -94,6 +84,156 @@ function LoginLogoutButtons() {
     );
 }
 
+function Main() {
+    return (
+        <main>
+            <Marketing/>
+            <MainPromotedLinks/>
+            <MainBottomSummary/>
+        </main>
+    );
+}
+
+function Marketing() {
+    return (
+        <div className="container marketing my-5">
+            <div className="row">
+
+                <div className="col-lg-4">
+                    <h2>Für jede Sportart</h2>
+                    <p>
+                        Egal, um welche Sportart es geht: Solange du mit mehreren Mannschaften ein Turnier veranstalten
+                        willst, kann
+                        turnie.re dir ein Turnier berechnen!
+                    </p>
+                </div>
+                <div className="col-lg-4">
+                    <h2>Beliebige Anzahl Teams</h2>
+                    <p>
+                        Egal, wie viele Teams du gerne in deinem Turnier hast, wir regeln das. Füge einfach deine Teams
+                        hinzu
+                        und schon sagen wir dir, wer gegen wen spielt.
+                    </p>
+                </div>
+                <div className="col-lg-4">
+                    <h2>Kostenlos</h2>
+                    <p>
+                        turnie.re ist ein kostenloser Service! Wir erheben keine Kosten und sind nur darauf aus, dein
+                        Turnier-Management so einfach wie möglich zu gestalten.
+                    </p>
+                </div>
+
+            </div>
+            <Betawarning/>
+        </div>
+    );
+}
+
+function Betawarning() {
+    return (
+        <div className="alert alert-danger shadow-sm mt-4">
+            <h4 className="alert-heading custom-font">Public Beta</h4>
+            <p>
+                Diese Website ist noch in der Entwicklung.<br/>
+                Bei Problemen fülle bitte <a href="#" id="bugLink" className="alert-link">dieses </a>
+                und für Feedback <a href="#" id="feedbackLink" className="alert-link">dieses</a> Formular aus.
+            </p>
+        </div>
+    );
+}
+
+function MainBottomSummary() {
+    return (<div className="container marketing my-5">
+        <div className="row">
+
+            <div className="col-lg-6">
+                <h2>Was macht turnie.re?</h2>
+                <p>
+                    turnie.re berechnet dir ein Turnier. Allein aus den Team-Namen berechnen wir dir einen kompletten
+                    Spielplan,
+                    den du auch gleich mit allen Leuten teilen kannst, ohne dir Gedanken machen zu müssen, wer gegen wen
+                    spielen
+                    muss.<br/>
+                    Du trägst ein, wer gewonnen hat, und turnie.re sagt, wer als nächstes spielt.
+                </p>
+            </div>
+            <div className="col-lg-6">
+                <h2>Ich habe einen Turniercode bekommen. Was nun?</h2>
+                <p>
+                    Der Turniercode führt dich direkt zu einem Turnier. Gebe dafür den Code <a className="text-success"
+                                                                                               href="#turniercode-form">oben </a>
+                    ein, dann wirst du sofort weitergeleitet.
+                </p>
+            </div>
+
+        </div>
+        <div className="my-5 text-center">
+            <p>
+                Noch fragen? Schau doch mal im <a className="text-success" href="/faq">FAQ</a> vorbei!
+            </p>
+        </div>
+    </div>);
+}
+
+function MainPromotedLinks() {
+    return (<div className="index-cards py-5">
+        <PromotedLinkTournamentCode/>
+        <PromotedLinkListTournaments/>
+        <PromotedLinkCreateTournament/>
+    </div>);
+}
+
+function PromotedLinkTournamentCode() {
+    return (<div className="container card shadow-lg mt-3">
+        <div className="card-body row">
+            <form id="turniercode-form" className="col-lg-4" action="/t" method="get">
+                <input className="form-control" type="search" name="code" placeholder="Turnier-Code"/>
+                <button className="btn btn-outline-success w-100 my-2" type="submit">Turnier-Code öffnen</button>
+            </form>
+            <div className="col-lg-8">
+                <p>Gib hier einen Turnier Code ein, um direkt zum entsprechenden Turnier zu gelangen.</p>
+            </div>
+        </div>
+    </div>);
+}
+function PromotedLinkListTournaments() {
+    return (
+        <div className="container card shadow-lg my-4">
+            <div className="card-body row">
+                <div className="col-lg-4 pb-3">
+                    <a className="btn btn-outline-success w-100" role="button" href="/list">Alle Turniere anzeigen</a>
+                </div>
+                <div className="col-lg-8">
+                    <p>
+                        Hier findest du alle öffentlichen Turniere. Wenn du ein Turnier suchst, den Turniercode aber
+                        nicht hast, wirst
+                        du wahrscheinlich hier fündig.
+                    </p>
+                    <p>
+                        Wenn du eingeloggt bist, findest du hier auch deine eigenen Turniere.
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}
+function PromotedLinkCreateTournament() {
+    return (<div className="container card shadow-lg mb-3">
+        <div className="card-body row">
+            <div className="col-lg-8">
+                <p>
+                    <strong>Einfach ausprobieren:</strong> Einen Turnier-Namen, ein paar Team-Namen, und schon
+                    kriegst du ein
+                    komplettes Turnier!
+                </p>
+            </div>
+            <div className="col-lg-4">
+                <a className="btn btn-success btn-lg w-100" role="button" href="/create">Turnier erstellen</a>
+            </div>
+        </div>
+    </div>);
+}
+
 export default () => (
     <div>
         <Head>

static/css/index.css

@@ -0,0 +1,4 @@
+.index-cards {
+    background: url("/static/images/tennis-blurred.jpg") no-repeat center;
+    background-size: cover;
+}

static/everypage.css

@@ -0,0 +1,48 @@
+@font-face {
+    font-family: 'Halt';
+    src: url('/static/fonts/Halt.ttf') format('truetype');
+}
+
+.big-image h1, .marketing h2, .custom-font {
+    font-family: Halt, sans-serif;
+}
+
+.navbar-brand {
+    font-family: Halt, sans-serif;
+    font-size: 2em;
+}
+
+.big-image {
+    background: url("/static/images/landingpage-background.jpg") no-repeat center;
+    background-size: cover;
+    padding: 3vw 5vw;
+    text-align: center;
+    color: white;
+    margin-bottom: 2em;
+}
+
+.big-image h1 {
+    font-size: 6em;
+    text-shadow: 0.1em 0.1em black;
+}
+
+body {
+    position: relative;
+    min-height: 100vh;
+}
+
+footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.border-fix {
+    border-top-left-radius: .25rem !important;
+    border-bottom-left-radius: .25rem !important;
+}
+
+main {
+    padding-bottom: 5em;
+}