navbar

resources/views/home.antlers.html

 <div class="px-4 py-5" style="height: 120vh;">
 
     <div class="d-flex flex-column position-relative" style="height: 100%;overflow: hidden;">
-        <!-- <nav class="navbar navbar-expand-lg p-0" style="background-color: rgba(0, 0, 0, 0);">
-            <div class="container-fluid p-0">
-              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-              </button>
-              <div class="collapse navbar-collapse d-flex" id="navbarNavDropdown">
-                <ul class="navbar-nav me-auto me-md-0 ms-md-auto">
-                  <li class="nav-item">
-                    <div class="p-3" style="background-color: rgba(0, 0, 0, 0);">
-                        <div class="bg-light trapezium ps-5 pe-4 py-1"><a class="nav-link p-0" href="#">Pricing</a></div>
-                    </div>
-                  </li>
-                  <li class="nav-item">
-                    <div class="p-3" style="background-color: rgba(255, 255, 255, 0);">
-                        <div class="bg-white trapezium-end ps-5 pe-4 py-1"><a class="nav-link p-0" href="#">Pricing</a></div>
-                    </div>
-                  </li>
-                </ul>
-              </div>
-            </div>
-        </nav> -->
 
         <!--TEMP NAVBAR-->
-        <nav class="navbar navbar-expand-lg w-100" style="position: absolute;z-index: 2;background-color: rgba(255, 255, 255, 0.2);">
-            <div class="container-fluid">
-              <a class="navbar-brand py-3 px-5" href="/">
-                <img src="/assets/svg/logo.svg" width="100">
-              </a>
-              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-              </button>
-              <div class="collapse navbar-collapse d-flex" id="navbarNavDropdown">
-                <ul class="navbar-nav me-auto me-md-0 ms-md-auto">
-                  <li class="nav-item mx-3">
-                    <a class="nav-link active fw-bolder font-18" aria-current="page" href="/" style="color: #fff;">Home</a>
-                  </li>
-                  <li class="nav-item mx-3">
-                    <a class="nav-link fw-bolder font-18" href="#" style="color: #fff;">Introduction</a>
-                  </li>
-                  <li class="nav-item mx-3">
-                    <a class="nav-link fw-bolder font-18" href="#" style="color: #fff;">What is Text4u?</a>
-                  </li>
-                  <li class="nav-item mx-3">
-                    <a class="nav-link fw-bolder font-18" href="#" style="color: #159B9B;">Submit</a>
-                  </li>
-                </ul>
-              </div>
+        <nav class="navbar navbar-expand-lg w-100 p-0"
+            style="position: absolute;z-index: 2;background-color: rgba(255, 255, 255, 0);">
+            <div class="container-fluid d-flex align-items-stretch p-0">
+                <a class="navbar-brand py-3 px-5 m-0 bg-white" href="/">
+                    <img src="/assets/svg/logo.svg" width="100">
+                </a>
+
+                <div class="bg-white flex-grow-1">
+                    <!--WHITE SPACE-->
+                </div>
+
+                <div class="d-flex">
+                    <ul class="navbar-nav me-auto me-md-0 ms-md-auto">
+                        <li class="nav-item d-flex" >
+                            <a class="nav-link active fw-bolder font-16 my-auto" aria-current="page" href="/" style="color: #000;">Home</a>
+                        </li>
+                        <li class="nav-item px-4 d-flex">
+                            <a class="nav-link active fw-bolder font-16 my-auto" aria-current="page" href="/" style="color: #000;">Introduction</a>
+                        </li>
+                        <li class="nav-item px-4 d-flex">
+                            <a class="nav-link active fw-bolder font-16 my-auto" aria-current="page" href="/" style="color: #000;">What is Text4u?</a>
+                        </li>
+                        <li class="nav-item px-4 d-flex active">
+                            <a class="nav-link active fw-bolder font-16 my-auto" aria-current="page" href="/">Submit</a>
+                        </li>
+                    </ul>
+                </div>
             </div>
-          </nav>
+        </nav>
 
         <video autoplay muted loop style="width: 100%;">
             <source src="/assets/video/hero.mp4" type="video/mp4">
         </video>
 
-        <div class="w-100 flex-grow-1 row p-0 m-0 position-absolute" style="overflow: hidden;z-index: 1; background: rgba(0, 0, 0, 0.5); height: 100%;">
+        <div class="w-100 flex-grow-1 row p-0 m-0 position-absolute"
+            style="overflow: hidden;z-index: 1; background: rgba(0, 0, 0, 0.5); height: 100%;">
             <div class="col-4 d-none d-lg-flex">
                 <img src="/assets/img/group_21.png" class="img-fluid mt-auto mx-auto" style="height: 75%;" />
             </div>
                         <h1 class="fw-bolder hero-main-text text-white">DATA ANDA BANYAK?</h1>
                     </div>
 
-                    <div class="py-3 px-5 ms-auto mb-4 trapezium-hero" style="width: fit-content;background-color: #BB5C3F;">
-                        <p class="text-white m-0 mx-5 my-2" style="font-weight: 500;">Sentiasa sukar buat retarget marketing terus ke pelanggan?</p>
+                    <div class="py-3 px-5 ms-auto mb-4 trapezium-hero"
+                        style="width: fit-content;background-color: #BB5C3F;">
+                        <p class="text-white m-0 mx-5 my-2" style="font-weight: 500;">Sentiasa sukar buat retarget
+                            marketing terus ke pelanggan?</p>
                     </div>
-                    <div class="py-3 px-5 ms-auto mb-4 trapezium-hero" style="width: fit-content;background-color: #DE9C46;">
-                        <p class="text-white m-0 mx-5 my-2" style="font-weight: 500;">Susah nak reach Database anda dalam satu masa?</p>
+                    <div class="py-3 px-5 ms-auto mb-4 trapezium-hero"
+                        style="width: fit-content;background-color: #DE9C46;">
+                        <p class="text-white m-0 mx-5 my-2" style="font-weight: 500;">Susah nak reach Database anda
+                            dalam satu masa?</p>
                     </div>
                 </div>
             </div>
                 </p>
             </div>
         </div>
-        <div class="bg-info trapezium col-7" style="background: url(/assets/img/path_34.jpg) center center no-repeat; background-size: cover;">
+        <div class="bg-info trapezium col-7"
+            style="background: url(/assets/img/path_34.jpg) center center no-repeat; background-size: cover;">
             <!-- THIS IS THE IMAGE STUFF -->
         </div>
     </div>
 </div>
 
 <div class="container-fluid p-0 m-0">
-    <div class="d-flex flex-column m-0 p-5" style="min-height: 500px; background: url(/assets/img/group_29.jpg) center center no-repeat; background-size: cover;">
+    <div class="d-flex flex-column m-0 p-5"
+        style="min-height: 500px; background: url(/assets/img/group_29.jpg) center center no-repeat; background-size: cover;">
         <p class="font-37 text-white m-0 mb-5" style="font-weight: 500;">
             Rakam Notifikasai Perniagaan Anda
         </p>
         <div class="d-flex">
             <div class="flex-grow-1 p-4">
-                <div class="position-relative" style="padding-top: 85%;background-color: #BB5C3F;border-radius: 25px;border: 8px dashed #DD9C47;">
+                <div class="position-relative"
+                    style="padding-top: 85%;background-color: #BB5C3F;border-radius: 25px;border: 8px dashed #DD9C47;">
                     <div class="position-absolute text-white d-flex" style="top:0; left: 0; width: 100%; height: 100%;">
                         <div class="my-auto px-5">
                             <img class="mb-5" src="/assets/svg/bell.svg" width="40">
-                            <p class="text-white font-37 fw-bolder" style="line-height: 44px;">Notifikasi <br/> secara <br/> terus</p>
+                            <p class="text-white font-37 fw-bolder" style="line-height: 44px;">Notifikasi <br /> secara
+                                <br /> terus</p>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="flex-grow-1 p-4">
-                <div class="position-relative" style="padding-top: 85%;background-color: #BB5C3F;border-radius: 25px;border: 8px dashed #DD9C47;">
+                <div class="position-relative"
+                    style="padding-top: 85%;background-color: #BB5C3F;border-radius: 25px;border: 8px dashed #DD9C47;">
                     <div class="position-absolute text-white d-flex" style="top:0; left: 0; width: 100%; height: 100%;">
                         <div class="my-auto px-5">
                             <img class="mb-5" src="/assets/svg/table.svg" width="40">
-                            <p class="text-white font-37 fw-bolder" style="line-height: 44px;">Pengurusan <br/> database <br/> lebih teratur</p>
+                            <p class="text-white font-37 fw-bolder" style="line-height: 44px;">Pengurusan <br />
+                                database <br /> lebih teratur</p>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="flex-grow-1 p-4">
-                <div class="position-relative" style="padding-top: 85%;background-color: #BB5C3F;border-radius: 25px;border: 8px dashed #DD9C47;">
+                <div class="position-relative"
+                    style="padding-top: 85%;background-color: #BB5C3F;border-radius: 25px;border: 8px dashed #DD9C47;">
                     <div class="position-absolute text-white d-flex" style="top:0; left: 0; width: 100%; height: 100%;">
                         <div class="my-auto px-5">
                             <img class="mb-5" src="/assets/svg/hands-helping.svg" width="40">
-                            <p class="text-white font-37 fw-bolder" style="line-height: 44px;">24/7 bantuan <br/> secara online</p>
+                            <p class="text-white font-37 fw-bolder" style="line-height: 44px;">24/7 bantuan <br />
+                                secara online</p>
                         </div>
                     </div>
                 </div>
 
 <div class="container-fluid p-0 m-0">
     <div class="row m-0" style="background-color: #DED7C4;min-height: 400px;">
-        <div class="col-md-6" style="background: url(/assets/img/rectangle_56.jpg) center center no-repeat; background-size: cover;">
+        <div class="col-md-6"
+            style="background: url(/assets/img/rectangle_56.jpg) center center no-repeat; background-size: cover;">
             <!-- THIS IS THE IMAGE STUFF -->
         </div>
         <div class="col-md-6 px-5 py-4 d-flex flex-column form-container">
                     <h4 class="fw-bold">Hubungi kami untuk mengetahui lebih lanjut :</h4>
                 </div>
                 <form id="enquiry-form" class="mx-auto" style="width: 70%;">
-                  <div class="form-group">
-                    <label for="name">Nama Perniagaan :</label>
-                    <input type="text" id="name" name="name" required>
-                  </div>
-                  <div class="form-group">
-                    <label for="email">Email :</label>
-                    <input type="email" id="email" name="email" required>
-                  </div>
-                  <div class="form-group">
-                    <label for="phone">No. Telefon :</label>
-                    <input type="tel" id="phone" name="phone" required>
-                  </div>
-                  <button type="submit" class="submit-btn">Submit</button>
+                    <div class="form-group">
+                        <label for="name">Nama Perniagaan :</label>
+                        <input type="text" id="name" name="name" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="email">Email :</label>
+                        <input type="email" id="email" name="email" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="phone">No. Telefon :</label>
+                        <input type="tel" id="phone" name="phone" required>
+                    </div>
+                    <button type="submit" class="submit-btn">Submit</button>
                 </form>
             </div>
         </div>
 
             <img class="mb-4 ms-5" src="/assets/svg/logo.svg" width="120">
 
-            <p class="font-16 mb-5" style="line-height: 16px;font-weight:600;"> Bold flavours, savoury snacks,<br/> Taste adventures.</p>
+            <p class="font-16 mb-5" style="line-height: 16px;font-weight:600;"> Bold flavours, savoury snacks,<br />
+                Taste adventures.</p>
 
             <div class="d-flex flex-wrap mt-5" style="height: fit-content;">
                 <img class="me-3" src="/assets/svg/linkedin.svg" width="20">
                             <img class="ms-auto me-2" src="/assets/svg/mapmark.svg" width="20">
                         </div>
                         <div class="col">
-                            <p class="font-16">Text4U Sdn Bhd, No.89 Jalan KP 7 <br/> Kawasan Perindustrian, Kota Puteri, 48100 Batu Arang, Selangor</p>
+                            <p class="font-16">Text4U Sdn Bhd, No.89 Jalan KP 7 <br /> Kawasan Perindustrian, Kota
+                                Puteri, 48100 Batu Arang, Selangor</p>
                         </div>
                     </div>
                 </li>
 
             <p class="fw-bold font-21">Enjoy Subscriber Perks</p>
 
-            <p class="font-16 mb-4">Sign up for emails and receive early access to new arrivals, <br/> sales, event and more.</p>
+            <p class="font-16 mb-4">Sign up for emails and receive early access to new arrivals, <br /> sales, event and
+                more.</p>
 
             <div class="input-group border-0 mb-5" style="overflow: hidden;">
-                <input type="text" class="form-control border-0 px-4 py-3" placeholder="Your email address" style="border-radius: 30px 0 0 30px;background-color: #F9F9F9;">
-                <button class="btn btn-outline-secondary text-white border-0 px-4 py-3" type="button" id="button-addon2" style="border-radius: 0 30px 30px 0px;background-color: #BB5C3F;">Subscribe</button>
+                <input type="text" class="form-control border-0 px-4 py-3" placeholder="Your email address"
+                    style="border-radius: 30px 0 0 30px;background-color: #F9F9F9;">
+                <button class="btn btn-outline-secondary text-white border-0 px-4 py-3" type="button" id="button-addon2"
+                    style="border-radius: 0 30px 30px 0px;background-color: #BB5C3F;">Subscribe</button>
             </div>
 
 
 
 <!-- COPYRIGHT -->
 <div class="container-fluid p-0 m-0">
-    <div class="row m-0 p-0 d-flex bg-light" >
+    <div class="row m-0 p-0 d-flex bg-light">
         <div class="d-flex p-0">
             <div class=" mx-auto d-flex px-5 py-3">
                 <div class="my-auto mx-auto me-4">
 
 
 <!-- Button trigger modal -->
-<button id="triggerModal" type="button" style="max-height: 1px; max-width: 1px;position: absolute; top: -100px; left: -100px;" data-bs-toggle="modal" data-bs-target="#enquiryModal"> </button>
+<button id="triggerModal" type="button"
+    style="max-height: 1px; max-width: 1px;position: absolute; top: -100px; left: -100px;" data-bs-toggle="modal"
+    data-bs-target="#enquiryModal"> </button>
 
 <!-- Modal -->
 <div class="modal fade" id="enquiryModal" tabindex="-1">
-  <div class="modal-dialog modal-dialog-centered">
-    <div class="modal-content">
-      <div class="modal-body text-center">
-          <p>Your Enquiry has been submitted, we will contact you soon</p>
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-      </div>
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-body text-center">
+                <p>Your Enquiry has been submitted, we will contact you soon</p>
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            </div>
+        </div>
     </div>
-  </div>
 </div>
 <script>
     let enquiryForm = document.getElementById("enquiry-form")
 
-      enquiryForm.addEventListener('submit', async function (e) {
-      e.preventDefault(); // Prevent form from submitting the traditional way
-
-      // Gather form data
-      const formData = {
-        name: document.getElementById('name').value,
-        email: document.getElementById('email').value,
-        phone: document.getElementById('phone').value
-      };
-
-      try {
-        // Send POST request
-        const response = await fetch('/api/enquiry/', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify(formData) // Convert form data to JSON
-        });
-
-        // Parse JSON response
-        const result = await response.json();
-
-        // Handle the response
-        if (response.ok) {
-
-          console.log('Enquiry submitted successfully:', result);
-          document.getElementById('name').value = ""
-          document.getElementById('email').value = ""
-          document.getElementById('phone').value = ""
-          document.getElementById("triggerModal").click()
-
-        } else {
-          console.error('Submission failed:', result);
-          alert('Submission failed. Please try again.');
+    enquiryForm.addEventListener('submit', async function (e) {
+        e.preventDefault(); // Prevent form from submitting the traditional way
+
+        // Gather form data
+        const formData = {
+            name: document.getElementById('name').value,
+            email: document.getElementById('email').value,
+            phone: document.getElementById('phone').value
+        };
+
+        try {
+            // Send POST request
+            const response = await fetch('/api/enquiry/', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(formData) // Convert form data to JSON
+            });
+
+            // Parse JSON response
+            const result = await response.json();
+
+            // Handle the response
+            if (response.ok) {
+
+                console.log('Enquiry submitted successfully:', result);
+                document.getElementById('name').value = ""
+                document.getElementById('email').value = ""
+                document.getElementById('phone').value = ""
+                document.getElementById("triggerModal").click()
+
+            } else {
+                console.error('Submission failed:', result);
+                alert('Submission failed. Please try again.');
+            }
+        } catch (error) {
+            console.error('Error occurred:', error);
+            alert('An error occurred while submitting your enquiry.');
         }
-      } catch (error) {
-        console.error('Error occurred:', error);
-        alert('An error occurred while submitting your enquiry.');
-      }
     });
 
 </script>

resources/views/layout.antlers.html

         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous" defer></script>
         <style>
             .trapezium-nav-end {
-                background-color: #4CAF50; /* Adjust the color as needed */
                 clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
             }
 
             .trapezium-nav {
-                background-color: #4CAF50; /* Adjust the color as needed */
                 clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
             }
 
                 color: #396868; /* Change color on hover */
             }
 
+            .nav-item{
+                background-color: white;
+            }
+
+            .nav-item.active{
+                background-color: rgba(0, 0, 0, 0.2) !important;
+            }
+
+            .nav-item a{
+                color: #000 !important;
+            }
+
+            .nav-item.active a{
+                color: #159B9B !important;
+                background-color: #fff;
+            }
+