@extends("layouts.front.main")
@section("content")
 <!-- slider start -->
 <section class="slider-area">
    <div class="slider-active">
        @foreach($sliders as $slider)


        <div class="single-slider slider-height pos-rel d-flex align-items-center"
            data-background="{{ $slider->getFirstMediaUrl('slider','mainthumb') }}">
            <div class="container">
                <div class="row">
                    <div class="col-xl-7 col-lg-8">
                        <div class="slider-content">
                            <h5 data-animation="fadeInUp" data-delay=".2s">{{ $slider->sub_title }}</h5>
                            <h1 data-animation="fadeInUp" data-delay=".4s">{{ $slider->title  }}<span>.</span></h1>
                            <p data-animation="fadeInUp" data-delay=".6s">
                                {!! $slider->description !!}</p>
                            <div class="slider-btn">
                                <a data-animation="fadeInLeft" data-delay=".6s" class="thm-btn" href="{{ $slider->button_url }}">{{ $slider->button_text }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</section>
<!-- slider end -->

<!-- about start -->
<section class="about-area pb-90">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="about-tab">
                    <div class="tab-content" id="nav-tabContent">
                        <div class="tab-pane fade show active" id="nav-03" role="tabpanel" aria-labelledby="nav-03-tab">
                            <div class="about-wrapper pt-120">
                                <div class="row">
                                    <div class="col-lg-6">
                                        @foreach($abouts as $about)


                                        <div class="about-left pos-rel">
                                            <div class="border-title-2">
                                                <h1>About</h1>
                                            </div>
                                            <div class="about-title mb-20">
                                                <h5>{{ $about->sub_title }}</h5>
                                                <h2>{{ $about->title }}<span>.</span></h2>
                                            </div>
                                            <p>{!! $about->description !!}</p>


                                            <div class="about-btn pt-20">
                                                <a href="{{ route('about') }}" class="thm-btn">Learn More</a>

                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="about-right pos-rel">

                                            <div class="about-right-thumb">
                                                <img src="{{ $about->getFirstMediaUrl('about','mainthumb') }}" alt="image_not_found">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- about end -->

<!-- services start -->
<section class="services-area gray-bg pt-120 pb-90" id="services">
    <div class="container">
        <div class="section-title text-center">
            <div class="border-title">
                <h1>Services</h1>
            </div>
            <h5>Our Services</h5>
            <h2>we are expert in</h2>
        </div>
        <div class="row">
            @foreach($services as $service)


            <div class="col-xl-4 col-lg-6 col-md-6">
                <div class="services-box text-center mb-30">
                    <div class="services-box-thumb mb-25">
                        <img src="{{ $service->getFirstMediaUrl('service','mainthumb') }}" width="40" height="40" alt="image_not_found">
                    </div>
                    <div class="services-box-text">
                        <h2>{{ $service->name }}</h2>
                        <p>{!! $service->description !!}</p>

                    </div>
                </div>
            </div>

            @endforeach
        </div>
    </div>
</section>
<!-- services end -->

<!-- project start -->
<section class="project-area pos-rel pt-120 pb-120">
    <div class="container-fluid">
        <div class="section-title text-center mb-100">
            <div class="border-title">
                <h1>Project</h1>
            </div>
            <h5>Our Project</h5>
            <h2>project that we complete<span>.</span></h2>
        </div>
        <div class="project-active owl-carousel">
            @foreach($projects as $project)


            <div class="single-project">
                <div class="project-thumb">
                    <img src="{{ $project->getFirstMediaUrl('project','mainthumb') }}" alt="image_not_found">
                </div>
                <div class="project-text">
                    <div class="project-tag">
                        <h4><a href="{{ route('probycategory',$project->category->slug) }}">{{ $project->category->name }}</a></h4>
                    </div>
                    <div class="project-text-box">
                        <h3><a href="{{ route('project',$project->slug) }}">{{ $project->name }}</a></h3>
                        <p>{!! $project->description !!}</p>
                    </div>
                </div>
            </div>
            @endforeach

        </div>
    </div>
</section>
<!-- project end -->

<!-- brand start -->
<section class="brand-area gray-bg pt-90 pb-90">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="brand-active owl-carousel">
                    @foreach ($clients as $client)


                    <div class="single-brand">
                        <a class="partner-logo" href="#">
                            <img class="before-image" src="{{ $client->getFirstMediaUrl('client','mainthumb') }}">
                            <img class="after-image" src="{{ $client->getFirstMediaUrl('client','mainthumb') }}" alt="image_not_found">
                        </a>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
<!-- brand end -->



<!-- blog start -->
<section class="blog-area gray-bg pt-120 pb-90">
    <div class="container">
        <div class="row mb-45">
            <div class="col-xl-6 col-lg-6 col-md-8">
                <div class="blog-title">
                    <div class="border-title-2">
                        <h1>News</h1>
                    </div>
                    <div class="about-title">
                        <h5>Latest News</h5>
                        <h2>Our Latest News<span>.</span></h2>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-6 col-md-4">
                <div class="blog-top-btn text-right">
                    <a href="{{ route('blog') }}" class="thm-btn black-btn">More News</a>
                </div>
            </div>
        </div>
        <div class="row">
            @foreach($posts as $post)
            <div class="col-xl-4 col-lg-6 col-md-6">


                <div class="blog-item mb-30">
                    <div class="blog-image">
                        <img src="{{ $post->getFirstMediaUrl('post','mainthumb') }}" alt="image_not_found">
                    </div>
                    <div class="blog-content">
                        <div class="blog-tag mb-125">
                            <span>{{ $post->created_at->format('Y-m-d') }}</span>
                        </div>
                        <div class="blog-text mb-65">
                            <h2><a href="{{ route('post',$post->slug) }}">{{ $post->name }}</a></h2>
                            <p>{!! $post->description !!} </p>
                        </div>

                    </div>
                </div>
            </div>
            @endforeach

        </div>
    </div>
</section>
<!-- blog end -->
</main>
<section class="gray-bg pb-30">
<div class="container">
    <div class="row mb-45">
        <div class="col-xl-6 col-lg-6 col-md-8">
            <div class="blog-title">
                <div class="border-title-2">
                    <h1>News</h1>
                </div>
                <div class="about-title">
                    <h5>Contact Us</h5>
                    <h2>Contact Us Now<span>.</span></h2>
                </div>
            </div>
        </div>
        <div class="col-xl-6 col-lg-6 col-md-4">
            <div class="blog-top-btn text-right">
                <a href="{{ route('contact') }}" class="thm-btn black-btn">Contact Us</a>
            </div>
        </div>
    </div>
</div>
</section>

    @endsection