day one

2022-12-10 23:58:09 +01:00
parent 29da22d579
commit acda284da1
25 changed files with 799 additions and 111 deletions
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,7 @@
+{
+	"bracketSpacing": true,
+	"singleQuote": false,
+	"useTabs": true,
+	"tabWidth": 2,
+	"semi": true
+}
--- a/assets/logo.svg
+++ b/assets/logo.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.2" baseProfile="tiny"
+	 id="svg10" inkscape:version="1.0.2-2 (e86c870879, 2021-01-15)" sodipodi:docname="main-logo.svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 192 192"
+	 xml:space="preserve">
+<title  id="title931">Gractwo Main Logo</title>
+<sodipodi:namedview  bordercolor="#666666" borderopacity="1" gridtolerance="10" guidetolerance="10" id="namedview12" inkscape:current-layer="g18" inkscape:cx="90.847995" inkscape:cy="116.23609" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-height="1017" inkscape:window-maximized="1" inkscape:window-width="1920" inkscape:window-x="-8" inkscape:window-y="105" inkscape:zoom="3.1304206" objecttolerance="10" pagecolor="#ffffff" showgrid="false">
+	</sodipodi:namedview>
+<path id="path48" fill="none" stroke="#61F2EA" d="M0,0"/>
+<path id="path879" fill="#FB636B" stroke="#FB636B" stroke-width="0.513" d="M29,146.3l-6-2.6l-0.1-0.5c0-0.3-0.4-6.5-0.9-13.7
+	l-0.8-13.2l9-29.7c5-16.3,9-29.8,9.1-29.9c0.1-0.1,1-1.3,2.1-2.7l2-2.4h3.1c1.7,0,5.3,0,8.1,0.1l4.9,0.1l1.2,1.4
+	c0.9,1.1,1.2,1.4,1.5,1.4c0.2,0,5.3,0.1,11.4,0.2l11,0.1l1.4-0.9c1.3-0.8,1.5-0.9,2-0.9c0.4,0,7,0.4,7.1,0.4c0,0,1.6,6.9,3.5,15.4
+	l3.5,15.4l-4.7,16.3l-4.7,16.3l-11.8,2.9l-11.8,2.9l-11.3,11.2l-11.3,11.2l-5.5,1.9c-3,1.1-5.6,2-5.7,2C35,148.9,32.9,148,29,146.3z
+	 M39.2,142c3.6-1.1,3.6-1.1,4.1-1.6c0.2-0.3,5.1-5.3,10.7-11.2c8.7-9,10.4-10.7,10.7-10.8c0.2-0.1,5.4-1.4,11.4-3
+	c6-1.6,11-2.9,11-2.9c0,0,1.5-5.6,3.3-12.3c2.7-10.3,3.2-12.3,3.1-12.5c-0.1-0.1-1.6-2-3.3-4.3l-3.2-4l-0.7,0.1
+	c-0.4,0-3.2,0.3-6.3,0.5s-5.6,0.5-5.7,0.5c0,0-1.1,2.1-2.2,4.7l-2.2,4.6L67.7,92c-1.3,1.2-2.7,2.5-3,2.9L64,95.5l-4.1,0.8L55.8,97
+	l-4.2-0.7l-4.2-0.7L41.8,92c-3.1-2-5.6-3.6-5.6-3.7c0,0-2.1,6-4.6,13.3L27.1,115l0.2,12.9c0.1,7.1,0.2,12.9,0.3,12.9
+	c0.4,0.2,7.7,2.4,7.9,2.4C35.5,143.2,37.2,142.6,39.2,142L39.2,142z"/>
+<path id="path929" fill="#61F2EA" stroke="#61F2EA" stroke-width="0.36" d="M157.9,136.2l-3.9-1.8l-7.5-6.9
+	c-5.2-4.8-7.6-6.9-7.9-6.9c-0.2,0-8,0.4-17.3,1l-16.9,0.9l-3.4-2.7c-2.3-1.8-3.4-2.7-3.4-2.9c0-0.1,2.2-5.6,4.9-12.1l4.8-11.8
+	l-1.6-14.2l-1.6-14.2l2-3.7c1.1-2.1,2-3.8,2-3.8c0,0,5.4-0.3,12.1-0.7l12.1-0.6l5-3.4l5-3.4h5.5h5.5l7.6,10.1l7.6,10.1l0.3,7.3
+	L169,84l2.8,6.3l2.8,6.3l0.8,11.3c0.4,6.2,0.8,11.5,0.8,11.8c0,0.3-1.1,3.9-2.4,8l-2.4,7.4l-4.8,1.4l-4.8,1.4L157.9,136.2z
+	 M164.3,132.1c1.1-0.5,2.1-0.9,2.1-0.9c0,0,0.9-2.6,1.9-5.7l1.8-5.7l-1.3-11.4c-0.7-6.3-1.3-11.5-1.3-11.6c0-0.1-1-1.5-2.2-3.2
+	c-1.5-2.2-2.2-3-2.4-3c-0.1,0-1.4,0.4-2.7,0.8l-2.5,0.8l-2.5-0.2l-2.5-0.2l-3.5-1.9c-3.1-1.7-3.9-2.2-6.4-4.2
+	c-1.6-1.3-3-2.3-3.1-2.3s-4,0.2-8.6,0.5l-8.3,0.5l-2.2,2.1c-1.2,1.2-3.3,3.2-4.6,4.4l-2.4,2.3l-1.3,11.6c-0.7,6.4-1.3,11.6-1.3,11.6
+	c0.1,0.1,27.2-0.9,29.3-1l1.2-0.1l8,7.9l8,7.9l2,0.9c1.1,0.5,2.1,0.9,2.3,0.9C162.1,133,163.1,132.6,164.3,132.1L164.3,132.1z"/>
+</svg>
--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@@ -0,0 +1,9 @@
+const Footer = () => {
+	return (
+		<div style={{ textAlign: "center" }}>
+			<p>&copy; Gractwo 2020-{new Date().getFullYear()}</p>
+		</div>
+	);
+};
+
+export default Footer;
--- a/components/Navigation/Navigation.module.scss
+++ b/components/Navigation/Navigation.module.scss
@@ -0,0 +1,36 @@
+.nav {
+	display: flex;
+	background-color: var(--black1);
+	min-height: 4rem;
+}
+.link {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	color: inherit;
+	text-decoration: none;
+	padding: 0 2rem;
+	height: auto;
+	user-select: none;
+	&:hover {
+		background: var(--backdrop);
+		color: var(--color);
+	}
+}
+.profile {
+	margin-left: auto;
+	background: var(--color);
+	color: var(--backdrop);
+}
+.logo {
+	padding: 0 1rem;
+	transition-duration: 100ms;
+	user-select: none;
+	&:hover {
+		background: var(--backdrop);
+		cursor: pointer;
+	}
+	&:active {
+		transform: scale(1.1);
+	}
+}
--- a/components/Navigation/Navigation.tsx
+++ b/components/Navigation/Navigation.tsx
@@ -0,0 +1,43 @@
+import styles from "./Navigation.module.scss";
+import GractwoLogo from "../logo";
+import Link from "next/link";
+
+const PageNavigation = () => {
+	let username: string = "";
+	return (
+		<>
+			<div className={styles.nav}>
+				<GractwoLogo className={styles.logo} />
+				{/* <h1 className={styles.wordmark}>Gractwo!</h1> */}
+				<Link href="/" className={styles.link}>
+					główna
+				</Link>
+				<Link href="/o-gractwie" className={styles.link}>
+					o gractwie
+				</Link>
+				<Link href="/cytaty" className={styles.link}>
+					cytaty
+				</Link>
+				<Link href="/rankingi" className={styles.link}>
+					rankingi
+				</Link>
+				<Link
+					href="/"
+					style={{ display: "flex" }}
+					className={`${styles.link} ${styles.profile}`}
+				>
+					zaloguj się
+				</Link>
+				<Link
+					href="/"
+					style={{ display: "none" }}
+					className={`${styles.link} ${styles.profile}`}
+				>
+					{username ? username : "twój profil"}
+				</Link>
+			</div>
+		</>
+	);
+};
+
+export default PageNavigation;
--- a/components/SEO.tsx
+++ b/components/SEO.tsx
@@ -0,0 +1,22 @@
+import Head from "next/head";
+
+type seoprops = {
+	title?: string;
+	noatsign?: boolean; // simply add "noatsign" as property to element
+	description?: string;
+};
+
+const ComponentSEO = ({ title, noatsign, description }: seoprops) => {
+	const defaultDescription = "Witryna internetowa Gractwa.";
+	return (
+		<Head>
+			<title>
+				{title ? `${title}${noatsign ? "" : " @ gractwo.pl"}` : "gractwo.pl"}
+			</title>
+			<link rel="shortcut icon" href="/logo.svg" type="image/x-icon" />
+			<meta name="description" content={description || defaultDescription} />
+		</Head>
+	);
+};
+
+export default ComponentSEO;
--- a/components/logo.tsx
+++ b/components/logo.tsx
@@ -0,0 +1,56 @@
+import { SVGProps } from "react";
+
+type logoprops = {
+	width?: number;
+	height?: number;
+} & React.SVGProps<SVGSVGElement>;
+
+const GractwoLogo = ({ width, height, ...props }: logoprops) => {
+	return (
+		<svg
+			version="1.2"
+			baseProfile="tiny"
+			id="svg10"
+			x="0px"
+			y="0px"
+			viewBox="0 0 192 192"
+			width={width || 64}
+			height={height || 64}
+			{...props}
+		>
+			<title id="title931">Gractwo Main Logo</title>
+			<path id="path48" fill="none" stroke="#61F2EA" d="M0,0" />
+			<path
+				id="path879"
+				fill="#FB636B"
+				stroke="#FB636B"
+				strokeWidth="0.513"
+				d="M29,146.3l-6-2.6l-0.1-0.5c0-0.3-0.4-6.5-0.9-13.7
+				l-0.8-13.2l9-29.7c5-16.3,9-29.8,9.1-29.9c0.1-0.1,1-1.3,2.1-2.7l2-2.4h3.1c1.7,0,5.3,0,8.1,0.1l4.9,0.1l1.2,1.4
+				c0.9,1.1,1.2,1.4,1.5,1.4c0.2,0,5.3,0.1,11.4,0.2l11,0.1l1.4-0.9c1.3-0.8,1.5-0.9,2-0.9c0.4,0,7,0.4,7.1,0.4c0,0,1.6,6.9,3.5,15.4
+				l3.5,15.4l-4.7,16.3l-4.7,16.3l-11.8,2.9l-11.8,2.9l-11.3,11.2l-11.3,11.2l-5.5,1.9c-3,1.1-5.6,2-5.7,2C35,148.9,32.9,148,29,146.3z
+					M39.2,142c3.6-1.1,3.6-1.1,4.1-1.6c0.2-0.3,5.1-5.3,10.7-11.2c8.7-9,10.4-10.7,10.7-10.8c0.2-0.1,5.4-1.4,11.4-3
+				c6-1.6,11-2.9,11-2.9c0,0,1.5-5.6,3.3-12.3c2.7-10.3,3.2-12.3,3.1-12.5c-0.1-0.1-1.6-2-3.3-4.3l-3.2-4l-0.7,0.1
+				c-0.4,0-3.2,0.3-6.3,0.5s-5.6,0.5-5.7,0.5c0,0-1.1,2.1-2.2,4.7l-2.2,4.6L67.7,92c-1.3,1.2-2.7,2.5-3,2.9L64,95.5l-4.1,0.8L55.8,97
+				l-4.2-0.7l-4.2-0.7L41.8,92c-3.1-2-5.6-3.6-5.6-3.7c0,0-2.1,6-4.6,13.3L27.1,115l0.2,12.9c0.1,7.1,0.2,12.9,0.3,12.9
+				c0.4,0.2,7.7,2.4,7.9,2.4C35.5,143.2,37.2,142.6,39.2,142L39.2,142z"
+			/>
+			<path
+				id="path929"
+				fill="#61F2EA"
+				stroke="#61F2EA"
+				strokeWidth="0.36"
+				d="M157.9,136.2l-3.9-1.8l-7.5-6.9
+				c-5.2-4.8-7.6-6.9-7.9-6.9c-0.2,0-8,0.4-17.3,1l-16.9,0.9l-3.4-2.7c-2.3-1.8-3.4-2.7-3.4-2.9c0-0.1,2.2-5.6,4.9-12.1l4.8-11.8
+				l-1.6-14.2l-1.6-14.2l2-3.7c1.1-2.1,2-3.8,2-3.8c0,0,5.4-0.3,12.1-0.7l12.1-0.6l5-3.4l5-3.4h5.5h5.5l7.6,10.1l7.6,10.1l0.3,7.3
+				L169,84l2.8,6.3l2.8,6.3l0.8,11.3c0.4,6.2,0.8,11.5,0.8,11.8c0,0.3-1.1,3.9-2.4,8l-2.4,7.4l-4.8,1.4l-4.8,1.4L157.9,136.2z
+					M164.3,132.1c1.1-0.5,2.1-0.9,2.1-0.9c0,0,0.9-2.6,1.9-5.7l1.8-5.7l-1.3-11.4c-0.7-6.3-1.3-11.5-1.3-11.6c0-0.1-1-1.5-2.2-3.2
+				c-1.5-2.2-2.2-3-2.4-3c-0.1,0-1.4,0.4-2.7,0.8l-2.5,0.8l-2.5-0.2l-2.5-0.2l-3.5-1.9c-3.1-1.7-3.9-2.2-6.4-4.2
+				c-1.6-1.3-3-2.3-3.1-2.3s-4,0.2-8.6,0.5l-8.3,0.5l-2.2,2.1c-1.2,1.2-3.3,3.2-4.6,4.4l-2.4,2.3l-1.3,11.6c-0.7,6.4-1.3,11.6-1.3,11.6
+				c0.1,0.1,27.2-0.9,29.3-1l1.2-0.1l8,7.9l8,7.9l2,0.9c1.1,0.5,2.1,0.9,2.3,0.9C162.1,133,163.1,132.6,164.3,132.1L164.3,132.1z"
+			/>
+		</svg>
+	);
+};
+
+export default GractwoLogo;
--- a/data/config.json
+++ b/data/config.json
@@ -0,0 +1,80 @@
+{
+	"splashes": [
+		{
+			"body": "ona jest narysowana debilu",
+			"author": "jamesen"
+		},
+		{
+			"body": "idą jak surykatki na śmierć puszczone",
+			"author": "mollin"
+		},
+		{
+			"body": "jak spotkam stacha będziemy się napierdalać",
+			"author": "KuOlek"
+		},
+		{
+			"body": "to nie kwestia fetyszu, to kwestia prawa izraela",
+			"author": "stachowiak"
+		},
+		{
+			"body": "czemu ten szkielet ma oczy i czilluje",
+			"author": "stachowiak"
+		},
+		{
+			"body": "decymalizacja człowieka",
+			"author": "elephant / suoń"
+		},
+		{
+			"body": "pizdeczka... z całym szacunkiem",
+			"author": "bavil gravlax"
+		},
+		{
+			"body": "mam dwunastometrowego kija w dupie",
+			"author": "stachowiak"
+		},
+		{
+			"body": "pamięć wody o jabłku",
+			"author": "maciuś"
+		},
+		{
+			"body": "właśnie piszę biblię",
+			"author": "elephant / suoń"
+		},
+		{
+			"body": "bitwa o chromosom",
+			"author": "mollin"
+		}
+	],
+	"links": [
+		{
+			"name": "Discord",
+			"href": "https://discord.gg/NBXq95C",
+			"hrefalias": ["/discord", "/dsc", "/dc"],
+			"desc": "Nasz serwer na Discordzie!"
+		},
+		{
+			"name": "YouTube",
+			"href": "https://www.youtube.com/@gractwopl",
+			"hrefalias": ["/youtube", "/yt"],
+			"desc": "Nasz kanał na YouTubie!"
+		},
+		{
+			"name": "Twitter",
+			"href": "https://twitter.com/gractwo",
+			"hrefalias": ["/twitter", "/twt"],
+			"desc": "Nasz profil na Twitterze!"
+		},
+		{
+			"name": "GitHub",
+			"href": "https://github.com/gractwo",
+			"hrefalias": ["/github", "/gh"],
+			"desc": "Nasz org na GitHubie!"
+		},
+		{
+			"name": "Kod Źródłowy",
+			"href": "https://github.com/gractwo/gractwo-web",
+			"hrefalias": ["/source", "/oss"],
+			"desc": "Kod źródłowy naszej strony internetowej."
+		}
+	]
+}
--- a/next.config.js
+++ b/next.config.js
@@ -1,7 +1,21 @@
+const { links } = require("./data/config.json");
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
 	reactStrictMode: true,
 	swcMinify: true,
-}
+	async redirects() {
+		return links
+			.filter((link) => !!link.hrefalias)
+			.map((link) =>
+				link.hrefalias.map((source) => ({
+					source,
+					destination: link.href,
+					permanent: false,
+				}))
+			)
+			.flat();
+	},
+};

-module.exports = nextConfig
+module.exports = nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
        "next": "13.0.6",
        "react": "18.2.0",
        "react-dom": "18.2.0",
+        "sass": "^1.56.2",
        "typescript": "4.9.4"
      }
    },
@@ -556,6 +557,18 @@
        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
      }
    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
    "node_modules/argparse": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -668,6 +681,14 @@
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
    },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/brace-expansion": {
      "version": "1.1.11",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -738,6 +759,43 @@
        "url": "https://github.com/chalk/chalk?sponsor=1"
      }
    },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/client-only": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -1492,6 +1550,19 @@
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
    "node_modules/function-bind": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -1723,6 +1794,11 @@
        "node": ">= 4"
      }
    },
+    "node_modules/immutable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
+    },
    "node_modules/import-fresh": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -1784,6 +1860,17 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/is-boolean-object": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
@@ -2225,6 +2312,14 @@
        }
      }
    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/object-assign": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -2551,6 +2646,17 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
    "node_modules/regenerator-runtime": {
      "version": "0.13.11",
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
@@ -2665,6 +2771,22 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/sass": {
+      "version": "1.56.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.56.2.tgz",
+      "integrity": "sha512-ciEJhnyCRwzlBCB+h5cCPM6ie/6f8HrhZMQOf5vlU60Y1bI1rx5Zb0vlDZvaycHsg/MqFfF1Eq2eokAa32iw8w==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
    "node_modules/scheduler": {
      "version": "0.23.0",
      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@@ -3366,6 +3488,15 @@
        "color-convert": "^2.0.1"
      }
    },
+    "anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
    "argparse": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -3451,6 +3582,11 @@
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
    },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
+    },
    "brace-expansion": {
      "version": "1.1.11",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -3496,6 +3632,31 @@
        "supports-color": "^7.1.0"
      }
    },
+    "chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "requires": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        }
+      }
+    },
    "client-only": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -4065,6 +4226,12 @@
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
    },
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "optional": true
+    },
    "function-bind": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -4224,6 +4391,11 @@
      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.1.tgz",
      "integrity": "sha512-d2qQLzTJ9WxQftPAuEQpSPmKqzxePjzVbpAVv62AQ64NTL+wR4JkrVqR/LqFsFEUsHDAiId52mJteHDFuDkElA=="
    },
+    "immutable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
+    },
    "import-fresh": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -4270,6 +4442,14 @@
        "has-bigints": "^1.0.1"
      }
    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
    "is-boolean-object": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
@@ -4558,6 +4738,11 @@
        "styled-jsx": "5.1.0"
      }
    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+    },
    "object-assign": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -4770,6 +4955,14 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
+    "readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
    "regenerator-runtime": {
      "version": "0.13.11",
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
@@ -4836,6 +5029,16 @@
        "is-regex": "^1.1.4"
      }
    },
+    "sass": {
+      "version": "1.56.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.56.2.tgz",
+      "integrity": "sha512-ciEJhnyCRwzlBCB+h5cCPM6ie/6f8HrhZMQOf5vlU60Y1bI1rx5Zb0vlDZvaycHsg/MqFfF1Eq2eokAa32iw8w==",
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
    "scheduler": {
      "version": "0.23.0",
      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
    "next": "13.0.6",
    "react": "18.2.0",
    "react-dom": "18.2.0",
+    "sass": "^1.56.2",
    "typescript": "4.9.4"
  }
 }
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -0,0 +1,12 @@
+import SEO from "../components/SEO";
+
+const PageError404 = () => {
+	return (
+		<>
+			<SEO title="404" />
+			Error 404!!
+		</>
+	);
+};
+
+export default PageError404;
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,6 +1,16 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import "../styles/globals.scss";
+import type { AppProps } from "next/app";
+import Navigation from "../components/Navigation/Navigation";
+import Footer from "../components/Footer/Footer";
+import SEO from "../components/SEO";

 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+	return (
+		<>
+			<SEO />
+			<Navigation />
+			<Component {...pageProps} />
+			<Footer />
+		</>
+	);
 }
--- a/pages/api/hello.ts
+++ b/pages/api/hello.ts
@@ -1,13 +1,13 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
+import type { NextApiRequest, NextApiResponse } from "next";

 type Data = {
-  name: string
-}
+	name: string;
+};

 export default function handler(
 	req: NextApiRequest,
 	res: NextApiResponse<Data>
 ) {
-  res.status(200).json({ name: 'John Doe' })
+	res.status(200).json({ name: "John Doe" });
 }
--- a/pages/cytaty.tsx
+++ b/pages/cytaty.tsx
@@ -0,0 +1,12 @@
+import SEO from "../components/SEO";
+
+const PageCytaty = () => {
+	return (
+		<>
+			<SEO title="cytaty" />
+			Miejsce na stronkę od cytatów.
+		</>
+	);
+};
+
+export default PageCytaty;
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,71 +1,35 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
+import styles from "../styles/Index.module.scss";

-export default function Home() {
+import { useEffect, useState } from "react";
+import SEO from "../components/SEO";
+import config from "../data/config.json";
+
+const PageIndex = () => {
+	const [splash, setSplash] = useState("");
+	useEffect(() => {
+		setSplash(
+			config.splashes[Math.floor(Math.random() * config.splashes.length)].body
+		);
+	}, []);
+	const welcometext: string =
+		"Witamy na witrynie internetowej Gractwa. Mamy nadzieję że odnajdziesz czego szukasz, zbłąkana duszo.";
 	return (
-    <div className={styles.container}>
-      <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.tsx</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/canary/examples"
-            className={styles.card}
-          >
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-            className={styles.card}
-          >
-            <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
+		<>
+			<SEO />
+			<div className={styles.hero}>
+				<div className={styles.heroinside}>
+					<h1>&bdquo;{splash || "..."}&rdquo;</h1>
+					<p>{welcometext}</p>
+					<br />
+					<p>Warto naznaczyć, że strona jest w trakcie remontu.</p>
 				</div>
-      </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{' '}
-          <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-          </span>
-        </a>
-      </footer>
 			</div>
-  )
-}
+			<div className={styles.stats}>
+				<h1>Hello!</h1>
+				<p>This is the index test page.</p>
+			</div>
+		</>
+	);
+};
+
+export default PageIndex;
--- a/pages/nextjsintro.tsx
+++ b/pages/nextjsintro.tsx
@@ -0,0 +1,71 @@
+import Head from "next/head";
+import Image from "next/image";
+import styles from "../styles/Home.module.css";
+
+export default function Home() {
+	return (
+		<div className={styles.container}>
+			<Head>
+				<title>Create Next App</title>
+				<meta name="description" content="Generated by create next app" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+
+			<main className={styles.main}>
+				<h1 className={styles.title}>
+					Welcome to <a href="https://nextjs.org">Next.js!</a>
+				</h1>
+
+				<p className={styles.description}>
+					Get started by editing{" "}
+					<code className={styles.code}>pages/index.tsx</code>
+				</p>
+
+				<div className={styles.grid}>
+					<a href="https://nextjs.org/docs" className={styles.card}>
+						<h2>Documentation &rarr;</h2>
+						<p>Find in-depth information about Next.js features and API.</p>
+					</a>
+
+					<a href="https://nextjs.org/learn" className={styles.card}>
+						<h2>Learn &rarr;</h2>
+						<p>Learn about Next.js in an interactive course with quizzes!</p>
+					</a>
+
+					<a
+						href="https://github.com/vercel/next.js/tree/canary/examples"
+						className={styles.card}
+					>
+						<h2>Examples &rarr;</h2>
+						<p>Discover and deploy boilerplate example Next.js projects.</p>
+					</a>
+
+					<a
+						href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+						target="_blank"
+						rel="noopener noreferrer"
+						className={styles.card}
+					>
+						<h2>Deploy &rarr;</h2>
+						<p>
+							Instantly deploy your Next.js site to a public URL with Vercel.
+						</p>
+					</a>
+				</div>
+			</main>
+
+			<footer className={styles.footer}>
+				<a
+					href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					Powered by{" "}
+					<span className={styles.logo}>
+						<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
+					</span>
+				</a>
+			</footer>
+		</div>
+	);
+}
--- a/pages/o-gractwie.tsx
+++ b/pages/o-gractwie.tsx
@@ -0,0 +1,12 @@
+import SEO from "../components/SEO";
+
+const PageInfo = () => {
+	return (
+		<>
+			<SEO title="o gractwie" />
+			Miejsce na stronkę od informacji nt. Gractwa.
+		</>
+	);
+};
+
+export default PageInfo;
--- a/pages/rankingi.tsx
+++ b/pages/rankingi.tsx
@@ -0,0 +1,12 @@
+import SEO from "../components/SEO";
+
+const PageRankingi = () => {
+	return (
+		<>
+			<SEO title="rankingi" />
+			Miejsce na stronkę od rankingów.
+		</>
+	);
+};
+
+export default PageRankingi;
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/logo.svg
+++ b/public/logo.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.2" baseProfile="tiny"
+	 id="svg10" inkscape:version="1.0.2-2 (e86c870879, 2021-01-15)" sodipodi:docname="main-logo.svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 192 192"
+	 xml:space="preserve">
+<title  id="title931">Gractwo Main Logo</title>
+<sodipodi:namedview  bordercolor="#666666" borderopacity="1" gridtolerance="10" guidetolerance="10" id="namedview12" inkscape:current-layer="g18" inkscape:cx="90.847995" inkscape:cy="116.23609" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-height="1017" inkscape:window-maximized="1" inkscape:window-width="1920" inkscape:window-x="-8" inkscape:window-y="105" inkscape:zoom="3.1304206" objecttolerance="10" pagecolor="#ffffff" showgrid="false">
+	</sodipodi:namedview>
+<path id="path48" fill="none" stroke="#61F2EA" d="M0,0"/>
+<path id="path879" fill="#FB636B" stroke="#FB636B" stroke-width="0.513" d="M29,146.3l-6-2.6l-0.1-0.5c0-0.3-0.4-6.5-0.9-13.7
+	l-0.8-13.2l9-29.7c5-16.3,9-29.8,9.1-29.9c0.1-0.1,1-1.3,2.1-2.7l2-2.4h3.1c1.7,0,5.3,0,8.1,0.1l4.9,0.1l1.2,1.4
+	c0.9,1.1,1.2,1.4,1.5,1.4c0.2,0,5.3,0.1,11.4,0.2l11,0.1l1.4-0.9c1.3-0.8,1.5-0.9,2-0.9c0.4,0,7,0.4,7.1,0.4c0,0,1.6,6.9,3.5,15.4
+	l3.5,15.4l-4.7,16.3l-4.7,16.3l-11.8,2.9l-11.8,2.9l-11.3,11.2l-11.3,11.2l-5.5,1.9c-3,1.1-5.6,2-5.7,2C35,148.9,32.9,148,29,146.3z
+	 M39.2,142c3.6-1.1,3.6-1.1,4.1-1.6c0.2-0.3,5.1-5.3,10.7-11.2c8.7-9,10.4-10.7,10.7-10.8c0.2-0.1,5.4-1.4,11.4-3
+	c6-1.6,11-2.9,11-2.9c0,0,1.5-5.6,3.3-12.3c2.7-10.3,3.2-12.3,3.1-12.5c-0.1-0.1-1.6-2-3.3-4.3l-3.2-4l-0.7,0.1
+	c-0.4,0-3.2,0.3-6.3,0.5s-5.6,0.5-5.7,0.5c0,0-1.1,2.1-2.2,4.7l-2.2,4.6L67.7,92c-1.3,1.2-2.7,2.5-3,2.9L64,95.5l-4.1,0.8L55.8,97
+	l-4.2-0.7l-4.2-0.7L41.8,92c-3.1-2-5.6-3.6-5.6-3.7c0,0-2.1,6-4.6,13.3L27.1,115l0.2,12.9c0.1,7.1,0.2,12.9,0.3,12.9
+	c0.4,0.2,7.7,2.4,7.9,2.4C35.5,143.2,37.2,142.6,39.2,142L39.2,142z"/>
+<path id="path929" fill="#61F2EA" stroke="#61F2EA" stroke-width="0.36" d="M157.9,136.2l-3.9-1.8l-7.5-6.9
+	c-5.2-4.8-7.6-6.9-7.9-6.9c-0.2,0-8,0.4-17.3,1l-16.9,0.9l-3.4-2.7c-2.3-1.8-3.4-2.7-3.4-2.9c0-0.1,2.2-5.6,4.9-12.1l4.8-11.8
+	l-1.6-14.2l-1.6-14.2l2-3.7c1.1-2.1,2-3.8,2-3.8c0,0,5.4-0.3,12.1-0.7l12.1-0.6l5-3.4l5-3.4h5.5h5.5l7.6,10.1l7.6,10.1l0.3,7.3
+	L169,84l2.8,6.3l2.8,6.3l0.8,11.3c0.4,6.2,0.8,11.5,0.8,11.8c0,0.3-1.1,3.9-2.4,8l-2.4,7.4l-4.8,1.4l-4.8,1.4L157.9,136.2z
+	 M164.3,132.1c1.1-0.5,2.1-0.9,2.1-0.9c0,0,0.9-2.6,1.9-5.7l1.8-5.7l-1.3-11.4c-0.7-6.3-1.3-11.5-1.3-11.6c0-0.1-1-1.5-2.2-3.2
+	c-1.5-2.2-2.2-3-2.4-3c-0.1,0-1.4,0.4-2.7,0.8l-2.5,0.8l-2.5-0.2l-2.5-0.2l-3.5-1.9c-3.1-1.7-3.9-2.2-6.4-4.2
+	c-1.6-1.3-3-2.3-3.1-2.3s-4,0.2-8.6,0.5l-8.3,0.5l-2.2,2.1c-1.2,1.2-3.3,3.2-4.6,4.4l-2.4,2.3l-1.3,11.6c-0.7,6.4-1.3,11.6-1.3,11.6
+	c0.1,0.1,27.2-0.9,29.3-1l1.2-0.1l8,7.9l8,7.9l2,0.9c1.1,0.5,2.1,0.9,2.3,0.9C162.1,133,163.1,132.6,164.3,132.1L164.3,132.1z"/>
+</svg>
--- a/public/vercel.svg
+++ b/public/vercel.svg
@@ -1,4 +0,0 @@
-<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
-    xmlns="http://www.w3.org/2000/svg">
-    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
-</svg>
--- a/styles/Index.module.scss
+++ b/styles/Index.module.scss
@@ -0,0 +1,39 @@
+.hero {
+	display: block;
+	width: 100%;
+	height: 28rem;
+	@media screen and (max-width: 800px) {
+		height: 20rem;
+	}
+	overflow: hidden;
+	position: relative;
+	border-left: none;
+	border-right: none;
+}
+.hero::before {
+	position: absolute;
+	content: "";
+	// we do a little heisenberg
+	background: url(https://media1.tenor.com/images/9e70091410c7b3dd14ecfa09e14aaed2/tenor.gif?itemid=11390952);
+	filter: blur(0.25rem) brightness(50%);
+	transform: scale(1.1);
+	background-size: cover;
+	background-position: 0 -14rem;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+}
+.heroinside {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+}
+.stats {
+	margin: 1rem 16rem;
+}
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,26 +0,0 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-  body {
-    color: white;
-    background: black;
-  }
-}
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -0,0 +1,59 @@
+@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@600&family=Quicksand&display=swap");
+:root {
+	--black0: #121212;
+	--black1: #1a1a1a;
+	--black2: #2c2c2c;
+	--black3: #1d1d1d;
+	--white0: #eee;
+	--accent: #61f2ea;
+	--fonts-norm: "Quicksand", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+		Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+	--fonts-bold: "Lexend", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+		Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+	/*  */
+	--backdrop: var(--black0);
+	--color: var(--white0);
+}
+* {
+	margin: 0;
+	padding: 0;
+}
+body {
+	background-color: var(--black0);
+	color: var(--color);
+	min-height: 100vh;
+	font-family: var(--fonts-norm);
+}
+h1,
+h2,
+h3 {
+	padding: 0.5rem 0;
+	font-family: var(--fonts-bold);
+}
+
+/* html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+  body {
+    color: white;
+    background: black;
+  }
+} */