done video hero design

resources/css/site.css

@@ -38,6 +38,48 @@ h5 {
     font-weight: 400;
 }
 
+.rounded-amc{
+
+}
+
+.hero-section{
+
+    width: 100%;
+    min-height: 120vh;
+}
+
+.hero-section video{
+
+    height: 120vh;
+    object-fit: cover;
+    filter: brightness(50%);
+}
+
+.hero-section .text-highlight{
+    z-index: 10;
+    top:30%;
+    left: 50%;
+    transform: translate(-50%,-50%); 
+    width:85%;
+    position: absolute;
+    text-align: center;
+}
+
+.hero-section .text-highlight .title{
+    color: #FFF;
+    font-size: clamp(3.3em, 5vw, 5.5em);
+    font-weight: 600;
+    line-height: 60px;
+    margin-bottom: 30px
+}
+
+.hero-section .text-highlight .description{
+
+    font-size: 1.6em;
+    width: 90%;
+
+}
+
 .p-small {
     font-size: clamp(0.85em, 1.042vw, 1.25em);
 }
@@ -146,8 +188,8 @@ p {
 
 /* HOME */
 .section {
-    padding-top: 105px;
-    border-radius: 150px 150px 0 0;
+    padding-top: 40px;
+    border-radius: 50px 50px 0 0;
     transform: translateY(-7%);
 }
 
@@ -324,7 +366,7 @@ p {
 
 /* CONTACT PAGE */
 .contact-section {
-    padding-top: 90px;
+    padding-top: 80px;
 }
 
 .bg-contact {
@@ -480,10 +522,40 @@ p {
 
 /* Medium devices (≥768px) - md */
 @media (min-width: 768px) {
+
+    .section {
+        padding-top: 105px;
+        border-radius: 150px 150px 0 0;
+        transform: translateY(-7%);
+    }
+    
     .footer-menu-container {
         padding: 0px 15px;
     }
 
+    .hero-section{
+
+        width: 100%;
+        min-height: 140vh;
+    }
+    
+    .hero-section video{
+    
+        height: 140vh;
+        object-fit: cover;
+        filter: brightness(50%);
+    }
+
+    .hero-section .text-highlight{
+        z-index: 10;
+        top:43%;
+        left: 50%;
+        transform: translate(-50%,-50%); 
+        width:80%;
+        position: absolute;
+        text-align: center;
+    }
+
     .contact-form input {
         border: none;
         transition: all 0.3s ease-in-out;
@@ -491,9 +563,16 @@ p {
         padding: 25px 40px;
         border-radius: 50px;
         border: 1px solid #ADADAD;
-        font-size: clamp(0.85em, 1.042vw, 1.25em);
         margin-bottom: 20px;
     }
+
+    .hero-section .text-highlight .title{
+        color: #FFF;
+        font-size: clamp(3em, 5vw, 5.5em);
+        font-weight: 600;
+        line-height: 70px;
+        margin-bottom: 30px
+    }
 }
 
 /* Large devices (≥992px) - lg */
@@ -506,6 +585,7 @@ p {
         padding-right: 7rem;
         padding-left: 7rem;
     }
+    
 }
 
 /* Extra large devices (≥1200px) - xl */

resources/views/home.antlers.html

@@ -1,20 +1,23 @@
 <!-- Video Player Section -->
-<div class="container-fluid p-0">
+<div class="hero-section">
     <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 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 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 class="position-absolute row" style="z-index: 10;bottom:15%;left: 50%;transform: translate(-50%,-50%); width: 100%; ">
+            <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>
-                <button type="button" class="btn-amics-small fw-bold mx-auto">Start Free Trial</button>
+            <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>
         </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">
+        <video width="100%" autoplay muted loop playsinline>
+            <source src="../assets/video/4010187-hd_1366_720_50fps.mp4" type="video/mp4">
             Your browser does not support the video tag.
         </video>