done booking page

content/collections/pages/booking.md

@@ -5,5 +5,5 @@ title: Booking
 author: ab0729b7-bf3b-4b76-930d-938ff5d0a937
 template: booking
 updated_by: ab0729b7-bf3b-4b76-930d-938ff5d0a937
-updated_at: 1710224101
+updated_at: 1710468054
 ---

content/collections/pages/home.md

@@ -5,5 +5,5 @@ title: Home
 template: home
 author: ab0729b7-bf3b-4b76-930d-938ff5d0a937
 updated_by: ab0729b7-bf3b-4b76-930d-938ff5d0a937
-updated_at: 1710227330
+updated_at: 1710468048
 ---

content/collections/pages/news.md

@@ -5,5 +5,5 @@ title: News
 author: ab0729b7-bf3b-4b76-930d-938ff5d0a937
 template: news
 updated_by: ab0729b7-bf3b-4b76-930d-938ff5d0a937
-updated_at: 1710225993
+updated_at: 1710468060
 ---

content/collections/pages/policy-deletion.md

@@ -0,0 +1,8 @@
+---
+id: fc003a20-6539-4f7d-840f-c48a3b616e48
+blueprint: page
+title: 'Policy Deletion'
+updated_by: ab0729b7-bf3b-4b76-930d-938ff5d0a937
+updated_at: 1710469671
+template: policy_deletion
+---

content/collections/pages/privacy-and-terms.md

@@ -0,0 +1,36 @@
+---
+id: 8d906fcf-8653-4839-bd17-ea8921ffe01b
+blueprint: page
+title: 'Privacy and Terms'
+updated_by: ab0729b7-bf3b-4b76-930d-938ff5d0a937
+updated_at: 1710469339
+template: privacy
+---
+# *Privacy and Terms*
+<br />
+<br />
+In the dynamic world of online services, TheBola.club which crafted by Haro Sport Entertainment, stands committed to safeguarding the privacy of its diverse user base. Recognizing the distinct needs and legal requirements applicable to users aged 13 and below, users aged 14 until 17, and adult users aged 18 and above. TheBola.club has implemented tailored privacy measures to ensure a secure and age- appropriate online environment. For questions about our privacy and terms, please contact us by email at
+
+Collection and Use of Information
+
+Users Aged 13 and Below:
+
+For the youngest members of TheBola.club for users aged 13 and below, the most concern is the protection of their sensitive information. Parental consent is the basis of our approach, ensuring that before any personal information is collected, parents or guardians must provide explicit and verifiable approval. The information gathered is intentionally limited, focusing only on what is essential for account creation and service provision. Moreover, the activities of these young users are closely monitored to uphold not only their safety but also compliance with pertinent laws.
+
+Users Aged 14 until 17:
+
+For users aged 14 until 1 7 , TheBola.club continues to uphold a commitment to privacy while stimulate more independent online experience. Informed consent becomes essential with users in this age range being informed that their activities are subject to monitoring to ensure adherence to applicable laws. The sharing of personally identifiable information is restricted and privacy
+
+education becomes a complementary feature. TheBola.club may offer resources or information aimed at promoting responsible internet use and online privacy awareness among users aged 14 until 17.
+
+Users Aged 18 and Above:
+
+Upon reaching adulthood, users aged 18 and above enjoy a more independent experience on TheBola.club. The constraints of parental consent no longer apply and these users have unrestricted access to the full range of features and services provided by the platform. Importantly, they retain comprehensive privacy rights, including the ability to access, review, and correct their personal information. Secure transaction processes are implemented, ensuring that personal and financial information is handled with the most confidentially and compliance with relevant laws.
+
+General Protections for All Age Groups:
+
+Irrespective of age, all users on TheBola.club benefit from complete privacy protections. Strict data security measures, industry-standard encryption, and access controls are in place to secure the protection of personal information. Users are promptly notified of any changes to the privacy policy, ensuring transparency and empowering them to make informed decisions about their online engagement.
+
+In conclusion, TheBola.club under the banner of Haro Sport Entertainment, stands as a example of responsible and age- appropriate online service provision. By customize privacy protections to the unique needs of users aged 13 and below, users aged 14 until 17, and users aged 18 and above, the platform not only complies with legal requirements but goes above and beyond to create a safe, secure, and enjoyable online space for all. As the
+
+digital landscape evolves, TheBola.club remains committed in its commitment to privacy, demonstrating that responsible business practices can harmonize with diverse needs of its users across age groups.

content/globals/company_profile.yaml

@@ -10,4 +10,5 @@ data:
   instagram_link: 'https://www.instagram.com/'
   term_of_use: '#'
   legal_disclaimer: '#'
-  privacy_policy: '#'
+  privacy_policy: /privacy-and-terms
+  policy_deletion: /policy-deletion

content/trees/collections/pages.yaml

@@ -5,3 +5,7 @@ tree:
     entry: 74666b69-45fd-44d0-a7c5-ae56983b63a0
   -
     entry: 80e50847-bb80-4980-a9df-5ffbc9b8dc86
+  -
+    entry: 8d906fcf-8653-4839-bd17-ea8921ffe01b
+  -
+    entry: fc003a20-6539-4f7d-840f-c48a3b616e48

package-lock.json

@@ -8,7 +8,9 @@
                 "aos": "^3.0.0-beta.6",
                 "bootstrap-icons": "^1.11.3",
                 "build": "^0.1.4",
+                "jquery": "^3.7.1",
                 "npm": "^10.5.0",
+                "query-string": "^9.0.0",
                 "run": "^1.5.0"
             },
             "devDependencies": {
@@ -4240,6 +4242,14 @@
                 }
             }
         },
+        "node_modules/decode-uri-component": {
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz",
+            "integrity": "sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==",
+            "engines": {
+                "node": ">=14.16"
+            }
+        },
         "node_modules/default-gateway": {
             "version": "6.0.3",
             "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
@@ -4950,6 +4960,17 @@
                 "node": ">=8"
             }
         },
+        "node_modules/filter-obj": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-5.1.0.tgz",
+            "integrity": "sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==",
+            "engines": {
+                "node": ">=14.16"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/finalhandler": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
@@ -6014,6 +6035,11 @@
                 "jiti": "bin/jiti.js"
             }
         },
+        "node_modules/jquery": {
+            "version": "3.7.1",
+            "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+            "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
+        },
         "node_modules/js-tokens": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -10493,6 +10519,22 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/query-string": {
+            "version": "9.0.0",
+            "resolved": "https://registry.npmjs.org/query-string/-/query-string-9.0.0.tgz",
+            "integrity": "sha512-4EWwcRGsO2H+yzq6ddHcVqkCQ2EFUSfDMEjF8ryp8ReymyZhIuaFRGLomeOQLkrzacMHoyky2HW0Qe30UbzkKw==",
+            "dependencies": {
+                "decode-uri-component": "^0.4.1",
+                "filter-obj": "^5.1.0",
+                "split-on-first": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/querystring-es3": {
             "version": "0.2.1",
             "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
@@ -11370,6 +11412,17 @@
                 "node": ">= 6"
             }
         },
+        "node_modules/split-on-first": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-3.0.0.tgz",
+            "integrity": "sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/stable": {
             "version": "0.1.8",
             "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",

package.json

@@ -27,7 +27,9 @@
         "aos": "^3.0.0-beta.6",
         "bootstrap-icons": "^1.11.3",
         "build": "^0.1.4",
+        "jquery": "^3.7.1",
         "npm": "^10.5.0",
+        "query-string": "^9.0.0",
         "run": "^1.5.0"
     }
 }

public/css/main.css

@@ -6,6 +6,10 @@
     --light-clr: #fff;
 }
 
+::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+}
+
 /* DEFAULT */
 * {
     padding: 0;

public/mix-manifest.json

@@ -1,5 +1,6 @@
 {
     "/js/bootstrap.bundle.js": "/js/bootstrap.bundle.js",
+    "/js/jquery.js": "/js/jquery.js",
     "/js/main.js": "/js/main.js",
     "/js/aos.js": "/js/aos.js",
     "/css/main.css": "/css/main.css",

resources/blueprints/collections/pages/page.yaml

@@ -0,0 +1,45 @@
+sections:
+  main:
+    display: Main
+    fields:
+      -
+        handle: title
+        field:
+          type: text
+          required: true
+          validate:
+            - required
+      -
+        handle: content
+        field:
+          type: markdown
+          localizable: true
+      -
+        handle: template
+        field:
+          hide_partials: true
+          blueprint: false
+          display: Template
+          type: template
+          icon: template
+          listable: hidden
+          instructions_position: above
+          visibility: visible
+  sidebar:
+    display: Sidebar
+    fields:
+      -
+        handle: slug
+        field:
+          type: slug
+          localizable: true
+      -
+        handle: parent
+        field:
+          type: entries
+          collections:
+            - pages
+          max_items: 1
+          listable: false
+          localizable: true
+title: Page

resources/blueprints/globals/company_profile.yaml

@@ -164,3 +164,15 @@ sections:
           listable: hidden
           instructions_position: above
           visibility: visible
+      -
+        handle: policy_deletion
+        field:
+          input_type: text
+          antlers: false
+          display: 'Policy Deletion'
+          type: text
+          icon: text
+          instructions: 'Policy Deletion page link'
+          listable: hidden
+          instructions_position: above
+          visibility: visible

resources/css/main.css

@@ -7,6 +7,10 @@
     --light-clr: #fff;
 }
 
+::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+}
+
 /* DEFAULT */
 * {
     padding: 0;

resources/js/api/API.js

@@ -1,15 +1,19 @@
 //import some server backend
 //set app url from env file
-const server_url = "https://thebola.club"
+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,  }){
-        return GET(`${this.url}/public/event/location`, { _search, _page, _pagesize })
-    }
+    listLocation(_page, _pagesize, _callback) {
+
+        let url =  `${this.prefix}${this.url}/public/event/location?`
 
+        console.log(url)
+
+    }
 }

resources/js/main.js

@@ -1,8 +1,152 @@
-import AOS from 'aos';
+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))
+
+    }
+}
+
+const $ = jQuery;
+const api = new API();
+
+var bookingList = [];
+var bookingRules = [];
 
 setTimeout(() => {
-    console.log('AOS init');
+    console.log("AOS init");
     AOS.init();
-
 }, 500);
 
+$(document).ready(function () {
+
+
+    // this section is for booking page
+    //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)
+
+            },
+        });
+    }
+
+
+    $(".booking-item").on("click", function () {
+
+        // 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');
+
+        //ensure everything exist
+        if(bookingList === undefined || bookingList.length == 0){
+            bookingList = localStorage.getItem('thebola-booking')
+        }
+
+        if(fieldID && bookingList){
+
+            let { results } = bookingList;
+            let slots = results.filter( data => data.id == fieldID )
+            let { rules } = slots[0].slot_rules
+            bookingRules = rules
+
+        }else{
+            console.log("no booking data")
+        }
+
+
+    });
+
+    $('#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();
+
+            setTimeout(() => {
+
+                // append slot list
+                bookingRules[dayName].forEach(({end_time, start_time, price, id}) => {
+                    let newOption = document.createElement('option');
+                    $(newOption).attr("id", id)
+                    $(newOption).addClass("select-value")
+                    newOption.text = `${start_time} - ${end_time} (RM ${price})`
+                    $("#input-booking-slot").append(newOption)
+                });
+
+            }, 1000);
+
+        }
+    });
+
+    function createDateInputWithRange(days) {
+
+        var today = new Date();
+
+        var futureDate = new Date(today.getTime() + days * 24 * 60 * 60 * 1000);
+        var maxDate = futureDate.toISOString().split('T')[0];
+        let minDate = today.toISOString().split('T')[0];
+
+        return { maxDate, minDate };
+    }
+
+    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 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];
+    }
+
+
+});

resources/views/booking.antlers.html

@@ -6,12 +6,12 @@
         </div>
     </div>
 </section>
-<section>
+<section id="booking-section">
     <div class="text-light section-5">
-        <div class="row g-0 article-container">
+        <div class="row g-0 booking-container">
 
             <div data-aos="fade-up" class="col-xl-4 position-relative p-0 p-lg-3">
-                <div class="position-relative booking-item" style="background-image: url(./assets/image/Group_6775.jpg);">
+                <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>
@@ -22,7 +22,7 @@
             </div>
 
             <div data-aos="fade-up" class="col-xl-4 position-relative p-0 p-lg-3">
-                <div class="position-relative booking-item" style="background-image: url(./assets/image/Group_6775.jpg);">
+                <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>
@@ -33,7 +33,7 @@
             </div>
 
             <div data-aos="fade-up" class="col-xl-4 position-relative p-0 p-lg-3">
-                <div class="position-relative booking-item" style="background-image: url(./assets/image/Group_6775.jpg);">
+                <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>
@@ -43,23 +43,20 @@
                 </div>
             </div>
 
-        </div>
-    </div>
-</section>
-<section>
-    <div class="article-container">
-        <div class="row g-0">
-            <div class="col-lg-5 my-4 my-lg-5 px-5 my-lg-0 position-relative">
-                <input class="db-input" type="text" placeholder="Date" />
-                <i class="fa-regular fa-calendar fa-xl text-light pe-4 position-absolute" style="top:50%;right:2rem"></i>
-            </div>
-            <div class="col-lg-5 my-4 my-lg-5 px-5 my-lg-0 position-relative">
-                <input class="db-input" type="text" placeholder="Time" />
-                <i class="fa-solid fa-chevron-down fa-xl text-light pe-4 position-absolute" style="top:50%;right:2rem"></i>
-            </div>
-            <div class="col-lg-2 my-5 my-lg-0 d-flex">
-                <button 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</button>
+            <div class="row g-0">
+                <div class="col-lg-5 my-4 my-lg-5 px-5 my-lg-0 position-relative">
+                    <input id="input-booking-date" class="db-input" type="date" id="start" name="trip-start" value="2018-07-22" min="2018-01-01" max="2018-12-31" />
+                </div>
+                <div class="col-lg-5 my-4 my-lg-5 px-5 my-lg-0 position-relative">
+                    <select id="input-booking-slot" class="db-input" id="cars" name="cars">
+                        <option selected>Select Available slot</option>
+                      </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>
+                </div>
             </div>
+
         </div>
     </div>
 </section>

resources/views/layout.antlers.html

@@ -10,6 +10,7 @@
         <link rel="stylesheet" href="{{ mix src='css/aos.css' }}">
         <script src="https://kit.fontawesome.com/bacccc1477.js" crossorigin="anonymous"></script>
         <script src="{{ mix src='js/bootstrap.bundle.js' }}"></script>
+        <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>
     </head>

resources/views/partials/_footer.antlers.html

@@ -41,7 +41,8 @@
             <p>
                 <a class="db-link"  href="{{ company_profile:term_of_use }}"> Terms of Use </a> |
                 <a class="db-link"  href="{{ company_profile:legal_disclaimer }}"> Legal Disclaimer </a> |
-                <a class="db-link"  href="{{ company_profile:privacy_policy }}"> Privacy Policy </a>
+                <a class="db-link"  href="{{ company_profile:privacy_policy }}"> Privacy Policy </a> |
+                <a class="db-link"  href="{{ company_profile:policy_deletion }}"> Policy Deletion </a>
             </p>
         </div>
         <div class="col-lg-2 px-5 px-lg-0 text-lg-center my-5 my-lg-0">

resources/views/partials/_navbar.antlers.html

@@ -1,5 +1,5 @@
 <header>
-    <nav id="main-nav" class="navbar navbar-expand-lg fixed-top" style="background-color: black;">
+    <nav id="main-nav" class="navbar navbar-expand-lg sticky-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">

resources/views/policy_deletion.antlers.html

@@ -0,0 +1,53 @@
+<section>
+    <div class="text-light px-7" style="min-height: 100vh;">
+       <p><strong>Account Deletion Instructions and Policy</strong></p>
+            <p><strong>Effective Date: 1st January 2024</strong></p>
+            <p>We understand that there may come a time when you wish to delete your account with THE BOLA ("App," "We," "Us," or "Our"). We are committed to providing you with a straightforward and transparent process for account deletion. Please read this policy carefully to understand the steps involved.</p>
+            <p><strong>1. Accessing the Account Deletion Feature</strong></p>
+            <p>You can initiate the account deletion process through one of the following methods:</p>
+            <ul>
+            <li>
+            <p><strong>Via the App</strong>:</p>
+            <ol>
+            <li>Open the App on your device.</li>
+            <li>Navigate to your account settings or profile page.</li>
+            <li>Find and select the "Delete My Account" option.</li>
+            </ol>
+            </li>
+            <li>
+            <p><strong>Via Web Link</strong>:</p>
+            <ol>
+            <li>Login to account at <a class="db-link-icon" href="/login">/login</a>.</li>
+            <li>Go to your account settings or profile page.</li>
+            <li>Look for and click on the "Delete My Account" link.</li>
+            </ol>
+            </li>
+            </ul>
+            <p><strong>2. Account Deletion Process</strong></p>
+            <p>To proceed with the account deletion, you will be required to:</p>
+            <ul>
+            <li>
+            <p><strong>Enter Your Password</strong>: For security reasons, you will need to confirm your identity by entering your account password.</p>
+            </li>
+            <li>
+            <p><strong>Provide a Reason for Deletion</strong>: We value your feedback and would appreciate knowing the reason for your account deletion. This information will help us improve our services in the future. Providing a reason is optional but encouraged.</p>
+            </li>
+            </ul>
+            <p><strong>3. Soft Deletion Period</strong></p>
+            <p>Once you initiate the account deletion process, your account will be placed in a "soft deletion" state for a period of 30 days. During this time:</p>
+            <ul>
+            <li>You will immediately lose access to your account and all associated data.</li>
+            <li>Your account will not be visible to other users.</li>
+            <li>No actions can be performed using your account.</li>
+            </ul>
+            <p>This 30-day period is designed to provide you with the opportunity to reconsider your decision and revert the account deletion if you change your mind.</p>
+            <p><strong>4. Request to Revert Account Deletion</strong></p>
+            <p>If you decide to revert the account deletion within the 30-day grace period, <a class="db-link-icon" href="/#contact">Contact Us</a>. We will guide you through the process to regain access to your account and all associated data.</p>
+            <p><strong>5. Permanent Deletion</strong></p>
+            <p>After the 30-day soft deletion period has elapsed, your account and all associated data will be permanently and irreversibly deleted from our system. This action is final, and there will be no way to recover your account or its contents.</p>
+            <p><strong>Contact Us</strong></p>
+            <p>If you encounter any issues with the account deletion process or have questions about this policy, please contact our support team from <a class="db-link-icon" href="/#contact">Contact Us</a>.</p>
+            <p>By proceeding with the account deletion, you acknowledge that you have read, understood, and agreed to the terms of this Account Deletion Policy.</p>
+            <p>[End of Account Deletion Instructions and Policy]</p>
+    </div>
+</section>

resources/views/privacy.antlers.html

@@ -0,0 +1,5 @@
+<section>
+    <div class="text-light px-7" style="min-height: 100vh;">
+        <p class="text-light my-auto">{{ content }}</p>
+    </div>
+</section>

webpack.mix.js

@@ -17,9 +17,11 @@ mix.postCss('resources/css/main.css', 'public/css')
 mix.postCss('resources/css/aos.css', 'public/css')
 
 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')
 
+
 if (mix.inProduction()) {
    mix.version();
 }