Merge pull request #15 from wanderlust-group-project-1/Sandali

feat:Guide-section

app/views/home.view.php

@@ -23,9 +23,11 @@
 <?php require_once('../app/views/sections/hero.php');
 ?>
 
-<?php require_once('../app/views/sections/About.php');
+<?php require_once('../app/views/sections/about.php');
 ?>
 
+<?php require_once('../app/views/sections/guide.php');
+?>
 <!-- <h1> Home page view </h1>
 
 

app/views/sections/About.php

@@ -1,11 +1,10 @@
 <div class="home-container">
     <div class="row">
-        <div class="col col-2">
+        <!-- <div class="col"> -->
+        <div class="col center-all">
             <h1 class="about-title">About us!</h1>
-            <p class="about-description">We're your one-stop solution for hassle-free camping adventures. Say goodbye to equipment woes, wasted effort, and unreliable guides. We connect outdoor enthusiasts with quality gear and trustworthy guides.</p>
-        </div>
-        <div class="col col-2">
-            <img src="<?= ROOT_DIR ?>/assets/images/Mask group.png" alt="Mask group Image">
+            <p class="hero-description">We're your one-stop solution for hassle-free camping adventures.<br> Say goodbye to equipment woes, wasted effort, and unreliable guides.<br> We connect outdoor enthusiasts with quality gear and trustworthy guides.</p>
+            <img class="locked-aspect-ratio" src=" <?= ROOT_DIR ?>/assets/images/Mask group.png" alt="Mask group Image">
         </div>
     </div>
 </div>

app/views/sections/guide.php

@@ -0,0 +1,11 @@
+<div class="guide">
+    <div class="home-container row">
+        <div class="col col-4-3">
+            <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>
+            <div class="section-button"><a href="#">Book now</a></div>
+        </div>
+    </div>
+
+</div>

app/views/sections/hero.php

@@ -4,9 +4,12 @@
             <h1 class="hero-title">Campers,</h1>
             <p class="hero-description"><b>Your Gateway to Outdoor Adventures:</b> <br>
                 Gear Up & Go with Expert Guides!</p>
+            <div class="section-button"><a href="#">Get Started</a></div>
         </div>
         <div class="col col-2">
             <img src="<?= ROOT_DIR ?>/assets/images/hero.png" alt="Hero Image">
         </div>
+
     </div>
+
 </div>

public/assets/css/style.css

@@ -52,6 +52,23 @@
     color: #4C5039;
 }
 
+.section-button {
+    background-color: #F4F4F4; /* Complementary color */
+    color: #4C5039;
+    padding: 10px 20px;
+    width: fit-content;
+    border-radius: 5px;
+    text-decoration: none;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #4C5039;
+}
+.section-button a {
+    text-decoration: none;
+    color: #4C5039;
+}
+
+
 /* Media query for mobile responsiveness */
 @media screen and (max-width: 768px) {
     .nav-menu {
@@ -98,14 +115,30 @@ body {
 }
 
 .col {
+    display: flex;
+    flex-wrap: wrap;
     flex: 1;
     padding: 10px;
+    flex-direction: column;
 }   
 
 .col-2{
     max-width:45%;
 }
 
+.col-4-3{
+    max-width:80%;
+}
+
+.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 */
+}
 
 .home-container {
  margin: 20px 10px;
@@ -114,6 +147,8 @@ body {
     background: #F3F3F3;
     backdrop-filter: blur(67.62544250488281px);}
 
+
+
 .hero {
 
 }
@@ -138,6 +173,41 @@ body {
 }
 
 
+.about-title {
+    color: #4C5039;
+    text-shadow: 0px 2.5296311378479004px 2.5296311378479004px rgba(0, 0, 0, 0.25);
+    font-family: Fredoka;
+    font-size: 80px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 117.9%; /* 136.826px */
+    margin-bottom: 0%!important;
+}
+
+.guide-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: left!important;
+}
+
+.about-subtitle {
+    color:#BCAB86;;
+    font-family: Fredoka;
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 117.9%;
+    margin-bottom: 0%!important;
+}
+
+
 
 /* Login Page */
 
@@ -222,4 +292,5 @@ body {
     margin-top: 10px;
     margin-bottom: 10px;
     font-size: 10px;
-  }
+  }
+