@extends('layouts.app')

@section('title', 'صفحه اصلی')

@section('content')

    {{-- Hero --}}

    <div class="theme-hero-area theme-hero-area-primary">
        <div class="theme-hero-area-bg-wrap">

            <div class="theme-hero-area-bg ws-action"
                 style="background-image:url('{{ asset('assets/img/o14abktz5iy_1500x800.jpg') }}');"
                 data-parallax="true">
            </div>

            <div class="theme-hero-area-mask theme-hero-area-mask-half"></div>

            <div class="theme-hero-area-inner-shadow theme-hero-area-inner-shadow-light"></div>

        </div>

        <div class="theme-hero-area-body">

            <div class="_pt-250 _pb-200 _pv-mob-50">

                <div class="container-fluid">

                    <div class="theme-search-area-tabs">

                        <div class="theme-search-area-tabs-header _c-w _ta-mob-c">

                            <h1 class="theme-search-area-tabs-title">
                                سفر خود را شروع کنید
                            </h1>

                            <p class="theme-search-area-tabs-subtitle">
                                صدها وب سایت مسافرتی را همزمان با هم مقایسه کنید
                            </p>

                        </div>

                        {{-- Search --}}

                        <div class="tabbable">

                            <ul class="nav nav-tabs nav-line nav-white nav-lg nav-mob-inline" role="tablist">

                                <li class="active" role="presentation">
                                    <a aria-controls="SearchAreaTabs-1"
                                       role="tab"
                                       data-toggle="tab"
                                       href="#SearchAreaTabs-1">
                                        هتل
                                    </a>
                                </li>

                                <li role="presentation">
                                    <a aria-controls="SearchAreaTabs-2"
                                       role="tab"
                                       data-toggle="tab"
                                       href="#SearchAreaTabs-2">
                                        خانه ها
                                    </a>
                                </li>

                                <li role="presentation">
                                    <a aria-controls="SearchAreaTabs-3"
                                       role="tab"
                                       data-toggle="tab"
                                       href="#SearchAreaTabs-3">
                                        پروازها
                                    </a>
                                </li>

                                <li role="presentation">
                                    <a aria-controls="SearchAreaTabs-4"
                                       role="tab"
                                       data-toggle="tab"
                                       href="#SearchAreaTabs-4">
                                        ماشین
                                    </a>
                                </li>

                                <li role="presentation">
                                    <a aria-controls="SearchAreaTabs-5"
                                       role="tab"
                                       data-toggle="tab"
                                       href="#SearchAreaTabs-5">
                                        تجربیات
                                    </a>
                                </li>

                            </ul>

                            <div class="tab-content _pt-20">

                                {{-- Hotel Search --}}

                                <div class="tab-pane active"
                                     id="SearchAreaTabs-1"
                                     role="tab-panel">

                                    <div class="theme-search-area theme-search-area-stacked">

                                        <div class="theme-search-area-form">

                                            <div class="row" data-gutter="none">

                                                <div class="col-md-3">

                                                    <div
                                                        class="theme-search-area-section first theme-search-area-section-curved theme-search-area-section-bg-white theme-search-area-section-no-border theme-search-area-section-mr">

                                                        <div class="theme-search-area-section-inner">

                                                            <i class="theme-search-area-section-icon lin lin-location-pin"></i>

                                                            <input class="theme-search-area-section-input typeahead"
                                                                   type="text"
                                                                   placeholder="موقعیت هتل"
                                                                   data-provide="typeahead">

                                                        </div>

                                                    </div>

                                                </div>

                                                <div class="col-md-4">

                                                    <div class="row" data-gutter="none">

                                                        <div class="col-md-6">

                                                            <div
                                                                class="theme-search-area-section theme-search-area-section-curved theme-search-area-section-bg-white theme-search-area-section-no-border theme-search-area-section-mr">

                                                                <div class="theme-search-area-section-inner">

                                                                    <i class="theme-search-area-section-icon lin lin-calendar"></i>

                                                                    <input
                                                                        class="theme-search-area-section-input datePickerStart _mob-h"
                                                                        value="تاریخ رفت"
                                                                        type="text"
                                                                        placeholder="تاریخ رفت"
                                                                        data-jdp>

                                                                    <input
                                                                        class="theme-search-area-section-input _desk-h mobile-picker"
                                                                        value="تاریخ"
                                                                        type="text"
                                                                        data-jdp>

                                                                </div>

                                                            </div>

                                                        </div>

                                                        <div class="col-md-6">

                                                            <div
                                                                class="theme-search-area-section theme-search-area-section-curved theme-search-area-section-bg-white theme-search-area-section-no-border theme-search-area-section-mr">

                                                                <div class="theme-search-area-section-inner">

                                                                    <i class="theme-search-area-section-icon lin lin-calendar"></i>

                                                                    <input
                                                                        class="theme-search-area-section-input datePickerEnd _mob-h"
                                                                        type="text"
                                                                        placeholder="تاریخ برگشت"
                                                                        data-jdp>

                                                                    <input
                                                                        class="theme-search-area-section-input _desk-h mobile-picker"
                                                                        value="تاریخ برگشت"
                                                                        type="text"
                                                                        data-jdp>

                                                                </div>

                                                            </div>

                                                        </div>

                                                    </div>

                                                </div>

                                                <div class="col-md-4">

                                                    <div class="row" data-gutter="none">

                                                        <div class="col-md-6">

                                                            <div
                                                                class="theme-search-area-section theme-search-area-section-curved theme-search-area-section-bg-white theme-search-area-section-no-border theme-search-area-section-mr quantity-selector"
                                                                data-increment="اتاق ها">

                                                                <div class="theme-search-area-section-inner">

                                                                    <i class="theme-search-area-section-icon lin lin-tag"></i>

                                                                    <input class="theme-search-area-section-input"
                                                                           value="1 اتاق"
                                                                           type="text">

                                                                </div>

                                                            </div>

                                                        </div>

                                                        <div class="col-md-6">

                                                            <div
                                                                class="theme-search-area-section theme-search-area-section-curved theme-search-area-section-bg-white theme-search-area-section-no-border theme-search-area-section-mr quantity-selector"
                                                                data-increment="مهمان">

                                                                <div class="theme-search-area-section-inner">

                                                                    <i class="theme-search-area-section-icon lin lin-people"></i>

                                                                    <input class="theme-search-area-section-input"
                                                                           value="2 مهمان"
                                                                           type="text">

                                                                </div>

                                                            </div>

                                                        </div>

                                                    </div>

                                                </div>

                                                <div class="col-md-1">

                                                    <button
                                                        class="theme-search-area-submit _mt-0 theme-search-area-submit-no-border theme-search-area-submit-curved">
                                                        جستجو
                                                    </button>

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                </div>


                                {{-- Flight Search --}}

                                <div class="tab-pane"
                                     id="SearchAreaTabs-3"
                                     role="tab-panel">

                                    <div class="theme-search-area theme-search-area-stacked">

                                        <div class="theme-search-area-form">

                                            <div class="row" data-gutter="none">

                                                <div class="col-md-5">

                                                    <div class="row" data-gutter="none">

                                                        <div class="col-md-6">

                                                            <div
                                                                class="theme-search-area-section first theme-search-area-section-curved theme-search-area-section-bg-white theme-search-area-section-no-border theme-search-area-section-mr">

                                                                <div class="theme-search-area-section-inner">

                                                                    <i class="theme-search-area-section-icon lin lin-location-pin"></i>

                                                                    <input
                                                                        class="theme-search-area-section-input typeahead"
                                                                        type="text"
                                                                        placeholder="مبدا"
                                                                        data-provide="typeahead">

                                                                </div>

                                                            </div>

                                                        </div>

                                                        <div class="col-md-6">

                                                            <div
                                                                class="theme-search-area-section theme-search-area-section-curved theme-search-area-section-bg-white theme-search-area-section-no-border theme-search-area-section-mr">

                                                                <div class="theme-search-area-section-inner">

                                                                    <i class="theme-search-area-section-icon lin lin-location-pin"></i>

                                                                    <input
                                                                        class="theme-search-area-section-input typeahead"
                                                                        type="text"
                                                                        placeholder="مقصد"
                                                                        data-provide="typeahead">

                                                                </div>

                                                            </div>

                                                        </div>

                                                    </div>

                                                </div>

                                                <div class="col-md-6">

                                                    <div class="row" data-gutter="none">

                                                        <div class="col-md-4">

                                                            <div
                                                                class="theme-search-area-section theme-search-area-section-curved theme-search-area-section-bg-white theme-search-area-section-no-border theme-search-area-section-mr">

                                                                <div class="theme-search-area-section-inner">

                                                                    <i class="theme-search-area-section-icon lin lin-calendar"></i>

                                                                    <input
                                                                        class="theme-search-area-section-input datePickerStart _mob-h"
                                                                        value="تاریخ رفت"
                                                                        id="datepicker-Depart"
                                                                        type="text"
                                                                        placeholder="تاریخ رفت"
                                                                        data-jdp>

                                                                    <input
                                                                        class="theme-search-area-section-input _desk-h mobile-picker"
                                                                        value="تاریخ"
                                                                        type="text"
                                                                        data-jdp>

                                                                </div>

                                                            </div>

                                                        </div>

                                                        <div class="col-md-4">

                                                            <div
                                                                class="theme-search-area-section theme-search-area-section-curved theme-search-area-section-bg-white theme-search-area-section-no-border theme-search-area-section-mr">

                                                                <div class="theme-search-area-section-inner">

                                                                    <i class="theme-search-area-section-icon lin lin-calendar"></i>

                                                                    <input
                                                                        class="theme-search-area-section-input datePickerEnd _mob-h"
                                                                        type="text"
                                                                        placeholder="تاریخ برگشت"
                                                                        data-jdp>

                                                                    <input
                                                                        class="theme-search-area-section-input _desk-h mobile-picker"
                                                                        value="تاریخ برگشت"
                                                                        type="text"
                                                                        data-jdp>

                                                                </div>

                                                            </div>

                                                        </div>

                                                        <div class="col-md-4">

                                                            <div
                                                                class="theme-search-area-section theme-search-area-section-curved theme-search-area-section-bg-white theme-search-area-section-no-border theme-search-area-section-mr quantity-selector"
                                                                data-increment="مسافر">

                                                                <div class="theme-search-area-section-inner">

                                                                    <i class="theme-search-area-section-icon lin lin-people"></i>

                                                                    <input class="theme-search-area-section-input"
                                                                           value="1 مسافر"
                                                                           type="text">

                                                                </div>

                                                            </div>

                                                        </div>

                                                    </div>

                                                </div>

                                                <div class="col-md-1">

                                                    <button
                                                        class="theme-search-area-submit _mt-0 theme-search-area-submit-no-border theme-search-area-submit-curved">
                                                        جستجو
                                                    </button>

                                                </div>

                                            </div>

                                        </div>

                                        <div
                                            class="theme-search-area-options theme-search-area-options-white theme-search-area-options-dot-primary-inverse clearfix">

                                            <div class="btn-group theme-search-area-options-list"
                                                 data-toggle="buttons">

                                                <label class="btn btn-primary active">

                                                    <input type="radio"
                                                           name="flight-options"
                                                           id="flight-option-1"
                                                           checked>

                                                    رفت و برگشت

                                                </label>

                                                <label class="btn btn-primary">

                                                    <input type="radio"
                                                           name="flight-options"
                                                           id="flight-option-2">

                                                    یک طرفه

                                                </label>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>
                        {{-- Banner --}}

                        <div class="row row-col-border-white" data-gutter="0">

                            <div class="col-md-3">
                                <div class="banner banner-">

                                    <img class="banner-img"
                                         src="{{ asset('assets/img/index/cto/1.jpg') }}"
                                         alt="تصویر متن جایگزین"
                                         title="عنوان تصویر">

                                    <a class="banner-link" href="#"></a>

                                </div>
                            </div>


                            <div class="col-md-3">
                                <div class="banner banner-">

                                    <img class="banner-img"
                                         src="{{ asset('assets/img/index/cto/3.jpg') }}"
                                         alt="تصویر متن جایگزین"
                                         title="عنوان تصویر">

                                    <a class="banner-link" href="#"></a>

                                </div>
                            </div>


                            <div class="col-md-3">
                                <div class="banner banner-">

                                    <img class="banner-img"
                                         src="{{ asset('assets/img/index/cto/2.jpg') }}"
                                         alt="تصویر متن جایگزین"
                                         title="عنوان تصویر">

                                    <a class="banner-link" href="#"></a>

                                </div>
                            </div>


                            <div class="col-md-3">
                                <div class="banner banner-">

                                    <img class="banner-img"
                                         src="{{ asset('assets/img/index/cto/4.jpg') }}"
                                         alt="تصویر متن جایگزین"
                                         title="عنوان تصویر">

                                    <a class="banner-link" href="#"></a>

                                </div>
                            </div>

                        </div>
                        {{-- Popular Cities --}}

                        <div class="theme-hero-area">

                            <div class="theme-hero-area-bg-wrap">

                                <div class="theme-hero-area-bg-pattern theme-hero-area-bg-pattern-ultra-light"
                                     style="background-image:url('{{ asset('assets/img/patterns/travel/2.png') }}');">
                                </div>

                                <div class="theme-hero-area-grad-mask"></div>

                                <div class="theme-hero-area-inner-shadow theme-hero-area-inner-shadow-light"></div>

                            </div>


                            <div class="theme-hero-area-body">

                                <div class="theme-page-section theme-page-section-xxl">

                                    <div class="container-fluid">

                                        <div class="theme-page-section-header theme-page-section-header-white">

                                            <h5 class="theme-page-section-title">
                                                شهرهایی برای سفر
                                            </h5>

                                            <p class="theme-page-section-subtitle">
                                                شهرهای پر جستجو در ماه مارس
                                            </p>

                                        </div>


                                        <div class="theme-inline-slider row" data-gutter="10">

                                            <div class="owl-carousel owl-carousel-nav-white"
                                                 data-items="5"
                                                 data-loop="true"
                                                 data-nav="true">


                                                {{-- Bangkok --}}

                                                <div class="theme-inline-slider-item">

                                                    <div
                                                        class="banner _h-40vh _br-3 _bsh-xs banner-animate banner-animate-mask-in banner-animate-slow">

                                                        <div class="banner-bg"
                                                             style="background-image:url('{{ asset('assets/img/ancient-architecture-asia-buddhism-460376_400x500.jpg') }}');">
                                                        </div>

                                                        <div class="banner-mask"></div>

                                                        <a class="banner-link" href="#"></a>

                                                        <div
                                                            class="banner-caption _p-20 _bg-w banner-caption-bottom banner-caption-dark">

                                                            <h5 class="banner-title _fs _fw-b">
                                                                بانکوک
                                                            </h5>

                                                            <p class="banner-subtitle _fw-n _mt-5">
                                                                شیر دروازه است
                                                            </p>

                                                        </div>

                                                    </div>

                                                </div>


                                                {{-- Isfahan --}}

                                                <div class="theme-inline-slider-item">

                                                    <div
                                                        class="banner _h-40vh _br-3 _bsh-xs banner-animate banner-animate-mask-in banner-animate-slow">

                                                        <div class="banner-bg"
                                                             style="background-image:url('{{ asset('assets/img/bridge-california-cliff-golden-gate-bridge-7653_400x500.jpg') }}');">
                                                        </div>

                                                        <div class="banner-mask"></div>

                                                        <a class="banner-link" href="#"></a>

                                                        <div
                                                            class="banner-caption _p-20 _bg-w banner-caption-bottom banner-caption-dark">

                                                            <h5 class="banner-title _fs _fw-b">
                                                                اصفهان
                                                            </h5>

                                                            <p class="banner-subtitle _fw-n _mt-5">
                                                                بازیکنان املاک و مستغلات
                                                            </p>

                                                        </div>

                                                    </div>

                                                </div>


                                                {{-- Tehran --}}

                                                <div class="theme-inline-slider-item">

                                                    <div
                                                        class="banner _h-40vh _br-3 _bsh-xs banner-animate banner-animate-mask-in banner-animate-slow">

                                                        <div class="banner-bg"
                                                             style="background-image:url('{{ asset('assets/img/nnzkznywhau_400x500.jpg') }}');">
                                                        </div>

                                                        <div class="banner-mask"></div>

                                                        <a class="banner-link" href="#"></a>

                                                        <div
                                                            class="banner-caption _p-20 _bg-w banner-caption-bottom banner-caption-dark">

                                                            <h5 class="banner-title _fs _fw-b">
                                                                تهران
                                                            </h5>

                                                            <p class="banner-subtitle _fw-n _mt-5">
                                                                برای فردا بیشتر بخوانید
                                                            </p>

                                                        </div>

                                                    </div>

                                                </div>


                                                {{-- London --}}

                                                <div class="theme-inline-slider-item">

                                                    <div
                                                        class="banner _h-40vh _br-3 _bsh-xs banner-animate banner-animate-mask-in banner-animate-slow">

                                                        <div class="banner-bg"
                                                             style="background-image:url('{{ asset('assets/img/big-ben-bridge-castle-city-460672_400x500.jpg') }}');">
                                                        </div>

                                                        <div class="banner-mask"></div>

                                                        <a class="banner-link" href="#"></a>

                                                        <div
                                                            class="banner-caption _p-20 _bg-w banner-caption-bottom banner-caption-dark">

                                                            <h5 class="banner-title _fs _fw-b">
                                                                لندن
                                                            </h5>

                                                            <p class="banner-subtitle _fw-n _mt-5">
                                                                متن ساختگی
                                                            </p>

                                                        </div>

                                                    </div>

                                                </div>


                                                {{-- New York --}}

                                                <div class="theme-inline-slider-item">

                                                    <div
                                                        class="banner _h-40vh _br-3 _bsh-xs banner-animate banner-animate-mask-in banner-animate-slow">

                                                        <div class="banner-bg"
                                                             style="background-image:url('{{ asset('assets/img/architecture-art-clouds-landmark-290386_400x500.jpg') }}');">
                                                        </div>

                                                        <div class="banner-mask"></div>

                                                        <a class="banner-link" href="#"></a>

                                                        <div
                                                            class="banner-caption _p-20 _bg-w banner-caption-bottom banner-caption-dark">

                                                            <h5 class="banner-title _fs _fw-b">
                                                                نیویورک
                                                            </h5>

                                                            <p class="banner-subtitle _fw-n _mt-5">
                                                                متن ساختگی
                                                            </p>

                                                        </div>

                                                    </div>

                                                </div>


                                                {{-- Dubai --}}

                                                <div class="theme-inline-slider-item">

                                                    <div
                                                        class="banner _h-40vh _br-3 _bsh-xs banner-animate banner-animate-mask-in banner-animate-slow">

                                                        <div class="banner-bg"
                                                             style="background-image:url('{{ asset('assets/img/scenic-view-of-city-at-sunset-316001_400x500.jpg') }}');">
                                                        </div>

                                                        <div class="banner-mask"></div>

                                                        <a class="banner-link" href="#"></a>

                                                        <div
                                                            class="banner-caption _p-20 _bg-w banner-caption-bottom banner-caption-dark">

                                                            <h5 class="banner-title _fs _fw-b">
                                                                دبی
                                                            </h5>

                                                            <p class="banner-subtitle _fw-n _mt-5">
                                                                جلوی گلو
                                                            </p>

                                                        </div>

                                                    </div>

                                                </div>


                                                {{-- Tokyo --}}

                                                <div class="theme-inline-slider-item">

                                                    <div
                                                        class="banner _h-40vh _br-3 _bsh-xs banner-animate banner-animate-mask-in banner-animate-slow">

                                                        <div class="banner-bg"
                                                             style="background-image:url('{{ asset('assets/img/asia-japan-japanese-japanese-culture-590478_400x500.jpg') }}');">
                                                        </div>

                                                        <div class="banner-mask"></div>

                                                        <a class="banner-link" href="#"></a>

                                                        <div
                                                            class="banner-caption _p-20 _bg-w banner-caption-bottom banner-caption-dark">

                                                            <h5 class="banner-title _fs _fw-b">
                                                                توکیو
                                                            </h5>

                                                            <p class="banner-subtitle _fw-n _mt-5">
                                                                نحوه مرتب سازی دوره
                                                            </p>

                                                        </div>

                                                    </div>

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>
                        {{-- Mobile App --}}

                        <div class="theme-hero-area">

                            <div class="theme-hero-area-bg-wrap">

                                <div class="theme-hero-area-bg"
                                     style="background-image:url('{{ asset('assets/img/ugx2qdjdkkw_1500x800.jpg') }}');">
                                </div>

                                <div class="theme-hero-area-inner-shadow theme-hero-area-inner-shadow-light"></div>

                            </div>


                            <div class="theme-hero-area-body">

                                <div class="container-fluid">

                                    <div class="theme-page-section _p-0">

                                        <div class="row">

                                            <div class="col-md-10 col-md-offset-1">

                                                <div class="theme-mobile-app">

                                                    <div class="row">

                                                        <div class="col-md-6">

                                                            <div class="theme-mobile-app-section">

                                                                <div class="theme-mobile-app-body">

                                                                    <div class="theme-mobile-app-header">

                                                                        <h2 class="theme-mobile-app-title">
                                                                            برنامه ما را دانلود کنید
                                                                        </h2>

                                                                        <p class="theme-mobile-app-subtitle">
                                                                            سفرهای خود را در حال حرکت رزرو و مدیریت
                                                                            کنید.
                                                                            از معاملات و پیشنهادات داغ ما مطلع شوید.
                                                                        </p>

                                                                    </div>


                                                                    <ul class="theme-mobile-app-btn-list">

                                                                        <li>

                                                                            <a class="btn btn-dark theme-mobile-app-btn"
                                                                               href="#">

                                                                                <i class="theme-mobile-app-logo">

                                                                                    <img
                                                                                        src="{{ asset('assets/img/brands/apple.png') }}"
                                                                                        alt="تصویر متن جایگزین"
                                                                                        title="عنوان تصویر">

                                                                                </i>

                                                                                <span>
                                                            در
                                                            <br>
                                                            <span>
                                                                اپ استور دانلود کنید
                                                            </span>
                                                        </span>

                                                                            </a>

                                                                        </li>


                                                                        <li>

                                                                            <a class="btn btn-dark theme-mobile-app-btn"
                                                                               href="#">

                                                                                <i class="theme-mobile-app-logo">

                                                                                    <img
                                                                                        src="{{ asset('assets/img/brands/play-market.png') }}"
                                                                                        alt="تصویر متن جایگزین"
                                                                                        title="عنوان تصویر">

                                                                                </i>

                                                                                <span>
                                                            در
                                                            <br>
                                                            <span>
                                                                گوگل پلی دانلود کنید
                                                            </span>
                                                        </span>

                                                                            </a>

                                                                        </li>

                                                                    </ul>

                                                                </div>

                                                            </div>

                                                        </div>


                                                        <div class="col-md-6">

                                                            <div class="theme-mobile-app-section"></div>

                                                        </div>

                                                    </div>

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

@endsection



{{--@extends('layouts.app')--}}

{{--@section('content')--}}
{{--    <!-- Slider (اسلایدر بنرهای تبلیغاتی تورها) -->--}}
{{--    <div class="px-3 lg:container group w-full mt-4 lg:mt-10">--}}
{{--        <div dir="rtl" class="swiper header-slider h-52 md:h-96 cursor-pointer">--}}
{{--            <div class="swiper-wrapper">--}}
{{--                @forelse($sliders as $slider)--}}
{{--                    <a href="{{ $slider->url ?: '#' }}" class="swiper-slide">--}}
{{--                        <img src="{{ asset('storage/'.$slider->image) }}" class="rounded-xl w-full h-full object-cover"--}}
{{--                             alt="{{$slider->title}}">--}}
{{--                    </a>--}}
{{--                @empty--}}
{{--                    --}}{{-- اگر اسلایدر در دیتابیس نبود، یک تصویر پیش‌فرض نمایش داده شود --}}
{{--                    <div class="swiper-slide bg-gray-200 rounded-xl h-52 md:h-96 flex items-center justify-center">--}}
{{--                        <p class="text-gray-500">به سایت آژانس ما خوش آمدید</p>--}}
{{--                    </div>--}}
{{--                @endforelse--}}
{{--            </div>--}}
{{--            <div class="swiper-pagination-wrapper">--}}
{{--                <div class="swiper-pagination"></div>--}}
{{--            </div>--}}

{{--            <!-- Swiper Navigation -->--}}
{{--            <div--}}
{{--                class="absolute z-10 bottom-5 opacity-0 invisible group-hover:opacity-100 transition-all duration-300 group-hover:visible right-6 hidden lg:flex items-center gap-x-2">--}}
{{--                <button class="button-prev">--}}
{{--                    <svg class="size-5 -rotate-90">--}}
{{--                        <use href="#chevron"/>--}}
{{--                    </svg>--}}
{{--                </button>--}}
{{--                <button class="button-next">--}}
{{--                    <svg class="size-5 rotate-90">--}}
{{--                        <use href="#chevron"/>--}}
{{--                    </svg>--}}
{{--                </button>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}

{{--    <main class="relative">--}}

{{--        <!-- CATEGORY (دسته‌بندی‌های محبوب مثل: تور داخلی، تور خارجی، پرواز داخلی و غیره) -->--}}
{{--        <section class="mx-4 lg:container mt-20">--}}
{{--            <div--}}
{{--                class="flex flex-col gap-y-4 xs:flex-row items-center justify-between w-full text-center xs:text-start">--}}
{{--                <div class="flex items-center gap-x-2 sm:gap-x-4">--}}
{{--                    <span class="size-12 hidden xs:flex rounded-lg bg-white shadow-lg dark:bg-gray-800 flex-center">--}}
{{--                        <svg class="size-7 text-gray-700 dark:text-gray-100"><use href="#squares"></use></svg>--}}
{{--                    </span>--}}
{{--                    <div class="space-y-1 md:space-y-1">--}}
{{--                        <h3 class="text-xl md:text-2xl font-MorabbaMedium text-gray-800 dark:text-gray-50">--}}
{{--                            دسته‌بندی <span class="text-blue-600 dark:text-blue-500">محبوب</span>--}}
{{--                        </h3>--}}
{{--                        <p class="text-sm text-gray-500 dark:text-gray-300">انتخاب نوع سفر خود</p>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}

{{--            <div class="flex items-center justify-evenly flex-wrap mt-12 gap-x-8">--}}
{{--                @foreach($travelTypes as $type)--}}
{{--                    <a href="{{ route('tours.index', ['travel_type' => $type->id]) }}"--}}
{{--                       class="group flex flex-col items-center">--}}
{{--                        --}}{{-- اینجا باید عکسی مرتبط با نوع سفر (مثلاً تصویر ساحل برای تور دریایی) داشته باشی --}}
{{--                        <div--}}
{{--                            class="w-[100px] h-[100px] lg:w-[120px] lg:h-[120px] rounded-full overflow-hidden bg-gray-100 mb-2">--}}
{{--                            <img src="{{ asset('assets/images/category/default-travel.png') }}"--}}
{{--                                 class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"--}}
{{--                                 alt="{{$type->name}}">--}}
{{--                        </div>--}}
{{--                        <p class="text-sm lg:text-lg font-medium text-gray-800 dark:text-gray-300">{{ $type->name }}</p>--}}
{{--                    </a>--}}
{{--                @endforeach--}}
{{--            </div>--}}
{{--        </section>--}}

{{--        <!-- LATEST TOURS (جدیدترین تورها) -->--}}
{{--        <section class="mx-4 lg:container mt-10 lg:mt-20">--}}
{{--            <div--}}
{{--                class="flex flex-col gap-y-4 xs:flex-row items-center justify-between w-full text-center xs:text-start">--}}
{{--                <div class="flex items-center gap-x-2 sm:gap-x-4">--}}
{{--                    <span class="size-12 hidden xs:flex rounded-lg bg-white shadow-lg dark:bg-gray-800 flex-center">--}}
{{--                        <svg class="size-7 text-gray-700 dark:text-gray-100"><use href="#mobile"></use></svg>--}}
{{--                    </span>--}}
{{--                    <div class="space-y-1 md:space-y-1">--}}
{{--                        <h3 class="text-xl md:text-2xl font-MorabbaMedium text-gray-800 dark:text-gray-50">جدیدترین--}}
{{--                            <span class="text-blue-600 dark:text-blue-500">تورها</span></h3>--}}
{{--                        <p class="text-sm text-gray-500 dark:text-gray-300">بهترین پیشنهادهای سفر</p>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <a href="{{ route('tours.index') }}"--}}
{{--                   class="group shadow-xl text-sm md:text-base flex gap-x-1.5 items-center px-2 h-10 md:px-3 text-white bg-blue-600 rounded-xl">--}}
{{--                    <p>مشاهده همه</p>--}}
{{--                    <span--}}
{{--                        class="w-7 h-7 rounded-full bg-blue-500 flex-center md:group-hover:-translate-x-1 transition-transform duration-300">--}}
{{--                        <svg class="size-5"><use href="#arrow"/></svg>--}}
{{--                    </span>--}}
{{--                </a>--}}
{{--            </div>--}}

{{--            <div class="swiper LatestTours mt-5 w-full">--}}
{{--                <div class="swiper-wrapper py-5">--}}
{{--                    @foreach($latestTours as $tour)--}}
{{--                        --}}{{-- توجه: باید یک کامپوننت به نام tour.blade.php در پوشه components بسازی --}}
{{--                        @include('components.tour')--}}
{{--                    @endforeach--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </section>--}}