@extends('layout.front.master')

@section('content')
<div role="main" class="main">

    {{-- Hero Section (Intro) --}}
    <section class="section bg-primary curved-border position-relative border-0 m-0" style="height: 100vh;" id="intro">
        <div class="appear-animation position-absolute" data-appear-animation="zoomIn" data-appear-animation-delay="1400" style="top: 25%; left: 16%;">
            <img src="{{ asset('cd-project/img/demos/sass/icons/icon-1.png') }}" class="img-fluid" alt="" data-plugin-float-element data-plugin-options="{'startPos': 'none', 'speed': 3, 'transition': true}" />
        </div>
        <div class="appear-animation position-absolute" data-appear-animation="zoomIn" data-appear-animation-delay="2000" style="top: 42%; left: 10%;">
            <img src="{{ asset('cd-project/img/demos/sass/icons/icon-2.png') }}" class="img-fluid" alt="" data-plugin-float-element data-plugin-options="{'startPos': 'none', 'speed': 3.5, 'transition': true, 'horizontal': true}" />
        </div>
        <div class="appear-animation position-absolute" data-appear-animation="zoomIn" data-appear-animation-delay="800" style="top: 60%; left: 20%;">
            <img src="{{ asset('cd-project/img/demos/sass/icons/icon-3.png') }}" class="img-fluid" alt="" data-plugin-float-element data-plugin-options="{'startPos': 'none', 'speed': 2.5, 'transition': true}" />
        </div>
        <div class="appear-animation position-absolute" data-appear-animation="zoomIn" data-appear-animation-delay="1100" style="top: 22%; right: 25%;">
            <img src="{{ asset('cd-project/img/demos/sass/icons/icon-4.png') }}" class="img-fluid" alt="" data-plugin-float-element data-plugin-options="{'startPos': 'none', 'speed': 2, 'transition': true, 'horizontal': true}" />
        </div>
        <div class="appear-animation position-absolute" data-appear-animation="zoomIn" data-appear-animation-delay="1700" style="top: 49%; right: 16%;">
            <img src="{{ asset('cd-project/img/demos/sass/icons/icon-5.png') }}" class="img-fluid" alt="" data-plugin-float-element data-plugin-options="{'startPos': 'none', 'speed': 3, 'transition': true}" />
        </div>
        <div class="appear-animation position-absolute" data-appear-animation="zoomIn" data-appear-animation-delay="2300" style="top: 71%; right: 13%;">
            <img src="{{ asset('cd-project/img/demos/sass/icons/icon-6.png') }}" class="img-fluid" alt="" data-plugin-float-element data-plugin-options="{'startPos': 'none', 'speed': 2.5, 'transition': true, 'horizontal': true}" />
        </div>

        <div class="container pt-5 mt-5">
            <div class="row justify-content-center pt-5 mt-5">
                <div class="col-lg-7 text-center pt-3">
                    <h1 class="text-color-light font-weight-extra-bold text-12 line-height-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">{{ __('The Dashboard to Manage All your Projects') }}</h1>
                    <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="700">
                        <p class="text-color-light opacity-6 text-5 pb-3 mb-4">{{ config('site.name') }} {{ __('is used by several companies to manage their projects.') }}</p>
                    </div>
                    <a href="#trial" class="btn btn-light text-color-dark custom-secondary-font font-weight-bold text-3 px-5 py-3 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="900">{{ __('GET STARTED') }}</a>
                    <a href="#pricing" class="btn btn-dark custom-secondary-font font-weight-bold text-3 px-5 py-3 ms-4 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="900">{{ __('VIEW OUR PLANS') }}</a>
                </div>
            </div>
        </div>

        <div class="custom-animated-circles">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
    </section>

    {{-- Screens Carousel --}}
    <div class="custom-screens-carousel">
        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                    <div class="carousel-ipad">
                        <div class="carousel-ipad-camera"></div>
                        <div class="owl-carousel owl-theme nav-style-1 m-0" data-plugin-options="{'autoHeight': true, 'items': 1, 'margin': 10, 'nav': false, 'dots': false, 'stagePadding': 0, 'animateOut': 'fadeOut', 'autoplay': true, 'autoplayTimeout': 3000}">
                            <div>
                                <img alt="" class="img-fluid rounded-0" src="{{ asset('cd-project/img/demos/sass/screens/screen-1.jpg') }}">
                            </div>
                            <div>
                                <img alt="" class="img-fluid rounded-0" src="{{ asset('cd-project/img/demos/sass/screens/screen-2.jpg') }}">
                            </div>
                            <div>
                                <img alt="" class="img-fluid rounded-0" src="{{ asset('cd-project/img/demos/sass/screens/screen-3.jpg') }}">
                            </div>
                        </div>
                        <div class="carousel-ipad-home"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Intro Text & Client Logos --}}
    <div class="container my-5">
        <div class="row text-center py-5">
            <div class="col px-5">
                <h1 class="word-rotator-title font-weight-bold text-9 mb-3 appear-animation" data-appear-animation="fadeInUpShorter">
                    {{ config('site.name') }} {{ __('is Incredibly Powerful and Easy-to-Use') }}
                </h1>
                <p class="lead px-5 mb-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                    {{ config('site.description', __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum, nulla vel pellentesque consequat, ante nulla hendrerit arcu, ac tincidunt mauris lacus sed leo. vamus suscipit molestie vestibulum.')) }}
                </p>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="divider">
                    <div class="divider-small-text">
                        {{ __('As Seen On') }}
                    </div>
                </div>
            </div>
        </div>
        <div class="row text-center mt-5 pb-3">
            <div class="owl-carousel owl-theme carousel-center-active-item" data-plugin-options="{'responsive': {'0': {'items': 1}, '476': {'items': 1}, '768': {'items': 5}, '992': {'items': 7}, '1200': {'items': 7}}, 'autoplay': true, 'autoplayTimeout': 3000, 'dots': false}">
                @for($i = 1; $i <= 6; $i++)
                    <div>
                        <img class="img-fluid" src="{{ asset('cd-project/img/logos/logo-' . $i . '.png') }}" alt="">
                    </div>
                @endfor
                <div>
                    <img class="img-fluid" src="{{ asset('cd-project/img/logos/logo-4.png') }}" alt="">
                </div>
                <div>
                    <img class="img-fluid" src="{{ asset('cd-project/img/logos/logo-2.png') }}" alt="">
                </div>
            </div>
        </div>
    </div>

    {{-- Features Section 1 --}}
    <section class="section m-0 mt-4 border-0 p-relative" id="features">
        <div class="container">
            <div class="row py-2 align-items-center justify-content-center">
                <div class="col-lg-6 text-center">
                    <img class="img-fluid" src="{{ asset('cd-project/img/demos/sass/features/feature-1.gif') }}" alt="">
                </div>
                <div class="col-lg-6 text-center text-lg-start">
                    <h2 class="text-color-dark font-weight-bold text-6 mb-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">{{ __('Manage any Project is Easy') }}</h2>
                    <p class="lead appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit massa enim. Nullam id varius nunc.') }}</p>
                    <p class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit massa enim. Nullam id varius nunc. Vivamus bibendum magna ex, et faucibus lacus venenatis.') }}</p>
                    <a href="#pricing" class="btn btn-dark custom-secondary-font font-weight-bold text-3 px-5 py-3 mt-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">{{ __('VIEW OUR PLANS') }}</a>
                </div>
            </div>
        </div>

        <div class="custom-animated-circles custom-animated-circles-primary custom-animated-circles-pos-3 d-none d-block-md">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
    </section>

    {{-- Features Section 2 --}}
    <section class="section bg-transparent m-0 border-0">
        <div class="container">
            <div class="row py-2 align-items-center justify-content-center">
                <div class="col-lg-6 text-center text-lg-start">
                    <h2 class="text-color-dark font-weight-bold text-6 mb-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">{{ __('Drag n\' Drop Features') }}</h2>
                    <p class="lead appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit massa enim. Nullam id varius nunc.') }}</p>
                    <p class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit massa enim. Nullam id varius nunc. Vivamus bibendum magna ex, et faucibus lacus venenatis eget.') }}</p>
                    <a href="#pricing" class="btn btn-dark custom-secondary-font font-weight-bold text-3 px-5 py-3 mt-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">{{ __('VIEW OUR PLANS') }}</a>
                </div>
                <div class="col-lg-6 text-center">
                    <img class="img-fluid" src="{{ asset('cd-project/img/demos/sass/features/feature-2.gif') }}" alt="">
                </div>
            </div>
        </div>
    </section>

    {{-- Features Section 3 --}}
    <section class="section m-0 border-0">
        <div class="container">
            <div class="row py-2 align-items-center justify-content-center">
                <div class="col-lg-6 text-center">
                    <img class="img-fluid" src="{{ asset('cd-project/img/demos/sass/features/feature-3.gif') }}" alt="">
                </div>
                <div class="col-lg-6 text-center text-lg-start">
                    <h2 class="text-color-dark font-weight-bold text-6 mb-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">{{ __('Advanced Reporting Features') }}</h2>
                    <p class="lead appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit massa enim.') }}</p>
                    <p class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit massa enim. Nullam id varius nunc.') }}</p>
                    <a href="#pricing" class="btn btn-dark custom-secondary-font font-weight-bold text-3 px-5 py-3 mt-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">{{ __('VIEW OUR PLANS') }}</a>
                </div>
            </div>
        </div>
    </section>

    {{-- Overview Section --}}
    <section class="section bg-dark section-height-3 m-0 border-0" id="overview">
        <div class="container-fluid">
            <div class="row">
                <div class="col text-center">
                    <h2 class="text-color-light font-weight-bold text-7 mb-1">{{ __('Control your Business like a Pro') }}</h2>
                    <p class="lead">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit.') }}</p>
                </div>
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="col-11 py-4">
                <div class="owl-carousel owl-theme stage-margin stage-margin-lg nav-style-2 mb-3 mt-4" data-plugin-options="{'responsive': {'0': {'items': 1}, '479': {'items': 1}, '768': {'items': 2}, '979': {'items': 2}, '1199': {'items': 2}}, 'margin': 50, 'loop': true, 'nav': true, 'dots': false, 'stagePadding': 100, 'autoplay': true, 'autoplayTimeout': 5000}">
                    @for($i = 1; $i <= 6; $i++)
                        <div>
                            <div class="carousel-ipad carousel-ipad-sm">
                                <img alt="" class="img-fluid rounded-0" src="{{ asset('cd-project/img/demos/sass/screens/screen-' . $i . '.jpg') }}">
                            </div>
                        </div>
                    @endfor
                </div>
            </div>
        </div>
    </section>

    {{-- Reviews Section --}}
    @if(is_module_active('references') && ($featuredReferences ?? collect())->count() > 0)
    <section class="section section-height-3 m-0 border-0" id="reviews">
        <div class="container">
            <div class="row py-2">
                <div class="col text-center">
                    <h2 class="text-color-dark font-weight-bold text-7 mb-1">{{ __('User Reviews') }}</h2>
                    <p class="lead">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit massa enim.') }}</p>
                </div>
            </div>
            <div class="row pt-3">
                @foreach(($featuredReferences ?? collect())->take(3) as $index => $reference)
                    <div class="col-md-4 appear-animation" data-appear-animation="{{ $index === 0 ? 'fadeInLeftShorter' : ($index === 1 ? 'fadeIn' : 'fadeInRightShorter') }}" data-appear-animation-delay="{{ $index === 0 ? '500' : ($index === 1 ? '300' : '500') }}">
                        <div class="testimonial {{ $index === 1 ? 'testimonial-primary' : 'testimonial-light' }}">
                            <blockquote class="{{ $index === 1 ? '' : 'blockquote-default' }}">
                                <p class="mb-0 {{ $index === 1 ? '' : 'text-default' }}">{{ $reference->testimonial ?? $reference->description ?? __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula.') }}</p>
                            </blockquote>
                            <div class="testimonial-arrow-down"></div>
                            <div class="testimonial-author">
                                <div class="testimonial-author-thumbnail">
                                    <img src="{{ $reference->photo ? asset($reference->photo) : asset('cd-project/img/clients/client-' . ($index + 1) . '.jpg') }}" class="rounded-circle" alt="{{ $reference->name }}">
                                </div>
                                <p><strong class="font-weight-extra-bold {{ $index === 1 ? '' : 'text-dark' }}">{{ $reference->name }}</strong><span class="{{ $index === 1 ? '' : 'text-default' }}">{{ $reference->position ?? '' }} {{ $reference->company ? ' - ' . $reference->company : '' }}</span></p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    @else
    <section class="section section-height-3 m-0 border-0" id="reviews">
        <div class="container">
            <div class="row py-2">
                <div class="col text-center">
                    <h2 class="text-color-dark font-weight-bold text-7 mb-1">{{ __('User Reviews') }}</h2>
                    <p class="lead">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit massa enim.') }}</p>
                </div>
            </div>
            <div class="row pt-3">
                <div class="col-md-4 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="500">
                    <div class="testimonial testimonial-light">
                        <blockquote class="blockquote-default">
                            <p class="mb-0 text-default">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula.') }}</p>
                        </blockquote>
                        <div class="testimonial-arrow-down"></div>
                        <div class="testimonial-author">
                            <div class="testimonial-author-thumbnail">
                                <img src="{{ asset('cd-project/img/clients/client-1.jpg') }}" class="rounded-circle" alt="">
                            </div>
                            <p><strong class="font-weight-extra-bold text-dark">{{ __('John Smith') }}</strong><span class="text-default">{{ __('CEO & Founder - Okler') }}</span></p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300">
                    <div class="testimonial testimonial-primary">
                        <blockquote>
                            <p class="mb-0">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat.') }}</p>
                        </blockquote>
                        <div class="testimonial-arrow-down"></div>
                        <div class="testimonial-author">
                            <div class="testimonial-author-thumbnail">
                                <img src="{{ asset('cd-project/img/clients/client-2.jpg') }}" class="rounded-circle" alt="">
                            </div>
                            <p><strong class="font-weight-extra-bold">{{ __('Jessica Smith') }}</strong><span>{{ __('CEO & Founder - Okler') }}</span></p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="500">
                    <div class="testimonial testimonial-light">
                        <blockquote class="blockquote-default">
                            <p class="mb-0 text-default">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula.') }}</p>
                        </blockquote>
                        <div class="testimonial-arrow-down"></div>
                        <div class="testimonial-author">
                            <div class="testimonial-author-thumbnail">
                                <img src="{{ asset('cd-project/img/clients/client-3.jpg') }}" class="rounded-circle" alt="">
                            </div>
                            <p><strong class="font-weight-extra-bold text-dark">{{ __('Paul Smith') }}</strong><span class="text-default">{{ __('CEO & Founder - Okler') }}</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif

    {{-- Pricing Section --}}
    <section class="section section-height-3 bg-transparent m-0 border-0" id="pricing">
        <div class="container">
            <div class="row py-2">
                <div class="col text-center">
                    <h2 class="text-color-dark font-weight-bold text-7 mb-1">{{ __('Pricing') }}</h2>
                    <p class="lead">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit massa enim.') }}</p>
                </div>
            </div>

            <div class="pricing-table py-5">
                <div class="col-md-6 col-lg-3">
                    <div class="plan">
                        <div class="plan-header">
                            <h3>{{ __('Enterprise') }}</h3>
                        </div>
                        <div class="plan-price">
                            <span class="price"><span class="price-unit">$</span>59</span>
                            <label class="price-label">{{ __('PER MONTH') }}</label>
                        </div>
                        <div class="plan-features">
                            <ul>
                                <li>10GB {{ __('Disk Space') }}</li>
                                <li>100GB {{ __('Monthly Bandwith') }}</li>
                                <li>20 {{ __('Email Accounts') }}</li>
                                <li>{{ __('Unlimited Subdomains') }}</li>
                            </ul>
                        </div>
                        <div class="plan-footer">
                            <a href="#trial" class="btn btn-dark btn-modern btn-outline py-2 px-4">{{ __('Sign Up') }}</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="plan">
                        <div class="plan-header">
                            <h3>{{ __('Professional') }}</h3>
                        </div>
                        <div class="plan-price">
                            <span class="price"><span class="price-unit">$</span>29</span>
                            <label class="price-label">{{ __('PER MONTH') }}</label>
                        </div>
                        <div class="plan-features">
                            <ul>
                                <li>5GB {{ __('Disk Space') }}</li>
                                <li>50GB {{ __('Monthly Bandwith') }}</li>
                                <li>10 {{ __('Email Accounts') }}</li>
                                <li>{{ __('Unlimited Subdomains') }}</li>
                            </ul>
                        </div>
                        <div class="plan-footer">
                            <a href="#trial" class="btn btn-dark btn-modern btn-outline py-2 px-4">{{ __('Sign Up') }}</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="plan plan-featured">
                        <div class="plan-header bg-primary">
                            <h3>{{ __('Standard') }}</h3>
                        </div>
                        <div class="plan-price">
                            <span class="price"><span class="price-unit">$</span>17</span>
                            <label class="price-label">{{ __('PER MONTH') }}</label>
                        </div>
                        <div class="plan-features">
                            <ul>
                                <li>3GB {{ __('Disk Space') }}</li>
                                <li>25GB {{ __('Monthly Bandwith') }}</li>
                                <li>5 {{ __('Email Accounts') }}</li>
                                <li>{{ __('Unlimited Subdomains') }}</li>
                            </ul>
                        </div>
                        <div class="plan-footer">
                            <a href="#trial" class="btn btn-primary btn-modern py-2 px-4">{{ __('Sign Up') }}</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="plan">
                        <div class="plan-header">
                            <h3>{{ __('Basic') }}</h3>
                        </div>
                        <div class="plan-price">
                            <span class="price"><span class="price-unit">$</span>9</span>
                            <label class="price-label">{{ __('PER MONTH') }}</label>
                        </div>
                        <div class="plan-features">
                            <ul>
                                <li>1GB {{ __('Disk Space') }}</li>
                                <li>10GB {{ __('Monthly Bandwith') }}</li>
                                <li>2 {{ __('Email Accounts') }}</li>
                                <li>{{ __('Unlimited Subdomains') }}</li>
                            </ul>
                        </div>
                        <div class="plan-footer">
                            <a href="#trial" class="btn btn-dark btn-modern btn-outline py-2 px-4">{{ __('Sign Up') }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- FAQs Section --}}
    <section class="section section-height-3 curved-border m-0 border-0" id="faqs">
        <div class="container">
            <div class="row py-2">
                <div class="col text-center">
                    <h2 class="text-color-dark font-weight-bold text-7 mb-1">{{ __('Frequent Asked Questions') }}</h2>
                    <p class="lead">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit massa enim.') }}</p>
                </div>
            </div>
            <div class="row py-3 align-items-center justify-content-center">
                <div class="col-sm-9">
                    @if(is_module_active('faqs'))
                        @php
                            $faqs = \App\Modules\Faqs\Models\Faq::where('is_active', true)->orderBy('order')->limit(7)->get();
                        @endphp
                        @if($faqs->count() > 0)
                            <div class="toggle toggle-minimal toggle-primary" data-plugin-toggle>
                                @foreach($faqs as $index => $faq)
                                    <section class="toggle {{ $index === 0 ? 'active' : '' }}">
                                        <a class="toggle-title">{{ $faq->question }}</a>
                                        <div class="toggle-content">
                                            <p class="pb-3">{!! $faq->answer !!}</p>
                                        </div>
                                    </section>
                                @endforeach
                            </div>
                        @else
                            <div class="toggle toggle-minimal toggle-primary" data-plugin-toggle>
                                <section class="toggle active">
                                    <a class="toggle-title">{{ __('Curabitur eget leo at velit imperdiet vague iaculis vitaes?') }}</a>
                                    <div class="toggle-content">
                                        <p class="pb-3">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia.') }}</p>
                                    </div>
                                </section>
                            </div>
                        @endif
                    @else
                        <div class="toggle toggle-minimal toggle-primary" data-plugin-toggle>
                            <section class="toggle active">
                                <a class="toggle-title">{{ __('Curabitur eget leo at velit imperdiet vague iaculis vitaes?') }}</a>
                                <div class="toggle-content">
                                    <p class="pb-3">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.') }}</p>
                                </div>
                            </section>
                            <section class="toggle">
                                <a class="toggle-title">{{ __('Curabitur eget leo at imperdiet vague iaculis vitaes?') }}</a>
                                <div class="toggle-content">
                                    <p class="pb-3">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus.') }}</p>
                                </div>
                            </section>
                            <section class="toggle">
                                <a class="toggle-title">{{ __('Eget leo at imperdiet vague iaculis vitaes?') }}</a>
                                <div class="toggle-content">
                                    <p class="pb-3">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus.') }}</p>
                                </div>
                            </section>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>

    {{-- Counters Section --}}
    <section class="section section-height-3 bg-transparent m-0 border-0">
        <div class="container">
            <div class="row justify-content-center counters counters-lg pt-2">
                <div class="col-md-3 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="500">
                    <div class="counter counter-with-unit counter-unit-on-top">
                        <strong class="text-color-dark font-weight-extra-bold text-13 text-lg-15" data-to="100">0</strong>
                        <strong class="unit text-color-dark font-weight-bold text-5 text-lg-8">%</strong>
                        <label class="font-weight-normal text-3 text-lg-4 px-5 px-lg-4">{{ __('Percent of happy users using') }} {{ config('site.name') }}</label>
                    </div>
                </div>
                <div class="col-md-4 col-lg-3 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300">
                    <div class="counter counter-with-unit counter-unit-on-top">
                        <strong class="text-color-dark font-weight-extra-bold text-13 text-lg-15" data-to="50">0</strong>
                        <strong class="unit text-color-dark font-weight-bold text-5 text-lg-8">+</strong>
                        <label class="font-weight-normal text-3 text-lg-4 px-5">{{ __('Projects managed with') }} {{ config('site.name') }}</label>
                    </div>
                </div>
                <div class="col-md-3 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="500">
                    <div class="counter counter-with-unit counter-unit-on-top">
                        <strong class="text-color-dark font-weight-extra-bold text-13 text-lg-15" data-to="350">0</strong>
                        <strong class="unit text-color-dark font-weight-bold text-5 text-lg-8">+</strong>
                        <label class="font-weight-normal text-3 text-lg-4 px-5">{{ __('Number of clients around the world') }}</label>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Trial Section --}}
    <section class="section section-height-5 bg-primary curved-border curved-border-top overflow-hidden border-0 m-0" id="trial">
        <div class="custom-animated-circles custom-animated-circles-pos-2">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>

        <img src="{{ asset('cd-project/img/demos/sass/icons/icon-2.png') }}" class="img-fluid position-absolute" alt="" data-plugin-float-element data-plugin-options="{'startPos': 'none', 'speed': 3, 'transition': true}" style="top: 29%; left: 26%;" />
        <img src="{{ asset('cd-project/img/demos/sass/icons/icon-5.png') }}" class="img-fluid position-absolute" alt="" data-plugin-float-element data-plugin-options="{'startPos': 'none', 'speed': 3.5, 'transition': true, 'horizontal': true}" style="top: 36%; left: 80%;" />
        <img src="{{ asset('cd-project/img/demos/sass/icons/icon-6.png') }}" class="img-fluid position-absolute" alt="" data-plugin-float-element data-plugin-options="{'startPos': 'none', 'speed': 2.5, 'transition': true}" style="top: 57%; left: 73%;" />

        <div class="container pb-5 mb-5">
            <div class="row pb-2 mb-4">
                <div class="col text-center">
                    <h2 class="text-color-light font-weight-bold text-10 mb-2">{{ __('Start Free Trial Now - 30 Days') }}</h2>
                    <p class="text-color-light opacity-6 text-4">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit.') }}</p>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <form class="contact-form custom-form-style-1 form-errors-light" action="{{ route('front.contact.store') }}" method="POST">
                        @csrf
                        <div class="contact-form-success alert alert-success d-none mt-4">
                            <strong>{{ __('Success!') }}</strong> {{ __('Your message has been sent to us.') }}
                        </div>

                        <div class="contact-form-error alert alert-danger d-none mt-4">
                            <strong>{{ __('Error!') }}</strong> {{ __('There was an error sending your message.') }}
                            <span class="mail-error-message text-1 d-block"></span>
                        </div>

                        <input type="hidden" name="subject" id="subject" value="{{ __('Contact Form - Start Free Trial') }}" />
                        <div class="row">
                            <div class="form-group col mb-2">
                                <input type="text" value="" data-msg-required="{{ __('Please enter your name.') }}" maxlength="100" class="form-control" name="name" placeholder="{{ __('Name') }}" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-2">
                                <input type="text" value="" data-msg-required="{{ __('Please enter the phone.') }}" maxlength="100" class="form-control" name="phone" id="phone" placeholder="{{ __('Phone') }}" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-5">
                                <input type="email" value="" data-msg-required="{{ __('Please enter your email address.') }}" data-msg-email="{{ __('Please enter a valid email address.') }}" maxlength="100" class="form-control" name="email" placeholder="{{ __('Email') }}" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col text-center">
                                <input type="submit" value="{{ __('GET STARTED') }}" class="btn btn-dark btn-modern custom-secondary-font text-3 px-5 py-3" data-loading-text="{{ __('Loading...') }}">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    {{-- Bottom Cards --}}
    <div class="container">
        <div class="row" style="margin-top: -130px;">
            <div class="col-md-4">
                <a href="#" class="text-decoration-none">
                    <div class="card border-0 border-radius-0 custom-box-shadow-1">
                        <div class="card-body text-center p-5 my-2">
                            <i class="icon-screen-smartphone icons text-color-dark text-11 mb-3 d-block"></i>
                            <h4 class="text-color-primary font-weight-bold text-4 pb-1 mb-2">{{ __('APP AVAILABLE') }}</h4>
                            <p class="mb-0">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit phasellus.') }}</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-4">
                <a href="#" class="text-decoration-none">
                    <div class="card border-0 border-radius-0 custom-box-shadow-1">
                        <div class="card-body text-center p-5 my-2">
                            <i class="icon-magnifier icons text-color-dark text-11 mb-3 d-block"></i>
                            <h4 class="text-color-primary font-weight-bold text-4 pb-1 mb-2">{{ __('KNOWLEDGE BASE') }}</h4>
                            <p class="mb-0">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit phasellus.') }}</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-4">
                <a href="#" class="text-decoration-none">
                    <div class="card border-0 border-radius-0 custom-box-shadow-1">
                        <div class="card-body text-center p-5 my-2">
                            <i class="icon-screen-desktop icons text-color-dark text-11 mb-3 d-block"></i>
                            <h4 class="text-color-primary font-weight-bold text-4 pb-1 mb-2">{{ __('USERS FORUM') }}</h4>
                            <p class="mb-0">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit phasellus.') }}</p>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>

</div>
@endsection