done home

resources/css/site.css

@@ -38,10 +38,6 @@ h5 {
     font-weight: 400;
 }
 
-.rounded-amc{
-
-}
-
 .hero-section{
 
     width: 100%;
@@ -65,6 +61,14 @@ h5 {
     text-align: center;
 }
 
+.hero-section .cta{
+    z-index: 10;
+    bottom:25%;
+    left: 50%;
+    transform: translate(-50%,-50%); 
+    width: 100%; 
+}
+
 .hero-section .text-highlight .title{
     color: #FFF;
     font-size: clamp(3.3em, 5vw, 5.5em);
@@ -193,16 +197,82 @@ p {
     transform: translateY(-7%);
 }
 
+.section .text-highlight{
+    font-size: clamp(3em, 5vw, 6.25em);
+    font-weight: 500;
+    width: 90%;
+    margin: 0 auto;
+    margin-bottom: 100px;
+}
+
+.section .text-highlight2{
+    margin-bottom: 50px;
+}
+
+.section .text-highlight2 img{
+    vertical-align:middle;
+    margin-bottom: 45px;
+    width: 70%;
+    vertical-align:middle;
+}
+
+.section .text-highlight3{
+    font-size: clamp(3em, 5vw, 6.25em);
+    font-weight: 500;
+    margin-bottom: 50px;
+}
+
+.amics-logo{
+    width: 110px
+}
+
 .section2 {
-    border-bottom: 2px solid #ddd;
-    border-radius: 150px 150px 0 0;
-    transform: translateY(-5%);
+    border-radius: 50px 50px 0 0;
+    background-image: #FFF;
+}
+
+.section2 .inner{
+    padding-top: 40px;
+    border-radius: 50px 50px 0 0;
+    transform: translateY(2%);
+    background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(0,41,105,1) 70%, rgba(50,47,36,1) 100%);
+}
+
+.logo-text-highlight{
+    margin-bottom: 50px;
+}
+
+.logo-text-highlight img{
+    vertical-align:middle;
+    margin-bottom: 45px;
+    width: 70%;
+    vertical-align:middle;
+}
+
+.section2 .text-highlight3{
+    width: 80%;
+    margin-bottom: 50px;
+    color: #FFF;
+}
+
+.section2 .text-highlight4{
+    width: 100%;
+    color: #FFF;
 }
 
 .section3 {
-    padding-top: 105px;
-    border-radius: 150px 150px 0 0;
-    transform: translateY(-16%);
+    padding-top: 50px;
+    border-radius: 50px 50px 0 0;
+}
+
+.section3 .text-highlight3{
+    margin-bottom: 30px;
+    padding-left:30px;
+    border-left: 5px solid rgb(212, 175, 55);
+}
+
+.section3 .text-highlight4{
+    margin-bottom: 50px;
 }
 
 .section4 {
@@ -523,11 +593,92 @@ p {
 /* Medium devices (≥768px) - md */
 @media (min-width: 768px) {
 
+    .hero-section .cta{
+        z-index: 10;
+        bottom:15%;
+        left: 50%;
+        transform: translate(-50%,-50%); 
+        width: 100%; 
+    }
+
     .section {
         padding-top: 105px;
         border-radius: 150px 150px 0 0;
         transform: translateY(-7%);
     }
+
+    .section .text-highlight{
+        font-size: clamp(3em, 5vw, 6.25em);
+        font-weight: 400;
+        margin: 0 auto;
+        width: 100%;
+        margin-bottom: 100px;
+    }
+    
+    .section .text-highlight2{
+        margin-bottom: 50px;
+    }
+    
+    .section .text-highlight2 img{
+        vertical-align:middle;
+        margin-right: 45px;
+        width: 120px;
+        vertical-align:middle;
+    }
+
+    .section .text-highlight3{
+        font-size: clamp(3em, 5vw, 6.25em);
+        font-weight: 400;
+        margin-bottom: 50px;
+    }
+
+    .amics-logo{
+        width: 250px
+    }
+
+    .section2 {
+        border-bottom: 2px solid #ddd;
+        border-radius: 150px 150px 0 0;
+        background-image: linear-gradient(to right, #D4AF37 , #001F3F);
+        transform: translateY(-5%);
+    }
+
+    .section2 .inner{
+        padding-top: 105px;
+        border-radius: 150px 150px 0 0;
+        transform: translateY(2%);
+        background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(0,41,105,1) 70%, rgba(50,47,36,1) 100%);
+    }
+
+
+    .logo-text-highlight{
+        margin-bottom: 50px;
+    }
+    
+    .logo-text-highlight img{
+        vertical-align:middle;
+        margin-right: 45px;
+        width: 120px;
+        vertical-align:middle;
+    }
+
+    .section2 .text-highlight3{
+        width: 80%;
+        margin-bottom: 50px;
+        color: #909090;
+    }
+
+    .section2 .text-highlight4{
+        width: 100%;
+        margin-bottom: 50px;
+        color: #909090;
+    }
+
+    .section3 {
+        padding-top: 105px;
+        border-radius: 150px 150px 0 0;
+        transform: translateY(-16%);
+    }
     
     .footer-menu-container {
         padding: 0px 15px;

resources/views/home.antlers.html

@@ -5,7 +5,7 @@
             <p class="title">The Ultimate Platform to Maximize Asset Potential</p>
             <p class="text-light mx-auto description">Harness the Full Force of Innovation in every aspect of operation</p>
         </div>
-        <div class="position-absolute row" style="z-index: 10;bottom:15%;left: 50%;transform: translate(-50%,-50%); width: 100%; ">
+        <div class="position-absolute row cta">
             <div class="col-12 col-md-6">
                 <p class="text-light text-center text-md-end p-small">Get 3 days free then</br> 1 month for RM 1</p>
             </div>
@@ -26,26 +26,24 @@
 
 <!-- Product Features Section -->
 <section class="section features bg-white px-6">
-    <h1 class="text-center" style="margin-bottom: 124px;">The ultimate integration platform behind every connection</h1>
-    <div class="d-flex flex-row justify-content-center" style="gap:114px;margin-bottom: 124px;">
-        <div style="max-width: 250px;">
+    <h1 class="text-center text-highlight">The ultimate integration platform behind every connection</h1>
+    <div class="d-flex flex-row justify-content-evenly" style="margin-bottom: 124px;">
+        <div class="amics-logo">
             <img class="img-fluid" src="../assets/images/amics-logo1.png" />
         </div>
-        <div style="max-width: 250px;">
+        <div class="amics-logo">
             <img class="img-fluid" src="../assets/images/amics-logo2.png" />
         </div>
-        <div style="max-width: 250px;">
+        <div class="amics-logo">
             <img class="img-fluid" src="../assets/images/amics-logo3.png" />
         </div>
     </div>
 
-    <h1 class="text-end" style="margin-bottom: 50px;">
-        <img class="img-fluid" style="vertical-align:middle;margin-right: 45px;max-width: 120px;vertical-align:middle;"
-            src="../assets/images/amics-logo1.png" />
-
+    <h1 class="text-start text-md-end logo-text-highlight">
+        <img class="img-fluid d-block d-md-inline mx-auto" src="../assets/images/amics-logo1.png" />
         Corporate Management System
     </h1>
-    <h2 class="text-end text-secondary2" style="margin-bottom: 50px;">Amplify the worth of your <br /> time by
+    <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
         help organizations efficiently<br />
@@ -88,19 +86,17 @@
 
 </section>
 
-<section class="section2 features" style="background-image: linear-gradient(to right, #D4AF37 , #001F3F);">
-    <div class="px-6"
-        style="padding-top:130px;border-radius: 140px 140px 0 0;transform: translateY(2%);background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(0,41,105,1) 70%, rgba(50,47,36,1) 100%);">
-        <h1 class="text-center text-white" style="margin-bottom: 50px;">
-            <img class="img-fluid"
-                style="vertical-align:middle;margin-right: 45px;max-width: 120px;vertical-align:middle;"
-                src="../assets/images/amics-logo2.png" />
+<section class="section2 features">
+    <div class="px-6 inner">
+
+        <h1 class="text-start text-md-end text-light logo-text-highlight">
+            <img class="img-fluid d-block d-md-inline mx-auto" src="../assets/images/amics-logo2.png" />
             Investment Relation System
         </h1>
 
-        <h2 class="text-start text-secondary2" style="width: 80%;margin-bottom: 50px;">Streamline System Elevation for
+        <h2 class="text-start text-highlight3">Streamline System Elevation for
             thousands of Applications Every day</h2>
-        <h5 class="text-end text-secondary2 mx-auto" style="width: 100%;margin-bottom: 50px;">Elevate your investor relations
+        <h5 class="text-start text-md-end text-highlight4 mx-auto">Elevate your investor relations
             strategy with our specialized software. Manage investment<br /> applications, registration, and communication with
             stakeholders in a streamlined and<br /> compliant manner, ensuring transparency and trust.</h5>
 
@@ -129,10 +125,9 @@
                     </div>
                 </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="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>
         </div>
 
     </div>
@@ -141,32 +136,32 @@
 
 <section class="section3 features bg-white px-6">
 
-    <h2 class="text-center" style="margin-bottom: 65px;">
-        <img class="img-fluid" style="vertical-align:middle;margin-right: 45px;max-width: 120px;vertical-align:middle;"
-            src="../assets/images/amics-logo2.png" />
-        Land and Estate Management System
-    </h2>
-    <div class="d-flex" style="margin-bottom: 45px;">
-        <h2 class="text-secondary ms-auto" style="text-align: center;">Find “Hide and Seek” </br> files in no time</h2>
-    </div>
+    <h1 class="text-start text-md-end logo-text-highlight">
+        <img class="img-fluid d-block d-md-inline mx-auto" src="../assets/images/amics-logo2.png" />
+        Land and Estate management system
+    </h1>
+
+    <h2 class="text-secondary text-start text-md-end" style="text-align: center;margin-bottom: 45px;">Find “Hide and Seek” </br> files in no time</h2>
+
     <h5 class="text-start text-secondary" style="margin-bottom: 110px;">Customisable system that is designed to refine
         and optimise the management of real estate properties. One of the many features of this module is it captures
         the details and the information of the land grants; to whom they are issued, conditions and restrictions
         associated with the grant.</h5>
 
     <div class="row">
-        <div class="col-6 d-flex">
+        <div class="col-12 col-md-6 d-flex">
             <img src="../assets/images/wallpaper9.jpg" class="card-img-top mx-auto" alt="..." style="width: 90%;">
         </div>
-        <div class="col-6 d-flex flex-column">
+        <div class="col-12 col-md-6 d-flex flex-column">
             <div class="my-auto">
-                <h4 style="margin-bottom: 30px;padding-left:30px;border-left: 5px solid rgb(212, 175, 55);">Centralised
-                    Land and Estate</br> Database Management</h4>
-                <p class="text-secondary" style="margin-bottom: 105px;">Provides a user-friendly interface for
+                <h4 class="text-highlight3">Centralised Land and Estate</br> Database Management</h4>
+                <p class="text-secondary text-highlight4">Provides a user-friendly interface for
                     authorised personnel to</br> input new
                     grant information, update existing records, and</br> query the database for specific information.
                 </p>
-                <button type="button" class="btn-amics fw-bold mx-auto">Explore More</button>
+                <div class="text-center text-md-start">
+                    <button type="button" class="btn-amics fw-bold mb-5 mb-md-0">Explore More</button>
+                </div>
             </div>
 
 
@@ -199,12 +194,12 @@
 
     <div class="row">
 
-        <div class="col-3 mx-auto">
+        <div class="col-12 col-md-3 mx-auto">
             <img src="https://st.depositphotos.com/1144472/2003/i/950/depositphotos_20030237-stock-photo-cheerful-young-man-over-white.jpg"
                 class="card-img-top" alt="...">
         </div>
 
-        <div class="col-7 mx-auto d-flex" style="flex-direction: column;">
+        <div class="col-12 col-md-7 mx-auto d-flex flex-column">
             <div class="my-auto d-flex" style="flex-direction: column;">
                 <i class="bi bi-quote text-primary2" style="font-size: 45px;"></i>
                 <h5 class="text-dark mb-3">Pn Haslina Bahasan <span class="text-secondary2">(Chief Executive