@extends('layouts.master')

@section('styles')

@endsection

@section('content')

                    <div class="content relative">
                        
                        <div class="flex relative before:bg-primary/80 before:absolute before:w-full before:h-full">
                            <img src="{{asset('build/assets/img/png-images/14.jpg')}}" alt="" class="h-[400px] w-full rounded-sm" id="profile-img2">
                        </div>
                        <div class="absolute top-12 md:top-16 lg:top-28 inset-x-1/4 text-center space-y-3">
                            <div class="text-white space-y-3">
                            <p class="text-xl text-white/70">Contact us</p>
                            <h1 class="text-4xl sm:text-5xl font-bold ">How Can We Help Us .....!</h1>
                            <p class="text-sm text-white/50">Have any questions ? We would love to hear from you.</p>
                            <a href="javascript:void(0);"
                                class="ti-btn ti-btn-secondary">
                                <i class="ri-phone-line"></i> Call Us
                            </a>
                            </div>
                        </div>

                        <!-- Start::main-content -->
                        <div class="main-content -mt-12">
                            <!-- Start::Container -->
                            <div class="container mx-auto relative mb-10">

                            <!-- Start::row-1 -->
                            <div class="grid grid-cols-12 gap-x-6">
                                <div class="col-span-12 xl:col-span-4">
                                <div class="box">
                                    <div class="box-body">
                                    <div class="space-x-3 flex rtl:space-x-reverse">
                                        <div
                                        class="bg-primary/20 dark:bg-primary/20 text-primary dark:text-primary p-3 rounded-full leading-none text-center avatar">
                                        <i class="ri-smartphone-line text-2xl leading-none"></i>
                                        </div>
                                        <div>
                                        <h5 class="font-semibold text-base">Phone number</h5>
                                        <p class="text-gray-500 dark:text-white/70"> + 01 234 567 88</p>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                </div>
                                <div class="col-span-12 xl:col-span-4">
                                <div class="box">
                                    <div class="box-body">
                                    <div class="space-x-3 flex rtl:space-x-reverse">
                                        <div
                                        class="bg-primary/20 dark:bg-primary/20 text-primary dark:text-primary p-3 rounded-full leading-none text-center avatar">
                                        <i class="ri-mail-line text-2xl leading-none"></i>
                                        </div>
                                        <div>
                                        <h5 class="font-semibold text-base">Email Address</h5>
                                        <p class="text-gray-500 dark:text-white/70"> info12323@example.com</p>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                </div>
                                <div class="col-span-12 xl:col-span-4">
                                <div class="box">
                                    <div class="box-body">
                                    <div class="space-x-3 flex rtl:space-x-reverse">
                                        <div
                                        class="bg-primary/20 dark:bg-primary/20 text-primary dark:text-primary p-3 rounded-full leading-none text-center avatar">
                                        <i class="ri-map-pin-line text-2xl leading-none"></i>
                                        </div>
                                        <div>
                                        <h5 class="font-semibold text-base">Address</h5>
                                        <p class="text-gray-500 dark:text-white/70"> New York, NY 10012, US-52014</p>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                </div>
                            </div>
                            <!-- End::row-1 -->

                            <!-- Start::row-2 -->
                            <div class="xl:grid xl:grid-cols-2 xl:gap-x-6">
                                <div class="box">
                                <div class="box-body">
                                    <iframe title="" class="rounded-sm w-full"
                                    src="https://www.google.com/maps/embed?pb=!1m26!1m12!1m3!1d30444.274596168965!2d78.54114692513858!3d17.48198883339408!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m11!3e6!4m3!3m2!1d17.4886524!2d78.5495041!4m5!1s0x3bcb9c7ec139a15d%3A0x326d1c90786b2ab6!2sspruko%20technologies!3m2!1d17.474805099999998!2d78.570258!5e0!3m2!1sen!2sin!4v1670225507254!5m2!1sen!2sin"
                                    height="420" style="border:0;" allowfullscreen="" loading="lazy"
                                    referrerpolicy="no-referrer-when-downgrade"></iframe>
                                </div>
                                </div>
                                <div class="box">
                                <div class="box-body">
                                    <div class="my-auto text-center">
                                    <h2 class="mb-2 font-semibold text-2xl leading-none text-start">Contact Form</h2>
                                    <p class="text-gray-500 dark:text-white/70 text-start">Ask us everything and we would love to hear
                                        from you</p>
                                    <div class="mt-5">
                                        <div class="space-y-4 text-start">
                                        <div class="grid sm:grid-cols-12 gap-x-6">
                                            <label class="col-span-3 my-auto ti-form-label whitespace-nowrap mb-1">Full Name:</label>
                                            <input type="text" class="col-span-9 ti-form-input" placeholder="Enter Full Name">
                                        </div>
                                        <div class="grid sm:grid-cols-12 gap-x-6">
                                            <label class="col-span-3 my-auto ti-form-label whitespace-nowrap mb-1">Email ID:</label>
                                            <input type="email" class="col-span-9 ti-form-input" placeholder="Enter Email Id">
                                        </div>
                                        <div class="grid sm:grid-cols-12 gap-x-6">
                                            <label class="col-span-3 my-auto ti-form-label whitespace-nowrap mb-1">Phone No:</label>
                                            <input type="number" class="col-span-9 ti-form-input" placeholder="Enter Phone No">
                                        </div>
                                        <div class="grid sm:grid-cols-12 gap-x-6">
                                            <label class="col-span-3 my-auto ti-form-label whitespace-nowrap mb-1">Message:</label>
                                            <textarea class="col-span-9 ti-form-input" rows="4" placeholder="Enter Your Messaage"></textarea>
                                        </div>
                                        <div class="grid sm:grid-cols-12 gap-x-6">
                                            <div class="col-span-3"></div>
                                            <div class="col-span-9">
                                            <a class="ti-btn ti-btn-primary mb-0" href="javascript:void(0);">Send Message</a>
                                            </div>
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                </div>
                            </div>
                            <!-- End::row-2 -->

                            </div>

                            <!-- End::Container -->
                        </div>
                        <!-- Start::main-content -->

                    </div>

@endsection

@section('scripts')

@endsection