From ae5e94073896fdb6cb7083bd57de89c7271deaf3 Mon Sep 17 00:00:00 2001
From: Emil Miler <em@0x45.cz>
Date: Sun, 2 Apr 2023 12:40:06 +0200
Subject: [PATCH] Remake section backgrounds

---
 index.html                         |  36 +-
 sass/style.scss                    | 635 +++++++++++++++--------------
 static/img/bg/2.svg                |   1 -
 static/img/bg/checklist.svg        |   1 +
 static/img/bg/contacts.svg         |   1 +
 static/img/bg/{1.svg => facts.svg} |   0
 static/img/bg/faq.svg              |   1 +
 static/img/bg/principles.svg       |   1 +
 static/img/bg/stories.svg          |   1 +
 9 files changed, 355 insertions(+), 322 deletions(-)
 delete mode 100644 static/img/bg/2.svg
 create mode 100644 static/img/bg/checklist.svg
 create mode 100644 static/img/bg/contacts.svg
 rename static/img/bg/{1.svg => facts.svg} (100%)
 create mode 100644 static/img/bg/faq.svg
 create mode 100644 static/img/bg/principles.svg
 create mode 100644 static/img/bg/stories.svg

diff --git a/index.html b/index.html
index 319a1e1..3066da9 100644
--- a/index.html
+++ b/index.html
@@ -109,10 +109,10 @@
 			</div>
 			<div class="source">*Údaje pocházejí ze zdrojů MPSV z&nbsp;roku 2021.</div>
 		</section>
-		<section class="wrap" id="jak-postupovat">
+		<section class="principles" id="jak-postupovat">
 			<h1>Jak postupovat</h1>
-			<p class="narrow text-center">Ačkoli je každá situace jiná,existují obecné zásady, které nám pomohou za všech okolností. Zahrnují všechny fáze procesu od vzniku problému až po jeho vyřešení.</p>
-			<div class="principles">
+			<p class="wrap narrow text-center">Ačkoli je každá situace jiná,existují obecné zásady, které nám pomohou za všech okolností. Zahrnují všechny fáze procesu od vzniku problému až po jeho vyřešení.</p>
+			<div class="principles-list wrap">
 				<div class="dropdown">
 					<!-- Used on mobile -->
 					<select name="principles" id="principles-dropdown">
@@ -165,12 +165,12 @@
 				</div>
 			</div>
 		</section>
-		<section id="krok-po-kroku">
+		<section id="krok-po-kroku" class="checklist">
 			<div class="wrap">
 				<h1>Krok po kroku</h1>
 				<p class="narrow text-center">Plán pomoci je tady od toho,  aby nás krok po kroku provedl různými situacemi, se kterými se u&nbsp;žáků můžeme setkat. Když je budeme následovat, můžeme si na konci procesu v&nbsp;klidu oddechnout – nic důležitého jsme totiž neopomenuli.</p>
 			</div>
-			<div class="checklist">
+			<div class="checklist-cards">
 				<div class="card" data-tilt>
 					<img src="/static/img/checklist-1.jpg" alt="Checklist 1">
 					<div class="title">
@@ -254,10 +254,10 @@
 				<a href="pribehy" class="button">Podívat se na všechny příběhy</a>
 			</div>
 		</section>
-		<section class="wrap" id="kontakty">
+		<section class="contacts" id="kontakty">
 			<h1>Na koho se obrátit</h1>
-			<p class="narrow text-center">Ve chvílích, kdy si nevíte rady, nebojte se obrátit na organizace a instituce, které se zabývají danou problematikou a mohou vám pomoct situaci vyřešit, případně s&nbsp;vámi prokonzultují jednotlivé kroky. Níže najdete tipy  na organizace, které vám poskytnout odbornou pomoc.</p>
-			<div class="contact-list">
+			<p class="wrap narrow text-center">Ve chvílích, kdy si nevíte rady, nebojte se obrátit na organizace a instituce, které se zabývají danou problematikou a mohou vám pomoct situaci vyřešit, případně s&nbsp;vámi prokonzultují jednotlivé kroky. Níže najdete tipy  na organizace, které vám poskytnout odbornou pomoc.</p>
+			<div class="contact-list wrap">
 				<div class="row">
 					<div class="contact">
 						<div class="title">Linka pro rodinu a školu</div>
@@ -324,12 +324,12 @@
 				</div>
 			</div>
 		</section>
-		<section id="faq">
+		<section id="faq" class="faq">
 			<div class="wrap">
 				<h1>NEJČASTĚJŠÍ DOTAZY</h1>
 			</div>
 			<div class="faq-list wrap">
-				<div class="faq">
+				<div class="faq-card">
 					<div class="mark"></div>
 					<div>
 						<div class="question">
@@ -340,7 +340,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="faq">
+				<div class="faq-card">
 					<div class="mark"></div>
 					<div>
 						<div class="question">
@@ -351,7 +351,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="faq">
+				<div class="faq-card">
 					<div class="mark"></div>
 					<div>
 						<div class="question">
@@ -362,7 +362,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="faq">
+				<div class="faq-card">
 					<div class="mark"></div>
 					<div>
 						<div class="question">
@@ -373,7 +373,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="faq">
+				<div class="faq-card">
 					<div class="mark"></div>
 					<div>
 						<div class="question">
@@ -384,7 +384,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="faq">
+				<div class="faq-card">
 					<div class="mark"></div>
 					<div>
 						<div class="question">
@@ -395,7 +395,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="faq">
+				<div class="faq-card">
 					<div class="mark"></div>
 					<div>
 						<div class="question">
@@ -406,7 +406,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="faq">
+				<div class="faq-card">
 					<div class="mark"></div>
 					<div>
 						<div class="question">
@@ -417,7 +417,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="faq">
+				<div class="faq-card">
 					<div class="mark"></div>
 					<div>
 						<div class="question">
diff --git a/sass/style.scss b/sass/style.scss
index d0163c0..cf9a143 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -271,7 +271,7 @@ body.noscroll {
 	margin-top: 2rem;
 	padding-top: 5rem;
 	padding-bottom: 5rem;
-	background-image: url("/static/img/bg/1.svg");
+	background-image: url("/static/img/bg/facts.svg");
 	background-repeat: no-repeat;
 	background-position: top center;
 	background-size: 100% auto;
@@ -347,201 +347,217 @@ body.noscroll {
 }
 
 .principles {
-	display: grid;
-	grid-template-columns: 1fr;
-	grid-column-gap: 8rem;
-	grid-row-gap: 2rem;
-	margin-top: 5em;
+	background-image: url("/static/img/bg/principles.svg");
+	background-repeat: no-repeat;
+	background-position: -60rem top;
+	background-size: auto 100%;
 
-	.dropdown {
+	.principles-list {
+		display: grid;
+		grid-template-columns: 1fr;
+		grid-column-gap: 8rem;
+		grid-row-gap: 2rem;
+		margin-top: 5em;
 
-		select {
-			width: 100%;
-			padding: 1.5em;
-			background-color: $col-bg;
-			color: $col-white;
-			border: 1pt solid $col-accent;
-			border-radius: 1em;
-			font-size: 1rem;
-			font-weight: bold;
-			cursor: pointer;
-			transition: background-color .1s ease-out;
+		.dropdown {
 
-			&:hover {
-				background-color: $col-accent;
+			select {
+				width: 100%;
+				padding: 1.5em;
+				background-color: $col-bg;
+				color: $col-white;
+				border: 1pt solid $col-accent;
+				border-radius: 1em;
+				font-size: 1rem;
+				font-weight: bold;
+				cursor: pointer;
+				transition: background-color .1s ease-out;
+
+				&:hover {
+					background-color: $col-accent;
+				}
 			}
 		}
-	}
 
-	.list {
-		display: none;
-		flex-direction: column;
-		gap: 1em;
+		.list {
+			display: none;
+			flex-direction: column;
+			gap: 1em;
 
-		&>div {
-			padding: 1.5em;
-			outline: 1pt solid $col-secondary;
-			outline-offset: -1pt;
-			border-radius: 1em;
-			cursor: pointer;
-			transition: background-color .1s ease-out;
+			&>div {
+				padding: 1.5em;
+				outline: 1pt solid $col-secondary;
+				outline-offset: -1pt;
+				border-radius: 1em;
+				cursor: pointer;
+				transition: background-color .1s ease-out;
 
-			&.active {
-				border-radius: 1em 0 0 1em;
-				position: relative;
-				overflow: visible;
+				&.active {
+					border-radius: 1em 0 0 1em;
+					position: relative;
+					overflow: visible;
+
+					&:after {
+						content: "";
+						display: block;
+						position: absolute;
+						right: 0;
+						top: 0;
+						width: 2em;
+						height: 100%;
+						background-color: $col-accent;
+						clip-path: polygon(0 0, 0 100%, 100% 50%);
+						transform: translatex(2em);
+					}
+				}
 
-				&:after {
-					content: "";
-					display: block;
-					position: absolute;
-					right: 0;
-					top: 0;
-					width: 2em;
-					height: 100%;
+				&.active, &:hover {
 					background-color: $col-accent;
-					clip-path: polygon(0 0, 0 100%, 100% 50%);
-					transform: translatex(2em);
+					outline: none;
 				}
-			}
 
-			&.active, &:hover {
-				background-color: $col-accent;
-				outline: none;
-			}
-
-			.title {
-				margin: 0;
-				font-weight: bold;
-				text-align: left;
-				font-size: 1.138rem;
+				.title {
+					margin: 0;
+					font-weight: bold;
+					text-align: left;
+					font-size: 1.138rem;
+				}
 			}
 		}
-	}
-
-	.content {
-		display: flex;
-		flex-direction: column;
 
-		&>div {
-			height: 0;
-			overflow: hidden;
-			opacity: 0;
-			transform: translatey(-1em);
-			transition: opacity .2s ease-out, transform .2s ease-out;
+		.content {
+			display: flex;
+			flex-direction: column;
 
-			&.visible {
-				height: auto;
-				opacity: 1;
-				transform: translatex(0);
+			&>div {
+				height: 0;
+				overflow: hidden;
+				opacity: 0;
+				transform: translatey(-1em);
+				transition: opacity .2s ease-out, transform .2s ease-out;
+
+				&.visible {
+					height: auto;
+					opacity: 1;
+					transform: translatex(0);
+				}
 			}
-		}
 
-		h2 {
-			position: relative;
-			text-align: left;
-			padding-bottom: 1rem;
-			margin-top: 0;
+			h2 {
+				position: relative;
+				text-align: left;
+				padding-bottom: 1rem;
+				margin-top: 0;
 
-			&:after {
-				content: "";
-				display: block;
-				position: absolute;
-				left: 0;
-				bottom: 0;
-				width: 2em;
-				height: 1pt;
-				background-color: $col-secondary;
+				&:after {
+					content: "";
+					display: block;
+					position: absolute;
+					left: 0;
+					bottom: 0;
+					width: 2em;
+					height: 1pt;
+					background-color: $col-secondary;
+				}
 			}
-		}
 
-		a {
-			text-decoration: none;
-			color: lighten($col-accent, 25%);
+			a {
+				text-decoration: none;
+				color: lighten($col-accent, 25%);
+			}
 		}
 	}
 }
 
 .checklist {
 	display: flex;
-	justify-content: flex-start;
-	gap: 1em;
-	margin-top: 2rem;
-	overflow-x: scroll;
-
-	// Firefox
-	scrollbar-width: none;
-	// Chrome, Safari, Edge
-	&::-webkit-scrollbar {
-		width: 0;
-	}
-
-	// `overflow-y: visible` does not work
-	padding: 1rem;
+	flex-direction: column;
+	background-image: url("/static/img/bg/checklist.svg");
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: auto 100%;
 
-	.card {
+	.checklist-cards {
 		display: flex;
-		flex-direction: column;
-		flex-shrink: 0;
-		width: 15em;
-		border: .15em solid $col-accent;
-		border-radius: 1.5rem;
-		padding: 1.5em;
-		background-color: $col-bg;
-		text-align: left;
-		user-select: none;
+		justify-content: flex-start;
+		gap: 1em;
+		margin-top: 2rem;
+		overflow-x: scroll;
 
-		img {
-			width: 100%;
-			border-radius: 1rem;
+		// Firefox
+		scrollbar-width: none;
+		// Chrome, Safari, Edge
+		&::-webkit-scrollbar {
+			width: 0;
 		}
 
-		&>.title {
-			position: relative;
-			font-weight: bold;
-			font-size: 1.138rem;
-			padding: 1em 0;
+		// `overflow-y: visible` does not work
+		padding: 1rem;
 
-			&:after {
-				content: "";
-				display: block;
-				position: absolute;
-				left: 0;
-				bottom: 0;
-				width: 25%;
-				height: 1px;
-				background-color: #fff;
-			}
-		}
-
-		.download {
-			margin-top: 1rem;
-			cursor: pointer;
-			color: inherit;
-			text-decoration: none;
-			margin-top: auto;
+		.card {
+			display: flex;
+			flex-direction: column;
+			flex-shrink: 0;
+			width: 15em;
+			border: .15em solid $col-accent;
+			border-radius: 1.5rem;
+			padding: 1.5em;
+			background-color: $col-bg;
+			text-align: left;
+			user-select: none;
 
-			&:hover {
-				color: lighten($col-accent, 25%);
+			img {
+				width: 100%;
+				border-radius: 1rem;
 			}
 
-			.title {
-				display: flex;
-				align-items: baseline;
-				font-size: 1.25em;
+			&>.title {
+				position: relative;
 				font-weight: bold;
-				margin-bottom: .25em;
+				font-size: 1.138rem;
+				padding: 1em 0;
 
 				&:after {
-					content: url("/static/img/download-icon.svg");
-					display: inline-block;
-					height: 1em;
-					margin-left: .5rem;
+					content: "";
+					display: block;
+					position: absolute;
+					left: 0;
+					bottom: 0;
+					width: 25%;
+					height: 1px;
+					background-color: #fff;
 				}
 			}
-			.meta {
-				color: $col-secondary;
-				font-size: .85em;
+
+			.download {
+				margin-top: 1rem;
+				cursor: pointer;
+				color: inherit;
+				text-decoration: none;
+				margin-top: auto;
+
+				&:hover {
+					color: lighten($col-accent, 25%);
+				}
+
+				.title {
+					display: flex;
+					align-items: baseline;
+					font-size: 1.25em;
+					font-weight: bold;
+					margin-bottom: .25em;
+
+					&:after {
+						content: url("/static/img/download-icon.svg");
+						display: inline-block;
+						height: 1em;
+						margin-left: .5rem;
+					}
+				}
+				.meta {
+					color: $col-secondary;
+					font-size: .85em;
+				}
 			}
 		}
 	}
@@ -549,9 +565,9 @@ body.noscroll {
 
 .stories {
 	padding-top: 5rem; // To clear the image
-	background-image: url("/static/img/bg/2.svg");
-	background-size: 90rem auto;
-	background-position: center top;
+	background-image: url("/static/img/bg/stories.svg");
+	background-size: auto 110%;
+	background-position: center;
 	background-repeat: no-repeat;
 
 	&:before {
@@ -675,164 +691,179 @@ body.noscroll {
 	}
 }
 
-.contact-list {
-	margin: 5rem 0 8rem 0;
-
-	.row {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-	}
+.contacts {
+	margin-top: 8rem;
+	background-image: url("/static/img/bg/contacts.svg");
+	background-repeat: no-repeat;
+	background-position: -40rem center;
+	background-size: auto 100%;
 
-	.row:first-child .contact:first-child {
-		border-top: none;
-	}
-	.row .contact:first-child {
-		border-top: 1px solid $col-secondary;
-	}
+	.contact-list {
+		margin: 5rem auto 8rem auto;
 
-	.row .contact {
-		width: 100%;
-		padding: 3rem 0;
-		border-bottom: 1px solid $col-secondary;
-		flex: 1;
-
-		&:last-child {
-			border: none;
+		.row {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
 		}
 
-		.title {
-			font-weight: bold;
-			font-size: 1.25em;
+		.row:first-child .contact:first-child {
+			border-top: none;
+		}
+		.row .contact:first-child {
+			border-top: 1px solid $col-secondary;
 		}
 
-		.meta {
-			display: flex;
-			flex-direction: column;
-			gap: 1rem;
-			font-weight: bold;
+		.row .contact {
+			width: 100%;
+			padding: 3rem 0;
+			border-bottom: 1px solid $col-secondary;
+			flex: 1;
 
-			&>div {
+			&:last-child {
+				border: none;
+			}
+
+			.title {
+				font-weight: bold;
+				font-size: 1.25em;
+			}
+
+			.meta {
 				display: flex;
-				align-items: center;
+				flex-direction: column;
 				gap: 1rem;
+				font-weight: bold;
 
-				&:before {
-					content: "";
-					height: 2rem;
-					width: 2rem;
-					border: 1px solid $col-secondary;
-					border-radius: .5rem;
-					background-size: 50%;
-					background-position: center;
-					background-repeat: no-repeat;
+				&>div {
+					display: flex;
+					align-items: center;
+					gap: 1rem;
+
+					&:before {
+						content: "";
+						height: 2rem;
+						width: 2rem;
+						border: 1px solid $col-secondary;
+						border-radius: .5rem;
+						background-size: 50%;
+						background-position: center;
+						background-repeat: no-repeat;
+					}
 				}
-			}
 
-			.phone:before {
-				background-image: url("/static/img/icons/phone.svg");
-			}
-			.website:before {
-				background-image: url("/static/img/icons/web.svg");
-			}
-			.email:before {
-				background-image: url("/static/img/icons/email.svg");
-			}
+				.phone:before {
+					background-image: url("/static/img/icons/phone.svg");
+				}
+				.website:before {
+					background-image: url("/static/img/icons/web.svg");
+				}
+				.email:before {
+					background-image: url("/static/img/icons/email.svg");
+				}
 
-			a {
-				text-decoration: none;
-				color: inherit;
+				a {
+					text-decoration: none;
+					color: inherit;
 
-				&:hover {
-					color: lighten($col-accent, 25%);
+					&:hover {
+						color: lighten($col-accent, 25%);
+					}
 				}
 			}
 		}
 	}
 }
 
-.faq-list {
-	width: 100%;
-	margin-top: 5em;
-
-	&.wrap {
-		padding: 0;
-	}
+.faq {
+	background-image: url("/static/img/bg/faq.svg");
+	background-repeat: no-repeat;
+	background-position: right center;
+	background-size: auto 100%;
 
-	.faq {
-		position: relative;
-		display: grid;
-		grid-template-columns: 1em auto;
-		column-gap: 1em;
+	.faq-list {
 		width: 100%;
-		padding: 2em;
-		cursor: pointer;
-
-		background-color: inherit;
-		transition: all .5s ease;
+		margin-top: 5em;
 
-		// Hide bottom border.
-		margin-bottom: -1px;
+		&.wrap {
+			padding: 0;
+		}
 
-		border-width: 1px 0 0 0;
-		border-style: solid;
-		border-color: rgba(200,200,200,0.1);
+		.faq-card {
+			position: relative;
+			display: grid;
+			grid-template-columns: 1em auto;
+			column-gap: 1em;
+			width: 100%;
+			padding: 2em;
+			cursor: pointer;
 
-		&:last-child {
-			border-width: 1px 0;
-		}
+			background-color: inherit;
+			transition: all .5s ease;
 
-		&.active {
-			border-width: 0;
-			background-color: $col-accent;
-			z-index: 1;
+			// Hide bottom border.
+			margin-bottom: -1px;
 
-			&:before { border: 0 }
+			border-width: 1px 0 0 0;
+			border-style: solid;
+			border-color: rgba(200,200,200,0.1);
 
-			.answer {
-				height: auto;
-				margin-top: 1em;
-				opacity: 1;
+			&:last-child {
+				border-width: 1px 0;
 			}
 
-			.mark:before {
-				content: "\2212";
+			&.active {
+				border-width: 0;
+				background-color: $col-accent;
+				z-index: 1;
+
+				&:before { border: 0 }
+
+				.answer {
+					height: auto;
+					margin-top: 1em;
+					opacity: 1;
+				}
+
+				.mark:before {
+					content: "\2212";
+				}
 			}
-		}
 
-		.mark {
-			text-align: center;
+			.mark {
+				text-align: center;
 
-			&:before {
-				content: "\002B";
-				display: block;
-				text-align: right;
-				color: #fff;
-				font-weight: bold;
+				&:before {
+					content: "\002B";
+					display: block;
+					text-align: right;
+					color: #fff;
+					font-weight: bold;
+					font-size: 1.138rem;
+				}
+			}
+
+			.question {
 				font-size: 1.138rem;
 			}
-		}
 
-		.question {
-			font-size: 1.138rem;
-		}
+			.answer {
+				height: 0;
+				overflow: hidden;
+				opacity: 0;
+				transition: all .5s ease;
 
-		.answer {
-			height: 0;
-			overflow: hidden;
-			opacity: 0;
-			transition: all .5s ease;
+				a {
+					color: lighten($col-bg, 75%);
+				}
 
-			a {
-				color: lighten($col-bg, 75%);
+				ul {
+					margin: 0;
+				}
 			}
 
-			ul {
-				margin: 0;
-			}
 		}
-
 	}
 }
 
@@ -916,32 +947,29 @@ footer {
 		}
 	}
 
-	.facts {
-
-		.fact-list {
-			flex-direction: row;
-			justify-content: center;
-			align-items: stretch;
-			gap: 0;
+	.facts .fact-list {
+		flex-direction: row;
+		justify-content: center;
+		align-items: stretch;
+		gap: 0;
 
-			.item {
-				border-right: 1px solid $col-secondary;
-				justify-content: flex-start;
-				padding: 0 3rem;
-				max-width: 17rem;
+		.item {
+			border-right: 1px solid $col-secondary;
+			justify-content: flex-start;
+			padding: 0 3rem;
+			max-width: 17rem;
 
-				&:after {
-					display: none;
-				}
+			&:after {
+				display: none;
+			}
 
-				&:last-child {
-					border: none;
-				}
+			&:last-child {
+				border: none;
 			}
 		}
 	}
 
-	.principles {
+	.principles .principles-list {
 		grid-template-columns: 1fr 1fr;
 
 		.dropdown{
@@ -958,19 +986,12 @@ footer {
 		}
 	}
 
-	.checklist {
-
-		.card {
-			width: 17em;
-		}
-	}
-
 	.stories .stories-list {
 		flex-direction: row;
 		align-items: stretch;
 	}
 
-	.contact-list .row {
+	.contacts .contact-list .row {
 		flex-direction: row;
 		margin-bottom: 4rem;
 
@@ -987,7 +1008,15 @@ footer {
 	}
 
 	.checklist {
-		justify-content: center;
+		align-items: center;
+
+		.checklist-cards .card {
+			width: 17em;
+		}
+	}
+
+	.faq {
+		background-position: 170% center;
 	}
 	
 	footer .grid {
diff --git a/static/img/bg/2.svg b/static/img/bg/2.svg
deleted file mode 100644
index b0120a1..0000000
--- a/static/img/bg/2.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="3810.539" height="1338.541" viewBox="0 0 1008.205 354.156" xmlns="http://www.w3.org/2000/svg"><defs><filter style="color-interpolation-filters:sRGB" id="a" x="-.151" y="-.551" width="1.301" height="2.101"><feGaussianBlur stdDeviation="48.5949 38.6129" result="blur"/></filter></defs><path style="fill:#1d3141;fill-opacity:.6;stroke:#000;stroke-width:.264583;filter:url(#a)" d="M87.482 20.208c102.344 41.807 135.723 74.637 195.481 71.304 94.652-5.278 175.889-61.989 272.074-74.265 39.171-5 166.306 34.533 200.077 50.303 38.427 17.944 52.439 94.204-10.168 84.648-62.607-9.556-226.467-35.829-261.778-28.304-11.425 2.435-119.583 71.729-273.403 53.814-29.015-3.38-243.197-18.942-187.239-92.86 21.538-28.45-11.594-95.91 64.956-64.64z" transform="translate(103.514 80.69)"/></svg>
\ No newline at end of file
diff --git a/static/img/bg/checklist.svg b/static/img/bg/checklist.svg
new file mode 100644
index 0000000..40a84a0
--- /dev/null
+++ b/static/img/bg/checklist.svg
@@ -0,0 +1 @@
+<svg width="1298.119" height="899.547" xmlns="http://www.w3.org/2000/svg"><defs><filter style="color-interpolation-filters:sRGB" id="b" x="-.157" y="-.246" width="1.314" height="1.493"><feGaussianBlur stdDeviation="45 45" result="blur"/></filter><filter style="color-interpolation-filters:sRGB" id="a" x="-.122" y="-.214" width="1.244" height="1.427"><feGaussianBlur stdDeviation="45 45" result="blur"/></filter></defs><path d="M1166.877 285.884s-77.348 181.645-612.332 152.188c-534.984-29.457-110.818 352 323.23 353.472 434.048 1.472 289.102-505.66 289.102-505.66z" fill="#415546" style="fill:#415546;fill-opacity:.5;filter:url(#a)"/><path d="M195.386 108.486c-40.843 13.96-128.633-8.548-64.888 242.016 63.745 250.564 621.712 221.456 663.6 128.51 41.886-92.946-557.869-384.488-598.712-370.527z" fill="#845368" style="fill:#845368;fill-opacity:.5;filter:url(#b)"/></svg>
\ No newline at end of file
diff --git a/static/img/bg/contacts.svg b/static/img/bg/contacts.svg
new file mode 100644
index 0000000..1c0ebf7
--- /dev/null
+++ b/static/img/bg/contacts.svg
@@ -0,0 +1 @@
+<svg width="1681.859" height="924.495" xmlns="http://www.w3.org/2000/svg"><defs><filter style="color-interpolation-filters:sRGB" id="a" x="-.074" y="-.152" width="1.147" height="1.305"><feGaussianBlur stdDeviation="45 45" result="blur"/></filter></defs><path d="M354.969 423.43s100.126 146.213 514.28-156.088c414.156-302.301 597.796-96.83 696.328-12.975 98.532 83.855-704.292 866.429-1229.04 431.278-524.748-435.151 18.432-262.214 18.432-262.214z" fill="#463660" style="filter:url(#a);fill:#463660;fill-opacity:.5"/></svg>
\ No newline at end of file
diff --git a/static/img/bg/1.svg b/static/img/bg/facts.svg
similarity index 100%
rename from static/img/bg/1.svg
rename to static/img/bg/facts.svg
diff --git a/static/img/bg/faq.svg b/static/img/bg/faq.svg
new file mode 100644
index 0000000..f2618b3
--- /dev/null
+++ b/static/img/bg/faq.svg
@@ -0,0 +1 @@
+<svg width="2030.912" height="1870.815" xmlns="http://www.w3.org/2000/svg"><defs><filter style="color-interpolation-filters:sRGB" id="a" x="-.074" y="-.088" width="1.147" height="1.176"><feGaussianBlur stdDeviation="45 45" result="blur"/></filter></defs><path d="M2391.695 6872s-994.633 80.767-963.587-518.257c31.046-599.024 110.947-115.8 940-601.83 829.053-486.03 471.064 916.908 307.336 1008.83C2511.716 6852.665 2391.695 6872 2391.695 6872z" transform="rotate(-17 -16234.9 7431.093)" fill="#3b2141" style="fill:#3b2141;fill-opacity:.5;filter:url(#a)"/></svg>
\ No newline at end of file
diff --git a/static/img/bg/principles.svg b/static/img/bg/principles.svg
new file mode 100644
index 0000000..91460ad
--- /dev/null
+++ b/static/img/bg/principles.svg
@@ -0,0 +1 @@
+<svg width="1820.343" height="650.462" xmlns="http://www.w3.org/2000/svg"><defs><filter style="color-interpolation-filters:sRGB" id="a" x="-.067" y="-.249" width="1.135" height="1.497"><feGaussianBlur stdDeviation="45 45" result="blur"/></filter></defs><path d="M1524.834 109.238C1186.826 88 522.51 347.138 186.38 340.351c-336.13-6.787 485.2 327.463 1017.781 150.226 532.581-177.237 658.682-360.109 320.674-381.339z" fill="#504169" style="fill:#504169;fill-opacity:.5;filter:url(#a)"/></svg>
\ No newline at end of file
diff --git a/static/img/bg/stories.svg b/static/img/bg/stories.svg
new file mode 100644
index 0000000..bb6b140
--- /dev/null
+++ b/static/img/bg/stories.svg
@@ -0,0 +1 @@
+<svg width="2391.488" height="839.564" xmlns="http://www.w3.org/2000/svg"><defs><filter style="color-interpolation-filters:sRGB" id="a" x="-.05" y="-.173" width="1.099" height="1.346"><feGaussianBlur stdDeviation="45 45" result="blur"/></filter></defs><path d="M190.929 345.063s454.5 163.074 967.161-43.955 675.884-224.758 831.193-159.264c155.309 65.494 378.161 83.075 261.826 247.175-116.335 164.1-938.737-20.512-1129.209 259.775C931.428 929.081 108 407.627 108 407.627z" fill="#1d3141" style="fill:#1d3141;fill-opacity:.5;filter:url(#a)"/></svg>
\ No newline at end of file