feat: Blog section

app/views/home.view.php

@@ -28,6 +28,12 @@
 
 <?php require_once('../app/views/sections/guide.php');
 ?>
+
+<?php require_once('../app/views/sections/rental-service.php');
+?>
+
+<?php require_once('../app/views/sections/blog.php');
+?>
 <!-- <h1> Home page view </h1>
 
 

app/views/sections/blog.php

@@ -0,0 +1,14 @@
+<div class="guide">
+    <div class="home-container row">
+        <div class="col col-2">
+            <h2 class="about-subtitle">Blogs</h2>
+            <h1 class="guide-title">Explore: Add Your Adventure!</h1>
+            <p class="hero-description">Dive into our blog section for insightful tips, adventure stories, and expert advice to enhance your camping experience. Add your own blog filled with outdoor experiences.</p>
+            <div class="section-button"><a href="#">Blogs</a></div>
+        </div>
+        <div class="col col-2">
+            <img class=" locked-aspect-ratio" src=" <?= ROOT_DIR ?>/assets/images/guide.png" alt="Mask group Image">
+        </div>
+    </div>
+
+</div>

app/views/sections/guide.php

@@ -1,11 +1,14 @@
 <div class="guide">
     <div class="home-container row">
-        <div class="col col-4-3">
-            <h2 class="about-subtitle">Guides </h2>
+        <div class="col col-2">
+            <h2 class="about-subtitle">Guides</h2>
             <h1 class="guide-title">Find Guides with Ease!</h1>
-            <p class="hero-description"> Find your ideal camping guides to simplify your<br> outdoor adventures with ease, ensuring a <br>memorable and stress-free experience.</p>
+            <p class="hero-description">Find your ideal camping guides to simplify your<br> outdoor adventures with ease, ensuring a <br>memorable and stress-free experience.</p>
             <div class="section-button"><a href="#">Book now</a></div>
         </div>
+        <div class="col col-2">
+            <img class=" locked-aspect-ratio" src=" <?= ROOT_DIR ?>/assets/images/guide.png" alt="Mask group Image">
+        </div>
     </div>
 
 </div>

app/views/sections/rental-service.php

@@ -0,0 +1,17 @@
+<div class="guide">
+    <div class="home-container row">
+
+        <div class="col col-2">
+            <img src="<?= ROOT_DIR ?>/assets/images/Mask group.png" alt="Hero Image">
+        </div>
+        <div class="col col-4-3-end">
+            <h2 class="about-subtitle">Rental Services</h2>
+            <h1 class="rental-title">Diverse Gear Selection!</h1>
+            <p class="hero-description">Explore a diverse range of camping equipment in<br>one place, making your outdoor adventures<br>simpler and more convenient.</p>
+            <div class="center-right">
+                <div class="section-button "><a href="#">Book now</a></div>
+            </div>
+        </div>
+    </div>
+
+</div>

public/assets/css/style.css

@@ -130,14 +130,33 @@ body {
     max-width:80%;
 }
 
+.col-4-3-end{
+    justify-content:right!important;
+    text-align: right!important;
+    align-items: right!important;
+    padding-right: 10%;
+}
+
 .center-all {
     justify-content: center!important;
     text-align: center!important;
     align-items: center;
 }
 .locked-aspect-ratio {
-  width: 50%; /* Automatically calculates width to maintain aspect ratio */
-  height: auto; /* Set your desired height */
+  width: 50%;
+  height: auto; 
+}
+
+.center-right {
+    justify-content: right!important;
+    text-align: right!important;
+    align-items: right;
+}
+
+.center-left {
+    justify-content: left!important;
+    text-align: left!important;
+    align-items: left;
 }
 
 .home-container {
@@ -197,6 +216,21 @@ body {
     text-align: left!important;
 }
 
+.rental-title {
+    color: #4C5039;
+    text-shadow: 0px 2.5296311378479004px 2.5296311378479004px rgba(0, 0, 0, 0.25);
+    font-family: Fredoka;
+    font-size: 79px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 117.9%; /* 136.826px */
+    margin-bottom: 0%!important;
+    margin-top: 0%!important;    
+    text-align: right!important;
+}
+
+
+
 .about-subtitle {
     color:#BCAB86;;
     font-family: Fredoka;
@@ -209,6 +243,7 @@ body {
 
 
 
+
 /* Login Page */
 
 .login-container {