239 lines
20 KiB
HTML
239 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Vela — Backup Drives</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<style>
|
|
*,*::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)}
|
|
.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)}
|
|
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}
|
|
.en .fr-only,.fr .en-only{display:none!important}
|
|
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;background:var(--nav-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
|
|
.nav-logo{font-weight:800;font-size:1.3rem;letter-spacing:-0.03em;color:var(--text);text-decoration:none}
|
|
.nav-logo .dot{color:var(--accent)}
|
|
.nav-links{display:flex;gap:2rem;align-items:center}
|
|
.nav-links a{color:var(--text-dim);text-decoration:none;font-size:0.875rem;font-weight:500;transition:color .2s}
|
|
.nav-links a:hover{color:var(--text)}
|
|
.nav-links a.active{color:var(--accent)}
|
|
.theme-btn{font-size:1.15rem;background:transparent;border:none;cursor:pointer;padding:.2rem;color:var(--text-dim);transition:color .2s;line-height:1;touch-action:manipulation;display:inline-flex;align-items:center}
|
|
.theme-btn:hover{color:var(--text)}
|
|
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.5rem;border-radius:var(--radius-sm);font-weight:600;font-size:.9rem;text-decoration:none;cursor:pointer;transition:all .2s;border:none;font-family:inherit}
|
|
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 0 24px var(--accent-glow)}
|
|
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
|
|
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
|
|
.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}
|
|
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
|
|
.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 h1{font-size:clamp(2rem,4vw,3.2rem);font-weight:900;letter-spacing:-.04em;line-height:1.1;margin-bottom:1.5rem}
|
|
.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-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-title{font-size:clamp(1.5rem,3vw,2.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}
|
|
.drive-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}
|
|
.drive-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;transition:all .2s}
|
|
.drive-card:hover{border-color:var(--border-hover);background:var(--bg-card-hover)}
|
|
.drive-icon{font-size:2.2rem;margin-bottom:1rem}
|
|
.drive-name{font-size:1.2rem;font-weight:700;margin-bottom:.25rem}
|
|
.drive-type{font-size:.78rem;color:var(--accent);font-family:'Inter',monospace;margin-bottom:1rem}
|
|
.drive-specs{list-style:none}
|
|
.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}
|
|
.drive-specs li:last-child{border-bottom:none}
|
|
.drive-specs .check{color:var(--green)}
|
|
.drive-specs .x{color:var(--red)}
|
|
.drive-price{font-size:.85rem;color:var(--text-dim);margin-top:1.25rem;display:flex;align-items:baseline;gap:.35rem}
|
|
.drive-price .amount{font-size:1.5rem;font-weight:800;color:var(--text)}
|
|
.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-q{font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none}
|
|
.faq-q .arrow{transition:transform .2s;color:var(--text-dim)}
|
|
.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-item.open .faq-a{max-height:300px}
|
|
.faq-a>div{padding-top:1rem}
|
|
.cta-section{text-align:center;padding:5rem 2rem}
|
|
.cta-section h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;margin-bottom:1rem}
|
|
.cta-section p{color:var(--text-dim);margin-bottom:1.5rem}
|
|
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}}
|
|
</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>
|
|
</head>
|
|
<body>
|
|
|
|
<nav>
|
|
<a href="/" class="nav-logo">VELA<span class="dot">.</span></a>
|
|
<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="/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>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero -->
|
|
<section class="hero" id="top">
|
|
<div class="hero-grid">
|
|
<div>
|
|
<div class="hero-badge">
|
|
<span class="en-only">🛡️ Data Protection</span><span class="fr-only">🛡️ Protection des Données</span>
|
|
</div>
|
|
<h1>
|
|
<span class="en-only">Backup drives.<br><span class="highlight">Because data happens.</span></span>
|
|
<span class="fr-only">Disques de sauvegarde.<br><span class="highlight">Parce que les données comptent.</span></span>
|
|
</h1>
|
|
<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="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>
|
|
<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 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 style="font-size:2.5rem;font-weight:800;letter-spacing:-.03em;color:var(--accent)">2x</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>
|
|
</div>
|
|
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center">
|
|
<div style="font-size:2.5rem;font-weight:800;letter-spacing:-.03em;color:var(--green)">24/7</div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Drive Options -->
|
|
<section id="drives">
|
|
<div class="section-inner">
|
|
<div class="section-label"><span class="en-only">Add-ons</span><span class="fr-only">Options</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>
|
|
<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 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>
|
|
<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 -->
|
|
<section class="comparison-section" id="compare">
|
|
<div class="section-inner">
|
|
<div class="section-label"><span class="en-only">At a glance</span><span class="fr-only">Comparatif</span></div>
|
|
<h2 class="section-title"><span class="en-only">Which backup fits?</span><span class="fr-only">Quel backup vous convient ?</span></h2>
|
|
<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>
|
|
</section>
|
|
|
|
<!-- FAQ -->
|
|
<section style="background:var(--bg)">
|
|
<div class="section-inner" style="max-width:720px">
|
|
<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>
|
|
<div class="faq-list">
|
|
<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-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>
|
|
<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-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>
|
|
<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-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>
|
|
<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>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="cta-section" style="border-top:1px solid var(--border)">
|
|
<h2><span class="en-only">Ready to secure your data?</span><span class="fr-only">Prêt à sécuriser vos données ?</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="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>
|
|
<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>
|
|
|
|
<footer>
|
|
<span class="en-only">Vela — Server Installation. Simply.</span>
|
|
<span class="fr-only">Vela — Installation de serveurs. Simplement.</span>
|
|
</footer>
|
|
|
|
<script>
|
|
window.toggleTheme = function() {
|
|
const html = document.documentElement;
|
|
html.classList.toggle('light');
|
|
localStorage.setItem('vela_theme', html.classList.contains('light') ? 'light' : 'dark');
|
|
document.getElementById('themeToggle').textContent = html.classList.contains('light') ? '🌙' : '☀️';
|
|
};
|
|
(function() {
|
|
document.getElementById('themeToggle').textContent = document.documentElement.classList.contains('light') ? '🌙' : '☀️';
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|