@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">Get Started</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/ban5.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="accountAccesSec getStarted">
        <div class="container">
            <div class="row justify-content-center align-items-center">
                <div class="col-md-12">
                    <div class="whitebg">
                        <div class="row">
                            <div class="col-md-7">
                                <div class="secHeading">
                                    <h2 class="text-left">Contact</h2>
                                </div>
                                <form action="" class="formStyle form-row">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="input-group">

                                                <input type="text" class="form-control" placeholder="Enter your Email ">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="input-group">

                                                <input type="password" class="form-control" placeholder="First Name">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="input-group">

                                                <input type="password" class="form-control" placeholder="Last Name">
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="input-group">

                                                <input type="password" class="form-control" placeholder="Password">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="checkSec">
                                            <input type="checkbox" id="coding" name="interest" value="coding">
                                            <label>I have read and accept Celebrant Gallery <a href="#">Term of
                                                    Service</a></label>
                                        </div>
                                    </div>
                                    <div class="input-group  align-items-sm-center">
                                        <a class="themeBtn " href="account.php">Start Designing Now</a>
                                    </div>
                                </form>
                                <div class="icon iconSign mt-3">
                                    <p>Or Sign Up With...</p>
                                    <ul>
                                        <li><a href=""><span><img src="{{ asset('images/iconFB.png') }}" alt=""> </span> Facebook</a>
                                        </li>
                                        <li><a href=""><span><img src="{{ asset('images/iconeGoogle.png') }}" alt=""> </span>
                                                Google</a></li>
                                        <li><a href=""> <span><img src="{{ asset('images/iconApple.png') }}" alt=""></span> Apple</a>
                                        </li>

                                    </ul>
                                </div>
                            </div>
                            <div class="col-md-5 text-center">
                                <div class="credtOne">
                                    <ul class="icon-info">
                                        <li><i class="far fa-check-circle"></i>No Credit Card Required</li>
                                        <li>
                                            <i class="far fa-check-circle"></i>Try All Features
                                        </li>
                                        <li><i class="far fa-check-circle"></i>No Time Limit</li>
                                        <li class="calOne"><span><i class="fas fa-phone-alt"></i></span> 12345 67890
                                        </li>
                                        <li class="calOne"><span><i class="fas fa-envelope"></i></span>support@gmail.com
                                        </li>
                                    </ul>
                                    <ul class="socialList">
                                        <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                        <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
                                        <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                                        <li><a href="#"><i class="fab fa-youtube"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section data-scroll-section class="instaSec">
        <div class="container">
            <div class="secHeading">
                <h2>Follow Us On Instagram <a href="#"><i class="fab fa-instagram"></i></a></h2>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="swiper-container instaSlider">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <figure>
                                    <img src="{{ asset('images/insta1.png') }}" class="img-fluid" alt="img">
                                </figure>
                            </div>
                            <div class="swiper-slide">
                                <figure>
                                    <img src="{{ asset('images/insta2.png') }}" class="img-fluid" alt="img">
                                </figure>
                            </div>
                            <div class="swiper-slide">
                                <figure>
                                    <img src="{{ asset('images/insta3.png') }}" class="img-fluid" alt="img">
                                </figure>
                            </div>
                            <div class="swiper-slide">
                                <figure>
                                    <img src="{{ asset('images/insta4.png') }}" class="img-fluid" alt="img">
                                </figure>
                            </div>
                        </div>
                        <!-- <div class="swiper-pagination"></div>
                        <div class="swiper-button-next"><i class="fal fa-chevron-right"></i></div>
                        <div class="swiper-button-prev"><i class="fal fa-chevron-left"></i></div> -->
                    </div>
                </div>
            </div>
        </div>
    </section>

    <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