Implemented metronic home page
This commit is contained in:
Deon George
@@ -0,0 +1,67 @@
|
||||
@extends('metronic::layouts.app')
|
||||
|
||||
@section('htmlheader_title')
|
||||
Welcome
|
||||
@endsection
|
||||
|
||||
@section('main-content')
|
||||
{{-- SLIDER --}}
|
||||
@includeIf('welcome.widgets.slider')
|
||||
{{-- END SLIDER --}}
|
||||
|
||||
<div class="main">
|
||||
<div class="container">
|
||||
{{-- SERVICE BOX --}}
|
||||
@includeIf('welcome.widgets.servicebox')
|
||||
{{-- END SERVICE BOX --}}
|
||||
|
||||
{{-- TESTIMONIALS --}}
|
||||
@includeIf('welcome.widgets.blockquote')
|
||||
{{-- END TESTIMONIALS --}}
|
||||
|
||||
{{-- ACTIVITY --}}
|
||||
@includeIf('welcome.widgets.activity')
|
||||
{{-- END ACTIVITY --}}
|
||||
|
||||
@if (isset($show_page_tabs) OR isset($show_testimonials))
|
||||
<!-- BEGIN TABS AND TESTIMONIALS -->
|
||||
<div class="row mix-block margin-bottom-40">
|
||||
{{-- TABS --}}
|
||||
@includeIf('welcome.widgets.tabs')
|
||||
{{-- END TABS --}}
|
||||
|
||||
{{-- TESTIMONIALS --}}
|
||||
@includeIf('welcome.widgets.testimonials')
|
||||
{{-- END TESTIMONIALS --}}
|
||||
</div>
|
||||
<!-- END TABS AND TESTIMONIALS -->
|
||||
@endif
|
||||
|
||||
{{-- STEPS --}}
|
||||
@includeIf('welcome.widgets.steps')
|
||||
{{-- END STEPS --}}
|
||||
|
||||
{{-- CLIENTS --}}
|
||||
@isset($show_clients))
|
||||
@includeIf('welcome.widgets.clients')
|
||||
@endisset
|
||||
{{-- END CLIENTS --}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@js('js/layout.js','layout','jquery')
|
||||
@endsection
|
||||
|
||||
@section('page-scripts')
|
||||
|
||||
<!-- PAGE LEVEL JAVASCRIPT -->
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
Layout.init();
|
||||
Layout.initFixHeaderWithPreHeader();
|
||||
Layout.initNavScrolling();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- END PAGE LEVEL JAVASCRIPTS -->
|
||||
@append
|
||||
@@ -0,0 +1,138 @@
|
||||
<!-- BEGIN RECENT WORKS -->
|
||||
<div class="row recent-work margin-bottom-40">
|
||||
<div class="col-md-3">
|
||||
<h2><a href="#">Recent Activity</a></h2>
|
||||
<p>Here are some of our past accomplishments, and clients that we have brought online.</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9">
|
||||
<div class="owl-carousel">
|
||||
<div class="recent-work-item">
|
||||
<em>
|
||||
<img src="{{ asset('pages/welcome/img/activity/pla.png') }}" alt="phpLDAPadmin" class="img-responsive">
|
||||
<a href="http://demo.phpldapadmin.org"><i class="fa fa-link"></i></a>
|
||||
{{-- If this is a jpeg instead of a URL, it renders a nice popup --}}
|
||||
<a href="{{ asset('pages/welcome/img/activity/pla.png') }}" title="phpLdapAdmin" data-fancybox="development" data-caption="phpLDAPadmin"><i class="fa fa-search"></i></a>
|
||||
</em>
|
||||
<a class="recent-work-description" href="javascript:;">
|
||||
<strong>Application Development</strong>
|
||||
<b>LDAP data management</b>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="recent-work-item">
|
||||
<em>
|
||||
<img src="{{ asset('pages/welcome/img/activity/edplus.png') }}" alt="Education Plus" class="img-responsive">
|
||||
<a href="https://edplus.com.au"><i class="fa fa-link"></i></a>
|
||||
{{-- If this is a jpeg instead of a URL, it renders a nice popup --}}
|
||||
<a href="{{ asset('pages/welcome/img/activity/edplus.png') }}" title="Education Plus" data-fancybox="hosting" data-caption="Education Plus"><i class="fa fa-search"></i></a>
|
||||
</em>
|
||||
<a class="recent-work-description" href="javascript:;">
|
||||
<strong>Website Hosting</strong>
|
||||
<b>Education Plus</b>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="recent-work-item">
|
||||
<em>
|
||||
<img src="{{ asset('pages/welcome/img/activity/voip.png') }}" alt="VOIP" class="img-responsive">
|
||||
<a href="https://graytech.net.au"><i class="fa fa-link"></i></a>
|
||||
{{-- If this is a jpeg instead of a URL, it renders a nice popup --}}
|
||||
<a href="{{ asset('pages/welcome/img/activity/voip.png') }}" title="VOIP" data-fancybox="hosting" data-caption="VOIP"><i class="fa fa-search"></i></a>
|
||||
</em>
|
||||
<a class="recent-work-description" href="javascript:;">
|
||||
<strong>VOIP Hosting</strong>
|
||||
<b>Voice over IP</b>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="recent-work-item">
|
||||
<em>
|
||||
<img src="{{ asset('pages/welcome/img/activity/whiskywholesale.png') }}" alt="Education Plus" class="img-responsive">
|
||||
<a href="https://whiskywholesale.com.au"><i class="fa fa-link"></i></a>
|
||||
{{-- If this is a jpeg instead of a URL, it renders a nice popup --}}
|
||||
<a href="{{ asset('pages/welcome/img/activity/whiskywholesale.png') }}" title="Whisky Wholesale" data-fancybox="hosting" data-caption="Whisky Wholesale"><i class="fa fa-search"></i></a>
|
||||
</em>
|
||||
<a class="recent-work-description" href="javascript:;">
|
||||
<strong>Website Hosting</strong>
|
||||
<b>Whisky Wholesale</b>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="recent-work-item">
|
||||
<em>
|
||||
<img src="{{ asset('pages/welcome/img/activity/elonera.png') }}" alt="Education Plus" class="img-responsive">
|
||||
<a href="https://elonerapreschool.com.au"><i class="fa fa-link"></i></a>
|
||||
{{-- If this is a jpeg instead of a URL, it renders a nice popup --}}
|
||||
<a href="{{ asset('pages/welcome/img/activity/elonera.png') }}" title="Elonera PreSchool" data-fancybox="hosting" data-caption="Elonera PreSchool"><i class="fa fa-search"></i></a>
|
||||
</em>
|
||||
<a class="recent-work-description" href="javascript:;">
|
||||
<strong>Website Hosting</strong>
|
||||
<b>Elonera PreSchool</b>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="recent-work-item">
|
||||
<em>
|
||||
<img src="{{ asset('pages/welcome/img/activity/graytech.png') }}" alt="Graytech Hosting" class="img-responsive" >
|
||||
<a href="https://graytech.com.au"><i class="fa fa-link"></i></a>
|
||||
{{-- If this is a jpeg instead of a URL, it renders a nice popup --}}
|
||||
<a href="{{ asset('pages/welcome/img/activity/graytech.png') }}" title="Graytech Hosting" data-fancybox="hosting" data-caption="Graytech Hosting"><i class="fa fa-search"></i></a>
|
||||
</em>
|
||||
<a class="recent-work-description" href="javascript:;">
|
||||
<strong>Website Hosting</strong>
|
||||
<b>Graytech Hosting</b>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="recent-work-item">
|
||||
<em>
|
||||
<img src="{{ asset('pages/welcome/img/activity/email.png') }}" alt="Email Hosting" class="img-responsive" >
|
||||
<a href="https://graytech.com.au"><i class="fa fa-link"></i></a>
|
||||
{{-- If this is a jpeg instead of a URL, it renders a nice popup --}}
|
||||
<a href="{{ asset('pages/welcome/img/activity/email.png') }}" title="Email Hosting" data-fancybox="hosting" data-caption="Email Hosting"><i class="fa fa-search"></i></a>
|
||||
</em>
|
||||
<a class="recent-work-description" href="javascript:;">
|
||||
<strong>Email Hosting</strong>
|
||||
<b>Your Domain</b>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="recent-work-item">
|
||||
<em>
|
||||
<img src="{{ asset('pages/welcome/img/activity/graytech1.png') }}" alt="Graytech Hosting" class="img-responsive" >
|
||||
<a href="https://graytech.com.au"><i class="fa fa-link"></i></a>
|
||||
{{-- If this is a jpeg instead of a URL, it renders a nice popup --}}
|
||||
<a href="{{ asset('pages/welcome/img/activity/graytech1.png') }}" title="Graytech Hosting" data-fancybox="hosting" data-caption="Graytech Hosting"><i class="fa fa-search"></i></a>
|
||||
</em>
|
||||
<a class="recent-work-description" href="javascript:;">
|
||||
<strong>Website Hosting</strong>
|
||||
<b>Graytech Hosting</b>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END RECENT WORKS -->
|
||||
|
||||
@section('page-styles')
|
||||
<link rel="stylesheet" href="{{ asset('plugin/OwlCarousel2-2.3.4/owl.carousel.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('plugin/OwlCarousel2-2.3.4/owl.theme.default.min.css') }}">
|
||||
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.min.css">
|
||||
@append
|
||||
|
||||
@section('page-scripts')
|
||||
<script src="{{ asset('plugin/OwlCarousel2-2.3.4/owl.carousel.min.js') }}"></script>
|
||||
<script src="//cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('.owl-carousel').owlCarousel({
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
});
|
||||
|
||||
Fancybox.bind("[data-fancybox]", {});
|
||||
});
|
||||
</script>
|
||||
@append
|
||||
@@ -0,0 +1,10 @@
|
||||
<!-- BEGIN BLOCKQUOTE BLOCK -->
|
||||
<div class="row quote-v1 margin-bottom-30" style="background: #002090;">
|
||||
<div class="col-md-9">
|
||||
<span class="text-uppercase"><strong>Get in contact today</strong></span>
|
||||
</div>
|
||||
<div class="col-md-3 text-right">
|
||||
<a class="btn-transparent" href="mailto:help@graytech.net.au" target="_blank"><i class="fas fa-pencil-alt margin-right-10"></i><email>help</email>@<domain>graytech.net.au</domain></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END BLOCKQUOTE BLOCK -->
|
||||
@@ -0,0 +1,41 @@
|
||||
{{-- This is not working unless site_slider is running. Might be a problem with the carousel --}}
|
||||
|
||||
<!-- BEGIN CLIENTS -->
|
||||
<div class="row margin-bottom-40 our-clients">
|
||||
<div class="col-md-3">
|
||||
<h2><a href="javascript:;">Our Clients</a></h2>
|
||||
<p>{{ $so->clients_intro }}</p>
|
||||
</div>
|
||||
|
||||
{{-- @todo make sure this scrolls --}}
|
||||
<div class="col-md-9">
|
||||
<div class="owl-carousel owl-carousel6-brands">
|
||||
|
||||
@foreach($so->clients as $c)
|
||||
<div class="client-item">
|
||||
<a href="javascript:;">
|
||||
<img src="{{ $c['image'] }}" class="img-responsive" alt="">
|
||||
<img src="{{ $c['hover'] }}" class="color-img img-responsive" alt="">
|
||||
</a>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END CLIENTS -->
|
||||
|
||||
@section('page-styles')
|
||||
<link rel="stylesheet" href="{{ asset('plugin/animate/animate.min.css') }}">
|
||||
@append
|
||||
|
||||
@section('page-scripts')
|
||||
<!-- END SLIDER -->
|
||||
@css('/site/js/jquery/plugins/owl.carousel/2.0.0/css/owl.carousel.css')
|
||||
@js('/site/js/jquery/plugins/owl.carousel/2.0.0/js/owl.carousel.min.js','jq-owl-carousel','jquery')
|
||||
|
||||
<script type="text/javascript">
|
||||
jQuery(document).ready(function() {
|
||||
// Layout.initOWL();
|
||||
});
|
||||
</script>
|
||||
@append
|
||||
@@ -0,0 +1,27 @@
|
||||
<!-- BEGIN SERVICE BOX -->
|
||||
<div class="row service-box margin-bottom-40">
|
||||
<div class="col-sm-4 col-1">
|
||||
<div class="service-box-heading">
|
||||
<em><i class="fas fa-globe blue"></i></em>
|
||||
<span>Internet Domains</span>
|
||||
</div>
|
||||
<p>Graytech Hosting can get your internet domain name registered and active. For .AU domains, you'll need to have an ABN, but for everything else you just need to decide how you want to be known.</p>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-4 col-1">
|
||||
<div class="service-box-heading">
|
||||
<em><i class="fas fa-desktop red"></i></em>
|
||||
<span>Website Hosting</span>
|
||||
</div>
|
||||
<p>Hosting websites is our speciality, regardless of whether it's public facing for your prospective customers, or internal for your employees.</p>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-4 col-1">
|
||||
<div class="service-box-heading">
|
||||
<em><i class="fas fa-link green"></i></em>
|
||||
<span>Internet Connections</span>
|
||||
</div>
|
||||
<p>We have been providing companies and individuals Internet since it was available via dialup. Our extensive experience with IP, DNS, Firewalls and Routers we can get you online to the public internet, or via a virtual private network to your remote office(s).</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END SERVICE BOX -->
|
||||
@@ -0,0 +1,87 @@
|
||||
<!-- BEGIN SLIDER -->
|
||||
<div class="page-slider margin-bottom-40">
|
||||
<div id="carousel-example-generic" class="carousel slide carousel-slider">
|
||||
<!-- Indicators -->
|
||||
<ol class="carousel-indicators carousel-indicators-frontend">
|
||||
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
|
||||
</ol>
|
||||
|
||||
<!-- Wrapper for slides -->
|
||||
<div class="carousel-inner" role="listbox">
|
||||
|
||||
<div class="item carousel-item active" style="background-image: url( {{ asset('pages/welcome/img/slider/mobile-phone-426559_1920.jpg') }} ); background-size: cover; background-position: center center; opacity: 0.8;">
|
||||
<div class="container">
|
||||
<div class="carousel-position-six text-uppercase text-center" style="background: rgba(100,100,100, 0.7); color: #000;padding: 20px;">
|
||||
<h2 class="margin-bottom-20 animate-delay carousel-title-v2" data-animation="animated fadeInDown">
|
||||
Internet confusing?
|
||||
</h2>
|
||||
<p class="carousel-subtitle-v5 border-top-bottom margin-bottom-30" data-animation="animated fadeInDown">We can help you with your Internet journey.</p>
|
||||
|
||||
{{--
|
||||
<a class="carousel-btn-green" href="#" data-animation="animated fadeInUp">Button</a>
|
||||
--}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item carousel-item" style="background-image: url( {{ asset('pages/welcome/img/slider/ipad-820272_1920.jpg') }} );">
|
||||
<div class="container">
|
||||
<div class="carousel-position-six">
|
||||
<h2 class="animate-delay carousel-title-v6 text-uppercase" data-animation="animated fadeInDown">
|
||||
Web hosting a challenge?
|
||||
</h2>
|
||||
<p class="carousel-subtitle-v6 text-uppercase" data-animation="animated fadeInDown">
|
||||
Graytech Hosting can take away the complexity of getting a web presence.
|
||||
</p>
|
||||
<p class="carousel-subtitle-v7 margin-bottom-30" data-animation="animated fadeInDown" style="color: #fff;">
|
||||
We can host your website, all you need is to provide the content.
|
||||
</p>
|
||||
|
||||
{{--
|
||||
<a class="carousel-btn-green" href="#" data-animation="animated fadeInUp">Button</a>
|
||||
--}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item carousel-item" style="background-image: url( {{ asset('pages/welcome/img/slider/binary-2907220_1920.jpg') }} );">
|
||||
<div class="container">
|
||||
<div class="carousel-position-six text-uppercase" style="background: rgba(100,100,100, 0.7); color: #000;padding: 20px;">
|
||||
<h2 class="margin-bottom-20 animate-delay carousel-title-v2" data-animation="animated fadeInDown">
|
||||
Not sure where to begin?
|
||||
</h2>
|
||||
<p class="carousel-subtitle-v5 text-uppercase" data-animation="animated fadeInDown">
|
||||
We can manage everything from the link to the internet, your email,<br>
|
||||
your website and a firewall to keep the bad folks out.
|
||||
</p>
|
||||
<p class="carousel-subtitle-v7 margin-bottom-30" data-animation="animated fadeInDown" style="color: #fff;">
|
||||
Get in touch.
|
||||
</p>
|
||||
{{--
|
||||
<a class="carousel-btn-green" href="#" data-animation="animated fadeInUp">Button</a>
|
||||
--}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controls -->
|
||||
<a class="left carousel-control carousel-control-shop carousel-control-frontend" href="#carousel-example-generic" role="button" data-slide="prev">
|
||||
<i class="fa fa-angle-left" aria-hidden="true"></i>
|
||||
</a>
|
||||
<a class="right carousel-control carousel-control-shop carousel-control-frontend" href="#carousel-example-generic" role="button" data-slide="next">
|
||||
<i class="fa fa-angle-right" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section('page-styles')
|
||||
<link rel="stylesheet" href="{{ asset('pages/welcome/css/carousel-slider.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('plugin/animate/animate.min.css') }}">
|
||||
@append
|
||||
|
||||
@section('page-scripts')
|
||||
<script src="{{ asset('pages/welcome/js/bs-carousel.js') }}"></script>
|
||||
@append
|
||||
@@ -0,0 +1,27 @@
|
||||
<!-- BEGIN STEPS -->
|
||||
<div class="row margin-bottom-40 front-steps-wrapper front-steps-count-3">
|
||||
{{-- Dynamically count the steps and choose the appropriate col-md-x --}}
|
||||
<div class="col-md-4 col-sm-4 front-step-col">
|
||||
<div class="front-step front-step1">
|
||||
<h2>Get in Contact</h2>
|
||||
<p>Send us an email, or give us a call and help us understand what your technology challenges are.</p>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 col-sm-4 front-step-col">
|
||||
<div class="front-step front-step2">
|
||||
<h2>We'll build you a custom solution</h2>
|
||||
<p>We'll help you end to end, from getting a domain name, getting online and enable you to interact with your online customers.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 col-sm-4 front-step-col">
|
||||
<div class="front-step front-step3">
|
||||
<h2>You interact with your clients</h2>
|
||||
<p>We'll take out all the complexities so all you need to do is focus on your business.</p>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END STEPS -->
|
||||
@@ -0,0 +1,29 @@
|
||||
<!-- TABS -->
|
||||
<div class="col-md-7 tab-style-1">
|
||||
<ul class="nav nav-tabs">
|
||||
@php($c=0)
|
||||
@foreach ($so->page_tabs as $o)
|
||||
<li @if(! $c++) class="active" @endif><a href="#tab-{{ $c }}" data-toggle="tab">{{ $o['title'] }}</a></li>
|
||||
@endforeach
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
@php($c=0)
|
||||
@foreach ($so->page_tabs as $o)
|
||||
<div class="tab-pane row fade in @if(! $c++) active @endif" id="tab-{{ $c }}">
|
||||
<div class="col-md-3 col-sm-3">
|
||||
<a href="{{ $o['image'] }}" class="fancybox-button" title="{{ $o['title'] }}" data-rel="fancybox-button">
|
||||
<img class="img-responsive" src="{{ $o['image'] }}" alt="">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9 col-sm-9">
|
||||
<p class="margin-bottom-10">{{ $o['text'] }}</p>
|
||||
<p><a class="more" href="javascript:;">Read more <i class="icon-angle-right"></i></a></p>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<!-- END TABS -->
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
<!-- TESTIMONIALS -->
|
||||
<div class="col-md-5 testimonials-v1">
|
||||
<div id="myCarousel" class="carousel slide">
|
||||
<!-- Carousel items -->
|
||||
<div class="carousel-inner">
|
||||
@php($c=0)
|
||||
@foreach($so->testimonials as $o)
|
||||
<div class="item @if(! $c++) active @endif">
|
||||
<blockquote><p>{{ $o['quote'] }}</p></blockquote>
|
||||
<div class="carousel-info">
|
||||
<img class="pull-left" src="{{ $o['photo'] }}" alt="">
|
||||
<div class="pull-left">
|
||||
<span class="testimonials-name">{{ $o['name'] }}</span>
|
||||
<span class="testimonials-post">{{ $o['title'] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<!-- Carousel nav -->
|
||||
<a class="left-btn" href="#myCarousel" data-slide="prev"></a>
|
||||
<a class="right-btn" href="#myCarousel" data-slide="next"></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END TESTIMONIALS -->
|
||||
{{-- @todo move the required javascript here --}}
|
||||
Reference in New Issue
Block a user