Merge pull request #16 from AustinMusiku/revamp-landing-page-ui

AustinMusiku · web-flow · commit d7c6be0e4a06 · 2023-10-14T22:25:13.000+03:00
Feat: Revamped landing page UI
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta
+			name="description"
+			content="GraphQL-fpl-api | Get the stats you want. No more, no less."
+		/>
+		<title>GraphQL-fpl-api</title>
+
+		<link rel="stylesheet" href="/style.css" />
+	</head>
+	<body>
+		<main>
+			<div class="headings">
+				<h1 class="heading">Get the stats you want.</h1>
+				<h1 class="heading">No more, no less.</h1>
+			</div>
+
+			<div class="links">
+				<a class="links__link link--primary" href="/graphql"
+					>GraphQL playground</a
+				>
+
+				<a
+					class="links__link link--secondary"
+					href="https://www.github.com/austinmusiku/graphql-fpl-api"
+					>Github repo</a
+				>
+			</div>
+		</main>
+	</body>
+</html>
diff --git a/public/style.css b/public/style.css
@@ -0,0 +1,46 @@
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+main {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	height: 100vh;
+	gap: 2rem;
+	text-align: center;
+}
+.heading {
+	font-size: 2rem;
+	font-weight: 700;
+}
+.links {
+	display: flex;
+	flex-direction: row;
+	gap: 1rem;
+	width: fit-content;
+}
+.links__link {
+	padding: 0.5rem;
+	text-decoration: none;
+	font-size: 1.2rem;
+	color: #37003c;
+	background-color: #ffffff00;
+	text-decoration: underline;
+}
+
+@media screen and (max-width: 768px) {
+	main {
+		gap: 3rem;
+	}
+	.heading {
+		font-size: 1.5rem;
+	}
+	.links {
+		flex-direction: column;
+		font-size: 1rem;
+	}
+}
diff --git a/src/routes/index.ts b/src/routes/index.ts
@@ -1,3 +1,4 @@
+import path from 'path'
 import { Application } from 'express'
 import { createYoga } from 'graphql-yoga'
 import { cpus, totalmem } from 'os'
@@ -9,13 +10,9 @@ import { loaders } from '../loaders'
 class Routes {
 	// default route
 	public mountDefault(_express: Application): Application {
-		return _express.get('/', (req, res) => {
-			// return html page with link to graphql playground
-			res.send(`
-				<h1>Fplfriend</h1>
-				<a href="/graphql">Click here to go to GraphQL Playground</a>
-				<p>For more information, visit <a href="https://www.github.com/austinmusiku/graphql-fpl-api">github repo</a></p>
-			`)
+		return _express.get('/', (_, res) => {
+			const page = path.join(__dirname, '../../public/index.html')
+			res.sendFile(page)
 		})
 	}
 
