@extends('v2.layout.apps')

@section('header')
<title>Wireless Audio - Salutica Berhad</title>
@endsection

@section('content')
<div class="text-center wire-whiteboard">
    <h5 class="h1 text-white pt-6">Wireless Audio</h5>
</div>
<div class='clearfix'></div>
<div class="container mt-6">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="text-container">
                    <h3 class='text-royal' style=' font-family: "Open Sans", sans-serif;'><strong>Intro</strong>
                        </h1>
                        <br>
                        <h5 class='sp-txt fadeIn'>Rem nisi illum qui iste sapiente a amet dolorem aut fugiat accusantium
                            sed necessitatibus dolore. Id ipsum dolor aut cupiditate dolorem ut commodi animi. Ut
                            deleniti saepe et deleniti odio cum amet placeat cum consequuntur voluptas? Eos ullam quia
                            et doloribus porro ex quia molestiae qui omnis pariatur eum maxime atque ut minus quam ea
                            porro atque</h5>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="image-container rightLeft">
                    <img class="img-fluid" src="/images/connect.jpg" alt="alternative">
                </div>
            </div>
        </div>
        <hr>
        <div class="clearfix mt-5"></div>
        <div class="row">
            <h3 class='text-royal text-center' style=' font-family: "Open Sans", sans-serif;'><strong>Market we
                    served</strong>
                <div class="clearfix mt-5"></div>
                <!--Carousel Wrapper-->
                <div id="multi-item-example" class="carousel slide carousel-multi-item" data-ride="carousel">
                    <!--Slides-->
                    <div class="carousel-inner" role="listbox">
                        @if((new \Jenssegers\Agent\Agent())->isMobile())
                        <!--First slide-->
                        <div class="carousel-item active">
                            <div class="col-md-12" style="float:left">
                                <div class="card mb-2">
                                    <div class="embed-responsive embed-responsive-16by9">
                                        <img alt="Card image cap" class="card-img-top embed-responsive-item"
                                            src="/images/Salutica-202-min.jpg" />
                                    </div>
                                    <div class="card-body">
                                        <h4 class="card-title text-royal">Electronics
                                            & Electrical</h4>
                                        <p>Some quick example text to build on the card title and make
                                            up
                                            the bulk of the
                                            card's content.</p>
                                        <a class="btn btn-primary btn-lg" href="/electronics" role="button">Read
                                            More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/.First slide-->
                        <!--Second slide-->
                        <div class="carousel-item">
                            <div class="col-md-12" style="float:left">
                                <div class="card mb-2">
                                    <div class="embed-responsive embed-responsive-16by9">
                                        <img alt="Card image cap" class="card-img-top embed-responsive-item"
                                            src="/images/BG_Design_550fafdb8b915_555d56e46837b.jpg" />
                                    </div>
                                    <div class="card-body">
                                        <h4 class="card-title text-royal">Automotive(aftermarket)</h4>
                                        <p>Some quick example text to build on the card title and make
                                            up
                                            the bulk of the
                                            card's content.</p>
                                        <a class="btn btn-primary btn-lg" href="/automotive" role="button">Read More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/.Second slide-->
                        <!--Third slide-->
                        <div class="carousel-item">
                            <div class="col-md-12" style="float:left">
                                <div class="card mb-2">
                                    <div class="embed-responsive embed-responsive-16by9">
                                        <img alt="Card image cap" class="card-img-top embed-responsive-item"
                                            src="/images/tag_image_three.jpg" />
                                    </div>
                                    <div class="card-body">
                                        <h4 class="card-title text-royal">Medical devices</h4>
                                        <p>Some quick example text to build on the card title and make
                                            up
                                            the bulk of the
                                            card's content.</p>
                                        <a class="btn btn-primary btn-lg" href="/medical" role="button">Read More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/.Third slide-->
                        <!--Forth slide-->
                        <div class="carousel-item">
                            <div class="col-md-12" style="float:left">
                                <div class="card mb-2">
                                    <div class="embed-responsive embed-responsive-16by9">
                                        <img alt="Card image cap" class="card-img-top embed-responsive-item"
                                            src="/images/Critical-Infrastructure.jpg" />
                                    </div>
                                    <div class="card-body">
                                        <h4 class="card-title text-royal">Telecommunication</h4>
                                        <p>Some quick example text to build on the card title and make
                                            up
                                            the bulk of the
                                            card's content.</p>
                                        <a class="btn btn-primary btn-lg" href="/telecommunication" role="button">Read
                                            More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/.Forth slide-->
                        @else
                        <!--First slide-->
                        <div class="carousel-item active">
                            <div class="col-md-6" style="float:left">
                                <div class="card mb-2">
                                    <div class="embed-responsive embed-responsive-16by9">
                                        <img alt="Card image cap" class="card-img-top embed-responsive-item"
                                            src="/images/Salutica-202-min.jpg" />
                                    </div>
                                    <div class="card-body">
                                        <h4 class="card-title text-royal">Electronics
                                            & Electrical</h4>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up
                                            the bulk of the
                                            card's content.</p>
                                        <a class="btn btn-primary btn-lg" href="/electronics" role="button">Read
                                            More</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6" style="float:left">
                                <div class="card mb-2">
                                    <div class="embed-responsive embed-responsive-16by9">
                                        <img alt="Card image cap" class="card-img-top embed-responsive-item"
                                            src="/images/BG_Design_550fafdb8b915_555d56e46837b.jpg" />
                                    </div>
                                    <div class="card-body">
                                        <h4 class="card-title text-royal">Automotive(aftermarket)</h4>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up
                                            the bulk of the
                                            card's content.</p>
                                        <a class="btn btn-primary btn-lg" href="/automotive" role="button">Read More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/.First slide-->
                        <!--Second slide-->
                        <div class="carousel-item">
                            <div class="col-md-6" style="float:left">
                                <div class="card mb-2">
                                    <div class="embed-responsive embed-responsive-16by9">
                                        <img alt="Card image cap" class="card-img-top embed-responsive-item"
                                            src="/images/tag_image_three.jpg" />
                                    </div>
                                    <div class="card-body">
                                        <h4 class="card-title text-royal">Medical devices</h4>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up
                                            the bulk of the
                                            card's content.</p>
                                        <a class="btn btn-primary btn-lg" href="/medical" role="button">Read More</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6" style="float:left">
                                <div class="card mb-2">
                                    <div class="embed-responsive embed-responsive-16by9">
                                        <img alt="Card image cap" class="card-img-top embed-responsive-item"
                                            src="/images/Critical-Infrastructure.jpg" />
                                    </div>
                                    <div class="card-body">
                                        <h4 class="card-title text-royal">Telecommunication</h4>
                                        <p class="card-text">Some quick example text to build on the card title and make
                                            up
                                            the bulk of the
                                            card's content.</p>
                                        <a class="btn btn-primary btn-lg" href="/telecommunication" role="button">Read
                                            More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/.Second slide-->
                        @endif
                    </div>
                    <div class="clearfix mt-5"></div>
                    <div class="controls-top">
                        <a class="btn-floating" href="#multi-item-example" data-slide="prev"><i
                                class="fas fa-chevron-left"></i></a>
                        <a class="btn-floating" href="#multi-item-example" data-slide="next"><i
                                class="fas fa-chevron-right"></i></a>
                    </div>
                    <!--/.Controls-->
                    <!--Indicators-->
                    <ol class="carousel-indicators">
                        <li data-target="#multi-item-example" data-slide-to="0" class="active"></li>
                        <li data-target="#multi-item-example" data-slide-to="1"></li>
                    </ol>
                    <!--/.Slides-->
                    <!--Controls-->
                    <!--/.Indicators-->
                </div>
                <!--/.Carousel Wrapper-->
        </div>
        <div class="clearfix mt-5"></div>
        <div class="row">
            <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XQX4FASiTlY"
                    allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>
<br>
<br>
@yield('script')
<script>
    $("#multi-item-example").slick({
        arrows: false,
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 1500,
        mobileFirst: true
    });

</script>
@endsection