@extends('layout.basic_front')

@section("content")



        <div id="content" role="main" class="no-padding">
                <video loop="loop" id="home_video" class="video-playing video-area" style="margin-top: 0%;width:100%; height:100%;position: relative;" autoplay="autoplay" preload="auto" controls muted>
                        <source src="{{{asset('media/GHver3.mp4')}}}">
                </video>
        </div>
                <!-- Start About Area -->
        <section class="about-area ptb-80">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 col-md-4 col-sm-5">
                        <div class="section-title">
                            <h2>Welcome to Our - <span>GHBike</span></h2>
                        </div>
                    </div>
                    
                    <div class="col-lg-8 col-md-8 col-sm-7">
                        <div class="about-text">
                            <p style="text-align:justify;">{{trans("about.intro1")}}</p>
                        </div>
                    </div>
                    
                    <div class="col-lg-3 col-md-6 col-sm-6">
                        <div class="features-box bg-1">
                            <div class="content">
                                <i class="fa fa-building"></i>
                                <h3>公司</h3>
                                <p>庚鋐有限公司成立於2005年，起立於台灣中部彰化縣秀水鄉，一路走來對客戶忠實的服務始終如一...</p>
                            </div>
                            <a href="{{URL::to('front/about')}}" class="btn btn-primary">Read More</a>
                        </div>
                    </div>
                    
                    <div class="col-lg-3 col-md-6 col-sm-6">
                        <div class="features-box bg-2">
                            <div class="content">
                                <i class="fa fa-chain"></i>
                                <h3>室內訓練台</h3>
                                <p>全新台灣製造GHBIKE滾筒式訓練台; 特色:完美高規格流線設計，可摺疊收納不佔空間...</p>
                            </div>
                            <a href="{{URL::to('front/about')}}" class="btn btn-primary">Read More</a>
                        </div>
                    </div>
                    
                    <div class="col-lg-3 col-md-6 col-sm-6">
                        <div class="features-box bg-3">
                            <div class="content">
                                <i class="fa fa-bicycle"></i>
                                <h3>GHBike滑步車</h3>
                                <p>GH-BIKE 滑步車所採用的材質優點在於耐久不變型之設計，滑步車使用的強化塑料..</p>
                            </div>
                            <a href="{{URL::to('front/about')}}" class="btn btn-primary">Read More</a>
                        </div>
                    </div>
                    
                    <div class="col-lg-3 col-md-6 col-sm-6">
                        <div class="features-box bg-4">
                            <div class="content">
                                <i class="fa fa-bullseye"></i>
                                <h3>品牌</h3>
                                <p>秉著「品質優良、價格合理、服務親切」的經營理念，從誠實製造開始，深化設計品質...</p>
                            </div>
                            <a href="{{URL::to('front/about')}}" class="btn btn-primary">Read More</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End About Area -->

        <!-- Start Home Product Image Area -->
        <section class="instagram-feed ptb-40">
                       <div class="container">
                            <div class="section-title">
                                <h2>{{trans("home.img_intro")}}</h2>
                                <img src="{{asset('img/section-title-logo.png')}}" alt="section-title-logo">
                            </div>
                       </div>
                        <div class="container">
                            <div class="row">
                                <div class="col-lg-12 col-md-12">
				<div style="width:100%;">
				   @if($langset == 'en')
                                   <img id="product_img_map" class="img_map" style=""; usemap="#image-map" src="{{asset('images/imgs/IMG_0014_Bg_en.jpg')}}">
<map name="image-map" id="product_map">
    <area target="_blank" alt="Cycle Trainers" title="Cycle Trainers" href="{{URL::to('front/products/31')}}" coords="863,588,845,592,835,585,770,601,759,607,741,613,712,637,606,669,395,733,273,607,618,520,704,486,726,500,760,491,885,548,879,562,983,562,983,583,928,583,870,583" shape="poly">
    <area target="_blank" alt="Children's Seats" title="Children's Seats" href="{{URL::to('front/products/36')}}" coords="578,326,521,322,474,307,442,294,444,279,481,262,500,197,511,145,516,133,553,139,580,105,600,91,619,86,642,87,658,92,661,104,649,157,645,201,638,226,593,228,584,289,610,280,829,279,829,259,954,259,954,281,608,281,584,291" shape="poly">
    <area target="_blank" alt="Mudguards" title="Mudguards" href="{{URL::to('front/products/29')}}" coords="337,245,337,255,369,255,411,257,436,262,473,295,524,384,539,404,562,411,517,324,486,274,449,244,417,238,399,233,314,232,314,212,221,212,221,237,400,236,399,233" shape="poly">
    <area target="_blank" alt="Mudguards" title="Mudguards" href="{{URL::to('front/products/37')}}" coords="690,231,688,238,702,241,717,243,704,255,707,262,755,255,776,246,842,233,886,223,1018,224,1018,201,931,200,931,221,891,221,883,214,857,213,792,221,783,218,755,222,727,234,707,230" shape="poly">
    <area target="_blank" alt="Lighting Sets" title="Lighting Sets" href="{{URL::to('front/products/43')}}" coords="679,216,676,223,692,229,700,231,724,229,727,217,723,213,754,198,927,198,927,176,826,176,826,195,754,195,728,208,717,211,710,213,704,217,695,219" shape="poly">
    <area target="_blank" alt="Grips" title="Grips" href="{{URL::to('front/products/40')}}" coords="517,160,517,179,580,179,580,165,581,159,895,159,895,138,845,138,845,158,581,158,574,160" shape="poly">
    <area target="_blank" alt="Bar Ends (LED)" title="Bar Ends (LED)" href="{{URL::to('front/products/40')}}" coords="187,68,187,91,361,92,380,100,379,117,375,125,382,134,395,135,392,116,393,104,396,84,393,79,387,80,383,87,381,95,361,89,298,88,298,68" shape="poly">
    <area target="_blank" alt="Bike Mirrors" title="Bike Mirrors" href="{{URL::to('front/products/41')}}" coords="218,32,218,54,319,54,332,60,326,66,328,78,335,85,346,97,357,101,362,105,362,113,368,118,375,115,393,137,399,127,383,101,373,92,371,80,364,70,357,64,348,59,339,58,321,52,313,49,313,32" shape="poly">
</map>
				
				  @else
                                   <img id="product_img_map" class="img_map" style=""; usemap="#image-map" src="{{asset('images/imgs/IMG_0014_Bg_tw.jpg')}}">
<map name="image-map" id="product_map">
    <area target="_blank" alt="訓練台" title="訓練台" href="{{URL::to('front/products/31')}}" coords="269,614,380,730,408,724,425,715,590,667,609,664,642,642,658,640,672,641,697,635,759,601,819,584,832,592,847,589,851,584,967,583,967,559,913,559,913,579,850,580,866,549,856,542,745,491,706,500,694,486,640,504,601,524,271,605" shape="poly">
    <area target="_blank" alt="兒童座椅" title="兒童座椅" href="{{URL::to('front/products/36')}}" coords="562,326,513,324,502,318,488,318,457,305,433,299,424,289,429,281,438,280,462,273,486,197,498,157,498,139,508,134,524,137,538,144,564,110,573,99,593,90,604,88,617,88,629,89,638,91,645,99,644,108,636,125,637,145,636,156,633,167,632,190,629,202,616,212,622,224,579,228,567,291,592,280,868,279,868,259,939,259,939,282,592,282,568,293,568,293" shape="poly">
    <area target="_blank" alt="泥除" title="泥除" href="{{URL::to('front/products/29')}}" coords="527,406,547,412,523,359,506,330,477,280,469,274,464,272,436,248,430,244,418,242,401,240,385,233,244,232,244,212,206,212,206,235,379,235,390,238,329,247,324,252,335,255,386,253,423,257,460,293,498,365" shape="poly">
    <area target="_blank" alt="泥除" title="泥除" href="{{URL::to('front/products/37')}}" coords="674,238,685,241,699,243,693,252,691,259,698,261,732,256,742,256,747,252,782,242,812,237,829,235,842,233,860,228,865,224,1003,226,1003,203,967,203,967,222,876,221,870,216,859,214,845,214,778,222,772,220,761,220,749,220,716,234,704,234,695,232,688,232,678,232" shape="poly">
    <area target="_blank" alt="座管燈" title="座管燈" href="{{URL::to('front/products/43')}}" coords="662,215,661,224,679,231,688,232,698,230,709,230,710,219,709,214,732,204,914,204,914,182,863,182,863,201,732,201,713,209,701,212,694,214,693,219,681,220" shape="poly">
    <area target="_blank" alt="握把套" title="握把套" href="{{URL::to('front/products/40')}}" coords="506,160,506,180,567,180,568,162,567,160,571,161,879,160,879,138,824,137,824,156,565,158,558,160" shape="poly">
    <area target="_blank" alt="牛角把手" title="牛角把手" href="{{URL::to('front/products/40')}}" coords="206,108,206,130,515,129,541,141,540,151,543,157,556,159,565,154,564,144,560,138,562,117,560,108,557,100,552,94,545,96,546,102,549,110,548,119,546,134,540,136,516,127,279,127,279,108" shape="poly">
    <area target="_blank" alt="鏡子" title="鏡子" href="{{URL::to('front/products/41')}}" coords="206,37,206,60,308,60,315,63,312,69,315,78,319,84,326,92,333,96,340,100,349,108,353,114,361,115,365,120,372,127,384,127,380,118,371,104,358,94,357,85,354,76,348,68,342,62,329,58,319,61,310,56,243,56,243,37" shape="poly">
</map>
				@endif
				</div>
                                </div>
                            </div>
                        </div>
        </section>
        <!-- End Home Product Image Area -->


               <!-- Start Instagram Feed Area -->
       <section class="instagram-feed ptb-80">
           <div class="container">
                <div class="section-title">
                    <h2><a href="{{URL::to('front/products')}}" target="_blank">{{trans("home.imgListTitle2")}}  </a></h2>
                    <img src="{{asset('img/section-title-logo.png')}}" alt="section-title-logo">
                </div>

           <div class="row m-0">
                <div class="instagram-feed-slider">

                    @foreach($productimgs as $product)
                    <div class="item">
                        <a href="{{URL::to('front/productdetail/'.$product->id)}}"><img style="height:150px;" src="{{asset($product->img_path)}}" alt="{{$product->title_en}}"></a>
                    </div>
                    @endforeach


                </div>
           </div>
            </div>
       </section>
       <!-- End Instagram Feed Area -->
<script>
       window.onload = function () {
/*
    var ImageMap = function (map) {
            var n,
                areas = map.getElementsByTagName('area'),
                len = areas.length,
                coords = [],
                previousWidth = 1920;
            for (n = 0; n < len; n++) {
                coords[n] = areas[n].coords.split(',');
            }
            this.resize = function () {
                var n, m, clen,
                    x = document.body.clientWidth / previousWidth;
                for (n = 0; n < len; n++) {
                    clen = coords[n].length;
                    for (m = 0; m < clen; m++) {
                        coords[n][m] *= x;
                    }
                    areas[n].coords = coords[n].join(',');
                }
                previousWidth = document.body.clientWidth;
                return true;
            };
            window.onresize = this.resize;
        },
        imageMap = new ImageMap(document.getElementById('product_map'));
    imageMap.resize();
*/
} 
        
</script>
 
@stop