admin/e-cosplay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

```

Browse Source 
✨ feat(prestation.twig): Ajoute la traduction de la page de présentation.
```
This commit is contained in:
Serreau Jovann
2025-12-02 23:26:07 +01:00
parent 096e829780
commit 59bbfc717c
2 changed files with 242 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
templates/pages/prestation.twig
View File

@@ -38,23 +38,27 @@
{# 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="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">
Atteignez le Niveau S : La vitrine digitale dont vous avez besoin.
{{ 'page.presentation.subtitle'|trans }}
</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.
{{ '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 (MODIFIÉ) #}
{# 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">
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>
{{ '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) #}
@@ -66,9 +70,11 @@
<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>
<h3 class="font-extrabold text-xl text-gray-900">{{ 'page.presentation.feature.seo.title'|trans }}</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>
<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) #}
@@ -77,9 +83,12 @@
<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>
<h3 class="font-extrabold text-xl text-gray-900">{{ 'page.presentation.feature.nexus.title'|trans }}</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>
<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) #}
@@ -88,9 +97,9 @@
<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>
<h3 class="font-extrabold text-xl text-gray-900">{{ 'page.presentation.feature.convention.title'|trans }}</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>
<p class="text-lg">{{ 'page.presentation.feature.convention.description'|trans }}</p>
</div>
{# Bloc 4: Intégration E-Cosplay (Cœur) #}
@@ -99,9 +108,12 @@
<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>
<h3 class="font-extrabold text-xl text-gray-900">{{ 'page.presentation.feature.approval.title'|trans }}</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>
<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) #}
@@ -110,10 +122,29 @@
<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>
<h3 class="font-extrabold text-xl text-gray-900">{{ 'page.presentation.feature.security.title'|trans }}</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>
{{ '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>
@@ -123,11 +154,11 @@
<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>
<h3 class="font-extrabold text-xl text-gray-900">{{ 'page.presentation.feature.contact.title'|trans }}</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>
{{ '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>
@@ -137,9 +168,11 @@
<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>
<h3 class="font-extrabold text-xl text-gray-900">{{ 'page.presentation.feature.customization.title'|trans }}</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>
<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) #}
@@ -148,9 +181,9 @@
<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>
<h3 class="font-extrabold text-xl text-gray-900">{{ 'page.presentation.feature.analytics.title'|trans }}</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>
<p class="text-lg">{{ 'page.presentation.feature.analytics.description'|trans }}</p>
</div>
</div>
</div>
@@ -160,20 +193,24 @@
<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
{{ 'page.presentation.flexibility.title'|trans }}
</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>.
{{ '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">
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.
{{ '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">Prêt(e) à rejoindre nos X cosplayer(euse)s déjà présent(e)s sur notre plateforme ?</h3>
<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 #}
@@ -183,18 +220,25 @@
<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
{{ 'page.presentation.domain_info.title'|trans }}
</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>.
<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>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é.
<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">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.
<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>
@@ -202,13 +246,19 @@
<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)
{{ 'page.presentation.copyright_info.title'|trans }}
</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é.
{{ '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">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.
<strong class="text-blue-700">{{ 'page.presentation.copyright_info.help_team'|trans }}</strong>
<br>{{ 'page.presentation.copyright_info.contact_us'|trans }}
</p>
</div>
@@ -216,13 +266,19 @@
<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 ?
{{ 'page.presentation.additional_features.title'|trans }}
</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>.
{{ '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">
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.
{{ 'page.presentation.additional_features.siteconseil_referral'|trans({
'partner_strong_cyan': '<strong class="text-cyan-700">SARL SITECONSEIL</strong>'
})|raw }}
</p>
</div>
@@ -230,7 +286,7 @@
{# 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>
<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">
@@ -245,7 +301,7 @@
<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
{{ 'page.presentation.pricing.period_1m'|trans }}
</span>
</label>
@@ -253,8 +309,8 @@
<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>
{{ '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>
@@ -262,8 +318,8 @@
<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>
{{ '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>
@@ -271,8 +327,8 @@
<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>
{{ '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>
@@ -280,26 +336,26 @@
<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>
{{ '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"> HT</span>
<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">
Je crée ma EPage
{{ 'page.presentation.pricing.cta_button'|trans }}
</button>
<p class="text-xs sm:text-sm text-gray-500 mt-4 italic">
Abonnement sans engagement. Renouvellement automatique selon la période choisie.
{{ 'page.presentation.pricing.disclaimer'|trans }}
</p>
</div>
</div>
@@ -307,22 +363,29 @@
<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
{{ 'page.presentation.siteconseil_partner.title'|trans }}
</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 :
{{ '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">Partenaire Recommandé</p>
<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">
Notre partenaire <strong>SARL SITECONSEIL</strong> propose sa solution CMS <strong class="text-yellow-600">Esy-Flex</strong>.
{{ '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">
Créez votre site internet rapidement et profitez d'une offre adaptée.
{{ '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">
Découvrir SITECONSEIL
{{ '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>
@@ -341,6 +404,13 @@
'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');
@@ -351,11 +421,21 @@
priceElement.textContent = data.price + '€';
if (duration === '1M') {
perMonthElement.textContent = 'Renouvellement mensuel';
perMonthElement.textContent = translations.monthly_renewal;
} else if (duration === '12M') {
perMonthElement.innerHTML = `Facturation annuelle. Soit <strong class="text-red-500">${data.label}</strong> en moyenne par mois.`;
// 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 {
perMonthElement.innerHTML = `Facturation pour ${duration.replace('M', ' mois')}. Soit <strong class="text-red-500">${data.label}</strong> en moyenne par mois.`;
// 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;
}
}
}

100
translations/messages.fr.yaml
View File

@@ -693,3 +693,103 @@ events.details.date: Date
events.details.location: Lieu
events.details.organizer: Organisateur
events.details.back_to_list: Retour à la liste des événements
page:
presentation:
siteconseil_partner:
discover_button: Découvrir SITECONSEIL
offer_info: Créez votre site internet rapidement et profitez d'une offre adaptée.
cms_info: Notre partenaire partner_strong propose sa solution CMS cms_strong.
recommended: Partenaire Recommandé
intro: "L'page_span est parfait pour votre vitrine Cosplay, mais si vous souhaitez un strong_tagsite complet, personnalisé et évolutifstrong_end_tag pour votre activité professionnelle ou votre marque personnelle :"
title: 🚀 Votre Site Internet Complet
js:
periodic_billing: Facturation pour %duration% mois. Soit %average_price% en moyenne par mois.
annual_billing: Facturation annuelle. Soit %average_price% en moyenne par mois.
monthly_renewal: Renouvellement mensuel
pricing:
disclaimer: Abonnement sans engagement. Renouvellement automatique selon la période choisie.
cta_button: Je crée la EPage
tax_info: HT
period_12m: 1 An
period_6m: 6 Mois
period_3m: 3 Mois
period_2m: 2 Mois
period_1m: 1 Mois
best_deal: Best Deal!
save_0e: Save 3€
save_2e: Save 2€
save_3e: Save 3€
choose_period: Choisissez Votre Période d'Abonnement
additional_features:
siteconseil_referral: '<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 partner_strong_cyan pour la création de votre site internet sur mesure.</p>'
request_support: Si vous avez besoin de fonctionnalités supplémentaires non disponibles actuellement sur l'page_span, strong_tagdemandez au support E-Cosplaystrong_end_tag.
title: ⚡ BESOIN DE PLUS DE FONCTIONNALITÉS ?
copyright_info:
contact_us: N'hésitez pas à nous contacter en cas de doute sur la légalité de vos contenus.
help_team: L'équipe E-Cosplay est là pour vous aider !
responsibility: Vous êtes l'unique responsable du droit d'auteur (copyright) de toutes les photos et vidéos publiées sur votre page_span. Il est crucial de red_strongremplir correctementstrong_end_tag toutes les informations relatives à la propriété
title: ⚖️ VOS DROITS D'AUTEUR (COPYRIGHT)
domain_info:
partner_purchase: "Vous pouvez également acheter et gérer votre nom de domaine directement chez notre partenaire partner_strong pour simplifier toutes vos démarches techniques."
purchase_title: "Achat/Gestion"
cname_guide: "Il est tout à fait possible de le faire pointer directement sur votre page_span ! Cela nécessite une simple manipulation d'enregistrement DNS (type CNAME) de votre côté."
has_domain_question: "Vous disposez de votre nom de domaine ?"
default_url: "L'URL de votre page sera automatiquement url_part."
no_domain_question: "Vous ne disposez pas de votre propre nom de domaine ?"
title: "Information Technique : Votre Nom de Domaine"
flexibility:
periods_cancel: Annulez à tout moment.
renewal_auto: '<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.</p>'
no_commitment: "Votre abonnement page_span est strong_tagsans engagementstrong_end_tag."
title: "Flexibilité Totale : Offre sans Engagement"
feature:
analytics:
title: 📊 SUIVI & DOCUMENTS À TÉLÉCHARGER
description: "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."
customization:
description: "Votre page_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."
title: 🎨 PERSONNALISATION AVANCÉE
contact:
policy_text: "Politique de données personnelles"
disclaimer: "Les données reçues ne sont ni vendues, ni récupérées par nous, conformément à notre "
description: "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 !"
title: "✉️ CONTACT SANS RISQUE (ANTI-SPAM)"
security:
no_fly_inscription: "strong_tagPas d'inscription à la volée.strong_end_tag"
data_minimum: "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."
encrypted_data: "Pour votre protection, strong_tagtoutes les données de votre page sont chiffréesstrong_end_tag. "
description: "L'accès à la prestation EPage est soumis à la strong_tagvalidation de votre profil par E-Cosplaystrong_end_tag."
title: 🛡️ ACCÈS VALIDÉ & ZONE SÛRE
approval:
title: "🤝 CACHET D'APPROBATION E-COSPLAY"
description: "Bénéficiez de la confiance de la communauté ! Votre page est strong_tagdirectement promuestrong_end_tag sur le site de l'association strong_tagE-Cosplaystrong_end_tag, renforçant votre légitimité."
convention:
title: 📅 CONVENTION RADAR
description: "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."
nexus:
description: "Un seul lien pour tous vos contenus : réseaux sociaux, listes de cadeaux, boutiques, et galeries complètes de vos strong_tagCosplansstrong_end_tag et strong_tagCosplaysstrong_end_tag."
title: 🔗 NEXUS DE VOTRE UNIVERS
seo:
description: "Votre nom sera le premier résultat de recherche ! L'page_span assure une visibilité maximale pour que votre travail soit vu par tous."
title: ✨ OPTIMISATION LÉGENDAIRE (SEO)
intro_paragraph_1: "Vous créez des œuvres d'art, votre présence en ligne devrait l'être aussi ! L'"
intro_paragraph_1_2: " vous offre une plateforme élégante, optimisée pour le cosplay, vous libérant des contraintes techniques"
header: 'Votre page cosplayer(euse)'
title: 'Votre page cosplayer(euse)'
description: 'Atteignez le Niveau S : La vitrine digitale dont vous avez besoin.'
subtitle: 'Atteignez le Niveau S : La vitrine digitale dont vous avez besoin.'
intro_paragraph_2: "Attention, l'page_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_tagvôtrestrong_end_tag, pour centraliser et valoriser votre travail en ligne. warning_tagCe service est exclusivement réservé aux cosplayer(euses) particuliers et n'est pas destiné aux entreprises, associations ou structures commerciales.strong_end_tag"
call_to_action: 'Prêt(e) à rejoindre nos 0 cosplayer(euse)s déjà présent(e)s sur notre plateforme ?'
breadcrumb: 'Votre page cosplayer(euse)'