add custom fieldset for page blueprint, for home page, improve booking data render, add icon, editable home feature section

content/collections/pages/home.md

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

content/collections/test.yaml

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

public/js/main.js

@@ -11732,11 +11732,14 @@ $(document).ready(function () {
     });
   }
   $(".booking-item").on("click", function () {
+    var fieldID = $(this).data('fieldid');
     // remove all child active class, then add active on clicked
     var bookingContainer = $('.booking-container');
     $(bookingContainer).find(".booking-item").removeClass("active");
     $(this).addClass("active");
-    var fieldID = $(this).data('fieldid');
+
+    // remove option child
+    $("#input-booking-slot").children(".select-value").remove();
 
     //ensure everything exist
     if (bookingList === undefined || bookingList.length == 0) {

resources/blueprints/collections/pages/page.yaml

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

resources/fieldsets/home_section_2.yaml

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

resources/fieldsets/home_section_3.yaml

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

resources/fieldsets/home_section_4.yaml

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

resources/fieldsets/homepage_section_1.yaml

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

resources/js/main.js

@@ -132,12 +132,14 @@ $(document).ready(function () {
 
     $(".booking-item").on("click", function () {
 
+        let fieldID = $(this).data('fieldid');
         // remove all child active class, then add active on clicked
         let bookingContainer = $('.booking-container');
         $(bookingContainer).find(".booking-item").removeClass("active")
         $(this).addClass("active");
 
-        let fieldID = $(this).data('fieldid');
+        // remove option child
+        $("#input-booking-slot").children(".select-value").remove();
 
         //ensure everything exist
         if(bookingList === undefined || bookingList.length == 0){

resources/views/booking.antlers.html

@@ -11,7 +11,7 @@
         <div class="row g-0 booking-container">
 
             <div data-aos="fade-up" class="col-xl-4 position-relative p-0 p-lg-3">
-                <div data-fieldid="1" class="position-relative booking-item" style="background-image: url(./assets/image/Group_6775.jpg);">
+                <div data-fieldid="1" class="position-relative booking-item" style="background-image: url(./assets/group-6770.jpg);">
                     <div class="position-absolute d-flex flex-wrap booking-details">
                         <div class="mt-auto booking-overlay">
                             <p class="text-highlight db-h5 fw-bold p-0"> FIELD A </p>
@@ -22,7 +22,7 @@
             </div>
 
             <div data-aos="fade-up" class="col-xl-4 position-relative p-0 p-lg-3">
-                <div data-fieldid="2" class="position-relative booking-item" style="background-image: url(./assets/image/Group_6775.jpg);">
+                <div data-fieldid="2" class="position-relative booking-item" style="background-image: url(./assets/group-6771.jpg);">
                     <div class="position-absolute d-flex flex-wrap booking-details">
                         <div class="mt-auto booking-overlay">
                             <p class="text-highlight db-h5 fw-bold p-0"> FIELD B </p>
@@ -33,7 +33,7 @@
             </div>
 
             <div data-aos="fade-up" class="col-xl-4 position-relative p-0 p-lg-3">
-                <div data-fieldid="3" class="position-relative booking-item" style="background-image: url(./assets/image/Group_6775.jpg);">
+                <div data-fieldid="3" class="position-relative booking-item" style="background-image: url(./assets/group-6772.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>

resources/views/home.antlers.html

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

resources/views/layout.antlers.html

@@ -5,6 +5,7 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>{{ title ?? site:name }}</title>
+        <link rel="icon" type="image/x-icon" href="/favicon.ico">
         <link rel="stylesheet" href="{{ mix src='css/bootstrap.css' }}">
         <link rel="stylesheet" href="{{ mix src='css/main.css' }}">
         <link rel="stylesheet" href="{{ mix src='css/aos.css' }}">

resources/views/partials/_feature.antlers.html

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