done with overall frontend structure

content/collections/article.yaml

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

content/collections/article/the-bola-1.md

@@ -0,0 +1,11 @@
+---
+id: f1c71af9-e3fc-459e-8cda-e4a4be1b10f3
+blueprint: article
+title: 'The Bola 1'
+author: ab0729b7-bf3b-4b76-930d-938ff5d0a937
+updated_by: ab0729b7-bf3b-4b76-930d-938ff5d0a937
+updated_at: 1710380861
+date_field: '2024-03-13 08:50'
+image: group-6775.jpg
+---
+Something Something

content/collections/article/the-bola-2.md

@@ -0,0 +1,12 @@
+---
+id: 5adec921-111f-41b1-ab60-f29e0ffd2f58
+blueprint: article
+title: 'The Bola 2'
+author: ab0729b7-bf3b-4b76-930d-938ff5d0a937
+updated_by: ab0729b7-bf3b-4b76-930d-938ff5d0a937
+updated_at: 1710380884
+duplicated_from: f1c71af9-e3fc-459e-8cda-e4a4be1b10f3
+date_field: '2024-03-13 08:50'
+image: group-6774.jpg
+---
+Something Something 2

content/collections/article/the-bola-3.md

@@ -0,0 +1,12 @@
+---
+id: e41505ec-bbe3-456c-9bbd-36dcc0950727
+blueprint: article
+title: 'The Bola 3'
+author: ab0729b7-bf3b-4b76-930d-938ff5d0a937
+updated_by: ab0729b7-bf3b-4b76-930d-938ff5d0a937
+updated_at: 1710380897
+duplicated_from: 5adec921-111f-41b1-ab60-f29e0ffd2f58
+date_field: '2024-03-13 08:50'
+image: group-6773.jpg
+---
+Something Something 3

content/collections/pages/booking.md

@@ -0,0 +1,9 @@
+---
+id: 74666b69-45fd-44d0-a7c5-ae56983b63a0
+blueprint: page
+title: Booking
+author: ab0729b7-bf3b-4b76-930d-938ff5d0a937
+template: booking
+updated_by: ab0729b7-bf3b-4b76-930d-938ff5d0a937
+updated_at: 1710224101
+---

content/collections/pages/home.md

@@ -1,16 +1,9 @@
 ---
-title: Home
 id: home
-template: home
 blueprint: pages
+title: Home
+template: home
+author: ab0729b7-bf3b-4b76-930d-938ff5d0a937
+updated_by: ab0729b7-bf3b-4b76-930d-938ff5d0a937
+updated_at: 1710227330
 ---
-## Welcome to your brand new Statamic site!
-
-Not sure where to do next? Here are a few ideas, but feel free to explore in your own way, in your own time.asdasdasdasdasd
-
-- [Jump into the Control Panel](/cp) and edit this page or begin setting up your own collections and blueprints.
-- [Head to the docs](https://statamic.dev) and learn how Statamic works.
-- [Watch some Statamic videos](https://youtube.com/statamic) on YouTube.
-- [Join our Discord chat](https://statamic.com/discord) and meet thousands of other Statamic developers.
-- [Start a discussion](https://github.com/statamic/cms/discussions) and get answers to your questions.
-- [Star Statamic on Github](https://github.com/statamic/cms) if you enjoy using it!

content/collections/pages/news.md

@@ -0,0 +1,9 @@
+---
+id: 80e50847-bb80-4980-a9df-5ffbc9b8dc86
+blueprint: page
+title: News
+author: ab0729b7-bf3b-4b76-930d-938ff5d0a937
+template: news
+updated_by: ab0729b7-bf3b-4b76-930d-938ff5d0a937
+updated_at: 1710225993
+---

content/collections/profile.yaml

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

content/collections/profile/address.md

@@ -0,0 +1,10 @@
+---
+id: 0ac0479d-2171-4cf4-bf4a-4fd6867c1aa1
+blueprint: profile
+title: Address
+updated_by: ab0729b7-bf3b-4b76-930d-938ff5d0a937
+updated_at: 1710361450
+---
+RRI Football Park LGM Sungai Buloh,\
+Jalan Sungai Buloh, PJU4 47000\
+Petaling Jaya, Selangor.

content/globals/company_profile.yaml

@@ -0,0 +1,13 @@
+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'
+  email_office: help@thebola.club
+  site_url: 'https://thebola.club/'
+  facebook_link: 'https://www.facebook.com/'
+  twitter_link: 'https://twitter.com/home?lang=en'
+  youtube_link: 'https://www.youtube.com/'
+  instagram_link: 'https://www.instagram.com/'
+  term_of_use: '#'
+  legal_disclaimer: '#'
+  privacy_policy: '#'

content/navigation/main_menu.yaml

@@ -0,0 +1 @@
+title: 'Main Menu'

content/trees/collections/pages.yaml

@@ -1,3 +1,7 @@
 tree:
   -
     entry: home
+  -
+    entry: 74666b69-45fd-44d0-a7c5-ae56983b63a0
+  -
+    entry: 80e50847-bb80-4980-a9df-5ffbc9b8dc86

content/trees/navigation/main_menu.yaml

@@ -0,0 +1,25 @@
+tree:
+  -
+    id: 6a464765-70e5-4c05-9cdc-d584fd8b6fff
+    title: Home
+    url: /
+  -
+    id: edce0946-fa1f-4ba8-8217-c600123b3e11
+    title: Booking
+    url: /booking
+  -
+    id: 3585527c-934f-4bc5-8a6a-b3674f2cafea
+    title: News
+    url: /news
+  -
+    id: a88cf8cc-842b-45cb-98f6-6edb88431627
+    title: Download
+    url: /download
+  -
+    id: c23fcb6b-2e4e-4626-a525-447d3e1cfb7f
+    title: Contact
+    url: /contact
+  -
+    id: e913b861-ce87-448d-8243-7fbd48b53cb5
+    title: Register
+    url: /register

package-lock.json

@@ -5,6 +5,7 @@
     "packages": {
         "": {
             "dependencies": {
+                "aos": "^3.0.0-beta.6",
                 "bootstrap-icons": "^1.11.3",
                 "build": "^0.1.4",
                 "npm": "^10.5.0",
@@ -2866,6 +2867,16 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/aos": {
+            "version": "3.0.0-beta.6",
+            "resolved": "https://registry.npmjs.org/aos/-/aos-3.0.0-beta.6.tgz",
+            "integrity": "sha512-VLWrpq8bfAWcetynVHMMrqdC+89Qq/Ym6UBJbHB4crIwp3RR8uq1dNGgsFzoDl03S43rlVMK+na3r5+oUCZsYw==",
+            "dependencies": {
+                "classlist-polyfill": "^1.2.0",
+                "lodash.debounce": "^4.0.8",
+                "lodash.throttle": "^4.1.1"
+            }
+        },
         "node_modules/arg": {
             "version": "5.0.2",
             "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -3565,6 +3576,11 @@
                 "safe-buffer": "^5.0.1"
             }
         },
+        "node_modules/classlist-polyfill": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
+            "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ=="
+        },
         "node_modules/clean-css": {
             "version": "5.3.3",
             "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
@@ -6267,8 +6283,7 @@
         "node_modules/lodash.debounce": {
             "version": "4.0.8",
             "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-            "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
-            "dev": true
+            "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
         },
         "node_modules/lodash.isplainobject": {
             "version": "4.0.6",
@@ -6288,6 +6303,11 @@
             "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
             "dev": true
         },
+        "node_modules/lodash.throttle": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+            "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+        },
         "node_modules/lodash.uniq": {
             "version": "4.5.0",
             "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",

package.json

@@ -24,6 +24,7 @@
         "vue-template-compiler": "^2.6.12"
     },
     "dependencies": {
+        "aos": "^3.0.0-beta.6",
         "bootstrap-icons": "^1.11.3",
         "build": "^0.1.4",
         "npm": "^10.5.0",

public/assets/.meta/5.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 186586
+last_modified: 1709868173
+width: 1920
+height: 722
+mime_type: image/jpeg
+duration: null

public/assets/.meta/6.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 317846
+last_modified: 1709868173
+width: 1920
+height: 312
+mime_type: image/jpeg
+duration: null

public/assets/.meta/7.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 264606
+last_modified: 1709868173
+width: 1920
+height: 533
+mime_type: image/jpeg
+duration: null

public/assets/.meta/Group 6743.jpg.yaml

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

public/assets/.meta/Group 6770.jpg.yaml

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

public/assets/.meta/Group 6771.jpg.yaml

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

public/assets/.meta/Group 6772.jpg.yaml

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

public/assets/.meta/Group 6773.jpg.yaml

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

public/assets/.meta/Group 6777.jpg.yaml

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

public/assets/.meta/Group 6778.jpg.yaml

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

public/assets/.meta/Group 6779.jpg.yaml

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

public/assets/.meta/Icon awesome-facebook-f.svg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 397
+last_modified: 1709868173
+width: 12.963
+height: 24.204
+mime_type: image/svg+xml
+duration: null

public/assets/.meta/Icon awesome-gamepad.svg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 733
+last_modified: 1709868173
+width: 39.492
+height: 19.749
+mime_type: image/svg+xml
+duration: null

public/assets/.meta/Icon awesome-google.svg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 471
+last_modified: 1709868173
+width: 20.465
+height: 20.8
+mime_type: image/svg+xml
+duration: null

public/assets/.meta/Icon awesome-instagram.svg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 1125
+last_modified: 1709868173
+width: 19.674
+height: 19.669
+mime_type: image/svg+xml
+duration: null

public/assets/.meta/Icon awesome-stream.svg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 629
+last_modified: 1709868173
+width: 31.285
+height: 27.375
+mime_type: image/svg+xml
+duration: null

public/assets/.meta/Icon awesome-youtube.svg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 601
+last_modified: 1709868173
+width: 23.644
+height: 16.625
+mime_type: image/svg+xml
+duration: null

public/assets/.meta/Icon ionic-logo-twitter.svg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 778
+last_modified: 1709868173
+width: 22.308
+height: 18.153
+mime_type: image/svg+xml
+duration: null

public/assets/.meta/Icon material-book.svg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 338
+last_modified: 1709868173
+width: 24.0
+height: 30.0
+mime_type: image/svg+xml
+duration: null

public/assets/.meta/Icon material-insert-chart.svg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 385
+last_modified: 1709868173
+width: 27.0
+height: 27.0
+mime_type: image/svg+xml
+duration: null

public/assets/.meta/Mask Group 6.png.yaml

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

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

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

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

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

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

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

public/assets/.meta/logo_1.png.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 126144
+last_modified: 1709868173
+width: 512
+height: 512
+mime_type: image/png
+duration: null

public/assets/.meta/screenshot-2024-03-09-205317.png.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 271015
+last_modified: 1710380400
+width: 476
+height: 589
+mime_type: image/png
+duration: null

public/assets/.meta/thebola2-1710319654.png.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 156135
+last_modified: 1710319654
+width: 715
+height: 502
+mime_type: image/png
+duration: null

public/assets/.meta/thebola2-1710319771.png.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 156135
+last_modified: 1710319771
+width: 715
+height: 502
+mime_type: image/png
+duration: null

public/assets/.meta/thebola2-1710380312.png.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 156135
+last_modified: 1710380312
+width: 715
+height: 502
+mime_type: image/png
+duration: null

public/assets/.meta/thebola2-1710380383.png.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 156135
+last_modified: 1710380383
+width: 715
+height: 502
+mime_type: image/png
+duration: null

public/assets/.meta/thebola2-1710380755.png.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 156135
+last_modified: 1710380755
+width: 715
+height: 502
+mime_type: image/png
+duration: null

public/assets/.meta/thebola2.png.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 156135
+last_modified: 1710319283
+width: 715
+height: 502
+mime_type: image/png
+duration: null

public/assets/image/.meta/2.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 403701
+last_modified: 1709868173
+width: 1920
+height: 970
+mime_type: image/jpeg
+duration: null

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

@@ -0,0 +1,7 @@
+data: {  }
+size: 186376
+last_modified: 1710210778
+width: 1920
+height: 800
+mime_type: image/png
+duration: null

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

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

public/assets/image/.meta/8.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 268590
+last_modified: 1709868173
+width: 1041
+height: 308
+mime_type: image/jpeg
+duration: null

public/assets/image/.meta/Group_6741.jpg.yaml

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

public/assets/image/.meta/Group_6742.jpg.yaml

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

public/assets/image/.meta/Group_6774.jpg.yaml

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

public/assets/image/.meta/Group_6775.jpg.yaml

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

public/assets/image/.meta/Group_6780.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 62760
+last_modified: 1710210778
+width: 640
+height: 304
+mime_type: image/jpeg
+duration: null

public/assets/image/.meta/Group_6781.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 291531
+last_modified: 1710210778
+width: 1920
+height: 359
+mime_type: image/jpeg
+duration: null

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

@@ -0,0 +1,7 @@
+data: {  }
+size: 9892
+last_modified: 1709868173
+width: 226
+height: 69
+mime_type: image/png
+duration: null

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

@@ -0,0 +1,7 @@
+data: {  }
+size: 6163
+last_modified: 1709868173
+width: 238
+height: 60
+mime_type: image/png
+duration: null

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

@@ -0,0 +1,7 @@
+data: {  }
+size: 194054
+last_modified: 1710210778
+width: 1920
+height: 526
+mime_type: image/png
+duration: null

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

@@ -0,0 +1,7 @@
+data: {  }
+size: 8259
+last_modified: 1709868173
+width: 203
+height: 68
+mime_type: image/png
+duration: null

public/css/main.css

@@ -1,25 +1,30 @@
 @import url(https://db.onlinewebfonts.com/c/2206d6cc490084998d531e8c1b2cbb4a?family=Druk+Wide+Bold);
 @import url(https://fonts.googleapis.com/css?family=Poppins);
-:root{
-    --primary-clr: #67EB47;
+:root {
+    --primary-clr: #67eb47;
     --dark-clr: #000;
-    --light-clr: #FFF;
+    --light-clr: #fff;
 }
 
-*{
+/* DEFAULT */
+* {
     padding: 0;
     margin: 0;
 }
 
-body{
-    font-family: 'Poppins'
+body {
+    font-family: "Poppins";
 }
 
-.text-db{
+p {
+    font-size: clamp(1rem, 0.938vw, 1.125rem);
+}
+
+.text-db {
     color: var(--primary-clr);
 }
 
-.text-highlight{
+.text-highlight {
     font-family: "Druk Wide Bold" !important;
 }
 
@@ -30,54 +35,42 @@ body{
     max-width: -moz-fit-content;
     max-width: fit-content;
     border: none;
-
 }
 
-#main-nav .nav-item a{
-    color: var(--light-clr);
-    transition: all 0.5s ease-in-out;
-    font-size: clamp(18px,1vw,23px);
+.db-h3 {
+    font-size: clamp(2.2rem, 2.083vw, 2.5rem);
+    line-height: clamp(2.925rem, 2.604vw, 3.125rem);
     font-weight: 500;
 }
 
-#main-nav .nav-item a:hover{
-    color: var(--primary-clr);
-
-}
-
-#main-nav .nav-item a.active{
-    color: var(--primary-clr);
-}
-
-.db-p{
-    font-size: clamp(0.9rem,1vw,1.2rem);
-    line-height: 2rem;
-}
-
-.db-h5{
-    font-size: clamp(18px,1.2vw,23px);
-    line-height: 3rem;
+.db-h5 {
+    font-size: clamp(1.175rem, 1.146vw, 1.375rem);
+    line-height: clamp(1.7rem,2.083vw,2.5rem);
 }
 
-.db-h3{
-    font-size: clamp(2rem,2.3vw,3.5rem);
+.db-h6 {
+    font-size: clamp(1.25rem, 1vw, 1.75rem);
     font-weight: 500;
 }
 
-.db-h6{
-    font-size: clamp(1.25rem,1vw,1.75rem);
-    font-weight: 500;
+.about-paragraph {
+    width: 100%;
 }
 
-.about-paragraph{
+.feature-paragraph {
     width: 100%;
 }
 
-.feature-paragraph{
-    width: 100%;
+.section-2 {
+    padding: 4rem 3rem;
+    background-size: cover;
+    padding-top: 10rem;
+    padding-bottom: 5rem;
+    background-repeat: no-repeat;
+    background-position: center top;
 }
 
-.section3-img{
+.section3-img {
     background-size: cover;
     background-position: left;
     width: 100%;
@@ -85,7 +78,7 @@ body{
     border: 1px solid gray;
 }
 
-.db-input{
+.db-input {
     background-color: black;
     padding: 1.125rem 0;
     border: none;
@@ -93,405 +86,292 @@ body{
     border-bottom: 2px solid var(--primary-clr);
     width: 100%;
     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: 1; /* Firefox */
+    opacity: 0.5; /* Firefox */
 }
 
 .db-input::placeholder {
     color: var(--light-clr);
-    opacity: 1; /* Firefox */
+    opacity: 0.5; /* Firefox */
 }
 
-.db-input:focus-visible{
+.db-input:focus-visible {
     outline: none;
 }
 
+/* HERO - SECTION 1*/
+.hero-text-highlight {
+    font-size: 2.3rem;
+    line-height: 2.8rem;
+    font-weight: bold;
+}
+
+.hero-text-description {
+    font-size: clamp(1.563rem, 1vw, 1.563rem);
+    line-height: 2.5rem;
+}
+
+
+
+/* NAVBAR */
+#main-nav {
+    padding: 2rem 3rem;
+}
+
+.nav-logo-desktop {
+    width: 3.75rem;
+    height: 3.75rem;
+}
+
+.nav-logo-text {
+    font-size: clamp(1.313rem, 1.146vw, 1.375rem);
+    padding-left: 1rem;
+    vertical-align: middle;
+}
+
+#main-nav .nav-item {
+    padding: 0;
+}
+
+#main-nav .nav-item a {
+    color: var(--light-clr);
+    transition: all 0.5s ease-in-out;
+    font-size: 1.25rem;
+    font-weight: 500;
+}
+
+#main-nav .nav-item a:hover {
+    color: var(--primary-clr);
+}
+
+#main-nav .nav-item a.active {
+    color: var(--primary-clr);
+}
+
+/* FOOTER */
+.footer-container{
+    width: 100%;
+}
+
+.footer-logo{
+    width: 337px;
+    margin-bottom: 5rem;
+}
+
+.footer-details-heading{
+    font-size: 1.563rem;
+}
+
+.footer-details-desc{
+    line-height: 30px;
+    font-size: 1.25rem;
+    font-weight: normal;
+}
+
+.db-link{
+    color: var(--light-clr);
+    text-decoration: none;
+    transition: all 200ms ease-in-out;
+}
+
+.db-link:hover{
+    color: var(--primary-clr);
+}
+
+.db-link-icon{
+    text-decoration: none;
+    color: var(--primary-clr);
+    transition: all 200ms ease-in-out;
+}
+
+.db-link-icon:hover{
+    color: var(--light-clr);
+}
+
+.section-5 {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.article-container{
+    margin-bottom: 5.25rem;
+}
+
+.article-item{
+    padding-top: 80%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+.article-details{
+    height: 100%;
+    width: 100%;
+    top:0;
+    left:0
+}
+
+.article-details-datetime{
+    width: 100%;
+    height: -moz-fit-content;
+    height: fit-content;
+}
+
+.article-details-link{
+    width: 100%;
+    height: -moz-fit-content;
+    height: fit-content;
+}
+
+.article-details-line{
+    width: 60px;
+    height: 5px;
+    opacity: 1;
+}
+
+.article-details-href{
+    text-decoration: none;
+    vertical-align: middle;
+}
+
+.booking-container{
+    margin-bottom: 5.25rem;
+    overflow: hidden;
+}
+
+.booking-item{
+    padding-top: 80%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+.booking-details{
+    height: 100%;
+    width: 100%;
+    top:0;
+    left:0
+}
+
+.booking-overlay{
+    background-color: rgba(0, 0, 0, 0.5);
+    width: 100%;
+    padding: 1.688rem 3.625rem;
+    transition: all 300ms ease-in-out;
+    height: -moz-fit-content;
+    height: fit-content;
+}
+
+.booking-item.active .booking-overlay{
+    background-color: rgba(103, 235, 71, 0.5);
+}
+
+
+.booking-item:hover .booking-overlay{
+    background-color: rgba(103, 235, 71, 0.5);
+}
+
+.container-contactus{
+    padding-left: 6.5rem;
+    padding-right: 6.5rem;
+}
+
+
 @media (min-width: 768px) {
+    #main-nav {
+        padding: 2rem 4.5rem;
+    }
+
+    .hero-text-highlight {
+        font-size: clamp(4rem, 3.646vw, 4.375rem);
+        line-height: clamp(4.2rem, 3.75vw, 4.5rem);
+    }
+
+    .hero-text-description {
+        font-size: clamp(1.563rem, 1.302vw, 1.563rem);
+        line-height: 2.5rem;
+    }
+
+    .section2 {
+        padding: 3.75rem 3rem;
+    }
+
+    .section-8{
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center top;
+        padding: 7.5rem 3rem;
+    }
+
+    #main-nav {
+        padding: 2rem 4.5rem;
+    }
 
-    .about-paragraph{
+    .about-paragraph {
         width: 70%;
     }
 
-    .feature-paragraph{
+    .feature-paragraph {
         width: 80%;
     }
 
-    .section3-img{
+    .section3-img {
         background-position: center;
     }
 
+    .container-contactus{
+        padding-left: 9.738rem;
+        padding-right: 8.438rem;
+    }
+
+    .footer-logo{
+        width: 237px;
+    }
+
+}
+
+@media (min-width: 992px) {
+    #main-nav .nav-item {
+        padding: 0 1.875rem;
+    }
+
+    .article-container  {
+        padding-left: 8.438rem;
+        padding-right: 8.438rem;
+    }
 }
 
 /* UTILS */
-.py-6{
+.p-7 {
+    padding: 3.75rem;
+}
+
+.px-7 {
+    padding: 0 3.75rem;
+}
+
+.py-6 {
     padding-top: 4.5rem;
     padding-bottom: 4.5rem;
 }
 
-.py-7{
+.py-7 {
     padding-top: 5rem;
     padding-bottom: 5rem;
 }
 
-.my-7{
+.my-7 {
     margin-top: 5rem;
     margin-bottom: 5rem;
 }
 
-/* NORMALIZE CSS */
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-
-/* Document
-   ========================================================================== */
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-
- html {
-    line-height: 1.15; /* 1 */
-    -webkit-text-size-adjust: 100%; /* 2 */
-  }
-
-  /* Sections
-     ========================================================================== */
-
-  /**
-   * Remove the margin in all browsers.
-   */
-
-  body {
-    margin: 0;
-  }
-
-  /**
-   * Render the `main` element consistently in IE.
-   */
-
-  main {
-    display: block;
-  }
-
-  /**
-   * Correct the font size and margin on `h1` elements within `section` and
-   * `article` contexts in Chrome, Firefox, and Safari.
-   */
-
-  h1 {
-    font-size: 2em;
-    margin: 0.67em 0;
-  }
-
-  /* Grouping content
-     ========================================================================== */
-
-  /**
-   * 1. Add the correct box sizing in Firefox.
-   * 2. Show the overflow in Edge and IE.
-   */
-
-  hr {
-    box-sizing: content-box; /* 1 */
-    height: 0; /* 1 */
-    overflow: visible; /* 2 */
-  }
-
-  /**
-   * 1. Correct the inheritance and scaling of font size in all browsers.
-   * 2. Correct the odd `em` font sizing in all browsers.
-   */
-
-  pre {
-    font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
-  }
-
-  /* Text-level semantics
-     ========================================================================== */
-
-  /**
-   * Remove the gray background on active links in IE 10.
-   */
-
-  a {
-    background-color: transparent;
-  }
-
-  /**
-   * 1. Remove the bottom border in Chrome 57-
-   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
-   */
-
-  abbr[title] {
-    border-bottom: none; /* 1 */
-    text-decoration: underline; /* 2 */
-    -webkit-text-decoration: underline dotted;
-            text-decoration: underline dotted; /* 2 */
-  }
-
-  /**
-   * Add the correct font weight in Chrome, Edge, and Safari.
-   */
-
-  b,
-  strong {
-    font-weight: bolder;
-  }
-
-  /**
-   * 1. Correct the inheritance and scaling of font size in all browsers.
-   * 2. Correct the odd `em` font sizing in all browsers.
-   */
-
-  code,
-  kbd,
-  samp {
-    font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
-  }
-
-  /**
-   * Add the correct font size in all browsers.
-   */
-
-  small {
-    font-size: 80%;
-  }
-
-  /**
-   * Prevent `sub` and `sup` elements from affecting the line height in
-   * all browsers.
-   */
-
-  sub,
-  sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-
-  sub {
-    bottom: -0.25em;
-  }
-
-  sup {
-    top: -0.5em;
-  }
-
-  /* Embedded content
-     ========================================================================== */
-
-  /**
-   * Remove the border on images inside links in IE 10.
-   */
-
-  img {
-    border-style: none;
-  }
-
-  /* Forms
-     ========================================================================== */
-
-  /**
-   * 1. Change the font styles in all browsers.
-   * 2. Remove the margin in Firefox and Safari.
-   */
-
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
-    font-family: inherit; /* 1 */
-    font-size: 100%; /* 1 */
-    line-height: 1.15; /* 1 */
-    margin: 0; /* 2 */
-  }
-
-  /**
-   * Show the overflow in IE.
-   * 1. Show the overflow in Edge.
-   */
-
-  button,
-  input { /* 1 */
-    overflow: visible;
-  }
-
-  /**
-   * Remove the inheritance of text transform in Edge, Firefox, and IE.
-   * 1. Remove the inheritance of text transform in Firefox.
-   */
-
-  button,
-  select { /* 1 */
-    text-transform: none;
-  }
-
-  /**
-   * Correct the inability to style clickable types in iOS and Safari.
-   */
-
-  button,
-  [type="button"],
-  [type="reset"],
-  [type="submit"] {
-    -webkit-appearance: button;
-  }
-
-  /**
-   * Remove the inner border and padding in Firefox.
-   */
-
-  button::-moz-focus-inner,
-  [type="button"]::-moz-focus-inner,
-  [type="reset"]::-moz-focus-inner,
-  [type="submit"]::-moz-focus-inner {
-    border-style: none;
-    padding: 0;
-  }
-
-  /**
-   * Restore the focus styles unset by the previous rule.
-   */
-
-  button:-moz-focusring,
-  [type="button"]:-moz-focusring,
-  [type="reset"]:-moz-focusring,
-  [type="submit"]:-moz-focusring {
-    outline: 1px dotted ButtonText;
-  }
-
-  /**
-   * Correct the padding in Firefox.
-   */
-
-  fieldset {
-    padding: 0.35em 0.75em 0.625em;
-  }
-
-  /**
-   * 1. Correct the text wrapping in Edge and IE.
-   * 2. Correct the color inheritance from `fieldset` elements in IE.
-   * 3. Remove the padding so developers are not caught out when they zero out
-   *    `fieldset` elements in all browsers.
-   */
-
-  legend {
-    box-sizing: border-box; /* 1 */
-    color: inherit; /* 2 */
-    display: table; /* 1 */
-    max-width: 100%; /* 1 */
-    padding: 0; /* 3 */
-    white-space: normal; /* 1 */
-  }
-
-  /**
-   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
-   */
-
-  progress {
-    vertical-align: baseline;
-  }
-
-  /**
-   * Remove the default vertical scrollbar in IE 10+.
-   */
-
-  textarea {
-    overflow: auto;
-  }
-
-  /**
-   * 1. Add the correct box sizing in IE 10.
-   * 2. Remove the padding in IE 10.
-   */
-
-  [type="checkbox"],
-  [type="radio"] {
-    box-sizing: border-box; /* 1 */
-    padding: 0; /* 2 */
-  }
-
-  /**
-   * Correct the cursor style of increment and decrement buttons in Chrome.
-   */
-
-  [type="number"]::-webkit-inner-spin-button,
-  [type="number"]::-webkit-outer-spin-button {
-    height: auto;
-  }
-
-  /**
-   * 1. Correct the odd appearance in Chrome and Safari.
-   * 2. Correct the outline style in Safari.
-   */
-
-  [type="search"] {
-    -webkit-appearance: textfield; /* 1 */
-    outline-offset: -2px; /* 2 */
-  }
-
-  /**
-   * Remove the inner padding in Chrome and Safari on macOS.
-   */
-
-  [type="search"]::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-
-  /**
-   * 1. Correct the inability to style clickable types in iOS and Safari.
-   * 2. Change font properties to `inherit` in Safari.
-   */
-
-  ::-webkit-file-upload-button {
-    -webkit-appearance: button; /* 1 */
-    font: inherit; /* 2 */
-  }
-
-  /* Interactive
-     ========================================================================== */
-
-  /*
-   * Add the correct display in Edge, IE 10+, and Firefox.
-   */
-
-  details {
-    display: block;
-  }
-
-  /*
-   * Add the correct display in all browsers.
-   */
-
-  summary {
-    display: list-item;
-  }
-
-  /* Misc
-     ========================================================================== */
-
-  /**
-   * Add the correct display in IE 10+.
-   */
-
-  template {
-    display: none;
-  }
-
-  /**
-   * Add the correct display in IE 10.
-   */
-
-  [hidden] {
-    display: none;
-  }
-
-

public/css/normalize.css

@@ -0,0 +1,353 @@
+
+/* NORMALIZE CSS */
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+
+  /* Sections
+     ========================================================================== */
+
+  /**
+   * Remove the margin in all browsers.
+   */
+
+  body {
+    margin: 0;
+  }
+
+  /**
+   * Render the `main` element consistently in IE.
+   */
+
+  main {
+    display: block;
+  }
+
+  /**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+
+  /* Grouping content
+     ========================================================================== */
+
+  /**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+
+  /* Text-level semantics
+     ========================================================================== */
+
+  /**
+   * Remove the gray background on active links in IE 10.
+   */
+
+  a {
+    background-color: transparent;
+  }
+
+  /**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    -webkit-text-decoration: underline dotted;
+            text-decoration: underline dotted; /* 2 */
+  }
+
+  /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+
+  /**
+   * Add the correct font size in all browsers.
+   */
+
+  small {
+    font-size: 80%;
+  }
+
+  /**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  /* Embedded content
+     ========================================================================== */
+
+  /**
+   * Remove the border on images inside links in IE 10.
+   */
+
+  img {
+    border-style: none;
+  }
+
+  /* Forms
+     ========================================================================== */
+
+  /**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+
+  /**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+
+  button,
+  input { /* 1 */
+    overflow: visible;
+  }
+
+  /**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+
+  button,
+  select { /* 1 */
+    text-transform: none;
+  }
+
+  /**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+
+  /**
+   * Remove the inner border and padding in Firefox.
+   */
+
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+
+  /**
+   * Restore the focus styles unset by the previous rule.
+   */
+
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+
+  /**
+   * Correct the padding in Firefox.
+   */
+
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+
+  /**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+
+  legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+  }
+
+  /**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  /**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+
+  textarea {
+    overflow: auto;
+  }
+
+  /**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+
+  /**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  /**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+
+  [type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+
+  /**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  /**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+
+  /* Interactive
+     ========================================================================== */
+
+  /*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+
+  details {
+    display: block;
+  }
+
+  /*
+   * Add the correct display in all browsers.
+   */
+
+  summary {
+    display: list-item;
+  }
+
+  /* Misc
+     ========================================================================== */
+
+  /**
+   * Add the correct display in IE 10+.
+   */
+
+  template {
+    display: none;
+  }
+
+  /**
+   * Add the correct display in IE 10.
+   */
+
+  [hidden] {
+    display: none;
+  }
+

public/js/aos.js

@@ -0,0 +1,508 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./resources/js/aos.js":
+/*!*****************************!*\
+  !*** ./resources/js/aos.js ***!
+  \*****************************/
+/***/ (function(module, exports, __webpack_require__) {
+
+var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;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 (e, t) {
+  "object" == ( false ? 0 : _typeof(exports)) && "undefined" != "object" ? module.exports = t() :  true ? !(__WEBPACK_AMD_DEFINE_FACTORY__ = (t),
+		__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
+		(__WEBPACK_AMD_DEFINE_FACTORY__.call(exports, __webpack_require__, exports, module)) :
+		__WEBPACK_AMD_DEFINE_FACTORY__),
+		__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)) : 0;
+}(this, function () {
+  "use strict";
+
+  var e = "undefined" != typeof window ? window : "undefined" != typeof __webpack_require__.g ? __webpack_require__.g : "undefined" != typeof self ? self : {},
+    t = "Expected a function",
+    n = NaN,
+    o = "[object Symbol]",
+    i = /^\s+|\s+$/g,
+    a = /^[-+]0x[0-9a-f]+$/i,
+    r = /^0b[01]+$/i,
+    c = /^0o[0-7]+$/i,
+    s = parseInt,
+    u = "object" == _typeof(e) && e && e.Object === Object && e,
+    d = "object" == (typeof self === "undefined" ? "undefined" : _typeof(self)) && self && self.Object === Object && self,
+    l = u || d || Function("return this")(),
+    f = Object.prototype.toString,
+    m = Math.max,
+    p = Math.min,
+    b = function b() {
+      return l.Date.now();
+    };
+  function v(e, n, o) {
+    var i,
+      a,
+      r,
+      c,
+      s,
+      u,
+      d = 0,
+      l = !1,
+      f = !1,
+      v = !0;
+    if ("function" != typeof e) throw new TypeError(t);
+    function y(t) {
+      var n = i,
+        o = a;
+      return i = a = void 0, d = t, c = e.apply(o, n);
+    }
+    function h(e) {
+      var t = e - u;
+      return void 0 === u || t >= n || t < 0 || f && e - d >= r;
+    }
+    function k() {
+      var e = b();
+      if (h(e)) return x(e);
+      s = setTimeout(k, function (e) {
+        var t = n - (e - u);
+        return f ? p(t, r - (e - d)) : t;
+      }(e));
+    }
+    function x(e) {
+      return s = void 0, v && i ? y(e) : (i = a = void 0, c);
+    }
+    function O() {
+      var e = b(),
+        t = h(e);
+      if (i = arguments, a = this, u = e, t) {
+        if (void 0 === s) return function (e) {
+          return d = e, s = setTimeout(k, n), l ? y(e) : c;
+        }(u);
+        if (f) return s = setTimeout(k, n), y(u);
+      }
+      return void 0 === s && (s = setTimeout(k, n)), c;
+    }
+    return n = w(n) || 0, g(o) && (l = !!o.leading, r = (f = "maxWait" in o) ? m(w(o.maxWait) || 0, n) : r, v = "trailing" in o ? !!o.trailing : v), O.cancel = function () {
+      void 0 !== s && clearTimeout(s), d = 0, i = u = a = s = void 0;
+    }, O.flush = function () {
+      return void 0 === s ? c : x(b());
+    }, O;
+  }
+  function g(e) {
+    var t = _typeof(e);
+    return !!e && ("object" == t || "function" == t);
+  }
+  function w(e) {
+    if ("number" == typeof e) return e;
+    if (function (e) {
+      return "symbol" == _typeof(e) || function (e) {
+        return !!e && "object" == _typeof(e);
+      }(e) && f.call(e) == o;
+    }(e)) return n;
+    if (g(e)) {
+      var t = "function" == typeof e.valueOf ? e.valueOf() : e;
+      e = g(t) ? t + "" : t;
+    }
+    if ("string" != typeof e) return 0 === e ? e : +e;
+    e = e.replace(i, "");
+    var u = r.test(e);
+    return u || c.test(e) ? s(e.slice(2), u ? 2 : 8) : a.test(e) ? n : +e;
+  }
+  var y = function y(e, n, o) {
+      var i = !0,
+        a = !0;
+      if ("function" != typeof e) throw new TypeError(t);
+      return g(o) && (i = "leading" in o ? !!o.leading : i, a = "trailing" in o ? !!o.trailing : a), v(e, n, {
+        leading: i,
+        maxWait: n,
+        trailing: a
+      });
+    },
+    h = "Expected a function",
+    k = NaN,
+    x = "[object Symbol]",
+    O = /^\s+|\s+$/g,
+    j = /^[-+]0x[0-9a-f]+$/i,
+    E = /^0b[01]+$/i,
+    N = /^0o[0-7]+$/i,
+    z = parseInt,
+    C = "object" == _typeof(e) && e && e.Object === Object && e,
+    A = "object" == (typeof self === "undefined" ? "undefined" : _typeof(self)) && self && self.Object === Object && self,
+    q = C || A || Function("return this")(),
+    L = Object.prototype.toString,
+    T = Math.max,
+    M = Math.min,
+    S = function S() {
+      return q.Date.now();
+    };
+  function D(e) {
+    var t = _typeof(e);
+    return !!e && ("object" == t || "function" == t);
+  }
+  function H(e) {
+    if ("number" == typeof e) return e;
+    if (function (e) {
+      return "symbol" == _typeof(e) || function (e) {
+        return !!e && "object" == _typeof(e);
+      }(e) && L.call(e) == x;
+    }(e)) return k;
+    if (D(e)) {
+      var t = "function" == typeof e.valueOf ? e.valueOf() : e;
+      e = D(t) ? t + "" : t;
+    }
+    if ("string" != typeof e) return 0 === e ? e : +e;
+    e = e.replace(O, "");
+    var n = E.test(e);
+    return n || N.test(e) ? z(e.slice(2), n ? 2 : 8) : j.test(e) ? k : +e;
+  }
+  var $ = function $(e, t, n) {
+      var o,
+        i,
+        a,
+        r,
+        c,
+        s,
+        u = 0,
+        d = !1,
+        l = !1,
+        f = !0;
+      if ("function" != typeof e) throw new TypeError(h);
+      function m(t) {
+        var n = o,
+          a = i;
+        return o = i = void 0, u = t, r = e.apply(a, n);
+      }
+      function p(e) {
+        var n = e - s;
+        return void 0 === s || n >= t || n < 0 || l && e - u >= a;
+      }
+      function b() {
+        var e = S();
+        if (p(e)) return v(e);
+        c = setTimeout(b, function (e) {
+          var n = t - (e - s);
+          return l ? M(n, a - (e - u)) : n;
+        }(e));
+      }
+      function v(e) {
+        return c = void 0, f && o ? m(e) : (o = i = void 0, r);
+      }
+      function g() {
+        var e = S(),
+          n = p(e);
+        if (o = arguments, i = this, s = e, n) {
+          if (void 0 === c) return function (e) {
+            return u = e, c = setTimeout(b, t), d ? m(e) : r;
+          }(s);
+          if (l) return c = setTimeout(b, t), m(s);
+        }
+        return void 0 === c && (c = setTimeout(b, t)), r;
+      }
+      return t = H(t) || 0, D(n) && (d = !!n.leading, a = (l = "maxWait" in n) ? T(H(n.maxWait) || 0, t) : a, f = "trailing" in n ? !!n.trailing : f), g.cancel = function () {
+        void 0 !== c && clearTimeout(c), u = 0, o = s = i = c = void 0;
+      }, g.flush = function () {
+        return void 0 === c ? r : v(S());
+      }, g;
+    },
+    W = function W() {};
+  function P(e) {
+    e && e.forEach(function (e) {
+      var t = Array.prototype.slice.call(e.addedNodes),
+        n = Array.prototype.slice.call(e.removedNodes);
+      if (function e(t) {
+        var n = void 0,
+          o = void 0;
+        for (n = 0; n < t.length; n += 1) {
+          if ((o = t[n]).dataset && o.dataset.aos) return !0;
+          if (o.children && e(o.children)) return !0;
+        }
+        return !1;
+      }(t.concat(n))) return W();
+    });
+  }
+  function Y() {
+    return window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
+  }
+  var _ = {
+      isSupported: function isSupported() {
+        return !!Y();
+      },
+      ready: function ready(e, t) {
+        var n = window.document,
+          o = new (Y())(P);
+        W = t, o.observe(n.documentElement, {
+          childList: !0,
+          subtree: !0,
+          removedNodes: !0
+        });
+      }
+    },
+    B = function B(e, t) {
+      if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
+    },
+    F = function () {
+      function e(e, t) {
+        for (var n = 0; n < t.length; n++) {
+          var o = t[n];
+          o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, o.key, o);
+        }
+      }
+      return function (t, n, o) {
+        return n && e(t.prototype, n), o && e(t, o), t;
+      };
+    }(),
+    I = Object.assign || function (e) {
+      for (var t = 1; t < arguments.length; t++) {
+        var n = arguments[t];
+        for (var o in n) Object.prototype.hasOwnProperty.call(n, o) && (e[o] = n[o]);
+      }
+      return e;
+    },
+    K = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i,
+    G = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i,
+    J = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i,
+    Q = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i;
+  function R() {
+    return navigator.userAgent || navigator.vendor || window.opera || "";
+  }
+  var U = new (function () {
+      function e() {
+        B(this, e);
+      }
+      return F(e, [{
+        key: "phone",
+        value: function value() {
+          var e = R();
+          return !(!K.test(e) && !G.test(e.substr(0, 4)));
+        }
+      }, {
+        key: "mobile",
+        value: function value() {
+          var e = R();
+          return !(!J.test(e) && !Q.test(e.substr(0, 4)));
+        }
+      }, {
+        key: "tablet",
+        value: function value() {
+          return this.mobile() && !this.phone();
+        }
+      }, {
+        key: "ie11",
+        value: function value() {
+          return "-ms-scroll-limit" in document.documentElement.style && "-ms-ime-align" in document.documentElement.style;
+        }
+      }]), e;
+    }())(),
+    V = function V(e, t) {
+      var n = void 0;
+      return U.ie11() ? (n = document.createEvent("CustomEvent")).initCustomEvent(e, !0, !0, {
+        detail: t
+      }) : n = new CustomEvent(e, {
+        detail: t
+      }), document.dispatchEvent(n);
+    },
+    X = function X(e) {
+      return e.forEach(function (e, t) {
+        return function (e, t) {
+          var n = e.options,
+            o = e.position,
+            i = e.node,
+            a = (e.data, function () {
+              e.animated && (function (e, t) {
+                t && t.forEach(function (t) {
+                  return e.classList.remove(t);
+                });
+              }(i, n.animatedClassNames), V("aos:out", i), e.options.id && V("aos:in:" + e.options.id, i), e.animated = !1);
+            });
+          n.mirror && t >= o.out && !n.once ? a() : t >= o["in"] ? e.animated || (function (e, t) {
+            t && t.forEach(function (t) {
+              return e.classList.add(t);
+            });
+          }(i, n.animatedClassNames), V("aos:in", i), e.options.id && V("aos:in:" + e.options.id, i), e.animated = !0) : e.animated && !n.once && a();
+        }(e, window.pageYOffset);
+      });
+    },
+    Z = function Z(e) {
+      for (var t = 0, n = 0; e && !isNaN(e.offsetLeft) && !isNaN(e.offsetTop);) t += e.offsetLeft - ("BODY" != e.tagName ? e.scrollLeft : 0), n += e.offsetTop - ("BODY" != e.tagName ? e.scrollTop : 0), e = e.offsetParent;
+      return {
+        top: n,
+        left: t
+      };
+    },
+    ee = function ee(e, t, n) {
+      var o = e.getAttribute("data-aos-" + t);
+      if (void 0 !== o) {
+        if ("true" === o) return !0;
+        if ("false" === o) return !1;
+      }
+      return o || n;
+    },
+    te = function te(e, t) {
+      return e.forEach(function (e, n) {
+        var o = ee(e.node, "mirror", t.mirror),
+          i = ee(e.node, "once", t.once),
+          a = ee(e.node, "id"),
+          r = t.useClassNames && e.node.getAttribute("data-aos"),
+          c = [t.animatedClassName].concat(r ? r.split(" ") : []).filter(function (e) {
+            return "string" == typeof e;
+          });
+        t.initClassName && e.node.classList.add(t.initClassName), e.position = {
+          "in": function (e, t, n) {
+            var o = window.innerHeight,
+              i = ee(e, "anchor"),
+              a = ee(e, "anchor-placement"),
+              r = Number(ee(e, "offset", a ? 0 : t)),
+              c = a || n,
+              s = e;
+            i && document.querySelectorAll(i) && (s = document.querySelectorAll(i)[0]);
+            var u = Z(s).top - o;
+            switch (c) {
+              case "top-bottom":
+                break;
+              case "center-bottom":
+                u += s.offsetHeight / 2;
+                break;
+              case "bottom-bottom":
+                u += s.offsetHeight;
+                break;
+              case "top-center":
+                u += o / 2;
+                break;
+              case "center-center":
+                u += o / 2 + s.offsetHeight / 2;
+                break;
+              case "bottom-center":
+                u += o / 2 + s.offsetHeight;
+                break;
+              case "top-top":
+                u += o;
+                break;
+              case "bottom-top":
+                u += o + s.offsetHeight;
+                break;
+              case "center-top":
+                u += o + s.offsetHeight / 2;
+            }
+            return u + r;
+          }(e.node, t.offset, t.anchorPlacement),
+          out: o && function (e, t) {
+            window.innerHeight;
+            var n = ee(e, "anchor"),
+              o = ee(e, "offset", t),
+              i = e;
+            return n && document.querySelectorAll(n) && (i = document.querySelectorAll(n)[0]), Z(i).top + i.offsetHeight - o;
+          }(e.node, t.offset)
+        }, e.options = {
+          once: i,
+          mirror: o,
+          animatedClassNames: c,
+          id: a
+        };
+      }), e;
+    },
+    ne = function ne() {
+      var e = document.querySelectorAll("[data-aos]");
+      return Array.prototype.map.call(e, function (e) {
+        return {
+          node: e
+        };
+      });
+    },
+    oe = [],
+    ie = !1,
+    ae = {
+      offset: 120,
+      delay: 0,
+      easing: "ease",
+      duration: 400,
+      disable: !1,
+      once: !1,
+      mirror: !1,
+      anchorPlacement: "top-bottom",
+      startEvent: "DOMContentLoaded",
+      animatedClassName: "aos-animate",
+      initClassName: "aos-init",
+      useClassNames: !1,
+      disableMutationObserver: !1,
+      throttleDelay: 99,
+      debounceDelay: 50
+    },
+    re = function re() {
+      return document.all && !window.atob;
+    },
+    ce = function ce() {
+      arguments.length > 0 && void 0 !== arguments[0] && arguments[0] && (ie = !0), ie && (oe = te(oe, ae), X(oe), window.addEventListener("scroll", y(function () {
+        X(oe, ae.once);
+      }, ae.throttleDelay)));
+    },
+    se = function se() {
+      if (oe = ne(), de(ae.disable) || re()) return ue();
+      ce();
+    },
+    ue = function ue() {
+      oe.forEach(function (e, t) {
+        e.node.removeAttribute("data-aos"), e.node.removeAttribute("data-aos-easing"), e.node.removeAttribute("data-aos-duration"), e.node.removeAttribute("data-aos-delay"), ae.initClassName && e.node.classList.remove(ae.initClassName), ae.animatedClassName && e.node.classList.remove(ae.animatedClassName);
+      });
+    },
+    de = function de(e) {
+      return !0 === e || "mobile" === e && U.mobile() || "phone" === e && U.phone() || "tablet" === e && U.tablet() || "function" == typeof e && !0 === e();
+    };
+  return {
+    init: function init(e) {
+      return ae = I(ae, e), oe = ne(), ae.disableMutationObserver || _.isSupported() || (console.info('\n      aos: MutationObserver is not supported on this browser,\n      code mutations observing has been disabled.\n      You may have to call "refreshHard()" by yourself.\n    '), ae.disableMutationObserver = !0), ae.disableMutationObserver || _.ready("[data-aos]", se), de(ae.disable) || re() ? ue() : (document.querySelector("body").setAttribute("data-aos-easing", ae.easing), document.querySelector("body").setAttribute("data-aos-duration", ae.duration), document.querySelector("body").setAttribute("data-aos-delay", ae.delay), -1 === ["DOMContentLoaded", "load"].indexOf(ae.startEvent) ? document.addEventListener(ae.startEvent, function () {
+        ce(!0);
+      }) : window.addEventListener("load", function () {
+        ce(!0);
+      }), "DOMContentLoaded" === ae.startEvent && ["complete", "interactive"].indexOf(document.readyState) > -1 && ce(!0), window.addEventListener("resize", $(ce, ae.debounceDelay, !0)), window.addEventListener("orientationchange", $(ce, ae.debounceDelay, !0)), oe);
+    },
+    refresh: ce,
+    refreshHard: se
+  };
+});
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/global */
+/******/ 	(() => {
+/******/ 		__webpack_require__.g = (function() {
+/******/ 			if (typeof globalThis === 'object') return globalThis;
+/******/ 			try {
+/******/ 				return this || new Function('return this')();
+/******/ 			} catch (e) {
+/******/ 				if (typeof window === 'object') return window;
+/******/ 			}
+/******/ 		})();
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module is referenced by other modules so it can't be inlined
+/******/ 	var __webpack_exports__ = __webpack_require__("./resources/js/aos.js");
+/******/ 	
+/******/ })()
+;

public/js/bootstrap.bundle.js

@@ -6279,6 +6279,19 @@ __webpack_require__.r(__webpack_exports__);
 // extracted by mini-css-extract-plugin
 
 
+/***/ }),
+
+/***/ "./resources/css/normalize.css":
+/*!*************************************!*\
+  !*** ./resources/css/normalize.css ***!
+  \*************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
 /***/ }),
 
 /***/ "./resources/css/main.css":
@@ -6292,6 +6305,19 @@ __webpack_require__.r(__webpack_exports__);
 // extracted by mini-css-extract-plugin
 
 
+/***/ }),
+
+/***/ "./resources/css/aos.css":
+/*!*******************************!*\
+  !*** ./resources/css/aos.css ***!
+  \*******************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
 /***/ })
 
 /******/ 	});
@@ -6382,6 +6408,8 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 		var installedChunks = {
 /******/ 			"/js/bootstrap.bundle": 0,
 /******/ 			"css/main": 0,
+/******/ 			"css/aos": 0,
+/******/ 			"css/normalize": 0,
 /******/ 			"css/bootstrap": 0
 /******/ 		};
 /******/ 		
@@ -6432,9 +6460,11 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
 /******/ 	// This entry module depends on other loaded chunks and execution need to be delayed
-/******/ 	__webpack_require__.O(undefined, ["css/main","css/bootstrap"], () => (__webpack_require__("./resources/js/bootstrap.bundle.js")))
-/******/ 	__webpack_require__.O(undefined, ["css/main","css/bootstrap"], () => (__webpack_require__("./resources/css/bootstrap.css")))
-/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, ["css/main","css/bootstrap"], () => (__webpack_require__("./resources/css/main.css")))
+/******/ 	__webpack_require__.O(undefined, ["css/main","css/aos","css/normalize","css/bootstrap"], () => (__webpack_require__("./resources/js/bootstrap.bundle.js")))
+/******/ 	__webpack_require__.O(undefined, ["css/main","css/aos","css/normalize","css/bootstrap"], () => (__webpack_require__("./resources/css/bootstrap.css")))
+/******/ 	__webpack_require__.O(undefined, ["css/main","css/aos","css/normalize","css/bootstrap"], () => (__webpack_require__("./resources/css/normalize.css")))
+/******/ 	__webpack_require__.O(undefined, ["css/main","css/aos","css/normalize","css/bootstrap"], () => (__webpack_require__("./resources/css/main.css")))
+/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, ["css/main","css/aos","css/normalize","css/bootstrap"], () => (__webpack_require__("./resources/css/aos.css")))
 /******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
 /******/ 	
 /******/ })()

public/mix-manifest.json

@@ -1,6 +1,9 @@
 {
     "/js/bootstrap.bundle.js": "/js/bootstrap.bundle.js",
     "/js/main.js": "/js/main.js",
+    "/js/aos.js": "/js/aos.js",
     "/css/main.css": "/css/main.css",
+    "/css/aos.css": "/css/aos.css",
+    "/css/normalize.css": "/css/normalize.css",
     "/css/bootstrap.css": "/css/bootstrap.css"
 }

resources/blueprints/collections/article/article.yaml

@@ -0,0 +1,62 @@
+title: Article
+sections:
+  main:
+    display: Main
+    fields:
+      -
+        handle: title
+        field:
+          type: text
+          required: true
+          validate:
+            - required
+      -
+        handle: content
+        field:
+          type: markdown
+          display: Content
+          localizable: true
+      -
+        handle: image
+        field:
+          mode: list
+          container: assets
+          restrict: false
+          allow_uploads: true
+          show_filename: true
+          max_files: 1
+          min_files: 1
+          display: Image
+          type: assets
+          icon: assets
+          instructions: 'Article main image'
+          listable: hidden
+          instructions_position: above
+          visibility: visible
+      -
+        handle: date_field
+        field:
+          mode: single
+          time_enabled: true
+          time_seconds_enabled: false
+          full_width: false
+          inline: false
+          columns: 1
+          rows: 1
+          display: 'Article publish date'
+          type: date
+          icon: date
+          instructions: 'Date of article published'
+          listable: true
+          instructions_position: above
+          visibility: visible
+          validate:
+            - required
+  sidebar:
+    display: Sidebar
+    fields:
+      -
+        handle: slug
+        field:
+          type: slug
+          localizable: true

resources/blueprints/default.yaml

@@ -1,22 +0,0 @@
-title: Default
-fields:
-  -
-    handle: content
-    field:
-      type: markdown
-      display: Content
-      localizable: true
-  -
-    handle: author
-    field:
-      type: users
-      display: Author
-      default: current
-      localizable: true
-      max_items: 1
-  -
-    handle: template
-    field:
-      type: template
-      display: Template
-      localizable: true

resources/blueprints/globals/address.yaml

@@ -0,0 +1,21 @@
+sections:
+  main:
+    display: Main
+    fields:
+      -
+        handle: address
+        field:
+          restrict: false
+          automatic_line_breaks: false
+          automatic_links: false
+          escape_markup: false
+          smartypants: false
+          antlers: false
+          display: address
+          type: markdown
+          icon: markdown
+          instructions: 'your company address'
+          listable: hidden
+          instructions_position: below
+          visibility: visible
+          duplicate: false

resources/blueprints/globals/company_profile.yaml

@@ -0,0 +1,166 @@
+sections:
+  main:
+    display: Main
+    fields:
+      -
+        handle: address
+        field:
+          collapse: false
+          always_show_set_button: false
+          previews: true
+          smart_typography: false
+          buttons:
+            - h2
+            - h3
+            - bold
+            - italic
+            - unorderedlist
+            - orderedlist
+            - removeformat
+            - quote
+            - anchor
+            - image
+            - table
+          save_html: true
+          inline: false
+          toolbar_mode: fixed
+          link_noopener: false
+          link_noreferrer: false
+          target_blank: false
+          reading_time: false
+          fullscreen: true
+          allow_source: true
+          enable_input_rules: true
+          enable_paste_rules: true
+          antlers: false
+          remove_empty_nodes: false
+          display: Address
+          type: bard
+          icon: bard
+          instructions: 'your company address'
+          listable: hidden
+          instructions_position: above
+          visibility: visible
+          duplicate: false
+      -
+        handle: phone_no
+        field:
+          input_type: tel
+          antlers: false
+          display: 'Phone No'
+          type: text
+          icon: text
+          instructions: 'your company contact number'
+          listable: hidden
+          instructions_position: above
+          visibility: visible
+          duplicate: false
+      -
+        handle: email_office
+        field:
+          input_type: email
+          antlers: false
+          display: 'Email office'
+          type: text
+          icon: text
+          instructions: 'your office email'
+          listable: hidden
+          instructions_position: above
+          visibility: visible
+          duplicate: false
+      -
+        handle: site_url
+        field:
+          input_type: url
+          antlers: false
+          display: 'site url'
+          type: text
+          icon: text
+          instructions: 'your company website address link'
+          listable: hidden
+          instructions_position: above
+          visibility: visible
+      -
+        handle: facebook_link
+        field:
+          input_type: url
+          antlers: false
+          display: 'Facebook link'
+          type: text
+          icon: text
+          instructions: 'your company official facebook page link'
+          listable: hidden
+          instructions_position: above
+          visibility: visible
+      -
+        handle: twitter_link
+        field:
+          input_type: url
+          antlers: false
+          display: 'Twitter link'
+          type: text
+          icon: text
+          instructions: 'your company official twitter page link'
+          listable: hidden
+          instructions_position: above
+          visibility: visible
+      -
+        handle: youtube_link
+        field:
+          input_type: url
+          antlers: false
+          display: 'Youtube link'
+          type: text
+          icon: text
+          instructions: 'your company official youtube page link'
+          listable: hidden
+          instructions_position: above
+          visibility: visible
+      -
+        handle: instagram_link
+        field:
+          input_type: url
+          antlers: false
+          display: 'Instagram link'
+          type: text
+          icon: text
+          instructions: 'your company official instagram page link'
+          listable: hidden
+          instructions_position: above
+          visibility: visible
+      -
+        handle: term_of_use
+        field:
+          input_type: url
+          antlers: false
+          display: 'Term of use'
+          type: text
+          icon: text
+          instructions: 'link for term of use page'
+          listable: hidden
+          instructions_position: above
+          visibility: visible
+      -
+        handle: legal_disclaimer
+        field:
+          input_type: url
+          antlers: false
+          display: 'Legal disclaimer'
+          type: text
+          icon: text
+          instructions: 'Link for legal disclaimer page'
+          listable: hidden
+          instructions_position: above
+          visibility: visible
+      -
+        handle: privacy_policy
+        field:
+          input_type: text
+          antlers: false
+          display: 'Privacy policy'
+          type: text
+          icon: text
+          instructions: 'Privacy policy page link'
+          listable: hidden
+          instructions_position: above
+          visibility: visible

resources/css/main.css

@@ -1,27 +1,31 @@
-@import url('https://db.onlinewebfonts.com/c/2206d6cc490084998d531e8c1b2cbb4a?family=Druk+Wide+Bold');
-@import url('https://fonts.googleapis.com/css?family=Poppins');
+@import url("https://db.onlinewebfonts.com/c/2206d6cc490084998d531e8c1b2cbb4a?family=Druk+Wide+Bold");
+@import url("https://fonts.googleapis.com/css?family=Poppins");
 
-
-:root{
-    --primary-clr: #67EB47;
+:root {
+    --primary-clr: #67eb47;
     --dark-clr: #000;
-    --light-clr: #FFF;
+    --light-clr: #fff;
 }
 
-*{
+/* DEFAULT */
+* {
     padding: 0;
     margin: 0;
 }
 
-body{
-    font-family: 'Poppins'
+body {
+    font-family: "Poppins";
+}
+
+p {
+    font-size: clamp(1rem, 0.938vw, 1.125rem);
 }
 
-.text-db{
+.text-db {
     color: var(--primary-clr);
 }
 
-.text-highlight{
+.text-highlight {
     font-family: "Druk Wide Bold" !important;
 }
 
@@ -31,54 +35,42 @@ body{
     border-radius: 50px;
     max-width: fit-content;
     border: none;
-
 }
 
-#main-nav .nav-item a{
-    color: var(--light-clr);
-    transition: all 0.5s ease-in-out;
-    font-size: clamp(18px,1vw,23px);
+.db-h3 {
+    font-size: clamp(2.2rem, 2.083vw, 2.5rem);
+    line-height: clamp(2.925rem, 2.604vw, 3.125rem);
     font-weight: 500;
 }
 
-#main-nav .nav-item a:hover{
-    color: var(--primary-clr);
-
-}
-
-#main-nav .nav-item a.active{
-    color: var(--primary-clr);
+.db-h5 {
+    font-size: clamp(1.175rem, 1.146vw, 1.375rem);
+    line-height: clamp(1.7rem,2.083vw,2.5rem);
 }
 
-.db-p{
-    font-size: clamp(0.9rem,1vw,1.2rem);
-    line-height: 2rem;
-}
-
-.db-h5{
-    font-size: clamp(18px,1.2vw,23px);
-    line-height: 3rem;
-}
-
-.db-h3{
-    font-size: clamp(2rem,2.3vw,3.5rem);
+.db-h6 {
+    font-size: clamp(1.25rem, 1vw, 1.75rem);
     font-weight: 500;
 }
 
-.db-h6{
-    font-size: clamp(1.25rem,1vw,1.75rem);
-    font-weight: 500;
+.about-paragraph {
+    width: 100%;
 }
 
-.about-paragraph{
+.feature-paragraph {
     width: 100%;
 }
 
-.feature-paragraph{
-    width: 100%;
+.section-2 {
+    padding: 4rem 3rem;
+    background-size: cover;
+    padding-top: 10rem;
+    padding-bottom: 5rem;
+    background-repeat: no-repeat;
+    background-position: center top;
 }
 
-.section3-img{
+.section3-img {
     background-size: cover;
     background-position: left;
     width: 100%;
@@ -86,7 +78,7 @@ body{
     border: 1px solid gray;
 }
 
-.db-input{
+.db-input {
     background-color: black;
     padding: 1.125rem 0;
     border: none;
@@ -94,398 +86,283 @@ body{
     border-bottom: 2px solid var(--primary-clr);
     width: 100%;
     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: 1; /* Firefox */
+    opacity: 0.5; /* Firefox */
 }
 
-.db-input:focus-visible{
+.db-input:focus-visible {
     outline: none;
 }
 
+/* HERO - SECTION 1*/
+.hero-text-highlight {
+    font-size: 2.3rem;
+    line-height: 2.8rem;
+    font-weight: bold;
+}
+
+.hero-text-description {
+    font-size: clamp(1.563rem, 1vw, 1.563rem);
+    line-height: 2.5rem;
+}
+
+
+
+/* NAVBAR */
+#main-nav {
+    padding: 2rem 3rem;
+}
+
+.nav-logo-desktop {
+    width: 3.75rem;
+    height: 3.75rem;
+}
+
+.nav-logo-text {
+    font-size: clamp(1.313rem, 1.146vw, 1.375rem);
+    padding-left: 1rem;
+    vertical-align: middle;
+}
+
+#main-nav .nav-item {
+    padding: 0;
+}
+
+#main-nav .nav-item a {
+    color: var(--light-clr);
+    transition: all 0.5s ease-in-out;
+    font-size: 1.25rem;
+    font-weight: 500;
+}
+
+#main-nav .nav-item a:hover {
+    color: var(--primary-clr);
+}
+
+#main-nav .nav-item a.active {
+    color: var(--primary-clr);
+}
+
+/* FOOTER */
+.footer-container{
+    width: 100%;
+}
+
+.footer-logo{
+    width: 337px;
+    margin-bottom: 5rem;
+}
+
+.footer-details-heading{
+    font-size: 1.563rem;
+}
+
+.footer-details-desc{
+    line-height: 30px;
+    font-size: 1.25rem;
+    font-weight: normal;
+}
+
+.db-link{
+    color: var(--light-clr);
+    text-decoration: none;
+    transition: all 200ms ease-in-out;
+}
+
+.db-link:hover{
+    color: var(--primary-clr);
+}
+
+.db-link-icon{
+    text-decoration: none;
+    color: var(--primary-clr);
+    transition: all 200ms ease-in-out;
+}
+
+.db-link-icon:hover{
+    color: var(--light-clr);
+}
+
+.section-5 {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.article-container{
+    margin-bottom: 5.25rem;
+}
+
+.article-item{
+    padding-top: 80%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+.article-details{
+    height: 100%;
+    width: 100%;
+    top:0;
+    left:0
+}
+
+.article-details-datetime{
+    width: 100%;
+    height: fit-content;
+}
+
+.article-details-link{
+    width: 100%;
+    height: fit-content;
+}
+
+.article-details-line{
+    width: 60px;
+    height: 5px;
+    opacity: 1;
+}
+
+.article-details-href{
+    text-decoration: none;
+    vertical-align: middle;
+}
+
+.booking-container{
+    margin-bottom: 5.25rem;
+    overflow: hidden;
+}
+
+.booking-item{
+    padding-top: 80%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+.booking-details{
+    height: 100%;
+    width: 100%;
+    top:0;
+    left:0
+}
+
+.booking-overlay{
+    background-color: rgba(0, 0, 0, 0.5);
+    width: 100%;
+    padding: 1.688rem 3.625rem;
+    transition: all 300ms ease-in-out;
+    height: fit-content;
+}
+
+.booking-item.active .booking-overlay{
+    background-color: rgba(103, 235, 71, 0.5);
+}
+
+
+.booking-item:hover .booking-overlay{
+    background-color: rgba(103, 235, 71, 0.5);
+}
+
+.container-contactus{
+    padding-left: 6.5rem;
+    padding-right: 6.5rem;
+}
+
+
 @media (min-width: 768px) {
+    #main-nav {
+        padding: 2rem 4.5rem;
+    }
+
+    .hero-text-highlight {
+        font-size: clamp(4rem, 3.646vw, 4.375rem);
+        line-height: clamp(4.2rem, 3.75vw, 4.5rem);
+    }
+
+    .hero-text-description {
+        font-size: clamp(1.563rem, 1.302vw, 1.563rem);
+        line-height: 2.5rem;
+    }
+
+    .section2 {
+        padding: 3.75rem 3rem;
+    }
+
+    .section-8{
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center top;
+        padding: 7.5rem 3rem;
+    }
+
+    #main-nav {
+        padding: 2rem 4.5rem;
+    }
 
-    .about-paragraph{
+    .about-paragraph {
         width: 70%;
     }
 
-    .feature-paragraph{
+    .feature-paragraph {
         width: 80%;
     }
 
-    .section3-img{
+    .section3-img {
         background-position: center;
     }
 
+    .container-contactus{
+        padding-left: 9.738rem;
+        padding-right: 8.438rem;
+    }
+
+    .footer-logo{
+        width: 237px;
+    }
+
+}
+
+@media (min-width: 992px) {
+    #main-nav .nav-item {
+        padding: 0 1.875rem;
+    }
+
+    .article-container  {
+        padding-left: 8.438rem;
+        padding-right: 8.438rem;
+    }
 }
 
 /* UTILS */
-.py-6{
+.p-7 {
+    padding: 3.75rem;
+}
+
+.px-7 {
+    padding: 0 3.75rem;
+}
+
+.py-6 {
     padding-top: 4.5rem;
     padding-bottom: 4.5rem;
 }
 
-.py-7{
+.py-7 {
     padding-top: 5rem;
     padding-bottom: 5rem;
 }
 
-.my-7{
+.my-7 {
     margin-top: 5rem;
     margin-bottom: 5rem;
 }
-
-/* NORMALIZE CSS */
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-
-/* Document
-   ========================================================================== */
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-
- html {
-    line-height: 1.15; /* 1 */
-    -webkit-text-size-adjust: 100%; /* 2 */
-  }
-
-  /* Sections
-     ========================================================================== */
-
-  /**
-   * Remove the margin in all browsers.
-   */
-
-  body {
-    margin: 0;
-  }
-
-  /**
-   * Render the `main` element consistently in IE.
-   */
-
-  main {
-    display: block;
-  }
-
-  /**
-   * Correct the font size and margin on `h1` elements within `section` and
-   * `article` contexts in Chrome, Firefox, and Safari.
-   */
-
-  h1 {
-    font-size: 2em;
-    margin: 0.67em 0;
-  }
-
-  /* Grouping content
-     ========================================================================== */
-
-  /**
-   * 1. Add the correct box sizing in Firefox.
-   * 2. Show the overflow in Edge and IE.
-   */
-
-  hr {
-    box-sizing: content-box; /* 1 */
-    height: 0; /* 1 */
-    overflow: visible; /* 2 */
-  }
-
-  /**
-   * 1. Correct the inheritance and scaling of font size in all browsers.
-   * 2. Correct the odd `em` font sizing in all browsers.
-   */
-
-  pre {
-    font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
-  }
-
-  /* Text-level semantics
-     ========================================================================== */
-
-  /**
-   * Remove the gray background on active links in IE 10.
-   */
-
-  a {
-    background-color: transparent;
-  }
-
-  /**
-   * 1. Remove the bottom border in Chrome 57-
-   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
-   */
-
-  abbr[title] {
-    border-bottom: none; /* 1 */
-    text-decoration: underline; /* 2 */
-    text-decoration: underline dotted; /* 2 */
-  }
-
-  /**
-   * Add the correct font weight in Chrome, Edge, and Safari.
-   */
-
-  b,
-  strong {
-    font-weight: bolder;
-  }
-
-  /**
-   * 1. Correct the inheritance and scaling of font size in all browsers.
-   * 2. Correct the odd `em` font sizing in all browsers.
-   */
-
-  code,
-  kbd,
-  samp {
-    font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
-  }
-
-  /**
-   * Add the correct font size in all browsers.
-   */
-
-  small {
-    font-size: 80%;
-  }
-
-  /**
-   * Prevent `sub` and `sup` elements from affecting the line height in
-   * all browsers.
-   */
-
-  sub,
-  sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-
-  sub {
-    bottom: -0.25em;
-  }
-
-  sup {
-    top: -0.5em;
-  }
-
-  /* Embedded content
-     ========================================================================== */
-
-  /**
-   * Remove the border on images inside links in IE 10.
-   */
-
-  img {
-    border-style: none;
-  }
-
-  /* Forms
-     ========================================================================== */
-
-  /**
-   * 1. Change the font styles in all browsers.
-   * 2. Remove the margin in Firefox and Safari.
-   */
-
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
-    font-family: inherit; /* 1 */
-    font-size: 100%; /* 1 */
-    line-height: 1.15; /* 1 */
-    margin: 0; /* 2 */
-  }
-
-  /**
-   * Show the overflow in IE.
-   * 1. Show the overflow in Edge.
-   */
-
-  button,
-  input { /* 1 */
-    overflow: visible;
-  }
-
-  /**
-   * Remove the inheritance of text transform in Edge, Firefox, and IE.
-   * 1. Remove the inheritance of text transform in Firefox.
-   */
-
-  button,
-  select { /* 1 */
-    text-transform: none;
-  }
-
-  /**
-   * Correct the inability to style clickable types in iOS and Safari.
-   */
-
-  button,
-  [type="button"],
-  [type="reset"],
-  [type="submit"] {
-    -webkit-appearance: button;
-  }
-
-  /**
-   * Remove the inner border and padding in Firefox.
-   */
-
-  button::-moz-focus-inner,
-  [type="button"]::-moz-focus-inner,
-  [type="reset"]::-moz-focus-inner,
-  [type="submit"]::-moz-focus-inner {
-    border-style: none;
-    padding: 0;
-  }
-
-  /**
-   * Restore the focus styles unset by the previous rule.
-   */
-
-  button:-moz-focusring,
-  [type="button"]:-moz-focusring,
-  [type="reset"]:-moz-focusring,
-  [type="submit"]:-moz-focusring {
-    outline: 1px dotted ButtonText;
-  }
-
-  /**
-   * Correct the padding in Firefox.
-   */
-
-  fieldset {
-    padding: 0.35em 0.75em 0.625em;
-  }
-
-  /**
-   * 1. Correct the text wrapping in Edge and IE.
-   * 2. Correct the color inheritance from `fieldset` elements in IE.
-   * 3. Remove the padding so developers are not caught out when they zero out
-   *    `fieldset` elements in all browsers.
-   */
-
-  legend {
-    box-sizing: border-box; /* 1 */
-    color: inherit; /* 2 */
-    display: table; /* 1 */
-    max-width: 100%; /* 1 */
-    padding: 0; /* 3 */
-    white-space: normal; /* 1 */
-  }
-
-  /**
-   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
-   */
-
-  progress {
-    vertical-align: baseline;
-  }
-
-  /**
-   * Remove the default vertical scrollbar in IE 10+.
-   */
-
-  textarea {
-    overflow: auto;
-  }
-
-  /**
-   * 1. Add the correct box sizing in IE 10.
-   * 2. Remove the padding in IE 10.
-   */
-
-  [type="checkbox"],
-  [type="radio"] {
-    box-sizing: border-box; /* 1 */
-    padding: 0; /* 2 */
-  }
-
-  /**
-   * Correct the cursor style of increment and decrement buttons in Chrome.
-   */
-
-  [type="number"]::-webkit-inner-spin-button,
-  [type="number"]::-webkit-outer-spin-button {
-    height: auto;
-  }
-
-  /**
-   * 1. Correct the odd appearance in Chrome and Safari.
-   * 2. Correct the outline style in Safari.
-   */
-
-  [type="search"] {
-    -webkit-appearance: textfield; /* 1 */
-    outline-offset: -2px; /* 2 */
-  }
-
-  /**
-   * Remove the inner padding in Chrome and Safari on macOS.
-   */
-
-  [type="search"]::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-
-  /**
-   * 1. Correct the inability to style clickable types in iOS and Safari.
-   * 2. Change font properties to `inherit` in Safari.
-   */
-
-  ::-webkit-file-upload-button {
-    -webkit-appearance: button; /* 1 */
-    font: inherit; /* 2 */
-  }
-
-  /* Interactive
-     ========================================================================== */
-
-  /*
-   * Add the correct display in Edge, IE 10+, and Firefox.
-   */
-
-  details {
-    display: block;
-  }
-
-  /*
-   * Add the correct display in all browsers.
-   */
-
-  summary {
-    display: list-item;
-  }
-
-  /* Misc
-     ========================================================================== */
-
-  /**
-   * Add the correct display in IE 10+.
-   */
-
-  template {
-    display: none;
-  }
-
-  /**
-   * Add the correct display in IE 10.
-   */
-
-  [hidden] {
-    display: none;
-  }
-

resources/css/normalize.css

@@ -0,0 +1,351 @@
+
+/* NORMALIZE CSS */
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+
+  /* Sections
+     ========================================================================== */
+
+  /**
+   * Remove the margin in all browsers.
+   */
+
+  body {
+    margin: 0;
+  }
+
+  /**
+   * Render the `main` element consistently in IE.
+   */
+
+  main {
+    display: block;
+  }
+
+  /**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+
+  /* Grouping content
+     ========================================================================== */
+
+  /**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+
+  /* Text-level semantics
+     ========================================================================== */
+
+  /**
+   * Remove the gray background on active links in IE 10.
+   */
+
+  a {
+    background-color: transparent;
+  }
+
+  /**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
+
+  /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+
+  /**
+   * Add the correct font size in all browsers.
+   */
+
+  small {
+    font-size: 80%;
+  }
+
+  /**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  /* Embedded content
+     ========================================================================== */
+
+  /**
+   * Remove the border on images inside links in IE 10.
+   */
+
+  img {
+    border-style: none;
+  }
+
+  /* Forms
+     ========================================================================== */
+
+  /**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+
+  /**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+
+  button,
+  input { /* 1 */
+    overflow: visible;
+  }
+
+  /**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+
+  button,
+  select { /* 1 */
+    text-transform: none;
+  }
+
+  /**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+
+  /**
+   * Remove the inner border and padding in Firefox.
+   */
+
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+
+  /**
+   * Restore the focus styles unset by the previous rule.
+   */
+
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+
+  /**
+   * Correct the padding in Firefox.
+   */
+
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+
+  /**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+
+  legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+  }
+
+  /**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  /**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+
+  textarea {
+    overflow: auto;
+  }
+
+  /**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+
+  /**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  /**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+
+  [type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+
+  /**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  /**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+
+  /* Interactive
+     ========================================================================== */
+
+  /*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+
+  details {
+    display: block;
+  }
+
+  /*
+   * Add the correct display in all browsers.
+   */
+
+  summary {
+    display: list-item;
+  }
+
+  /* Misc
+     ========================================================================== */
+
+  /**
+   * Add the correct display in IE 10+.
+   */
+
+  template {
+    display: none;
+  }
+
+  /**
+   * Add the correct display in IE 10.
+   */
+
+  [hidden] {
+    display: none;
+  }

resources/js/api/API.js

@@ -0,0 +1,15 @@
+//import some server backend
+//set app url from env file
+const server_url = "https://thebola.club"
+
+export default class API {
+    constructor() {
+        this.prefix = server_url;
+        this.url = "/api";
+    }
+
+    listLocation({ _search, _page = 1, _pagesize = 20,  }){
+        return GET(`${this.url}/public/event/location`, { _search, _page, _pagesize })
+    }
+
+}

resources/js/main.js

@@ -1 +1,8 @@
+import AOS from 'aos';
+
+setTimeout(() => {
+    console.log('AOS init');
+    AOS.init();
+
+}, 500);
 

resources/views/booking.antlers.html

@@ -0,0 +1,77 @@
+<section>
+    <div class="text-md-center text-light section-2" 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>
+        </div>
+    </div>
+</section>
+<section>
+    <div class="text-light section-5">
+        <div class="row g-0 article-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 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>
+
+            <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 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>
+                    </div>
+                </div>
+            </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 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>
+                    </div>
+                </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>
+        </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

@@ -1,38 +1,39 @@
 <section>
-    <div class="d-flex" style="min-height: 100vh;background-image: url(./assets/image/2.jpg);background-size: cover;">
-        <div class="text-light px-5 text-lg-center m-auto">
-            <p class="text-highlight" style="font-size: clamp(2.5rem,5vw,5rem);line-height: clamp(2.5rem,5vw,5rem);font-weight: bold;">WHERE <span class="text-db">PASSION</span>  <br/> MEETS THE <span class="text-db">PITCH</span></p>
-            <p style=" font-size: clamp(1.3rem,2vw,5rem)" class="pb-5 pt-3 py-lg-5">Unleash Your Inner Champion</p>
+    <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>
         </div>
-
     </div>
 </section>
 <section>
-    <div class="text-md-center text-light px-4 px-md-5 " style="background-image: url(./assets/image/3.png);background-size: cover;background-color: black;padding-top: 10rem;padding-bottom: 5rem; background-position: top center;">
-        <p class="db-h3 text-highlight" style="line-height: clamp(3rem,2.5vw,4rem);">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" style="line-height: clamp(1.7rem,2.5vw,3rem);">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 quo sapiente sequi eius quae</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>
+    <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>
+        </div>
     </div>
 </section>
 <section>
     <div style="background-image: url('./assets/image/4.jpg');" class="section3-img"></div>
 </section>
 <section>
-    <div class="text-center text-light px-4 px-md-5 py-6" style="background-color: rgb(0, 0, 0);">
-        <p class="db-h3 text-highlight" style="line-height: clamp(3rem,2.5vw,4rem);">Features</p>
-        <p class="mx-auto p-0 db-h5" style="line-height: clamp(1.7rem,2.5vw,3rem);">Stay tuned for more latest news and articles brought exclusively by our team</p>
+    <div class="text-center text-light p-7">
+        <p class="db-h3 text-highlight">Features</p>
+        <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 class="col-12 py-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 text-end">
-                    <i class="fa-solid fa-book-bookmark fa-2x text-db d-none d-lg-inline pe-4"></i>
+            <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-8">
-                    <p class="fw-bold db-h6">Field Booking and Fixtures</p>
-                    <p class="db-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 db-h6" 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 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>
@@ -40,40 +41,40 @@
             </div>
         </div>
         <div class="row text g-0">
-            <div class="col-md-4 py-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 text-end">
-                    <i class="fa-solid fa-book-bookmark fa-2x text-db d-none d-lg-inline pe-4"></i>
+            <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-8">
+                <div class="col">
                     <p class="fw-bold db-h6">Field Booking and Fixtures</p>
-                    <p class="db-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;">Book Now <span><i class="fa-solid fa-arrow-right ps-3 text-db fw-bold"></i></span></a></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 class="col-md-4 py-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 text-end">
-                    <i class="fa-solid fa-book-bookmark fa-2x text-db d-none d-lg-inline pe-4"></i>
+            <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-8">
+                <div class="col">
                     <p class="fw-bold db-h6">Field Booking and Fixtures</p>
-                    <p class="db-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;">Book Now <span><i class="fa-solid fa-arrow-right ps-3 text-db fw-bold"></i></span></a></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 class="col-md-4 py-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 text-end">
-                    <i class="fa-solid fa-book-bookmark fa-2x text-db d-none d-lg-inline pe-4"></i>
+            <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-8">
+                <div class="col">
                     <p class="fw-bold db-h6">Field Booking and Fixtures</p>
-                    <p class="db-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;">Book Now <span><i class="fa-solid fa-arrow-right ps-3 text-db fw-bold"></i></span></a></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>
@@ -83,64 +84,33 @@
     </div>
 </section>
 <section>
-    <div class="text-light py-5" style="background-color: rgb(0, 0, 0);">
-        <div class="text-center ">
-            <p class="db-h3 text-highlight" style="line-height: clamp(3rem,2.5vw,4rem);">Recent News</p>
-            <p class="mx-auto p-0 db-h5 mb-5" style="line-height: clamp(1.7rem,2.5vw,3rem);">Stay tuned for more latest news and articles brought exclusively by our team</p>
+    <div class="text-light section-5 py-7">
+        <div class="text-center px-5 py-3">
+            <p class="db-h3 text-highlight">Recent News</p>
+            <p class="mx-auto p-0 db-h5 mb-5">Stay tuned for more latest news and articles brought exclusively by our team</p>
         </div>
-        <div class="row p-0 px-lg-4 px-lg-5 mb-lg-5 g-0">
-            <div class="col-xl-4 position-relative p-0 p-lg-3">
-                <div class="position-relative" style="padding-top: 80%;background-image: url(./assets/image/Group_6775.jpg);background-size: cover;background-repeat: no-repeat; background-position: center center;">
-                    <div class="position-absolute d-flex flex-wrap pt-4 pb-5 px-5" style="height: 100%;width: 100%;top:0;left:0">
-                        <p class="db-p" style="width: 100%;height: fit-content;">19 Jan 2024  |  12:23 PM</p>
-                        <div class="mt-auto" style="width: 100%;height: fit-content;">
-                            <p class="text-highlight db-h5 fw-bold" style="line-height: 1.75rem;">LOREM IPSUM <br/> DOLOR SIT AMET.</p>
-                            <hr class="text-db" style="width: 60px;height: 5px;opacity: 1;"/>
-                            <p><a href="#" class="text-light d-block" style="text-decoration: none;font-size: clamp(1.25rem,1vw,1.75rem);vertical-align: middle;">Book Now <span><i class="fa-solid fa-angle-right ps-3 text-db"></i></span></a></p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-xl-4 position-relative p-0 p-lg-3">
-                <div class="position-relative" style="padding-top: 80%;background-image: url(./assets/image/Group_6775.jpg);background-size: cover;background-repeat: no-repeat; background-position: center center;">
-                    <div class="position-absolute d-flex flex-wrap pt-4 pb-5 px-5" style="height: 100%;width: 100%;top:0;left:0">
-                        <p class="db-p" style="width: 100%;height: fit-content;">19 Jan 2024  |  12:23 PM</p>
-                        <div class="mt-auto" style="width: 100%;height: fit-content;">
-                            <p class="text-highlight db-h5 fw-bold" style="line-height: 1.75rem;">LOREM IPSUM <br/> DOLOR SIT AMET.</p>
-                            <hr class="text-db" style="width: 60px;height: 5px;opacity: 1;"/>
-                            <p><a href="#" class="text-light d-block" style="text-decoration: none;font-size: clamp(1.25rem,1vw,1.75rem);vertical-align: middle;">Book Now <span><i class="fa-solid fa-angle-right ps-3 text-db"></i></span></a></p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-xl-4 position-relative p-0 p-lg-3">
-                <div class="position-relative" style="padding-top: 80%;background-image: url(./assets/image/Group_6775.jpg);background-size: cover;background-repeat: no-repeat; background-position: center center;">
-                    <div class="position-absolute d-flex flex-wrap pt-4 pb-5 px-5" style="height: 100%;width: 100%;top:0;left:0">
-                        <p class="db-p" style="width: 100%;height: fit-content;">19 Jan 2024  |  12:23 PM</p>
-                        <div class="mt-auto" style="width: 100%;height: fit-content;">
-                            <p class="text-highlight db-h5 fw-bold" style="line-height: 1.75rem;">LOREM IPSUM <br/> DOLOR SIT AMET.</p>
-                            <hr class="text-db" style="width: 60px;height: 5px;opacity: 1;"/>
-                            <p><a href="#" class="text-light d-block" style="text-decoration: none;font-size: clamp(1.25rem,1vw,1.75rem);vertical-align: middle;">Book Now <span><i class="fa-solid fa-angle-right ps-3 text-db"></i></span></a></p>
-                        </div>
-                    </div>
-                </div>
-            </div>
+        <div class="row g-0 article-container">
+
+            {{ collection:article }}
+                {{ partial:partials/articlecard }}
+            {{ /collection:article }}
+
         </div>
         <button class="nav-link db-btn mx-auto d-none d-lg-block" style="font-size: clamp(18px,1vw,23px);font-weight: 500;padding: 0.5rem 3rem">See More</button>
     </div>
 </section>
 <section>
-    <div class="text-light pt-5" style="background-color: rgb(0, 0, 0);">
-        <div class="text-center ">
-            <p class="db-h3 text-highlight" style="line-height: clamp(3rem,2.5vw,4rem);">Contact Us</p>
-            <p class="mx-auto p-0 db-h5 mb-5" style="line-height: clamp(1.7rem,2.5vw,3rem);">If you have any questios or feedback, drop them <br/> here and we'll get back to you!</p>
+    <div class="text-light">
+        <div class="text-center px-5">
+            <p class="db-h3 text-highlight">Contact Us</p>
+            <p class="mx-auto p-0 db-h5 mb-5">If you have any questios or feedback, drop them <br/> here and we'll get back to you!</p>
         </div>
         <div class="row g-0">
-            <div class="col-lg-5 px-5 pb-5 pb-lg-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" style="font-size: clamp(18px,1vw,23px);font-weight: 500;padding: 0.5rem 3rem;">Submit</button>
+                <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>
             </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;">
 
@@ -153,14 +123,14 @@
     </div>
 </section>
 <section>
-    <div class="text-light p-5" style="background-color: rgb(0, 0, 0);background-image: url(./assets/image/dbparticle3.png);background-size: cover;background-repeat: no-repeat;background-position: center bottom;">
-        <div class="text-center ">
+    <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 justify-content-center">
-            <img class="mx-2" src="./assets/image/gplay.png" alt="google-play-img" style="width: 200px;">
-            <img class="mx-2" src="./assets/image/appstore.png" alt="google-play-img" style="width: 200px;">
+        <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/layout.antlers.html

@@ -7,136 +7,22 @@
         <title>{{ title ?? site:name }}</title>
         <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' }}">
         <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/main.js' }}" defer></script>
-
+        <script src="{{ mix src='js/aos.js' }}" defer></script>
+        <script src="{{ mix src='js/main.js' }}"></script>
     </head>
-    <body class="bg-gray-100 font-sans leading-normal text-gray-800">
-        <header>
-            <nav id="main-nav" class="navbar navbar-expand-lg px-4 px-md-5 py-4 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">
-                        <img src="assets/logo_1.png" class="img-fluid" style="width:70px;">
-                            <span class="text-light text-highlight my-auto" style="font-size:23px;padding-left: 1rem;vertical-align:middle">THEBOLA</span>
-                        </img>
-                    </div>
-                    <div class="mx-0 mx-lg-auto mx-xxl-0">
-                        <div class="d-flex">
-                            <button class="navbar-toggler" 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>
+    <body style="background-color: black;">
 
-                        <div class="collapse navbar-collapse my-auto" id="navbarNavDropdown">
-                            <ul class="navbar-nav">
-                                <li class="nav-item mx-0 my-3 mx-lg-3 mx-xxl-4">
-                                    <a class="nav-link" aria-current="page" href="#">Home</a>
-                                </li>
-                                <li class="nav-item mx-0 my-3 mx-lg-3 mx-xxl-4">
-                                    <a class="nav-link" href="#">Booking</a>
-                                </li>
-                                <li class="nav-item mx-0 my-3 mx-lg-3 mx-xxl-4">
-                                    <a class="nav-link" href="#">News</a>
-                                </li>
-                                <li class="nav-item mx-0 my-3 mx-lg-3 mx-xxl-4">
-                                    <a class="nav-link" href="#">Download</a>
-                                </li>
-                                <li class="nav-item mx-0 my-3 mx-lg-3 mx-xxl-4">
-                                    <a class="nav-link" href="#">Contact</a>
-                                </li>
-                                <li class="nav-item mx-0 my-3 mx-lg-3 mx-xxl-4">
-                                    <a class="nav-link active" href="#">Register</a>
-                                </li>
-                                <li class="nav-item mx-0 my-3 mx-lg-3 mx-xxl-4">
-                                    <a class="nav-link db-btn" style="padding: 0.5rem 2rem" href="#">Sign in</a>
-                                </li>
-                            </ul>
-                        </div>
+        {{ partial:partials/navbar }}
 
-                    </div>
-                </div>
-            </nav>
-        </header>
         <div class="mx-auto lg:min-h-screen flex flex-col items-center justify-center">
             {{ template_content }}
         </div>
-        <footer>
-            <div class="row g-0 text-light py-5" style="background-color: black;border: none;">
-                <div class="col-lg-3 text-center">
-                    <img src="./assets/image/dblogo.png" style="width: 237px;" />
-                </div>
-                <div class="col-lg-3 px-5 px-lg-0">
-                    <p class="text-db" style="font-size: 1.563rem;">Address</p>
-                    <p style="line-height: 30px; font-size: 1.25rem;font-weight: normal;">
-                        RRI Football Park LGM Sungai Buloh, <br/>
-                        Jalan Sungai Buloh, PJU4 47000 <br/>
-                        Petaling Jaya, Selangor.<br/>
-                    </p>
-                </div>
-                <div class="col-lg-4  px-5 px-lg-0 row g-0">
-                    <div class="col-lg-6">
-                        <p class="text-db" style="font-size: 1.563rem;">Phones</p>
-                        <p style="line-height: 30px; font-size: 1.25rem;font-weight: normal;">
-                            Customer Service: <br/>
-                            +0122274616 <br/>
-                        </p>
-                    </div>
-                    <div class="col-lg-6">
-                        <p class="text-db" style="font-size: 1.563rem;">Email</p>
-                        <p style="line-height: 30px; font-size: 1.25rem;font-weight: normal;">
-                            Office : help@thebola.club <br/>
-                            Site : thebola.club <br/>
-                        </p>
-                    </div>
 
-                </div>
-                <div class="col-lg-2">
-                    <!-- blank -->
-                </div>
-            </div>
-            <div class="row g-0 text-light py-5 py-lg-2" style="background-color: black;border: none;">
-                <div class="col-lg-3 text-center">
-                     <!-- blank -->
-                </div>
-                <div class="col-lg-3 px-5 px-lg-0">
-                    <p style="line-height: 30px; font-size: 1.25rem;font-weight: normal;">
-                        All Rights Reserved by thebola.club
-                    </p>
-                </div>
-                <div class="col-lg-4 row g-0  px-5 px-lg-0">
-                    <p style="line-height: 30px; font-size: 1.25rem;font-weight: normal;">
-                        <a class="text-light"  href="#" style="text-decoration: none;"> Terms of Use </a> |
-                        <a class="text-light"  href="#" style="text-decoration: none;"> Legal Disclaimer </a> |
-                        <a class="text-light"  href="#" style="text-decoration: none;"> Privacy Policy </a>
-                    </p>
-                </div>
-                <div class="col-lg-2 px-5 px-lg-0 text-lg-center my-5 my-lg-0">
-                    <a class="mx-1" href="#" style="text-decoration: none;">
-                        <i class="text-db fa-brands fa-lg fa-facebook-f"></i>
-                    </a>
-                    <a class="mx-1" href="#" style="text-decoration: none;">
-                        <i class="text-db fa-brands fa-lg fa-google"></i>
-                    </a>
-                    <a class="mx-1" href="#" style="text-decoration: none;">
-                        <i class="text-db fa-brands fa-lg fa-twitter"></i>
-                    </a>
-                    <a class="mx-1" href="#" style="text-decoration: none;">
-                        <i class="text-db fa-brands fa-lg fa-youtube"></i>
-                    </a>
-                    <a class="mx-1" href="#" style="text-decoration: none;">
-                        <i class="text-db fa-brands fa-lg fa-instagram"></i>
-                    </a>
-                </div>
-            </div>
-        </footer>
+        {{ partial:partials/footer }}
+
+
     </body>
 </html>

resources/views/news.antlers.html

@@ -0,0 +1,5 @@
+<section>
+    <div class="text-light d-flex" style="height: 100vh;">
+        <p class="text-light my-auto">Hello World</p>
+    </div>
+</section>

resources/views/partials/_articlecard.antlers.html

@@ -0,0 +1,12 @@
+<div data-aos="fade-up" class="col-xl-4 position-relative p-0 p-lg-3">
+    <div class="position-relative article-item" style="background-image: url(.{{ image }});">
+        <div class="position-absolute d-flex flex-wrap pt-4 pb-5 px-5 article-details">
+            <p class="article-details-datetime"> {{ date_field }} </p>
+            <div class="mt-auto article-details-link">
+                <p class="text-highlight db-h5 fw-bold"> {{ title }} </p>
+                <hr class="text-db article-details-line"/>
+                <p><a href="/article/{{ slug }}" class="text-light d-block article-details-href"> Read More <span><i class="fa-solid fa-angle-right ps-3 text-db"></i></span></a></p>
+            </div>
+        </div>
+    </div>
+</div>

resources/views/partials/_footer.antlers.html

@@ -0,0 +1,65 @@
+<footer>
+    <div class="row g-0 text-light py-5 footer-container">
+        <div class="col-lg-3 text-center">
+            <img class="footer-logo" src="./assets/image/dblogo.png"/>
+        </div>
+        <div class="col-lg-3 px-5 px-lg-0">
+            <p class="text-db footer-details-heading">Address</p>
+            <p class="footer-details-desc">
+                {{ company_profile:address }}
+            </p>
+        </div>
+        <div class="col-lg-4 px-5 px-lg-0 row g-0">
+            <div class="col-lg-6">
+                <p class="text-db footer-details-heading">Phones</p>
+                <p class="footer-details-desc">
+                    Customer Service: <br/>
+                    <a class="db-link" href="tel:{{ company_profile:phone_no }}">{{ company_profile:phone_no }}</a>
+                </p>
+            </div>
+            <div class="col-lg-6">
+                <p class="text-db footer-details-heading">Email</p>
+                <p class="footer-details-desc">
+                    Office : <a class="db-link" href="mailto:{{ company_profile:email_office }}">{{ company_profile:email_office }}</a><br/>
+                    Site : <a class="db-link" href="{{ company_profile:site_url }}">{{ company_profile:site_url }}</a><br/>
+                </p>
+            </div>
+
+        </div>
+        <div class="col-lg-2">
+            <!-- blank -->
+        </div>
+    </div>
+    <div class="row g-0 text-light py-5 py-lg-2">
+        <div class="col-lg-3 text-center">
+             <!-- blank -->
+        </div>
+        <div class="col-lg-3 px-5 px-lg-0">
+            <p>All Rights Reserved by thebola.club</p>
+        </div>
+        <div class="col-lg-4 row g-0 px-5 px-lg-0">
+            <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>
+            </p>
+        </div>
+        <div class="col-lg-2 px-5 px-lg-0 text-lg-center my-5 my-lg-0">
+            <a class="mx-1 db-link-icon" href="{{ company_profile:facebook_link }}">
+                <i class="fa-brands fa-lg fa-facebook-f"></i>
+            </a>
+            <a class="mx-1 db-link-icon" href="#">
+                <i class="fa-brands fa-lg fa-google"></i>
+            </a>
+            <a class="mx-1 db-link-icon" href="{{ company_profile:twitter_link }}">
+                <i class="fa-brands fa-lg fa-twitter"></i>
+            </a>
+            <a class="mx-1 db-link-icon" href="{{ company_profile:youtube_link }}">
+                <i class="fa-brands fa-lg fa-youtube"></i>
+            </a>
+            <a class="mx-1 db-link-icon" href="{{ company_profile:instagram_link }}">
+                <i class="fa-brands fa-lg fa-instagram"></i>
+            </a>
+        </div>
+    </div>
+</footer>

resources/views/partials/_navbar.antlers.html

@@ -0,0 +1,40 @@
+<header>
+    <nav id="main-nav" class="navbar navbar-expand-lg 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">
+                <img src="assets/logo_1.png" class="nav-logo-desktop">
+                    <span class="text-light text-highlight my-auto nav-logo-text">THEBOLA</span>
+                </img>
+            </div>
+            <div class="mx-0 mx-lg-auto mx-xxl-0">
+                <div class="d-flex">
+                    <button class="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">
+                        {{ nav:main_menu }}
+                            <li class="nav-item">
+                                <a href="{{ url }}" class="nav-link" aria-current="page"> {{ title }} </a>
+                            </li>
+                        {{ /nav:main_menu }}
+                        <li class="nav-item">
+                            <a class="nav-link db-btn" style="padding: 0.5rem 2rem" href="#">Sign in</a>
+                        </li>
+                    </ul>
+                </div>
+
+            </div>
+        </div>
+    </nav>
+</header>

users/azriperisiben@gmail.com.yaml

@@ -1,4 +1,4 @@
 name: azri
 super: true
-id: cf272ede-b39d-4fd8-8179-69a0b735355c
-password_hash: $2y$10$cNfzUXzFrfXEahCdJ5nKxOK8sHnrkWzZN2vlrRalFawN0ttuhqPFe
+id: ab0729b7-bf3b-4b76-930d-938ff5d0a937
+password_hash: $2y$10$apoOxmvCg64f5dcR0DK4bOQwXvpFB02uGCMGb7iXuog.98WR4vUTy

webpack.mix.js

@@ -12,10 +12,13 @@ const mix = require('laravel-mix');
  */
 
 mix.postCss('resources/css/bootstrap.css', 'public/css')
+mix.postCss('resources/css/normalize.css', 'public/css')
 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/main.js', 'public/js')
+mix.js('resources/js/aos.js', 'public/js')
 
 if (mix.inProduction()) {
    mix.version();