Remove competitor names, add 'LE BON CHOIX' glow badge on Atlas

This commit is contained in:
2026-06-26 21:22:59 +01:00
parent 903e901640
commit 229d5e2e21
+19 -4
View File
@@ -76,7 +76,7 @@
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.pricing-card {
background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
padding:28px; text-align:center; transition:border-color .2s;
padding:28px; text-align:center; transition:border-color .2s; position:relative; overflow:visible;
}
.pricing-card:hover { border-color:var(--accent); }
.pricing-card h3 { font-size:20px; margin-bottom:4px; }
@@ -87,6 +87,20 @@
.pricing-card .specs li { padding:4px 0; list-style:none; }
.pricing-card .specs li::before { content:"✓ "; color:var(--green); }
/* ── Promo badge ── */
.promo-badge {
position: absolute; top: -12px; right: -12px;
background: var(--accent); color: #fff;
padding: 5px 12px; border-radius: 5px;
font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
z-index: 2;
animation: glow 2s ease-in-out infinite;
}
@keyframes glow {
0%, 100% { box-shadow: 0 0 8px rgba(59,130,246,0.3); }
50% { box-shadow: 0 0 20px rgba(59,130,246,0.6); }
}
/* Why */
.reasons { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; }
.reason { text-align:center; padding:24px; }
@@ -137,7 +151,7 @@
<section class="hero">
<div class="container">
<h1><span class="fr">Reprends le contrôle.<br>de tes données.</span><span class="en">Take back control.<br>of your data.</span></h1>
<p><span class="fr">Arrête de payer Google et iCloud chaque mois. Tes photos, tes fichiers, tes souvenirs — chez toi, sur ton serveur. Tu prends une photo, tu rentres, elle est déjà là. Sans abonnement. Pour toujours.</span><span class="en">Stop paying Google and iCloud every month. Your photos, your files, your memories — at home, on your server. Take a photo, get home, it's already there. No subscription. Forever.</span></p>
<p><span class="fr">Arrête de payer des abonnements chaque mois. Tes photos, tes fichiers, tes souvenirs — chez toi, sur ton serveur. Tu prends une photo, tu rentres, elle est déjà là. Sans abonnement. Pour toujours.</span><span class="en">Stop paying monthly subscriptions. Your photos, your files, your memories — at home, on your server. Take a photo, get home, it's already there. No subscription. Forever.</span></p>
<a href="#pricing" class="btn btn-primary"><span class="fr">Voir les offres</span><span class="en">See plans</span></a>
<a href="https://wa.me/212725569519" class="btn btn-ghost"><span class="fr">WhatsApp</span><span class="en">WhatsApp</span></a>
</div>
@@ -152,7 +166,7 @@
<div class="icon">📱</div>
<h4 class="fr">Stockage plein</h4><h4 class="en">Storage full</h4>
<p class="fr">Les applis de photos et de stockage te demandent de payer tous les mois.</p>
<p class="en">Google Photos or iCloud asks you to pay every month.</p>
<p class="en">Photo and storage apps ask you to pay every month.</p>
</div>
<div class="reason">
<div class="icon">💸</div>
@@ -164,7 +178,7 @@
<div class="icon">🔒</div>
<h4 class="fr">Vos données chez les autres</h4><h4 class="en">Your data on their servers</h4>
<p class="fr">Tes photos de famille sont quelque part sur des serveurs qui ne sont pas à toi.</p>
<p class="en">Your family photos live on Google's servers.</p>
<p class="en">Your family photos are on servers that aren't yours.</p>
</div>
<div class="reason">
<div class="icon">😰</div>
@@ -338,6 +352,7 @@ async function loadPricing() {
const lang = getLang();
grid.innerHTML = tiers.map(t => `
<div class="pricing-card">
${t.name === 'Atlas' ? '<div class="promo-badge">LE BON CHOIX</div>' : ''}
<h3>${t.name}</h3>
<div class="price">${Number(t.sell_price).toLocaleString('fr-MA')} <small>MAD</small></div>
<div class="desc">${(desc[lang]||desc.fr)[t.name] || t.description || ''}</div>