@extends('layout')

@section('page-title', 'Contact Us')

@section('content')
    <div class="bg-linear-gradient position-absolute top-0 w-100 h-75 z-n1"></div>
    <section class="section">
        <div class="container">
            <div class="row">
                <div class="col-lg-7">
                    <div class="pe-5">
                        <div>
                            <h2 class="heading2 mt-4">Happy to help</h2>
                            <p class="body2 mt-4">
                                I am happy to help! Whether you have a question, need support, or just want to say
                                hello, I am here
                                for you. Feel free to reach out, and I will get back to you as soon as possible. Your
                                feedback and
                                inquiries are important to us, and we strive to provide the best assistance possible.
                                Let’s connect!
                            </p>
                        </div>
                        <div class="d-flex gap-3 mt-4">
                            <a href="#" target="_blank"
                               class="rounded-circle d-flex align-items-center justify-center bg-white p-3 shadow-sm fs-22">
                                <i class="ri ri-facebook-fill"></i>
                            </a>
                            <a href="#" target="_blank"
                               class="rounded-circle d-flex align-items-center justify-center bg-white p-3 shadow-sm fs-22">
                                <i class="ri ri-linkedin-fill"></i>
                            </a>
                            <a href="#" target="_blank"
                               class="rounded-circle d-flex align-items-center justify-center bg-white p-3 shadow-sm fs-22">
                                <i class="ri ri-twitter-x-fill"></i>
                            </a>
                            <a href="#" target="_blank"
                               class="rounded-circle d-flex align-items-center justify-center bg-white p-3 shadow-sm fs-22">
                                <i class="ri ri-github-fill"></i>
                            </a>
                        </div>
                        <div class="mt-4">
                            <div class="d-flex align-items-center gap-3">
                                <div
                                    class="rounded-circle d-flex align-items-center justify-center bg-primary p-3 shadow-sm fs-22 text-white">
                                    <i class="ri ri-mail-line"></i>
                                </div>
                                <div class="ps-3 border-start border-dark-subtle">
                                    <a href="mailto:hi@iambishal.com" target="_blank">
                                    hi@iambishal.com</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="rounded-3 p-4 bg-white shadow-sm">
                        @include('contact.form')
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection