@extends('front.layouts.app')
@section('title','Mark Tippets')
@section('content')
    <!-- Banner -->

    <section class="banner bannerSlider">
        <div class="swiper-wrapper">

            @foreach($image_sliders as $image_slider)
                <div class="swiper-slide">
                    <div class="bannerImg" data-background="{{ $image_slider->getFirstMediaUrl('imageslider') }}">
                        <div class="container">
                            <div class="row">
                                <div class="col-lg-7">
                                    <div class="bannerImg__content">
                                        <h1 data-swiper-parallax="-200">{{ $image_slider->title ?? ' ' }}</h1>
                                        <p data-swiper-parallax="-200">
                                            {!! $image_slider->description ?? ' ' !!}
                                        </p>
                                        <div data-swiper-parallax="-200">
                                            <a href="#" class="themeBtn">Read more</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    <!-- Innovation -->
    <section class="innovation">
        <div class="container">
            <h2 class="heading">THE INNOVATION <br> IN POLITICS</h2>
            <div class="swiper innovationSlider mt-5" data-aos="fade-up">
                <div class="swiper-wrapper">
                    @foreach($politics_sliders as $politics_slider)
                    <div class="swiper-slide">
                        <a href="#" class="innovation-card card-cursor">
                            <figure class="innovation-card__img">
                                <img src="{{ $politics_slider->getFirstMediaUrl('politicssliders') }}" alt="image" class="img-fluid">
                            </figure>
                            <figure class="innovation-card__content">
                                <h3 class="title">{{ $politics_slider->title ?? ' ' }}</h3>
                                <h5 class="subTitle">{{ $politics_slider->description ?? ' ' }}</h5>
                            </figure>
                        </a>
                    </div>
                    @endforeach
                </div>
                <div class="innovationSlider-pagination swiper-pagination"></div>
            </div>
        </div>
    </section>

    <!-- Counters -->
    <section class="counters">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-4">
                    <h2 class="heading">{{$home['politit_title'] ?? ''}}</h2>
                </div>
                <div class="col-md-4">
                    <div class="counters__number" data-aos="fade-up">
                        <h4 class="number"><span>{{$home['politit_number_1'] ?? ''}}</span>+</h4>
                        <h5 class="subTitle">{{$home['politit_description_1'] ?? ''}}</h5>
                    </div>
                    <div class="counters__number" data-aos="fade-up">
                        <h4 class="number">$<span>{{$home['politit_number_3'] ?? ''}}</span>M</h4>
                        <h5 class="subTitle">{{$home['politit_description_3'] ?? ''}}</h5>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="counters__number" data-aos="fade-up">
                        <h4 class="number"><span>{{$home['politit_number_2'] ?? ''}}</span>+</h4>
                        <h5 class="subTitle">{{$home['politit_description_2'] ?? ''}}</h5>
                    </div>
                    <div class="counters__number" data-aos="fade-up">
                        <h4 class="number"><span>{{$home['politit_number_4'] ?? ''}}</span>+</h4>
                        <h5 class="subTitle">{{$home['politit_description_4'] ?? ''}}</h5>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Our Mission -->
    <section class="mission" data-aos="fade-up">

        <div class="container">
            <div class="row justify-content-end">
                <div class="col-md-6">
                    <div class="mission__content" data-aos="zoom-in">
                        <h2 class="heading">{{$home['our_mission_title'] ?? ''}}</h2>
                        <p>
                            {{$home['our_mission_description'] ?? ''}}
                        </p>
                        <a href="#" class="themeBtn">read more</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Our Team -->
    <section class="team">
        <div class="container">
            <h2 class="heading">{{$home['ambition_title'] ?? ''}}</h2>
            <div class="swiper teamSlider mt-5" data-aos="fade-up">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="#" class="team-card card-cursor">
                            <figure class="team-card__img">

                                <img src="{{ $home_encode->cmsImages('ambition_image_1') ?? '' }}"
                                     alt="ambition_image_1" class="img-fluid">
                            </figure>
                            <div class="team-card__content">
                                <h5 class="designation">Manager</h5>
                                <h3 class="title">Vivienne Parker</h3>
                            </div>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#" class="team-card card-cursor">
                            <figure class="team-card__img">
                                <img src="{{ $home_encode->cmsImages('ambition_image_2') ?? '' }}" alt="image"
                                     class="img-fluid">
                            </figure>
                            <div class="team-card__content">
                                <h5 class="designation">Democratic leader</h5>
                                <h3 class="title">Preston James</h3>
                            </div>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#" class="team-card card-cursor">
                            <figure class="team-card__img">
                                <img src="{{ $home_encode->cmsImages('ambition_image_3') ?? '' }}" alt="image"
                                     class="img-fluid">
                            </figure>
                            <div class="team-card__content">
                                <h5 class="designation">Volunteer</h5>
                                <h3 class="title">Natalie Strosin</h3>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="teamSlider-pagination swiper-pagination"></div>
            </div>
        </div>
    </section>

    <!-- Donate -->
    <section class="donate">
        <div class="container">
            <h2 class="heading text-white">{{$home['promote_title'] ?? ''}}</h2>
            <div class="row justify-content-end mt-5">
                <div class="col-md-11">
                    <figure class="donate__img" data-aos="zoom-in">
                        <img src="{{ $home_encode->cmsImages('promote_image_1') ?? '' }}" alt="image" class="img-fluid">
                    </figure>
                    <div class="row align-items-center justify-content-between mt-5" data-aos="fade-up">
                        <div class="col-md-6">
                            <h3 class="heading-sm text-white">{{$home['promote_title_1'] ?? ''}}</h3>
                        </div>
                        <div class="col-md-6 text-right">
                            <a href="#" class="themeBtn themeBtn--secondary ml-auto">donate here</a>
                        </div>
                    </div>
                    <div class="row mt-4" data-aos="fade-up">
                        <div class="col-md-6">
                            <div class="donate-card">
                                <figure class="donate-card__icon">
                                    <img src="{{ $home_encode->cmsImages('promote_icon_1') ?? '' }}" alt="image" class="img-fluid">
                                </figure>
                                <div class="donate-card__content">
                                    <h4 class="title">{{$home['promote_icon_title_1'] ?? ''}}</h4>
                                    <p>{{$home['politit_description_1'] ?? ''}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="donate-card">
                                <figure class="donate-card__icon">
                                    <img src="{{ $home_encode->cmsImages('promote_icon_2') ?? '' }}" alt="image" class="img-fluid">
                                </figure>
                                <div class="donate-card__content">
                                    <h4 class="title">{{$home['promote_icon_title_2'] ?? ''}}</h4>
                                    <p>{{$home['politit_description_2'] ?? ''}}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Blogs -->
    <section class="blogs">
        <div class="container">
            <h2 class="heading">{{$home['news_heading'] ?? ''}}</h2>
            <div class="row mt-5" data-aos="fade-up">
                <div class="col-md-4">
                    <div class="blogs-card card-cursor">
                        <figure class="blogs-card__img">
                            <img src="{{ $home_encode->cmsImages('news_image_1') ?? '' }}" alt="image" class="img-fluid">
                        </figure>
                        <div class="blogs-card__content">
                            <a href="" class="title">{{$home['news_title_1'] ?? ''}}</a>
                            <p>{{$home['news_description_1'] ?? ''}}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="blogs-card card-cursor">
                        <figure class="blogs-card__img">
                            <img src="{{ $home_encode->cmsImages('news_image_2') ?? '' }}" alt="image" class="img-fluid">
                        </figure>
                        <div class="blogs-card__content">
                            <a href="" class="title"> {{$home['news_title_2'] ?? ''}}</a>
                            <p>{{$home['news_description_2'] ?? ''}}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="blogs-card card-cursor">
                        <figure class="blogs-card__img">
                            <img src="{{ $home_encode->cmsImages('news_image_3') ?? '' }}" alt="image" class="img-fluid">
                        </figure>
                        <div class="blogs-card__content">
                            <a href="" class="title"> {{$home['news_title_3'] ?? ''}}</a>
                            <p>{{$home['news_description_3'] ?? ''}}</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Events -->
    <section class="events">
        <div class="container">
            <h2 class="heading">{{$home['eventes_heading'] ?? ''}}</h2>
        </div>
        <div class="events-bg">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-3">
                        <figure class="events-bg__img" data-aos="zoom-in">
                            <img src="{{ $home_encode->cmsImages('events_image') ?? '' }}" alt="">
                        </figure>
                    </div>
                    <div class="col-md-6">
                        <div class="events-bg__content" data-aos="fade-up">
                            <div class="events-bg__contentDate d-flex align-items-center justify-content-between">
                                <h4 class="subTitle">{{$home['eventes_title_1'] ?? ''}}</h4>
                                <h4 class="subTitle">{{$home['eventes_title_2'] ?? ''}}</h4>
                            </div>
                            <h3 class="subHeading">{{$home['eventes_title_3'] ?? ''}}</h3>
                            <p>{{$home['eventes_description'] ?? ''}}</p>
                        </div>
                    </div>
                    <div class="col-md-3" data-aos="fade-up">
                        <a href="#" class="themeBtn themeBtn--border ml-auto">read more</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection