From 66e92fd8fdfdeb9a571d5d73233adf9508f0950e Mon Sep 17 00:00:00 2001
From: jakubmanczak <jakub@manczak.net>
Date: Sat, 7 May 2022 01:12:50 +0200
Subject: [PATCH] create & style basic banner component

---
 components/Banner.js | 11 +++++++++++
 pages/index.js       |  2 ++
 styles/globals.scss  | 27 +++++++++++++++++++++++++++
 3 files changed, 40 insertions(+)
 create mode 100644 components/Banner.js

diff --git a/components/Banner.js b/components/Banner.js
new file mode 100644
index 0000000..521fe32
--- /dev/null
+++ b/components/Banner.js
@@ -0,0 +1,11 @@
+export default function Banner() {
+	return (
+		<>
+			<section className="banner">
+				<div />
+				<h1>Dzień dobry.</h1>
+				<p>Tutaj znajdzie się banner ze zdjęciem.</p>
+			</section>
+		</>
+	);
+}
diff --git a/pages/index.js b/pages/index.js
index a286174..f2f1f60 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,9 +1,11 @@
 import Header from "../components/Header.js";
+import Banner from "../components/Banner.js";
 
 export default function Home() {
 	return (
 		<>
 			<Header />
+			<Banner />
 			<style jsx>{`
 				h1,
 				p {
diff --git a/styles/globals.scss b/styles/globals.scss
index 22ae4d2..86f00f8 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -22,6 +22,7 @@ nav.main {
 	display: flex;
 	align-items: center;
 	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+	position: relative;
 	a {
 		display: block;
 		padding: 0 1.5rem;
@@ -59,3 +60,29 @@ nav.main {
 		height: var(--size);
 	}
 }
+
+section.banner {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 28rem;
+	h1,
+	p {
+		position: fixed;
+		text-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
+	}
+	h1 {
+		font-size: 3.5rem;
+	}
+	p {
+		margin-top: 6rem;
+	}
+	div {
+		// filter: blur(0.2rem);
+		width: 100%;
+		height: 100%;
+		background-size: cover;
+		background-color: var(--black0);
+	}
+}