@extends('frontend.layouts.app')
@section('home','nav-link')
@section('content')
                        
            <div id="carouselExampleIndicators" class="carousel  slide" data-bs-ride="true">
                            <div class="carousel-indicators">
                                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
                            </div>
                            <div class="carousel-inner ">
                                <div class="carousel-item active">
                                    <img  src="{{ asset('frontend/assets/images/slider/s1.jpg') }}" class="d-block " style="width:100% !important;height:400px" alt="...">
                                    <div class="carousel-caption  d-md-block">
                                        <div class="row">
                                            <div class="col-lg-6 align-self-center  animate__animated animate__backInUp">
                                                <h1 class="fs-12 fw-bolder text-start ">For All Your <br><span class="text-primary">Digital Needs</span> </h1>
                                            </div>
                                            <div class="col-lg-6 animate__animated animate__backInDown align-self-center  d-lg-block">
                                            <p class="text-dark  d-md-block text-start">To be one of the top solution provider in Construction , Infrastructure , production , servicing of electricity, products and machinery. </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="carousel-item">
                                    <img src="{{ asset('frontend/assets/images/slider/s2.png') }}" class="d-block" style="width:100% !important;height:400px" alt="...">
                                    <div class="carousel-caption  d-md-block">
                                        <div class="row">
                                            <div class="col-lg-6 align-self-center animate__animated animate__backInLeft">
                                                <h1 class="fs-12 fw-bolder text-start text-light">For All Your <br><span class="text-dark">Digital Needs</span> </h1>
                                            </div>
                                            <div class="col-lg-6 animate__animated animate__backInRight align-self-center  d-lg-block">
                                            <p class=" d-md-block text-shite text-start">To be one of the top solution provider in Construction , Infrastructure , production , servicing of electricity, products and machinery.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="carousel-item">
                                    <img src="{{ asset('frontend/assets/images/slider/s3.png') }}" class="d-block " style="width:100% !important;height:400px" alt="...">
                                    <div class="carousel-caption  d-md-block">
                                        <div class="row">
                                            <div class="col-lg-6 align-self-center animate__animated animate__backInDown">
                                                <h1 class="fs-12 fw-bolder text-start">For All Your <br><span class="text-white">Digital Needs</span> </h1> 
                                            </div>
                                            <div class="col-lg-6 align-self-center  d-lg-block animate__animated animate__backInUp">
                                                <p class=" d-md-block text-dark text-start">To be one of the top solution provider in Construction , Infrastructure , production , servicing of electricity, products and machinery.</p>
                                            </div> 
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"><i class="bi fs-4 text-dark bi-chevron-left"></i></span>
                                <span class="visually-hidden">Previous</span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"><i class="bi fs-4 text-dark bi-chevron-right"></i></span>
                                <span class="visually-hidden">Next</span>
                            </button>
            </div>
         <!--  ************************* Our Services Start Here ************************** -->
            <div class="container-fluid products big-padding pt-3">
                        <div class="container-xl">
                            <div class="section-title row">
                                <h2 class="fs-1 fw-bold">Our Services</h2>
                                <p style="color:#EEB024;">M & E Services</p>
                            </div>
                            <div class="row mt-5">
                                <div class="col-lg-3 mb-4 col-md-6">
                                    <div class="cover text-center shadow-md p-5 bg-white">
                                        <a href="{{ route('services') }}">
                                            <img class="w-125" src="{{ asset('frontend/assets/images/services/elec.svg') }}"  alt="">
                                            <h2 class="fs-5 fw-bolder mt-4 mb-3">Electrical Services</h2> 
                                        </a>
                                    </div>
                                </div>
                                <div class="col-lg-3 mb-4 col-md-6">
                                    <div class="cover text-center shadow-md p-5 bg-white">
                                        <a href="{{ route('services') }}">
                                            <img class="w-125" src="{{ asset('frontend/assets/images/services/elv.png') }}" style="height:86px;" alt="">
                                            <h2 class="fs-5 fw-bolder mt-4 mb-3">ELV Services</h2>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-lg-3 mb-4 col-md-6">
                                    <div class="cover text-center shadow-md p-5 bg-white">
                                        <a href="{{ route('services') }}">
                                            <img class="w-125" src="{{ asset('frontend/assets/images/services/plu.svg') }}" style="height:86px;" alt="">
                                            <h2 class="fs-5 fw-bolder mt-4 mb-3">Plumbing&Sanitary Services</h2>
                                        </a>
                                    </div>
                                </div>
                                <div class="col-lg-3 mb-4 col-md-6">
                                    <div class="cover text-center shadow-md p-5 bg-white">
                                        <a href="{{ route('services') }}">
                                            <img class="w-125" src="{{ asset('frontend/assets/images/services/fire.svg') }}" style="height:86px;" alt="">
                                            <h2 class="fs-5 fw-bolder mt-4 mb-3">Fire Protection Services</h2>
                                        </a>
                                    </div>
                                </div>                          
                            </div>
                        </div>
            </div> 
        <!--  ************************* Testimonial Start Here ************************** --> 

        <div id="testimonial" class="service bg-gray container-fluid px-4 py-5">
            <div class="container">
                <div class="section-title row mb-3">
                    <h2 class="fw-bolder">Our Production</h2>
                </div>
                <div class="row mt-2">
                    <div class="col-lg-4 col-md-6 mb-4">
                        <div class="serv-cove shadow-md rounded bg-white p-3">
                                <div class="prf row my-2">
                                    <div class="col-12 align-self-center">
                                        <h6 class="mb-0 fw-bolder text-center" style="color:#EBB124;">Electrical Cabinets/Panels</h6>
                                    </div>
                                </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 mb-4">
                        <div class="serv-cove shadow-md rounded bg-white p-3">
                                <div class="prf row my-2">
                                    <div class="col-12 align-self-center">
                                        <h6 class="mb-0 fw-bolder text-center" style="color:#EBB124;">Metal Cabinet,Rucks,Furniture</h6>
                                    </div>
                                </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 mb-4">
                        <div class="serv-cove shadow-md rounded bg-white p-3">
                                <div class="prf row my-2">
                                    <div class="col-12 align-self-center">
                                        <h6 class="mb-0 fw-bolder text-center" style="color:#EBB124;">Stainless Steel Decoration Panels</h6>
                                    </div>
                                </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 mb-4">
                        <div class="serv-cove shadow-md rounded bg-white p-3">
                                <div class="prf row my-2">
                                    <div class="col-12 align-self-center">
                                        <h6 class="mb-0 fw-bolder text-center" style="color:#EBB124;">Stainless Steel Production</h6>
                                    </div>
                                </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 mb-4">
                        <div class="serv-cove shadow-md rounded bg-white p-3">
                                <div class="prf row my-2">
                                    <div class="col-12 align-self-center">
                                        <h6 class="mb-0 fw-bolder text-center" style="color:#EBB124;">Stainless Steel,Aluminium,Glass Decoration</h6>
                                    </div>
                                </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 mb-4">
                        <div class="serv-cove shadow-md rounded bg-white p-3">
                                <div class="prf row my-2">
                                    <div class="col-12 align-self-center">
                                        <h6 class="mb-0 fw-bolder text-center" style="color:#EBB124;">Powder Painting Work for Metal Products</h6>
                                    </div>
                                </div>
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-6 mb-4">
                        <div class="serv-cove shadow-md rounded bg-white p-3">
                                <div class="prf row my-2">
                                    <div class="col-12 align-self-center">
                                        <h6 class="mb-0 fw-bolder text-center" style="color:#EBB124;">Metal Cable Trays,Cable Trunks,Cable Ladder and other related Accessories</h6>
                                    </div>
                                </div>
                        </div>
                    </div>   
                </div>  
             </div>
        </div>

        <div class="container-fluid products big-padding pt-3">
                    <div class="container-xl">
                        <div class="section-title row">
                            <h2 class="fs-1 fw-bold">Products</h2>
                            <p style="color:#EEB024;">International Brands that we carry</p>
                        </div>
                        <div class="row mb-3">
                            <div class="col-lg-2 mb-2 col-md-6">
                                <div class="cover text-center  p-2 ">
                                    <h2 class="fs-5 fw-bolder " style="color:#FF9843;">Legrand</h2>  
                                </div>
                            </div>
                            <div class="col-lg-2 mb-2 col-md-6">
                                <div class="cover text-center p-2  bg-white">
                                    <h2 class="fs-5 fw-bolder " style="color:#FF9843;">Fuji Electric</h2>
                                </div>
                            </div>
                            <div class="col-lg-2 mb-2 col-md-6">
                                <div class="cover text-center p-2  bg-white">
                                    <h2 class="fs-5 fw-bolder " style="color:#FF9843;">Siemens</h2>
                                </div>
                            </div>
                            <div class="col-lg-2 mb-2 col-md-6">
                                <div class="cover text-center p-2  bg-white">
                                    <h2 class="fs-5 fw-bolder  " style="color:#FF9843;">ABB</h2>
                                </div>
                            </div>
                            <div class="col-lg-2 mb-2 col-md-6">
                                <div class="cover text-center p-2   bg-white">
                                    <h2 class="fs-5 fw-bolder  " style="color:#FF9843;">Schneider</h2>
                                    
                                </div>
                            </div>
                            <div class="col-lg-2 mb-2 col-md-6">
                                <div class="cover text-center p-2  bg-white">
                                    <h2 class="fs-5 fw-bolder " style="color:#FF9843;">Lioa</h2>
                                </div>
                            </div>
                            <div class="col-lg-2 mb-2 col-md-6">
                                <div class="cover text-center p-2  bg-white">
                                    <h2 class="fs-5 fw-bolder " style="color:#FF9843;">Cisco</h2>
                                </div>
                            </div>
                            <div class="col-lg-2 mb-2 col-md-6">
                                <div class="cover text-center p-2  bg-white">
                                    <h2 class="fs-5 fw-bolder " style="color:#FF9843;">Infosat</h2>
                                </div>
                            </div>
                            <div class="col-lg-2 mb-2 col-md-6">
                                <div class="cover text-center p-2  bg-white">
                                    <h2 class="fs-5 fw-bolder " style="color:#FF9843;">Ctc Union</h2>
                                    
                                </div>
                            </div>
                            <div class="col-lg-2 mb-2 col-md-6">
                                <div class="cover text-center  p-2  bg-white">
                                    <h2 class="fs-5 fw-bolder " style="color:#FF9843;">Wisi</h2>
                                </div>
                            </div>
                            <div class="col-lg-2 mb-2 col-md-6">
                                <div class="cover text-center p-2  bg-white">
                                    <h2 class="fs-5 fw-bolder  " style="color:#FF9843;">Alantek</h2>
                                </div>
                            </div>
                            <div class="col-lg-2 mb-2 col-md-6">
                                <div class="cover text-center p-2 bg-white">
                                    <h2 class="fs-5 fw-bolder" style="color:#FF9843;">Thi Pha Cable</h2>
                                </div>
                            </div>
                            <div class="col-lg-2 mb-2 col-md-6">
                                <div class="cover text-center  p-2  bg-white">
                                    <h2 class="fs-5 fw-bolder  " style="color:#FF9843;">Commscope</h2>
                                </div>
                            </div>
                            <div class="col-lg-2 mb-2 col-md-6">
                                <div class="cover text-center p-2   bg-white">
                                    <h2 class="fs-5 fw-bolder  " style="color:#FF9843;">Linkbasic</h2>
                                    
                                </div>
                            </div>
                            <div class="col-lg-2 mb-2 col-md-6">
                                <div class="cover text-center p-2  bg-white">
                                    <h2 class="fs-5 fw-bolder " style="color:#FF9843;">Panasonic</h2>
                                </div>
                            </div>
                            <div class="col-lg-2 mb-2 col-md-6">
                                <div class="cover text-center p-2  bg-white">
                                    <h2 class="fs-5 fw-bolder  " style="color:#FF9843;">Anviz</h2>
                                </div>
                            </div>
                            <div class="col-lg-2 mb-2 col-md-6">
                                <div class="cover text-center p-2  bg-white">
                                    <h2 class="fs-5 fw-bolder " style="color:#FF9843;">Honing Lih</h2>
                                </div>
                            </div>
                        </div>
        </div>

@endsection