Add content grid

2022-05-08 22:49:05 +02:00
parent 920a193adb
commit b5efd408a8
10 changed files with 6562 additions and 1350 deletions
--- a/components/Banner.js
+++ b/components/Banner.js
@@ -3,7 +3,7 @@ export default function Banner() {
 		<>
 			<section className="banner">
 				<div />
-				<h1>Dzień dobry.</h1>
+				<h1>Remont strony</h1>
 				<p>Tutaj znajdzie się banner ze zdjęciem.</p>
 			</section>
 		</>
--- a/icons/PaperPlane.js
+++ b/icons/PaperPlane.js
@@ -0,0 +1,11 @@
+export function PaperPlane(props) {
+	return (
+		<svg width="24px" height="24px" viewBox="0 0 24 24" {...props}>
+			<path
+				fill="currentColor"
+				d="M13.7612096,12.010246 L3.00114069,10.9260828 L3.00000002,4.07390726 C2.9999013,3.48090338 3.4805459,3.00009873 4.07354978,3.00000001 C4.24030125,2.99997226 4.40476746,3.03878301 4.55391451,3.11335654 L20.4062223,11.0395104 C20.9366211,11.3047098 21.1516077,11.9496696 20.8864083,12.4800684 C20.78252,12.6878448 20.6140494,12.8563254 20.4062791,12.960226 L4.55631145,20.8863826 C4.02592835,21.1516134 3.38095585,20.936665 3.11572505,20.4062819 C3.04118163,20.2572172 3.00236221,20.092846 3.0023401,19.9261816 L3.00143069,13.0735399 L13.7612096,12.010246 Z"
+				id="Shape"
+			></path>
+		</svg>
+	);
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
 		"next": "12.1.6",
 		"react": "18.1.0",
 		"react-dom": "18.1.0",
-		"sass": "^1.51.0"
+		"sass": "^1.51.0",
+		"yarn": "^1.22.18"
 	},
 	"devDependencies": {
 		"eslint": "8.14.0",
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -7,6 +7,12 @@ function MyApp({ Component, pageProps }) {
 			<Head>
 				<link rel="shortcut icon" href="/gractwo.svg" />
 				<title>Gractwo</title>
+				<link rel="preconnect" href="https://fonts.googleapis.com" />
+				<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+				<link
+					href="https://fonts.googleapis.com/css2?family=Lexend:wght@600&display=swap"
+					rel="stylesheet"
+				></link>
 			</Head>
 			<Component {...pageProps} />
 		</>
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,29 +1,48 @@
 import Header from "../components/Header.js";
 import Banner from "../components/Banner.js";
-
+import { PaperPlane } from "../icons/PaperPlane.js";
 export default function Home() {
 	return (
 		<>
 			<Header />
 			<Banner />
-			<style jsx>{`
-				h1,
-				p {
-					margin: 1rem;
-				}
-				p {
-					border-left: 0.2rem solid white;
-					padding-left: 1rem;
-				}
-			`}</style>
-			<h1>Strona w przebudowie.</h1>
-			<p>
-				Tutaj powstaje Gractwo experience godny Twoich oczu. <br /> Zakładając,
-				że zaraz nie dostanę od Ciebie - drogi internauto - wiadomości, że żaden
-				taki nie jest. <br />
-				I&apos;m onto you. <br />
-				<br />~ jamesen
-			</p>
+			<article className="main">
+				<div className="Map">
+					<div className="msg">
+						<h1>99,9k</h1>
+						<p>Wysłane wiadomości</p>
+						<PaperPlane className="icons" />
+					</div>
+					<div className="bots">
+						<p>Status botów</p>
+					</div>
+					<div className="discord">
+						<PaperPlane className="icons" />
+					</div>
+					<div className="twitter">
+						<PaperPlane className="icons" />
+					</div>
+					<div className="members">
+						<h1>99,9k</h1>
+						<p>Wysłane wiadomości</p>
+						<PaperPlane className="icons" />
+					</div>
+					<div className="days">
+						<h1>99,9k</h1>
+						<p>Wysłane wiadomości</p>
+						<PaperPlane className="icons" />
+					</div>
+					<div className="yt">
+						<PaperPlane className="icons" />
+					</div>
+					<div className="github">
+						<PaperPlane className="icons" />
+					</div>
+					<div className="minecraft">
+						<PaperPlane className="icons" />
+					</div>
+				</div>
+			</article>
 		</>
 	);
 }
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- 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/globals.scss
+++ b/styles/globals.scss
@@ -1,8 +1,8 @@
-@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@600&display=swap");
 :root {
 	--black0: #121212;
 	--black1: #1a1a1a;
 	--black2: #2c2c2c;
+	--black3: #1d1d1d;
 	--accent: #61f2ea;
 }
 * {
@@ -24,15 +24,14 @@ nav.main {
 	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
 	position: relative;
 	a {
+		font-family: "Lexend", sans-serif;
 		display: block;
-		padding: 0 1.5rem;
+		padding: 0 2rem;
 		display: flex;
 		align-items: center;
 		height: 100%;
-		margin: 0 0.5rem;
 		color: white;
 		text-decoration: none;
-		font-family: "Lexend", sans-serif;
 		transition-duration: 150ms;
 		// font-size: 16px;
 		&:hover {
@@ -66,10 +65,10 @@ section.banner {
 	justify-content: center;
 	align-items: center;
 	width: 100%;
-	height: 28rem;
+	height: 25rem;
 	h1,
 	p {
-		position: fixed;
+		position: absolute;
 		text-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
 	}
 	h1 {
@@ -86,3 +85,80 @@ section.banner {
 		background-color: var(--black0);
 	}
 }
+article.main {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	.Map {
+		margin-top: 2rem;
+		display: grid;
+		grid-gap: 2rem;
+		grid-template-rows: repeat(2, 10rem);
+		grid-template-columns: repeat(7, 10rem);
+		div {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			background-color: var(--black3);
+			border-radius: 10px;
+			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+			overflow: hidden;
+			position: relative;
+			h1 {
+				font-family: "Lexend", sans-serif;
+				font-size: 4.5rem;
+			}
+			p {
+				font-family: "Lexend", sans-serif;
+				font-size: 1.6rem;
+			}
+			.icons {
+				margin-bottom: 4rem;
+				margin-left: 11rem;
+				transform: rotate(195deg);
+				width: 15rem;
+				height: 15rem;
+				opacity: 5%;
+				position: absolute;
+				color: white;
+			}
+		}
+		.msg {
+			grid-column: 1/3;
+			grid-row: 1;
+		}
+		.bots {
+			grid-column: 3/6;
+			grid-row: 1;
+		}
+		.discord {
+			grid-column: 6;
+			grid-row: 1;
+		}
+		.twitter {
+			grid-column: 7;
+			grid-row: 1;
+		}
+		.members {
+			grid-column: 1/3;
+			grid-row: 2;
+		}
+		.days {
+			grid-column: 3/5;
+			grid-row: 2;
+		}
+		.yt {
+			grid-column: 5;
+			grid-row: 2;
+		}
+		.github {
+			grid-column: 6;
+			grid-row: 2;
+		}
+		.minecraft {
+			grid-column: 7;
+			grid-row: 2;
+		}
+	}
+}
--- a/yarn.lock
+++ b/yarn.lock