@extends('layout.front.master')

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

    {{-- Hero Section --}}
    <section class="section bg-primary curved-border position-relative border-0 m-0" style="min-height: 60vh;">
        <div class="container pt-5 mt-5">
            <div class="row justify-content-center pt-5 mt-5">
                <div class="col-lg-8 text-center pt-3">
                    <h1 class="text-color-light font-weight-extra-bold text-10 line-height-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">{{ __('About Us') }}</h1>
                    <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="700">
                        <p class="text-color-light opacity-6 text-4 pb-3 mb-4">{{ __('Learn more about') }} {{ config('site.name') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- About Content --}}
    <section class="section m-0 border-0">
        <div class="container py-5">
            <div class="row py-5">
                <div class="col-lg-6">
                    <h2 class="text-color-dark font-weight-bold text-7 mb-3">{{ __('Who We Are') }}</h2>
                    <p class="lead">{{ 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.')) }}</p>
                    <p>{{ __('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>
                </div>
                <div class="col-lg-6">
                    <img class="img-fluid" src="{{ asset('cd-project/img/demos/sass/features/feature-1.gif') }}" alt="{{ __('About Us') }}">
                </div>
            </div>
        </div>
    </section>

    {{-- Features Grid --}}
    <section class="section bg-light m-0 border-0">
        <div class="container py-5">
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="card border-0 border-radius-0 custom-box-shadow-1">
                        <div class="card-body text-center p-5">
                            <i class="icon-screen-smartphone icons text-color-primary text-11 mb-3 d-block"></i>
                            <h4 class="text-color-dark font-weight-bold text-4 pb-1 mb-2">{{ __('Mobile First') }}</h4>
                            <p class="mb-0">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit phasellus.') }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card border-0 border-radius-0 custom-box-shadow-1">
                        <div class="card-body text-center p-5">
                            <i class="icon-magnifier icons text-color-primary text-11 mb-3 d-block"></i>
                            <h4 class="text-color-dark font-weight-bold text-4 pb-1 mb-2">{{ __('Easy to Use') }}</h4>
                            <p class="mb-0">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit phasellus.') }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card border-0 border-radius-0 custom-box-shadow-1">
                        <div class="card-body text-center p-5">
                            <i class="icon-screen-desktop icons text-color-primary text-11 mb-3 d-block"></i>
                            <h4 class="text-color-dark font-weight-bold text-4 pb-1 mb-2">{{ __('Powerful') }}</h4>
                            <p class="mb-0">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit phasellus.') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Counters --}}
    <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">{{ __('Satisfaction Rate') }}</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') }}</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">{{ __('Happy Clients') }}</label>
                    </div>
                </div>
            </div>
        </div>
    </section>

</div>
@endsection