149 lines
9.7 KiB
HTML
149 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Vela — Sauvegarde</title>
|
|
<style>
|
|
* { margin:0; padding:0; box-sizing:border-box; }
|
|
:root {
|
|
--bg: #050505; --bg2: #0a0a0a; --surface: #111111; --border: #222222;
|
|
--text: #ffffff; --muted: #888888; --accent: #3b82f6; --accent-hover: #2563eb; --green: #22c55e; --red: #ef4444;
|
|
}
|
|
[data-theme="light"] {
|
|
--bg: #fafafa; --bg2: #f0f0f0; --surface: #ffffff; --border: #e0e0e0;
|
|
--text: #111111; --muted: #666666; --accent: #3b82f6; --accent-hover: #2563eb; --green: #16a34a; --red: #dc2626;
|
|
}
|
|
body { font-family:Inter,system-ui,sans-serif; background:var(--bg); color:var(--text); line-height:1.7; transition:background .2s,color .2s; }
|
|
.container { max-width:800px; margin:0 auto; padding:0 24px; }
|
|
nav { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:800px; margin:0 auto; border-bottom:1px solid var(--border); }
|
|
nav .logo { font-size:20px; font-weight:700; color:var(--text); text-decoration:none; }
|
|
nav a { color:var(--muted); text-decoration:none; font-size:14px; }
|
|
nav a:hover { color:var(--text); }
|
|
.theme-btn { background:none; border:1px solid var(--border); color:var(--muted); padding:6px 12px; border-radius:6px; cursor:pointer; font-size:13px; }
|
|
.theme-btn:hover { color:var(--text); border-color:var(--accent); }
|
|
.lang-btn { background:none; border:1px solid var(--border); color:var(--muted); padding:6px 12px; border-radius:6px; cursor:pointer; font-size:13px; margin-right:8px; }
|
|
.lang-btn:hover { color:var(--text); border-color:var(--accent); }
|
|
|
|
section { padding:60px 0; }
|
|
h1 { font-size:clamp(28px,5vw,44px); font-weight:800; line-height:1.2; margin-bottom:16px; letter-spacing:-.5px; }
|
|
h2 { font-size:24px; font-weight:700; margin:40px 0 16px; }
|
|
p { margin-bottom:16px; color:var(--text); }
|
|
.lead { font-size:18px; color:var(--muted); margin-bottom:32px; }
|
|
|
|
.box { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:28px; margin:24px 0; }
|
|
.box h3 { font-size:18px; margin-bottom:8px; }
|
|
.box.green-border { border-color:var(--green); }
|
|
.highlight { color:var(--accent); font-weight:600; }
|
|
|
|
.comparison { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:32px 0; }
|
|
@media(max-width:600px) { .comparison { grid-template-columns:1fr; } }
|
|
.comparison .col { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:24px; }
|
|
.comparison .col.recommended { border-color:var(--accent); }
|
|
|
|
.btn { display:inline-block; padding:12px 24px; background:var(--accent); color:#fff; border-radius:8px; text-decoration:none; font-weight:600; font-size:14px; }
|
|
.btn:hover { background:var(--accent-hover); }
|
|
|
|
footer { border-top:1px solid var(--border); padding:24px; text-align:center; color:var(--muted); font-size:13px; margin-top:60px; }
|
|
|
|
[lang="en"] .fr { display:none; }
|
|
[lang="fr"] .en { display:none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<nav>
|
|
<a href="/" class="logo">← Vela</a>
|
|
<div style="display:flex;align-items:center;">
|
|
<button class="lang-btn" onclick="toggleLang()" id="langBtn">EN</button>
|
|
<button class="theme-btn" onclick="toggleTheme()" id="themeBtn">☀️</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<section>
|
|
<div class="container">
|
|
<h1><span class="fr">Vos souvenirs sont trop précieux pour n'exister qu'à un seul endroit.</span><span class="en">Your memories are too precious to live in just one place.</span></h1>
|
|
<p class="lead"><span class="fr">La sauvegarde expliquée simplement. Sans jargon.</span><span class="en">Backups explained simply. No jargon.</span></p>
|
|
|
|
<div class="box">
|
|
<h3 class="fr">📱 Imaginez ça</h3><h3 class="en">📱 Imagine this</h3>
|
|
<p><span class="fr">Vous avez 4 000 photos de vos enfants sur votre téléphone. Un jour, vous le faites tomber. Écran noir. Plus rien.</span><span class="en">You have 4,000 photos of your kids on your phone. One day, you drop it. Black screen. Nothing.</span></p>
|
|
<p><span class="fr"><span class="highlight">Sans sauvegarde :</span> ces 4 000 photos ont disparu. Pour toujours.</span><span class="en"><span class="highlight">Without backup:</span> those 4,000 photos are gone. Forever.</span></p>
|
|
<p class="fr"><span class="highlight">Avec Vela :</span> chaque photo que vous prenez est automatiquement copiée sur votre serveur Vela dès que vous rentrez chez vous. Votre téléphone peut mourir, vos photos survivent.</p>
|
|
<p class="en"><span class="highlight">With Vela:</span> every photo you take is automatically copied to your Vela server as soon as you get home. Your phone can die, your photos survive.</p>
|
|
</div>
|
|
|
|
<h2><span class="fr">Comment ça marche</span><span class="en">How it works</span></h2>
|
|
<p class="fr">C'est simple : au lieu d'avoir vos photos et fichiers <strong>uniquement</strong> sur votre téléphone, Vela en garde une copie chez vous. Automatiquement. Sans que vous ayez à faire quoi que ce soit.</p>
|
|
<p class="en">It's simple: instead of having your photos and files <strong>only</strong> on your phone, Vela keeps a copy at home. Automatically. Without you doing anything.</p>
|
|
<p class="fr">C'est comme avoir un deuxième coffre-fort pour vos souvenirs. Si le premier brûle, le deuxième est toujours là.</p>
|
|
<p class="en">It's like having a second safe for your memories. If the first one burns, the second one is still there.</p>
|
|
|
|
<h2><span class="fr">Sauvegarde simple vs redondante</span><span class="en">Simple vs redundant backup</span></h2>
|
|
</div>
|
|
</section>
|
|
|
|
<section style="background:var(--bg2);">
|
|
<div class="container">
|
|
<div class="comparison">
|
|
<div class="col">
|
|
<h3 class="fr">✅ Sauvegarde simple</h3><h3 class="en">✅ Simple backup</h3>
|
|
<p class="fr">Vos données sont copiées sur <strong>un</strong> disque dur.</p>
|
|
<p class="en">Your data is copied to <strong>one</strong> hard drive.</p>
|
|
<p><span class="fr">✅ Protège contre :</span><span class="en">✅ Protects against:</span></p>
|
|
<ul style="color:var(--muted);padding-left:20px;margin-bottom:12px;">
|
|
<li class="fr">Téléphone cassé ou perdu</li><li class="en">Broken or lost phone</li>
|
|
<li class="fr">Suppression accidentelle</li><li class="en">Accidental deletion</li>
|
|
</ul>
|
|
<p><span class="fr">❌ Ne protège pas contre :</span><span class="en">❌ Does not protect against:</span></p>
|
|
<ul style="color:var(--muted);padding-left:20px;">
|
|
<li class="fr">Panne du disque dur</li><li class="en">Hard drive failure</li>
|
|
</ul>
|
|
<p style="margin-top:16px;font-size:14px;color:var(--muted);"><span class="fr">Disponible sur :</span><span class="en">Available on:</span> <strong>Rif, Atlas</strong></p>
|
|
</div>
|
|
<div class="col recommended">
|
|
<h3 class="fr">🛡️ Sauvegarde redondante</h3><h3 class="en">🛡️ Redundant backup</h3>
|
|
<p class="fr">Vos données sont copiées sur <strong>deux</strong> disques durs différents.</p>
|
|
<p class="en">Your data is copied to <strong>two</strong> different hard drives.</p>
|
|
<p class="fr">Si un disque tombe en panne, l'autre a toujours tout. C'est la même protection qu'utilisent les banques et les hôpitaux.</p>
|
|
<p class="en">If one drive fails, the other still has everything. It's the same protection banks and hospitals use.</p>
|
|
<p style="margin-top:16px;font-size:14px;color:var(--accent);"><span class="fr">Disponible sur :</span><span class="en">Available on:</span> <strong>Rif+, Atlas+</strong></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<div class="container">
|
|
<div class="box green-border">
|
|
<h3 class="fr">💡 La règle d'or</h3><h3 class="en">💡 The golden rule</h3>
|
|
<p class="fr"><strong>Si quelque chose n'existe qu'à un seul endroit, ça n'existe pas vraiment.</strong></p>
|
|
<p class="en"><strong>If something only exists in one place, it doesn't really exist.</strong></p>
|
|
<p class="fr">Un téléphone, ce n'est pas un endroit sûr. Un disque dur non plus. Deux disques durs séparés, chez vous : là, vous êtes tranquille.</p>
|
|
<p class="en">A phone is not a safe place. Neither is one hard drive. Two separate hard drives, at home: now you can relax.</p>
|
|
</div>
|
|
|
|
<div style="text-align:center;margin-top:40px;">
|
|
<a href="/#pricing" class="btn"><span class="fr">Voir les offres Vela</span><span class="en">See Vela plans</span></a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div style="font-size:15px;color:var(--text);font-weight:600;margin-bottom:4px;"><span class="fr">Vos données. Chez vous.</span><span class="en">Your data. At home.</span></div>
|
|
<div>Vela © 2026</div>
|
|
</footer>
|
|
|
|
<script>
|
|
function getTheme() { return localStorage.getItem('vela_theme') || 'dark'; }
|
|
function setTheme(t) { document.documentElement.setAttribute('data-theme', t); document.getElementById('themeBtn').textContent = t==='light'?'🌙':'☀️'; localStorage.setItem('vela_theme', t); }
|
|
function toggleTheme() { setTheme(getTheme()==='dark'?'light':'dark'); }
|
|
setTheme(getTheme());
|
|
function getLang() { const p=new URLSearchParams(window.location.search); const l=p.get('lang'); if(l==='fr'||l==='en'){localStorage.setItem('vela_lang',l);return l;} return localStorage.getItem('vela_lang')||'fr'; }
|
|
function setLang(l) { document.documentElement.setAttribute('lang',l); document.getElementById('langBtn').textContent=l==='fr'?'EN':'FR'; localStorage.setItem('vela_lang',l); const u=new URL(window.location); u.searchParams.set('lang',l); window.history.replaceState({},'',u); }
|
|
function toggleLang() { setLang(getLang()==='fr'?'en':'fr'); }
|
|
setLang(getLang());
|
|
</script>
|
|
</body>
|
|
</html>
|