done

resources/css/site.css

     font-style: normal;
 }
 
-*{
+* {
     margin: 0;
     font-family: 'Space Grotesk', sans-serif;
     color: #001F3F;
 
 
 h1 {
-    font-size: clamp(2em,5vw,6.25em);
+    font-size: clamp(2em, 5vw, 6.25em);
     font-weight: 400;
 }
 
 h2 {
-    font-size: clamp(1.5em,3.906vw,4.688em);
+    font-size: clamp(1.5em, 3.906vw, 4.688em);
     font-weight: 400;
 }
 
 h4 {
-    font-size: clamp(1em,2.6vw,3.063em);
+    font-size: clamp(1em, 2.6vw, 3.063em);
     font-weight: 400;
 }
 
 h5 {
-    font-size: clamp(1.83em,1.563vw,1.875em);
+    font-size: clamp(1.83em, 1.563vw, 1.875em);
     font-weight: 400;
 }
 
-p{
-    font-size: clamp(1em,1.2vw,1.6em);
+.p-small {
+    font-size: clamp(0.85em, 1.042vw, 1.25em);
+}
+
+p {
+    font-size: clamp(1em, 1.2vw, 1.6em);
 }
 
 .px-6 {
-    padding-right: 7rem;
-    padding-left: 7rem;
+    padding-right: 1rem;
+    padding-left: 1rem;
 }
 
-.btn-amics{
-    font-size: clamp(0.8em,1vw,1.2em);
+.btn-amics {
+    font-size: clamp(0.8em, 1vw, 1.2em);
     background-color: rgba(255, 255, 255, 0);
     color: #000;
     border: 3px solid rgb(212, 175, 55);
     border-radius: 50px;
 }
 
-.btn-amics:hover{
+.btn-amics:hover {
+    background-color: rgb(212, 175, 55);
+    color: #FFF;
+}
+
+.btn-amics-small {
+    font-size: clamp(0.8em, 1vw, 1.2em);
+    background-color: rgba(255, 255, 255, 0);
+    color: #FFF;
+    border: 2px solid rgb(212, 175, 55);
+    transition: all 0.2s ease-in-out;
+    padding: 16px 30px;
+    border-radius: 50px;
+}
+
+.btn-amics-small:hover {
     background-color: rgb(212, 175, 55);
     color: #FFF;
 }
 
-.text-primary2{
-    color:#D4AF37
+.text-primary2 {
+    color: #D4AF37
 }
 
-.text-secondary2{
-    color:#909090
+.text-secondary2 {
+    color: #909090
 }
 
 .navbar-custom {
 
 .navbar-custom .navbar-brand,
 .navbar-custom .nav-link {
+    font-size: clamp(0.85em, 1.042vw, 1.25em);
     color: white !important;
     /* White text */
 }
 .section {
     padding-top: 105px;
     border-radius: 150px 150px 0 0;
-    transform: translateY(-10%);
+    transform: translateY(-7%);
 }
 
 .section2 {
     object-fit: cover;
 }
 
+/*PRICING PAGE*/
+.pricing-hero-section {
+    min-height: 120vh;
+    background: url(../assets/images/wallpaper7.jpg) no-repeat center center;
+}
+
+.pricing-section1 {
+    padding-top: 105px;
+    border-radius: 150px 150px 0 0;
+    transform: translateY(-7%);
+}
+
+.pricing-section2 {
+    border-bottom: 2px solid #ddd;
+    border-radius: 150px 150px 0 0;
+}
+
+.pricing-section3 {}
+
+.pricing-section4 {
+    padding-top: 80px;
+}
+
+.trial-banner {}
+
+.trial-banner h3,
+.trial-banner i {
+    color: #FFF;
+    font-weight: 600;
+    display: inline;
+    margin-right: 10px;
+}
+
+.pricing-card {
+    border-radius: 50px;
+    overflow: hidden;
+    background-color: rgba(247, 247, 247, 1);
+    min-height: 100px;
+    transition: all 0.3s ease-in-out;
+    position: relative;
+}
+
+.pricing-card.middle {
+    background: linear-gradient(195deg,
+            rgba(0, 31, 63, 1) 45%,
+            rgba(212, 175, 55, 1) 100%);
+    transition: all 0.3s ease-in-out;
+}
+
+.pricing-card:hover.middle {
+    background: linear-gradient(to right,
+            rgba(247, 247, 247, 0),
+            /* Start with 80% opacity */
+            rgba(200, 200, 200, 0)
+            /* End with 50% opacity */
+        );
+}
+
+.pricing-card.middle span,
+.pricing-card.middle p,
+.pricing-card.middle h5,
+.pricing-card.middle li,
+.pricing-card.middle button {
+    color: #FFF !important;
+}
+
+.pricing-card:hover {
+    border-radius: 50px;
+    background-color: rgba(247, 247, 247, 0);
+    min-height: 100px;
+    transition: all 0.3s ease-in-out;
+    position: relative;
+}
+
+.pricing-card:hover span,
+.pricing-card:hover h5,
+.pricing-card:hover li,
+.pricing-card:hover button {
+    color: #FFF !important;
+}
+
+.pricing-card ul {
+    list-style-image: url(../assets/images/checklist-icon.png);
+}
+
+.pricing-card ul li {
+    font-size: clamp(1.83em, 1.563vw, 1.875em);
+    margin-bottom: 22px;
+}
+
+
+.pricing-card .pricepoint {
+    font-size: clamp(1.23em, 1.302vw, 1.463em);
+}
+
+#pricng-email-input {
+    font-size: clamp(0.8em, 1vw, 1.2em);
+    color: #FFF;
+}
+
+#pricng-email-input::placeholder {
+    color: #FFF;
+    font-weight: bold;
+    font-size: clamp(0.8em, 1vw, 1.2em);
+    opacity: 1;
+    /* Firefox */
+}
+
+
+#pricng-email-input2 {
+    font-size: clamp(0.8em, 1vw, 1.2em);
+    color: #000;
+    background-color: rgba(255, 255, 255, 0.2);
+    border: 1px solid gray;
+    padding: 20px 50px;
+    border-radius: 50px;
+}
+
+#pricng-email-input2::placeholder {
+    color: #000;
+    font-weight: bold;
+    font-size: clamp(0.8em, 1vw, 1.2em);
+    opacity: 1;
+    /* Firefox */
+}
+
+.plan-feature-card {
+    background-color: #FFF;
+    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+    border-radius: 50px;
+    padding: 30px;
+}
+
+/* CONTACT PAGE */
+.contact-section {
+    padding-top: 100px;
+}
+
+.bg-contact {
+    background: url(../assets/images/wallpaper8.jpg);
+}
+
+.contact-form {
+    background-color: #F7F7F7;
+    border: none;
+}
+
+.contact-form input {
+    border: none;
+    transition: all 0.3s ease-in-out;
+    outline: none;
+    padding: 25px 40px;
+    border-radius: 50px;
+    border: 1px solid #ADADAD;
+    font-size: clamp(0.85em, 1.042vw, 1.25em);
+    margin-bottom: 20px;
+}
+
+.contact-form input:focus-visible {
+    border: none;
+    outline: 1px solid #D4AF37;
+}
+
+.contact-form input::placeholder {
+    color: #ADADAD;
+}
+
+.contact-form .btn-submit {
+    font-size: clamp(0.8em, 1vw, 1.2em);
+    color: #FFF;
+    border: 3px solid rgb(212, 175, 55);
+    background-color: rgb(212, 175, 55);
+    transition: all 0.2s ease-in-out;
+    padding: 16px 60px;
+    border-radius: 50px;
+    width: 100%;
+}
+
+.contact-form .btn-submit:hover {
+    background-color: rgba(255, 255, 255, 0);
+    color: #000;
+}
+
+/* NAVBAR */
+.navbar-innner-container {
+    padding: 10px 20px;
+}
+
 /* FOOTER */
-.footer-text{
+.footer-text {
     font-family: 'Nasalization Rg', sans-serif !important;
     font-weight: 400;
     margin-bottom: 40px;
     font-size: clamp(2em, 4.7vw, 5.64em);
 }
 
-.footer-text span{
+.footer-text span {
     font-family: 'Nasalization Rg', sans-serif !important;
     border-bottom: 1px solid;
     padding: 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) 0%, rgba(0,41,105,1) 57%, rgba(50,47,36,1) 100%);
+    background: rgb(0, 31, 63);
+    background: linear-gradient(195deg, rgba(0, 31, 63, 1) 36%, rgba(75, 64, 25, 1) 100%);
 }
 
-.footer-menu-container{
+.footer-menu-container {
     padding: 0px;
 }
 
     color: #ccc;
 }
 
-.footer-link-menu-icon{
+.footer-link-menu-icon {
     font-size: 25px;
-    gap:35px
+    gap: 35px
 }
 
-.footer-link-menu2{
+.footer-link-menu2 {
     gap: 30px;
     list-style: none;
 }
 
-.footer-link-menu2 li a{
+.footer-link-menu2 li a {
     color: #FFF;
     text-decoration: none;
     transition: color 0.3s ease-in-out;
 }
 
-.footer-link-menu2 li a:hover{
+.footer-link-menu2 li a:hover {
     color: #D4AF37;
 }
 
 /*BOOTSTRAP RESPONSIVE*/
 /* Small devices (≥576px) - sm */
 @media (min-width: 576px) {
-    .footer-menu-container{
+    .footer-menu-container {
         padding: 0px 60px;
     }
 }
 
 /* Medium devices (≥768px) - md */
 @media (min-width: 768px) {
-    .footer-menu-container{
+    .footer-menu-container {
         padding: 0px 15px;
     }
 }
 
 /* Large devices (≥992px) - lg */
 @media (min-width: 992px) {
-    .footer-menu-container{
+    .footer-menu-container {
         padding: 0px 5px;
     }
+
+    .px-6 {
+        padding-right: 7rem;
+        padding-left: 7rem;
+    }
 }
 
 /* Extra large devices (≥1200px) - xl */
 @media (min-width: 1200px) {
-    .footer-menu-container{
+    .footer-menu-container {
         padding: 0px 120px;
     }
 }
 
 /* XXL devices (≥1400px) - xxl */
 @media (min-width: 1400px) {
-    .footer-menu-container{
+    .footer-menu-container {
         padding: 0px 190px;
     }
-}
-
-
+}

resources/views/contact.antlers.html

+<section class="contact-section">
+    <div class="row">
+        <div class="col-12 col-md-6 py-5 px-6 bg-white">
+            
+            <form class="contact-form bg-secondary-subtle rounded-5 p-5 my-1">
+                <h3 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"> Follow us now:</p>
+                    <div class="d-flex flex-row" 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>
+                <button class="btn-submit">SUBMIT</button>
+            </form>
+            
+        </div>
+        <div class="col-12 col-md-6 bg-contact">
+            <!-- Image -->
+        </div>
+    </div>
+</section>

resources/views/home.antlers.html

 <!-- Video Player Section -->
-<video width="100%" autoplay muted loop playsinline>
-    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
-    Your browser does not support the video tag.
-</video>
+<div class="container-fluid p-0">
+    <div class="p-0 position-relative">
+        <div class="position-absolute text-center" style="z-index: 10;top:35%;left: 50%;transform: translate(-50%,-50%); ">
+            <h2 class="text-light fw-bold">The Ultimate Platform to</br> Maximise Asset Potential</h2>
+            <p class="text-light">Harness the Full Force of Innovation in every aspect of operation</p>
+        </div>
+        <div class="position-absolute d-flex flex-row" style="gap:12px;z-index: 10;bottom:15%;left: 50%;transform: translate(-50%,-50%); ">
+            <div>
+                <p class="text-light text-end p-small">Get 3 days free then</br> 1 month for RM 1</p>
+            </div>
+            <div>
+                <button type="button" class="btn-amics-small fw-bold mx-auto">Start Free Trial</button>
+            </div>
+        </div>
+        <video width="100%" autoplay muted loop playsinline style="filter: brightness(50%);">
+            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
+            Your browser does not support the video tag.
+        </video>
+
+    </div>
+</div>
 
 <!-- Product Features Section -->
 <section class="section features bg-white px-6">
 
         <h2 class="text-start text-secondary2" style="width: 80%;margin-bottom: 50px;">Streamline System Elevation for
             thousands of Applications Every day</h2>
-        <h5 class="text-end text-secondary2" style="width: 80%;margin-bottom: 50px;">Elevate your investor relaons
-            strategy with our specialized soware. Manage investment<br /> applicaons, registraons, and communicaons with
+        <h5 class="text-end text-secondary2 mx-auto" style="width: 100%;margin-bottom: 50px;">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>
 
         <div class="row d-none d-lg-flex">
 
     <div class="row">
         <div class="col-6 d-flex">
-            <img src="../assets/images/wallpaper9.jpg"
-                class="card-img-top mx-auto" alt="..." style="width: 90%;">
+            <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="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 authorised personnel to</br> input new
+                <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
+                    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>
 <section class="section5 features bg-white px-6">
 
     <div class="row">
-       
+
         <div class="col-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="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>
+                <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>

resources/views/partials/navbar.antlers.html

-<nav class="navbar navbar-expand-lg navbar-custom px-1 px-sm-5 py-3 fixed-top">
+<nav class="navbar navbar-expand-lg navbar-custom px-6 py-3 fixed-top">
   <div class="container-fluid">
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01"
-      aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
+    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample"
+      aria-controls="offcanvasExample">
       <span class="navbar-toggler-icon"></span>
     </button>
-    <div class="collapse navbar-collapse d-none d-lg-block" id="navbarTogglerDemo01">
-      <a class="navbar-brand" href="#">AMICS</a>
-      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+    <div class="collapse navbar-collapse navbar-innner-container d-none d-lg-block" id="navbarTogglerDemo01">
+      <a class="navbar-brand" href="/">
+        <img src="../../assets/images/amics-logo.png" width="150">
+      </a>
+      <ul class="navbar-nav ms-auto mb-2 mb-lg-0" style="gap: 20px;">
         <li class="nav-item">
-          <a class="nav-link active" aria-current="page" href="#">Pricing</a>
+          <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">
           </ul>
         </li>
         <li class="nav-item">
-          <a class="nav-link text-decoration-underline" aria-current="page" href="#">Start Free Trial</a>
+          <a class="nav-link text-decoration-underline" aria-current="page" href="/contact">Start Free Trial</a>
         </li>
       </ul>
     </div>
   </div>
-</nav>
+</nav>
+<!--Off Canvas-->
+<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
+  <div class="offcanvas-header">
+    <a class="navbar-brand" href="#">
+      <img src="../../assets/images/amics-logo.png" width="150">
+    </a>
+    <button type="button" class="btn-close text-light" data-bs-dismiss="offcanvas" aria-label="Close"
+      style="color: #FFF;"></button>
+  </div>
+  <div class="offcanvas-body">
+
+    <ul class="navbar-nav ms-auto mb-2 mb-lg-0" style="gap: 20px;">
+      <li class="nav-item">
+        <a class="nav-link active" aria-current="page" href="#">Pricing</a>
+      </li>
+      <li class="nav-item dropdown">
+        <a class="nav-link dropdown-toggle" data-bs-toggle="collapse" href="#collapseExample" data-bs-toggle="dropdown" role="button" aria-expanded="false" aria-controls="collapseExample">
+          Link with href
+        </a>
+        <div class="collapse" id="collapseExample">
+          <div class="card card-body px-0">
+            <ul class="p-0" style="list-style: none;">
+              <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>
+          </div>
+        </div>
+      </li>
+      <li class="nav-item dropdown">
+        <a class="nav-link dropdown-toggle" data-bs-toggle="collapse" href="#collapseExample2" data-bs-toggle="dropdown" role="button" aria-expanded="false" aria-controls="collapseExample">
+          What's New
+        </a>
+        <div class="collapse" id="collapseExample2">
+          <div class="card card-body px-0">
+            <ul class="p-0" style="list-style: none;">
+              <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>
+          </div>
+        </div>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link text-decoration-underline" aria-current="page" href="#">Start Free Trial</a>
+      </li>
+    </ul>
+
+  </div>
+</div>

resources/views/pricing.antlers.html

+<!-- Video Player Section -->
+<div class="container-fluid p-0">
+    <div class="p-0 position-relative d-flex flex-column pricing-hero-section">
+
+        <div class="mx-auto my-auto text-center">
+            <h2 class="text-light fw-bold">The Ultimate Platform to</br> Maximise Asset Potential</h2>
+            <p class="text-light">Harness the Full Force of Innovation in every aspect of operation</p>
+        </div>
+
+        <div class="position-absolute d-flex flex-row container-fluid"
+            style="gap: 35px;width: 80%; left: 50%; bottom: 20%; transform: translateX(-50%);">
+
+            <div class="flex-grow-1 ms-5 position-relative">
+                <input id="pricng-email-input" type="text" class="form-control" placeholder="Enter your email address"
+                    style="background-color: rgba(255, 255, 255, 0.2);border: none; padding: 28px 50px; border-radius: 50px;">
+                <button type="button" class="btn-amics-small fw-bold mx-auto position-absolute"
+                    style="top: 10px;right: 10px;">Start Free Trial</button>
+            </div>
+
+            <div style="max-width: 50%;">
+                <p class="text-light text-start p-small m-0">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>
+
+    </div>
+</div>
+
+<section class="pricing-section1 features bg-white px-6">
+
+    <div class="d-flex flex-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 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-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" style="max-width: 35%;">
+                <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>
+
+
+
+</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-wrap">
+            <div class="p-2" style="width:20%;">
+                <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" style="width:20%;">
+                <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" style="width:20%;">
+                <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" style="width:20%;">
+                <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" style="width:20%;">
+                <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-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-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>