fix: update frontend styles and scripts

public/assets/css/styles.css

@@ -14569,9 +14569,7 @@ jdp-container .jdp-icon-plus.not-in-range svg, jdp-container .jdp-icon-minus.not
   opacity: 0.3;
 }
 jdp-container .jdp-years, jdp-container .jdp-months {
-  display: -webkit-inline-box;
+  /*display: -webkit-flex;*/
-  display: -webkit-flex;
-  display: -ms-inline-flexbox;
   display: inline-flex;
   margin: 0 2.5%;
   font-size: 120%;
@@ -14746,4 +14744,470 @@ jdp-container .jdp-btn-today, jdp-container .jdp-btn-empty {
 }
 .datepic:focus {
   outline: none;
-}
+}
+
+
+/* =========================================================
+   TRAVEL HERO HEADER
+========================================================= */
+
+.travel-header {
+    position: relative;
+    min-height: 560px;
+    overflow: hidden;
+    direction: rtl;
+    color: #fff;
+}
+
+
+/* Background */
+
+.travel-header-bg {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+}
+
+.travel-header-bg-image {
+    position: absolute;
+    inset: 0;
+
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+
+    transform: scale(1.02);
+}
+
+.travel-header-overlay {
+    position: absolute;
+    inset: 0;
+
+    background:
+        linear-gradient(
+            180deg,
+            rgba(5, 20, 40, .78) 0%,
+            rgba(5, 20, 40, .48) 45%,
+            rgba(5, 20, 40, .72) 100%
+        );
+}
+
+
+/* Content */
+
+.travel-header-content {
+    position: relative;
+    z-index: 2;
+}
+
+
+/* =========================================================
+   NAVBAR
+========================================================= */
+
+.travel-navbar {
+    min-height: 90px;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    border-bottom: 1px solid rgba(255,255,255,.18);
+
+    position: relative;
+}
+
+
+/* Logo */
+
+.travel-logo a {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    text-decoration: none !important;
+    color: #fff;
+}
+
+.travel-logo-icon {
+    width: 48px;
+    height: 48px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border-radius: 14px;
+
+    background: rgba(255,255,255,.15);
+
+    border: 1px solid rgba(255,255,255,.28);
+
+    backdrop-filter: blur(8px);
+
+    font-size: 21px;
+}
+
+.travel-logo-content {
+    display: flex;
+    flex-direction: column;
+    line-height: 1.5;
+}
+
+.travel-logo-content strong {
+    font-size: 17px;
+    font-weight: 800;
+}
+
+.travel-logo-content small {
+    font-size: 11px;
+    opacity: .75;
+}
+
+
+/* =========================================================
+   MENU
+========================================================= */
+
+.travel-menu ul {
+    display: flex;
+    align-items: center;
+
+    margin: 0;
+    padding: 0;
+
+    list-style: none;
+
+    gap: 4px;
+}
+
+.travel-menu li {
+    position: relative;
+}
+
+.travel-menu a {
+    display: block;
+
+    padding: 12px 17px;
+
+    color: rgba(255,255,255,.88);
+
+    text-decoration: none !important;
+
+    font-size: 14px;
+    font-weight: 600;
+
+    border-radius: 9px;
+
+    transition: all .25s ease;
+}
+
+.travel-menu a:hover {
+    color: #fff;
+    background: rgba(255,255,255,.12);
+}
+
+.travel-menu li.active a {
+    color: #fff;
+    background: rgba(255,255,255,.15);
+}
+
+
+/* خط زیر آیتم فعال */
+
+.travel-menu li.active::after {
+    content: "";
+
+    position: absolute;
+
+    bottom: -1px;
+    left: 17px;
+    right: 17px;
+
+    height: 3px;
+
+    background: #fff;
+
+    border-radius: 10px 10px 0 0;
+}
+
+
+/* =========================================================
+   ACTION
+========================================================= */
+
+.travel-navbar-actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.travel-login {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    padding: 11px 18px;
+
+    color: #fff !important;
+
+    text-decoration: none !important;
+
+    border-radius: 10px;
+
+    background: rgba(255,255,255,.14);
+
+    border: 1px solid rgba(255,255,255,.25);
+
+    backdrop-filter: blur(8px);
+
+    font-size: 13px;
+    font-weight: 700;
+
+    transition: all .25s ease;
+}
+
+.travel-login:hover {
+    background: rgba(255,255,255,.23);
+    transform: translateY(-2px);
+}
+
+
+/* =========================================================
+   HERO CONTENT
+========================================================= */
+
+.travel-hero {
+    min-height: 465px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    text-align: center;
+}
+
+.travel-hero-content {
+    max-width: 800px;
+    margin: auto;
+    padding: 70px 20px 80px;
+}
+
+.travel-hero-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+
+    padding: 8px 16px;
+
+    border-radius: 50px;
+
+    background: rgba(255,255,255,.13);
+
+    border: 1px solid rgba(255,255,255,.2);
+
+    backdrop-filter: blur(8px);
+
+    font-size: 13px;
+}
+
+.travel-hero h1 {
+    margin: 20px 0 15px;
+
+    color: #fff;
+
+    font-size: 48px;
+    line-height: 1.45;
+
+    font-weight: 800;
+
+    text-shadow: 0 4px 20px rgba(0,0,0,.25);
+}
+
+.travel-hero h1 span {
+    color: #fff;
+}
+
+.travel-hero p {
+    max-width: 620px;
+    margin: 0 auto;
+
+    color: rgba(255,255,255,.88);
+
+    font-size: 16px;
+    line-height: 2;
+}
+
+
+/* =========================================================
+   HERO BUTTONS
+========================================================= */
+
+.travel-hero-buttons {
+    margin-top: 30px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    gap: 12px;
+}
+
+.hero-btn {
+    min-width: 160px;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    gap: 8px;
+
+    padding: 13px 22px;
+
+    border-radius: 11px;
+
+    text-decoration: none !important;
+
+    font-size: 14px;
+    font-weight: 700;
+
+    transition: all .25s ease;
+}
+
+.hero-btn-primary {
+    color: #1268d8 !important;
+    background: #fff;
+
+    box-shadow: 0 10px 30px rgba(0,0,0,.18);
+}
+
+.hero-btn-primary:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 14px 35px rgba(0,0,0,.25);
+}
+
+.hero-btn-outline {
+    color: #fff !important;
+
+    border: 1px solid rgba(255,255,255,.45);
+
+    background: rgba(255,255,255,.08);
+
+    backdrop-filter: blur(8px);
+}
+
+.hero-btn-outline:hover {
+    color: #1268d8 !important;
+    background: #fff;
+
+    transform: translateY(-3px);
+}
+
+
+/* =========================================================
+   MOBILE
+========================================================= */
+
+.travel-mobile-toggle {
+    display: none;
+
+    width: 42px;
+    height: 42px;
+
+    border: 1px solid rgba(255,255,255,.25);
+    border-radius: 10px;
+
+    background: rgba(255,255,255,.12);
+
+    color: #fff;
+
+    cursor: pointer;
+}
+
+.travel-mobile-menu {
+    display: none;
+}
+
+
+/* =========================================================
+   RESPONSIVE
+========================================================= */
+
+@media (max-width: 991px) {
+
+    .travel-menu {
+        display: none;
+    }
+
+    .travel-mobile-toggle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .travel-header {
+        min-height: 500px;
+    }
+
+    .travel-hero h1 {
+        font-size: 38px;
+    }
+
+}
+
+
+@media (max-width: 576px) {
+
+    .travel-navbar {
+        min-height: 72px;
+    }
+
+    .travel-logo-icon {
+        width: 42px;
+        height: 42px;
+    }
+
+    .travel-logo-content strong {
+        font-size: 14px;
+    }
+
+    .travel-logo-content small {
+        display: none;
+    }
+
+    .travel-login {
+        padding: 9px 11px;
+        font-size: 12px;
+    }
+
+    .travel-login i {
+        display: none;
+    }
+
+    .travel-hero {
+        min-height: 420px;
+    }
+
+    .travel-hero-content {
+        padding: 50px 15px;
+    }
+
+    .travel-hero h1 {
+        font-size: 30px;
+        line-height: 1.6;
+    }
+
+    .travel-hero p {
+        font-size: 13px;
+    }
+
+    .travel-hero-buttons {
+        flex-direction: column;
+    }
+
+    .hero-btn {
+        width: 100%;
+        max-width: 260px;
+    }
+
+}

public/assets/js/custom.js

@@ -359,3 +359,31 @@ $('.mobile-picker').each(function(i, item){
         });
     }
 });
+
+
+document.addEventListener('DOMContentLoaded', function () {
+
+    const menuButton = document.querySelector('.mobile-menu-toggle');
+    const mobileNavigation = document.querySelector('.mobile-navigation');
+
+    if (!menuButton || !mobileNavigation) {
+        return;
+    }
+
+    menuButton.addEventListener('click', function () {
+
+        const isOpen = mobileNavigation.style.display === 'block';
+
+        mobileNavigation.style.display = isOpen ? 'none' : 'block';
+
+        const icon = menuButton.querySelector('i');
+
+        if (icon) {
+            icon.className = isOpen
+                ? 'fa fa-bars'
+                : 'fa fa-times';
+        }
+
+    });
+
+});