Add contact page
This commit is contained in:
311
templates/page/contact.html.twig
Normal file
311
templates/page/contact.html.twig
Normal file
@@ -0,0 +1,311 @@
|
||||
{% 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 %}
|
||||
Reference in New Issue
Block a user