@extends('style.master')

@section('page_title','首頁')

@section('page_style')
<link href="{{ url('/css/index.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('page_content')

			<!-- REVOLUTION SLIDER -->
			<div class="slider fullwidthbanner-container roundedcorners">

				<div class="fullwidthbanner" data-height="480" data-shadow="0" data-navigationStyle="preview2">
					<ul class="hide">

						<!-- SLIDE About  -->
						<li data-transition="fade" data-link="{{ url('about') }}" data-slotamount="1" data-masterspeed="1500" data-delay="10000" data-saveperformance="off" data-title="About" style="background-color: #F6F6F6;">

							<img src="assets/images/backgrounds/grey-noise-min.jpg" alt="video" data-bgposition="top center" data-bgfit="cover" data-bgrepeat="no-repeat">

							<div class="tp-caption customin ltl tp-resizeme revo-slider-caps-text uppercase"
								data-x="left" data-hoffset="0"
								data-y="70"
								data-customin="x:-200;y:0;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
								data-speed="400"
								data-start="1000"
								data-easing="easeOutQuad"
								data-splitin="none"
								data-splitout="none"
								data-elementdelay="0.01"
								data-endelementdelay="0.1"
								data-endspeed="1000"
								data-endeasing="Power4.easeIn">
								<img src="images/banner-about-2.jpeg" alt="">
							</div>

							<div class="tp-caption large_bold_grey skewfromleftshort customout font-open-sans"
								data-x="645"
								data-y="80"
								data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
								data-speed="300"
								data-start="1100"
								data-easing="Back.easeOut"
								data-endspeed="500"
								data-endeasing="Power4.easeIn"
								data-captionhidden="off"
								style="z-index: 7; font-weight:bold !important;">WHAT WE DO
							</div>

							<div class="tp-caption large_bold_grey skewfromleftshort customout font-open-sans"
								data-x="645"
								data-y="150"
								data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
								data-speed="300"
								data-start="1100"
								data-easing="Back.easeOut"
								data-endspeed="500"
								data-endeasing="Power4.easeIn"
								data-captionhidden="off"
								style="z-index: 7; font-weight:bold !important; font-size:24px;">Make every web page <span style="color: #ff0000">SHOPPABLE</span>
							</div>

							<div class="tp-caption ltl customin customout small_light_white font-lato"
								data-x="650"
								data-y="250"
								data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1.3;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
								data-speed="500"
								data-start="1300"
								data-easing="easeOutQuad"
								data-splitin="none"
								data-splitout="none"
								data-elementdelay="0.01"
								data-endelementdelay="0.1"
								data-endspeed="500"
								data-endeasing="Power4.easeIn" style=" color: #333; font-size:20px; max-width: 550px; white-space: normal; text-shadow:none;">
								<strong>極簡 - 讓小生意也很容易上網做</strong>
							</div>

							<div class="tp-caption ltl customin customout small_light_white font-lato"
								data-x="650"
								data-y="300"
								data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1.3;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
								data-speed="500"
								data-start="1300"
								data-easing="easeOutQuad"
								data-splitin="none"
								data-splitout="none"
								data-elementdelay="0.01"
								data-endelementdelay="0.1"
								data-endspeed="500"
								data-endeasing="Power4.easeIn" style=" color: #333; font-size:20px; max-width: 550px; white-space: normal; text-shadow:none;">
								<strong>套件 - 舊站直接擴充電商功能</strong>
							</div>

							<div class="tp-caption ltl customin customout small_light_white font-lato"
								data-x="650"
								data-y="350"
								data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1.3;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
								data-speed="500"
								data-start="1300"
								data-easing="easeOutQuad"
								data-splitin="none"
								data-splitout="none"
								data-elementdelay="0.01"
								data-endelementdelay="0.1"
								data-endspeed="500"
								data-endeasing="Power4.easeIn" style=" color: #333; font-size:20px; max-width: 550px; white-space: normal; text-shadow:none;">
								<strong>百搭 - 從一頁小舖到策展結市 支授多元前端商模</strong>
							</div>
							
						</li>

						<!-- Product -->
						<li data-transition="fade" data-link="{{ url('product') }}" data-slotamount="1" data-masterspeed="1000" data-saveperformance="off" data-title="Product">

							<img src="assets/images/1x1.png" data-lazyload="images/banner-product-1.jpeg" alt="" data-bgfit="cover" data-bgposition="center bottom" data-bgrepeat="no-repeat" />

							<div class="overlay dark-1"><!-- dark overlay [1 to 9 opacity] --></div>

							<div class="tp-caption customin ltl tp-resizeme large_bold_white"
								data-x="center"
								data-y="150"
								data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
								data-speed="800"
								data-start="1200"
								data-easing="easeOutQuad"
								data-splitin="none"
								data-splitout="none"
								data-elementdelay="0.01"
								data-endelementdelay="0.1"
								data-endspeed="1000"
								data-endeasing="Power4.easeIn" style="z-index: 10;">
								原本沒有電商的網站
							</div>

							<div class="tp-caption customin ltl tp-resizeme small_light_white font-lato"
								data-x="center"
								data-y="260"
								data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
								data-speed="800"
								data-start="1400"
								data-easing="easeOutQuad"
								data-splitin="none"
								data-splitout="none"
								data-elementdelay="0.01"
								data-endelementdelay="0.1"
								data-endspeed="1000"
								data-endeasing="Power4.easeIn" style="z-index: 10; width: 100%; max-width: 750px; white-space: normal; text-align:center; font-size:36px;">
								原站可以透過 CaaS 直接擴充電商功能
							</div>

						</li>

						<!-- SLIDE Solutions -->
						<li data-transition="fade" data-link="{{ url('solutions') }}" data-slotamount="7" data-masterspeed="300" data-title="Solutions" data-target="_blank" data-saveperformance="off">

							<img src="assets/images/1x1.png" data-lazyload="assets/images/demo/wall.jpg" alt="" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat" />

							<div class="tp-caption lfb" 
								data-x="right" data-hoffset="-70" 
								data-y="60" 
								data-speed="2000" 
								data-start="500" 
								data-easing="easeOutExpo" 
								data-elementdelay="0.1" 
								data-endelementdelay="0.1" 
								data-endspeed="300" 
								style="z-index: 2;">
								<img src="assets/images/1x1.png" alt="" data-lazyload="images/banner-solutions-1.jpeg">
							</div>

							<div class="tp-caption mediumlarge_light_white lfb tp-resizeme" 
								data-x="left" data-hoffset="150"
								data-y="150" 
								data-speed="1000" 
								data-start="1400" 
								data-easing="easeOutExpo" 
								data-splitin="none" 
								data-splitout="none" 
								data-elementdelay="0.1" 
								data-endelementdelay="0.1" 
								data-endspeed="300" 
								style="z-index: 3; max-width: auto; max-height: auto; white-space: nowrap;">新電商解決方案
							</div>

							<div class="tp-caption block_white sfl tp-resizeme" 
								data-x="70" 
								data-y="266" 
								data-speed="750" 
								data-start="1900" 
								data-easing="easeOutExpo" 
								data-splitin="none" 
								data-splitout="none" 
								data-elementdelay="0.1" 
								data-endelementdelay="0.1" 
								data-endspeed="300" 
								style="z-index: 5; max-width: auto; max-height: auto; white-space: nowrap;">客製化開發
							</div>

							<div class="tp-caption block_theme_color sfr tp-resizeme" 
								data-x="120" 
								data-y="310" 
								data-speed="750" 
								data-start="2200" 
								data-easing="easeOutExpo" 
								data-splitin="none" 
								data-splitout="none" 
								data-elementdelay="0.1" 
								data-endelementdelay="0.1" 
								data-endspeed="300" 
								style="z-index: 6; max-width: auto; max-height: auto; white-space: nowrap;">資料串整
							</div>

							<div class="tp-caption block_white sfb tp-resizeme" 
								data-x="170" 
								data-y="356" 
								data-speed="750" 
								data-start="2500" 
								data-easing="easeOutExpo" 
								data-splitin="none" 
								data-splitout="none" 
								data-elementdelay="0.1" 
								data-endelementdelay="0.1" 
								data-endspeed="300" 
								style="z-index: 7; max-width: auto; max-height: auto; white-space: nowrap;">企業級解決方案
							</div>
						</li>

						<!-- SLIDE Price -->
						<li data-transition="fade" data-link="{{ url('price') }}" data-slotamount="1" data-masterspeed="1000" data-saveperformance="off" data-title="Price">

							<img src="assets/images/1x1.png" data-lazyload="images/banner-price-1.jpeg" alt="" data-bgposition="center center" data-kenburns="on" data-duration="10000" data-ease="Linear.easeNone" data-bgfit="100" data-bgfitend="110" />

							<div class="tp-caption very_large_text lfb ltt tp-resizeme"
								data-x="right" data-hoffset="-100"
								data-y="center" data-voffset="-50"
								data-speed="600"
								data-start="800"
								data-easing="Power4.easeOut"
								data-splitin="none"
								data-splitout="none"
								data-elementdelay="0.01"
								data-endelementdelay="0.1"
								data-endspeed="500"
								data-endeasing="Power4.easeIn">
								Just One Point
							</div>

							<div class="tp-caption medium_light_white lfb ltt tp-resizeme"
								data-x="right" data-hoffset="-110"
								data-y="center" data-voffset="60"
								data-speed="600"
								data-start="900"
								data-easing="Power4.easeOut"
								data-splitin="none"
								data-splitout="none"
								data-elementdelay="0.01"
								data-endelementdelay="0.1"
								data-endspeed="500"
								data-endeasing="Power4.easeIn">
								One Menu<br/>
								One SKU<br/>
								<span style="font-size:24px;font-weight:400;">- One Point</span>
							</div>

						</li>

						<!-- SLIDE Support -->
						<li data-transition="fade" data-link="{{ url('support') }}" data-slotamount="1" data-masterspeed="1000" data-saveperformance="off" data-title="Slide 2">

							<img src="assets/images/1x1.png" data-lazyload="images/banner-support-1.jpeg" alt="" data-bgfit="cover" data-bgposition="center bottom" data-bgrepeat="no-repeat" />

							<div class="overlay dark-1"><!-- dark overlay [1 to 9 opacity] --></div>

							<div class="tp-caption customin ltl tp-resizeme text_white"
								data-x="center"
								data-y="125"
								data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
								data-speed="800"
								data-start="1000"
								data-easing="easeOutQuad"
								data-splitin="none"
								data-splitout="none"
								data-elementdelay="0.01"
								data-endelementdelay="0.1"
								data-endspeed="1000"
								data-endeasing="Power4.easeIn" style="z-index: 10;">
								<span class="weight-300">API / ADMIN / WIDGET</span>
							</div>

							<div class="tp-caption customin ltl tp-resizeme large_bold_white"
								data-x="center"
								data-y="175"
								data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
								data-speed="800"
								data-start="1200"
								data-easing="easeOutQuad"
								data-splitin="none"
								data-splitout="none"
								data-elementdelay="0.01"
								data-endelementdelay="0.1"
								data-endspeed="1000"
								data-endeasing="Power4.easeIn" style="z-index: 10;">
								技術支援 Technical Support
							</div>

							<div class="tp-caption customin ltl tp-resizeme small_light_white font-lato"
								data-x="center"
								data-y="265"
								data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
								data-speed="800"
								data-start="1400"
								data-easing="easeOutQuad"
								data-splitin="none"
								data-splitout="none"
								data-elementdelay="0.01"
								data-endelementdelay="0.1"
								data-endspeed="1000"
								data-endeasing="Power4.easeIn" style="z-index: 10; width: 100%; max-width: 750px; white-space: normal; text-align:center; font-size:20px;">
								技術支援的相關詢問，將優先以表單方式進行回覆。
							</div>

							<div class="tp-caption customin ltl tp-resizeme"
								data-x="center"
								data-y="353"
								data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
								data-speed="800"
								data-start="1550"
								data-easing="easeOutQuad"
								data-splitin="none"
								data-splitout="none"
								data-elementdelay="0.01"
								data-endelementdelay="0.1"
								data-endspeed="1000"
								data-endeasing="Power4.easeIn" style="z-index: 10;">
								<a href="#purchase" class="btn btn-default btn-lg">
									<span>填寫諮詢表單</span> 
								</a>
							</div>

						</li>

					</ul>

					<div class="tp-bannertimer"><!-- progress bar --></div>
				</div>
			</div>
			<!-- /REVOLUTION SLIDER -->

			<!-- News -->
			<section>
				<div class="container">

					<div class="heading-title heading-dotted text-center">
						<h2>News & Event</h2>
					</div>

					<!-- 
						controlls-over		= navigation buttons over the image 
						buttons-autohide 	= navigation buttons visible on mouse hover only
						
						data-plugin-options:
							"singleItem": true
							"autoPlay": true (or ms. eg: 4000)
							"navigation": true
							"pagination": true
							"items": "4"

						owl-carousel item paddings
							.owl-padding-0
							.owl-padding-3
							.owl-padding-6
							.owl-padding-10
							.owl-padding-15
							.owl-padding-20
					-->
					<div class="owl-carousel owl-padding-10 buttons-autohide controlls-over" data-plugin-options='{"singleItem": false, "items":"4", "autoPlay": 4000, "navigation": true, "pagination": false}'>
						
						<!-- Item -->
						<div class="img-hover">
							<a href="https://www.marketersgo.com/market/201908/mk6-api-headless-commerce/" target="_blank">
								<img class="img-responsive" src="images/news/20190830.jpg" alt="">
							</a>

							<h4 class="text-left margin-top-20">
								<a href="https://www.marketersgo.com/market/201908/mk6-api-headless-commerce/" target="_blank">行銷趨勢：無頭電商新概念</a>
							</h4>
							<p class="text-left">
								各式購物網站結合 API 應用，將商業融入日常生活
							</p>
							<ul class="text-left size-12 list-inline list-separator">
								<li>
									<i class="fa fa-calendar"></i> 2019-8-30
								</li>
								</ul>
						</div>
						<!-- /Item -->

						<!-- Item -->
						<div class="img-hover">
							<a href="store/090817/demo.php" target="_blank">
								<img class="img-responsive" src="images/news/20200817.jpg" alt="">
							</a>

							<h4 class="text-left margin-top-20">
								<a href="store/090817/demo.php" target="_blank">單頁式 090817 版型頁面</a>
							</h4>
							<p class="text-left">
								One-Page StoreFront Released
							</p>
							<ul class="text-left size-12 list-inline list-separator">
								<li>
									<i class="fa fa-calendar"></i> 2020-8-17
								</li>
								</ul>
						</div>
						<!-- /Item -->

						<!-- Item -->
						<div class="img-hover">
							<a href="store/090907/demo.php" target="_blank">
								<img class="img-responsive" src="images/news/20200907.jpg" alt="">
							</a>

							<h4 class="text-left margin-top-20">
								<a href="store/090907/demo.php" target="_blank">單頁式 090907 版型頁面</a>
							</h4>
							<p class="text-left">
								One-Page StoreFront Released
							</p>
							<ul class="text-left size-12 list-inline list-separator">
								<li>
									<i class="fa fa-calendar"></i> 2020-9-7
								</li>
								</ul>
						</div>
						<!-- /Item -->
						
					</div>

				</div>
			</section>
			<!-- /News -->

			
			
@endsection