@extends('layouts.public')

@section('title') {{trans('seo.title.social-media')}} @endsection
@section('description') {{trans('seo.description.social-media')}} @endsection
@section('image', asset('images/share/social-media.jpg'))

@section('content')
<div class="rs-breadcrumbs">
	<div class="breadcrumbs-image">
		<img src="/images/breadcrumbs/social-media.jpg" alt="Zona Plus agencija za digitalni marketing - Zadar">
		<div class="breadcrumbs-inner">
			<div class="container">
				<div class="breadcrumbs-text">
					<h1 class="breadcrumbs-title">{{trans('navigation.social-media')}}</h1>
					<ul class="breadcrumbs-subtitle">
						<li><a href="{{route('public.index')}}"><i class="fa fa-home"></i>{{trans('navigation.index')}}</a></li>
						<li><a href="{{route('public.services')}}">{{trans('navigation.services')}}</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>                
</div>

<div id="services-single" class="services-single sec-spacer3">
	<div class="container">
		<div class="top-side">
			<div class="sec-title">
				<h2 class="title">{!!trans('global.social-media.section1-title')!!}</h2>
				<div class="desc">
					{!!trans('global.social-media.section1-text')!!}
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-6">
				<div class="left-side">
					<div class="col-title">
						<h3 class="title">{!!trans('global.social-media.section1-list-title')!!}</h3>
						<div class="desc">
						{!!trans('global.social-media.section1-list-text')!!}</div>
					</div>
					{!!trans('global.social-media.section1-list')!!}
				</div>
			</div>
			<div class="col-lg-6 mpt-40">
				<div class="right-side">
					<img src="/images/services/vodenje-drustvenih-mreza.jpg" alt="Vođenje društvenih mreža - Zona Plus agencija za digitalni marketing - Zadar">
				</div>
			</div>
		</div>
	</div>
</div>

<div id="rs-services" class="rs-services4">
	<div class="services-box">
		<div class="row">
			<div class="col-lg-6 padding-0">
			</div>
			<div class="col-lg-6 padding-0">
				<div class="right-part secondary-bg">
					<div class="sec-title">
						<h2 class="title white-color">{!!trans('global.social-media.section2-title')!!}</h2>
						<div class="desc white-color">{!!trans('global.social-media.section2-text')!!}</div>
					</div>
					<div class="row">
						<div class="col-md-6 mb-30">
							<div class="service-item">
								<div class="service-icon">
									<i class="flaticon-chart"></i>
								</div>
								<h4 class="title white-color">{!!trans('global.social-media.section2-box1-title')!!}</h4>
								<p class="desc white-color">{!!trans('global.social-media.section2-box1-text')!!}</p>
							</div>
						</div>
						<div class="col-md-6 mb-30">
							<div class="service-item">
								<div class="service-icon">
									<i class="flaticon-clock"></i>
								</div>
								<h4 class="title white-color">{!!trans('global.social-media.section2-box2-title')!!}</h4>
								<p class="desc white-color">{!!trans('global.social-media.section2-box2-text')!!}</p>
							</div>
						</div>
						<div class="col-md-6 mb-30">
							<div class="service-item">
								<div class="service-icon">
									<i class="flaticon-career"></i>
								</div>
								<h4 class="title white-color">{!!trans('global.social-media.section2-box3-title')!!}</h4>
								<p class="desc white-color">{!!trans('global.social-media.section2-box3-text')!!}</p>
							</div>
						</div>
						<div class="col-md-6 mb-30">
							<div class="service-item">
								<div class="service-icon">
									<i class="flaticon-profits"></i>
								</div>
								<h4 class="title white-color">{!!trans('global.social-media.section2-box4-title')!!}</h4>
								<p class="desc white-color">{!!trans('global.social-media.section2-box4-text')!!}</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div id="rs-price-plan" class="rs-price-plan pt-100 pb-100">
	<div class="container">
		<div class="sec-title text-center">
			<h4 class="sub-title top-line primary">{!!trans('global.package-title')!!}</h4>
			<h2 class="title">{!!trans('global.package-subtitle')!!}</h2>
		</div>
		<div class="row">
			<div class="col-lg-4">
				<div class="price-table">
					<div class="top-part">
						<h4 class="title">{!!trans('global.package.basic-title')!!}</h4>
					</div>
					<div class="middle-part">
						{!!trans('global.package.basic-list')!!}
					</div>
					<div class="bottom-part">
						<a class="readon" href="#" data-toggle="modal" data-target="#contactFormModal" data-package="Vođenje društvenih mreža - Basic">{!!trans('global.package.basic-button')!!}</a>
						<br>
						<br>
						{!!trans('global.package.basic-budget')!!}
					</div>
				</div>
			</div>
			<div class="col-lg-4">
				<div class="price-table active">
					<div class="top-part">
						<h4 class="title">{!!trans('global.package.optimum-title')!!}</h4>
					</div>
					<div class="middle-part">
						{!!trans('global.package.optimum-list')!!}
					</div>
					<div class="bottom-part">
						<a class="readon" href="#" data-toggle="modal" data-target="#contactFormModal" data-package="Vođenje društvenih mreža - Optimum">{!!trans('global.package.optimum-button')!!}</a>
						<br>
						<br>
						{!!trans('global.package.optimum-budget')!!}
					</div>
				</div>
			</div>
			<div class="col-lg-4">
				<div class="price-table">
					<div class="top-part">
						<h4 class="title">{!!trans('global.package.premium-title')!!}</h4>
					</div>
					<div class="middle-part">
						{!!trans('global.package.premium-list')!!}
					</div>
					<div class="bottom-part">
						<a class="readon" href="#" data-toggle="modal" data-target="#contactFormModal" data-package="Vođenje društvenih mreža - Premium">{!!trans('global.package.premium-button')!!}</a>
						<br>
						<br>
						{!!trans('global.package.premium-budget')!!}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div id="rs-cta" class="rs-cta gray-bg pt-100 pb-100">
	<div class="container">
		<div class="row align-items-center">
			<div class="col-lg-8 col-md-12 mb-md-30">
				<div class="sec-title margin-0 text-center-md">
					<h2 class="title secondary-color">{!!trans('global.social-media.cta-title')!!}</h2>
					<p class="cta-subtitle">{!!trans('global.social-media.cta-subtitle')!!}</p>
				</div>
			</div>
			<div class="col-lg-4 col-md-12 text-center-md">
				<div class="btn-cta text-right text-center-md">
					<a class="readon" href="{{route('public.contact')}}">{!!trans('global.social-media.cta-button')!!}</a>
				</div>
			</div>
		</div>
	</div>
</div>

@include('include.modal')

@endsection