Style hero and nav with gradients and new fonts

.gitignore

@@ -15,3 +15,4 @@ Homestead.yaml
 npm-debug.log
 yarn-error.log
 package-lock.json
+/public/*

resources/scss/_vars.scss

@@ -0,0 +1,62 @@
+@use "sass:map";
+@use "sass:color";
+
+$theme-colors: (
+	"red-alert": #ce0018,
+	"red-orangish": #de493b,
+	"blue": #0736a4,
+	"light-blue": #a4bfd9,
+	"orange": #ec9f05 ,
+    "primary":  #e2e2e7,
+    "fade-grey":  #828287,
+    "light-grey":  #f0f0f0,
+    'link-grey':  #525257,
+    'h2':  black,
+    'p':  #424242,
+    "col3":  #eee,
+    "col1":  #ffffff,
+    "col4":  #434547,
+    "col5":  #2a2c2d,
+    "nav":  #feca1d,
+    "nav-light":  #ffda01,
+    "nav2":  #daa520,
+	'blk': #000,
+	'navy-blue': #3e4b75,
+	'pale-yellow': #f8ebc2,
+	'lightGrey': #fafafc,
+	'formGrey': #3b3f44,
+	'special_blue': #6573ff,
+	'indigo': #6610f2
+);
+
+@function getColor($col) {
+	@return map.get($theme-colors, $col);
+}
+
+@function darkenColor($col) {
+	$oldCol : map.get($theme-colors, $col);
+	$newCol : color.scale($oldCol, $lightness: -45%);
+	@return $newCol;
+}
+
+@function lightenColor($col) {
+	$oldCol : map.get($theme-colors, $col);
+	$newCol : color.scale($oldCol, $lightness: 15%);
+	@return $newCol;
+}
+
+@mixin button($col) {
+	display: inline-block;
+	//font-family: $btn-font-family;
+	font-weight: 400;
+	background-color: getColor($col);
+	text-align: center;
+	vertical-align: middle;
+	user-select: none;
+	border: none;
+	padding: 7px 15px;
+	border-radius: 5px;
+	&:hover{
+	background-color: darkenColor($col);
+	}
+  }

resources/scss/main.scss

@@ -1,19 +1,34 @@
-// @font-face {
-// 	font-family: "EBGaramond-initials";
-// 	src: url("font/EBGaramond/EBGaramond-Initials.otf") format("opentype");
-// 	font-style: normal;
-// 	font-weight: normal;
-// }
+@use "vars";
+
+@font-face {
+	font-family: "PatuaOne";
+	src: url("PatuaOne-Regular.ttf") format("opentype");
+	font-style: normal;
+	font-weight: normal;
+}
+
+@font-face {
+	font-family: "FreeSans";
+	src: url("FreeSans.otf") format("opentype");
+	font-style: normal;
+	font-weight: normal;
+}
 
 html body {
-	// font-family: 'EBGaramond', 'Times New Roman';
+	font-family: 'PatuaOne', 'Times New Roman';
 	background: url("background/interlaced/interlaced.png") repeat;
 	margin: 0;
 }
 
 h1 {
+	color: white;
+}
+
+h2, h3 {
 	color: black;
+	font-family: "PatuaOne";
 }
+
 a {
 	text-decoration: none;
 }
@@ -21,7 +36,7 @@ a {
 nav {
 	position: absolute;
 	width: 100%;
-	top: 0;
+	top: 10px;
 	display: flex;
 	flex-flow: row wrap;
 	align-items: center;
@@ -33,6 +48,10 @@ nav h1 {
 	margin: 4px 10px 0;
 }
 
+.formal-font {
+	font-family: "FreeSans";
+}
+
 nav #logo {
 	margin-right: 50px;
 }
@@ -43,7 +62,6 @@ nav form {
 }
 
 nav form div {
-	// width: 10em;
 	margin: 0 10px;
 }
 
@@ -51,10 +69,8 @@ nav form button {
 	min-width: 5em;
 }
 
-nav .register-button {
-	// width: 5em;
-	display: block;
-	margin: 0 20px;
+nav form input,label {
+	opacity: 0.7;
 }
 
 @media (max-width: 720px) {
@@ -81,7 +97,9 @@ nav .register-button {
 div.landing-hero {
 	top: 0;
 	height: 60vh;
-	background-color: orange;
+	background-color: #ff4e00;
+	// background-image: linear-gradient(to right bottom, #ff4e00, #fc6200, #f87200, #f58100, #f18e00, #f19507, #f09c0f, #f0a317, #f3a620, #f6a927, #f8ad2e, #fbb034);
+	background-image: linear-gradient(315deg, #ff4e00 0%, #ec9f05 74%);
 }
 
 div.hero-filter {
@@ -90,17 +108,87 @@ div.hero-filter {
 }
 
 div.hero-filter h2 {
+	color: black;
+	opacity: 0.7;
 	width: 10em;
 	font-size: 2.4em;
 	position: absolute;
 	top: 15%;
-	margin-left: 3%;
+	margin-left: 5%;
+}
+
+div.hero-filter p {
+	position: absolute;
+	top: 27%;
+	margin-left: 5%;
+	font-size: 20px;
+	width: 10em;
+	opacity: 0.7;
 }
 
 div.errors {
-	background-color: red;
-	height: 50px;
+	background-color: #ececec;
+	color: vars.getColor("red-alert");
+	border: 2px solid vars.getColor("red-alert");
+	border-radius: 4px;
+	min-height: 50px;
 	position: absolute;
-	width: 100%;
-	top: 50px;
+	left: 50%;
+	margin-right: -50%;
+	top: 100px;
+	min-width: 30em;
+	transform: translate(-50%, -50%);
+}
+
+.errors ul {
+	margin: auto;
+}
+
+form.login {
+	// font-weight: bold;
+	color: white;
+}
+
+form.login input {
+	margin-left: 2px;
+	color: white;
+	background-color: transparent;
+	border: 2px solid white;
+	border-radius: 2px;
+	outline-color: orange
+}
+
+form.login .login-btn {
+	font-family: "PatuaOne";
+	border: none;
+	// background-image: radial-gradient(circle, #63b521, #5fad21, #5ba421, #579c20, #539420);
+	border-radius: 4px;
+	padding: 3px;
+	color: white;
+	// background-color: vars.getColor("light-blue");
+	background-color: #045de9;
+	background-image: linear-gradient(315deg, #045de9 0%, #09c6f9 74%);
+	// background-image: linear-gradient(315deg, #045de9 0%, #09c6f9 74%);
+	// background-image: radial-gradient(circle, #045de9, #007cf8, #0097fd, #00b0fd, #00c6f9);
+}
+
+.hero-filter .register-btn {
+	text-align: center;
+	display: block;
+	position: relative;
+	width: 7em;
+	top: 60%;
+	margin-left: auto;
+	margin-right: auto;
+	font-size: 20px;
+	border: 2px solid white;
+	border-radius: 4px;
+	padding: 10px;
+	background-color: transparent;
+	color: white;
+	// background-image: radial-gradient(circle, #63b521, #5fad21, #5ba421, #579c20, #539420);
+	&:hover {
+		background-color: white;
+		color: vars.getColor("orange");
+	}
 }

resources/views/home.blade.php

@@ -12,6 +12,8 @@
 	<div class='landing-hero'>
 		<div class='hero-filter'>
 			<h2>The web's #1 content promoter</h2>
+			<p>Give your brand the boost it needs for oganic growth with the web's most trusted social media marketing panel.</p>
+			<a class='register-btn' href="/register">Register Now</a>
 		</div>
 	</div>
 	<section class="about-us">
@@ -26,7 +28,7 @@
 		<div class="card">Sit</div>
 		<div class="card">Dolor adipisci quos distinctio?</div>
 	</section>
-	<section class='faq'>
+	<section class='formal-font faq'>
 		<h2>FAQ</h2>
 		<div class="card">Amet officiis obcaecati et porro!</div>
 		<div class="card">Dolor minus corporis labore error.</div>

resources/views/master.blade.php

@@ -27,15 +27,15 @@ spellcheck='false'>
 			<label for='sender_password'>Password</label>
 			<input required type='password' name='sender_password' placeholder='' spellcheck='false'>
 			</div>
-			<button class='login-button'type="login">Log in</button>
-			<a href='/register' class='register-button' type="login">Register</a>
+			<button class='login-btn'type="login">Log in</button>
+			
 		</form>
 			
 		@endguest
 			<span class="icon-bar"></span>
 			<!-- probably not needed -->
 	</nav>
-	<div class='errors'>
+	<div @if (count($errors) == 0) { hidden } @endif class='errors'>
 		<ul>
 			@foreach ($errors->all() as $error)
 				<li>{{$error}}</li>