@extends('layouts.page')

@push('heads')

@endpush

@section('page')
<div class="title-section dark-bg">
    <div class="grid-container grid-x grid-padding-x">
        <div class="small-12 cell">
            <h1>Contact Us</h1>
        </div>
        <div class="small-12 cell">
            <ul class="breadcrumbs">
                <li><a href="{{ url('') }}">Home</a></li>
                <li><span class="show-for-sr">Current: </span> Contact Us</li>
            </ul>
        </div>
    </div>
</div>
<div class="content-section module single-products-page products-page pt-3">
    <div class="grid-container grid-x grid-padding-x">
        <div class="medium-3 small-12 cell contact-sidebar">
            <h4 class="padding-top-zero">Meet Our Dermatologist</h4>
            <p>M 6, Al Sayegh Building Umm Hurair, Oud Metha Road, Dubai, United Arab Emirates</p>
            <h4>Customer Service</h4>
            <p>Tel: (+971) 555 677 556</p>
            <h4>Follow Us</h4>
            <div class="socialicons">
                <a href="https://www.facebook.com/p/Allure-Cosmoderma-UAE-100064151045875/" target="_blank"><i class="fab fa-facebook-f"></i></a>
                <a href="https://www.linkedin.com/company/allure-cosmoderma?originalSubdomain=ae" target="_blank"><i class="fab fa-linkedin"></i></a>
                <a href="https://www.instagram.com/allure_cosmoderma/" target="_blank"><i class="fab fa-instagram"></i></a>
            </div>
        </div>
        <div class="medium-9 small-12 cell">
            <div class="contact-map">
                <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14435.676835184038!2d55.3079321!3d25.239646!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e5f4319e1d47dd3%3A0xd09f70521ee9fc65!2sAllure%20Cosmoderma!5e0!3m2!1sen!2sin!4v1699762325156!5m2!1sen!2sin" height="270" allowfullscreen></iframe>
            </div>
            <div class="contact-form">
                <h3>Fill the form below to contact us</h3>
                <form>
                    <div class="grid-container grid-x grid-padding-x">
                        <div class="medium-6 cell">
                            <input type="text" placeholder="Name">
                        </div>
                        <div class="medium-6 cell">
                            <input type="text" placeholder="Email">
                        </div>
                        <div class="medium-12 cell">
                            <input type="text" placeholder="Website">
                        </div>
                        <div class="medium-12 cell">
                            <textarea placeholder="Your message" rows="6"></textarea>
                            <button class="button primary">Send</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@include('components.footer-appoinment-section')

@endsection

@push('scripts')

@endpush