Merge branch 'master' of https://git.mirfalah.my/mirfalah-tech/thebola-cms

content/collections/article/2024-03-14.the-bola-1.md

@@ -1,20 +1,18 @@
 ---
 id: f1c71af9-e3fc-459e-8cda-e4a4be1b10f3
 blueprint: article
-title: 'The Bola 1'
+title: 'Golden Goal FC Triumphs in Liga Puasa OPI 2024'
 author: ab0729b7-bf3b-4b76-930d-938ff5d0a937
-updated_by: ab0729b7-bf3b-4b76-930d-938ff5d0a937
-updated_at: 1710565321
+updated_by: 0fe06f55-99d6-459d-8bfe-0ba1055ae246
+updated_at: 1713842030
 date_field: '2024-03-13 08:50'
-image: group-6775.jpg
-article_date: '2024-03-13'
+image: whatsapp-image-2024-04-23-at-11.00.27.jpeg
+article_date: '2024-04-23'
 article_featured: true
 ---
-Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae dicta commodi ad
-
-nobisillum accusamus molestias aliquid nostrum adipisci totam labore nihil facilis delectus soluta ratione, exercitationem perferendis architecto sequi consectetur optio? Molestiae 
-repudiandae quae vitae vero cupiditate 
-
-deleniti corporis culpa quos repellat. Praesentium iste consequuntur maxime qui sequi totam, ipsam, labore quo nisi at aspernatur saepe harum perspiciatis 
-
-ullam aliquam, molestias quisquam corrupti expedita nostrum numquam nobis alias vel?
+From March 14th to April 4th, 2024, the RRI Football Park witnessed the exhilarating matches of the Liga Puasa OPI 2024, organized by Haro Sports & Entertainment.
+Seven teams, fueled by the sponsorship of Opstar Protein Industries (OPI), took to the field, determined to excel despite the challenges of fasting during the holy month of Ramadhan.
+In a nail-biting final showdown, Golden Goal FC emerged victorious, claiming both the prestigious trophy and a cash prize of RM1,500.
+BDK FC secured the first runner-up position, earning RM1,000 in cash, while SKTT FC clinched the second runner-up spot, taking home RM500.
+Throughout the tournament, OPI played a crucial role by sponsoring protein drinks for the players, ensuring they had the energy to perform at their best during and after each match.
+The event's objective was not only to promote fitness and community engagement but also to showcase the spirit of perseverance and teamwork among players, even during the fasting period.

content/collections/article/2024-03-14.the-bola-2.md

@@ -1,14 +1,19 @@
 ---
 id: 5adec921-111f-41b1-ab60-f29e0ffd2f58
 blueprint: article
-title: 'The Bola 2'
+title: 'RRI Football Park Makes History as Host Venue for First-Ever NFDP League, Klang Valley Edition'
 author: ab0729b7-bf3b-4b76-930d-938ff5d0a937
-updated_by: ab0729b7-bf3b-4b76-930d-938ff5d0a937
-updated_at: 1710565327
+updated_by: 0fe06f55-99d6-459d-8bfe-0ba1055ae246
+updated_at: 1713842042
 duplicated_from: f1c71af9-e3fc-459e-8cda-e4a4be1b10f3
 date_field: '2024-03-13 08:50'
-image: group-6774.jpg
-article_date: '2024-03-14'
+image: infopack_liga-nfdp-rri-2024.jpg
+article_date: '2024-04-23'
 article_featured: true
 ---
-Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae dicta commodi ad nobis illum accusamus molestias aliquid nostrum adipisci totam labore nihil facilis delectus soluta ratione, exercitationem perferendis architecto sequi consectetur optio? Molestiae repudiandae quae vitae vero cupiditate deleniti corporis culpa quos repellat. Praesentium iste consequuntur maxime qui sequi totam, ipsam, labore quo nisi at aspernatur saepe harum perspiciatis ullam aliquam, molestias quisquam corrupti expedita nostrum numquam nobis alias vel?
+Starting from May 11th and continuing until November 2024, Saturdays at RRI Football Park will witness an unprecedented sporting spectacle—the first-ever NFDP League, Klang Valley edition.
+Spread across Field A and Field B of the official venue, this historic league will feature three categories: under-13, under-15, and under-17, comprising a total of 14 teams.
+The participating teams represent a diverse range, including NFDP Selangor with 5 teams, NFDP Kuala Lumpur with 5 teams, as well as invitation teams from NFDP Negeri Sembilan and NFDP Melaka, along with 2 teams from the Zone Training Centre (PLZ).
+The league is meticulously organized by Haro Sports & Entertainment, with support from the National Football Development Programme (NFDP) and the National Sports Council (MSN).
+Designed to enhance the caliber of national football, the NFDP League brings together top-tier players from District Training Centers (PLD) in the Klang Valley to compete for supremacy in this prestigious tournament.
+This initiative aims to foster the development of world-class talent capable of competing on the international stage, showcasing the potential of Malaysian football on a global scale.

content/collections/pages/home.md

@@ -5,5 +5,72 @@ title: Home
 template: home
 author: ab0729b7-bf3b-4b76-930d-938ff5d0a937
 updated_by: ab0729b7-bf3b-4b76-930d-938ff5d0a937
-updated_at: 1710468048
+updated_at: 1710742549
+grid_field:
+  - null
+home_section_1:
+  -
+    id: ltw8galv
+    highlight_text: '<p class="text-highlight hero-text-highlight">WHERE <span class="text-db">PASSION</span>  <br> MEETS THE <span class="text-db">PITCH</span></p>'
+    description_text: 'Unleash Your Inner Champion'
+    type: homepage_section_1
+    enabled: true
+    button_link: /booking
+home_section_2:
+  -
+    id: wGgYHLHc
+    highlight_text: 'Your Football Haven Awaits: Embrace the  <br> Game at Our State-of-the-Art Field!'
+    description_text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse labore ullam error praesentium culpa quae similique, inventore laborum vel a excepturi odit voluptates illum quibusdam, commodi nostrum, tenetur perspiciatis est. Labore adipisci itaque inventore voluptatem pariatur? Quos perferendis sit quo autem praesentium nobis pariatur in! Atque, explicabo magnam! Repellat aliquam dolorem suscipit nam facere'
+    button_link: /booking
+home_section_4:
+  -
+    id: s9npkOiq
+    highlight_text: Features
+    description_text: 'Stay tuned for more latest news and articles brought exclusively by our team'
+    features:
+      -
+        id: ltwhom3l
+        highlight: 'Fields Booking and Fixtures 1'
+        description_text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse labore ullam error praesentium culpa quae similique, inventore laborum vel a excepturi odit voluptates illum quibusdam, commodi nostrum, tenetur perspiciatis est. Labore adipisci itaque inventore voluptatem pariatur? Quos perferendis sit quo autem praesentium nobis pariatur in! Atque, explicabo magnam! Repellat aliquam dolorem suscipit nam facere'
+        icon: '<i class="fa-solid fa-book-bookmark fa-2x text-db d-none d-lg-inline"></i>'
+        link_text: 'Download Now'
+        link: /booking
+        background_image: group-6742.jpg
+        type: feature
+        enabled: true
+      -
+        id: ltwiiwib
+        highlight: 'Fields Booking and Fixtures 2'
+        description_text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse labore ullam error praesentium culpa quae similique, inventore laborum vel a excepturi odit voluptates illum quibusdam, commodi nostrum, tenetur perspiciatis est.'
+        icon: '<i class="fa-solid fa-book-bookmark fa-2x text-db d-none d-lg-inline"></i>'
+        link_text: 'Download Now'
+        link: /download
+        background_image: group-6741.jpg
+        type: feature
+        enabled: true
+      -
+        id: ltwijpnf
+        highlight: 'Fields Booking and Fixtures 3'
+        description_text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse labore ullam error praesentium culpa quae similique, inventore laborum vel a excepturi odit voluptates illum quibusdam, commodi nostrum, tenetur perspiciatis est.'
+        icon: '<i class="fa-solid fa-book-bookmark fa-2x text-db d-none d-lg-inline"></i>'
+        link_text: 'Download Now'
+        link: /contact
+        background_image: group-6743.jpg
+        type: feature
+        enabled: true
+      -
+        id: ltwikvv9
+        highlight: 'Fields Booking and Fixtures 4'
+        description_text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse labore ullam error praesentium culpa quae similique, inventore laborum vel a excepturi odit voluptates illum quibusdam, commodi nostrum, tenetur perspiciatis est.'
+        icon: '<i class="fa-solid fa-book-bookmark fa-2x text-db d-none d-lg-inline"></i>'
+        link_text: 'Download Now'
+        link: /news
+        background_image: group-6773-1710740276.jpg
+        type: feature
+        enabled: true
+home_section_3:
+  -
+    id: 24e4lguZ
+    test_link: TestLink
+    background_image: bg2-1710742546.jpg
 ---

content/collections/test.yaml

@@ -1,5 +0,0 @@
-title: test
-revisions: false
-date_behavior:
-  past: public
-  future: private

content/globals/company_profile.yaml

@@ -3,7 +3,7 @@ data:
   address: '<p>RRI Football Park LGM Sungai Buloh, <br>Jalan Sungai Buloh, PJU4 47000 <br>Petaling Jaya, Selangor, Malaysia</p>'
   phone_no: '+60122274616'
   email_office: help@thebola.club
-  site_url: 'https://thebola.club/'
+  site_url: 'https://api.thebola.club/'
   facebook_link: 'https://www.facebook.com/'
   twitter_link: 'https://twitter.com/home?lang=en'
   youtube_link: 'https://www.youtube.com/'

content/trees/navigation/main_menu.yaml

@@ -19,7 +19,3 @@ tree:
     id: c23fcb6b-2e4e-4626-a525-447d3e1cfb7f
     title: Contact
     url: /contact
-  -
-    id: e913b861-ce87-448d-8243-7fbd48b53cb5
-    title: Register
-    url: 'https://thebola.club/register'

public/assets/.meta/1663760968882.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 140858
+last_modified: 1710751567
+width: 800
+height: 1000
+mime_type: image/jpeg
+duration: null

public/assets/.meta/4-1710741803.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 1068215
+last_modified: 1710741803
+width: 1920
+height: 674
+mime_type: image/jpeg
+duration: null

public/assets/.meta/4.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 1068215
+last_modified: 1710740737
+width: 1920
+height: 674
+mime_type: image/jpeg
+duration: null

public/assets/.meta/bg2-1710742546.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 1068215
+last_modified: 1710742546
+width: 1920
+height: 674
+mime_type: image/jpeg
+duration: null

public/assets/.meta/bg2.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 1068215
+last_modified: 1710742188
+width: 1920
+height: 674
+mime_type: image/jpeg
+duration: null

public/assets/.meta/group-6741.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 59155
+last_modified: 1710740196
+width: 518
+height: 246
+mime_type: image/jpeg
+duration: null

public/assets/.meta/group-6742.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 103645
+last_modified: 1710738966
+width: 518
+height: 246
+mime_type: image/jpeg
+duration: null

public/assets/.meta/group-6743.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 39910
+last_modified: 1710740227
+width: 518
+height: 246
+mime_type: image/jpeg
+duration: null

public/assets/.meta/group-6773-1710740276.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 59909
+last_modified: 1710740276
+width: 526
+height: 436
+mime_type: image/jpeg
+duration: null

public/assets/.meta/infopack_liga-nfdp-rri-2024.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 5984982
+last_modified: 1713841611
+width: 4560
+height: 2565
+mime_type: image/jpeg
+duration: null

public/assets/.meta/whatsapp-image-2024-04-23-at-11.00.27.jpeg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 1352586
+last_modified: 1713841327
+width: 3696
+height: 2456
+mime_type: image/jpeg
+duration: null

public/assets/image/.meta/dbparticle2.png.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 73064
+last_modified: 1710679801
+width: 1920
+height: 209
+mime_type: image/png
+duration: null

public/css/main.css

@@ -150,8 +150,7 @@ p {
 }
 
 .nav-logo-desktop {
-    width: 3.75rem;
-    height: 3.75rem;
+    width: 70%
 }
 
 .nav-logo-text {
@@ -283,21 +282,22 @@ p {
     overflow: hidden;
 }
 
-.booking-item{
+.field-item{
     padding-top: 80%;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
+    cursor: pointer;
 }
 
-.booking-details{
+.field-details{
     height: 100%;
     width: 100%;
     top:0;
     left:0
 }
 
-.booking-overlay{
+.field-overlay{
     background-color: rgba(0, 0, 0, 0.5);
     width: 100%;
     padding: 1.688rem 3.625rem;
@@ -306,15 +306,57 @@ p {
     height: fit-content;
 }
 
-.booking-item.active .booking-overlay{
+.field-c.active .field-overlay{
     background-color: rgba(103, 235, 71, 0.5);
 }
 
 
-.booking-item:hover .booking-overlay{
+.field-item:hover .field-overlay{
     background-color: rgba(103, 235, 71, 0.5);
 }
 
+.location-item{
+    padding-top: 80%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+.location-overlay{
+    background-color: rgba(0, 0, 0, 0.5);
+    width: 100%;
+    padding: 1.688rem 3.625rem;
+    transition: all 300ms ease-in-out;
+    height: 100%;
+}
+
+
+#field-location-container:has(> :last-child:nth-child(2)){
+   display: none !important;
+}
+
+#field-container:has(> :last-child:nth-child(2)){
+    display: none !important;
+ }
+
+
+.location-item{
+    padding-top: 80%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+.select-field.active .location-overlay{
+    background-color: rgba(103, 235, 71, 0.5);
+}
+
+
+.location-item:hover .location-overlay{
+    background-color: rgba(103, 235, 71, 0.5);
+}
+
+
 .container-contactus{
     padding-left: 6.5rem;
     padding-right: 6.5rem;

public/js/api/API.js

@@ -0,0 +1,142 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	// The require scope
+/******/ 	var __webpack_require__ = {};
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+/*!*********************************!*\
+  !*** ./resources/js/api/API.js ***!
+  \*********************************/
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* binding */ API)
+/* harmony export */ });
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var server_url = "https://api.thebola.club";
+var API = /*#__PURE__*/function () {
+  function API() {
+    _classCallCheck(this, API);
+    this.prefix = server_url;
+    this.url = "/api";
+    this.test = 200;
+  }
+  _createClass(API, [{
+    key: "listState",
+    value: function listState(_ref) {
+      var _ref$_callback = _ref._callback,
+        _callback = _ref$_callback === void 0 ? function () {} : _ref$_callback;
+      var url = "".concat(this.prefix).concat(this.url, "/public/event/location/state");
+      fetch(url).then(function (response) {
+        return response.json();
+      }).then(function (data) {
+        return _callback(data);
+      })["catch"](function (err) {
+        return console.log(err);
+      });
+    }
+  }, {
+    key: "listLocation",
+    value: function listLocation(_ref2) {
+      var state = _ref2.state,
+        city = _ref2.city,
+        _ref2$_callback = _ref2._callback,
+        _callback = _ref2$_callback === void 0 ? function () {} : _ref2$_callback;
+      var url = "".concat(this.prefix).concat(this.url, "/public/event/location/field?") + new URLSearchParams({
+        state: state,
+        city: city
+      });
+      fetch(url).then(function (response) {
+        return response.json();
+      }).then(function (data) {
+        return _callback(data);
+      })["catch"](function (err) {
+        return console.log(err);
+      });
+    }
+  }, {
+    key: "listField",
+    value: function listField(_ref3) {
+      var state = _ref3.state,
+        city = _ref3.city,
+        field_name = _ref3.field_name,
+        _ref3$_callback = _ref3._callback,
+        _callback = _ref3$_callback === void 0 ? function () {} : _ref3$_callback;
+      var url = "".concat(this.prefix).concat(this.url, "/public/event/location?") + new URLSearchParams({
+        state: state,
+        city: city,
+        field_name: field_name
+      });
+      fetch(url).then(function (response) {
+        return response.json();
+      }).then(function (data) {
+        return _callback(data);
+      })["catch"](function (err) {
+        return console.log(err);
+      });
+    }
+  }, {
+    key: "enquiry",
+    value: function enquiry(_ref4, _callback) {
+      var email = _ref4.email,
+        name = _ref4.name,
+        message = _ref4.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;
+}();
+
+/******/ })()
+;

public/mix-manifest.json

@@ -3,6 +3,7 @@
     "/js/jquery.js": "/js/jquery.js",
     "/js/main.js": "/js/main.js",
     "/js/aos.js": "/js/aos.js",
+    "/js/api/API.js": "/js/api/API.js",
     "/css/main.css": "/css/main.css",
     "/css/aos.css": "/css/aos.css",
     "/css/normalize.css": "/css/normalize.css",

resources/blueprints/collections/pages/page.yaml

@@ -15,13 +15,72 @@ sections:
           type: markdown
           localizable: true
       -
-        handle: template
+        handle: home_section_1
         field:
-          hide_partials: true
-          blueprint: false
-          display: Template
-          type: template
-          icon: template
+          fields:
+            -
+              import: homepage_section_1
+          mode: stacked
+          max_rows: 1
+          min_rows: 1
+          reorderable: true
+          display: 'Home Section 1'
+          type: grid
+          icon: grid
+          listable: hidden
+          instructions_position: above
+          visibility: visible
+      -
+        handle: home_section_2
+        field:
+          fields:
+            -
+              import: home_section_2
+          mode: stacked
+          max_rows: 1
+          min_rows: 1
+          reorderable: true
+          display: 'Home Section 2'
+          type: grid
+          icon: grid
+          listable: hidden
+          instructions_position: above
+          visibility: visible
+          if:
+            title: 'equals Home'
+          validate:
+            - required
+      -
+        handle: home_section_3
+        field:
+          fields:
+            -
+              import: home_section_3
+          mode: stacked
+          reorderable: true
+          display: 'Home Section 3'
+          type: grid
+          icon: grid
+          listable: hidden
+          instructions_position: above
+          visibility: visible
+          if:
+            title: 'equals Home'
+          max_rows: 1
+          min_rows: 1
+      -
+        handle: home_section_4
+        field:
+          fields:
+            -
+              import: home_section_4
+          mode: stacked
+          max_rows: 1
+          min_rows: 1
+          reorderable: true
+          display: 'Home Section 4'
+          type: grid
+          icon: grid
           listable: hidden
           instructions_position: above
           visibility: visible

resources/css/main.css

@@ -145,8 +145,7 @@ p {
 }
 
 .nav-logo-desktop {
-    width: 3.75rem;
-    height: 3.75rem;
+    width: 70%
 }
 
 .nav-logo-text {
@@ -276,21 +275,22 @@ p {
     overflow: hidden;
 }
 
-.booking-item{
+.field-item{
     padding-top: 80%;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
+    cursor: pointer;
 }
 
-.booking-details{
+.field-details{
     height: 100%;
     width: 100%;
     top:0;
     left:0
 }
 
-.booking-overlay{
+.field-overlay{
     background-color: rgba(0, 0, 0, 0.5);
     width: 100%;
     padding: 1.688rem 3.625rem;
@@ -298,15 +298,57 @@ p {
     height: fit-content;
 }
 
-.booking-item.active .booking-overlay{
+.field-c.active .field-overlay{
     background-color: rgba(103, 235, 71, 0.5);
 }
 
 
-.booking-item:hover .booking-overlay{
+.field-item:hover .field-overlay{
     background-color: rgba(103, 235, 71, 0.5);
 }
 
+.location-item{
+    padding-top: 80%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+.location-overlay{
+    background-color: rgba(0, 0, 0, 0.5);
+    width: 100%;
+    padding: 1.688rem 3.625rem;
+    transition: all 300ms ease-in-out;
+    height: 100%;
+}
+
+
+#field-location-container:has(> :last-child:nth-child(2)){
+   display: none !important;
+}
+
+#field-container:has(> :last-child:nth-child(2)){
+    display: none !important;
+ }
+
+
+.location-item{
+    padding-top: 80%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+.select-field.active .location-overlay{
+    background-color: rgba(103, 235, 71, 0.5);
+}
+
+
+.location-item:hover .location-overlay{
+    background-color: rgba(103, 235, 71, 0.5);
+}
+
+
 .container-contactus{
     padding-left: 6.5rem;
     padding-right: 6.5rem;

resources/fieldsets/home_section_2.yaml

@@ -0,0 +1,33 @@
+title: 'Home Section 2'
+fields:
+  -
+    handle: highlight_text
+    field:
+      input_type: text
+      antlers: false
+      display: 'Highlight Text'
+      type: text
+      icon: text
+      listable: hidden
+      instructions_position: above
+      visibility: visible
+  -
+    handle: description_text
+    field:
+      input_type: text
+      antlers: false
+      display: description_text
+      type: text
+      icon: text
+      listable: hidden
+      instructions_position: above
+      visibility: visible
+  -
+    handle: button_link
+    field:
+      display: 'Button Link'
+      type: link
+      icon: link
+      listable: hidden
+      instructions_position: above
+      visibility: visible

resources/fieldsets/home_section_3.yaml

@@ -0,0 +1,29 @@
+title: 'Home Section 3'
+fields:
+  -
+    handle: test_link
+    field:
+      input_type: text
+      antlers: false
+      display: 'Test Link'
+      type: text
+      icon: text
+      listable: hidden
+      instructions_position: above
+      visibility: visible
+  -
+    handle: background_image
+    field:
+      mode: list
+      container: assets
+      restrict: false
+      allow_uploads: true
+      show_filename: true
+      max_files: 1
+      min_files: 1
+      display: 'Background Image'
+      type: assets
+      icon: assets
+      listable: hidden
+      instructions_position: above
+      visibility: visible

resources/fieldsets/home_section_4.yaml

@@ -0,0 +1,106 @@
+title: 'Home Section 4'
+fields:
+  -
+    handle: highlight_text
+    field:
+      input_type: text
+      antlers: false
+      display: 'Highlight Text'
+      type: text
+      icon: text
+      listable: hidden
+      instructions_position: above
+      visibility: visible
+  -
+    handle: description_text
+    field:
+      antlers: false
+      display: 'Description Text'
+      type: textarea
+      icon: textarea
+      listable: hidden
+      instructions_position: above
+      visibility: visible
+  -
+    handle: features
+    field:
+      collapse: false
+      previews: true
+      sets:
+        feature:
+          display: feature
+          fields:
+            -
+              handle: highlight
+              field:
+                input_type: text
+                antlers: false
+                display: Highlight
+                type: text
+                icon: text
+                listable: hidden
+                instructions_position: above
+                visibility: visible
+            -
+              handle: description_text
+              field:
+                antlers: false
+                display: 'Description Text'
+                type: textarea
+                icon: textarea
+                listable: hidden
+                instructions_position: above
+                visibility: visible
+            -
+              handle: icon
+              field:
+                input_type: text
+                antlers: false
+                display: Icon
+                type: text
+                icon: text
+                listable: hidden
+                instructions_position: above
+                visibility: visible
+            -
+              handle: link_text
+              field:
+                input_type: text
+                antlers: false
+                display: 'Link Text'
+                type: text
+                icon: text
+                listable: hidden
+                instructions_position: above
+                visibility: visible
+            -
+              handle: link
+              field:
+                display: Link
+                type: link
+                icon: link
+                listable: hidden
+                instructions_position: above
+                visibility: visible
+            -
+              handle: background_image
+              field:
+                mode: list
+                container: assets
+                restrict: false
+                allow_uploads: true
+                show_filename: true
+                max_files: 1
+                min_files: 1
+                display: 'Background Image'
+                type: assets
+                icon: assets
+                listable: hidden
+                instructions_position: above
+                visibility: visible
+      display: features
+      type: replicator
+      icon: replicator
+      listable: hidden
+      instructions_position: above
+      visibility: visible

resources/fieldsets/homepage_section_1.yaml

@@ -0,0 +1,33 @@
+title: 'Home Section 1'
+fields:
+  -
+    handle: highlight_text
+    field:
+      input_type: text
+      antlers: false
+      display: 'Highlight Text'
+      type: text
+      icon: text
+      listable: hidden
+      instructions_position: above
+      visibility: visible
+  -
+    handle: description_text
+    field:
+      input_type: text
+      antlers: false
+      display: 'Description Text'
+      type: text
+      icon: text
+      listable: hidden
+      instructions_position: above
+      visibility: visible
+  -
+    handle: button_link
+    field:
+      display: 'button link'
+      type: link
+      icon: link
+      listable: hidden
+      instructions_position: above
+      visibility: visible

resources/js/api/API.js

@@ -1,6 +1,4 @@
-//import some server backend
-//set app url from env file
-const server_url = "https://thebola.club";
+const server_url = "https://api.thebola.club";
 
 export default class API {
     constructor() {
@@ -9,11 +7,58 @@ export default class API {
         this.test = 200;
     }
 
-    listLocation(_page, _pagesize, _callback) {
+    listState({_callback = () => {}}){
+        const url = `${this.prefix}${this.url}/public/event/location/state`
 
-        let url =  `${this.prefix}${this.url}/public/event/location?`
+        fetch(url)
+            .then(response => response.json())
+            .then(data => _callback(data))
+            .catch(err => console.log(err))
 
-        console.log(url)
+    }
+
+    listLocation({ state, city, _callback = () => {}}) {
+
+        const url = `${this.prefix}${this.url}/public/event/location/field?` + new URLSearchParams({
+            state, city
+        })
+
+        fetch(url)
+            .then(response => response.json())
+            .then(data => _callback(data) )
+            .catch(err => console.log(err))
+    }
+
+    listField({state, city, field_name, _callback = () => {}}){
+
+        const url = `${this.prefix}${this.url}/public/event/location?` + new URLSearchParams({
+            state, city, field_name
+        })
+
+        fetch(url)
+            .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))
     }
 }

resources/js/main.js

@@ -1,59 +1,10 @@
 import AOS from "aos";
 import jQuery from "jquery";
-import queryString from "query-string";
-//import API from './api/api';
-
-const server_url = "https://thebola.club";
-
-export default class API {
-    constructor() {
-        this.prefix = server_url;
-        this.url = "/api";
-        this.test = 200;
-    }
-
-    listLocation({ _search, _page = 1, _pagesize = 20, _callback = () => {} }) {
-
-        let url = `${this.prefix}${
-            this.url
-        }/public/event/location?${queryString.stringify({
-            _search,
-            _page,
-            _pagesize,
-        })}`;
-
-
-        fetch(url)
-            .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))
-    }
-}
+import API from './api/api';
 
 const $ = jQuery;
 const api = new API();
 
-var bookingList = [];
 var bookingRules = [];
 
 setTimeout(() => {
@@ -111,60 +62,164 @@ $(document).ready(function () {
     //check if booking section exist in any page
     let bookingContainer = $('#booking-section');
     if(bookingContainer.length > 0){
-        api.listLocation({
-            _search: "",
-            _page: 1,
-            _pagesize: 20,
-            _callback: (data) => {
-                console.log("fetch")
-                localStorage.setItem('thebola-booking', JSON.stringify(data))
-                bookingList = data;
-
-                // set date max and min
-                let { maxDate, minDate } = createDateInputWithRange(14)
-                $('#input-booking-date').attr("min", minDate)
-                $('#input-booking-date').attr("max", maxDate)
-
-            },
-        });
+
+        api.listState({
+            _callback: ({state_city}) => {
+
+                const selectLocationInput = $("#select-location");
+                if(Array.isArray(state_city)){
+                    state_city.forEach(({state, city}, i) => {
+                        let newOption = document.createElement('option');
+                        $(newOption).attr("id", `location_${i}`)
+                        $(newOption).attr("value",JSON.stringify({state,city}))
+                        $(newOption).addClass("select-value")
+                        newOption.text = `${city}, ${state}`
+                        $(selectLocationInput).append(newOption)
+                    });
+                }
+
+                $(selectLocationInput).on('change', ()=>{
+                    resetField()
+                })
+
+            }
+        })
+
+        // set date max and min
+        let { maxDate, minDate } = createDateInputWithRange(14)
+        let inputDate = $('#input-booking-date')
+        $(inputDate).attr("min", minDate)
+        $(inputDate).attr("max", maxDate)
+        resetDate()
+
     }
 
+    $("#register-btn").on('click', function(e){
+        e.preventDefault();
+        document.getElementById("download-container").scrollIntoView();
+    })
+
+    $("#signin-btn").on('click', function(e){
+        e.preventDefault();
+        document.getElementById("download-container").scrollIntoView();
+    })
 
-    $(".booking-item").on("click", function () {
+    $("#booknow-btn").on('click', function(e){
+        e.preventDefault();
+        document.getElementById("download-container").scrollIntoView();
+    })
 
-        // remove all child active class, then add active on clicked
-        let bookingContainer = $('.booking-container');
-        $(bookingContainer).find(".booking-item").removeClass("active")
-        $(this).addClass("active");
 
-        let fieldID = $(this).data('fieldid');
+    $("#select-location").on('change', function(){
+
+        resetDate()
+        resetRules()
+        resetField()
+        $("#select-location").children("#default-input-select-location").remove()
+
+        setTimeout(() => {
+            document.getElementById("field-location-container").scrollIntoView({ behavior: "smooth", block: "end", inline: "end" });
+        }, 300);
 
-        //ensure everything exist
-        if(bookingList === undefined || bookingList.length == 0){
-            bookingList = localStorage.getItem('thebola-booking')
-        }
 
-        if(fieldID && bookingList){
+        if(this.value !== "default" ){
+            let {state, city} = JSON.parse(this.value);
 
-            let { results } = bookingList;
-            let slots = results.filter( data => data.id == fieldID )
-            let { rules } = slots[0].slot_rules
-            bookingRules = rules
+            api.listLocation({
+                state,
+                city,
+                _callback: ({field_location}) => {
 
-        }else{
-            console.log("no booking data")
+                    let template = $('#field-location-template')
+                    let container = $(template).parent()
+
+                    //reset eveything
+                    $(container).children(".select-field").remove()
+
+                    try{
+
+                        field_location.forEach(({field_name, city, state, photo_path}) => {
+                            let newField = $(template).clone()
+                            $(newField).css('display','block')
+                            $(newField).removeAttr("id")
+                            $(newField).addClass("select-field")
+                            $(newField).find('.field-location-text').text("")
+                            $(newField).on('click', ()=>{ handleClickFieldLocation(city, state, field_name, newField) })
+                            $(newField).find('.field-location-img').attr("style", `background-image:url(https://thebola.club/files/${photo_path})`)
+                            $(container).append(newField)
+
+                        });
+
+                    }catch(err){
+                        console.log(err)
+                    }
+                },
+            });
         }
 
+    })
+
 
-    });
+    const handleClickFieldLocation = function (city, state, field_name, refElem) {
+
+        $("#field-location-container").find(".select-field").removeClass("active")
+        $(refElem).addClass("active")
+        resetDate()
+        resetRules()
+        resetField()
+
+        setTimeout(() => {
+            document.getElementById("field-container").scrollIntoView();
+        }, 300);
+
+        api.listField({state, city, field_name, _callback:({results})=>{
+
+            let container = $('#field-container')
+            let template = $('#field-template')
+            try{
+
+                results.forEach(({location_name, photo_path, slot_rules}) => {
+
+                    let newField = $(template).clone()
+                    $(newField).css('display','block')
+                    $(newField).removeAttr("id")
+                    $(newField).addClass("select-field")
+                    $(newField).find('.field-text').text(location_name)
+                    $(newField).on('click', ()=>{ handleClickField(slot_rules, newField)})
+                    $(newField).find('.field-img').attr("style", `background-image:url(https://thebola.club/files/${photo_path})`)
+                    $(container).append(newField)
+
+                });
+
+            }catch(err){
+                console.log(err)
+            }
+
+        }})
+
+    }
+
+    const handleClickField = function (slot_rules,refElem){
+
+        // remove all child active class, then add active on clicked
+        let fieldContainer = $('#field-container');
+        $(fieldContainer).find(".select-field").removeClass("active")
+        $(refElem).addClass("active");
+        resetRules()
+        resetDate()
+        bookingRules = slot_rules.rules
+
+
+    }
 
     $('#input-booking-date').change(function() {
 
+
         if(bookingRules){
 
             // render rule of slot base on current input value date
             var dayName = getDayNameFromInput(document.getElementById("input-booking-date"));
-            $("#input-booking-slot").children(".select-value").remove();
+            resetRules()
 
             setTimeout(() => {
 
@@ -194,21 +249,29 @@ $(document).ready(function () {
     }
 
     function getDayNameFromInput(inputElement) {
-        // Get the value of the input element
-        var selectedDate = inputElement.value;
 
-        // Create a new Date object from the input date string
+        var selectedDate = inputElement.value;
         var date = new Date(selectedDate);
-
-        // Array of day names
         var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
-
-        // Get the day of the week (0 for Sunday, 1 for Monday, ..., 6 for Saturday)
         var dayIndex = date.getDay();
-
-        // Return the name of the day corresponding to the day index
         return dayNames[dayIndex];
+
     }
 
+    function resetField(){
+        $('#field-container').children(".select-field").remove()
+    }
+
+    function resetDate(){
+        let { maxDate, minDate } = createDateInputWithRange(14)
+        $('#input-booking-date').val(minDate)
+    }
+
+    function resetRules(){
+        $("#input-booking-slot").children(".select-value").remove();
+    }
+
+
+
 
 });

resources/views/booking.antlers.html

@@ -8,36 +8,34 @@
 </section>
 <section id="booking-section">
     <div class="text-light section-5">
-        <div class="row g-0 booking-container">
+        <div class="row g-0 booking-container text-center">
 
-            <div data-aos="fade-up" class="col-xl-4 position-relative p-0 p-lg-3">
-                <div data-fieldid="1" class="position-relative booking-item" style="background-image: url(./assets/image/Group_6775.jpg);">
-                    <div class="position-absolute d-flex flex-wrap booking-details">
-                        <div class="mt-auto booking-overlay">
-                            <p class="text-highlight db-h5 fw-bold p-0"> FIELD A </p>
-                            <p class="p-0 m-0"><a class="text-light d-block article-details-href"> Book Now <span><i class="fa-solid fa-angle-right ps-3 text-db"></i></span></a></p>
-                        </div>
-                    </div>
-                </div>
+            <div class="col-12 position-relative px-3 mb-5">
+                <select id="select-location" class="db-input" id="cars" name="cars">
+                    <option id="default-input-select-location" value="default">Select City and State</option>
+                  </select>
             </div>
 
-            <div data-aos="fade-up" class="col-xl-4 position-relative p-0 p-lg-3">
-                <div data-fieldid="2" class="position-relative booking-item" style="background-image: url(./assets/image/Group_6775.jpg);">
-                    <div class="position-absolute d-flex flex-wrap booking-details">
-                        <div class="mt-auto booking-overlay">
-                            <p class="text-highlight db-h5 fw-bold p-0"> FIELD B </p>
-                            <p class="p-0 m-0"><a class="text-light d-block article-details-href"> Book Now <span><i class="fa-solid fa-angle-right ps-3 text-db"></i></span></a></p>
+            <div id="field-location-container" class="container-fluid p-0 col-12 row text-center my-5">
+                <p class="db-h5 text-highlight title">SELECT LOCATION</p>
+                <div id="field-location-template" class="col-xl-4 position-relative p-0 p-lg-3 animate__animated animate__fadeIn" style="display: none;">
+                    <div class="position-relative location-item field-location-img">
+                        <div class="position-absolute d-flex flex-wrap field-details">
+                            <div class="mt-auto d-flex location-overlay"></div>
                         </div>
                     </div>
                 </div>
             </div>
 
-            <div data-aos="fade-up" class="col-xl-4 position-relative p-0 p-lg-3">
-                <div data-fieldid="3" class="position-relative booking-item" style="background-image: url(./assets/image/Group_6775.jpg);">
-                    <div class="position-absolute d-flex flex-wrap booking-details">
-                        <div class="mt-auto booking-overlay">
-                            <p class="text-highlight db-h5 fw-bold p-0"> FIELD C </p>
-                            <p class="p-0 m-0"><a class="text-light d-block article-details-href"> Book Now <span><i class="fa-solid fa-angle-right ps-3 text-db"></i></span></a></p>
+            <div id="field-container" class="container-fluid p-0 col-12 row my-5">
+                <p class="db-h5 text-highlight">SELECT FIELD</p>
+                <div id="field-template" class="col-xl-4 position-relative p-0 p-lg-3 animate__animated animate__fadeIn field-c" style="display: none;">
+                    <div class="position-relative field-item field-img">
+                        <div class="position-absolute d-flex flex-wrap field-details">
+                            <div class="mt-auto field-overlay text-start">
+                                <p class="text-highlight db-h5 fw-bold m-0 field-text"></p>
+                                <p class="p-0 m-0"><a class="text-light d-block article-details-href"> Book Now <span><i class="fa-solid fa-angle-right ps-3 text-db"></i></span></a></p>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -53,7 +51,9 @@
                       </select>
                 </div>
                 <div class="col-lg-2 my-5 my-lg-0 d-flex">
-                    <a href="https://play.google.com/store/apps/details?id=club.thebola.app" target="_blank" class="nav-link db-btn mx-auto mt-auto" style="font-size: clamp(18px,1vw,23px);font-weight: 500;padding: 0.5rem 3rem;">Book Now</a>
+                    <button id="booknow-btn" class="nav-link db-btn mx-auto mt-auto">
+                        Book Now
+                    </button>
                 </div>
             </div>
 
@@ -63,12 +63,11 @@
 <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;">
+            <p class="db-h3 text-highlight" style="line-height: clamp(3rem,2.5vw,4rem);">Our Mobile Apps Is Now Available!</p>
+            <p class="mx-auto p-0 db-h5 mb-5" style="line-height: clamp(1.7rem,2.5vw,3rem);">Download the app for bookings and other important notifications in<br/> an exclusive app for both android and iOS.</p>
         </div>
+
+        {{ partial:partials/appsdownload }}
+
     </div>
 </section>

resources/views/home.antlers.html

@@ -1,23 +1,39 @@
 <section>
     <div class="d-flex px-5" style="min-height: 90vh;background-image: url(./assets/image/2.jpg);background-size: cover;">
         <div data-aos="zoom-in" class="text-light text-lg-center m-auto">
-            <p class="text-highlight hero-text-highlight" >WHERE <span class="text-db">PASSION</span>  <br/> MEETS THE <span class="text-db">PITCH</span></p>
-            <p class="hero-text-description pb-5 pt-3 py-lg-5">Unleash Your Inner Champion</p>
-            <button class="nav-link db-btn mx-0 mx-lg-auto" style="font-size: clamp(18px,1vw,23px);font-weight: 500;padding: 0.5rem 3rem">Explore</button>
+            {{ grid_field }}
+                {{ home_section_1 }}
+                    {{ highlight_text }}
+                    <p class="hero-text-description pb-5 pt-3 py-lg-5">{{ description_text }} </p>
+                    <a href="{{ button_link }}" class="nav-link db-btn mx-0 mx-lg-auto">Explore</a>
+                {{ /home_section_1 }}
+            {{ /grid_field }}
         </div>
     </div>
 </section>
 <section>
     <div class="text-md-center text-light section2" style="background-image: url(./assets/image/3.png);background-size: cover;padding-top: 10rem;padding-bottom: 5rem; background-position: top center;">
         <div class="container-fluid p-0 m-0" data-aos="zoom-in" >
-            <p class="db-h3 text-highlight">Your Football Haven Awaits: Embrace the <br/> Game at Our State-of-the-Art Field!</p>
-            <p class="mx-auto my-5 p-0 about-paragraph db-h5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse labore ullam error praesentium culpa quae similique, inventore laborum vel a excepturi odit voluptates illum quibusdam, commodi nostrum, tenetur perspiciatis est. Labore adipisci itaque inventore voluptatem pariatur? Quos perferendis sit quo autem praesentium nobis pariatur in! Atque, explicabo magnam! Repellat aliquam dolorem suscipit nam facere assumenda perferendis, provident, ex sapiente ea dolorum! Ipsum voluptate autem dignissimos quo sapiente sequi eius quae! autem dignissimos quo sapiente sequi eius quae autem dignissimos quo sapiente sequi eius quae autem dignissimos</p>
-            <button class="nav-link db-btn mx-auto" style="font-size: clamp(18px,1vw,23px);font-weight: 500;padding: 0.5rem 3rem">Read More</button>
+
+            {{ grid_field }}
+                {{ home_section_2 }}
+
+                    <p class="db-h3 text-highlight">{{ highlight_text }}</p>
+                    <p class="mx-auto my-5 p-0 about-paragraph db-h5">{{ description_text }}</p>
+
+                {{ /home_section_2 }}
+            {{ /grid_field }}
+
         </div>
     </div>
 </section>
 <section>
-    <div style="background-image: url('./assets/image/4.jpg');" class="section3-img"></div>
+
+    {{ grid_field }}
+        {{ home_section_3 }}
+            <div class="section3-img" style="background-image: url('.{{ background_image }}');"></div>
+        {{ /home_section_3 }}
+    {{ /grid_field }}
 </section>
 <section>
     <div class="text-center text-light p-7">
@@ -25,61 +41,20 @@
         <p class="mx-auto p-0 db-h5">Stay tuned for more latest news and articles brought exclusively by our team</p>
     </div>
     <div class="container-fluid p-0">
+
         <div class="row text g-0">
-            <div data-aos="fade-up" class="col-12 p-7 text-light row g-0" style="background-image: url('./assets/image/Group_6781.jpg');background-size: cover; background-repeat: no-repeat;">
-                <div class="col-2 d-none d-lg-block text-end">
-                    <i class="fa-solid fa-book-bookmark fa-2x text-db pe-4"></i>
-                </div>
-                <div class="col">
-                    <p class="fw-bold">Field Booking and Fixtures</p>
-                    <p style="margin-bottom: 3rem;">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto molestiae adipisci distinctio impedit quasi quibusdam accusamus, atque dolorem eum consequuntur assumenda voluptates vitae repellat tempora iste quam, repellendus deserunt quo culpa. Voluptate provident excepturi perferendis omnis maxime, earum eos tempora, a corrupti aspernatur est architecto. Deleniti iste quia voluptatem. Eum culpa mollitia saepe nesciunt laborum id neque nulla adipisci ab.</p>
-                    <p><a href="#" class="fw-bold text-light" style="text-decoration: none;">Book Now <span><i class="fa-solid fa-arrow-right ps-3 text-db fw-bold"></i></span></a></p>
-                </div>
-                <div class="col-2">
-                    <i class="fa-solid fa-book-bookmark fa-2x text-db d-inline d-lg-none"></i>
-                </div>
-            </div>
-        </div>
-        <div class="row text g-0">
-            <div data-aos="fade-up" data-aos-delay="100" class="col-md-4 p-5 text-light row g-0" style="background-image: url('./assets/image/Group_6742.jpg');background-size: cover; background-repeat: no-repeat;">
-                <div class="col-2 d-none d-lg-block text-end">
-                    <i class="fa-solid fa-book-bookmark fa-2x text-db pe-4"></i>
-                </div>
-                <div class="col">
-                    <p class="fw-bold db-h6">Field Booking and Fixtures</p>
-                    <p style="margin-bottom: 3rem;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, minus. Dicta nemo magnam architecto minus facere itaque natus</p>
-                    <p><a href="#" class="fw-bold text-light db-h6" style="text-decoration: none;">Download Now <span><i class="fa-solid fa-arrow-right ps-3 text-db fw-bold"></i></span></a></p>
-                </div>
-                <div class="col-2">
-                    <i class="fa-solid fa-book-bookmark fa-2x text-db d-inline d-lg-none"></i>
-                </div>
-            </div>
-            <div data-aos="fade-up" data-aos-delay="300" class="col-md-4 p-5 text-light row g-0" style="background-image: url('./assets/image/Group_6741.jpg');background-size: cover; background-repeat: no-repeat;">
-                <div class="col-2 d-none d-lg-block text-end">
-                    <i class="fa-solid fa-book-bookmark fa-2x text-db pe-4"></i>
-                </div>
-                <div class="col">
-                    <p class="fw-bold db-h6">Field Booking and Fixtures</p>
-                    <p style="margin-bottom: 3rem;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, minus. Dicta nemo magnam architecto minus facere itaque natus</p>
-                    <p><a href="#" class="fw-bold text-light db-h6" style="text-decoration: none;">Download Now <span><i class="fa-solid fa-arrow-right ps-3 text-db fw-bold"></i></span></a></p>
-                </div>
-                <div class="col-2">
-                    <i class="fa-solid fa-book-bookmark fa-2x text-db d-inline d-lg-none"></i>
-                </div>
-            </div>
-            <div data-aos="fade-up" data-aos-delay="500" class="col-md-4 p-5 text-light row g-0" style="background-image: url('./assets/image/Group_6780.jpg');background-size: cover; background-repeat: no-repeat;">
-                <div class="col-2 d-none d-lg-block text-end">
-                    <i class="fa-solid fa-book-bookmark fa-2x text-db pe-4"></i>
-                </div>
-                <div class="col">
-                    <p class="fw-bold db-h6">Field Booking and Fixtures</p>
-                    <p style="margin-bottom: 3rem;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, minus. Dicta nemo magnam architecto minus facere itaque natus</p>
-                    <p><a href="#" class="fw-bold text-light db-h6" style="text-decoration: none;">Download Now <span><i class="fa-solid fa-arrow-right ps-3 text-db fw-bold"></i></span></a></p>
-                </div>
-                <div class="col-2">
-                    <i class="fa-solid fa-book-bookmark fa-2x text-db d-inline d-lg-none"></i>
-                </div>
-            </div>
+
+            {{ grid_field }}
+                {{ firstEntry = 1 }}
+                {{ home_section_4 }}
+                    {{ features }}
+                        {{ partial:partials/feature }}
+                        {{ firstEntry = 0 }}
+                    {{ /features }}
+                {{ /home_section_4 }}
+            {{ /grid_field }}
+
+
         </div>
     </div>
 </section>
@@ -124,12 +99,9 @@
 <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;">
+            <p class="db-h3 text-highlight" style="line-height: clamp(3rem,2.5vw,4rem);">Our Mobile Apps Is Now Available!</p>
+            <p class="mx-auto p-0 db-h5 mb-5" style="line-height: clamp(1.7rem,2.5vw,3rem);">Download the app for bookings and other important notifications in<br/> an exclusive app for both android and iOS.</p>
         </div>
+        {{ partial:partials/appsdownload }}
     </div>
 </section>

resources/views/layout.antlers.html

@@ -5,6 +5,7 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>{{ title ?? site:name }}</title>
+        <link rel="icon" type="image/x-icon" href="/favicon.ico">
         <link rel="stylesheet" href="{{ mix src='css/bootstrap.css' }}">
         <link rel="stylesheet" href="{{ mix src='css/main.css' }}">
         <link rel="stylesheet" href="{{ mix src='css/aos.css' }}">
@@ -13,12 +14,13 @@
         <script src="{{ mix src='js/jquery.js' }}"></script>
         <script src="{{ mix src='js/aos.js' }}" defer></script>
         <script src="{{ mix src='js/main.js' }}"></script>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
     </head>
     <body style="background-color: black;">
 
         {{ partial:partials/navbar }}
 
-        <div class="mx-auto lg:min-h-screen flex flex-col items-center justify-center">
+        <div class="mx-auto justify-center" style="margin-top: 5rem;">
             {{ template_content }}
         </div>
 

resources/views/partials/_appsdownload.antlers.html

@@ -0,0 +1,8 @@
+<div id="download-container" class="container-fluid d-flex flex-wrap justify-content-center">
+    <a href="https://play.google.com/store/apps/details?id=club.thebola.app">
+        <img data-aos="fade-up" data-aos-delay="100" class="mx-2" src="./assets/image/gplay.png" alt="google-play-img" style="width: 200px;">
+    </a>
+    <a href="https://apps.apple.com/my/app/the-bola/id6478902627">
+        <img data-aos="fade-up" data-aos-delay="100" class="mx-2" src="./assets/image/appstore.png" alt="google-play-img" style="width: 220px;">
+    </a>
+</div>

resources/views/partials/_feature.antlers.html

@@ -0,0 +1,18 @@
+{{ if firstEntry == 1 }}
+<div data-aos="fade-up" data-aos-delay="100" class="col-md-12 p-5 text-light row g-0" style="background-image: url('.{{ background_image }}');background-size: cover; background-repeat: no-repeat;">
+{{ else }}
+<div data-aos="fade-up" data-aos-delay="100" class="col-md-4 p-5 text-light row g-0" style="background-image: url('.{{ background_image }}');background-size: cover; background-repeat: no-repeat;">
+{{ /if }}
+    <div class="col-2 text-end">
+        <i class="fa-solid fa-book-bookmark fa-2x text-db pe-4 d-none d-lg-inline"></i>
+    </div>
+    <div class="col">
+        <p class="fw-bold db-h6">{{ highlight }}</p>
+        <p style="margin-bottom: 3rem;"> {{ description_text }} </p>
+        <p><a href="{{ link }}" class="fw-bold text-light db-h6" style="text-decoration: none;"> {{ link_text }} <span><i class="fa-solid fa-arrow-right ps-3 text-db fw-bold"></i></span></a></p>
+    </div>
+    <div class="col-2">
+        <i class="fa-solid fa-book-bookmark fa-2x text-db d-inline d-lg-none"></i>
+    </div>
+</div>
+

resources/views/partials/_navbar.antlers.html

@@ -1,36 +1,33 @@
 <header>
-    <nav id="main-nav" class="navbar navbar-expand-lg sticky-top" style="background-color: black;">
+    <nav id="main-nav" class="navbar navbar-expand-lg justify-content-end fixed-top" style="background-color: black;">
         <div class="container-fluid d-flex flex-wrap justify-between p-0">
-
             <div class="d-none d-lg-block mx-auto mx-xxl-0">
-                <a style="text-decoration: none;" href="/"><img src="/assets/logo_1.png" class="nav-logo-desktop">
-                    <span class="text-light text-highlight my-auto nav-logo-text">THEBOLA</span>
-                </img></a>
-
+                <a style="text-decoration: none;" href="/"><img src="/assets/image/dblogo.png" class="nav-logo-desktop"/></a>
             </div>
-            <div class="mx-0 mx-lg-auto mx-xxl-0">
+            <div class="d-inline d-lg-none position-absolute d-flex" style="left:0;top:20px;width:100%;">
+                <a class="me-auto ps-3" style="text-decoration: none;" href="/"><img src="/assets/image/dblogo.png" class="nav-logo-desktop" style="width:150px"/></a>
+            </div>
+            <div class="ms-auto" style="z-index: 399;">
                 <div class="d-flex">
-                    <button class="navbar-toggler p-0" type="button" data-bs-toggle="collapse"
+                    <button class="ms-auto navbar-toggler p-0" type="button" data-bs-toggle="collapse"
                         data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
                         aria-label="Toggle navigation">
                         <i class="text-light fa-solid fa-bars fa-xl"></i>
                     </button>
-                    <div class="d-inline d-lg-none mx-auto">
-                        <img src="/assets/logo_1.png" class="img-fluid" style="width:60px;">
-                            <span class="text-light text-highlight my-auto" style="font-size:20px;padding-left: 1rem;vertical-align:middle">THEBOLA</span>
-                        </img>
-                    </div>
                 </div>
 
                 <div class="collapse navbar-collapse my-auto" id="navbarNavDropdown">
-                    <ul class="navbar-nav">
+                    <ul class="navbar-nav text-end">
                         {{ nav:main_menu }}
-                            <li class="nav-item">
+                            <li class="nav-item my-1">
                                 <a href="{{ url }}" class="nav-link" aria-current="page"> {{ title }} </a>
                             </li>
                         {{ /nav:main_menu }}
-                        <li class="nav-item">
-                            <a href="https://thebola.club/login" class="nav-link db-btn" style="padding: 0.5rem 2rem" href="#">Sign in</a>
+                        <li class="nav-item my-1">
+                            <a id="register-btn" href="{{ url }}" class="nav-link" aria-current="page"> Register </a>
+                        </li>
+                        <li class="nav-item my-1">
+                            <a id="signin-btn" href="https://api.thebola.club/login" class="nav-link db-btn" style="padding: 0.5rem 2rem" href="#">Sign in</a>
                         </li>
                     </ul>
                 </div>

users/azriperisiben@gmail.com.yaml

@@ -1,4 +0,0 @@
-name: azri
-super: true
-id: ab0729b7-bf3b-4b76-930d-938ff5d0a937
-password_hash: $2y$10$apoOxmvCg64f5dcR0DK4bOQwXvpFB02uGCMGb7iXuog.98WR4vUTy

users/dev@mirfalah.com.yaml

@@ -0,0 +1,5 @@
+name: mirfalah
+super: true
+email: dev@mirfalah.com
+id: 0fe06f55-99d6-459d-8bfe-0ba1055ae246
+password_hash: $2y$10$0rntgPgUqEATzto5vio74eh/vy/EZtn2zGroTkykNJe7OS/T/.vGa

webpack.mix.js

@@ -20,7 +20,7 @@ mix.js('resources/js/bootstrap.bundle.js', 'public/js')
 mix.js('resources/js/jquery.js', 'public/js')
 mix.js('resources/js/main.js', 'public/js')
 mix.js('resources/js/aos.js', 'public/js')
-
+mix.js('resources/js/api/API.js', 'public/js/api')
 
 if (mix.inProduction()) {
    mix.version();