fix(portal): fix Paymenter blank page (APP_URL/ASSET_URL/cache) and segment offerings into distinct categories with 0.00 EUR Lite tiers

This commit is contained in:
Mathias 2026-09-09 22:33:30 +02:00
parent 337faf5a45
commit cf2568a626
2 changed files with 347 additions and 244 deletions

View file

@ -4,9 +4,9 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nos Offres & Tarifs | Forgium Cloud</title> <title>Nos Offres & Solutions Cloud | Forgium Cloud</title>
<meta name="description" <meta name="description"
content="Découvrez nos formules d'hébergement : serveurs Minecraft Paper et bots Discord Node.js / Python propulsés par AMD Ryzen et SSD NVMe. Toutes les formules sont à 0.00 € sans engagement."> content="Découvrez les univers d'hébergement Forgium Cloud : Serveurs de Jeux Minecraft, Bots Discord & Scripts, Serveurs VPS Cloud et Hébergement Web & Stockage. Formules Lite 0.00 € disponibles pour chaque univers.">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link <link
@ -21,8 +21,8 @@
<!-- TOPBAR ANNONCE --> <!-- TOPBAR ANNONCE -->
<div class="topbar"> <div class="topbar">
<span class="topbar-tag">Lancement</span> <span class="topbar-tag">Lancement</span>
<span>Accès libre : <strong>Toutes nos formules sont à 0.00 € / mois</strong> sans engagement ni carte bancaire.</span> <span>Accès libre : <strong>Une formule Lite à 0.00 € / mois est disponible dans chaque univers</strong> sans engagement.</span>
<a href="https://client.forgium.fr">Commander maintenant &rarr;</a> <a href="https://client.forgium.fr">Accéder au Portail Client &rarr;</a>
</div> </div>
<!-- NAVBAR HEADER --> <!-- NAVBAR HEADER -->
@ -52,114 +52,35 @@
<main class="container section"> <main class="container section">
<div class="section-title"> <div class="section-title">
<span class="section-badge">Catalogue de Solutions</span> <span class="section-badge">Catalogue Forgium Cloud</span>
<h2>Des Formules Dédiées Pour Chaque Projet</h2> <h2>Nos Univers d'Hébergement</h2>
<p>Ressources physiques garanties et livraison immédiate dès l'inscription.</p> <p>Sélectionnez votre univers. Chaque domaine propose une offre Lite gratuite pour lancer et tester votre projet sans engagement.</p>
</div> </div>
<!-- REASSURANCE BAR --> <!-- ONGLETS CATÉGORIES (Inspiré OuiHeberg / OVHcloud) -->
<div class="reassurance" style="margin-top: 0; margin-bottom: 3.5rem;"> <div class="category-tabs">
<div class="reassurance-item"> <button class="tab-btn active" onclick="switchCategory('minecraft')">
<div class="reassurance-icon"></div> 🎮 Serveurs Minecraft
<span>Livraison en &lt; 15s</span> </button>
</div> <button class="tab-btn" onclick="switchCategory('bots')">
<div class="reassurance-item"> 🤖 Bots Discord & Scripts
<div class="reassurance-icon">🛡️</div> </button>
<span>Protection Anti-DDoS Forgium Shield</span> <button class="tab-btn" onclick="switchCategory('vps')">
</div> 🖥️ Serveurs VPS Cloud
<div class="reassurance-item"> </button>
<div class="reassurance-icon">🇫🇷</div> <button class="tab-btn" onclick="switchCategory('web')">
<span>Hébergé en France</span> 🌐 Hébergement Web & Cloud
</div> </button>
<div class="reassurance-item">
<div class="reassurance-icon">0€</div>
<span>Offres Gratuites Sans Frais Cachés</span>
</div>
</div> </div>
<!-- GRILLE DE PRIX --> <!-- TAB 1 : SERVEURS MINECRAFT -->
<div id="tab-minecraft" class="tab-content active">
<div class="cards-grid"> <div class="cards-grid">
<!-- DISCORD BOT NODE.JS --> <!-- MINECRAFT LITE (0.00 €) -->
<div class="product-card">
<div class="card-tag tag-accent">APPLICATION • 0.00 €</div>
<h3>Discord Bot Node.js</h3>
<p class="card-summary">Exécutez vos bots Discord.js et APIs légères 24h/24 avec redémarrage automatique.</p>
<div class="price-tag">
<span class="val">0.00 €</span>
<span class="cycle">/ mois (Offert)</span>
</div>
<ul class="spec-list">
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
1 vCPU AMD Ryzen 7
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
512 Mo RAM Dédiée
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
2 Go SSD NVMe PCIe 4.0
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
Console interactive et logs en direct
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
Auto-restart en cas de crash
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
Accès SFTP et explorateur web
</li>
</ul>
<a href="https://client.forgium.fr" class="btn btn-block btn-primary">Déployer Gratuitement &rarr;</a>
</div>
<!-- DISCORD BOT PYTHON -->
<div class="product-card">
<div class="card-tag tag-accent">APPLICATION • 0.00 €</div>
<h3>Discord Bot Python</h3>
<p class="card-summary">Hébergement stable pour scripts discord.py, disnake ou microservices FastAPI.</p>
<div class="price-tag">
<span class="val">0.00 €</span>
<span class="cycle">/ mois (Offert)</span>
</div>
<ul class="spec-list">
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
1 vCPU AMD Ryzen 7
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
512 Mo RAM Dédiée
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
2 Go SSD NVMe PCIe 4.0
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
Python 3.11 & 3.12 préconfigurés
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
Installation automatique de requirements.txt
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
Console interactive et sauvegardes
</li>
</ul>
<a href="https://client.forgium.fr" class="btn btn-block btn-primary">Déployer Gratuitement &rarr;</a>
</div>
<!-- MINECRAFT STARTER -->
<div class="product-card popular"> <div class="product-card popular">
<div class="card-tag tag-accent">POPULAIRE • 0.00 €</div> <div class="card-tag tag-accent">LITE • 0.00 €</div>
<h3>Minecraft Paper Starter</h3> <h3>Minecraft Paper Lite</h3>
<p class="card-summary">Le choix idéal pour jouer entre amis avec un moteur Paper 1.20+ fluide et optimisé.</p> <p class="card-summary">Formule découverte pour tester votre serveur entre amis sur moteur Paper 1.20+.</p>
<div class="price-tag"> <div class="price-tag">
<span class="val">0.00 €</span> <span class="val">0.00 €</span>
<span class="cycle">/ mois (Accès Libre)</span> <span class="cycle">/ mois (Accès Libre)</span>
@ -167,7 +88,7 @@
<ul class="spec-list"> <ul class="spec-list">
<li> <li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
1.5 vCPU Cœur Haute Fréquence 1.5 vCPU AMD Ryzen 7
</li> </li>
<li> <li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
@ -179,25 +100,21 @@
</li> </li>
<li> <li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
Paper 1.20+ avec Java 17/21 inclus Console interactive & Éditeur de code intégré
</li> </li>
<li> <li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
Protection Anti-DDoS Forgium Shield Protection Anti-DDoS Forgium Shield
</li> </li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
Sauvegardes automatiques quotidiennes
</li>
</ul> </ul>
<a href="https://client.forgium.fr" class="btn btn-block btn-primary">Lancer mon Serveur &rarr;</a> <a href="https://client.forgium.fr" class="btn btn-block btn-primary">Lancer Gratuitement (0.00 €) &rarr;</a>
</div> </div>
<!-- MINECRAFT COMMUNITY --> <!-- MINECRAFT COMMUNITY (0.00 €) -->
<div class="product-card"> <div class="product-card">
<div class="card-tag tag-accent">DÉCOUVERTE • 0.00 €</div> <div class="card-tag tag-accent">COMMUNAUTÉ • 0.00 €</div>
<h3>Minecraft Community</h3> <h3>Minecraft Community</h3>
<p class="card-summary">Pour les projets associatifs, serveurs Discord et équipes de test en développement.</p> <p class="card-summary">Pour les petits projets communautaires et serveurs semi-publics nécessitant plus de mémoire.</p>
<div class="price-tag"> <div class="price-tag">
<span class="val">0.00 €</span> <span class="val">0.00 €</span>
<span class="cycle">/ mois (Sponsorisé)</span> <span class="cycle">/ mois (Sponsorisé)</span>
@ -209,106 +126,226 @@
</li> </li>
<li> <li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
RAM Haute Performance RAM Adaptative Haute Performance
</li> </li>
<li> <li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
SSD NVMe Dédié SSD NVMe Dédié
</li> </li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
Sauvegardes automatiques quotidiennes
</li>
<li> <li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
Bande passante Fibre 1 Gb/s Bande passante Fibre 1 Gb/s
</li> </li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
Anti-DDoS Shield Inclus
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
Support réactif direct
</li>
</ul> </ul>
<a href="https://client.forgium.fr" class="btn btn-block btn-outline">Commander (0.00 €)</a> <a href="https://client.forgium.fr" class="btn btn-block btn-outline">Commander (0.00 €)</a>
</div> </div>
</div> </div>
<!-- TABLEAU COMPARATIF (Inspiré PlanetHoster & OVHcloud) -->
<section class="section" style="padding-top: 1rem;">
<div class="section-title">
<span class="section-badge">Spécifications Détaillées</span>
<h2>Tableau Comparatif Technique</h2>
<p>Comparez point par point les caractéristiques allouées à chaque formule.</p>
</div> </div>
<div class="matrix-container"> <!-- TAB 2 : BOTS DISCORD -->
<table class="matrix-table"> <div id="tab-bots" class="tab-content">
<thead> <div class="cards-grid">
<tr> <!-- BOT NODE.JS LITE -->
<th>Caractéristiques</th> <div class="product-card">
<th>Bot Discord (Node/Python)</th> <div class="card-tag tag-accent">LITE • 0.00 €</div>
<th>Minecraft Starter</th> <h3>Bot Discord Node.js Lite</h3>
<th>Minecraft Community</th> <p class="card-summary">Exécutez vos bots Discord.js et scripts Node.js 20/22 en continu 24h/24 sans coupure.</p>
</tr> <div class="price-tag">
</thead> <span class="val">0.00 €</span>
<tbody> <span class="cycle">/ mois (Offert)</span>
<tr> </div>
<td><strong>Tarif Mensuel</strong></td> <ul class="spec-list">
<td class="matrix-val">0.00 €</td> <li>
<td class="matrix-val">0.00 €</td> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
<td class="matrix-val">0.00 €</td> 1 vCPU AMD Ryzen 7
</tr> </li>
<tr> <li>
<td><strong>Processeur Alloué</strong></td> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
<td>1 vCPU AMD Ryzen 7</td> 512 Mo RAM Dédiée
<td>1.5 vCPU Dédié</td> </li>
<td>2 vCPU Dédiés</td> <li>
</tr> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
<tr> 2 Go SSD NVMe PCIe 4.0
<td><strong>Mémoire RAM Garantie</strong></td> </li>
<td>512 Mo DDR4</td> <li>
<td>1536 Mo (1.5 Go)</td> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
<td>RAM Étendue</td> Auto-restart en cas de crash
</tr> </li>
<tr> <li>
<td><strong>Stockage SSD NVMe</strong></td> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
<td>2 Go Ultra-Rapide</td> Console temps réel et logs SFTP
<td>5 Go PCIe 4.0</td> </li>
<td>SSD NVMe Dédié</td> </ul>
</tr> <a href="https://client.forgium.fr" class="btn btn-block btn-primary">Déployer Gratuitement &rarr;</a>
<tr> </div>
<td><strong>Protection DDoS Forgium Shield</strong></td>
<td>✓ L3 / L4 / L7</td> <!-- BOT PYTHON LITE -->
<td>✓ L3 / L4 / L7 Game</td> <div class="product-card">
<td>✓ L3 / L4 / L7 Game</td> <div class="card-tag tag-accent">LITE • 0.00 €</div>
</tr> <h3>Bot Discord Python Lite</h3>
<tr> <p class="card-summary">Hébergement stable pour vos scripts discord.py, disnake ou microservices FastAPI.</p>
<td><strong>Sauvegardes Automatiques</strong></td> <div class="price-tag">
<td>✓ 1 Snapshot</td> <span class="val">0.00 €</span>
<td>✓ 1 Sauvegarde Quotidienne</td> <span class="cycle">/ mois (Offert)</span>
<td>✓ Multiples Snapshots</td> </div>
</tr> <ul class="spec-list">
<tr> <li>
<td><strong>Console & Accès Fichiers</strong></td> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
<td>✓ Console & SFTP</td> 1 vCPU AMD Ryzen 7
<td>✓ Console & Éditeur Pro</td> </li>
<td>✓ Console & Éditeur Pro</td> <li>
</tr> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
<tr> 512 Mo RAM Dédiée
<td><strong>Engagement</strong></td> </li>
<td>Sans engagement</td> <li>
<td>Sans engagement</td> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
<td>Sans engagement</td> 2 Go SSD NVMe PCIe 4.0
</tr> </li>
<tr> <li>
<td><strong>Action</strong></td> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
<td><a href="https://client.forgium.fr" class="btn btn-outline" style="padding:0.4rem 1rem;">Commander</a></td> Installation automatique requirements.txt
<td><a href="https://client.forgium.fr" class="btn btn-primary" style="padding:0.4rem 1rem;">Lancer (0.00 €)</a></td> </li>
<td><a href="https://client.forgium.fr" class="btn btn-outline" style="padding:0.4rem 1rem;">Commander</a></td> <li>
</tr> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
</tbody> Console et redémarrage automatique
</table> </li>
</ul>
<a href="https://client.forgium.fr" class="btn btn-block btn-primary">Déployer Gratuitement &rarr;</a>
</div>
</div>
</div>
<!-- TAB 3 : SERVEURS VPS CLOUD -->
<div id="tab-vps" class="tab-content">
<div class="cards-grid">
<!-- VPS SANDBOX LITE (0.00 €) -->
<div class="product-card popular">
<div class="card-tag tag-accent">LITE SANDBOX • 0.00 €</div>
<h3>VPS Cloud Linux Lite</h3>
<p class="card-summary">Serveur privé virtuel autonome pour apprendre Linux, tester vos scripts ou héberger un service léger.</p>
<div class="price-tag">
<span class="val">0.00 €</span>
<span class="cycle">/ mois (Formule Sandbox)</span>
</div>
<ul class="spec-list">
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
1 vCPU AMD Ryzen 7 Dédié
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
1024 Mo (1 Go) RAM Dédiée
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
10 Go Stockage SSD NVMe
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
Accès Root SSH complet & Clés SSH
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
Debian 12 ou Ubuntu 24.04 au choix
</li>
</ul>
<a href="https://client.forgium.fr" class="btn btn-block btn-primary">Commander mon VPS Lite (0.00 €) &rarr;</a>
</div>
</div>
</div>
<!-- TAB 4 : WEB & CLOUD -->
<div id="tab-web" class="tab-content">
<div class="cards-grid">
<!-- WEB HOSTING LITE (0.00 €) -->
<div class="product-card">
<div class="card-tag tag-accent">LITE • 0.00 €</div>
<h3>Hébergement Web PHP Lite</h3>
<p class="card-summary">Publiez votre site vitrine, portfolio ou API PHP 8.3 avec certificat SSL et base de données inclus.</p>
<div class="price-tag">
<span class="val">0.00 €</span>
<span class="cycle">/ mois (Accès Libre)</span>
</div>
<ul class="spec-list">
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
PHP 8.3-FPM & Nginx Haute Performance
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
1 Base de Données MariaDB/MySQL
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
Certificat SSL HTTPS automatique
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
Sous-domaine personnalisé offert
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
Accès SFTP rapide
</li>
</ul>
<a href="https://client.forgium.fr" class="btn btn-block btn-primary">Créer mon Site Gratuit (0.00 €) &rarr;</a>
</div>
<!-- STOCKAGE CLOUD LITE (0.00 €) -->
<div class="product-card">
<div class="card-tag tag-accent">LITE • 0.00 €</div>
<h3>Stockage Cloud Sécurisé 10 Go</h3>
<p class="card-summary">Espace privé de sauvegarde et de synchronisation pour vos fichiers personnels et archives de jeux.</p>
<div class="price-tag">
<span class="val">0.00 €</span>
<span class="cycle">/ mois (Offert)</span>
</div>
<ul class="spec-list">
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
10 Go de Stockage Sécurisé
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
Accès universel SFTP & WebDAV
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
Chiffrement des données au repos
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
Sauvegardes redondées
</li>
</ul>
<a href="https://client.forgium.fr" class="btn btn-block btn-outline">Commander (0.00 €)</a>
</div>
</div>
</div>
<!-- REASSURANCE BAR -->
<div class="reassurance" style="margin-top: 3.5rem;">
<div class="reassurance-item">
<div class="reassurance-icon"></div>
<span>Livraison Automatique en &lt; 15s</span>
</div>
<div class="reassurance-item">
<div class="reassurance-icon">🛡️</div>
<span>Protection Anti-DDoS Forgium Shield</span>
</div>
<div class="reassurance-item">
<div class="reassurance-icon">🇫🇷</div>
<span>Serveurs Hébergés en France</span>
</div>
<div class="reassurance-item">
<div class="reassurance-icon">0€</div>
<span>Toutes les Formules Lite à 0.00 €</span>
</div>
</div> </div>
</section>
</main> </main>
<!-- FOOTER --> <!-- FOOTER -->
@ -347,6 +384,21 @@
</div> </div>
</footer> </footer>
<!-- SCRIPT DE COMMUTATION D'ONGLETS SANS RELOAD -->
<script>
function switchCategory(cat) {
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
const targetTab = document.getElementById('tab-' + cat);
if (targetTab) {
targetTab.classList.add('active');
}
event.currentTarget.classList.add('active');
}
</script>
</body> </body>
</html> </html>

View file

@ -360,6 +360,57 @@ body {
margin: 0 auto; margin: 0 auto;
} }
/* CATEGORY TABS (Inspiré OuiHeberg / OVHcloud) */
.category-tabs {
display: flex;
justify-content: center;
gap: 0.8rem;
margin-bottom: 3.5rem;
flex-wrap: wrap;
}
.tab-btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.75rem 1.6rem;
background: #0d121d;
border: 1px solid var(--border);
border-radius: 9999px;
color: var(--text-muted);
font-size: 0.92rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.tab-btn:hover {
color: var(--text);
border-color: rgba(56, 189, 248, 0.4);
background: #141c2d;
}
.tab-btn.active {
background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(56, 189, 248, 0.2) 100%);
border-color: var(--accent);
color: var(--accent);
box-shadow: 0 0 20px rgba(56, 189, 248, 0.2);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* CARDS GRID */ /* CARDS GRID */
.cards-grid { .cards-grid {
display: grid; display: grid;