done cms perk

resources/css/site.css

@@ -225,12 +225,32 @@ p {
     margin-bottom: 50px;
 }
 
+.section .text-highlight4 {
+    margin-bottom:50px;
+}
+
 .feature-container .feature{
     margin-bottom: 45px;
 }
 
 .feature-container .feature img{
     margin-bottom: 25px;
+    border-radius: 50px;
+    width: 100%;
+}
+
+.perks-container .perks{
+    margin-bottom: 45px;
+}
+
+.perks-container .perks h5{
+    color:#FFF;
+    margin-bottom: 1em;
+}
+
+.perks-container .perks img{
+    margin-bottom: 25px;
+    border-radius: 50px;
     width: 100%;
 }
 
@@ -667,6 +687,10 @@ p {
         margin-bottom: 50px;
     }
 
+    .section .text-highlight4 {
+        margin-bottom:150px;
+    }
+
     .amics-logo {
         width: 250px
     }
@@ -712,7 +736,6 @@ p {
     .section3 {
         padding-top: 105px;
         border-radius: 150px 150px 0 0;
-        transform: translateY(-16%);
     }
 
     .section4 {

resources/views/home.antlers.html

@@ -46,82 +46,63 @@
     </h1>
     <h2 class="text-start text-md-end text-secondary2 text-highlight3">Amplify the worth of your <br /> time by
         minimising repetative task</h2>
-    <h5 class="text-start text-secondary2" style="margin-bottom: 150px;">Customizable software solutions designed to
+    <h5 class="text-start text-secondary2 text-highlight4">Customizable software solutions designed to
         help organizations efficiently<br />
         manage employee data and streamline HR operations.</h5>
 
     <div class="row feature-container">
 
-        <div class="col-12 col-md-4 feature">
-            <img src="../assets/images/wallpaper2.jpg" alt="...">
-            <div class="card-body">
-                <h5 class="card-title fw-bolder">Attendance Management</h5>
-                <p class="card-text text-secondary2">Allow staff to keep track of their working hours using fingerprint,
-                    facial recognition and magnetic card readers.</p>
-            </div>
-        </div>
+        {{ counter = 1 }}
+        {{ home_field[0]["feature"] }}
+            
+        {{ if counter < 4 }}
 
-        <div class="col-12 col-md-4 feature">
-            <img src="../assets/images/wallpaper2.jpg" alt="...">
-            <div class="card-body">
-                <h5 class="card-title fw-bolder">Attendance Management</h5>
-                <p class="card-text text-secondary2">Allow staff to keep track of their working hours using fingerprint,
-                    facial recognition and magnetic card readers.</p>
-            </div>
-        </div>
+                <div class="col-12 col-md-4 feature">
+                    <img src="../assets/images/wallpaper1.jpg" alt="...">
+                    <div class="card-body">
+                        <h5 class="card-title fw-bolder">{{ title }} </h5>
+                        <p class="card-text text-secondary2">{{ description }}</p>
+                    </div>
+                </div>
 
-        <div class="col-12 col-md-4 feature">
-            <img src="../assets/images/wallpaper2.jpg" alt="...">
-            <div class="card-body">
-                <h5 class="card-title fw-bolder">Attendance Management</h5>
-                <p class="card-text text-secondary2">Allow staff to keep track of their working hours using fingerprint,
-                    facial recognition and magnetic card readers.</p>
-            </div>
-        </div>
+            {{ endif }}
+
+            {{ counter = counter + 1}}
+            
+        {{ /home_field[0]["feature"] }}
 
     </div>
 
     <div class="collapse" id="moreFeature">
         <div class="row feature-container">
 
-            <div class="col-12 col-md-4 feature">
-                <img src="../assets/images/wallpaper2.jpg" alt="...">
-                <div class="card-body">
-                    <h5 class="card-title fw-bolder">Attendance Management</h5>
-                    <p class="card-text text-secondary2">Allow staff to keep track of their working hours using
-                        fingerprint,
-                        facial recognition and magnetic card readers.</p>
-                </div>
-            </div>
+            {{ counter = 1 }}
+            {{ home_field[0]["feature"] }}
 
-            <div class="col-12 col-md-4 feature">
-                <img src="../assets/images/wallpaper2.jpg" alt="...">
-                <div class="card-body">
-                    <h5 class="card-title fw-bolder">Attendance Management</h5>
-                    <p class="card-text text-secondary2">Allow staff to keep track of their working hours using
-                        fingerprint,
-                        facial recognition and magnetic card readers.</p>
-                </div>
-            </div>
+                {{ if counter > 3 }}
 
-            <div class="col-12 col-md-4 feature">
-                <img src="../assets/images/wallpaper2.jpg" alt="...">
-                <div class="card-body">
-                    <h5 class="card-title fw-bolder">Attendance Management</h5>
-                    <p class="card-text text-secondary2">Allow staff to keep track of their working hours using
-                        fingerprint,
-                        facial recognition and magnetic card readers.</p>
-                </div>
-            </div>
+                    <div class="col-12 col-md-4 feature">
+                        <img src="../assets/images/wallpaper1.jpg" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title fw-bolder">{{ title }} </h5>
+                            <p class="card-text text-secondary2">{{ description }}</p>
+                        </div>
+                    </div>
 
-        </div>
-    </div>
+                {{ endif }}
 
+                {{ counter = counter + 1}}
+                
+            {{ /home_field[0]["feature"] }}
 
+        </div>
+    </div>
 
-    <button type="button" class="btn-amics fw-bold mx-auto" data-bs-toggle="collapse" data-bs-target="#moreFeature">
-        Explore More
-    </button>
+    <div class="d-flex">
+        <button class="btn-amics fw-bold mx-auto" type="button" data-bs-toggle="collapse" data-bs-target="#moreFeature">
+            Explore More
+        </button>
+    </div>
 
 </section>
 
@@ -140,36 +121,61 @@
             communication with
             stakeholders in a streamlined and<br /> compliant manner, ensuring transparency and trust.</h5>
 
-        <div class="row d-none d-lg-flex">
-            <div class="col-4">
-                <div class="card w-100 text-white" style="background-color: rgba(0,0,0,0);">
-                    <img src="../assets/images/wallpaper5.jpg" class="card-img-top" alt="..."
-                        style="max-height: 500px;margin-bottom: 45px;">
-                    <div class="card-body">
-                        <h5 class="card-title text-white fw-bolder">Absence and Leave Management</h5>
-                        <p class="card-text text-secondary2">Centralised repository for investor profiles, contact
-                            details, and investment history.</p>
-                    </div>
-                </div>
-            </div>
-            <div class="col">
-                <div class="card text-white" style="background-color: rgba(0,0,0,0);">
-                    <img src="../assets/images/wallpaper6.jpg" class="card-img-top" alt="..."
-                        style="max-height: 500px;object-fit: cover;margin-bottom: 45px;">
-                    <div class="card-body">
-                        <h5 class="card-title text-white fw-bolder">Absence and Leave Management</h5>
-                        <p class="card-text text-secondary2">Management of lease documents such as contracts,
-                            amendments, and correspondence related to the lease. Besides, customisable alert in order to
-                            configure the system to send alerts via email, SMS, or within the system itself based on
-                            predefined timelines before the lease expiration.</p>
-                    </div>
-                </div>
-            </div>
-            <div class="d-flex" style="margin-top: 140px;padding-bottom: 250px;">
-                <button type="button" class="btn-amics fw-bold mx-auto text-white">Explore More</button>
+        <div class="row perks-container">
+
+            {{ counter = 1 }}
+            {{ home_field[0]["perks"] }}
+
+                {{ if counter < 4 }}
+
+                        <div class="col-12 col-md-4 perks">
+                            <img src="../assets/images/wallpaper1.jpg" alt="...">
+                            <div class="card-body d-flex flex-column">
+                                <h5 class="card-title fw-bolder">{{ title }} </h5>
+                                <p class="card-text text-secondary2 mt-auto">{{ description }}</p>
+                            </div>
+                        </div>
+                    
+                {{ endif }}
+
+                {{ counter = counter + 1}}
+                
+            {{ /home_field[0]["perks"] }}
+
+        </div>
+
+        <div class="collapse" id="morePerk">
+            <div class="row perks-container">
+
+                {{ counter = 1 }}
+                {{ home_field[0]["perks"] }}
+
+                    {{ if counter > 3 }}
+
+                        <div class="col-12 col-md-4 perks">
+                            <img src="../assets/images/wallpaper1.jpg" alt="...">
+                            <div class="card-body">
+                                <h5 class="card-title fw-bolder">{{ title }} </h5>
+                                <p class="card-text text-secondary2">{{ description }}</p>
+                            </div>
+                        </div>
+
+                    {{ endif }}
+
+                    {{ counter = counter + 1}}
+                    
+                {{ /home_field[0]["perks"] }}
+
             </div>
         </div>
 
+        <div class="d-flex pb-5">
+            <button class="btn-amics fw-bold mx-auto text-light" type="button" data-bs-toggle="collapse"
+                data-bs-target="#morePerk">
+                Explore More
+            </button>
+        </div>
+
     </div>
 
 </section>