@extends('frontEnd.layout')

@section('content')

{{--    <section class="main-banner overlay">--}}
    <section class="main-banner">
            <div class="container">
                <div class="main-banner-content">
                    <div class="social-links">
                        <ul>
                            <li><a href="https://www.facebook.com/theblackstoryproject" title=""><i class="fab fa-facebook-f"></i></a></li>
                            <li><a href="https://www.instagram.com/theblackstoryproject/" title=""><i class="fab fa-instagram"></i></a></li>
                        </ul>
                    </div>

                </div>

                <div class="main-link">
                   <a href="{{ url('virtual-exhibition') }}" class="link-main" target="_blank">
                       <h1 class="link-main-h1">Enter Link</h1>
                   </a>
                </div>
                <!--main-banner-content end-->
            </div>

    </section><!--main-banner end-->

<section class="block overlay">
    <div class="fixed-bg bg1"></div>
    <div class="container">
        <div class="services">
            <div class="row">


{{--                <div class="col-lg-6 col-md-6 col-sm-6">--}}
{{--                    <div class="banner-img wow fadeInUp" data-wow-duration="1000ms">--}}
{{--                        <img src="{{ URL::to('/frontEnd/img/slides/tbs-618x500.jpg')}}" alt="" class="w-100">--}}
{{--                    </div>--}}
{{--                </div>--}}
                <div class="col-lg-2 col-md-2 col-sm-12">
                </div>
                <div class="col-lg-8 col-md-8 col-sm-12 main-banner-text">
                    <div class="banner-text">
                        <div class="text-details">
                            <p>A slogan to protest systemic injustice against the Black community, “Black Lives Matter” was chanted in solidarity by people of all colours, across continents. The movement inspired us to imagine a world without prejudice where the global BLM movement has offered all of us an opportunity to examine how our own societies have institutionalized racism and anti-black sentiments. ‘The Black Story’ exhibition organized by Gallery Cosmos aims to engage both Bangladeshi and global audiences in artistic and intellectual interventions that aim to illuminate the past, examine the present, and imagine the future.</p>
                            <p>In the context of systemic racism and in part perpetuated through inter-minority racism, Cosmos aims to deconstruct the evolution of ties between Black-South Asian communities, to illuminate the empowering potential of their shared destinies.</p>
                        </div>

                    </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-12">
                </div>

            </div>
        </div><!--services end-->
    </div>
</section>

<section class="block trailer">
    <div class="container">
        <div class="about-text wow fadeInUp" data-wow-duration="1000ms" style="visibility: visible; animation-duration: 1000ms; animation-name: fadeInUp;">
            <h2 class="ins">The Black Story Trailer</h2>
        </div><!--about-text end-->
        <div class="about-section">

            <div class="row align-items-center">
                <div class="col-lg-2">

                </div>
                <div class="col-lg-8">
                    <div class="abt-img insevent">
                        {{--                            <img src="http://demo.theblackstory.com/public/frontEnd/img/slides/popup.jpg" alt="" class="w-100">--}}
                        <img src="{{ URL::to('/frontEnd/img/slides/trailer.jpg')}}" alt="" class="w-100">
                        {{--                            <h2>The Black Story</h2>--}}
                           <a href="https://youtu.be/mMc6frEw8r0" title="" class="play-btn html5lightbox"><i class="fa fa-play"></i></a>
                    </div><!--abt-img end-->


                </div>
                <div class="col-lg-2">

                </div>
            </div>
        </div><!--about-section end-->
    </div>
</section>


    <section class="block ill">
        <div class="container">
            <div class="about-text wow fadeInUp" data-wow-duration="1000ms" style="visibility: visible; animation-duration: 1000ms; animation-name: fadeInUp;">
                <h2 class="ins">Live Inaugural Event</h2>
            </div><!--about-text end-->
            <div class="about-section">

                <div class="row align-items-center">
                    <div class="col-lg-2">

                    </div>
                    <div class="col-lg-8">
                        <div class="abt-img insevent">
{{--                            <img src="http://demo.theblackstory.com/public/frontEnd/img/slides/popup.jpg" alt="" class="w-100">--}}
{{--                            <img src="{{ URL::to('/frontEnd/img/slides/tbs-live-in.jpg')}}" alt="" class="w-100">--}}
{{--                            <h2>The Black Story</h2>--}}
{{--                            <a href="https://www.youtube.com/watch?v=F7vNdEqwrho" title="" class="play-btn html5lightbox"><i class="fa fa-play"></i></a>--}}

                            <!--<iframe class="iframe-inno-link" src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Funbnewsroom%2Fvideos%2F1098472057336327%2F&show_text=false&width=560" width="900" height="506" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe>-->
                            
                              <iframe class="iframe-inno-link" width="900" height="506" src="https://www.youtube.com/embed/qTubxc5bOqE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        </div><!--abt-img end-->


                    </div>
                    <div class="col-lg-2">

                    </div>
                </div>
            </div><!--about-section end-->
        </div>
    </section>


    <section class="block participants">
        <div class="container">
            <div class="about-text wow fadeInUp" data-wow-duration="1000ms" style="visibility: visible; animation-duration: 1000ms; animation-name: fadeInUp;">
                <h2 class="pal">Participating Artists</h2>
                {{--                    <a href="about.html" title="" class="btn-default">www.facebook.com/GalleryCosmos</a>--}}
            </div><!--about-text end-->
{{--            <div class="section-title d-flex flex-wrap align-items-end">--}}
{{--                <h2 class="h-title dark-clr mw-40">PARTICIPANT ARTISTS LIST</h2>--}}

{{--            </div><!--section-title end-->--}}
            <div class="team-section">
                <div class="row">
                    @foreach($HomeArtists->slice(0,3) as $artist)

                    <div class="col-lg-4 col-md-6 col-sm-6">
                        <div class="team">
                            <div class="team-thmb">
                                <img src="@if($artist->photo_file){{asset('uploads/topics/').'/'.$artist->photo_file}}@else{{'https://via.placeholder.com/2500x1669'}} @endif" alt="" class="w-100 part">
                            </div>
                            <div class="team-info">
{{--                                <h3><a href="{{url($artist->webmasterSection->name.'/'.$artist->id)}}" title="" class="participant">{{$artist->title_en}} </a></h3>--}}
                                <h3><a href="{{url('artist')}}" title="" class="participant">{{$artist->title_en}} </a></h3>
                            </div>
                        </div><!--team end-->
                    </div>
                    @endforeach


                    <div class="col-lg-2 col-md-6 col-sm-6">

                    </div>
                        @foreach($HomeArtists->slice(3,2) as $artist)

                            <div class="col-lg-4 col-md-6 col-sm-6">
                                <div class="team">
                                    <div class="team-thmb">
                                        <img src="@if($artist->photo_file){{asset('uploads/topics/').'/'.$artist->photo_file}}@else{{'https://via.placeholder.com/2500x1669'}} @endif" alt="" class="w-100 part">
                                    </div>
                                    <div class="team-info">
{{--                                        <h3><a href="{{url($artist->webmasterSection->name.'/'.$artist->id)}}" title="" class="participant">{{$artist->title_en}} </a></h3>--}}
                                        <h3><a href="{{url('artist')}}" title="" class="participant">{{$artist->title_en}} </a></h3>
                                    </div>
                                </div><!--team end-->
                            </div>
                        @endforeach
                    <div class="col-lg-2 col-md-6 col-sm-6">

                    </div>

                </div>
            </div><!--team-section end-->
        </div>
    </section>



    <section class="block2">
{{--        <div class="fixed-bg bg3"></div>--}}

        <div class="container">
            <div class="contact_section">
                <div class="row align-items-center">
{{--                    <div class="col-lg-2">--}}
{{--                    </div>--}}
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="cnst-form">
                            <div class="section-title newsletter">
                                <h2 class="h-title dark-clr mw-100">Signup for E-Newsletter</h2>
{{--                                <span>We will call you back within 15 minutes</span>--}}
                            </div>
                            <div class="consulation-form">
                                <form id="newsletter-form" method="post" action="#">
                                    <div class="response"></div>
                                    <div class="row">
                                        <div class="col-lg-5">
                                            <div class="form-group">
                                                <input type="text" name="name" class="form-control name" placeholder="Name">
                                            </div><!--form-group end-->
                                        </div>
                                        <div class="col-lg-5">
                                            <div class="form-group">
                                                <input type="email" name="email" class="form-control email" placeholder="Email*">
                                            </div><!--form-group end-->
                                        </div>

                                        <div class="col-lg-2">
                                            <button type="button" class="submit" id="en-submit">Submit</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div><!--cnst-form end-->
                    </div>
{{--                    <div class="col-lg-2">--}}
{{--                    </div>--}}
                </div>
            </div><!--contact_section end-->
        </div>
    </section>


@endsection