224 lines
16 KiB
HTML
224 lines
16 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 — 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">
|
|
<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;--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;--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)}
|
|
section{padding:5rem 2rem}
|
|
.section-inner{max-width:860px;margin:0 auto}
|
|
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:6rem 2rem 4rem}
|
|
.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 p{font-size:1.1rem;color:var(--text-dim);max-width:600px;margin-bottom:2rem;line-height:1.7}
|
|
.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,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;line-height:1.7}
|
|
.explain-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2.5rem}
|
|
.explain-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem}
|
|
.explain-card .icon{font-size:2rem;margin-bottom:1rem}
|
|
.explain-card h3{font-weight:700;font-size:1.1rem;margin-bottom:.6rem}
|
|
.explain-card p{color:var(--text-dim);font-size:.9rem;line-height:1.6}
|
|
.highlight-box{background:var(--bg-card);border:1px solid var(--accent);border-radius:var(--radius);padding:2rem;margin-bottom:2.5rem}
|
|
.highlight-box .big-icon{font-size:2.5rem;margin-bottom:1rem}
|
|
.highlight-box h3{font-weight:700;font-size:1.2rem;margin-bottom:.6rem}
|
|
.highlight-box p{color:var(--text-dim);font-size:.95rem;line-height:1.7;margin-bottom:1rem}
|
|
.tier-pills{display:flex;gap:.75rem;flex-wrap:wrap}
|
|
.tier-pill{padding:.5rem 1.2rem;border-radius:100px;font-size:.85rem;font-weight:600}
|
|
.tier-pill.plus{background:rgba(0,201,81,.15);color:var(--green);border:1px solid rgba(0,201,81,.25)}
|
|
.tier-pill.base{background:rgba(108,92,231,.1);color:var(--accent);border:1px solid rgba(108,92,231,.2)}
|
|
.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;font-size:.95rem}
|
|
.faq-q .arrow{transition:transform .2s;color:var(--text-dim);font-size:.8rem}
|
|
.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;line-height:1.6}
|
|
.faq-item.open .faq-a{max-height:400px}
|
|
.faq-a>div{padding-top:.75rem}
|
|
.cta-section{text-align:center;padding:4rem 2rem;border-top:1px solid var(--border)}
|
|
.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;font-size:.95rem}
|
|
footer{border-top:1px solid var(--border);padding:2rem;text-align:center;color:var(--text-muted);font-size:.8rem}
|
|
.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-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)}
|
|
@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>
|
|
<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="/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="section-inner">
|
|
<h1>
|
|
<span class="en-only">What's a backup drive?<br><span class="highlight">Your data's second copy.</span></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 class="explain-card">
|
|
<div class="icon">💾</div>
|
|
<h3 class="en-only">Backup Drive</h3>
|
|
<h3 class="fr-only">Disque Backup</h3>
|
|
<p class="en-only">A second drive that receives an automatic copy of your main drive. Your safety net.</p>
|
|
<p class="fr-only">Un second disque qui reçoit une copie automatique du principal. Votre filet de sécurité.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlight-box">
|
|
<div class="big-icon">🔄</div>
|
|
<h3 class="en-only">Daily automatic sync (rsync + snapshots)</h3>
|
|
<h3 class="fr-only">Synchronisation automatique quotidienne (rsync + snapshots)</h3>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
</section>
|
|
|
|
<!-- Who gets it -->
|
|
<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-label"><span class="en-only">Availability</span><span class="fr-only">Disponibilité</span></div>
|
|
<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">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">Toutes les offres n'incluent pas un backup. Seules les offres Plus ont un second disque avec sauvegarde automatisée.</p>
|
|
|
|
<div class="tier-pills" style="margin-bottom:2rem">
|
|
<span class="tier-pill base">Rif</span>
|
|
<span class="tier-pill plus">Rif<sup>+</sup> <span class="en-only">✓ Backup</span><span class="fr-only">✓ Backup</span></span>
|
|
<span class="tier-pill base">Atlas</span>
|
|
<span class="tier-pill plus">Atlas<sup>+</sup> <span class="en-only">✓ Backup</span><span class="fr-only">✓ Backup</span></span>
|
|
</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>
|
|
</section>
|
|
|
|
<!-- FAQ -->
|
|
<section>
|
|
<div class="section-inner" style="max-width:720px">
|
|
<div class="section-label">FAQ</div>
|
|
<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-item" onclick="this.classList.toggle('open')">
|
|
<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">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 class="faq-item" onclick="this.classList.toggle('open')">
|
|
<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. 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 class="faq-item" onclick="this.classList.toggle('open')">
|
|
<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">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>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="cta-section">
|
|
<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">Rif+ or Atlas+ — same hardware, second drive included.</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>
|
|
</section>
|
|
|
|
<!-- ── GDPR Cookie Banner ── -->
|
|
<div class="cookie-banner" id="cookieBanner">
|
|
<p class="en-only">🍪 This site uses cookies to remember your preferences.</p>
|
|
<p class="fr-only">🍪 Ce site utilise des cookies pour mémoriser vos préférences.</p>
|
|
<button class="cookie-btn" onclick="acceptCookies()"><span class="en-only">Accept</span><span class="fr-only">Accepter</span></button>
|
|
</div>
|
|
|
|
<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') ? '🌙' : '☀️';
|
|
})();
|
|
|
|
function getBannerCookie(name) {
|
|
const m = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
|
|
return m ? decodeURIComponent(m[2]) : null;
|
|
}
|
|
function setBannerCookie(name, value, days) {
|
|
const d = new Date();
|
|
d.setTime(d.getTime() + days * 86400000);
|
|
document.cookie = name + '=' + encodeURIComponent(value) + ';expires=' + d.toUTCString() + ';path=/';
|
|
}
|
|
window.acceptCookies = function() {
|
|
setBannerCookie('vela_gdpr_consent', 'accepted', 365);
|
|
document.getElementById('cookieBanner').classList.remove('show');
|
|
};
|
|
if (!getBannerCookie('vela_gdpr_consent')) {
|
|
document.getElementById('cookieBanner').classList.add('show');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|