@extends('frontend::layouts.app')

@section('content')
<div class="hero-banner-wrap">
    <!-- <div class="container-fluid"> -->
        <div id="slider" class="inspiro-slider dots-creative" data-height="800" data-dots="false">
            <div class="slide" data-bg-image="{{ asset('assets/frontend/images/head-banner/01.jpg') }}">
                <div class="container">
                    <div class="slide-captions">
                        <h1 class="m-b-10" data-caption-animate="zoom-out">
                            บริษัท เวลเทคกรุ๊ป จำกัด
                        </h1>
                        <p>
                            ผู้จัดจำหน่ายชิ้นส่วนอิเล็กทรอนิกส์และอุปกรณ์อิเล็กทรอนิกส์ 
                            ที่เติบโตเร็วที่สุดในประเทศไทย
                        </p>
                    </div>
                </div>
            </div>
        
            <div class="slide youtube-slide">
                <div class="youtube-bg">
                    <iframe 
                        src="https://www.youtube.com/embed/PgeCknl9xdM?autoplay=1&mute=1&loop=1&playlist=PgeCknl9xdM&controls=0&modestbranding=1&showinfo=0" 
                        frameborder="0" 
                        allow="autoplay; encrypted-media" 
                        allowfullscreen>
                    </iframe>
                </div>
            </div>
        </div>
    <!-- </div> -->
</div>

<section class="p-t-40 ab-service">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-3">
                <div class="icon-box effect medium color border center">
                    <div class="icon">
                        <a href="#"><i class="fa fa-plug"></i></a>
                    </div>
                    <h3>Product Support</h3>
                    <p>Up to 3 years on-site warranty available for your peace of mind.</p>
                </div>
            </div>

            <div class="col-lg-3 col-md-3">
                <div class="icon-box effect medium color border center">
                    <div class="icon">
                        <a href="#"><i class="fa fa-desktop"></i></a>
                    </div>
                    <h3>Personal Account</h3>
                    <p>With big discounts, free delivery and a dedicated support specialist.</p>
                </div>
            </div>

            <div class="col-lg-3 col-md-3">
                <div class="icon-box effect medium color border center">
                    <div class="icon">
                        <a href="#"><i class="fa fa-cloud"></i></a>
                    </div>
                    <h3>Amazing Savings</h3>
                    <p>Up to 70% off new Products, you can be sure of the best price.</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-3">
                <div class="icon-box effect medium color border center">
                    <div class="icon">
                        <a href="#"><i class="far fa-lightbulb"></i></a>
                    </div>
                    <h3>Product Support</h3>
                    <p>Up to 3 years on-site warranty available for your peace of mind.</p>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="sect-product">
    <div class="box-area-content">
        <div class="container">
            <div class="row">
                <div class="col-md-12 headbar m-b-20 text-left">
                    <h3 class="htitle m-b-20" >Recommend Product</h3>
                    <a href="#" class="btn-right" >VIEW MORE <i class="fa fa-arrow-circle-right m-l-10"></i> </a>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="carousel" data-items="5" data-margin="20">
                            <div class="product-card">
                                <div class="product-image">
                                    <a href="{{ route('frontend.productsdetail') }}"><img src="{{ asset('assets/frontend/images/product-1.jpg') }}" alt="Product Image" /></a>
                                </div>
                                <div class="product-content">
                                    <div class="category">Category</div>
                                    <div class="title"><a href="{{ route('frontend.productsdetail') }}">Product Title Have A Long Text</a></div>
                                    <div class="price-area">
                                        <div>
                                            <div class="original-price">550 THB</div>
                                            <div class="price">532 THB</div>
                                        </div>
                                    <div class="add-button">+</div>
                                    </div>
                                </div>
                            </div>
                            <div class="product-card">
                                <div class="product-image">
                                    <a href="{{ route('frontend.productsdetail') }}"><img src="{{ asset('assets/frontend/images/product-2.jpg') }}" alt="Product Image" /></a>
                                </div>
                                <div class="product-content">
                                    <div class="category">Category</div>
                                    <div class="title"><a href="{{ route('frontend.productsdetail') }}">Product Title Have A Long Text</a></div>
                                    <div class="price-area">
                                        <div>
                                            <div class="original-price">550 THB</div>
                                            <div class="price">532 THB</div>
                                        </div>
                                    <div class="add-button">+</div>
                                    </div>
                                </div>
                            </div>
                            <div class="product-card">
                                <div class="product-image">
                                    <a href="{{ route('frontend.productsdetail') }}"><img src="{{ asset('assets/frontend/images/product-1.jpg') }}" alt="Product Image" /></a>
                                </div>
                                <div class="product-content">
                                    <div class="category">Category</div>
                                    <div class="title"><a href="{{ route('frontend.productsdetail') }}">Product Title Have A Long Text</a></div>
                                    <div class="price-area">
                                        <div>
                                            <div class="original-price">550 THB</div>
                                            <div class="price">532 THB</div>
                                        </div>
                                    <div class="add-button">+</div>
                                    </div>
                                </div>
                            </div>
                            <div class="product-card">
                                <div class="product-image">
                                    <a href="{{ route('frontend.productsdetail') }}"><img src="{{ asset('assets/frontend/images/product-2.jpg') }}" alt="Product Image" /></a>
                                </div>
                                <div class="product-content">
                                    <div class="category">Category</div>
                                    <div class="title"><a href="{{ route('frontend.productsdetail') }}">Product Title Have A Long Text</a></div>
                                    <div class="price-area">
                                        <div>
                                            <div class="original-price">550 THB</div>
                                            <div class="price">532 THB</div>
                                        </div>
                                    <div class="add-button">+</div>
                                    </div>
                                </div>
                            </div>
                            <div class="product-card">
                                <div class="product-image">
                                    <a href="{{ route('frontend.productsdetail') }}"><img src="{{ asset('assets/frontend/images/product-1.jpg') }}" alt="Product Image" /></a>
                                </div>
                                <div class="product-content">
                                    <div class="category">Category</div>
                                    <div class="title"><a href="{{ route('frontend.productsdetail') }}">Product Title Have A Long Text</a></div>
                                    <div class="price-area">
                                        <div>
                                            <div class="original-price">550 THB</div>
                                            <div class="price">532 THB</div>
                                        </div>
                                    <div class="add-button">+</div>
                                    </div>
                                </div>
                            </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="sect-products">
    <div class="container">
        <div class="row">

            <div class="col-md-12 headbar m-b-60">
                <h2 class="htitle text-bg hdecor">Product Category</h2>
            </div>

            <div class="col-md-12">
                <div class="masonry-grid">
                    <div class="masonry-item">
                        <div class="card product-card caption-inside">
                            <img src="{{ asset('assets/frontend/images/products/01.jpg') }}"class="card-img-top" alt="Inverter">
                            <div class="product-overlay">
                                <a href="#" class="btn-view">View Details</a>
                            </div>
                            <div class="card-body caption">
                                <h5 class="card-title">อินเวอร์เตอร์ (Inverter)</h5>
                            </div>
                        </div>
                    </div>
                    <div class="masonry-item">
                        <div class="card product-card caption-inside">
                            <img src="{{ asset('assets/frontend/images/products/01.jpg') }}" class="card-img-top" alt="Battery">
                            <div class="product-overlay">
                                <a href="#" class="btn-view">View Details</a>
                            </div>
                            <div class="card-body caption">
                                <h5 class="card-title">แบตเตอรี่ (Battery)</h5>
                            </div>
                        </div>
                    </div>
                    <div class="masonry-item">
                        <div class="card product-card caption-inside">
                            <img src="{{ asset('assets/frontend/images/products/01.jpg') }}" class="card-img-top" alt="Mounting">
                            <div class="product-overlay">
                                <a href="#" class="btn-view">View Details</a>
                            </div>
                            <div class="card-body caption">
                                <h5 class="card-title">เมาท์ติ้ง (Mounting)</h5>
                            </div>
                        </div>
                    </div>
                
                </div>
            </div>

        </div>
    </div>
</section>
<section class="sect-news">
    <div class="container">
        <div class="row">

            <div class="col-md-12 headbar head-decor m-b-60">
                <h2 class="htitle text-bg hdecor">News & Activity</h2>
                <a href="#" class="btn"><span>ดูเพิ่มเติม</span> <i class="icon-arrow-right"></i> </a>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-left">
                <div class="carousel news-slide" data-items="3">
                    <div class="news-card">
                        <div class="news-image">
                            <img src="{{ asset('assets/frontend/images/news/01.jpg') }}" alt="News 1">
                            <div class="news-date">
                                <span class="day">27</span>
                                <span class="month">March</span>
                            </div>
                        </div>
                        <div class="news-content">
                            <h4>ERGONOZ Training</h4>
                            <p>เป็นหนึ่งในผู้จัดจำหน่ายชิ้นส่วนอิเล็กทรอนิกส์และอุปกรณ์อิเล็กทรอนิกส์ ที่เติบโตเร็วที่สุดในประเทศไทย</p>
                            <a href="#" class="read-more">อ่านเพิ่มเติม <i class="icon-arrow-right"></i></a>
                        </div>
                    </div>
                    <div class="news-card">
                        <div class="news-image">
                            <img src="{{ asset('assets/frontend/images/news/02.jpg') }}" alt="News 1">
                            <div class="news-date">
                                <span class="day">27</span>
                                <span class="month">March</span>
                            </div>
                        </div>
                        <div class="news-content">
                            <h4>Connecting Through The Screen</h4>
                            <p>เป็นหนึ่งในผู้จัดจำหน่ายชิ้นส่วนอิเล็กทรอนิกส์และอุปกรณ์อิเล็กทรอนิกส์ ที่เติบโตเร็วที่สุดในประเทศไทย</p>
                            <a href="#" class="read-more">อ่านเพิ่มเติม <i class="icon-arrow-right"></i></a>
                        </div>
                    </div>
                    <div class="news-card">
                        <div class="news-image">
                            <img src="{{ asset('assets/frontend/images/news/03.jpg') }}" alt="News 1">
                            <div class="news-date">
                                <span class="day">27</span>
                                <span class="month">March</span>
                            </div>
                        </div>
                        <div class="news-content">
                            <h4>Dell Training</h4>
                            <p>เป็นหนึ่งในผู้จัดจำหน่ายชิ้นส่วนอิเล็กทรอนิกส์และอุปกรณ์อิเล็กทรอนิกส์ ที่เติบโตเร็วที่สุดในประเทศไทย</p>
                            <a href="#" class="read-more">อ่านเพิ่มเติม <i class="icon-arrow-right"></i></a>
                        </div>
                    </div>
                    <div class="news-card">
                        <div class="news-image">
                            <img src="{{ asset('assets/frontend/images/news/01.jpg') }}"alt="News 1">
                            <div class="news-date">
                                <span class="day">27</span>
                                <span class="month">March</span>
                            </div>
                        </div>
                        <div class="news-content">
                            <h4>ERGONOZ Training</h4>
                            <p>เป็นหนึ่งในผู้จัดจำหน่ายชิ้นส่วนอิเล็กทรอนิกส์และอุปกรณ์อิเล็กทรอนิกส์ ที่เติบโตเร็วที่สุดในประเทศไทย</p>
                            <a href="#" class="read-more">อ่านเพิ่มเติม <i class="icon-arrow-right"></i></a>
                        </div>
                    </div>
                    <div class="news-card">
                        <div class="news-image">
                            <img src="{{ asset('assets/frontend/images/news/02.jpg') }}" alt="News 1">
                            <div class="news-date">
                                <span class="day">27</span>
                                <span class="month">March</span>
                            </div>
                        </div>
                        <div class="news-content">
                            <h4>Connecting Through The Screen</h4>
                            <p>เป็นหนึ่งในผู้จัดจำหน่ายชิ้นส่วนอิเล็กทรอนิกส์และอุปกรณ์อิเล็กทรอนิกส์ ที่เติบโตเร็วที่สุดในประเทศไทย</p>
                            <a href="#" class="read-more">อ่านเพิ่มเติม <i class="icon-arrow-right"></i></a>
                        </div>
                    </div>
                    <div class="news-card">
                        <div class="news-image">
                            <img src="{{ asset('assets/frontend/images/news/03.jpg') }}" alt="News 1">
                            <div class="news-date">
                                <span class="day">27</span>
                                <span class="month">March</span>
                            </div>
                        </div>
                        <div class="news-content">
                            <h4>Dell Training</h4>
                            <p>เป็นหนึ่งในผู้จัดจำหน่ายชิ้นส่วนอิเล็กทรอนิกส์และอุปกรณ์อิเล็กทรอนิกส์ ที่เติบโตเร็วที่สุดในประเทศไทย</p>
                            <a href="#" class="read-more">อ่านเพิ่มเติม <i class="icon-arrow-right"></i></a>
                        </div>
                    </div>

                </div>

            </div>

        </div>
    </div>
</section>
<section class="sect-partners">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center m-b-40">
                <h2 class="">Our Partners</h2>
                <p class="">Building a sustainable future together with trusted partners worldwide</p>
            </div>
            <div class="col-md-12">
                <div class="carousel partner-slide" data-items="6" data-dots="false">
                    <div class="partner-logo">
                        <img src="{{ asset('assets/frontend/images/partners/01.png') }}" alt="Partner 1">
                        <img src="{{ asset('assets/frontend/images/partners/02.png') }}" alt="Partner 1">
                    </div>
                    <div class="partner-logo">
                        <img src="{{ asset('assets/frontend/images/partners/03.png') }}" alt="Partner 2">
                        <img src="{{ asset('assets/frontend/images/partners/02.png') }}" alt="Partner 2">
                    </div>
                    <div class="partner-logo">
                        <img src="{{ asset('assets/frontend/images/partners/04.png') }}" alt="Partner 3">
                        <img src="{{ asset('assets/frontend/images/partners/02.png') }}" alt="Partner 3">
                    </div>
                    <div class="partner-logo">
                        <img src="{{ asset('assets/frontend/images/partners/05.png') }}" alt="Partner 4">
                        <img src="{{ asset('assets/frontend/images/partners/03.png') }}" alt="Partner 3">
                    </div>
                    <div class="partner-logo">
                        <img src="{{ asset('assets/frontend/images/partners/06.png') }}" alt="Partner 5">
                        <img src="{{ asset('assets/frontend/images/partners/03.png') }}" alt="Partner 4">
                    </div>
                    <div class="partner-logo">
                        <img src="{{ asset('assets/frontend/images/partners/07.png') }}" alt="Partner 6">
                        <img src="{{ asset('assets/frontend/images/partners/04.png') }}" alt="Partner 5">
                    </div>
                    <div class="partner-logo">
                        <img src="{{ asset('assets/frontend/images/partners/08.png') }}" alt="Partner 7">
                        <img src="{{ asset('assets/frontend/images/partners/01.png') }}" alt="Partner 6">
                    </div>
                    <div class="partner-logo">
                        <img src="{{ asset('assets/frontend/images/partners/02.png') }}" alt="Partner 7">
                        <img src="{{ asset('assets/frontend/images/partners/01.png') }}" alt="Partner 8">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection