@extends('layout-common')


@section('content')
    <div id="membership">
        <div class="signUp">
            <div class="intro">
                <h1 class="pageTitle">회원가입</h1>
                <div class="max-width">
                    <div class="content">
                        <div class="signup-wrap">
                            <div class="signup-text">회원가입 후 SNS 계정 연동이 가능해요.</div>
                            <div class="signup-box">
                                <a href="{{ route("signup.form") }}?provider=email" class="btn-signup">이메일로 회원가입</a>
                            </div>
                        </div>

                        @include('layouts.footers.footer-social', ['page' => "register", 'providers' => $providers])
                    </div>
                </div>
                <div class="slideWrap">
                    <div class="pointText"><p>신규가입 웰컴 쿠폰팩!</p></div>
                    <div class="slide splide">
                        <div class="splide__track">
                            <div class="splide__list">
                                <div class="splide__slide">
                                    <em>가입만 하면 100% 제공</em>
                                    <p>무료 레벨테스트</p>
                                    <figure></figure>
                                </div>
                                <div class="splide__slide">
                                    <em>가입만 하면 100% 제공</em>
                                    <p>CDT모의고사</p>
                                    <figure></figure>
                                </div>
                                <div class="splide__slide">
                                    <em>가입만 하면 100% 제공</em>
                                    <p>무료 수강권<span>(24시간)</span></p>
                                    <figure></figure>
                                </div>
                                <div class="splide__slide">
                                    <em>가입만 하면 100% 제공</em>
                                    <p>웰컴 패키지</p>
                                    <figure></figure>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section("script")
    <script>
        $(function(){
            var point1Slide = new Splide( '.splide', {
                type   : 'slide',
                perPage : 1,
                perMove: 1,
                rewind: true,
                pauseOnHover: false,
                pauseOnFocus: false,
                padding: {left: 0, right: '25%'},
                gap: 16,
                drag: true,
                arrows: false,
                classes: {
                    pagination: 'pagination',
                    page      : 'btn',
                },
                mediaQuery: 'min',
                breakpoints: {
                    744: {
                        destroy: true,
                    },
                }
            });
            point1Slide.mount();
        });
    </script>

@endsection
@section('footer')

@endsection