Position and style features and panel sections

resources/scss/_vars.scss

@@ -6,10 +6,13 @@ $theme-colors: (
 	"red-orangish": #de493b,
 	"blue": #0736a4,
 	"light-blue": #a4bfd9,
-	"blue-alternate": #1877f2,
-	"orange": #ec9f05 ,
-	"brand-orange": #ec9f05 ,
+	"medium-blue": #1877f2,
+	"dark-blue": #09c6f9,
+	"orange": #ec9f05,
+	"dark-orange": #ff4e00,
+	"brand-orange": #f67602,
 	"grey": #e6ebf1,
+	"light-grey": #e9e9e9,
 	"faded-text": #425466,
 	"faded-text2": #6c757d,
 );
@@ -45,3 +48,34 @@ $theme-colors: (
 	background-color: darkenColor($col);
 	}
   }
+@mixin special-button($start, $end) {
+	font-family: "PatuaOne";
+	border: none;
+	border-radius: 4px;
+	padding: 3px;
+	color: white;
+	background-color: #045de9;
+	background-image: linear-gradient(315deg, map.get($theme-colors, $start) 0%, map.get($theme-colors, $end) 74%);
+}
+
+@mixin transparent-button {
+	text-align: center;
+	font-size: 20px;
+	border: 2px solid white;
+	border-radius: 4px;
+	padding: 10px;
+	background-color: transparent;
+	color: white;
+	&:hover {
+		background-color: white;
+		color: map.get($theme-colors, "orange");
+	}
+}
+
+@mixin hovering {
+	padding: 18px 9px;
+	border-radius: 4px;
+	background: white;
+	box-shadow: 7px 10px 8px rgb(156 166 175 / 22%);
+	transition: transform 0.2s;
+}

resources/scss/main.scss

@@ -21,8 +21,10 @@ html body {
 }
 
 section {
+	position: relative;
 	padding-top: 3em;
 	padding-bottom: 3em;
+	overflow: hidden;
 }
 h1 {
 	color: white;
@@ -30,15 +32,12 @@ h1 {
 
 h2 {
 	color: vars.getColor("brand-orange");
-}
-
-h2, h3 {
 	text-align: center;
 }
 
-h4 {
-	color: vars.getColor("faded-text2");
-	text-transform: uppercase;
+h3 {
+	color: vars.getColor("faded-text");
+	// text-transform: uppercase;
 }
 
 ul {
@@ -122,7 +121,7 @@ nav form input,label {
 
 div.landing-hero {
 	top: 0;
-	height: 60vh;
+	height: 50em;
 	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%);
@@ -185,39 +184,17 @@ form.login input {
 }
 
 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, vars.getColor("blue-alternate") 0%, #09c6f9 74%);
-	// background-image: linear-gradient(315deg, #045de9 0%, #09c6f9 74%);
-	// background-image: radial-gradient(circle, #045de9, #007cf8, #0097fd, #00b0fd, #00c6f9);
+	@include vars.special-button("medium-blue", "dark-blue");
 }
 
 .hero-filter .register-btn {
-	text-align: center;
+	@include vars.transparent-button;
 	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");
-	}
 }
 
 div.blue-background {
@@ -235,7 +212,7 @@ section.about-us p {
 	margin-left: auto;
 	margin-right: auto;
 	border-top: 2px solid vars.getColor("grey");
-	// border-bottom: 2px solid vars.getColor("grey");
+	border-bottom: 2px solid vars.getColor("grey");
 	padding: 15px;
 	background-color: #0d324d;
 	color: white;
@@ -245,13 +222,15 @@ section.services-cards {
 	// margin-bottom: 0;
 	background-color: lightgrey;
 	padding-bottom: 4em;
-	background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #e9e9e9 50%, #e9e9e9  100%);
+	background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #e9e9e9 50%, vars.getColor("light-grey")  100%);
 }
 section.services-cards .cards{
 	display: flex;
+	flex-flow: wrap;
 	margin-top: 2em;
-	justify-content: space-between;
-	max-width: 950px;
+	gap: 25px;
+	justify-content: center;
+	max-width: 1050px;
 	margin-left: auto;
 	margin-right: auto;
 	text-align: center;
@@ -268,10 +247,7 @@ section.services-cards h2 {
 section.services-cards .card {
 	width: 280px;
 	height: 350px;
-	margin-left: 20px;
-	margin-right: 20px;
 	padding: 18px 9px;
-	// border: 2px solid grey;
 	border-radius: 4px;
 	background: white;
 	box-shadow: 7px 10px 8px rgb(156 166 175 / 22%);
@@ -288,13 +264,92 @@ section.services-cards img {
 }
 
 section.features-info {
-	min-height: 40em;
-	background: radial-gradient(ellipse at left, #777, #111);
+	height: 55em;
+	background: radial-gradient(ellipse at left, #fff, vars.getColor("light-grey") 80%);
+}
+
+.circle-prop {
+	height: 100%;
+	overflow: hidden;
+	width: 100%;
+	position: relative;
+	// transform: translateX(-10em);
+}
+
+.circle-prop svg {
+	width: 50%;
+}
+
+.features-info img {
+	width: 400px;
+	position: absolute;
+	top: 15%;
+	right: 4%;
 }
 
-img.circle-prop {
-	height: 35em;
-	// width: 50em;
+div.info-cards {
 	position: absolute;
-	transform: translateX(-10em);
+	top: 10em;
+	margin-left: 20%;
+	width: 70%;
+}
+
+.info-card {
+	margin-bottom: 40px;
+
+	&:nth-of-type(2) {
+		margin-left: 13%;
+	}
+
+	&:nth-of-type(3) {
+		margin-left: 10%;
+	}
+
+	&:nth-of-type(4) {
+		margin-left: 5%;
+	}
+
+	p {
+		max-width: 20em;
+		background: white;
+		padding: 5px;
+		border-radius: 4px;
+		text-align: center;
+		color: vars.getColor("faded-text2");
+		// border: 2px solid vars.getColor("medium-orange");
+		@include vars.hovering;
+
+	}
+}
+
+section.panel-infos {
+	height: 40em;
+}
+
+section.panel-infos img.panel-preview {
+	margin-top: 4em;
+	height: 80%;
+	position: absolute;
+	right: 50%;
+}
+
+.panel-info {
+	left: 50%;
+	width: 50%;
+	margin-left: auto;
+	margin-top: 4em;
+}
+
+.panel-info img {
+	width: 50px;
+	height: 50px;
+}
+
+.panel-info p {
+	color: vars.getColor("faded-text2");
+}
+
+section.benefits-info div {
+	margin: 2em auto;
+	max-width: 40em;
 }

resources/views/home.blade.php

@@ -35,7 +35,8 @@
 	<ul>
 		<li>Elit odit voluptas unde ex adipisicing! Nulla</li>
 		<li>Ipsum quibusdam magni laboriosam sit.</li>
-		<li>Adipisicing nisi porro voluptatum excepturi repudiandae Corrupti quam</li>
+		<li>Adipisicing nisi porro voluptatum excepturi repudiandae Corrupti
+		quam</li>
 		<li>Elit repellat consequuntur.</li>
 	</ul>
 	</div>
@@ -63,32 +64,61 @@
 		</div></div>
 	</section>
 	<section class='features-info'>
-	<h2>Why we're the best</h2>
-	<img src="/images/circle.svg" class="circle-prop"></img>
-	<div class="card">Amet officiis obcaecati et porro!</div>
-		<div class="card">Dolor minus corporis labore error.</div>
-		<div class="card">Ipsum nesciunt facilis veniam eos.</div>
-		<div class="card">Ipsum adipisicing blanditiis magnam quasi sunt?</div>
-		<div class="card">Sit quod nulla minima dignissimos itaque.</div>
-		<div class="card">Sit quod nulla minima dignissimos itaque.</div>
+	<h2>Why We Are the Best</h2>
+	<div class="circle-prop">
+	<svg height="100%" preserveAspectRatio="none" viewBox="0 0 500 500"fill='white' version="1.1" id="Layer_1" x="0px" y="0px"
+		 xml:space="preserve">
+			<path stroke-width="20" fill="none" stroke="#ddd" d="M0,10 C400,0,500,256,250,500"/>
+			<!- <path fill="none" stroke="white" d="M256,10C115.03,0,0,115.05,0,256c0,140.97,115.05,256,256,256c140.97,0,256-115.05,256-256C512,115.03,396.95,0,256,0z "/> -->
+	</svg>
+	<img src="/images/desk.svg" alt="teamwork">
+	</div>
+<div class="info-cards">
+	<div class="info-card"><p>
+	Dolor sint maiores soluta culpa voluptatem ea Similique facere perspiciatis in quos suscipit. Atque velit dolor repudiandae nesciunt ullam Blanditiis asperiores eius quos aliquid ex Rem rem quo facilis commodi.
+	</p>
+</div>
+	<div class="info-card"><p>
+	Elit aliquam velit ad incidunt in porro laborum? Unde eligendi dolores ad iure quia doloremque! Aliquid pariatur autem sed iure ipsam? Et ipsam architecto dolorum sapiente facilis quos Aut quasi</p>
+</div>
+	<div class="info-card"><p>
+	Ipsum incidunt non illum mollitia omnis! Minima possimus eveniet autem non modi? Molestiae aspernatur provident at mollitia veniam? Ad aliquid esse ipsam animi minus Excepturi est unde atque debitis consectetur.
+</p>
+</div>
+	<div class="info-card"><p>
+	Consectetur repudiandae ad blanditiis non corrupti Aliquam quae eveniet corrupti quibusdam nisi maiores Dignissimos quas est explicabo laudantium excepturi Officia fugit fugiat sit officia sed ipsa accusantium? Minus eum porro</p>
+</div></div>
 	</section>
-	<section class='faq'>
+	<section class='panel-infos'>
 		<h2>A User-Friendly Control Panel</h2>
-		<div class="card">Amet officiis obcaecati et porro!</div>
-		<div class="card">Dolor minus corporis labore error.</div>
-		<div class="card">Ipsum nesciunt facilis veniam eos.</div>
-		<div class="card">Ipsum adipisicing blanditiis magnam quasi sunt?</div>
-		<div class="card">Sit quod nulla minima dignissimos itaque.</div>
-		<div class="card">Sit quod nulla minima dignissimos itaque.</div>
+		<img class="panel-preview" src="/images/host-panel.webp" alt="panel-preview">
+		<div class="panel-info">
+		<img src="/images/tap.svg" alt="">
+		<h3>Easy to Use</h3>
+		<p>Ipsum aperiam magni ad quos lorem Aperiam quia</p>
+		</div>
+		<div class="panel-info">
+		<img src="/images/goal.svg" alt="">
+		<h3>Powerful</h3>
+		<p>Ipsum aperiam magni ad quos lorem Aperiam quia</p>
+		</div>
+		<div class="panel-info">
+		<img src="/images/diagram.svg" alt="">
+		<h3>Scalable</h3>
+		<p>Ipsum aperiam magni ad quos lorem Aperiam quia</p>
+		</div>
 	</section>
-	<section class='faq'>
-		<h2>Why Buy Views and Engagements?</h2>
-		<div class="card">Amet officiis obcaecati et porro!</div>
-		<div class="card">Dolor minus corporis labore error.</div>
-		<div class="card">Ipsum nesciunt facilis veniam eos.</div>
-		<div class="card">Ipsum adipisicing blanditiis magnam quasi sunt?</div>
-		<div class="card">Sit quod nulla minima dignissimos itaque.</div>
-		<div class="card">Sit quod nulla minima dignissimos itaque.</div>
+	<section class='benefits-info'>
+		<h2>Benefits of Buying Views</h2>
+		<div>
+		<p>
+			Amet voluptatem quod tenetur in tempora! Ducimus nobis praesentium dolorum culpa corrupti Ipsum enim a vel veniam assumenda. Consequatur animi praesentium debitis aliquam autem? Optio consectetur nostrum rerum et exercitationem? lorem
+		</p>
+		<p>
+			Amet ratione a atque libero cumque, tempore, corporis! Dolor debitis aut error provident suscipit. Sunt quam asperiores dicta ab nobis? Laboriosam accusamus officia expedita quidem possimus Dolor labore ullam omnis.
+		</p>
+		
+		</div>
 	</section>
 	<section class='faq'>
 		<h2>FAQ</h2>