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

    <!-- Begin: Main Slider -->
    <section data-scroll-section class="main-slider p-0 innerBaner" id="mainSlider">
        <div class="swiper-container homeSlider">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="slide-inner">
                        <div class="container">
                            <div class="row align-items-center justify-content-between">
                                <div class="col-lg-5">
                                    <h2 data-swiper-parallax="-200">Invitation</h2>
                                </div>
                                <div class="col-lg-6">
                                    <div class="slideIMg">
                                        <figure>
                                            <img src="{{ asset('images/ban5.png') }}" class="img-fluid" alt="">
                                        </figure>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bannerImages">
            <img src="{{ asset('images/ban1.png') }}" class="ban1" alt="">
            <img src="{{ asset('images/ban2.png') }}" class="ban2" alt="">
            <img src="{{ asset('images/ban3.png') }}" class="ban3" alt="">
            <img src="{{ asset('images/ban4.png') }}" class="ban4" alt="">
            <img src="{{ asset('images/ban6.png') }}" class="ban6" alt="">
            <img src="{{ asset('images/ban7.png') }}" class="ban7" alt="">
            <img src="{{ asset('images/ban8.png') }}" class="ban8" alt="">
            <img src="{{ asset('images/ban9.png') }}" class="ban9" alt="">
            <img src="{{ asset('images/ban10.png') }}" class="ban10" alt="" data-scroll data-scroll-speed="2" data-scroll-delay="0.1">
        </div>
    </section>
    <!-- End: Main Slider -->

    <section data-scroll-section class="emagzinePage">
        <div class="container">
            <div class="row">
                @forelse($invitation as $val)
                <div class="col-md-6">
                    <div class="blogCard">
                        <figure class="reveal">
                            <img src="{{ $val->image }}" alt="">
                        </figure>
                        <div class="blogContent">
                            <h6>{{ $val->title }}</h6>
                            <p>{!! $val->detail !!}</p>
                            <a href="{{ route('customer.register') }}" class="themeBtn">Get Started</a>
                        </div>
                    </div>
                </div>
                @empty
                    <p>Invitation not found!</p>
                @endforelse

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

    @include('front.includes.insta-post')

    <section data-scroll-section class="creditSec">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-7">
                    <div class="credtContent">
                        <h2>Start Our Trial Today. No Credit Card Required.</h2>
                        <form>
                            <input type="text" placeholder="Enter Your Email address ...">
                            <button class="themeBtn">Get Started</button>
                        </form>
                    </div>
                </div>
                <div class="col-md-5">
                    <figure>
                        <img src="{{ asset('images/todayimg.png') }}" class="img-fluid" alt="img">
                    </figure>
                </div>
            </div>
        </div>
    </section>

@endsection