more feature and change home layout

resources/css/site.css

@@ -38,38 +38,30 @@ h5 {
     font-weight: 400;
 }
 
-.hero-section{
+.hero-section {
 
     width: 100%;
     min-height: 120vh;
 }
 
-.hero-section video{
+.hero-section video {
 
     height: 120vh;
     object-fit: cover;
     filter: brightness(50%);
 }
 
-.hero-section .text-highlight{
+.hero-section .text-highlight {
     z-index: 10;
-    top:30%;
+    top: 30%;
     left: 50%;
-    transform: translate(-50%,-50%); 
-    width:85%;
+    transform: translate(-50%, -50%);
+    width: 85%;
     position: absolute;
     text-align: center;
 }
 
-.hero-section .cta{
-    z-index: 10;
-    bottom:25%;
-    left: 50%;
-    transform: translate(-50%,-50%); 
-    width: 100%; 
-}
-
-.hero-section .text-highlight .title{
+.hero-section .text-highlight .title {
     color: #FFF;
     font-size: clamp(3.3em, 5vw, 5.5em);
     font-weight: 600;
@@ -77,7 +69,7 @@ h5 {
     margin-bottom: 30px
 }
 
-.hero-section .text-highlight .description{
+.hero-section .text-highlight .description {
 
     font-size: 1.6em;
     width: 90%;
@@ -127,6 +119,21 @@ p {
     color: #FFF;
 }
 
+.btn-amics-green {
+    font-size: clamp(0.8em, 1vw, 1.2em);
+    background-color: #209D42;
+    color: #FFF;
+    border: 3px solid #FFF;
+    transition: all 0.2s ease-in-out;
+    padding: 16px 60px;
+    border-radius: 50px;
+}
+
+.btn-amics-green:hover {
+    background-color: #115523;
+    color: #FFF;
+}
+
 .text-primary2 {
     color: #D4AF37
 }
@@ -170,10 +177,6 @@ p {
     overflow: hidden;
 }
 
-.card-img-top {
-    border-radius: 50px;
-}
-
 .round-btn {
     width: 60px;
     height: 60px;
@@ -194,10 +197,10 @@ p {
 .section {
     padding-top: 40px;
     border-radius: 50px 50px 0 0;
-    transform: translateY(-7%);
+    transform: translateY(-3%);
 }
 
-.section .text-highlight{
+.section .text-highlight {
     font-size: clamp(3em, 5vw, 6.25em);
     font-weight: 500;
     width: 90%;
@@ -205,24 +208,33 @@ p {
     margin-bottom: 100px;
 }
 
-.section .text-highlight2{
+.section .text-highlight2 {
     margin-bottom: 50px;
 }
 
-.section .text-highlight2 img{
-    vertical-align:middle;
+.section .text-highlight2 img {
+    vertical-align: middle;
     margin-bottom: 45px;
     width: 70%;
-    vertical-align:middle;
+    vertical-align: middle;
 }
 
-.section .text-highlight3{
+.section .text-highlight3 {
     font-size: clamp(3em, 5vw, 6.25em);
     font-weight: 500;
     margin-bottom: 50px;
 }
 
-.amics-logo{
+.feature-container .feature{
+    margin-bottom: 45px;
+}
+
+.feature-container .feature img{
+    margin-bottom: 25px;
+    width: 100%;
+}
+
+.amics-logo {
     width: 110px
 }
 
@@ -231,31 +243,31 @@ p {
     background-image: #FFF;
 }
 
-.section2 .inner{
+.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%);
+    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{
+.logo-text-highlight {
     margin-bottom: 50px;
 }
 
-.logo-text-highlight img{
-    vertical-align:middle;
+.logo-text-highlight img {
+    vertical-align: middle;
     margin-bottom: 45px;
     width: 70%;
-    vertical-align:middle;
+    vertical-align: middle;
 }
 
-.section2 .text-highlight3{
+.section2 .text-highlight3 {
     width: 80%;
     margin-bottom: 50px;
     color: #FFF;
 }
 
-.section2 .text-highlight4{
+.section2 .text-highlight4 {
     width: 100%;
     color: #FFF;
 }
@@ -265,42 +277,49 @@ p {
     border-radius: 50px 50px 0 0;
 }
 
-.section3 .text-highlight3{
+.section3 .text-highlight3 {
     margin-bottom: 30px;
-    padding-left:30px;
+    padding-left: 30px;
     border-left: 5px solid rgb(212, 175, 55);
 }
 
-.section3 .text-highlight4{
+.section3 .text-highlight4 {
     margin-bottom: 50px;
 }
 
 .section4 {
     border-bottom: 2px solid #ddd;
     border-radius: 50px 50px 0 0;
-    background-image: linear-gradient(to left, #D4AF37 , #001F3F);
+    background-image: linear-gradient(to left, #D4AF37, #001F3F);
 }
 
-.section4 .inner{
+.section4 .inner {
     border-radius: 50px 50px 0 0;
     transform: translateY(3%);
-    background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(0,41,105,1) 70%, rgba(50,47,36,1) 100%);
-    padding-top:80px;
+    background: linear-gradient(180deg, rgba(2, 0, 36, 1) 0%, rgba(0, 41, 105, 1) 70%, rgba(50, 47, 36, 1) 100%);
+    padding-top: 80px;
 }
 
-.section4 .text-highlight{
+.section4 .text-highlight {
     margin-bottom: 25px;
 }
 
-.section4 .text-highlight2{
+.section4 .text-highlight2 {
     margin-bottom: 50px;
     font-size: clamp(3em, 3.906vw, 4.688em);
 }
 
 .section5 {
-    padding: 70px;
+    
+    padding-top: 100px;
     border-radius: 50px 50px 0 0;
-    transform: translateY(-10%);
+    transform: translateY(-25%);
+
+}
+
+.section5 .main-img{
+    width: 50%;
+    margin-bottom: 35px;
 }
 
 .video-player {
@@ -524,15 +543,21 @@ p {
 
 .footer-section {
     border-bottom: 2px solid #ddd;
-    border-radius: 150px 150px 0 0;
+    border-radius: 50px 50px 0 0;
     background: linear-gradient(to left, #D4AF37, #001F3F);
     padding-top: 20px;
     padding-bottom: 0;
 }
 
+.p-address {
+    color: #FFF;
+    font-size: 1em;
+    line-height: 2em;
+}
+
 .footer-inner {
     padding-top: 105px;
-    border-radius: 140px 140px 0 0;
+    border-radius: 50px 50px 0 0;
     background: rgb(0, 31, 63);
     background: linear-gradient(195deg, rgba(0, 31, 63, 1) 36%, rgba(75, 64, 25, 1) 100%);
 }
@@ -599,6 +624,7 @@ p {
     color: #D4AF37;
 }
 
+
 /*BOOTSTRAP RESPONSIVE*/
 /* Small devices (≥576px) - sm */
 @media (min-width: 576px) {
@@ -610,82 +636,74 @@ 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{
+    .section .text-highlight {
         font-size: clamp(3em, 5vw, 6.25em);
         font-weight: 400;
         margin: 0 auto;
         width: 100%;
         margin-bottom: 100px;
     }
-    
-    .section .text-highlight2{
+
+    .section .text-highlight2 {
         margin-bottom: 50px;
     }
-    
-    .section .text-highlight2 img{
-        vertical-align:middle;
+
+    .section .text-highlight2 img {
+        vertical-align: middle;
         margin-right: 45px;
         width: 120px;
-        vertical-align:middle;
+        vertical-align: middle;
     }
 
-    .section .text-highlight3{
+    .section .text-highlight3 {
         font-size: clamp(3em, 5vw, 6.25em);
         font-weight: 400;
         margin-bottom: 50px;
     }
 
-    .amics-logo{
+    .amics-logo {
         width: 250px
     }
 
     .section2 {
         border-bottom: 2px solid #ddd;
         border-radius: 150px 150px 0 0;
-        background-image: linear-gradient(to right, #D4AF37 , #001F3F);
+        background-image: linear-gradient(to right, #D4AF37, #001F3F);
         transform: translateY(-5%);
     }
 
-    .section2 .inner{
+    .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%);
+        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{
+    .logo-text-highlight {
         margin-bottom: 50px;
     }
-    
-    .logo-text-highlight img{
-        vertical-align:middle;
+
+    .logo-text-highlight img {
+        vertical-align: middle;
         margin-right: 45px;
         width: 120px;
-        vertical-align:middle;
+        vertical-align: middle;
     }
 
-    .section2 .text-highlight3{
+    .section2 .text-highlight3 {
         width: 80%;
         margin-bottom: 50px;
         color: #909090;
     }
 
-    .section2 .text-highlight4{
+    .section2 .text-highlight4 {
         width: 100%;
         margin-bottom: 50px;
         color: #909090;
@@ -700,44 +718,60 @@ p {
     .section4 {
         border-radius: 150px 150px 0 0;
     }
-    
-    .section4 .inner{
+
+    .section4 .inner {
         border-radius: 150px 150px 0 0;
         transform: translateY(3%);
-        padding-top:80px;
+        padding-top: 80px;
     }
-    
-    
 
     .section5 {
-        padding: 70px;
+        padding-top: 100px;
         border-radius: 150px 150px 0 0;
-        transform: translateY(-10%);
+        transform: translateY(-15%);
     }
-    
+
+    .section5 .main-img{
+        width: 120%;
+        margin-bottom: 70px;
+    }
+
+    .section5 .title{
+        font-size: 3em;
+        font-weight: 500;
+        margin-bottom: 35px;
+    }
+
+    .section5 .quote{
+        font-style: italic;
+        font-weight: 400;
+        font-size: 2.7em;
+        width: 70%;
+    }
+
     .footer-menu-container {
         padding: 0px 15px;
     }
 
-    .hero-section{
+    .hero-section {
 
         width: 100%;
         min-height: 140vh;
     }
-    
-    .hero-section video{
-    
+
+    .hero-section video {
+
         height: 140vh;
         object-fit: cover;
         filter: brightness(50%);
     }
 
-    .hero-section .text-highlight{
+    .hero-section .text-highlight {
         z-index: 10;
-        top:43%;
+        top: 43%;
         left: 50%;
-        transform: translate(-50%,-50%); 
-        width:80%;
+        transform: translate(-50%, -50%);
+        width: 80%;
         position: absolute;
         text-align: center;
     }
@@ -752,13 +786,30 @@ p {
         margin-bottom: 20px;
     }
 
-    .hero-section .text-highlight .title{
+    .hero-section .text-highlight .title {
         color: #FFF;
         font-size: clamp(3em, 5vw, 5.5em);
         font-weight: 600;
         line-height: 70px;
         margin-bottom: 30px
     }
+
+    .footer-section {
+        border-bottom: 2px solid #ddd;
+        border-radius: 150px 150px 0 0;
+        background: linear-gradient(to left, #D4AF37, #001F3F);
+        padding-top: 20px;
+        padding-bottom: 0;
+    }
+    
+    .footer-inner {
+        padding-top: 105px;
+        border-radius: 140px 140px 0 0;
+        background: rgb(0, 31, 63);
+        background: linear-gradient(195deg, rgba(0, 31, 63, 1) 36%, rgba(75, 64, 25, 1) 100%);
+    }
+
+
 }
 
 /* Large devices (≥992px) - lg */
@@ -771,7 +822,7 @@ p {
         padding-right: 7rem;
         padding-left: 7rem;
     }
-    
+
 }
 
 /* Extra large devices (≥1200px) - xl */

resources/js/site.js

@@ -0,0 +1,20 @@
+function isMobileDevice() {
+    return /Mobi|Android|iPhone|iPad|iPod|Windows Phone/i.test(navigator.userAgent);
+}
+
+(()=>{
+
+    let demoButton = document.getElementById("demo-btn");
+    if(demoButton) demoButton.addEventListener('click', () => {
+
+        if (isMobileDevice()) {
+            alert("Please use desktop for demo")
+        } else {
+            window.location.href = "/register"
+        }
+    })
+
+    
+
+})();
+

resources/views/contact.antlers.html

@@ -21,7 +21,10 @@
                         <i class="bi bi-envelope text-dark" style="font-size: 22px;"></i>
                     </div>
                 </div>
-                <button class="btn-submit">SUBMIT</button>
+                <a href="https://demo.amics.com.my/admin/login">
+                    <button class="btn-submit">SUBMIT</button>
+                </a>
+                
             </form>
             
         </div>

resources/views/home.antlers.html

@@ -2,30 +2,31 @@
 <div class="hero-section">
     <div class="p-0 position-relative">
         <div class="text-highlight px-1">
-            <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 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>
-            <div class="col-12 col-md-6 text-center text-md-start">
-                <a href="https://demo.amics.com.my/admin/login">
-                    <button type="button" class="btn-amics-small fw-bold">Start Free Trial</button>
-                </a>
-                
-            </div>
+            <p class="title">{{ home_field[0]["hero_text_highlight"] }}</p>
+            <p class="text-light mx-auto description">{{ home_field[0]["hero_text_description"] }}</p>
+
+            <button id="demo-btn" type="button"
+                class="mt-5 btn-amics-green animate__animated animate__pulse animate__infinite fw-bold">
+                {{ home_field[0]["button_text"] }}
+            </button>
+
         </div>
+
+        {{ home_field[0]["hero_video"]}}
         <video width="100%" autoplay muted loop playsinline>
-            <source src="../assets/video/4010187-hd_1366_720_50fps.mp4" type="video/mp4">
+            <source src='../assets/video/4010187-hd_1366_720_50fps.mp4' type="video/mp4">
             Your browser does not support the video tag.
         </video>
 
+        {{ /home_field[0]["hero_video"]}}
+
+
     </div>
 </div>
 
 <!-- Product Features Section -->
 <section class="section features bg-white px-6">
+
     <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">
@@ -49,41 +50,79 @@
         help organizations efficiently<br />
         manage employee data and streamline HR operations.</h5>
 
-    <div class="d-flex flex-row flex-wrap" style="gap:20px;margin-bottom: 115px;">
-        <div class="card flex-grow-1" style="width: 18rem;">
-            <img src="../assets/images/wallpaper2.jpg" class="card-img-top" style="margin-bottom: 45px;" alt="...">
+    <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>
-        <div class="card flex-grow-1" style="width: 18rem;">
-            <img src="../assets/images/wallpaper4.jpg" class="card-img-top" style="margin-bottom: 45px;" alt="...">
+
+        <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">Absence and Leave Management</h5>
-                <p class="card-text text-secondary2">Some quick example text to build on the card title and make up the
-                    bulk of the
-                    card's content.</p>
+                <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="card flex-grow-1" style="width: 18rem;">
-            <img src="../assets/images/wallpaper6.jpg" class="img-fluid card-img-top"
-                style="height: 100%;object-fit:cover;margin-bottom: 45px;" alt="...">
+
+        <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">Self-services (Employee)</h5>
-                <p class="card-text text-secondary2">Some quick example text to build on the card title and make up the
-                    bulk of the
-                    card's content.</p>
+                <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>
 
-    <div class="d-flex">
-        <button type="button" class="btn-amics fw-bold mx-auto">Explore More</button>
+    <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>
+
+            <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/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>
     </div>
 
+
+
+    <button type="button" class="btn-amics fw-bold mx-auto" data-bs-toggle="collapse" data-bs-target="#moreFeature">
+        Explore More
+    </button>
+
 </section>
 
 <section class="section2 features">
@@ -97,7 +136,8 @@
         <h2 class="text-start text-highlight3">Streamline System Elevation for
             thousands of Applications Every day</h2>
         <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
+            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>
 
         <div class="row d-none d-lg-flex">
@@ -141,7 +181,8 @@
         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>
+    <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
@@ -191,35 +232,235 @@
 
 <section class="section5 features bg-white px-6">
 
-    <div class="row">
+    <div class="row text-center">
 
         <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="...">
+            <img class="main-img" src="../assets/images/logo-invest-pahang.jpg" alt="...">
         </div>
 
-        <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
-                        Officer)</span> </h5>
-                <p style="font-style: italic;">“With the Digital Suite, it improves and streamlines the<br />
-                    investment process. Filtering in choosing good investors<br /> is easier. Subsequently, it increases
-                    revenue for the<br /> state.”</p>
+        <h2 class="title">INVEST PAHANG</h2>
+
+        <h3 class="mx-auto quote">“With the Digital Suite, the investment process is improved and streamlined. Filtering
+            and choosing good investors is easier. Subsequently, it increases revenue for the state.”</h3>
+
+    </div>
+
+</section>
+
+<section class="pricing-section1 features bg-white px-6">
+
+    <div class="d-flex flex-column flex-md-row justify-content-center mb-5" style="gap: 50px;">
+        <div class="text-end">
+            <h2>Plans & Pricng</h2>
+            <h5 class="text-primary2">Nemo enim ipsam</h5>
+        </div>
+        <div class="text-end d-flex">
+            <h5 class="m-0 my-auto text-secondary2">Nemo enim ipsam voluptatem quia voluptas sit</br> aspernatur aut
+                odit aut fugit.</h5>
+        </div>
+    </div>
+
+    <div class="d-flex flex-column flex-md-row container-fluid px-6" style="gap: 35px;">
+        <div>
+            <div class="pricing-card p-5">
+                <h5 class="" style="font-weight: 500;">Professional</h5>
+                <hr class="my-4">
+                </hr>
+                <ul>
+                    <li>Lorem Ipsum Dolor</li>
+                    <li>Lorem Ipsum Dolor</li>
+                    <li>Lorem Ipsum Dolor</li>
+                    <li>Lorem Ipsum Dolor</li>
+                </ul>
+                <hr class="my-4">
+                </hr>
+                <p class="pricepoint">
+                    <span class="text-secondary fw-bold">RM 99.90</span> /
+                    <span class="text-secondary2 fw-bold me-2">Month</span>
+                    <button type="button" class="btn-amics-small fw-bold mx-auto" style="color: #000;">Start Free
+                        Trial</button>
+                </p>
+                <video width="400%" class="position-absolute" autoplay muted loop playsinline
+                    style="filter: brightness(50%); top:0; left:0; z-index: -1;">
+                    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+            </div>
+        </div>
+        <div>
+            <div class="pricing-card middle p-5">
+                <h5 class="" style="font-weight: 500;">Professional</h5>
+                <hr class="my-4">
+                </hr>
+                <ul>
+                    <li>Lorem Ipsum Dolor</li>
+                    <li>Lorem Ipsum Dolor</li>
+                    <li>Lorem Ipsum Dolor</li>
+                    <li>Lorem Ipsum Dolor</li>
+                </ul>
+                <hr class="my-4">
+                </hr>
+                <p class="pricepoint">
+                    <span class="text-secondary fw-bold">RM 99.90</span> /
+                    <span class="text-secondary2 fw-bold me-2">Month</span>
+                    <button type="button" class="btn-amics-small fw-bold mx-auto" style="color: #000;">Start Free
+                        Trial</button>
+                </p>
+                <video width="400%" class="position-absolute" autoplay muted loop playsinline
+                    style="filter: brightness(50%); top:0; left:0; z-index: -1;">
+                    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
             </div>
+        </div>
+        <div>
+            <div class="pricing-card p-5">
+                <h5 class="" style="font-weight: 500;">Professional</h5>
+                <hr class="my-4">
+                </hr>
+                <ul>
+                    <li>Lorem Ipsum Dolor</li>
+                    <li>Lorem Ipsum Dolor</li>
+                    <li>Lorem Ipsum Dolor</li>
+                    <li>Lorem Ipsum Dolor</li>
+                </ul>
+                <hr class="my-4">
+                </hr>
+                <p class="pricepoint">
+                    <span class="text-secondary fw-bold">RM 99.90</span> /
+                    <span class="text-secondary2 fw-bold me-2">Month</span>
+                    <button type="button" class="btn-amics-small fw-bold mx-auto" style="color: #000;">Start Free
+                        Trial</button>
+                </p>
+                <video width="400%" class="position-absolute" autoplay muted loop playsinline
+                    style="filter: brightness(50%); top:0; left:0; z-index: -1;">
+                    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+            </div>
+        </div>
+    </div>
+
+    <div class="container-fluid d-flex position-relative mt-5 px-6">
+
+        <div class="d-flex flex-column flex-md-row container-fluid p-0" style="gap:20px">
+
+            <div class="flex-grow-1 position-relative">
+                <input id="pricng-email-input2" type="text" class="form-control" placeholder="Pay Monthly">
+                <button type="button" class="btn-amics-small fw-bold mx-auto position-absolute"
+                    style="top: 2.5px;right: 2px;color: #000;">Pay Yearly (Save RM 30)</button>
+            </div>
+
+            <div class="px-5">
+                <p class="text-secondary2 text-start p-small m-0">*Yearly discount available on select plans Prices may
+                    vary by your store location.</p>
+            </div>
+
+            <button type="button" class="btn-amics-small fw-bold mx-auto" style="background-color: #D4AF37;">Full List
+                of Feature</button>
+
+
+        </div>
 
-            <div class="d-flex flex-row" style="gap:30px">
-                <button class="btn btn-white round-btn shadow">
-                    <i class="bi bi-chevron-left" style="font-size: 20px;"></i>
-                </button>
-                <h3 class="my-auto">1</h3>
-                <button class="btn btn-white round-btn shadow" style="font-size: 20px;">
-                    <i class="bi bi-chevron-right"></i>
-                </button>
+    </div>
+
+
+
+</section>
+
+<section class="pricing-section2" style="background-image: linear-gradient(to right, #FFF , #EAEAEA);">
+    <div class="px-6 py-5"
+        style="padding-top:130px;border-radius: 140px 140px 0 0;transform: translateY(1.5%);background: #EAEAEA">
+        <h2 class="text-end" style="margin-bottom: 50px;">
+            What every plans you get
+        </h2>
+
+        <p class="text-start text-secondary2 mx-auto" style="width: 100%;margin-bottom: 50px;">Sed ut perspiciatis unde
+            omnis iste natus error sit voluptatem accusantium </br> doloremque laudantium, totam rem aperiam.</p>
+
+        <div class="d-flex mb-5">
+            <button type="button" class="btn-amics-small fw-bold ms-auto" style="color:#000">Start Free Trial</button>
+        </div>
+
+        <div class="d-flex flex-column flex-md-row">
+            <div class="p-2">
+                <div class="plan-feature-card">
+                    <i class="bi bi-moon-stars-fill" style="font-size: 50px;"></i>
+                    <p class="p-small fw-bold">Lorem Ipsum</p>
+                    <p class="p-small text-secondary2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed</p>
+                </div>
             </div>
+            <div class="p-2">
+                <div class="plan-feature-card">
+                    <i class="bi bi-moon-stars-fill" style="font-size: 50px;"></i>
+                    <p class="p-small fw-bold">Lorem Ipsum</p>
+                    <p class="p-small text-secondary2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed</p>
+                </div>
+            </div>
+            <div class="p-2">
+                <div class="plan-feature-card">
+                    <i class="bi bi-moon-stars-fill" style="font-size: 50px;"></i>
+                    <p class="p-small fw-bold">Lorem Ipsum</p>
+                    <p class="p-small text-secondary2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed</p>
+                </div>
+            </div>
+            <div class="p-2">
+                <div class="plan-feature-card">
+                    <i class="bi bi-moon-stars-fill" style="font-size: 50px;"></i>
+                    <p class="p-small fw-bold">Lorem Ipsum</p>
+                    <p class="p-small text-secondary2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed</p>
+                </div>
+            </div>
+            <div class="p-2">
+                <div class="plan-feature-card">
+                    <i class="bi bi-moon-stars-fill" style="font-size: 50px;"></i>
+                    <p class="p-small fw-bold">Lorem Ipsum</p>
+                    <p class="p-small text-secondary2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed</p>
+                </div>
+            </div>
+        </div>
 
+    </div>
+</section>
 
+<section class="pricing-section3">
+    <div class="trial-banner bg-dark">
+        <div class="px-6 pt-5 pb-4 d-flex flex-row flex-reap justify-content-between" style="background: linear-gradient(to left, #D4AF37 40%, #001F3F 80%);
+">
+            <h3>START YOUR FREE TRIAL NOW <i class="bi bi-arrow-right-circle ms-2"></i></h3>
+            <h3>START YOUR FREE TRIAL NOW <i class="bi bi-arrow-right-circle ms-2"></i></h3>
+            <h3>START YOUR FREE TRIAL NOW <i class="bi bi-arrow-right-circle ms-2"></i></h3>
         </div>
+
     </div>
+</section>
 
+<section class="pricing-section4">
+    <div class="px-6">
+        <h5 class="text-primary2 text-end">Subscription</h5>
+        <h1 class="text-end" style="margin-bottom: 20px;">Everything you need to</br> sell online, all in one place.
+        </h1>
+        <p class="text-secondary2 text-end" style="margin-bottom: 100px;">Whether you’re building a website, managing
+            inventory, or responding </br>to customers, you can do it all with AIMS.
+        </p>
+        <div class="row" style="margin-bottom: 70px;">
+
+            <div class="col-12 col-md-6">
+                <p class="text-secondary2 p-small">
+                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+                    labore et dolore magna aliquyam erat, sed diam voluptua.
+                </p>
+            </div>
+
+            <div class="col-12 col-md-6">
+                <div class="flex-grow-1 position-relative">
+                    <input id="pricng-email-input2" type="text" class="form-control"
+                        placeholder="Enter Your Email Address">
+                    <button type="button" class="btn-amics-small fw-bold mx-auto position-absolute"
+                        style="top: 2.5px;right: 2px;color: #000;">Start Free Trial</button>
+                </div>
+            </div>
+
+        </div>
+    </div>
 </section>

resources/views/layout.antlers.html

@@ -8,12 +8,13 @@
     <title>{{ title ?? site:name }}</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"
         defer></script>
 
-        {{ vite src="resources/js/site.js|resources/css/site.css" }}
+    {{ vite src="resources/js/site.js|resources/css/site.css" }}
 
 </head>
 

resources/views/partials/footer.antlers.html

@@ -3,33 +3,17 @@
   <div class="footer-inner">
     <div class="px-1 px-5">
       <div class="row mx-auto footer-menu-container">
-        <div class="col-md-2 col-6 footer-column">
-          <h5>Solution</h5>
-          <ul>
-            <li><a href="#">Pricing</a></li>
-            <li><a href="#">Customer service</a></li>
-            <li><a href="#">Employee Service</a></li>
-            <li><a href="#">Zendesk for sales</a></li>
-            <li><a href="#">Integrations</a></li>
-            <li><a href="#">System Status</a></li>
-            <li><a href="#">Sign in</a></li>
-          </ul>
-        </div>
 
-        <div class="col-md-2 col-6 mx-auto footer-column">
-          <h5>Pricing</h5>
-          <ul>
-            <li><a href="#">Messaging</a></li>
-            <li><a href="#">AI automations</a></li>
-            <li><a href="#">AI agents</a></li>
-            <li><a href="#">Advance data</a></li>
-            <li><a href="#">Help center</a></li>
-            <li><a href="#">Ticketing</a></li>
-            <li><a href="#">Knowledge base</a></li>
-          </ul>
+        <div class="col-md-4 col-12 footer-column">
+          <h5>Address</h5>
+          <p class="p-address">Address: 22-3, Jalan Wangsa Delima 10 </br>
+            Wangsa Maju, 53300 Kuala Lumpur, Wilayah </br>
+            Persekutuan Kuala Lumpur
+          </p>
         </div>
+
         <!-- Column 3 -->
-        <div class="col-md-2 col-6 mx-auto footer-column">
+        <div class="col-md-2 col-12 mx-auto footer-column">
           <h5>Resource</h5>
           <ul>
             <li><a href="#">Security</a></li>
@@ -42,7 +26,7 @@
           </ul>
         </div>
         <!-- Column 4 -->
-        <div class="col-md-2 col-6 mx-auto footer-column">
+        <div class="col-md-2 col-12 mx-auto footer-column">
           <h5>Enterprise</h5>
           <ul>
             <li><a href="#">About Us</a></li>
@@ -55,7 +39,7 @@
           </ul>
         </div>
         <!-- Column 5 -->
-        <div class="col-md-2 col-6 mx-0 mx-md-auto footer-column">
+        <div class="col-md-2 col-12 mx-0 mx-md-auto footer-column">
           <h5>What's New</h5>
           <ul>
             <li><a href="#">Product updates</a></li>
@@ -99,4 +83,5 @@
 
     </div>
   </div>
-</div>
+</div>
+

resources/views/partials/navbar.antlers.html

@@ -12,16 +12,6 @@
         <li class="nav-item">
           <a class="nav-link active" aria-current="page" href="/pricing">Pricing</a>
         </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-            Resources
-          </a>
-          <ul class="dropdown-menu">
-            <li><a class="dropdown-item" href="#">Action</a></li>
-            <li><a class="dropdown-item" href="#">Another action</a></li>
-            <li><a class="dropdown-item" href="#">Something else here</a></li>
-          </ul>
-        </li>
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
             Whats' new
@@ -33,7 +23,7 @@
           </ul>
         </li>
         <li class="nav-item">
-          <a class="nav-link text-decoration-underline" aria-current="page" href="/contact">Start Free Trial</a>
+          <a class="nav-link text-decoration-underline" aria-current="page" href="/register">Start Free Trial</a>
         </li>
       </ul>
     </div>

resources/views/register.antlers.html

@@ -0,0 +1,35 @@
+<section class="contact-section">
+    <div class="row m-0">
+        <div class="col-12 col-md-6 d-block d-md-none bg-contact">
+            <!-- Image -->
+        </div>
+        <div class="col-12 col-md-6 py-5 px-5 bg-white">
+            
+            <form class="contact-form bg-secondary-subtle rounded-5 py-5 px-3 px-md-5 my-1">
+                <h3 class="text-center text-md-start" style="margin-bottom: 70px;">Fill in your information</h3>
+                <div class="d-flex flex-column" style="margin-bottom: 10px;">
+                    <input type="text" placeholder="Your name">
+                    <input type="email" placeholder="Your email">
+                    <input type="text" placeholder="Phone no">
+                    <input type="text" placeholder="Company name">
+                </div>
+                <div class="container-fluid p-0 d-flex flex-column flex-md-row justify-content-center justify-content-md-between px-5" style="margin-bottom: 40px;">
+                    <p class="p-small fw-bold text-center text-md-start"> Follow us now:</p>
+                    <div class="d-flex flex-row justify-content-center justify-content-md-start" style="gap: 20px;">
+                        <i class="bi bi-telephone-fill text-dark" style="font-size: 20px;"></i>
+                        <i class="bi bi-whatsapp text-dark" style="font-size: 20px;"></i>
+                        <i class="bi bi-envelope text-dark" style="font-size: 22px;"></i>
+                    </div>
+                </div>
+                <a href="https://demo.amics.com.my/admin/login">
+                    <button class="btn-submit">SUBMIT</button>
+                </a>
+                
+            </form>
+            
+        </div>
+        <div class="col-12 col-md-6 d-none d-md-block bg-contact">
+            <!-- Image -->
+        </div>
+    </div>
+</section>