379 lines
31 KiB
Twig
379 lines
31 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> - Votre page cosplayer(euse)
|
||
<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">
|
||
Atteignez le Niveau S : La vitrine digitale dont vous avez besoin.
|
||
</h2>
|
||
<p class="text-xl text-gray-600 mb-6 leading-relaxed text-center font-medium">
|
||
Vous créez des œuvres d'art, votre présence en ligne devrait l'être aussi ! L'<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span> vous offre une plateforme élégante, optimisée pour le cosplay, vous libérant des contraintes techniques.
|
||
</p>
|
||
|
||
{# Clarification du Rôle de l'EPage (MODIFIÉ) #}
|
||
<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">
|
||
Attention, l'<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span> n'est pas un clone ou un outil de planification (type Cosplan, etc.). Notre vocation est unique : vous proposer une page d'exposition personnelle, le <strong>vôtre</strong>, pour centraliser et valoriser votre travail en ligne.
|
||
<strong class="text-red-600/90 block mt-2">Ce service est exclusivement réservé aux cosplayer(euses) particuliers et n'est pas destiné aux entreprises, associations ou structures commerciales.</strong>
|
||
</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">✨ OPTIMISATION LÉGENDAIRE (SEO) </h3>
|
||
</div>
|
||
<p class="text-lg">Votre nom sera le premier résultat de recherche ! L'<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span> assure une visibilité maximale pour que votre travail soit vu par tous.</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">🔗 NEXUS DE VOTRE UNIVERS</h3>
|
||
</div>
|
||
<p class="text-lg">Un seul lien pour tous vos contenus : réseaux sociaux, listes de cadeaux, boutiques, et galeries complètes de vos <strong>Cosplans</strong> et <strong>Cosplays</strong>.</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">📅 CONVENTION RADAR </h3>
|
||
</div>
|
||
<p class="text-lg">Gérez votre planning d'apparitions : mettez en avant vos prochaines conventions, meetups ou événements spéciaux pour que personne ne rate votre présence.</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">🤝 CACHET D'APPROBATION E-COSPLAY</h3>
|
||
</div>
|
||
<p class="text-lg">Bénéficiez de la confiance de la communauté ! Votre page est <strong>directement promue</strong> sur le site de l'association <strong>E-Cosplay</strong>, renforçant votre légitimité.</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">🛡️ ACCÈS VALIDÉ & ZONE SÛRE</h3>
|
||
</div>
|
||
<p class="text-lg">
|
||
L'accès à la prestation <span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span> est soumis à la <strong>validation de votre profil par E-Cosplay</strong>. Pour votre protection, <strong>toutes les données de votre page sont chiffrées</strong>. Nous demandons le strict minimum d'informations (nom, prénom, email, pseudo) nécessaire à la création et à la responsabilité légale (propriété sur les photos, etc.). Plateforme professionnelle et sécurisée. <strong>Pas d'inscription à la volée.</strong>
|
||
</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">✉️ CONTACT SANS RISQUE (ANTI-SPAM)</h3>
|
||
</div>
|
||
<p class="text-lg">
|
||
Un formulaire de contact intégré permet à vos fans et partenaires de vous contacter directement, sans jamais exposer votre adresse email. Nos systèmes sont équipés d'une détection anti-spam automatique et manuelle en cas de doute par nos équipes !
|
||
<br><span class="text-sm mt-2 block text-gray-500 font-medium">Les données reçues ne sont ni vendues, ni récupérées par nous, conformément à notre <a href="{{ path('app_rgpd') }}" class="text-red-500 hover:text-red-600 underline font-bold transition duration-300">Politique de données personnelles</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">🎨 PERSONNALISATION AVANCÉE</h3>
|
||
</div>
|
||
<p class="text-lg">Votre <span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span> est une toile blanche. Choisissez vos couleurs, votre arrière-plan, et sélectionnez parmi nos polices de caractères pour refléter parfaitement votre univers.</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">📊 SUIVI & DOCUMENTS À TÉLÉCHARGER</h3>
|
||
</div>
|
||
<p class="text-lg">Visualisez l'impact de votre page en temps réel. Suivez le nombre de visiteurs et les vues de vos médias. De plus, proposez le téléchargement de documents importants (dossier de presse, CV, etc.) à vos fans et partenaires.</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>
|
||
Flexibilité Totale : Offre sans Engagement
|
||
</h4>
|
||
<p class="text-lg sm:text-xl text-gray-700 leading-relaxed">
|
||
Votre abonnement <span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span> est <strong>sans engagement</strong>.
|
||
</p>
|
||
<p class="text-base sm:text-lg text-gray-600 mt-2">
|
||
Le renouvellement est <strong>automatique</strong>, mais vous choisissez la période qui vous convient :
|
||
<strong class="text-red-500">1, 2, 3, 6 mois ou 1 an</strong>, selon vos désirs. Annulez à tout moment.
|
||
</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">Prêt(e) à rejoindre nos X cosplayer(euse)s déjà présent(e)s sur notre plateforme ?</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>
|
||
Information Technique : Votre Nom de Domaine
|
||
</h4>
|
||
<p class="text-base sm:text-lg leading-relaxed">
|
||
<strong>Vous ne disposez pas de votre propre nom de domaine ?</strong>
|
||
<br>L'URL de votre page sera automatiquement <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>.
|
||
</p>
|
||
<p class="text-base sm:text-lg leading-relaxed mt-3">
|
||
<strong>Vous disposez de votre nom de domaine ?</strong>
|
||
<br>Il est tout à fait possible de le faire pointer directement sur votre <span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span> ! Cela nécessite une simple manipulation d'enregistrement DNS (type CNAME) de votre côté.
|
||
</p>
|
||
<p class="text-base sm:text-lg leading-relaxed mt-3 border-t pt-3 border-yellow-300">
|
||
<strong class="text-yellow-700">Achat/Gestion :</strong> Vous pouvez également acheter et gérer votre nom de domaine directement chez notre partenaire <strong>SARL SITECONSEIL</strong> pour simplifier toutes vos démarches techniques.
|
||
</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>
|
||
⚖️ VOS DROITS D'AUTEUR (COPYRIGHT)
|
||
</h4>
|
||
<p class="text-base sm:text-lg leading-relaxed">
|
||
Vous êtes l'unique responsable du droit d'auteur (copyright) de toutes les photos et vidéos publiées sur votre <span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span>. Il est crucial de <strong class="text-red-600">remplir correctement</strong> toutes les informations relatives à la propriété.
|
||
</p>
|
||
<p class="text-base sm:text-lg leading-relaxed mt-3">
|
||
<strong class="text-blue-700">L'équipe E-Cosplay est là pour vous aider !</strong> N'hésitez pas à nous contacter en cas de doute sur la légalité de vos contenus.
|
||
</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>
|
||
⚡ BESOIN DE PLUS DE FONCTIONNALITÉS ?
|
||
</h4>
|
||
<p class="text-base sm:text-lg leading-relaxed">
|
||
Si vous avez besoin de fonctionnalités supplémentaires non disponibles actuellement sur l'<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span>, <strong class="text-red-700">demandez au support E-Cosplay</strong>.
|
||
</p>
|
||
<p class="text-base sm:text-lg leading-relaxed mt-3">
|
||
Nous vous indiquerons si cela est réalisable ou si nous devons vous diriger vers notre partenaire <strong class="text-cyan-700">SARL SITECONSEIL</strong> pour la création d'un site internet sur mesure.
|
||
</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">Choisissez Votre Période d'Abonnement</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">
|
||
1 Mois
|
||
</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">
|
||
2 Mois
|
||
<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">Save 2€</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">
|
||
3 Mois
|
||
<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">Save 3€</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">
|
||
6 Mois
|
||
<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">Save 0€</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">
|
||
1 An
|
||
<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">Best Deal!</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"> HT</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">
|
||
Je crée ma EPage
|
||
</button>
|
||
|
||
<p class="text-xs sm:text-sm text-gray-500 mt-4 italic">
|
||
Abonnement sans engagement. Renouvellement automatique selon la période choisie.
|
||
</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">
|
||
🚀 Votre Site Internet Complet
|
||
</h3>
|
||
<p class="text-lg sm:text-xl text-gray-600 mb-6">
|
||
L'<span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-500 to-red-600">EPage</span> est parfait pour votre vitrine Cosplay, mais si vous souhaitez un <strong>site complet, personnalisé et évolutif</strong> pour votre activité professionnelle ou votre marque personnelle :
|
||
</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">Partenaire Recommandé</p>
|
||
<p class="text-base sm:text-lg text-gray-700">
|
||
Notre partenaire <strong>SARL SITECONSEIL</strong> propose sa solution CMS <strong class="text-yellow-600">Esy-Flex</strong>.
|
||
</p>
|
||
<p class="text-base sm:text-lg text-gray-700 mt-2">
|
||
Créez votre site internet rapidement et profitez d'une offre adaptée.
|
||
</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">
|
||
Découvrir SITECONSEIL
|
||
<!-- 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' }
|
||
};
|
||
|
||
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 = 'Renouvellement mensuel';
|
||
} else if (duration === '12M') {
|
||
perMonthElement.innerHTML = `Facturation annuelle. Soit <strong class="text-red-500">${data.label}</strong> en moyenne par mois.`;
|
||
} else {
|
||
perMonthElement.innerHTML = `Facturation pour ${duration.replace('M', ' mois')}. Soit <strong class="text-red-500">${data.label}</strong> en moyenne par mois.`;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 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 %}
|