index.twig

{% extends "_layouts/generic-page-layout.twig" %}
{% import "_macros/messages" as messages %}
{% block headLinks %}
    <link rel="amphtml" href="{{ siteUrl('/amp') }}">
{% endblock headLinks %}

{% block content %}
    <div class="bg-white py-16 px-4 overflow-hidden sm:px-6 lg:px-8 lg:py-24">
        <div class="relative max-w-xl mx-auto">
            <div class="text-center">
                <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                    Tell Us About Your Project
                </h2>
                <p class="mt-4 text-lg leading-6 text-gray-500">
                    Sharing some preliminary information about your project will help us prepare for a follow-up conversation. No obligation.
                </p>
            </div>
            <div class="mt-12">
                <form action="#" method="post" class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8" id="formHandler">
                    <div>
                        <div class="flex justify-between">
                            <label for="firstName" class="block text-sm font-medium text-gray-900">First name *</label>
                            <span id="firstName-required" class="text-xs text-gray-500">Required</span>
                        </div>
                        <div class="tw-mt-1">
                            <input type="text" name="firstName" id="firstName" autocomplete="given-name" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-500 rounded-md" required>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between">
                            <label for="lastName" class="block text-sm font-medium text-gray-900">Last name *</label>
                            <span id="lastName-required" class="text-xs text-gray-500">Required</span>
                        </div>
                        <div class="tw-mt-1">
                            <input type="text" name="lastName" id="lastName" autocomplete="lastName" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-500 rounded-md" required>
                        </div>
                    </div>
                    <div class="sm:col-span-2">
                        <label for="company" class="block text-sm font-medium text-gray-900">Company</label>
                        <div class="mt-1">
                            <input type="text" name="company" id="company" autocomplete="organization" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-500 rounded-md">
                        </div>
                    </div>
                    <div class="sm:col-span-2">
                        <div class="flex justify-between">
                            <label for="email" class="block text-sm font-medium text-gray-900">Email</label>
                            <span class="text-xs text-gray-500" id="email-optional">Required</span>
                        </div>
                        <div class="tw-mt-1">
                            <input id="email" name="email" type="email" autocomplete="email" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-500 rounded-md" required v-model="fields.email">
                        </div>
                    </div>
                    <div class="sm:col-span-2">
                        <label for="phoneNumber" class="block text-sm font-medium text-gray-900">Phone Number</label>
                        <div class="mt-1 relative rounded-md shadow-sm">
                            <input type="text" name="phoneNumber" id="phoneNumber" autocomplete="tel" class="py-3 px-4 block w-full focus:ring-indigo-500 focus:border-indigo-500 border-gray-500 rounded-md">
                        </div>
                    </div>
                    <div class="sm:col-span-2">
                        <label for="message" class="block text-sm font-medium text-gray-900">Message</label>
                        <div class="mt-1 mb-2">
                            <textarea id="message" name="message" rows="4" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border border-gray-500 rounded-md"></textarea>
                        </div>
                    </div>
                    <div class="sm:col-span-2">
                        <button type="submit" class="disabled:opacity-50 w-full inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-black hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:bg-black">
{#                            <span>#}
{#                                <svg id="processingIndicator" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">#}
{#                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>#}
{#                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>#}
{#                                </svg>#}
{#                            </span>#}
                            Let's talk
                        </button>
                    </div>
{#                    <div id="successAlert" class="transition-opacity duration-500 ease-in-out sm:col-span-2">#}
{#                        {{ messages.success("We received your project submission! We'll follow up in less than a day.") }}#}
{#                    </div>#}
{#                    <div id="errorAlert" class="transition-opacity sm:col-span-2">#}
{#                        {{ messages.error("There was an issue submitting your request. Please contact us: support@craftquest.io") }}#}
{#                    </div>#}
                </form>
            </div>
        </div>
    </div>

{% endblock %}

{% block subcontent %}
{% endblock %}

{% block bodyJs %}
    {{ parent() }}
    <script>
        window.graphqlToken = "{{ getenv('GQL_CONTACT_FORM_TOKEN') }}"
        window.graphqlEndpoint = "{{ getenv('GRAPHQL_ENDPOINT') }}"
    </script>
{% endblock bodyJs %}