12-09-2025

TWA-App/Views/Home/Index.cshtml

@@ -30,13 +30,51 @@
                     </div>
                 </div>
                 <div class="swiper-slide">
-                    <div class="background">
+                    <div class="background" style="background-image: url(@Url.AbsoluteContent("~/images/banner/drone1.jpg"));">
-                        <img src="/images/banner/b3.jpg">
+                    </div>
+                    <div class="con_slider">
+                        <div class="h-100 d-f a-i-center">
+                            <div class="cfull">
+                                <div class="r d-f f-c a-i-center banner-content">
+                                    <h1>Air Freight</h1>
+                                    <div class="sec-header">
+                                        <h2>Global air, local care</h2>
+                                    </div>
+                                    <span class="desc">
+                                        Your cargo, delivered anywhere in the world with confidence, care, and the reliability you can trust
+                                    </span>
+                                    <div class="d-f mt-5">
+                                        <div class="sec-1">
+                                            <button class="btn btn-second">See Details</button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div class="swiper-slide">
-                    <div class="background">
+                    <div class="background" style="background-image: url(@Url.AbsoluteContent("~/images/banner/airline.jpg"));">
-                        <img src="/images/banner/b2.jpg">
+                    </div>
+                    <div class="con_slider">
+                        <div class="h-100 d-f a-i-center">
+                            <div class="cfull">
+                                <div class="r d-f f-c a-i-center banner-content">
+                                    <h1>Air Freight</h1>
+                                    <div class="sec-header">
+                                        <h2>Global air, local care</h2>
+                                    </div>
+                                    <span class="desc">
+                                        Your cargo, delivered anywhere in the world with confidence, care, and the reliability you can trust
+                                    </span>
+                                    <div class="d-f mt-5">
+                                        <div class="sec-1">
+                                            <button class="btn btn-second">See Details</button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -234,23 +272,23 @@
     <div class="con block1">
         <div class="r">
             <div class="c-l-5">
-                <div class="d-f f-c a-i-end">
+                <div class="d-f f-c a-i-start a-i-l-end">
                     <span class="sub-title">All Our Services</span>
                     <h2>
                         Service We Offer
                     </h2>
                 </div>
             </div>
-            <div class="c-l-1 pl-3 pr-3 j-c-center d-f "><div class="sep"></div> </div>
+            <div class="c-l-1 pl-3 pr-3 j-c-center d-n d-l-f "><div class="sep"></div> </div>
             <div class="c-l-5">
-                <p class="desc">orem ipsum dolor sit amet, consectetur adipisicing elit. Eos aperiam porro reiciendis dolore doloribus repellendus tempora vitae quia voluptas ipsum eligend.</p>
+                <p class="desc mt-3 mt-l-0">orem ipsum dolor sit amet, consectetur adipisicing elit. Eos aperiam porro reiciendis dolore doloribus repellendus tempora vitae quia voluptas ipsum eligend.</p>
             </div>
         </div>
     </div>
     <div class="con block2">
         <div class="r">
-            <div class="r-n-g">
+            <div class="r-n-g j-c-center">
-                <div class="c-l-4">
+                <div class="c-12 c-s-6 c-l-4">
                     <div class="grid">
                         <div class="service-item-thumb">
                             <img class="w-100" src="https://shtheme.org/demosd/logistek/wp-content/themes/logistek/assets/images/service/service1.jpg" alt="">
@@ -266,7 +304,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="c-l-4">
+                <div class="c-12 c-s-6 c-l-4">
                     <div class="grid">
                         <div class="service-item-thumb">
                             <img class="w-100" src="https://shtheme.org/demosd/logistek/wp-content/themes/logistek/assets/images/service/service1.jpg" alt="">
@@ -282,7 +320,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="c-l-4">
+                <div class="c-12 c-s-6 c-l-4">
                     <div class="grid">
                         <div class="service-item-thumb">
                             <img class="w-100" src="https://shtheme.org/demosd/logistek/wp-content/themes/logistek/assets/images/service/service1.jpg" alt="">
@@ -354,6 +392,101 @@
         </div>
     </div>
 </section>
+<section class="section">
+    <div class="con">
+        <div class="r">
+            <div class="c-12 d-f f-c tabQuoute">
+                <div class="atabs">
+                    <div class="tab-item">
+                        <a href="javascript:void(0)" class="item active">Get a Quote</a>
+                    </div>
+                    <div class="tab-item">
+                        <a href="javascript:void(0)" class="item">Track &amp; Trace</a>
+                    </div>
+                </div>
+                <div class="tabcontents">
+                    <div class="d-f f-c tabcontent">
+                        <div class="form__group">
+                            <div class="r">
+                                <label class="choice c-4">
+                                    <input type="radio" name="service_type" value="OCEAN">
+                                    <span>Ocean Freight</span>
+                                </label>
+                                <label class="choice c-4">
+                                    <input type="radio" name="service_type" value="AIR">
+                                    <span>Air Freight</span>
+                                </label>
+                                <label class="choice c-4">
+                                    <input type="radio" name="service_type" value="LAND">
+                                    <span>Land Transport</span>
+                                </label>
+                            </div>
+                        </div>
+
+                        <div class="r gap-2">
+                            <label class="field c-4">
+                                <span class="field__label">Name</span>
+                                <input class="field__input" type="text" name="name">
+                            </label>
+                            <label class="field c-4">
+                                <span class="field__label">E-mail</span>
+                                <input class="field__input" type="email" name="email">
+                            </label>
+                            <label class="field c-4">
+                                <span class="field__label">Phone</span>
+                                <input class="field__input" type="tel" name="phone">
+                            </label>
+                        </div>
+
+                        <div class="r gap-2">
+                            <label class="field c-6">
+                                <span class="field__label">Cargo Type</span>
+                                <input class="field__input" type="text" name="cargo_type">
+                            </label>
+                            <label class="field c-6">
+                                <span class="field__label">Origin</span>
+                                <input class="field__input" type="text" name="origin">
+                            </label>
+                            <label class="field c-6">
+                                <span class="field__label">Destination</span>
+                                <input class="field__input" type="text" name="destination">
+                            </label>
+                        </div>
+
+                        <div class="form__group">
+                            <div class="r gap-2">
+                                <label class="field c-2">
+                                    <span class="field__label">Qty</span>
+                                    <input class="field__input" type="number" name="qty">
+                                </label>
+                                <label class="field c-2">
+                                    <span class="field__label">Weight</span>
+                                    <input class="field__input" type="text" name="weight">
+                                </label>
+                                <label class="field c-2">
+                                    <span class="field__label">Width</span>
+                                    <input class="field__input" type="text" name="width">
+                                </label>
+                                <label class="field c-2">
+                                    <span class="field__label">Height</span>
+                                    <input class="field__input" type="text" name="height">
+                                </label>
+                                <label class="field c-2">
+                                    <span class="field__label">Length</span>
+                                    <input class="field__input" type="text" name="length">
+                                </label>
+                            </div>
+                        </div>
+
+                        <button class="btn btn--primary" type="submit">Request a Quote</button>
+                    </div>
+                    <div class="d-f f-c tabcontent">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
 <section class="con-parallax">
     <div class="bg-wrapper parallax" data-dept="0.3">
         <img src="https://wp.storebuild.shop/portx/wp-content/uploads/2023/07/cta1-bg.jpg" alt="Background" class="bg-img">
@@ -385,11 +518,11 @@
             </div>
         </div>
     </div>
-    <div class="r">
+    <div class="r j-c-center">
-        <div class="c-12 c-m-6 c-l-4">
+        <div class="c-12 c-s-6 c-l-4">
             <div class="grid">
                 <a class="grid-image">
-                    <img loading="lazy" decoding="async" width="350" height="227" src="~/images/1000/blog-section/seaport.jpg" class="img-fluid wp-post-image" alt="">
+                    <img loading="lazy" src="~/images/1000/blog-section/seaport.jpg" class="img-fluid wp-post-image" alt="">
                 </a>
                 <div class="grid-body d-f f-c">
                     <div class="blog-author d-f a-i-center">
@@ -413,10 +546,10 @@
                 </div>
             </div>
         </div>
-        <div class="c-12 c-m-6 c-l-4">
+        <div class="c-12 c-s-6 c-l-4">
             <div class="grid">
                 <a class="grid-image">
-                    <img loading="lazy" decoding="async" width="350" height="227" src="~/images/1000/blog-section/introduction-to-air-cargo-operation.jpg" class="img-fluid wp-post-image" alt="">
+                    <img loading="lazy" src="~/images/1000/blog-section/introduction-to-air-cargo-operation.jpg" class="img-fluid wp-post-image" alt="">
                 </a>
                 <div class="grid-body d-f f-c">
                     <div class="blog-author d-f a-i-center">
@@ -440,10 +573,10 @@
                 </div>
             </div>
         </div>
-        <div class="c-12 c-m-6 c-l-4">
+        <div class="c-12 c-s-6 c-l-4">
             <div class="grid">
                 <a class="grid-image">
-                    <img loading="lazy" decoding="async" width="350" height="227" src="~/images/1000/blog-section/obooks-for-logistics.png" class="img-fluid wp-post-image" alt="">
+                    <img loading="lazy" src="~/images/1000/blog-section/obooks-for-logistics.png" class="img-fluid wp-post-image" alt="">
                 </a>
                 <div class="grid-body d-f f-c">
                     <div class="blog-author d-f a-i-center">
@@ -471,24 +604,6 @@
     </div>
 </section>
 
-<div class="cfull">
-    <div class="fl-row-content fl-row-full-width fl-node-content">
-        <div class="fl-col-group fl-node-5a654bcfda4a1" data-node="5a654bcfda4a1">
-            <div class="fl-col fl-node-5a654bcfda595 fl-col-bg-color" data-node="5a654bcfda595">
-                <div class="fl-col-content fl-node-content vamtam-show-bg-image">
-                    <div class="fl-module fl-module-vamtam-map fl-node-5a654c23c25fd" data-node="5a654c23c25fd">
-                        <div class="fl-module-content fl-node-content">
-                            <div class="fl-map">
-                                <iframe src="https://maps.google.com/maps?q=New+York+-+1060%2C+Str.+First+Avenue+1&amp;iwloc=near&amp;output=embed" height="605" frameborder="0" style="border:0;width:100%" loading="lazy"></iframe>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
 @section jsLib {
     <script src="@Url.AbsoluteContent("~/js/ext_libs/swiper-bundle.min.js")" js-lib></script>
     <script type="module" src="@Url.AbsoluteContent("~/js/js-page/1000.js")" js-lib></script>

TWA-App/wwwroot/css/site.css

@@ -202,6 +202,10 @@ body {
     background: var(--text-color-white)
 }
 
+.nav-login{
+    margin: 0 20px
+}
+
 .navmain {
     font-weight: 600;
     font-size: 1rem
@@ -331,10 +335,8 @@ body {
     .m-header .hd-close {
         font-size: 1.5em;
         position: absolute;
-        top: 5px;
+        top: 20px;
-        right: 5px;
+        right: 20px;
-        width: 30px;
-        height: 30px;
     }
 
 
@@ -603,16 +605,19 @@ div[class*=sec]{
 .ico-menu {
     margin-left: 0;
     background-color: transparent;
+    cursor:pointer
 }
 
     .ico-menu div {
-        background-color: transparent !important
+        background-color: transparent !important;
+        cursor: pointer
     }
 
     .ico-menu span {
         background-color: var(--text-color-white) !important;
         border-radius: 2px;
         height: 2px !important;
+        cursor: pointer
     }
 
     .ico-menu:hover div:first-child span, .ico-menu.active div:first-child span {
@@ -645,7 +650,6 @@ div[class*=sec]{
 
     .section .sub-title {
         color: var(--color-primary);
-       
         text-transform: capitalize;
         font-weight: 700;
         letter-spacing: 1px;
@@ -835,6 +839,7 @@ div[class*=sec]{
         opacity: .4;
     }
     .section-break .sub-title {
+        text-align: center;
         margin-bottom: 10px
     }
     .section-break .title{
@@ -1140,13 +1145,31 @@ div[class*=sec]{
 .partner-section{
     padding: 80px 0
 }
+
+.partner-section:before{
+    opacity: .1 !important
+}
+
+/***End Section***/
+
+/***Quoute Section****/
+.tabQuoute .tabcontent {
+    padding: 30px
+}
 /***End Section***/
 /**Blog Section*/
-
 .blog-section .title {
     text-align: center
 }
 
+.blog-section .grid-image{
+    overflow:hidden;
+    max-height:230px;
+}
+
+.blog-section .grid{
+    height: calc(100% - 40px)
+}
 .blog-author {
     position: absolute;
     top: -25px;
@@ -1157,6 +1180,11 @@ div[class*=sec]{
     min-width: 140px;
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.06);
 }
+
+.grid-body .title {
+    text-align: left !important
+}
+
 .blog-author-content span{
     color: var(--text-color-lW5)
 }
@@ -1297,7 +1325,7 @@ div[class*=sec]{
     top: 0;
     left: 0;
     width: 100%;
-    height: calc(var(--vh, 1vh) * 100);
+    height: calc(var(--vh, 1vh) * 110);
     z-index: -1;
 }
 
@@ -1308,7 +1336,6 @@ div[class*=sec]{
     height: 100%;
     width: 100%;
     object-fit: cover;
-    transition: transform 0.1s linear;
     transform: translateX(-50%) translateY(0); /* chỉ dịch ngang center */
 }
 
@@ -1332,3 +1359,68 @@ div[class*=sec]{
     transition: all ease-in .4s;
 }
 /*End Ovelay*/
+/****************** ATabs ***********************/
+.atabs {
+    display: inline-flex;
+    font-weight: 600;
+    padding: 1px 0;
+}
+
+    .atabs .item {
+        
+        padding: 20px 25px;
+        color: var(--text-color-dark);
+        line-height: 2.1;
+        transition: color .15s ease-in-out, border-color .15s ease-in-out;
+    }
+
+        .atabs .item:not([disabled]):not(.active):hover {
+            color: var(--color-primary)
+        }
+
+        .atabs .item[disabled] {
+            cursor: default;
+            color: var(--text-disable)
+        }
+
+.animationSlide {
+    width: 100%;
+    overflow-x: hidden;
+}
+
+    .animationSlide .slideContent {
+        display: inline-flex;
+        transition: transform .6s ease-in-out
+    }
+
+    .animationSlide .tabcontent.show {
+        opacity: 1;
+    }
+
+    .animationSlide .tabcontent {
+        opacity: 0;
+    }
+
+.animationFade .tabcontent {
+    opacity: 0;
+    display: none;
+}
+
+    .animationFade .tabcontent.show {
+        display: block;
+    }
+
+.tabcontents {
+    border: 1px solid var(--text-color-lW1)
+}
+
+.tabcontent.fade {
+    transition: opacity .6s linear;
+}
+
+.atabs .item.active {
+    color: var(--color-primary);    
+    border-bottom: 2px solid var(--color-primary)
+}
+
+/********************* End ***********************/

TWA-App/wwwroot/js/js-page/1000.js

@@ -1,4 +1,4 @@
-
+import ATab from '/js/libs/js-ATab.js';
 function isInViewport(element) {
     const rect = element.getBoundingClientRect();
     return (
@@ -20,7 +20,24 @@ function updateActiveSlideShow(swiperInstance) {
 window.L1000 = function () {
     const swiper = new Swiper('.mainSlider', {
         loop: true,
+        effect: 'fade',
+        fadeEffect: {
+            crossFade: true, // ảnh cũ mờ dần, ảnh mới xuất hiện
+        },
+        autoplay: {
+            delay: 5000,      // 5s
+            disableOnInteraction: false, // không dừng khi hover hay click
+        },
+        loop: true,  // bật loop để chạy liên tục
+        speed: 1000,
+        navigation: {
+            nextEl: ".swiper-button-next",
+            prevEl: ".swiper-button-prev",
+        },
         on: {
+            init: function () {
+                updateActiveSlideShow(this);
+            },
             slideChangeTransitionEnd: function () {
                 updateActiveSlideShow(this);
             }
@@ -43,6 +60,7 @@ window.L1000 = function () {
             }
         }
     });
+    var tabs = new ATab(document.querySelector(".tabQuoute .atabs"), document.querySelector(".tabQuoute .tabcontents"));
   
     const parallaxEls = document.querySelectorAll('.parallax');
     let ticking = false;

TWA-App/wwwroot/js/js-page/asyncLayout.js

@@ -16,7 +16,7 @@ class AsyncLayout extends ALayout {
         this.isLoaded = false;
         this.layMNav = `<div class="m-header">
                     <a app-nav href="${window.GetAbsoluteURL("/")}" class="c_logo d-f a-i-center c-a">
-                        <img src="/images/logo/slogo.png" />
+                        <img src="/images/logo/slogo.png" style="height:65px" />
                         <a href="javascript:void(0)" class="hd-close">
                             <i class="atg atg-x"></i>
                         </a>
@@ -26,7 +26,7 @@ class AsyncLayout extends ALayout {
                   
                  </div>`;
         this.fHeader = `<div id="fHeader" class="f-header">
-                    <div class="cfull">
+                    <div class="con">
                         <div class="r d-f a-i-center c_second_header">
                             <a app-nav href="${window.GetAbsoluteURL("/")}" class="c_logo d-f a-i-center c-a">
                                 <img src="/images/logo/slogo.png" style="height:32px" />
@@ -36,8 +36,8 @@ class AsyncLayout extends ALayout {
                             </div>
                             
                             <div class="ml-auto d-f d-x-n a-i-center">
-                                <a class="d-f nav-login mr-0"><i class="atg atg-search"></i></a>
+                                <a class="d-f nav-login mr-0"><i class="atg atg-search a-2x"></i></a>
-                                <a app-nav href="${window.GetAbsoluteURL("/Login")}" class="d-f nav-login"><i class="atg atg-user"></i></a>
+                                <a app-nav href="${window.GetAbsoluteURL("/Login")}" class="d-f nav-login"><i class="atg atg-user a-2x"></i></a>
                                 <div class="m-navbar">
                                     <div class="d-f f-c ico-menu p-0">
                                         <div><span style="width:100%"></span></div>