{{-- resources/views/front/home.blade.php --}}
@extends('front.layouts.mainLayout')

@section('content')
    <main class="singleMedias">
        <section class="bannerMedia">
            <div class="media-banner" style="background-image: url('{{ asset('front/images/homeImages/4Artboard8.jpg') }}')">
                <h1 class="project-title">{{ $media->title }}</h1>
            </div>
            <div class="project-content">
                <div class="project-description">
                    <!--<h2 data-aos="fade-up-right" data-aos-delay="200">About the news</h2>-->
                    <div data-aos="fade-up-right" data-aos-delay="200">
                        {!! $media->description !!}
                    </div>
                </div>

                <div class="containerSlider">
                    <div class="swiper-container mySwiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="{{ asset($media->image) }}" alt="Media Image">
                            </div>
                            @foreach ($media->galleryImages as $image)
                                <div class="swiper-slide">
                                    <img src="{{ asset($image->path) }}" alt="Media Image">
                                </div>
                            @endforeach
                        </div>

                        <!-- Swiper navigation -->
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>

                        <!-- Swiper pagination -->
                        <div class="swiper-pagination"></div>
                    </div>
                </div>

            </div>
        </section>
                <section class="ourPartners"
            style="position: relative; background-image: url('{{ asset('front/images/homeImages/1Artboard3.jpg') }}'); min-height: 400px; background-size: cover; background-position: center;">

            <div class="filter" data-aos="fade-up" data-aos-delay="200"
                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4);">
    
                <h1>Welcome to Refined Living — Discover the Art of Residence.  <a href={{route('contact')}}>Contact Us NOW!</span></h1>
            </div>
        </section>
<style>
    .ourPartners div{
display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    }
    .ourPartners div h1{
        color:white;
        font-size:1.3rem;
           font-weight: 900;
    text-align: center;
    }
    .ourPartners div h1 a{
text-decoration: underline;
color:white;
    }
</style>
    </main>
@endsection