@component('home.layouts.component', ['title' => 'صفحه اصلی'])

    @slot('style')
    @endslot

    @slot('content')

        <header class="home-header">
            <div class="text-white">
                <div class="container h-100">
                    <div class="row align-items-center h-100">
                        <div class="col-lg-12 col-md-10 mx-auto">
                            <h2 class="text-center" style="margin-bottom: 34px;">
                                عنوان تستی
                            </h2>
                            <p class="text-justify mx-md-5 px-md-5" style="font-size: 1.1rem;line-height: 2rem;">
                                لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        {{--  چکار می‌کنیم؟--}}
        <section style="background-color: #f1f2f3">
            <div class="container">
                <div class="row py-5">
                    <div class="col-lg-3 col-md-4 mb-2 px-lg-4 text-center">
                        <img style="width: 100%;" src="../../images/home/14.png">
                    </div>
                    <div class="col-lg-9 col-md-8 mb-2">
                        <h3>
                            چکار می‌کنیم؟
                        </h3>
                        <p class="text-justify">
                            لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحه‌آرایی، نخست از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند تا صرفا به مشتری یا صاحب کار خود نشان دهند که صفحه طراحی یا صفحه بندی شده بعد از اینکه متن در آن قرار گیرد چگونه به نظر می‌رسد و قلم‌ها و اندازه‌بندی‌ها چگونه در نظر گرفته شده‌است. از آنجایی که طراحان عموما نویسنده متن نیستند و وظیفه رعایت حق تکثیر متون را ندارند و در همان حال کار آنها به نوعی وابسته به متن می‌باشد آنها با استفاده از محتویات ساختگی، صفحه گرافیکی خود را صفحه‌آرایی می‌کنند تا مرحله طراحی و صفحه‌بندی را به پایان برند.
                        </p>
                    </div>
                </div>
            </div>
        </section>

        {{--    مزایا--}}
        <section>
            <div class="container py-5">
                <h3 class="mb-3">مزایا</h3>
                <div class="row">
                    <div class="col-lg-3 col-md-6 mb-2">
                        <div class="card card-hover-home text-center" id="btn1">
                            <span class="text-center mt-3">
                                <i class="fa fa-rocket style-icon"></i>
                            </span>
                            <div class="card-body">
                                <h5 class="card-title">
                                    سرعت بالا
                                </h5>
                                <p class="card-text text-justify">
                                    لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
                                </p>
                                <a href="#" class="btn btn-primary">ادامه ...</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 mb-2">
                        <div class="card card-hover-home text-center">
                            <span class="text-center mt-3">
                                <i class="fa fa-comment style-icon"></i>
                            </span>
                            <div class="card-body">
                                <h5 class="card-title">
                                    پشتیبانی سریع
                                </h5>
                                <p class="card-text text-justify">
                                    لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
                                </p>
                                <a href="#" class="btn btn-primary">ادامه ...</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 mb-2">
                        <div class="card card-hover-home text-center">
                            <span class="text-center mt-3">
                                <i class="fa fa-bar-chart style-icon"></i>
                            </span>
                            <div class="card-body">
                                <h5 class="card-title">
                                    ارایه انواع گزارش
                                </h5>
                                <p class="card-text text-justify">
                                    لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
                                </p>
                                <a href="#" class="btn btn-primary">ادامه ...</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 mb-2">
                        <div class="card card-hover-home text-center">
                            <span class="text-center mt-3">
                                <i class="fa fa-search style-icon"></i>
                            </span>
                            <div class="card-body">
                                <h5 class="card-title">
                                    دقت در جستجو
                                </h5>
                                <p class="card-text text-justify">
                                    لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
                                </p>
                                <a href="#" class="btn btn-primary">ادامه ...</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {{--    تخفیف--}}
        <section style="background-image: url('../../images/home/t4.png');width: 100%;height: 14vh; background-size: cover;position: relative;">
            <div class="container">
                <p class="mb-0 text-center" style="font-size: 1.8rem;line-height: 85px;">
                <span>
                    <span>
                        <strong class="text-warning"> ۳۰٪ تخفیف </strong>
                    </span>
                    <span class="text-white ml-3">کسب و کار خود را با ما ارتقا دهید.</span>
                    <span>
                        <button class="btn btn-warning btn-lg">خرید</button>
                    </span>
                </span>
                </p>
            </div>
        </section>

        {{--    لیست قیمت ها--}}
        <section class="py-4" style="background-color: #f1f2f3;">
            <div class="container">
                <h3 class="mb-3">
                    جدول قیمت‌ها
                </h3>
                <p>
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون
                </p>
                <div class="row py-3 mx-lg-5 px-lg-2">
                    <div class="col-md-4 mb-3">
                        <div class="card card-hover-home">
                            <div class="card-body">
                                <div class="card-title">
                                    <p style="font-size: 1.5rem" class="text-center mb-0">
                                    <span>
                                        پایه
                                    </span>
                                    </p>
                                    <p class="text-center mb-1" style="font-size: 2rem;font-weight: 500;">
                                   <span>
                                        ۱۰,۰۰۰
                                   </span>
                                    </p>
                                    <p class="text-center mb-5">
                                        <span style="font-size: 0.8rem">تومان/ماهانه</span>
                                    </p>
                                    <p class="text-center mb-4">
                                        <button class="btn btn-primary">
                                            اکنون بخرید
                                        </button>
                                    </p>
                                </div>
                                <hr>
                                <div class="card-body text-center">
                                    <p> عنوان اول</p>
                                    <p> عنوان دوم</p>
                                    <p> عنوان سوم</p>
                                    <p> عنوان چهارم</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <div class="card card-hover-home">
                            <div class="card-body">
                                <div class="card-title">
                                    <p style="font-size: 1.5rem" class="text-center mb-0">
                                    <span>
                                        پایه
                                    </span>
                                    </p>
                                    <p class="text-center mb-1" style="font-size: 2rem;font-weight: 500;">
                                   <span>
                                        ۱۰,۰۰۰
                                   </span>
                                    </p>
                                    <p class="text-center mb-5">
                                        <span style="font-size: 0.8rem">تومان/ماهانه</span>
                                    </p>
                                    <p class="text-center mb-4">
                                        <button class="btn btn-primary">
                                            اکنون بخرید
                                        </button>
                                    </p>
                                </div>
                                <hr>
                                <div class="card-body text-center">
                                    <p> عنوان اول</p>
                                    <p> عنوان دوم</p>
                                    <p> عنوان سوم</p>
                                    <p> عنوان چهارم</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <div class="card card-hover-home">
                            <div class="card-body">
                                <div class="card-title">
                                    <p style="font-size: 1.5rem" class="text-center mb-0">
                                    <span>
                                        پایه
                                    </span>
                                    </p>
                                    <p class="text-center mb-1" style="font-size: 2rem;font-weight: 500;">
                                   <span>
                                        ۱۰,۰۰۰
                                   </span>
                                    </p>
                                    <p class="text-center mb-5">
                                        <span style="font-size: 0.8rem">تومان/ماهانه</span>
                                    </p>
                                    <p class="text-center mb-4">
                                        <button class="btn btn-primary">
                                            اکنون بخرید
                                        </button>
                                    </p>
                                </div>
                                <hr>
                                <div class="card-body text-center">
                                    <p> عنوان اول</p>
                                    <p> عنوان دوم</p>
                                    <p> عنوان سوم</p>
                                    <p> عنوان چهارم</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {{--    نظریات مشتریان--}}
        <section class="py-4">
            <div class="container">
                <h3 class="mb-3">
                    مشتریان ما چه می‌گویند؟
                </h3>
                <p>
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون
                </p>
                <div class="comments owl-carousel owl-theme">
                    <div class="card bg-white item my-4" style="background: url('../../images/home/q.png') no-repeat; background-size: 24% 50%;background-position: center;">
                        <div class="card-body">
                            <div class="mb-3">
                                <div class="author-img mr-2" style="width: 40px;height: 40px;border-radius: 50%; float: right;overflow: hidden; ">
                                    <img style="display: block;width: 100%;" src="../../images/home/img_avatar.png" alt="">
                                </div>
                                <div class="content">
                                    <h6 class="mb-0">جان اسنو</h6>
                                    <span>مدیر مسئول دیوار بزرگ</span>
                                </div>
                            </div>
                            <p class="mb-3">
                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
                            </p>
                        </div>
                    </div>
                    <div class="card bg-white item my-4" style="background: url('../../images/home/q.png') no-repeat; background-size: 24% 50%;background-position: center;">
                        <div class="card-body">
                            <div class="mb-3">
                                <div class="author-img mr-2" style="width: 40px;height: 40px;border-radius: 50%; float: right;overflow: hidden; ">
                                    <img style="display: block;width: 100%;" src="../../images/home/img_avatar.png" alt="">
                                </div>
                                <div class="content">
                                    <h6 class="mb-0">جان اسنو ۱</h6>
                                    <span>مدیر مسئول دیوار بزرگ</span>
                                </div>
                            </div>
                            <p class="mb-3">
                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
                            </p>
                        </div>
                    </div>
                    <div class="card bg-white item my-4" style="background: url('../../images/home/q.png') no-repeat; background-size: 24% 50%;background-position: center;">
                        <div class="card-body">
                            <div class="mb-3">
                                <div class="author-img mr-2" style="width: 40px;height: 40px;border-radius: 50%; float: right;overflow: hidden; ">
                                    <img style="display: block;width: 100%;" src="../../images/home/img_avatar.png" alt="">
                                </div>
                                <div class="content">
                                    <h6 class="mb-0">جان اسنو ۲</h6>
                                    <span>مدیر مسئول دیوار بزرگ</span>
                                </div>
                            </div>
                            <p class="mb-3">
                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
                            </p>
                        </div>
                    </div>
                    <div class="card bg-white item my-4" style="background: url('../../images/home/q.png') no-repeat; background-size: 24% 50%;background-position: center;">
                        <div class="card-body">
                            <div class="mb-3">
                                <div class="author-img mr-2" style="width: 40px;height: 40px;border-radius: 50%; float: right;overflow: hidden; ">
                                    <img style="display: block;width: 100%;" src="../../images/home/img_avatar.png" alt="">
                                </div>
                                <div class="content">
                                    <h6 class="mb-0">جان اسنو ۳</h6>
                                    <span>مدیر مسئول دیوار بزرگ</span>
                                </div>
                            </div>
                            <p class="mb-3">
                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
                            </p>
                        </div>
                    </div>

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

        {{--    مشتریان ما--}}
        <section class="pt-5 pb-3" style="background-color: #f1f2f3;">
            <div class="container">
                <h3 class="mb-3">
                    برخی مشتریان
                </h3>
                <div class="customers owl-carousel owl-theme">
                    <div class="item">
                        <img class="" height="80" src="../../images/home/mahamax_logo.png" alt="">
                    </div>
                    <div class="item">
                        <img class="" height="80" src="../../images/home/cropped-logo_main_enfa.png" alt="">
                    </div>
                    <div class="item">
                        <img class="" height="80" src="../../images/home/3.jpg" alt="">
                    </div>
                    <div class="item">
                        <img class="" height="80" src="../../images/home/4.jpg" alt="">
                    </div>
                    <div class="item">
                        <img class="" height="80" src="../../images/home/5.jpg" alt="">
                    </div>
                    <div class="item">
                        <img class="" height="80" src="../../images/home/1.jpg" alt="">
                    </div>
                    <div class="item">
                        <img class="" height="80" src="../../images/home/4.jpg" alt="">
                    </div>
                    <div class="item">
                        <img class="" height="80" src="../../images/home/3.jpg" alt="">
                    </div>
                    <div class="item">
                        <img class="" height="80" src="../../images/home/4.jpg" alt="">
                    </div>
                </div>
            </div>
        </section>

        {{--    تماس با ما--}}
        <section class="py-5">
            <div class="container">
                <h3>
                    تماس با ما
                </h3>
                <p>
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون
                </p>
                <div class="row pt-3">
                    <div class="col-lg-4 col-md-6">
                        <div class="form-group">
                            <input class="form-control" id="form_name" type="text" name="name" placeholder="نام">
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="form-group">
                            <input class="form-control" id="form_email" type="email" name="email" placeholder="ایمیل">
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-12">
                        <div class="form-group">
                            <input class="form-control" id="form_subject" type="text" name="subject" placeholder="موضوع">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <textarea class="form-control" id="form_message" name="message" placeholder="پیام" rows="4"></textarea>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <button type="submit" class="btn btn-primary"><span>ارسال پیام</span></button>
                    </div>
                </div>
            </div>
        </section>
    @endslot

    @slot('script')
        <script>
            $('.comments.owl-carousel').owlCarousel({
                // items: 2,
                rtl: true,
                loop: true,
                margin: 10,
                autoplay: true,
                autoplayTimeout: 10000,
                autoHeight: true,
                autoplayHoverPause: true,
                nav: false,
                dots: true,
                // navSpeed:90000000,
                smartSpeed: 700,
                responsiveClass:true,
                responsive:{
                    0:{
                        items:1,
                    },
                    600:{
                        items:1,
                    },
                    1000:{
                        items:2
                    }
                }
            });
            $('.customers.owl-carousel').owlCarousel({
                // items: 7,
                rtl: true,
                loop: true,
                margin: 15,
                autoplay: true,
                autoplayTimeout: 3000,
                autoHeight: true,
                autoplayHoverPause: true,
                nav: false,
                dots: true,
                // navSpeed:90000000,
                smartSpeed: 700,
                responsiveClass:true,
                responsive:{
                    0:{
                        items:2,
                    },
                    500:{
                        items:3,
                    },
                    800:{
                        items:4
                    },
                    1000:{
                        items:7,
                    }
                }
            });

        </script>
    @endslot

@endcomponent