459 lines
33 KiB
Twig
459 lines
33 KiB
Twig
{% extends 'base.twig' %}
|
|
|
|
{# --- METADATA & SCHEMA --- #}
|
|
{% block title %}{{'page.presentation.title'|trans}}{% endblock %}
|
|
{% block meta_description %}{{'page.presentation.description'|trans}}{% endblock %}
|
|
|
|
{% block canonical_url %}<link rel="canonical" href="{{ url('app_pages') }}" />{% endblock %}
|
|
{% block breadcrumb_schema %}
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "BreadcrumbList",
|
|
"itemListElement": [
|
|
{
|
|
"@type": "ListItem",
|
|
"position": 1,
|
|
"name": "{{ 'breadcrumb.home'|trans }}",
|
|
"item": "{{ app.request.schemeAndHttpHost }}"
|
|
},
|
|
{
|
|
"@type": "ListItem",
|
|
"position": 2,
|
|
"name": "{{ 'page_presentation.breadcrumb'|trans }}",
|
|
"item": "{{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}"
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{# --- BODY --- #}
|
|
{% block body %}
|
|
<main class="py-16 bg-gray-100/50 min-h-screen">
|
|
|
|
{# Wrapper global pour centrer le contenu et gérer le padding mobile #}
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
|
{# Titre Style Moderne/Anime Épuré #}
|
|
<h1 class="text-5xl md:text-6xl font-extrabold text-center mb-12 relative
|
|
tracking-tight pb-2 text-gray-900">
|
|
<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span> - {{ 'page.presentation.header'|trans }}
|
|
<span class="block w-24 h-1 mx-auto mt-2 bg-gradient-to-r from-red-500 to-yellow-500 rounded-full"></span>
|
|
</h1>
|
|
|
|
{# Conteneur des Fonctionnalités #}
|
|
<div class="bg-white p-6 sm:p-8 md:p-14 rounded-3xl shadow-[0_20px_40px_-10px_rgba(0,0,0,0.2)] border-t-8 border-yellow-500/80">
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">
|
|
{{ 'page.presentation.subtitle'|trans }}
|
|
</h2>
|
|
<p class="text-xl text-gray-600 mb-6 leading-relaxed text-center font-medium">
|
|
{{ 'page.presentation.intro_paragraph_1'|trans }}<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span> {{ 'page.presentation.intro_paragraph_1_2'|trans }}
|
|
</p>
|
|
|
|
{# Clarification du Rôle de l'EPage #}
|
|
<p class="text-lg sm:text-xl text-gray-700 mb-10 leading-relaxed text-center font-medium border-l-4 border-yellow-500 pl-4 sm:pl-6 py-3 bg-yellow-50 rounded-lg italic">
|
|
{{ 'page.presentation.intro_paragraph_2'|trans({
|
|
'page_span': '<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span>',
|
|
'strong_tag': '<strong>',
|
|
'strong_end_tag': '</strong>',
|
|
'warning_tag': '<strong class="text-red-600/90 block mt-2">'
|
|
})|raw }}
|
|
</p>
|
|
|
|
{# GRILLE DES FONCTIONNALITÉS (devient 1 colonne sur mobile, 2 sur md, 3 sur lg) #}
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-10 text-gray-700">
|
|
|
|
{# Bloc 1: Visibilité Maximale (Loupe) #}
|
|
<div class="p-6 border border-gray-200 rounded-xl hover:shadow-xl transition duration-500 transform hover:-translate-y-1 bg-white">
|
|
<div class="flex items-center space-x-4 mb-3">
|
|
<span class="text-red-500 text-3xl flex-shrink-0 p-2 bg-red-100 rounded-lg">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
|
|
</span>
|
|
<h3 class="font-extrabold text-xl text-gray-900">{{ 'page.presentation.feature.seo.title'|trans }}</h3>
|
|
</div>
|
|
<p class="text-lg">{{ 'page.presentation.feature.seo.description'|trans({
|
|
'page_span': '<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span>'
|
|
})|raw }}</p>
|
|
</div>
|
|
|
|
{# Bloc 2: Centralisation de Contenu (Chaîne) #}
|
|
<div class="p-6 border border-gray-200 rounded-xl hover:shadow-xl transition duration-500 transform hover:-translate-y-1 bg-white">
|
|
<div class="flex items-center space-x-4 mb-3">
|
|
<span class="text-yellow-500 text-3xl flex-shrink-0 p-2 bg-yellow-100 rounded-lg">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link-2"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3"/><path d="M9 17H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"/><line x1="8" x2="16" y1="12" y2="12"/></svg>
|
|
</span>
|
|
<h3 class="font-extrabold text-xl text-gray-900">{{ 'page.presentation.feature.nexus.title'|trans }}</h3>
|
|
</div>
|
|
<p class="text-lg">{{ 'page.presentation.feature.nexus.description'|trans({
|
|
'strong_tag': '<strong>',
|
|
'strong_end_tag': '</strong>'
|
|
})|raw }}</p>
|
|
</div>
|
|
|
|
{# Bloc 3: Annonces & Événements (Calendrier) #}
|
|
<div class="p-6 border border-gray-200 rounded-xl hover:shadow-xl transition duration-500 transform hover:-translate-y-1 bg-white">
|
|
<div class="flex items-center space-x-4 mb-3">
|
|
<span class="text-red-500 text-3xl flex-shrink-0 p-2 bg-red-100 rounded-lg">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-days"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg>
|
|
</span>
|
|
<h3 class="font-extrabold text-xl text-gray-900">{{ 'page.presentation.feature.convention.title'|trans }}</h3>
|
|
</div>
|
|
<p class="text-lg">{{ 'page.presentation.feature.convention.description'|trans }}</p>
|
|
</div>
|
|
|
|
{# Bloc 4: Intégration E-Cosplay (Cœur) #}
|
|
<div class="p-6 border border-gray-200 rounded-xl hover:shadow-xl transition duration-500 transform hover:-translate-y-1 bg-white">
|
|
<div class="flex items-center space-x-4 mb-3">
|
|
<span class="text-yellow-500 text-3xl flex-shrink-0 p-2 bg-yellow-100 rounded-lg">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hand-heart"><path d="M11 14h2a2 2 0 0 0 2-2V7.5l-3.24-3.24a1 1 0 0 0-1.42 0L8 7.5V12a2 2 0 0 0 2 2h2"/><path d="M10 10l.02.02"/><path d="M14 10l.02.02"/><path d="M20 16c0 4.42-3.58 8-8 8s-8-3.58-8-8 8-16 8-16 8 11.58 8 16z"/></svg>
|
|
</span>
|
|
<h3 class="font-extrabold text-xl text-gray-900">{{ 'page.presentation.feature.approval.title'|trans }}</h3>
|
|
</div>
|
|
<p class="text-lg">{{ 'page.presentation.feature.approval.description'|trans({
|
|
'strong_tag': '<strong>',
|
|
'strong_end_tag': '</strong>'
|
|
})|raw }}</p>
|
|
</div>
|
|
|
|
{# Bloc 5: Modération et Sécurité (Bouclier) #}
|
|
<div class="p-6 border border-gray-200 rounded-xl hover:shadow-xl transition duration-500 transform hover:-translate-y-1 bg-white">
|
|
<div class="flex items-center space-x-4 mb-3">
|
|
<span class="text-red-500 text-3xl flex-shrink-0 p-2 bg-red-100 rounded-lg">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/><path d="m9 12 2 2 4-4"/></svg>
|
|
</span>
|
|
<h3 class="font-extrabold text-xl text-gray-900">{{ 'page.presentation.feature.security.title'|trans }}</h3>
|
|
</div>
|
|
<p class="text-lg">
|
|
{{ 'page.presentation.feature.security.description'|trans({
|
|
'page_span': '<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span>',
|
|
'strong_tag': '<strong>',
|
|
'strong_end_tag': '</strong>'
|
|
})|raw }}
|
|
</p>
|
|
<p class="text-lg mt-2">
|
|
{{ 'page.presentation.feature.security.encrypted_data'|trans({
|
|
'strong_tag': '<strong>',
|
|
'strong_end_tag': '</strong>'
|
|
})|raw }}
|
|
</p>
|
|
<p class="text-lg mt-2">
|
|
{{ 'page.presentation.feature.security.data_minimum'|trans }}
|
|
</p>
|
|
<p class="text-lg mt-2">
|
|
{{ 'page.presentation.feature.security.no_fly_inscription'|trans({
|
|
'strong_tag': '<strong>',
|
|
'strong_end_tag': '</strong>'
|
|
})|raw }}
|
|
</p>
|
|
</div>
|
|
|
|
{# Bloc 6: Formulaire de Contact Sécurisé (Mail Check) #}
|
|
<div class="p-6 border border-gray-200 rounded-xl hover:shadow-xl transition duration-500 transform hover:-translate-y-1 bg-white">
|
|
<div class="flex items-center space-x-4 mb-3">
|
|
<span class="text-yellow-500 text-3xl flex-shrink-0 p-2 bg-yellow-100 rounded-lg">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail-check"><path d="M22 10V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h10"/><path d="m22 10-7.23 6.11a3 3 0 0 1-3.48 0L2 10"/><path d="m16 22 2 2 4-4"/></svg>
|
|
</span>
|
|
<h3 class="font-extrabold text-xl text-gray-900">{{ 'page.presentation.feature.contact.title'|trans }}</h3>
|
|
</div>
|
|
<p class="text-lg">
|
|
{{ 'page.presentation.feature.contact.description'|trans }}
|
|
<br><span class="text-sm mt-2 block text-gray-500 font-medium">{{ 'page.presentation.feature.contact.disclaimer'|trans}}<a target="_blank" class='text-red-500 hover:text-red-600 underline font-bold transition duration-300' href='{{ path('app_rgpd') }}'>{{ 'page.presentation.feature.contact.policy_text'|trans }}</a></span>
|
|
</p>
|
|
</div>
|
|
|
|
{# Bloc 7: Personalisation (Palette) #}
|
|
<div class="p-6 border border-gray-200 rounded-xl hover:shadow-xl transition duration-500 transform hover:-translate-y-1 bg-white">
|
|
<div class="flex items-center space-x-4 mb-3">
|
|
<span class="text-red-500 text-3xl flex-shrink-0 p-2 bg-red-100 rounded-lg">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-palette"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="10.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.92 0 1.63-.67 1.95-1.57.17-.46.33-.87.49-1.29.35-.91.78-1.78 1.3-2.58.6-1.14 1.34-2.13 2.22-2.91.88-.78 1.94-1.28 3.12-1.28C21.5 10.5 22 6.5 22 12c0-5.5-4.5-10-10-10z"/></svg>
|
|
</span>
|
|
<h3 class="font-extrabold text-xl text-gray-900">{{ 'page.presentation.feature.customization.title'|trans }}</h3>
|
|
</div>
|
|
<p class="text-lg">{{ 'page.presentation.feature.customization.description'|trans({
|
|
'page_span': '<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span>'
|
|
})|raw }}</p>
|
|
</div>
|
|
|
|
{# Bloc 8: Suivi / Analytics (Activity) #}
|
|
<div class="p-6 border border-gray-200 rounded-xl hover:shadow-xl transition duration-500 transform hover:-translate-y-1 bg-white">
|
|
<div class="flex items-center space-x-4 mb-3">
|
|
<span class="text-yellow-500 text-3xl flex-shrink-0 p-2 bg-yellow-100 rounded-lg">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
|
|
</span>
|
|
<h3 class="font-extrabold text-xl text-gray-900">{{ 'page.presentation.feature.analytics.title'|trans }}</h3>
|
|
</div>
|
|
<p class="text-lg">{{ 'page.presentation.feature.analytics.description'|trans }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{# BLOC : OFFRE SANS ENGAGEMENT #}
|
|
<div class="mt-12 p-6 sm:p-8 bg-white border-2 border-red-500 rounded-2xl shadow-xl text-center">
|
|
<h4 class="text-xl sm:text-3xl font-extrabold text-gray-900 mb-3 flex items-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rocket-launch mr-3 text-red-500"><path d="M10 21h4c1.1 0 2-.9 2-2v-7a2 2 0 0 0-2-2h-4c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2z"/><path d="M12 10a2 2 0 0 0 2-2V4a2 2 0 1 0-4 0v4a2 2 0 0 0 2 2z"/><path d="M7 16l-3 3"/><path d="M17 16l3 3"/><path d="M12 21v-2"/></svg>
|
|
{{ 'page.presentation.flexibility.title'|trans }}
|
|
</h4>
|
|
<p class="text-lg sm:text-xl text-gray-700 leading-relaxed">
|
|
{{ 'page.presentation.flexibility.no_commitment'|trans({
|
|
'page_span': '<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span>',
|
|
'strong_tag': '<strong>',
|
|
'strong_end_tag': '</strong>'
|
|
})|raw }}
|
|
</p>
|
|
<p class="text-base sm:text-lg text-gray-600 mt-2">
|
|
{{ 'page.presentation.flexibility.renewal_auto'|trans|raw }}
|
|
<strong>{{ 'page.presentation.flexibility.periods_cancel'|trans }}</strong>
|
|
</p>
|
|
</div>
|
|
|
|
{# Appel à l'action pour les étapes #}
|
|
<div class="text-center mt-16">
|
|
<h3 class="text-2xl sm:text-3xl font-extrabold text-gray-800 mb-5">{{ 'page.presentation.call_to_action'|trans }}</h3>
|
|
</div>
|
|
|
|
{# CONTENEUR DE GRILLE POUR LES 3 BLOCS D'INFORMATION #}
|
|
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
|
|
|
|
{# BLOC 1: INFO TECHNIQUE NOM DE DOMAINE #}
|
|
<div class="p-6 sm:p-8 bg-yellow-50 border border-yellow-300 rounded-xl shadow-md text-gray-700">
|
|
<h4 class="text-xl sm:text-2xl font-extrabold text-yellow-700 mb-3 flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-square mr-2"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="m10 13-2-2 2-2"/><path d="m14 11 2 2-2 2"/></svg>
|
|
{{ 'page.presentation.domain_info.title'|trans }}
|
|
</h4>
|
|
<p class="text-base sm:text-lg leading-relaxed">
|
|
<strong>{{ 'page.presentation.domain_info.no_domain_question'|trans }}</strong>
|
|
<br>{{ 'page.presentation.domain_info.default_url'|trans({
|
|
'url_part': '<code class="bg-gray-200 text-yellow-800 p-1 rounded font-mono text-sm">votre_pseudo.<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">e-cosplay</span>.com</code>'
|
|
})|raw }}
|
|
</p>
|
|
<p class="text-base sm:text-lg leading-relaxed mt-3">
|
|
<strong>{{ 'page.presentation.domain_info.has_domain_question'|trans }}</strong>
|
|
<br>{{ 'page.presentation.domain_info.cname_guide'|trans({
|
|
'page_span': '<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span>'
|
|
})|raw }}
|
|
</p>
|
|
<p class="text-base sm:text-lg leading-relaxed mt-3 border-t pt-3 border-yellow-300">
|
|
<strong class="text-yellow-700">{{ 'page.presentation.domain_info.purchase_title'|trans }}</strong>
|
|
<br>{{ 'page.presentation.domain_info.partner_purchase'|trans({
|
|
'partner_strong': '<strong>SARL SITECONSEIL</strong>'
|
|
})|raw }}
|
|
</p>
|
|
</div>
|
|
|
|
{# BLOC 2: INFO LÉGALE COPYRIGHT #}
|
|
<div class="p-6 sm:p-8 bg-blue-50 border border-blue-300 rounded-xl shadow-md text-gray-700">
|
|
<h4 class="text-xl sm:text-2xl font-extrabold text-blue-700 mb-3 flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gavel mr-2"><path d="m15 11-8 8"/><path d="m14 4 6 6"/><path d="m4 4 6 6"/><path d="M17 17l5 5"/><path d="m15 11-1 1-2 2-2 2"/></svg>
|
|
{{ 'page.presentation.copyright_info.title'|trans }}
|
|
</h4>
|
|
<p class="text-base sm:text-lg leading-relaxed">
|
|
{{ 'page.presentation.copyright_info.responsibility'|trans({
|
|
'page_span': '<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span>',
|
|
'strong_tag': '<strong>',
|
|
'strong_end_tag': '</strong>',
|
|
'red_strong': '<strong class="text-red-600">'
|
|
})|raw }}
|
|
</p>
|
|
<p class="text-base sm:text-lg leading-relaxed mt-3">
|
|
<strong class="text-blue-700">{{ 'page.presentation.copyright_info.help_team'|trans }}</strong>
|
|
<br>{{ 'page.presentation.copyright_info.contact_us'|trans }}
|
|
</p>
|
|
</div>
|
|
|
|
{# BLOC 3: INFO FONCTIONNALITÉS SUPPLÉMENTAIRES #}
|
|
<div class="p-6 sm:p-8 bg-red-50 border border-red-300 rounded-xl shadow-md text-gray-700">
|
|
<h4 class="text-xl sm:text-2xl font-extrabold text-red-700 mb-3 flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap mr-2"><path d="M10 17l6-6-6-6v3H4v6h6z"/></svg>
|
|
{{ 'page.presentation.additional_features.title'|trans }}
|
|
</h4>
|
|
<p class="text-base sm:text-lg leading-relaxed">
|
|
{{ 'page.presentation.additional_features.request_support'|trans({
|
|
'page_span': '<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span>',
|
|
'strong_tag': '<strong>',
|
|
'strong_end_tag': '</strong>'
|
|
})|raw }}
|
|
</p>
|
|
<p class="text-base sm:text-lg leading-relaxed mt-3">
|
|
{{ 'page.presentation.additional_features.siteconseil_referral'|trans({
|
|
'partner_strong_cyan': '<strong class="text-cyan-700">SARL SITECONSEIL</strong>'
|
|
})|raw }}
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{# BLOC DE TARIFICATION EPage (CARTE UNIQUE AVEC SÉLECTEUR) - CENTRÉ ET RESPONSIVE #}
|
|
<div class="mt-16 text-center">
|
|
<h3 class="text-4xl font-extrabold text-gray-800 mb-8">{{ 'page.presentation.pricing.choose_period'|trans }}</h3>
|
|
|
|
<div class="max-w-xl mx-auto p-6 sm:p-8 bg-white border-4 border-red-500 rounded-3xl shadow-2xl">
|
|
|
|
<h4 class="text-3xl font-bold text-gray-900 mb-6">
|
|
<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span>
|
|
</h4>
|
|
|
|
{# SÉLECTEUR DE DURÉE (Utilise flex-wrap pour s'adapter sur mobile) #}
|
|
<div class="flex flex-wrap justify-center gap-2 sm:gap-4 mb-8 bg-gray-100 p-2 rounded-xl">
|
|
|
|
<label class="relative flex-1 cursor-pointer min-w-[70px]">
|
|
<input type="radio" name="duration" value="1M" class="peer hidden" checked onchange="updatePrice(this.value)">
|
|
<span class="block px-2 sm:px-4 py-2 text-sm sm:text-lg font-semibold text-gray-700 bg-white rounded-lg transition duration-200
|
|
peer-checked:bg-red-500 peer-checked:text-white peer-checked:shadow-lg hover:bg-red-100">
|
|
{{ 'page.presentation.pricing.period_1m'|trans }}
|
|
</span>
|
|
</label>
|
|
|
|
<label class="relative flex-1 cursor-pointer group min-w-[70px]">
|
|
<input type="radio" name="duration" value="2M" class="peer hidden" onchange="updatePrice(this.value)">
|
|
<span class="block px-2 sm:px-4 py-2 text-sm sm:text-lg font-semibold text-gray-700 bg-white rounded-lg transition duration-200
|
|
peer-checked:bg-red-500 peer-checked:text-white peer-checked:shadow-lg hover:bg-red-100">
|
|
{{ 'page.presentation.pricing.period_2m'|trans }}
|
|
<span class="absolute top-[-10px] right-[-5px] text-[10px] sm:text-xs font-bold text-white bg-yellow-500 px-1.5 py-0.5 rounded-full shadow-md transform -rotate-3 group-hover:rotate-0 transition">{{ 'page.presentation.pricing.save_2e'|trans }}</span>
|
|
</span>
|
|
</label>
|
|
|
|
<label class="relative flex-1 cursor-pointer group min-w-[70px]">
|
|
<input type="radio" name="duration" value="3M" class="peer hidden" onchange="updatePrice(this.value)">
|
|
<span class="block px-2 sm:px-4 py-2 text-sm sm:text-lg font-semibold text-gray-700 bg-white rounded-lg transition duration-200
|
|
peer-checked:bg-red-500 peer-checked:text-white peer-checked:shadow-lg hover:bg-red-100">
|
|
{{ 'page.presentation.pricing.period_3m'|trans }}
|
|
<span class="absolute top-[-10px] right-[-5px] text-[10px] sm:text-xs font-bold text-white bg-yellow-500 px-1.5 py-0.5 rounded-full shadow-md transform -rotate-3 group-hover:rotate-0 transition">{{ 'page.presentation.pricing.save_3e'|trans }}</span>
|
|
</span>
|
|
</label>
|
|
|
|
<label class="relative flex-1 cursor-pointer group min-w-[70px]">
|
|
<input type="radio" name="duration" value="6M" class="peer hidden" onchange="updatePrice(this.value)">
|
|
<span class="block px-2 sm:px-4 py-2 text-sm sm:text-lg font-semibold text-gray-700 bg-white rounded-lg transition duration-200
|
|
peer-checked:bg-red-500 peer-checked:text-white peer-checked:shadow-lg hover:bg-red-100">
|
|
{{ 'page.presentation.pricing.period_6m'|trans }}
|
|
<span class="absolute top-[-10px] right-[-5px] text-[10px] sm:text-xs font-bold text-white bg-yellow-500 px-1.5 py-0.5 rounded-full shadow-md transform -rotate-3 group-hover:rotate-0 transition">{{ 'page.presentation.pricing.save_0e'|trans }}</span>
|
|
</span>
|
|
</label>
|
|
|
|
<label class="relative flex-1 cursor-pointer group min-w-[70px]">
|
|
<input type="radio" name="duration" value="12M" class="peer hidden" onchange="updatePrice(this.value)">
|
|
<span class="block px-2 sm:px-4 py-2 text-sm sm:text-lg font-semibold text-gray-700 bg-white rounded-lg transition duration-200
|
|
peer-checked:bg-red-500 peer-checked:text-white peer-checked:shadow-lg hover:bg-red-100">
|
|
{{ 'page.presentation.pricing.period_12m'|trans }}
|
|
<span class="absolute top-[-10px] right-[-5px] text-[10px] sm:text-xs font-bold text-white bg-red-700 px-1.5 py-0.5 rounded-full shadow-md transform -rotate-3 group-hover:rotate-0 transition">{{ 'page.presentation.pricing.best_deal'|trans }}</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
{# AFFICHAGE DU PRIX DYNAMIQUE #}
|
|
<div class="text-5xl sm:text-6xl font-extrabold text-gray-900 my-6">
|
|
<span id="current-price">5€</span><span class="text-xl sm:text-2xl text-red-600"> {{ 'page.presentation.pricing.tax_info'|trans }}</span>
|
|
</div>
|
|
|
|
<p id="price-per-month" class="text-lg sm:text-xl text-gray-500 mb-8"></p>
|
|
|
|
{# BOUTON D'ACTION #}
|
|
<button class="w-full px-8 py-4 bg-gradient-to-r from-yellow-500 to-red-600 text-white font-extrabold text-xl rounded-xl transition duration-300 transform hover:scale-[1.03] shadow-lg shadow-red-300/50">
|
|
{{ 'page.presentation.pricing.cta_button'|trans }}
|
|
</button>
|
|
|
|
<p class="text-xs sm:text-sm text-gray-500 mt-4 italic">
|
|
{{ 'page.presentation.pricing.disclaimer'|trans }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{# BLOC PARTENARIAT SITECONSEIL #}
|
|
<div class="mt-20 pt-10 pb-10 bg-white text-gray-900 rounded-3xl shadow-2xl border border-gray-200">
|
|
<div class="text-center px-4 sm:px-6">
|
|
<h3 class="text-3xl sm:text-4xl font-extrabold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-cyan-600">
|
|
{{ 'page.presentation.siteconseil_partner.title'|trans }}
|
|
</h3>
|
|
<p class="text-lg sm:text-xl text-gray-600 mb-6">
|
|
{{ 'page.presentation.siteconseil_partner.intro'|trans({
|
|
'page_span': '<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span>',
|
|
'strong_tag': '<strong>',
|
|
'strong_end_tag': '</strong>'
|
|
})|raw }}
|
|
</p>
|
|
|
|
<div class="bg-gray-100 p-6 rounded-xl border-l-8 border-cyan-500 inline-block max-w-xl text-gray-900">
|
|
<p class="text-xl sm:text-2xl font-bold mb-2">{{ 'page.presentation.siteconseil_partner.recommended'|trans }}</p>
|
|
<p class="text-base sm:text-lg text-gray-700">
|
|
{{ 'page.presentation.siteconseil_partner.cms_info'|trans({
|
|
'partner_strong': '<strong>SARL SITECONSEIL</strong>',
|
|
'cms_strong': '<strong class="text-yellow-600">Esy-Flex</strong>'
|
|
})|raw }}
|
|
</p>
|
|
<p class="text-base sm:text-lg text-gray-700 mt-2">
|
|
{{ 'page.presentation.siteconseil_partner.offer_info'|trans }}
|
|
</p>
|
|
<a href="https://www.siteconseil.fr" target="_blank" class="mt-4 inline-block px-6 sm:px-8 py-3 bg-cyan-500 hover:bg-cyan-600 text-gray-900 font-extrabold text-base sm:text-lg rounded-full transition duration-300 transform hover:scale-105 shadow-lg">
|
|
{{ 'page.presentation.siteconseil_partner.discover_button'|trans }}
|
|
<!-- Icone de Lien Externe -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block ml-2 h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M10 14L16.6 7.4"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Données de prix (en Euros HT)
|
|
const pricing = {
|
|
'1M': { price: 5, label: '5€ / mois' },
|
|
'2M': { price: 8, label: '4€ / mois' },
|
|
'3M': { price: 12, label: '4€ / mois' },
|
|
'6M': { price: 30, label: '5€ / mois' },
|
|
'12M': { price: 50, label: '4.17€ / mois' }
|
|
};
|
|
|
|
// Translation Keys (In a real Symfony app, these would be loaded from an assets file or context)
|
|
const translations = {
|
|
'monthly_renewal': '{{ 'page.presentation.js.monthly_renewal'|trans }}',
|
|
'annual_billing': '{{ 'page.presentation.js.annual_billing'|trans }}',
|
|
'periodic_billing': '{{ 'page.presentation.js.periodic_billing'|trans }}',
|
|
};
|
|
|
|
function updatePrice(duration) {
|
|
const priceElement = document.getElementById('current-price');
|
|
const perMonthElement = document.getElementById('price-per-month');
|
|
|
|
const data = pricing[duration];
|
|
|
|
if (data) {
|
|
priceElement.textContent = data.price + '€';
|
|
|
|
if (duration === '1M') {
|
|
perMonthElement.textContent = translations.monthly_renewal;
|
|
} else if (duration === '12M') {
|
|
// Use string replacement for translated text with interpolation
|
|
const translatedText = translations.annual_billing.replace(
|
|
'%average_price%', `<strong class="text-red-500">${data.label}</strong>`
|
|
);
|
|
perMonthElement.innerHTML = translatedText;
|
|
} else {
|
|
// Use string replacement for translated text with interpolation
|
|
const months = duration.replace('M', '');
|
|
const translatedText = translations.periodic_billing
|
|
.replace('%duration%', months)
|
|
.replace('%average_price%', `<strong class="text-red-500">${data.label}</strong>`);
|
|
|
|
perMonthElement.innerHTML = translatedText;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Initialiser le prix au chargement (pour l'abonnement 1M).
|
|
// J'utilise turbo:load ou DOMContentLoaded comme fallback.
|
|
function initializePrice() {
|
|
updatePrice('1M');
|
|
}
|
|
|
|
if (typeof window.Turbo !== 'undefined') {
|
|
document.addEventListener('turbo:load', initializePrice);
|
|
} else {
|
|
document.addEventListener('DOMContentLoaded', initializePrice);
|
|
}
|
|
</script>
|
|
</main>
|
|
|
|
|
|
{% endblock %}
|