{% extends 'layouts/base.html' %}
{% load static %}

{% block content %}
    <main>

        {% include 'includes/pre-loader.html' %}

        <!-- Hero -->
        <section class="section section-header pb-11 bg-primary text-white">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12 col-xl-8 text-center">
                        <h1 class="display-2 mb-3">Get in touch today</h1>
                        <p class="lead">Have a new project in mind? Drop us a line about your project needs, we answer same day.</p>        
                    </div>
                </div>
            </div>
        </section>
        <!-- Section -->
        <div class="section py-0">
            <div class="container mt-n10">
                <div class="row">
                    <div class="col-12">
                        <iframe class="map rounded" id="gmap_canvas" src="https://maps.google.com/maps?q=san%20francisco&t=&z=8&ie=UTF8&iwloc=&output=embed"></iframe>
                    </div>
                </div>
            </div>
        </div>
        <!-- Section -->
        <section class="section section-lg pt-6">
            <div class="container">
                <div class="row justify-content-center mb-5 mb-lg-6">
                    <div class="col-12 col-lg-8">
                        <!-- Contact Card -->
                        <div class="card border-0 p-2 p-md-3 p-lg-5">
                            <div class="card-header bg-white border-0 text-center">
                                <h2>Want to work with us?</h2>
                                <p>Cool! Let’s talk about your project</p>
                            </div>
                            <div class="card-body px-0 pt-0">
                                <form action="#">
                                    <!-- Form -->
                                    <div class="mb-4">
                                        <label for="name">Your Name</label>
                                        <div class="input-group">
                                            <span class="input-group-text" id="basic-addon3"><span class="fas fa-user-circle"></span></span>
                                            <input type="text" class="form-control" placeholder="e.g. Bonnie Green" id="name" required>
                                        </div>
                                    </div>
                                    <!-- End of Form -->
                                    <!-- Form -->
                                    <div class="mb-4">
                                        <label for="email">Your Email</label>
                                        <div class="input-group">
                                            <span class="input-group-text" id="basic-addon4"><span class="fas fa-envelope"></span></span>
                                            <input type="email" class="form-control" placeholder="example@company.com" id="email" required>
                                        </div>
                                    </div>
                                    <!-- End of Form -->
                                    <div class="mb-4">
                                        <label for="message">Your Message</label>
                                        <textarea placeholder="Your message" class="form-control" id="message" rows="4" required></textarea>
                                    </div>
                                    <!-- End of Form -->
                                    <div class="d-grid">
                                        <button type="submit" class="btn rounded btn-secondary">Send message</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- End of Contact Card -->
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 text-center mb-5">
                        <h2>Our support team</h2>
                    </div>
                    <div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0">
                        <div class="card border-0 text-center">
                            <div class="card-header border-0 bg-white">
                                <img src="{% static 'assets/img/team/profile-picture-2.jpg' %}" class="card-img-top rounded shadow border-0" alt="Christopher Avatar">
                            </div>
                            <div class="card-body">
                                <span class="card-subtitle text-gray fw-normal">Sales</span>
                                <h3 class="h4 card-title mt-2">Christopher Wood</h3>
                                <ul class="list-unstyled d-flex justify-content-center mt-3">
                                    <li>
                                        <a href="#" target="_blank" aria-label="facebook social link" class="icon icon-sm icon-facebook me-3">
                                            <span class="fab fa-facebook-f"></span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" aria-label="twitter social link" class="icon icon-sm icon-twitter me-3">
                                            <span class="fab fa-twitter"></span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" aria-label="slack social link" class="icon icon-sm icon-slack me-3">
                                            <span class="fab fa-slack-hash"></span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-sm icon-dribbble me-3">
                                            <span class="fab fa-dribbble"></span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0">
                        <div class="card border-0 text-center">
                            <div class="card-header border-0 bg-white">
                                <img src="{% static 'assets/img/team/profile-picture-3.jpg' %}" class="card-img-top rounded shadow border-0" alt="Bonnie Avatar">
                            </div>
                            <div class="card-body">
                                <span class="card-subtitle text-gray fw-normal">Marketing</span>
                                <h3 class="h4 card-title mt-2">Bonnie Green</h3>
                                <ul class="list-unstyled d-flex justify-content-center mt-3">
                                    <li>
                                        <a href="#" target="_blank" aria-label="facebook social link" class="icon icon-sm icon-facebook me-3">
                                            <span class="fab fa-facebook-f"></span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" aria-label="twitter social link" class="icon icon-sm icon-twitter me-3">
                                            <span class="fab fa-twitter"></span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" aria-label="slack social link" class="icon icon-sm icon-slack me-3">
                                            <span class="fab fa-slack-hash"></span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-sm icon-dribbble me-3">
                                            <span class="fab fa-dribbble"></span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="card border-0 text-center">
                            <div class="card-header border-0 bg-white">
                                <img src="{% static 'assets/img/team/profile-picture-4.jpg' %}" class="card-img-top rounded shadow border-0" alt="Neil Avatar">
                            </div>
                            <div class="card-body">
                                <span class="card-subtitle text-gray fw-normal">Invoice</span>
                                <h3 class="h4 card-title mt-2">Neil Sims</h3>
                                <ul class="list-unstyled d-flex justify-content-center mt-3">
                                    <li>
                                        <a href="#" target="_blank" aria-label="facebook social link" class="icon icon-sm icon-facebook me-3">
                                            <span class="fab fa-facebook-f"></span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" aria-label="twitter social link" class="icon icon-sm icon-twitter me-3">
                                            <span class="fab fa-twitter"></span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" aria-label="slack social link" class="icon icon-sm icon-slack me-3">
                                            <span class="fab fa-slack-hash"></span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-sm icon-dribbble me-3">
                                            <span class="fab fa-dribbble"></span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End of section -->
    </main>

    {% endblock content %}
