oimwiodev/vela-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: backup page is educational, not a product listing — only Plus tiers include backup

Browse Source
This commit is contained in:
root
2026-06-20 17:36:59 +00:00
parent b328f1467d
commit 5fa10281c8
1 changed files with 100 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backup-drives.html
+100 -144
View File
@@ -3,12 +3,12 @@
<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>Vela — Backup Drives</title> <title>Vela — What Is a Backup Drive?</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style> <style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0a0a0b;--bg-card:#121214;--bg-card-hover:#1a1a1e;--border:#1e1e22;--border-hover:#2a2a30;--text:#e8e8ed;--text-dim:#888891;--text-muted:#5c5c66;--accent:#6c5ce7;--accent-hover:#7f6ff0;--accent-glow:rgba(108,92,231,0.15);--green:#00c951;--orange:#ff922b;--red:#ff4757;--radius:12px;--radius-sm:8px;--nav-bg:rgba(10,10,11,0.8)} :root{--bg:#0a0a0b;--bg-card:#121214;--bg-card-hover:#1a1a1e;--border:#1e1e22;--border-hover:#2a2a30;--text:#e8e8ed;--text-dim:#888891;--text-muted:#5c5c66;--accent:#6c5ce7;--accent-hover:#7f6ff0;--accent-glow:rgba(108,92,231,0.15);--green:#00c951;--red:#ff4757;--radius:12px;--radius-sm:8px;--nav-bg:rgba(10,10,11,0.8)}
.light{--bg:#f5f5f7;--bg-card:#ffffff;--bg-card-hover:#f0f0f2;--border:#d2d2d7;--border-hover:#c0c0c5;--text:#1d1d1f;--text-dim:#6e6e73;--text-muted:#aeaeb2;--accent:#5e5ce6;--accent-hover:#4a48d4;--accent-glow:rgba(94,92,230,0.12);--green:#34c759;--orange:#ff9500;--red:#ff3b30;--nav-bg:rgba(245,245,247,0.85)} .light{--bg:#f5f5f7;--bg-card:#ffffff;--bg-card-hover:#f0f0f2;--border:#d2d2d7;--border-hover:#c0c0c5;--text:#1d1d1f;--text-dim:#6e6e73;--text-muted:#aeaeb2;--accent:#5e5ce6;--accent-hover:#4a48d4;--accent-glow:rgba(94,92,230,0.12);--green:#34c759;--red:#ff3b30;--nav-bg:rgba(245,245,247,0.85)}
html{scroll-behavior:smooth} html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased} body{font-family:'Inter',-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
.en .fr-only,.fr .en-only{display:none!important} .en .fr-only,.fr .en-only{display:none!important}
@@ -26,54 +26,44 @@
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)} .btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)} .btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--border-hover);background:var(--bg-card)} .btn-ghost:hover{border-color:var(--border-hover);background:var(--bg-card)}
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:6rem 2rem 4rem;max-width:1200px;margin:0 auto} section{padding:5rem 2rem}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center} .section-inner{max-width:860px;margin:0 auto}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .85rem;border-radius:100px;background:rgba(108,92,231,.1);border:1px solid rgba(108,92,231,.2);font-size:.8rem;color:var(--accent);font-weight:500;margin-bottom:1.5rem;width:fit-content} .hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:6rem 2rem 4rem}
.hero h1{font-size:clamp(2rem,4vw,3.2rem);font-weight:900;letter-spacing:-.04em;line-height:1.1;margin-bottom:1.5rem} .hero h1{font-size:clamp(2rem,4vw,3rem);font-weight:900;letter-spacing:-.04em;line-height:1.15;margin-bottom:1.5rem}
.hero h1 .highlight{color:var(--accent)} .hero h1 .highlight{color:var(--accent)}
.hero p{font-size:1.05rem;color:var(--text-dim);max-width:520px;margin-bottom:2rem;line-height:1.7} .hero p{font-size:1.1rem;color:var(--text-dim);max-width:600px;margin-bottom:2rem;line-height:1.7}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
section{padding:4rem 2rem}
.section-inner{max-width:1000px;margin:0 auto}
.section-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:600;margin-bottom:.75rem} .section-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:600;margin-bottom:.75rem}
.section-title{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;letter-spacing:-.03em;margin-bottom:1rem} .section-title{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;letter-spacing:-.03em;margin-bottom:1rem}
.section-sub{color:var(--text-dim);font-size:1rem;max-width:600px;margin-bottom:2.5rem} .section-sub{color:var(--text-dim);font-size:1rem;max-width:600px;margin-bottom:2.5rem;line-height:1.7}
.drive-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem} .explain-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2.5rem}
.drive-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;transition:all .2s} .explain-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem}
.drive-card:hover{border-color:var(--border-hover);background:var(--bg-card-hover)} .explain-card .icon{font-size:2rem;margin-bottom:1rem}
.drive-icon{font-size:2.2rem;margin-bottom:1rem} .explain-card h3{font-weight:700;font-size:1.1rem;margin-bottom:.6rem}
.drive-name{font-size:1.2rem;font-weight:700;margin-bottom:.25rem} .explain-card p{color:var(--text-dim);font-size:.9rem;line-height:1.6}
.drive-type{font-size:.78rem;color:var(--accent);font-family:'Inter',monospace;margin-bottom:1rem} .highlight-box{background:var(--bg-card);border:1px solid var(--accent);border-radius:var(--radius);padding:2rem;margin-bottom:2.5rem}
.drive-specs{list-style:none} .highlight-box .big-icon{font-size:2.5rem;margin-bottom:1rem}
.drive-specs li{padding:.45rem 0;font-size:.88rem;color:var(--text-dim);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.5rem} .highlight-box h3{font-weight:700;font-size:1.2rem;margin-bottom:.6rem}
.drive-specs li:last-child{border-bottom:none} .highlight-box p{color:var(--text-dim);font-size:.95rem;line-height:1.7;margin-bottom:1rem}
.drive-specs .check{color:var(--green)} .tier-pills{display:flex;gap:.75rem;flex-wrap:wrap}
.drive-specs .x{color:var(--red)} .tier-pill{padding:.5rem 1.2rem;border-radius:100px;font-size:.85rem;font-weight:600}
.drive-price{font-size:.85rem;color:var(--text-dim);margin-top:1.25rem;display:flex;align-items:baseline;gap:.35rem} .tier-pill.plus{background:rgba(0,201,81,.15);color:var(--green);border:1px solid rgba(0,201,81,.25)}
.drive-price .amount{font-size:1.5rem;font-weight:800;color:var(--text)} .tier-pill.base{background:rgba(108,92,231,.1);color:var(--accent);border:1px solid rgba(108,92,231,.2)}
.comparison-section{background:var(--bg-card);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.compare-table{width:100%;border-collapse:collapse;overflow:hidden;display:block;overflow-x:auto}
.compare-table th,.compare-table td{text-align:left;padding:.75rem 1rem;font-size:.85rem;border-bottom:1px solid var(--border)}
.compare-table th{background:rgba(108,92,231,.08);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)}
.compare-table tr:last-child td{border-bottom:none}
.compare-table .yes{color:var(--green);font-weight:600}
.compare-table .no{color:var(--red)}
.faq-item{border-bottom:1px solid var(--border);padding:1.25rem 0} .faq-item{border-bottom:1px solid var(--border);padding:1.25rem 0}
.faq-q{font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none} .faq-q{font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none;font-size:.95rem}
.faq-q .arrow{transition:transform .2s;color:var(--text-dim)} .faq-q .arrow{transition:transform .2s;color:var(--text-dim);font-size:.8rem}
.faq-item.open .faq-q .arrow{transform:rotate(180deg)} .faq-item.open .faq-q .arrow{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s,padding .3s;color:var(--text-dim);font-size:.9rem} .faq-a{max-height:0;overflow:hidden;transition:max-height .3s,padding .3s;color:var(--text-dim);font-size:.9rem;line-height:1.6}
.faq-item.open .faq-a{max-height:300px} .faq-item.open .faq-a{max-height:400px}
.faq-a>div{padding-top:1rem} .faq-a>div{padding-top:.75rem}
.cta-section{text-align:center;padding:5rem 2rem} .cta-section{text-align:center;padding:4rem 2rem;border-top:1px solid var(--border)}
.cta-section h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;margin-bottom:1rem} .cta-section h2{font-size:clamp(1.3rem,2.5vw,1.8rem);font-weight:800;margin-bottom:.75rem}
.cta-section p{color:var(--text-dim);margin-bottom:1.5rem} .cta-section p{color:var(--text-dim);margin-bottom:1.5rem;font-size:.95rem}
footer{border-top:1px solid var(--border);padding:2rem;text-align:center;color:var(--text-muted);font-size:.8rem} footer{border-top:1px solid var(--border);padding:2rem;text-align:center;color:var(--text-muted);font-size:.8rem}
@media(max-width:768px){.hero-grid{grid-template-columns:1fr;gap:2rem}nav{padding:.75rem 1rem}.nav-links{gap:1rem}.nav-links a{font-size:.78rem}.drive-grid{grid-template-columns:1fr}}
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:999;background:var(--bg-card);border-top:1px solid var(--border);padding:1rem 1.5rem;display:none;align-items:center;justify-content:space-between;gap:1rem;font-size:.82rem;color:var(--text-dim);backdrop-filter:blur(12px)} .cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:999;background:var(--bg-card);border-top:1px solid var(--border);padding:1rem 1.5rem;display:none;align-items:center;justify-content:space-between;gap:1rem;font-size:.82rem;color:var(--text-dim);backdrop-filter:blur(12px)}
.cookie-banner.show{display:flex}.cookie-banner p{max-width:600px;line-height:1.5}.cookie-banner a{color:var(--accent);text-decoration:none} .cookie-banner.show{display:flex}.cookie-banner p{max-width:600px;line-height:1.5}.cookie-banner a{color:var(--accent);text-decoration:none}
.cookie-btn{padding:.45rem 1.2rem;border-radius:6px;border:none;background:var(--accent);color:#fff;font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap} .cookie-btn{padding:.45rem 1.2rem;border-radius:6px;border:none;background:var(--accent);color:#fff;font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap}
.cookie-btn:hover{background:var(--accent-hover)} .cookie-btn:hover{background:var(--accent-hover)}
@media(max-width:768px){.explain-grid{grid-template-columns:1fr}nav{padding:.75rem 1rem}.nav-links{gap:1rem}.nav-links a{font-size:.78rem}}
</style> </style>
<script>(function(){var t=localStorage.getItem('vela_theme');if(t==='light'||(!t&&window.matchMedia('(prefers-color-scheme:light)').matches))document.documentElement.classList.add('light');var l=(navigator.language||navigator.userLanguage||'en').slice(0,2);document.documentElement.classList.add(l==='fr'?'fr':'en')})();</script> <script>(function(){var t=localStorage.getItem('vela_theme');if(t==='light'||(!t&&window.matchMedia('(prefers-color-scheme:light)').matches))document.documentElement.classList.add('light');var l=(navigator.language||navigator.userLanguage||'en').slice(0,2);document.documentElement.classList.add(l==='fr'?'fr':'en')})();</script>
</head> </head>
@@ -82,7 +72,6 @@
<nav> <nav>
<a href="/" class="nav-logo">VELA<span class="dot">.</span></a> <a href="/" class="nav-logo">VELA<span class="dot">.</span></a>
<div class="nav-links"> <div class="nav-links">
<a href="/"><span class="en-only">Home</span><span class="fr-only">Accueil</span></a>
<a href="/check-order.html"><span class="en-only">Check Order</span><span class="fr-only">Suivi</span></a> <a href="/check-order.html"><span class="en-only">Check Order</span><span class="fr-only">Suivi</span></a>
<a href="/backup-drives.html" class="active"><span class="en-only">Backup Drives</span><span class="fr-only">Disques Backup</span></a> <a href="/backup-drives.html" class="active"><span class="en-only">Backup Drives</span><span class="fr-only">Disques Backup</span></a>
<button class="theme-btn" id="themeToggle" onclick="toggleTheme()" title="Toggle theme"></button> <button class="theme-btn" id="themeToggle" onclick="toggleTheme()" title="Toggle theme"></button>
@@ -91,134 +80,102 @@
<!-- Hero --> <!-- Hero -->
<section class="hero" id="top"> <section class="hero" id="top">
<div class="hero-grid"> <div class="section-inner">
<div> <h1>
<div class="hero-badge"> <span class="en-only">What's a backup drive?<br><span class="highlight">Your data's second copy.</span></span>
<span class="en-only">🛡️ Data Protection</span><span class="fr-only">🛡️ Protection des Données</span> <span class="fr-only">C'est quoi un backup ?<br><span class="highlight">Une copie de vos données.</span></span>
</h1>
<p class="en-only">A backup drive is a second hard drive inside your server that automatically makes copies of your data. If the main drive ever fails, your files, databases, and settings are safe — no data loss, no downtime.</p>
<p class="fr-only">Un disque de sauvegarde est un second disque dur dans votre serveur qui copie automatiquement vos données. Si le disque principal tombe en panne, vos fichiers, bases de données et réglages sont préservés.</p>
<a href="#explain" class="btn btn-primary"><span class="en-only">How It Works →</span><span class="fr-only">Comment ça marche →</span></a>
</div>
</section>
<!-- Explain -->
<section id="explain">
<div class="section-inner">
<div class="section-label"><span class="en-only">How It Works</span><span class="fr-only">Fonctionnement</span></div>
<h2 class="section-title"><span class="en-only">Two drives. One job: keep your data safe.</span><span class="fr-only">Deux disques. Un but : protéger vos données.</span></h2>
<p class="section-sub en-only">The backup process is fully automated. Once configured, you don't have to think about it.</p>
<p class="section-sub fr-only">Le processus est entièrement automatisé. Une fois configuré, vous n'avez plus à y penser.</p>
<div class="explain-grid">
<div class="explain-card">
<div class="icon">💿</div>
<h3 class="en-only">Main Drive</h3>
<h3 class="fr-only">Disque Principal</h3>
<p class="en-only">Where your OS, apps, and live data live. This is the drive you use every day.</p>
<p class="fr-only">Où se trouvent votre OS, vos applications et vos données actives. C'est le disque que vous utilisez au quotidien.</p>
</div> </div>
<h1> <div class="explain-card">
<span class="en-only">Backup drives.<br><span class="highlight">Because data happens.</span></span> <div class="icon">💾</div>
<span class="fr-only">Disques de sauvegarde.<br><span class="highlight">Parce que les données comptent.</span></span> <h3 class="en-only">Backup Drive</h3>
</h1> <h3 class="fr-only">Disque Backup</h3>
<p class="en-only">Every server tier can be upgraded with an automated backup drive. We handle the setup — rsync, snapshots, or whatever makes sense for your use case.</p> <p class="en-only">A second drive that receives an automatic copy of your main drive. Your safety net.</p>
<p class="fr-only">Chaque offre serveur peut être améliorée avec un disque de sauvegarde automatisé. Nous gérons la configuration — rsync, snapshots, selon vos besoins.</p> <p class="fr-only">Un second disque qui reçoit une copie automatique du principal. Votre filet de sécurité.</p>
<div class="hero-actions">
<a href="#drives" class="btn btn-primary"><span class="en-only">See Options →</span><span class="fr-only">Voir les options →</span></a>
<a href="/#contact" class="btn btn-ghost"><span class="en-only">Get a Quote</span><span class="fr-only">Demander un devis</span></a>
</div> </div>
</div> </div>
<div style="display:grid;grid-template-columns:1fr;gap:1rem">
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center"> <div class="highlight-box">
<div style="font-size:2.5rem;font-weight:800;letter-spacing:-.03em;color:var(--accent)">2x</div> <div class="big-icon">🔄</div>
<div style="font-size:.85rem;color:var(--text-dim);margin-top:.25rem"><span class="en-only">Backup tiers available</span><span class="fr-only">Offres backup disponibles</span></div> <h3 class="en-only">Daily automatic sync (rsync + snapshots)</h3>
</div> <h3 class="fr-only">Synchronisation automatique quotidienne (rsync + snapshots)</h3>
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center"> <p class="en-only">Every day, the server compares your main drive to the backup and copies only what changed. Plus, it keeps snapshots — so you can restore files from yesterday, last week, or even last month.</p>
<div style="font-size:2.5rem;font-weight:800;letter-spacing:-.03em;color:var(--green)">24/7</div> <p class="fr-only">Chaque jour, le serveur compare le disque principal au backup et copie uniquement ce qui a changé. Il conserve aussi des snapshots pour restaurer des fichiers d'hier, la semaine dernière ou même du mois dernier.</p>
<div style="font-size:.85rem;color:var(--text-dim);margin-top:.25rem"><span class="en-only">Automated, silent backups</span><span class="fr-only">Sauvegardes automatisées et silencieuses</span></div> <a href="/#tiers" class="btn btn-ghost"><span class="en-only">See Server Tiers →</span><span class="fr-only">Voir les offres →</span></a>
</div>
</div> </div>
</div> </div>
</section> </section>
<!-- Drive Options --> <!-- Who gets it -->
<section id="drives"> <section style="background:var(--bg-card);border-top:1px solid var(--border);border-bottom:1px solid var(--border)">
<div class="section-inner"> <div class="section-inner">
<div class="section-label"><span class="en-only">Add-ons</span><span class="fr-only">Options</span></div> <div class="section-label"><span class="en-only">Availability</span><span class="fr-only">Disponibilité</span></div>
<h2 class="section-title"><span class="en-only">Protect your data without thinking about it.</span><span class="fr-only">Protégez vos données sans y penser.</span></h2> <h2 class="section-title"><span class="en-only">Backup comes with Plus tiers.</span><span class="fr-only">Le backup est inclus dans les offres Plus.</span></h2>
<p class="section-sub en-only">Add a backup drive to any server tier. We configure it, test it, and leave it running silently. You get notified if something goes wrong.</p> <p class="section-sub en-only">Not every tier includes a backup drive. Only the Plus tiers have a second drive with automated backups built in.</p>
<p class="section-sub fr-only">Ajoutez un disque de sauvegarde à n'importe quelle offre. Nous le configurons, le testons, et il tourne en silence. Vous êtes notifié en cas de problème.</p> <p class="section-sub fr-only">Toutes les offres n'incluent pas un backup. Seules les offres Plus ont un second disque avec sauvegarde automatisée.</p>
<div class="drive-grid">
<div class="drive-card">
<div class="drive-icon">💾</div>
<div class="drive-name"><span class="en-only">Backup 512</span><span class="fr-only">Backup 512</span></div>
<div class="drive-type">512 GB SSD</div>
<ul class="drive-specs">
<li><span class="check">✓</span> <span class="en-only">512 GB SATA SSD</span><span class="fr-only">512 Go SSD SATA</span></li>
<li><span class="check">✓</span> <span class="en-only">Daily automated rsync</span><span class="fr-only">Rsync automatisé quotidien</span></li>
<li><span class="check">✓</span> <span class="en-only">Snapshot retention: 7 days</span><span class="fr-only">Rétention snapshots : 7 jours</span></li>
<li><span class="check">✓</span> <span class="en-only">Email alert on failure</span><span class="fr-only">Alerte email en cas d'échec</span></li>
<li><span class="x">✗</span> <span class="en-only">Off-site backup</span><span class="fr-only">Sauvegarde hors-site</span></li>
</ul>
<div class="drive-price"><span class="en-only">Add</span><span class="fr-only">Ajout</span> <span class="amount">—</span></div>
</div>
<div class="drive-card" style="border-color:var(--accent);background:linear-gradient(135deg,rgba(108,92,231,.06),transparent 60%)">
<div class="drive-icon">💿</div>
<div class="drive-name"><span class="en-only">Backup 1TB</span><span class="fr-only">Backup 1 To</span></div>
<div class="drive-type">1 TB SSD</div>
<ul class="drive-specs">
<li><span class="check">✓</span> <span class="en-only">1 TB SATA SSD</span><span class="fr-only">1 To SSD SATA</span></li>
<li><span class="check">✓</span> <span class="en-only">Daily automated rsync</span><span class="fr-only">Rsync automatisé quotidien</span></li>
<li><span class="check">✓</span> <span class="en-only">Snapshot retention: 14 days</span><span class="fr-only">Rétention snapshots : 14 jours</span></li>
<li><span class="check">✓</span> <span class="en-only">Email alert on failure</span><span class="fr-only">Alerte email en cas d'échec</span></li>
<li><span class="x">✗</span> <span class="en-only">Off-site backup</span><span class="fr-only">Sauvegarde hors-site</span></li>
</ul>
<div class="drive-price"><span class="en-only">Add</span><span class="fr-only">Ajout</span> <span class="amount">—</span></div>
</div>
</div>
</div>
</section>
<!-- Comparison --> <div class="tier-pills" style="margin-bottom:2rem">
<section class="comparison-section" id="compare"> <span class="tier-pill base">Rif</span>
<div class="section-inner"> <span class="tier-pill plus">Rif<sup>+</sup> <span class="en-only">✓ Backup</span><span class="fr-only">✓ Backup</span></span>
<div class="section-label"><span class="en-only">At a glance</span><span class="fr-only">Comparatif</span></div> <span class="tier-pill base">Atlas</span>
<h2 class="section-title"><span class="en-only">Which backup fits?</span><span class="fr-only">Quel backup vous convient ?</span></h2> <span class="tier-pill plus">Atlas<sup>+</sup> <span class="en-only">✓ Backup</span><span class="fr-only">✓ Backup</span></span>
<p class="section-sub en-only">Both drives are pre-configured and work out of the box. Choose based on how much data you need to protect.</p>
<p class="section-sub fr-only">Les deux disques sont pré-configurés et fonctionnent immédiatement. Choisissez selon la quantité de données à protéger.</p>
<div class="compare-table">
<table style="width:100%;border-collapse:collapse;min-width:500px">
<thead>
<tr>
<th><span class="en-only">Feature</span><span class="fr-only">Fonctionnalité</span></th>
<th>Backup 512</th>
<th>Backup 1TB</th>
</tr>
</thead>
<tbody>
<tr><td style="font-weight:600"><span class="en-only">Capacity</span><span class="fr-only">Capacité</span></td><td><span class="en-only">512 GB SSD</span><span class="fr-only">512 Go SSD</span></td><td><span class="en-only">1 TB SSD</span><span class="fr-only">1 To SSD</span></td></tr>
<tr><td style="font-weight:600"><span class="en-only">Backup Method</span><span class="fr-only">Méthode</span></td><td colspan="2">rsync + snapshots (btrfs / ZFS)</td></tr>
<tr><td style="font-weight:600"><span class="en-only">Frequency</span><span class="fr-only">Fréquence</span></td><td colspan="2"><span class="en-only">Daily (configurable)</span><span class="fr-only">Quotidienne (configurable)</span></td></tr>
<tr><td style="font-weight:600"><span class="en-only">Snapshot Retention</span><span class="fr-only">Rétention</span></td><td>7 days</td><td>14 days</td></tr>
<tr><td style="font-weight:600"><span class="en-only">Failure Alerts</span><span class="fr-only">Alertes</span></td><td class="yes">✓ Email</td><td class="yes">✓ Email</td></tr>
<tr><td style="font-weight:600"><span class="en-only">Hot-swap</span><span class="fr-only">Remplacement à chaud</span></td><td class="no">✗</td><td class="yes">✓ <span class="en-only">Supported</span><span class="fr-only">Supporté</span></td></tr>
<tr><td style="font-weight:600"><span class="en-only">On-site Install</span><span class="fr-only">Installation sur place</span></td><td class="yes">✓</td><td class="yes">✓</td></tr>
</tbody>
</table>
</div> </div>
<p style="color:var(--text-dim);font-size:.9rem;line-height:1.6">
<span class="en-only">The <strong>Rif+</strong> and <strong>Atlas+</strong> tiers include a backup drive configured out of the box. The base tiers (Rif, Atlas) use a single drive — no backup. If data safety matters to you, go Plus.</span>
<span class="fr-only">Les offres <strong>Rif+</strong> et <strong>Atlas+</strong> incluent un disque de sauvegarde pré-configuré. Les offres de base (Rif, Atlas) utilisent un seul disque. Si la sécurité de vos données compte, choisissez Plus.</span>
</p>
</div> </div>
</section> </section>
<!-- FAQ --> <!-- FAQ -->
<section style="background:var(--bg)"> <section>
<div class="section-inner" style="max-width:720px"> <div class="section-inner" style="max-width:720px">
<div class="section-label">FAQ</div> <div class="section-label">FAQ</div>
<h2 class="section-title"><span class="en-only">Backup questions, answered.</span><span class="fr-only">Questions backup, réponses.</span></h2> <h2 class="section-title"><span class="en-only">Common questions.</span><span class="fr-only">Questions fréquentes.</span></h2>
<div class="faq-list"> <div class="faq-list">
<div class="faq-item" onclick="this.classList.toggle('open')"> <div class="faq-item" onclick="this.classList.toggle('open')">
<div class="faq-q"><span class="en-only">Can I add a backup after the server is installed?</span><span class="fr-only">Puis-je ajouter un backup après installation ?</span><span class="arrow">▾</span></div> <div class="faq-q"><span class="en-only">Can I add a backup drive later?</span><span class="fr-only">Puis-je ajouter un backup plus tard ?</span><span class="arrow">▾</span></div>
<div class="faq-a"><div><span class="en-only">Yes. As long as your server has a free SATA port and physical space, we can add a drive and configure it on a return visit.</span><span class="fr-only">Oui. Tant que votre serveur a un port SATA libre, nous pouvons ajouter un disque et le configurer lors d'une visite.</span></div></div> <div class="faq-a"><div><span class="en-only">No. Backup is a one-time decision — it's only available when you order. Pick a Plus tier if you want it. You can't add it afterwards.</span><span class="fr-only">Non. Le backup se décide à la commande, une seule fois. Prenez une offre Plus si vous le voulez. Vous ne pouvez pas l'ajouter après.</span></div></div>
</div> </div>
<div class="faq-item" onclick="this.classList.toggle('open')"> <div class="faq-item" onclick="this.classList.toggle('open')">
<div class="faq-q"><span class="en-only">What happens if the backup drive fails?</span><span class="fr-only">Que se passe-t-il si le disque backup tombe en panne ?</span><span class="arrow">▾</span></div> <div class="faq-q"><span class="en-only">What happens if the backup drive itself fails?</span><span class="fr-only">Que se passe-t-il si le disque backup tombe en panne ?</span><span class="arrow">▾</span></div>
<div class="faq-a"><div><span class="en-only">You get an email alert. The primary drive keeps running — your server stays up. We can replace the backup drive on-site.</span><span class="fr-only">Vous recevez une alerte email. Le disque principal continue de fonctionner. Nous remplaçons le disque backup sur place.</span></div></div> <div class="faq-a"><div><span class="en-only">You get an email alert. Your main drive keeps running — your server stays up. The backup drive is a safety net, not a single point of failure.</span><span class="fr-only">Vous recevez une alerte email. Le disque principal continue de fonctionner. Le backup est un filet de sécurité, pas un point de défaillance unique.</span></div></div>
</div> </div>
<div class="faq-item" onclick="this.classList.toggle('open')"> <div class="faq-item" onclick="this.classList.toggle('open')">
<div class="faq-q"><span class="en-only">Can I use the backup drive for extra storage?</span><span class="fr-only">Puis-je utiliser le backup comme stockage supplémentaire ?</span><span class="arrow">▾</span></div> <div class="faq-q"><span class="en-only">Can I access files from the backup drive directly?</span><span class="fr-only">Puis-je accéder aux fichiers du backup directement ?</span><span class="arrow">▾</span></div>
<div class="faq-a"><div><span class="en-only">It's possible, but not recommended. The backup drive is sized and configured for its job. Using it for storage can affect backup reliability.</span><span class="fr-only">Possible mais déconseillé. Le disque est dimensionné pour la sauvegarde. L'utiliser pour du stockage peut affecter sa fiabilité.</span></div></div> <div class="faq-a"><div><span class="en-only">Yes, if your server has an active issue, we can mount the backup drive so you can work from it while the main drive is being replaced.</span><span class="fr-only">Oui, si votre serveur a un problème, nous pouvons monter le backup pour que vous travailliez dessus pendant le remplacement du disque principal.</span></div></div>
</div>
<div class="faq-item" onclick="this.classList.toggle('open')">
<div class="faq-q"><span class="en-only">Do I need a Plus tier to add backup?</span><span class="fr-only">Faut-il une offre Plus pour ajouter un backup ?</span><span class="arrow">▾</span></div>
<div class="faq-a"><div><span class="en-only">No. You can add a backup drive to any tier — Rif, Rif+, Atlas, or Atlas+. The Plus tiers include a backup by default.</span><span class="fr-only">Non. Vous pouvez ajouter un backup à n'importe quelle offre — Rif, Rif+, Atlas ou Atlas+. Les offres Plus incluent un backup par défaut.</span></div></div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- CTA --> <!-- CTA -->
<section class="cta-section" style="border-top:1px solid var(--border)"> <section class="cta-section">
<h2><span class="en-only">Ready to secure your data?</span><span class="fr-only">Prêt à sécuriser vos données ?</span></h2> <h2><span class="en-only">Want the backup? Go Plus.</span><span class="fr-only">Vous voulez le backup ? Prenez Plus.</span></h2>
<p class="en-only" style="max-width:450px;margin:0 auto 1.5rem">Add a backup drive to any server tier. We'll include it in the quote.</p> <p class="en-only">Rif+ or Atlas+ — same hardware, second drive included.</p>
<p class="fr-only" style="max-width:450px;margin:0 auto 1.5rem">Ajoutez un disque de sauvegarde à n'importe quelle offre. Nous l'incluons dans le devis.</p> <p class="fr-only">Rif+ ou Atlas+ — même matériel, second disque inclus.</p>
<a href="/#contact" class="btn btn-primary"><span class="en-only">Get a Quote</span><span class="fr-only">Demander un devis</span></a> <a href="/#contact" class="btn btn-primary"><span class="en-only">Get a Quote</span><span class="fr-only">Demander un devis</span></a>
</section> </section>
@@ -245,7 +202,6 @@ window.toggleTheme = function() {
document.getElementById('themeToggle').textContent = document.documentElement.classList.contains('light') ? '🌙' : '☀️'; document.getElementById('themeToggle').textContent = document.documentElement.classList.contains('light') ? '🌙' : '☀️';
})(); })();
// ── Cookie helpers for GDPR ──
function getBannerCookie(name) { function getBannerCookie(name) {
const m = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)'); const m = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
return m ? decodeURIComponent(m[2]) : null; return m ? decodeURIComponent(m[2]) : null;