@extends('users.reels.layout.layout')

@section('title', 'Reels | Home')

@section('reels-main-content')


    <section class="banner">
        <div class="container">
            <div class="row">
                <div class="col-lg-9">
                    <div class="banner-img">
                        <h6>WELCOME TO <span>BUFU</span></h6>
                        <h1>BUFU<span>REELS</span></h1>
                        <h5>CHAPTER BLACKOUT</h5>
                        <div class="button-wrapper">
                            <a href="" class="btn btn-blue">Watch on Revolution</a>
                            <a href="" class="btn btn-white">contact us</a>
                        </div>
                    </div>
                </div>

            </div>
    </section>
    <section class="popular">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="section-heading text-center">
                        <h1>Popular on <span> Reels</span></h1>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="popular-carousel owl-carousel owl-theme">
                        <div class="item">
                            <div class="popular-box">
                                <img src="{{ asset('user-assets/reels/assets') }}/img/popular-img-1.jpg" alt="">
                                <div class="popular-box-content">
                                    <h6>The Dog Trainer</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur</p>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="popular-box">
                                <img src="{{ asset('user-assets/reels/assets') }}/img/popular-img-2.jpg" alt="">
                                <div class="popular-box-content">
                                    <h6>The Magician</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur</p>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="popular-box">
                                <img src="{{ asset('user-assets/reels/assets') }}/img/popular-img-3.jpg" alt="">
                                <div class="popular-box-content">
                                    <h6>The Instrument</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur</p>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="popular-box">
                                <img src="{{ asset('user-assets/reels/assets') }}/img/popular-img-4.jpg" alt="">
                                <div class="popular-box-content">
                                    <h6>The Animation</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur</p>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="popular-box">
                                <img src="{{ asset('user-assets/reels/assets') }}/img/popular-img-5.jpg" alt="">
                                <div class="popular-box-content">
                                    <h6>The Gamer</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="col-12">
                    <div class="popular-carousel owl-carousel owl-theme">
                        <div class="item">
                            <div class="popular-box">
                                <img src="{{ asset('user-assets/reels/assets') }}/img/black-mirror.webp" alt="">
                                <div class="popular-box-content">
                                    <h6>Black Mirror</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur</p>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="popular-box">
                                <img src="{{ asset('user-assets/reels/assets') }}/img/avatar.webp" alt="">
                                <div class="popular-box-content">
                                    <h6>Avatar</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur</p>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="popular-box">
                                <img src="{{ asset('user-assets/reels/assets') }}/img/extraction.webp" alt="">
                                <div class="popular-box-content">
                                    <h6>Extraction 2</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur</p>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="popular-box">
                                <img src="{{ asset('user-assets/reels/assets') }}/img/secret.webp" alt="">
                                <div class="popular-box-content">
                                    <h6>Secret Invasion</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur</p>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="popular-box">
                                <img src="{{ asset('user-assets/reels/assets') }}/img/my.webp" alt="">
                                <div class="popular-box-content">
                                    <h6>Culpa Mía</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


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

    <section class="newsletter">
        <div class="container">
            <div class="row align-items-end">
                <div class="col-lg-5">
                    <h2>Subscribe Newsletter</h2>
                    <p>Submit your email & get our latest news monthly</p>
                </div>
                <div class="col-lg-7">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Your email address">
                        <div class="input-group-append">
                            <button class="btn btn-blue" type="button"><i class="fas fa-envelope"></i> SUBMIT
                                NEWSLETTER</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection