Use mobile friendly images in landing page

resources/scss/main.scss

@@ -356,22 +356,29 @@ div.info-cards {
 }
 
 section.panel-infos {
-	height: 40em;
+	min-height: 40em;
 	margin-top: 5em;
 	margin-bottom: 5em;
+	display: flex;
+	flex-flow: wrap;
+	align-items: center;
+	justify-content: center;
+	gap: 20px;
+
+	.panel-preview {
+		// box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+		@include vars.hovering;
+		padding: 0;
+	}
 }
 
-section.panel-infos img.panel-preview {
-	margin-top: 4em;
-	height: 80%;
-	position: absolute;
-	right: 50%;
+.panel-infos h2 {
+	width: 100%;
 }
 
+
 .panel-info {
-	left: 50%;
 	width: 50%;
-	margin-left: auto;
 	margin-top: 4em;
 }
 
@@ -411,7 +418,7 @@ section.faq-info .collapsibles {
 	display: flex;
 	flex-flow: wrap;
 	gap: 2em;
-	justify-content: space-around;
+	justify-content: center;
 	max-width: 65em;
 	width: fit-content;
 	margin-left: auto;
@@ -1000,6 +1007,7 @@ main.panel {
 		color: black;
 	}
 }
+
 .menu-slider {
 	width: 55%;
 	div {

resources/views/home.blade.php

@@ -78,7 +78,7 @@
 			<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="img/teamwork.png" alt="teamwork">
+	<img src="img/teamwork2.png" alt="teamwork">
 	</div>
 <div class="info-cards">
 	<div class="info-card"><p>
@@ -108,6 +108,7 @@
 	<section class='panel-infos'>
 		<h2>A User-Friendly Control Panel</h2>
 		<img class="panel-preview" src="/images/panel-preview.png" alt="panel-preview">
+		<div class="info-items">
 		<div class="panel-info">
 		<img src="./img/tap.svg" alt="">
 		<h3>Easy to Use</h3>
@@ -123,6 +124,7 @@
 		<h3>Scalable</h3>
 		<p>Ipsum aperiam magni ad quos lorem Aperiam quia</p>
 		</div>
+		<div>
 	</section>
 	<section class='benefits-info'>
 		<h2>Benefits of Buying Views</h2>