@extends('layouts.'.env('THEME'))

@section('style')

<!-- TrustBox script -->
<script src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
<!-- End TrustBox script -->

<style>
    <x-lead_form.lead_form_style />
    <x-vidanimation_style />
</style>

@endsection

@section('content')

@php
$offer_start = \Carbon\Carbon::create(2024, 6, 1, 0);
$offer_end = \Carbon\Carbon::create(2024, 7, 31, 23);
@endphp

@if(\Carbon\Carbon::now()->between($offer_start, $offer_end))
<div class="container-fluid light-bg m-0 p-0" style="overflow: hidden;">
    <div class="container" style="border-radius: 5px; padding: 0 25px;">

        <div class="row mt-4 mb-3 align-items-center">
            <div class="col-lg-6 col-12 text-center">
                <a href="/champion_dashboard/referrals"><img src="{{URL::asset('uploads/brand/refer-friend.png')}}" alt="Refer a friend" style="width: 80%;"></a>
            </div>
            <div class="col-lg-6 col-12">
                <div class="pt-4 d-block d-lg-none"></div>
                <a href="/champion_dashboard/referrals"><img src="{{URL::asset('uploads/brand/12monthsfree.png')}}" alt="Refer a friend" style="width: 80%;"></a>
                <br /><br />
                <div class="section-title">Call us on <a href="tel:{{env('SALES_TEL')}}">{{env('SALES_TEL')}}</a> or use <a href="/champion_dashboard/referrals">tracked referral links.</a></div>
            </div>
        </div>
    </div>
</div>
@endif

<div class='vidContain'>
    <div class='vid'>
        <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" class="head-video" id="head-video" style="float: right;">
            <source src="{{URL::asset('vid/head-video.mp4')}}" type="video/mp4">
        </video>
    </div>
    <div class='head-video-overlay'>
        <div class="container pt-5">
            <div class="row d-none d-lg-block">
                <div class="col-12">
                    <h1>ULTRAFAST BROADBAND</h1>
                    <p class="h" style="font-size: 1.5rem; max-width: 340px;">Connecting you to the fastest internet speeds in the UK</p>
                </div>
            </div>
            <div class="row d-block d-lg-none">
                <div class="col-12 text-center">
                    <h1>ULTRAFAST BROADBAND</h1>
                    <p class="h" style="font-size: 1.5rem; max-width: 340px; display: inline-block;">Connecting you to the fastest internet speeds in the UK</p>
                </div>
            </div>
            <div class="row">
                <div class="col-0 col-lg-6"></div>
                <div class="col-12 col-lg-6" style="padding: 0;">
                    <canvas id="homeanimation-canvas" class="homeanimation-canvas"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid py-2" style="background: #c7c7c7; margin-top: -6px; font-size: 0.8rem;">
    @if(!empty($gbvoucher_article_link))
    <a href="{{$gbvoucher_article_link}}">
    @endif
    <div class="container" style="background: #c7c7c7; color: #454545;">
        <div class="row" style="display: flex;">
            <div class="col-2 my-auto text-right">
                <img src="{{URL::asset('img/dcms-crest.png')}}" alt="BDUK" style="width: 50px;">
            </div>
            <div class="col-10 my-auto">
                {{ env('LEGAL_NAME') }} is a registed supplier with the BDUK. We work with communities to enable government grants for gigabit connectivity.
            </div>
        </div>
    </div>
    @if(!empty($gbvoucher_article_link))
    </a>
    @endif
</div>

<div class="container-fluid darken m-0 p-0 top-feature" style="overflow: hidden;">
    <div class="row">
        <div class="col-12 text-center" style="margin-top: 10px;">
            <h1 class="mt-3 px-2" style="color: var(--dark-color); display: inline-block; margin-top: 0px;">
                It&rsquo;s possible for everyone
            </h1>
            <div class="row justify-content-center">
                <div class="col-lg-4 col-md-6 col-sm-7 col-10">
                <h2 style="font-size: 1.5rem; font-weight: normal; color: var(--dark-color);">
                    to access the fastest internet speeds the UK has to offer.
                </h2>
                </div>
            </div>
        </div>
    </div>
    <div class="row pb-5 mb-5" style="margin: 2rem 0 5rem 0;">
        <div class="col-lg-4 col-md-3 col-sm-2 col-1"></div>
        <div class="col-lg-4 col-md-6 col-sm-8 col-10 pb-3 text-center">

            <h2 style="font-size: 1.1rem; font-weight: normal; color: var(--dark-color);">
                For pricing and availability in your area.
            </h2>

            {!! Form::open([
                'url' => 'pricing',
                'method' => 'get',
                'id' => 'postcode_submit']) !!}
            {!! Form::hidden('referrer', $lead_form_referrer) !!}

            <div class="input-group">
                <input type="text" class="form-control hinput" name="postcode"
                    id="postcode_check" placeholder="Enter your post code" maxlength="12">
                <div class="input-group-append">
                    <button class="btn btn-primary" type="submit">
                        <i class="fas fa-chevron-circle-right"></i>
                    </button>
                </div>
            </div>

            {!! Form::close() !!}

            <!-- TrustBox widget - Micro Review Count -->
            <div class="trustpilot-widget mt-3" data-locale="en-GB" data-template-id="5419b6a8b0d04a076446a9ad" data-businessunit-id="62594f29f06631e784b927a8" data-style-height="24px" data-style-width="100%" data-theme="light" data-min-review-count="2" data-style-alignment="center">
            <a href="https://uk.trustpilot.com/review/{{env('APP_DOMAIN')}}" target="_blank" rel="noopener">Trustpilot</a>
            </div>
            <!-- End TrustBox widget -->


        </div>
        <div class="col-lg-4 col-md-3 col-sm-2 col-1"></div>
    </div>

</div>

<div class="container" style="border-radius: 5px; padding: 0 25px;">
	<div class="row" style="margin-top: -80px;">
        <x-lead_form.lead_form :referrer="$lead_form_referrer" />
	</div>
</div>

<x-full_fibre />

<div class="container-fluid news-section m-0 p-0" style="overflow: hidden;">
    <div class="container" style="border-radius: 5px; padding: 0 25px;">

        <div class="row mt-4 mb-3 align-items-center">
            <div class="col-lg-6 col-12 text-center">
                <a href="/news" style="color: #fff;">
                    <div class="section-title">Latest news</div>
                    view all &gt;
                </a>
            </div>
            <div class="col-lg-6 col-12">
                <div class="pt-4 d-block d-lg-none"></div>

                @if(!empty($latest_article))
                <div class="card">
                    <div class="card-img" style="background-image: url('/uploads/articles/{!!$latest_article->getImage()!!}');"></div>
                    <div class="card-body">
                        <h5 class="card-title" style="color: #000;">{!! \Illuminate\Support\Str::limit($latest_article->title, 68, $end='&hellip;')
                        !!}</h5>
                        <a href="/articles/{{urlencode($latest_article->title)}}">
                            Read &gt;
                        </a>
                    </div>
                </div>
                @endif

            </div>
        </div>
    </div>
</div>

<div class="container" style="background: #fff; border-radius: 5px; padding: 0 25px;">
    <div class="row mt-4 mb-3 align-items-center">
        <div class="col-md-6 col-12">
            <div class="pt-2 d-block d-md-none"></div>
            <div class="section-title">You deserve better</div>
            <p>Your family&rsquo;s internet connection is an essential utility, like water or electricity. It&rsquo;s importance in work and social lives is becoming more demanding every day. The availability for both fast and reliable internet is essential for all regardless of where we live or do business.</p>
            <p>Your home or business could be eligible to <strong>claim £1,500 / £3,500 to fund your internet upgrade.</strong>
            @if(!empty($gbvoucher_article_link))
             <a href="{{$gbvoucher_article_link}}">Read more by clicking here.</a>
             @endif
             </p>
        </div>
        <div class="col-md-6 col-12 text-center">
            <img src="{{URL::asset('uploads/brand/family.png')}}" alt="Connect family with video calls" style="width: 100%;">
        </div>
    </div>

    <div class="row mt-4 mb-3 align-items-center">
        <div class="col-md-6 col-12 text-center">
            <img src="{{URL::asset('uploads/brand/media-player.jpg')}}" alt="Bristol and surrounding areas" style="width: 100%;">
        </div>
        <div class="col-md-6 col-12">
            <div class="pt-4 d-block d-md-none"></div>
            <div class="section-title">Fibre optic internet provider</div>
            <p>{{ config('app.name') }} can help organise and deploy upgraded internet infrastructure for entire communities. We focus on bringing high speed internet to the people that have been left behind. <a href="/signup?referrer=ryi-link">Get connected by clicking here.</a></p>
        </div>
    </div>

    <div class="row mt-4 mb-3 border-box align-items-center">
        <div class="col-md-2 col-12 text-center">
            <i class="fas fa-home primary my-auto" style="font-size: 3rem;"></i>
            <div class="w-100 my-3 d-block d-md-none"></div>
        </div>
        <div class="col-md-10 col-12">
            <p><strong>Increase home value.</strong> The internet is now an essential utility like water or electricity. We install fibre cables from source all the way to your home unlike other providers that may use outdated copper wires. Connecting your home to the UK&rsquo;s fastest internet speeds can add to it&rsquo;s desirability and value.</p>
        </div>
    </div>

    <div class="row mt-4 mb-3 border-box align-items-center">
        <div class="col-md-2 col-12 text-center">
            <i class="fas fa-laptop primary my-auto" style="font-size: 3rem;"></i>
            <div class="w-100 my-3 d-block d-md-none"></div>
        </div>
        <div class="col-md-10 col-12">
            <p><strong>Work hard.</strong> Enjoy ultra stable video conferencing and voice over IP (voip). Download and upload huge files with the click of a button</p>
        </div>
    </div>

    <div class="row mt-4 mb-3 border-box align-items-center">
        <div class="col-md-2 col-12 text-center">
            <i class="fas fa-gamepad primary my-auto" style="font-size: 3rem;"></i>
            <div class="w-100 my-3 d-block d-md-none"></div>
        </div>
        <div class="col-md-10 col-12">
            <p><strong>Play hard.</strong> Become the best gamer you can be with HyperFast internet speeds at your fingertips! Our routers allow you to control your NAT settings for seamless matchmaking.</p>
        </div>
    </div>

    <x-section_heading title="Ask us anything" subtitle="We're here for you." rowclass="mt-5"/>
     <x-contact />

</div>
@endsection

@section('script')
<x-lead_form.lead_form_script :share_link_q="$share_link_q" />

<script>
$(document).ready(function() {
    $('.vidContain').css('background', 'none');
});
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
<script src="{{ asset('js/pixi-init.js') }}" defer></script>
<script src="{{ asset('js/pixi-animations.js') }}" defer></script>
<script src="{{ asset('js/pixi-homeanimation.js') }}" defer></script>
<script src="{{ asset('js/easing_functions.js') }}" defer></script>

@endsection