@extends('frontend.layouts.default')
@section('pageTitle', config('meta.home.title'))
@section('pageDescription'){!! config('meta.home.description') !!}
@endsection
@section('pageKeywords'){!! config('meta.home.keywords') !!}
@endsection
@section('plugins-style')
@endsection
@section('page-style')
@endsection
@section('content')
    <section class="bg-dot-pattern">
        <div class="dot-pattern-section"
            style=" background-image: url({{ Vite::asset('resources/assets/images/frontend/bg-pattern/dot-pattern.svg') }});">
            {{-- <img src="{{ Vite::asset('resources/assets/images/frontend/bg-pattern/dot-pattern.svg') }}" alt=""> --}}
        </div>
        <div class="container section-grid">
            <div class="row">
                <div class="col-lg-8">
                    <h2>Contact us</h2>
                    <p class="text-medium-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="row" style="--bs-gutter-x: 80px">
                <div class="col-lg-6">
                    <form action="">
                        <div class="mb-4">
                            <label for="FormControlInputName" class="form-label">Name</label>
                            <input type="email" class="form-control" id="FormControlInputName">
                        </div>
                        <div class="mb-4">
                            <label for="FormControlInputEmail" class="form-label">Email address</label>
                            <input type="email" class="form-control" id="FormControlInputEmail">
                            <div id="FormControlInputEmailHelp" class="form-text text-tiny-normal">We'll never share your
                                email with anyone
                                else.</div>
                        </div>
                        <div class="mb-4">
                            <label for="FormControlInputMessage" class="form-label">Message</label>
                            <textarea class="form-control" id="FormControlInputMessage" rows="3"></textarea>
                        </div>
                        <div class="mb-4 form-check">
                            <input type="checkbox" class="form-check-input" id="FormControlPrivacyCheckbox">
                            <label class="form-check-label" for="FormControlPrivacyCheckbox">I have read and agree to the <a
                                    href="{{ route('frontend.page', ['page' => 'privacy-policy']) }}">Privacy
                                    Policy</a>.</label>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>
                <div class="col-lg-6 mt-5 mt-lg-0">
                    <div class="row">
                        <div class="col-md-6 mb-5">
                            <div class="content-icon icon-medium mb-3">
                                <svg width="24" height="24" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"
                                    fill="currentColor">
                                    <g>
                                        <path
                                            d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4l217.6 163.2c11.4 8.5 27 8.5 38.4 0l217.6-163.2c12.1-9.1 19.2-23.3 19.2-38.4 0-26.5-21.5-48-48-48H48Z" />
                                        <path opacity=".4"
                                            d="M0 112v272c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64V112c0 15.1-7.1 29.3-19.2 38.4L275.2 313.6c-11.4 8.5-27 8.5-38.4 0L19.2 150.4C7.1 141.3 0 127.1 0 112Z" />
                                    </g>
                                </svg>
                            </div>
                            <div class="text-large-bold mb-2">
                                Email
                            </div>
                            <div class="text-regular-normal">
                                <a href="mailto:example@email.com" class="">example@email.com</a>
                            </div>
                        </div>
                        <div class="col-md-6 mb-5">
                            <div class="content-icon icon-medium mb-3">
                                <svg width="24" height="24" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"
                                    fill="currentColor">
                                    <g>
                                        <path
                                            d="M68.4 14.8l-39 10.6C12.1 30.2 0 46 0 64c0 247.4 200.6 448 448 448 18 0 33.8-12.1 38.6-29.5l10.6-39C273.2 416.4 95.6 238.8 68.4 14.8Zm437.3 397.5l4.9-17.8c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L320 349.4c55.4 33.4 118.4 55.4 185.8 62.9ZM162.6 192.1l30.7-25.1c13.7-11.2 18.4-30 11.6-46.3l-40-96c-7.7-18.6-28-28.5-47.4-23.2L99.7 6.3c7.5 67.4 29.5 130.4 62.9 185.8Z" />
                                        <path opacity=".4"
                                            d="M505.7 412.3l-8.5 31.2c-71.8-8.7-138.9-32.9-197.8-69.1l20.5-25c55.4 33.4 118.4 55.4 185.8 62.9Zm-406-406c7.5 67.4 29.5 130.4 62.9 185.8l-25 20.5c-36.2-58.9-60.4-126-69.2-197.8l31.3-8.5Z" />
                                    </g>
                                </svg>
                            </div>
                            <div class="text-large-bold mb-2">
                                Phone
                            </div>
                            <div class="text-regular-normal">
                                <a href="tel:+1(555)000-0000" class="">+1 (555) 000-0000</a>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="content-icon icon-medium mb-3">
                                <svg width="24" height="24" viewBox="-64 0 512 512"
                                    xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                                    <path opacity=".4"
                                        d="M384 192c0 87.4-117 243-168.3 307.2 -12.3 15.3-35.1 15.3-47.4 0C117 435-.001 279.4-.001 192 -.001 86 86 0 192 0c106 0 192 86 192 192Z" />
                                </svg>
                            </div>
                            <div class="text-large-bold mb-2">
                                Office
                            </div>
                            <div class="text-regular-normal">
                                <address>
                                    123 Sample St, Sydney NSW 2000 AU
                                </address>
                            </div>
                            <a class="text-regular-normal icon-link icon-link-hover" href="#">
                                Get Directions
                                <svg width="24" height="24" viewBox="-32 0 512 512"
                                    xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi"
                                    aria-hidden="true">
                                    <path
                                        d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h306.7L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160Z" />
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('plugins-scripts')

@endsection
@section('page-scripts')

@endsection