@extends('layouts.app')
@section('content')




      <!-- Announcement Bar -->
      @livewire('announcement')
      <!-- /Announcement Bar -->
      <!-- Header -->
      @livewire('header')

      <!-- /Header -->
      <!-- Slider -->
      <section class="tf-slideshow slideshow-effect slider-effect-fade style-padding position-relative">
        <div dir="ltr" class="swiper tf-sw-effect swiper-fade swiper-initialized swiper-horizontal swiper-pointer-events swiper-watch-progress swiper-backface-hidden">
            <div class="swiper-wrapper" id="swiper-wrapper-5cb3e5d26de6d813" aria-live="polite" style="transition-duration: 0ms;">

                @foreach(range(1, 3) as $i)
                                <div class="swiper-slide height-auto" style="width: 430px; opacity: 1; transform: translate3d(-{{$i * 430}}px, 0px, 0px);" role="group" aria-label="{{ $i }} / 3">
                    <div class="slider-effect wrap-slider h-100">
                        <div class="content-left" style="background-color: {{ $bgColor }} !important;">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-6 col-12">
                                        <div class="box-content">
                                            @if ($i == 1)
                                                <h2 class="heading fade-item fade-item-1 text_white">Find Your Perfect Match</h2>
                                                <p class="desc fade-item fade-item-2 fw-5 text_white">Start your journey of togetherness with our personalized partner search</p>
                                                <div class="fade-item fade-item-3">
                                                    <a href="{{route('search.filter')}}" class="tf-btn btn-outline-light btn-xl radius-60"><span>Explore Matches</span><i class="icon icon-arrow-right"></i></a>
                                                </div>
                                            @elseif ($i == 2)
                                                <h2 class="heading fade-item fade-item-1 text_white">Start Your Search for a Life Partner</h2>
                                                <p class="desc fade-item fade-item-2 fw-5 text_white">Connect with people who share your values, interests, and future goals</p>
                                                <div class="fade-item fade-item-3">
                                                    <a href="{{route('register')}}" class="tf-btn btn-outline-light btn-xl radius-60"><span>Join Now</span><i class="icon icon-arrow-right"></i></a>
                                                </div>
                                            @else
                                                <h2 class="heading fade-item fade-item-1 text_white">Find True Compatibility</h2>
                                                <p class="desc fade-item fade-item-2 fw-5 text_white">We help you find the perfect match based on values, preferences, and personality</p>
                                                <div class="fade-item fade-item-3">
                                                    <a href="{{route('search.filter')}}" class="tf-btn btn-outline-light btn-xl radius-60"><span>Start Searching</span><i class="icon icon-arrow-right"></i></a>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="img-slider">
                            <img class=" ls-is-cached lazyloaded" data-src="{{ asset('images/0'.$i.'.png') }}" src="{{ asset('images/0'.$i.'.png') }}" alt="matrimony-slideshow">
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
        </div>
        <div class="wrap-pagination">
            <div class="container">
                <div class="sw-dots dots-fill-white large sw-pagination-slider swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal">
                    <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1"></span>
                    <span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 2" aria-current="true"></span>
                    <span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span>
                </div>
            </div>
        </div>
    </section>

      <!-- /Slider -->


      <!-- Footer -->
      @livewire('footer')
      <!-- /Footer -->


@endsection