From f54a77f2274afbdaa948e4968ac4958942fbdd3b Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Wed, 19 Oct 2022 20:08:00 +0200
Subject: [PATCH] new front page

---
 resources/js/components/App.js           |  4 ++-
 resources/js/components/common/Header.js | 11 ++-----
 resources/js/components/pages/Front.js   | 37 ++++++++++++++++++++++--
 resources/sass/app.scss                  |  1 +
 resources/sass/front.scss                | 13 +++++++++
 5 files changed, 54 insertions(+), 12 deletions(-)
 create mode 100644 resources/sass/front.scss

diff --git a/resources/js/components/App.js b/resources/js/components/App.js
index cd21ed0..0d11f90 100644
--- a/resources/js/components/App.js
+++ b/resources/js/components/App.js
@@ -4,6 +4,7 @@ import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 
 import Header from './common/Header';
 import AlttpSeed from './pages/AlttpSeed';
+import Front from './pages/Front';
 import Technique from './pages/Technique';
 import Tournament from './pages/Tournament';
 import User from './pages/User';
@@ -59,7 +60,8 @@ const App = () => {
 					<Route path="tech/:name" element={<Technique />} />
 					<Route path="tournaments/:id" element={<Tournament />} />
 					<Route path="users/:id" element={<User />} />
-					<Route path="*" element={<Navigate to="/tournaments/5" />} />
+					<Route path="/" element={<Front />} />
+					<Route path="*" element={<Navigate to="/" />} />
 				</Routes>
 			</UserContext.Provider>
 		</AlttpBaseRomProvider>
diff --git a/resources/js/components/common/Header.js b/resources/js/components/common/Header.js
index 5300081..96106a1 100644
--- a/resources/js/components/common/Header.js
+++ b/resources/js/components/common/Header.js
@@ -19,14 +19,9 @@ const Header = ({ doLogout, user }) =>
 				</Navbar.Brand>
 			</LinkContainer>
 			<Nav>
-				<LinkContainer to="/tournaments/1">
-					<Nav.Link href="/tournaments/1">
-						Season 1
-					</Nav.Link>
-				</LinkContainer>
-				<LinkContainer to="/tournaments/4">
-					<Nav.Link href="/tournaments/4">
-						Season 2
+				<LinkContainer to="/tournaments/6">
+					<Nav.Link href="/tournaments/6">
+						ALttPR Weekly
 					</Nav.Link>
 				</LinkContainer>
 				<LinkContainer to="/tournaments/5">
diff --git a/resources/js/components/pages/Front.js b/resources/js/components/pages/Front.js
index aa4b333..2607869 100644
--- a/resources/js/components/pages/Front.js
+++ b/resources/js/components/pages/Front.js
@@ -1,7 +1,38 @@
 import React from 'react';
+import { Button, Col, Container, Image, Row } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
 
-const Front = () => <div className="mt-5 text-center">
-	<h1>It&apos;s a mystery to everyone.</h1>
-</div>;
+const Front = () => {
+	const navigate = useNavigate();
+
+	return <Container className="mt-5">
+		<Row>
+			<Col md={6}>
+				<Button
+					className="front-panel"
+					onClick={() => navigate('/tournaments/6')}
+					variant="outline-secondary"
+				>
+					<Image alt="" className="image" src="/media/alttp/front.png" />
+					<div className="title">
+						ALttPR Weekly
+					</div>
+				</Button>
+			</Col>
+			<Col md={6}>
+				<Button
+					className="front-panel"
+					onClick={() => navigate('/tournaments/5')}
+					variant="outline-secondary"
+				>
+					<Image alt="" className="image" src="/media/sm/front.png" />
+					<div className="title">
+						Super Metroid
+					</div>
+				</Button>
+			</Col>
+		</Row>
+	</Container>;
+};
 
 export default Front;
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 64f81df..d050607 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -14,6 +14,7 @@
 @import 'common';
 @import 'discord';
 @import 'form';
+@import 'front';
 @import 'participants';
 @import 'results';
 @import 'rounds';
diff --git a/resources/sass/front.scss b/resources/sass/front.scss
new file mode 100644
index 0000000..5f81f46
--- /dev/null
+++ b/resources/sass/front.scss
@@ -0,0 +1,13 @@
+.front-panel {
+	display: block;
+	font-size: 200%;
+	font-weight: bold;
+	margin: 3em 0;
+	width: 100%;
+
+	.image img {
+		border-radius: 2em;
+		width: 100%;
+		height: auto;
+	}
+}
-- 
2.39.2