contact us page done

content/collections/pages/contact.md

@@ -0,0 +1,8 @@
+---
+id: f2363681-10ef-4b90-b2e3-3262234cf5be
+blueprint: page
+title: Contact
+template: contact
+updated_by: ab0729b7-bf3b-4b76-930d-938ff5d0a937
+updated_at: 1710649138
+---

content/collections/pages/download.md

@@ -0,0 +1,8 @@
+---
+id: a1a53da5-7715-4eaa-99f0-cfeb8e0f8092
+blueprint: page
+title: Download
+template: download
+updated_by: ab0729b7-bf3b-4b76-930d-938ff5d0a937
+updated_at: 1710648926
+---

content/globals/company_profile.yaml

@@ -1,7 +1,7 @@
 title: 'Company profile'
 data:
   address: '<p>RRI Football Park LGM Sungai Buloh, <br>Jalan Sungai Buloh, PJU4 47000 <br>Petaling Jaya, Selangor, Malaysia</p>'
-  phone_no: '+0122274616'
+  phone_no: '+60122274616'
   email_office: help@thebola.club
   site_url: 'https://thebola.club/'
   facebook_link: 'https://www.facebook.com/'

content/trees/collections/pages.yaml

@@ -5,6 +5,10 @@ tree:
     entry: 74666b69-45fd-44d0-a7c5-ae56983b63a0
   -
     entry: 80e50847-bb80-4980-a9df-5ffbc9b8dc86
+  -
+    entry: a1a53da5-7715-4eaa-99f0-cfeb8e0f8092
+  -
+    entry: f2363681-10ef-4b90-b2e3-3262234cf5be
   -
     entry: 8d906fcf-8653-4839-bd17-ea8921ffe01b
   -

public/css/main.css

@@ -2,6 +2,7 @@
 @import url(https://fonts.googleapis.com/css?family=Poppins);
 :root {
     --primary-clr: #67eb47;
+    --disable-clr: #243e1d;
     --dark-clr: #000;
     --light-clr: #fff;
 }
@@ -39,6 +40,13 @@ p {
     max-width: -moz-fit-content;
     max-width: fit-content;
     border: none;
+    font-size: clamp(18px,1vw,23px);
+    font-weight: 500;
+    padding: 0.5rem 3rem;
+}
+
+.db-btn[disabled]{
+    background-color: var(--disable-clr) !important;
 }
 
 .db-h3 {
@@ -65,11 +73,16 @@ p {
     width: 100%;
 }
 
+.page-highlight{
+    padding: 4rem 3rem;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center top;
+}
+
 .section-2 {
     padding: 4rem 3rem;
     background-size: cover;
-    padding-top: 10rem;
-    padding-bottom: 5rem;
     background-repeat: no-repeat;
     background-position: center top;
 }
@@ -82,6 +95,13 @@ p {
     border: 1px solid gray;
 }
 
+.section-8{
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: right top;
+    padding: 7.5rem 3rem;
+}
+
 .db-input {
     background-color: black;
     padding: 1.125rem 0;
@@ -92,13 +112,6 @@ p {
     font-size: 18px;
 }
 
-.section-8{
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: right top;
-    padding: 7.5rem 3rem;
-}
-
 .db-input::-moz-placeholder {
     color: var(--light-clr);
     opacity: 0.5; /* Firefox */
@@ -113,6 +126,10 @@ p {
     outline: none;
 }
 
+.db-button{
+
+}
+
 /* HERO - SECTION 1*/
 .hero-text-highlight {
     font-size: 2.3rem;

public/js/main.js

@@ -11632,6 +11632,31 @@ var API = /*#__PURE__*/function () {
         return console.log(err);
       });
     }
+  }, {
+    key: "enquiry",
+    value: function enquiry(_ref2, _callback) {
+      var email = _ref2.email,
+        name = _ref2.name,
+        message = _ref2.message;
+      var url = "".concat(this.prefix).concat(this.url, "/public/enquiry");
+      fetch(url, {
+        method: "POST",
+        headers: {
+          'Content-Type': 'application/json;charset=utf-8'
+        },
+        body: JSON.stringify({
+          contact_email: email,
+          contact_name: name,
+          message: message
+        })
+      }).then(function (response) {
+        return response.json();
+      }).then(function (data) {
+        return _callback(data);
+      })["catch"](function (err) {
+        return console.log(err);
+      });
+    }
   }]);
   return API;
 }();
@@ -11649,6 +11674,40 @@ $(document).ready(function () {
     var redirectlink = $(this).data('href');
     location.href = redirectlink;
   });
+  $('#contact-form').on('submit', function (e) {
+    e.preventDefault();
+    var name = $(this).find("#name").val();
+    var email = $(this).find("#email").val();
+    var message = $(this).find("#message").val();
+    var submitButton = $(this).find('#submitButton');
+    var loadingSpan = document.createElement('span');
+    $(submitButton).prop("disabled", true);
+    $(loadingSpan).attr("role", "status");
+    $(loadingSpan).attr("aria-hidden", "true");
+    $(loadingSpan).addClass("spinner-border spinner-border-sm");
+    submitButton.text("Sending ");
+    $(submitButton).append(loadingSpan);
+    var _callback = function _callback(resp) {
+      var status = resp.status;
+      if (status === "Success") {
+        submitButton.text("Success");
+        $("#name").val("");
+        $("#email").val("");
+        $("#message").val("");
+      } else {
+        submitButton.text("Fail");
+      }
+      setTimeout(function () {
+        $(submitButton).prop("disabled", false);
+        submitButton.text("Submit");
+      }, 1000);
+    };
+    api.enquiry({
+      name: name,
+      email: email,
+      message: message
+    }, _callback);
+  });
 
   // this section is for booking page
   //check if booking section exist in any page
@@ -11702,11 +11761,11 @@ $(document).ready(function () {
       $("#input-booking-slot").children(".select-value").remove();
       setTimeout(function () {
         // append slot list
-        bookingRules[dayName].forEach(function (_ref2) {
-          var end_time = _ref2.end_time,
-            start_time = _ref2.start_time,
-            price = _ref2.price,
-            id = _ref2.id;
+        bookingRules[dayName].forEach(function (_ref3) {
+          var end_time = _ref3.end_time,
+            start_time = _ref3.start_time,
+            price = _ref3.price,
+            id = _ref3.id;
           var newOption = document.createElement('option');
           $(newOption).attr("id", id);
           $(newOption).addClass("select-value");

resources/css/main.css

@@ -3,6 +3,7 @@
 
 :root {
     --primary-clr: #67eb47;
+    --disable-clr: #243e1d;
     --dark-clr: #000;
     --light-clr: #fff;
 }
@@ -39,6 +40,13 @@ p {
     border-radius: 50px;
     max-width: fit-content;
     border: none;
+    font-size: clamp(18px,1vw,23px);
+    font-weight: 500;
+    padding: 0.5rem 3rem;
+}
+
+.db-btn[disabled]{
+    background-color: var(--disable-clr) !important;
 }
 
 .db-h3 {
@@ -65,11 +73,16 @@ p {
     width: 100%;
 }
 
+.page-highlight{
+    padding: 4rem 3rem;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center top;
+}
+
 .section-2 {
     padding: 4rem 3rem;
     background-size: cover;
-    padding-top: 10rem;
-    padding-bottom: 5rem;
     background-repeat: no-repeat;
     background-position: center top;
 }
@@ -82,6 +95,13 @@ p {
     border: 1px solid gray;
 }
 
+.section-8{
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: right top;
+    padding: 7.5rem 3rem;
+}
+
 .db-input {
     background-color: black;
     padding: 1.125rem 0;
@@ -92,13 +112,6 @@ p {
     font-size: 18px;
 }
 
-.section-8{
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: right top;
-    padding: 7.5rem 3rem;
-}
-
 .db-input::placeholder {
     color: var(--light-clr);
     opacity: 0.5; /* Firefox */
@@ -108,6 +121,10 @@ p {
     outline: none;
 }
 
+.db-button{
+
+}
+
 /* HERO - SECTION 1*/
 .hero-text-highlight {
     font-size: 2.3rem;

resources/js/main.js

@@ -27,7 +27,26 @@ export default class API {
             .then(response => response.json())
             .then(data => _callback(data) )
             .catch(err => console.log(err))
+    }
+
+    enquiry({ email, name, message }, _callback){
+
+        let url = `${this.prefix}${this.url}/public/enquiry`;
 
+        fetch(url,{
+            method: "POST",
+            headers: {
+                'Content-Type': 'application/json;charset=utf-8',
+            },
+            body: JSON.stringify({
+                contact_email: email,
+                contact_name: name,
+                message
+            })
+        } )
+            .then(response => response.json())
+            .then(data => _callback(data) )
+            .catch(err => console.log(err))
     }
 }
 
@@ -51,6 +70,43 @@ $(document).ready(function () {
         location.href = redirectlink;
     })
 
+    $('#contact-form').on('submit', function(e){
+        e.preventDefault();
+        let name = $(this).find("#name").val();
+        let email = $(this).find("#email").val();
+        let message = $(this).find("#message").val();
+        let submitButton = $(this).find('#submitButton');
+        let loadingSpan = document.createElement('span');
+
+        $(submitButton).prop("disabled",true);
+        $(loadingSpan).attr("role", "status");
+        $(loadingSpan).attr("aria-hidden", "true");
+        $(loadingSpan).addClass("spinner-border spinner-border-sm");
+        submitButton.text("Sending ");
+        $(submitButton).append(loadingSpan)
+
+        const _callback = (resp) => {
+
+            let {status} = resp
+            if(status === "Success"){
+                submitButton.text("Success");
+                $("#name").val("");
+                $("#email").val("");
+                $("#message").val("");
+            } else {
+                submitButton.text("Fail");
+            }
+
+            setTimeout(()=>{
+                $(submitButton).prop("disabled",false);
+                submitButton.text("Submit");
+            },1000)
+        }
+
+        api.enquiry({name, email, message}, _callback)
+
+    })
+
     // this section is for booking page
     //check if booking section exist in any page
     let bookingContainer = $('#booking-section');

resources/views/article/index.antlers.html

@@ -1,5 +1,5 @@
 <section>
-    <div class="text-md-center text-light section-2" style="background-image: url(./assets/image/dbparticle2.png);">
+    <div class="text-md-center text-light page-highlight" style="background-image: url(./assets/image/dbparticle2.png);">
         <div class="container-fluid p-0 m-0" data-aos="zoom-in" >
             <p class="db-h3 text-highlight">News</p>
             <p class="mx-auto p-0 about-paragraph db-h5">You can book benue and field to organize your matches according to your preferred date and time.</p>

resources/views/booking.antlers.html

@@ -1,5 +1,5 @@
 <section>
-    <div class="text-md-center text-light section-2" style="background-image: url(./assets/image/dbparticle2.png);">
+    <div class="text-md-center text-light page-highlight" style="background-image: url(./assets/image/dbparticle2.png);">
         <div class="container-fluid p-0 m-0" data-aos="zoom-in" >
             <p class="db-h3 text-highlight">Venues</p>
             <p class="mx-auto p-0 about-paragraph db-h5">You can book venue and field to organize our matches according to you preferred date and time</p>

resources/views/contact.antlers.html

@@ -0,0 +1,26 @@
+<section>
+    <div class="text-md-center text-light page-highlight" style="background-image: url(./assets/image/dbparticle2.png);">
+        <div class="container-fluid p-0 m-0" data-aos="zoom-in" >
+            <p class="db-h3 text-highlight">Contact</p>
+        </div>
+    </div>
+</section>
+<section>
+    <div class="text-light">
+        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3983.7531135535396!2d101.55502981163059!3d3.1596494968024404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31cc4fb1c7a77485%3A0x932f09c590b3640b!2sPadang%20Bola%20E%20RRI%20Sungai%20Buloh!5e0!3m2!1sen!2smy!4v1710672957800!5m2!1sen!2smy" width="100%" height="500" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+        <div class="row g-0">
+            <div class="col-lg-5 my-5 my-lg-0 container-contactus">
+                {{ partial:partials/contactusform }}
+            </div>
+            <div class="col-lg-7 px-5 py-5" style="background-image: url(./assets/image/8.jpg);background-size: cover; background-position: center center;">
+
+                <p class="p-0 db-h5" style="line-height: clamp(1.7rem,2.5vw,3rem);">
+                    <a class="db-link" href="tel:{{ company_profile:phone_no }}">{{ company_profile:phone_no }}</a>
+                    <br/>
+                    <a class="db-link" href="{{ company_profile:site_url }}">{{ company_profile:site_url }}</a>
+                </p>
+                <p class="p-0 db-h5" style="line-height: clamp(1.7rem,2.5vw,3rem);">{{ company_profile:address }}</p>
+            </div>
+        </div>
+    </div>
+</section>

resources/views/download.antlers.html

@@ -0,0 +1,19 @@
+<section>
+    <div class="text-md-center text-light page-highlight" style="background-image: url(./assets/image/dbparticle2.png);">
+        <div class="container-fluid p-0 m-0" data-aos="zoom-in" >
+            <p class="db-h3 text-highlight">Downloads</p>
+        </div>
+    </div>
+</section>
+<section>
+    <div class="text-light section-8" style="background-image: url(./assets/image/dbparticle3.png);">
+        <div data-aos="zoom-in" class="text-center ">
+            <p class="db-h3 text-highlight" style="line-height: clamp(3rem,2.5vw,4rem);">Our Mobile Apps Is Coming Soon!</p>
+            <p class="mx-auto p-0 db-h5 mb-5" style="line-height: clamp(1.7rem,2.5vw,3rem);">Soon all of the amazing features that we provide here will be available in<br/> an exclusive app for both android and iOS.</p>
+        </div>
+        <div class="container-fluid d-flex flex-wrap justify-content-center">
+            <img data-aos="fade-up" data-aos-delay="100" class="mx-2" src="./assets/image/gplay.png" alt="google-play-img" style="width: 200px;">
+            <img data-aos="fade-up" data-aos-delay="100" class="mx-2" src="./assets/image/appstore.png" alt="google-play-img" style="width: 200px;">
+        </div>
+    </div>
+</section>

resources/views/home.antlers.html

@@ -107,17 +107,16 @@
         </div>
         <div class="row g-0">
             <div class="col-lg-5 my-5 my-lg-0 container-contactus">
-                <input class="db-input" type="text" style="margin-top: 1.4375rem;" placeholder="Name" />
-                <input class="db-input" type="text" style="margin-top: 1.4375rem;" placeholder="Email" />
-                <input class="db-input" type="text" style="margin-top: 1.4375rem;margin-bottom: 3.21875rem;" placeholder="Message" />
-                <button class="nav-link db-btn mx-auto mx-lg-0" style="font-size: clamp(18px,1vw,23px);font-weight: 500;padding: 0.5rem 3rem;">Submit</button>
+                {{ partial:partials/contactusform }}
             </div>
             <div class="col-lg-7 px-5 py-5" style="background-image: url(./assets/image/8.jpg);background-size: cover; background-position: center center;">
 
-                <p class="p-0 db-h5" style="line-height: clamp(1.7rem,2.5vw,3rem);">017-978 7358 <br/> hello@thebola.club</p>
-                <p class="p-0 db-h5" style="line-height: clamp(1.7rem,2.5vw,3rem);">Football Park LGM SUngai Buloh, Jalan Sungai Buloh <br/> PJU4, 47000 Petaling Jaya, Selangor</p>
-
-
+                <p class="p-0 db-h5" style="line-height: clamp(1.7rem,2.5vw,3rem);">
+                    <a class="db-link" href="tel:{{ company_profile:phone_no }}">{{ company_profile:phone_no }}</a>
+                    <br/>
+                    <a class="db-link" href="{{ company_profile:site_url }}">{{ company_profile:site_url }}</a>
+                </p>
+                <p class="p-0 db-h5" style="line-height: clamp(1.7rem,2.5vw,3rem);">{{ company_profile:address }}</p>
             </div>
         </div>
     </div>

resources/views/partials/_contactusform.antlers.html

@@ -0,0 +1,9 @@
+<div id="contact-form" class="container-fluid p-0">
+    <form>
+        <input id="name" name="name" class="db-input mt-3" type="text" placeholder="Name" />
+        <input id="email" name="email" class="db-input mt-3" type="text" placeholder="Email" />
+        <input id="message" name="message" class="db-input mt-3 mb-5" type="text" placeholder="Message" />
+        <button id="submitButton" type="submit" class="nav-link db-btn mx-auto mx-lg-0">Submit </button>
+    </form>
+</div>
+