312 lines
11 KiB
Twig
312 lines
11 KiB
Twig
{% extends 'base.html.twig' %}
|
||
{% block metadata %}
|
||
{# ============================
|
||
METADATA / SEO
|
||
============================ #}
|
||
|
||
{% set meta_title = meta_title is defined
|
||
? meta_title
|
||
: 'Contact – Spectacles vivants et artisanat pour collectivités'
|
||
%}
|
||
{% set meta_description = meta_description is defined
|
||
? meta_description
|
||
: 'Contactez-nous pour vos projets de spectacles vivants et de créations artisanales destinés aux collectivités, écoles et lieux culturels.'
|
||
%}
|
||
{% set meta_image = meta_image is defined
|
||
? meta_image
|
||
: asset('images/logo.jpg')
|
||
%}
|
||
{% set meta_url = meta_url is defined ? meta_url : app.request.uri %}
|
||
{% set meta_site_name = meta_site_name is defined
|
||
? meta_site_name
|
||
: 'Nom du site'
|
||
%}
|
||
{% set meta_type = meta_type is defined ? meta_type : 'website' %}
|
||
|
||
<title>
|
||
{{ meta_title }}
|
||
</title>
|
||
|
||
<meta name="description" content="{{ meta_description }}" />
|
||
<meta name="robots" content="index, follow" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<meta charset="utf-8" />
|
||
|
||
<link rel="canonical" href="{{ meta_url }}" />
|
||
|
||
{# ============================
|
||
OPEN GRAPH (Facebook, LinkedIn…)
|
||
============================ #}
|
||
|
||
<meta property="og:title" content="{{ meta_title }}" />
|
||
<meta property="og:description" content="{{ meta_description }}" />
|
||
<meta property="og:type" content="{{ meta_type }}" />
|
||
<meta property="og:url" content="{{ meta_url }}" />
|
||
<meta property="og:image" content="{{ meta_image }}" />
|
||
<meta property="og:site_name" content="{{ meta_site_name }}" />
|
||
<meta property="og:locale" content="fr_FR" />
|
||
|
||
{# Optionnel mais recommandé #}
|
||
<meta property="og:image:width" content="1200" />
|
||
<meta property="og:image:height" content="630" />
|
||
|
||
{# ============================
|
||
TWITTER CARDS
|
||
============================ #}
|
||
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta name="twitter:title" content="{{ meta_title }}" />
|
||
<meta name="twitter:description" content="{{ meta_description }}" />
|
||
<meta name="twitter:image" content="{{ meta_image }}" />
|
||
{% endblock %}
|
||
{% block body %}
|
||
<div class="isolate bg-white px-6 py-24 sm:py-32 lg:px-8">
|
||
<div
|
||
aria-hidden="true"
|
||
class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
|
||
>
|
||
<div
|
||
style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"
|
||
class="relative left-1/2 -z-10 aspect-1155/678 w-144.5 max-w-none -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#ff80b5] to-[#F59E0B] opacity-30 sm:left-[calc(50%-40rem)] sm:w-288.75"
|
||
></div>
|
||
</div>
|
||
<div class="mx-auto max-w-2xl text-center">
|
||
<h2
|
||
class="text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl"
|
||
>
|
||
Contactez moi
|
||
</h2>
|
||
<p class="mt-2 text-lg/8 text-gray-600">
|
||
Vous pouvez me contacter via le formulaire ci-dessous et je vous
|
||
répondrai rapidement.
|
||
</p>
|
||
{% for label, messages in app.flashes %}
|
||
{% for message in messages %}
|
||
<div
|
||
class="mb-6 rounded-md p-4 text-sm font-medium {% if label == 'success' %} bg-green-50 text-green-800 {% elseif label == 'error' %} bg-red-50 text-red-800 {% elseif label == 'warning' %} bg-yellow-50 text-yellow-800 {% endif %}"
|
||
>
|
||
{{ message }}
|
||
</div>
|
||
{% endfor %}
|
||
{% endfor %}
|
||
</div>
|
||
{{
|
||
form_start(
|
||
form,
|
||
{
|
||
attr: {
|
||
class: 'mx-auto mt-16 max-w-xl sm:mt-20'
|
||
}
|
||
}
|
||
)
|
||
}}
|
||
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
|
||
<div>
|
||
<label
|
||
for="{{ form.lastName.vars.id }}"
|
||
class="block text-sm/6 font-semibold text-gray-900"
|
||
>
|
||
Nom
|
||
</label>
|
||
<div class="mt-2.5">
|
||
{{
|
||
form_widget(
|
||
form.lastName,
|
||
{
|
||
attr: {
|
||
placeholder: 'Votre nom',
|
||
autocomplete: 'family-name',
|
||
class: 'block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-amber-600'
|
||
}
|
||
}
|
||
)
|
||
}}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label
|
||
for="{{ form.firstName.vars.id }}"
|
||
class="block text-sm/6 font-semibold text-gray-900"
|
||
>
|
||
Prénom
|
||
</label>
|
||
<div class="mt-2.5">
|
||
{{
|
||
form_widget(
|
||
form.firstName,
|
||
{
|
||
attr: {
|
||
placeholder: 'Votre prénom',
|
||
autocomplete: 'given-name',
|
||
class: 'block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-amber-600'
|
||
}
|
||
}
|
||
)
|
||
}}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sm:col-span-2">
|
||
<label
|
||
for="{{ form.company.vars.id }}"
|
||
class="block text-sm/6 font-semibold text-gray-900"
|
||
>
|
||
Entreprise
|
||
</label>
|
||
<div class="mt-2.5">
|
||
{{
|
||
form_widget(
|
||
form.company,
|
||
{
|
||
attr: {
|
||
placeholder: 'Raison sociale',
|
||
autocomplete: 'organization',
|
||
class: 'block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-amber-600'
|
||
}
|
||
}
|
||
)
|
||
}}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sm:col-span-2">
|
||
<label
|
||
for="{{ form.email.vars.id }}"
|
||
class="block text-sm/6 font-semibold text-gray-900"
|
||
>
|
||
Email
|
||
</label>
|
||
<div class="mt-2.5">
|
||
{{
|
||
form_widget(
|
||
form.email,
|
||
{
|
||
attr: {
|
||
placeholder: 'Votre adresse email',
|
||
autocomplete: 'email',
|
||
class: 'block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-amber-600'
|
||
}
|
||
}
|
||
)
|
||
}}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sm:col-span-2">
|
||
<label
|
||
for="{{ form.phoneNumber.vars.id }}"
|
||
class="block text-sm/6 font-semibold text-gray-900"
|
||
>
|
||
Numéro de téléphone
|
||
</label>
|
||
<div class="mt-2.5">
|
||
{{
|
||
form_widget(
|
||
form.phoneNumber,
|
||
{
|
||
attr: {
|
||
placeholder: 'Votre numéro de téléphone',
|
||
autocomplete: 'tel',
|
||
class: 'block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-amber-600'
|
||
}
|
||
}
|
||
)
|
||
}}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sm:col-span-2 hidden">
|
||
<label
|
||
for="{{ form.phoneNumber.vars.id }}"
|
||
class="block text-sm/6 font-semibold text-gray-900"
|
||
>
|
||
Numéro de téléphone mobile
|
||
</label>
|
||
<div class="mt-2.5">
|
||
{{
|
||
form_widget(
|
||
form.mobilePhoneNumber,
|
||
{
|
||
attr: {
|
||
placeholder: 'Votre numéro de téléphone',
|
||
class: 'block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-amber-600'
|
||
}
|
||
}
|
||
)
|
||
}}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sm:col-span-2">
|
||
<label
|
||
for="{{ form.message.vars.id }}"
|
||
class="block text-sm/6 font-semibold text-gray-900"
|
||
>
|
||
Message
|
||
</label>
|
||
<div class="mt-2.5">
|
||
{{
|
||
form_widget(
|
||
form.message,
|
||
{
|
||
attr: {
|
||
rows: 4,
|
||
placeholder: 'Votre message',
|
||
class: 'block w-full rounded-md bg-white px-3.5 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-amber-600'
|
||
}
|
||
}
|
||
)
|
||
}}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex gap-x-4 sm:col-span-2">
|
||
<div class="flex h-6 items-center">
|
||
<div
|
||
class="group relative inline-flex w-8 shrink-0 rounded-full bg-gray-200 p-px inset-ring inset-ring-gray-900/5 outline-offset-2 outline-amber-600 transition-colors duration-200 ease-in-out has-checked:bg-amber-600 has-focus-visible:outline-2"
|
||
>
|
||
<span
|
||
class="size-4 rounded-full bg-white shadow-xs ring-1 ring-gray-900/5 transition-transform duration-200 ease-in-out group-has-checked:translate-x-3.5"
|
||
>
|
||
|
||
</span>
|
||
|
||
{{
|
||
form_widget(
|
||
form.agreeToPolicies,
|
||
{
|
||
attr: {
|
||
class: 'absolute inset-0 size-full appearance-none focus:outline-hidden'
|
||
}
|
||
}
|
||
)
|
||
}}
|
||
</div>
|
||
</div>
|
||
|
||
<label
|
||
for="{{ form.agreeToPolicies.vars.id }}"
|
||
class="text-sm/6 text-gray-600"
|
||
>
|
||
En cochant cette case, vous acceptez notre
|
||
<a
|
||
href="{{ path('confidentialitypolicy') }}"
|
||
class="font-semibold whitespace-nowrap text-amber-600"
|
||
>
|
||
politique de confidentialité
|
||
</a>.
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="mt-10">
|
||
<button
|
||
type="submit"
|
||
class="block w-full rounded-md bg-amber-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-xs hover:bg-amber-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600"
|
||
>
|
||
Envoyer ma demande
|
||
</button>
|
||
</div>
|
||
{{ form_end(form) }}
|
||
</div>
|
||
{% endblock %}
|