CyberMind-FR
a5cf1cad7a
- Remove all LuCI dependencies (luci-base, rpcd, luci-lib-jsonc) - Remove LuCI-specific files (RPCD backend, ACL, menu, JS views) - Package now only provides local opkg feed and documentation - Remove Packages.sig to avoid signature verification errors - Update local-build.sh to skip signature generation for local feeds Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
989 lines
48 KiB
HTML
989 lines
48 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>SecuBox - Campagne Participative | Cybersécurité Open Source Made in France</title>
|
||
<meta name="description" content="Soutenez SecuBox, l'appliance de cybersécurité open source française. Campagne de financement participatif Q2 2027.">
|
||
<link rel="canonical" href="https://cybermind.fr/secubox">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--sb-bg: #0a0a12;
|
||
--sb-bg-secondary: #0f1019;
|
||
--sb-bg-card: #1a1a24;
|
||
--sb-border: #2a2a3a;
|
||
--sb-text: #f1f5f9;
|
||
--sb-text-muted: #94a3b8;
|
||
--sb-text-dim: #64748b;
|
||
--sb-green: #10b981;
|
||
--sb-cyan: #06b6d4;
|
||
--sb-blue: #3b82f6;
|
||
--sb-purple: #8b5cf6;
|
||
--sb-orange: #f97316;
|
||
--sb-red: #ef4444;
|
||
--sb-gradient: linear-gradient(135deg, #10b981, #06b6d4, #3b82f6);
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: 'Inter', sans-serif; background: var(--sb-bg); color: var(--sb-text); line-height: 1.6; }
|
||
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
|
||
|
||
/* Nav */
|
||
.nav {
|
||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||
background: rgba(10,10,18,0.95); backdrop-filter: blur(10px);
|
||
border-bottom: 1px solid var(--sb-border); padding: 16px 0;
|
||
}
|
||
.nav-content { display: flex; justify-content: space-between; align-items: center; }
|
||
.nav-logo { font-size: 24px; font-weight: 800; background: var(--sb-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-decoration: none; }
|
||
.nav-links { display: flex; gap: 32px; }
|
||
.nav-links a { color: var(--sb-text-muted); text-decoration: none; font-size: 14px; font-weight: 600; transition: color 0.2s; }
|
||
.nav-links a:hover { color: var(--sb-cyan); }
|
||
.nav-cta { padding: 10px 20px; background: var(--sb-gradient); border-radius: 8px; color: white; text-decoration: none; font-size: 14px; font-weight: 700; }
|
||
|
||
/* Hero Campaign */
|
||
.hero-campaign {
|
||
min-height: 100vh; display: flex; align-items: center; padding: 120px 0 80px;
|
||
background: radial-gradient(ellipse at 30% 20%, rgba(16,185,129,0.15) 0%, transparent 50%),
|
||
radial-gradient(ellipse at 70% 80%, rgba(59,130,246,0.1) 0%, transparent 50%);
|
||
}
|
||
.hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; }
|
||
.hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; background: rgba(249,115,22,0.2); border: 1px solid rgba(249,115,22,0.5); border-radius: 30px; font-size: 14px; font-weight: 700; color: var(--sb-orange); margin-bottom: 24px; }
|
||
.hero-badge-pulse { width: 8px; height: 8px; background: var(--sb-orange); border-radius: 50%; animation: pulse 2s infinite; }
|
||
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(249,115,22,0.4); } 50% { box-shadow: 0 0 0 12px rgba(249,115,22,0); } }
|
||
.hero-title { font-size: 56px; font-weight: 800; line-height: 1.1; margin-bottom: 20px; }
|
||
.hero-title span { background: var(--sb-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||
.hero-subtitle { font-size: 20px; color: var(--sb-text-muted); margin-bottom: 32px; line-height: 1.6; }
|
||
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 32px; }
|
||
.hero-stat { text-align: center; padding: 20px; background: var(--sb-bg-card); border: 1px solid var(--sb-border); border-radius: 12px; }
|
||
.hero-stat-value { font-size: 32px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--sb-green); }
|
||
.hero-stat-label { font-size: 13px; color: var(--sb-text-muted); margin-top: 4px; }
|
||
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }
|
||
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 16px 32px; border-radius: 12px; font-size: 16px; font-weight: 700; text-decoration: none; transition: all 0.3s; border: none; cursor: pointer; }
|
||
.btn-primary { background: var(--sb-gradient); color: white; }
|
||
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(16,185,129,0.4); }
|
||
.btn-secondary { background: var(--sb-bg-card); color: var(--sb-text); border: 2px solid var(--sb-border); }
|
||
.btn-secondary:hover { border-color: var(--sb-cyan); }
|
||
|
||
/* Progress Bar */
|
||
.campaign-progress { background: var(--sb-bg-card); border: 1px solid var(--sb-border); border-radius: 20px; padding: 32px; }
|
||
.progress-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 16px; }
|
||
.progress-amount { font-size: 36px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--sb-green); }
|
||
.progress-goal { font-size: 16px; color: var(--sb-text-muted); }
|
||
.progress-bar { height: 16px; background: var(--sb-bg); border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
|
||
.progress-fill { height: 100%; background: var(--sb-gradient); border-radius: 8px; transition: width 1s ease-out; }
|
||
.progress-stats { display: flex; justify-content: space-between; font-size: 14px; color: var(--sb-text-muted); }
|
||
.progress-stats strong { color: var(--sb-text); }
|
||
|
||
/* Section Common */
|
||
.section { padding: 100px 0; }
|
||
.section-alt { background: var(--sb-bg-secondary); }
|
||
.section-header { text-align: center; max-width: 700px; margin: 0 auto 60px; }
|
||
.section-badge { display: inline-block; padding: 8px 20px; background: rgba(6,182,212,0.15); border-radius: 25px; font-size: 14px; font-weight: 700; color: var(--sb-cyan); margin-bottom: 16px; }
|
||
.section-title { font-size: 40px; font-weight: 800; margin-bottom: 16px; }
|
||
.section-desc { font-size: 18px; color: var(--sb-text-muted); }
|
||
|
||
/* Rewards Grid */
|
||
.rewards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
|
||
.reward-card {
|
||
background: var(--sb-bg-card); border: 2px solid var(--sb-border); border-radius: 20px;
|
||
padding: 32px; position: relative; transition: all 0.3s;
|
||
}
|
||
.reward-card:hover { transform: translateY(-5px); border-color: var(--sb-cyan); }
|
||
.reward-card.popular { border-color: var(--sb-green); }
|
||
.reward-card.popular::before {
|
||
content: '⭐ POPULAIRE'; position: absolute; top: -12px; left: 24px;
|
||
background: var(--sb-gradient); color: white; font-size: 11px; font-weight: 800;
|
||
padding: 6px 16px; border-radius: 20px;
|
||
}
|
||
.reward-card.limited::after {
|
||
content: attr(data-remaining); position: absolute; top: 16px; right: 16px;
|
||
background: rgba(239,68,68,0.2); color: var(--sb-red); font-size: 11px; font-weight: 700;
|
||
padding: 4px 12px; border-radius: 20px;
|
||
}
|
||
.reward-icon { font-size: 48px; margin-bottom: 16px; }
|
||
.reward-price { font-family: 'JetBrains Mono', monospace; margin-bottom: 8px; }
|
||
.reward-price .amount { font-size: 40px; font-weight: 800; color: var(--sb-green); }
|
||
.reward-price .currency { font-size: 20px; color: var(--sb-text-muted); }
|
||
.reward-name { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
|
||
.reward-desc { font-size: 14px; color: var(--sb-text-muted); margin-bottom: 20px; }
|
||
.reward-includes { list-style: none; margin-bottom: 24px; }
|
||
.reward-includes li { font-size: 14px; color: var(--sb-text-muted); padding: 8px 0; display: flex; align-items: flex-start; gap: 10px; border-bottom: 1px solid var(--sb-border); }
|
||
.reward-includes li:last-child { border-bottom: none; }
|
||
.reward-includes li::before { content: '✓'; color: var(--sb-green); font-weight: 700; flex-shrink: 0; }
|
||
.reward-backers { font-size: 13px; color: var(--sb-text-dim); margin-bottom: 16px; }
|
||
.reward-btn { width: 100%; padding: 14px; background: var(--sb-green); border: none; border-radius: 10px; color: white; font-size: 15px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
|
||
.reward-btn:hover { background: #0d9668; }
|
||
|
||
/* Timeline Extended */
|
||
.timeline-extended { max-width: 900px; margin: 0 auto; }
|
||
.timeline-phase { margin-bottom: 48px; }
|
||
.phase-header { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
|
||
.phase-icon { width: 60px; height: 60px; background: var(--sb-bg-card); border: 2px solid var(--sb-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; }
|
||
.phase-icon.done { background: rgba(34,197,94,0.2); border-color: #22c55e; }
|
||
.phase-icon.current { background: rgba(249,115,22,0.2); border-color: var(--sb-orange); animation: pulse 2s infinite; }
|
||
.phase-title { font-size: 24px; font-weight: 700; }
|
||
.phase-date { font-size: 14px; color: var(--sb-cyan); font-family: 'JetBrains Mono', monospace; }
|
||
.phase-content { margin-left: 80px; padding: 24px; background: var(--sb-bg-card); border: 1px solid var(--sb-border); border-radius: 16px; }
|
||
.phase-items { list-style: none; }
|
||
.phase-items li { padding: 10px 0; font-size: 15px; color: var(--sb-text-muted); position: relative; padding-left: 28px; }
|
||
.phase-items li::before { content: '→'; color: var(--sb-cyan); position: absolute; left: 0; }
|
||
.phase-items li.done { color: var(--sb-text); }
|
||
.phase-items li.done::before { content: '✓'; color: #22c55e; }
|
||
.phase-progress { margin-top: 6px; }
|
||
.phase-progress-bar { width: 100%; height: 4px; background: rgba(148,163,184,0.2); border-radius: 999px; overflow: hidden; }
|
||
.phase-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg,#10b981,#06b6d4); border-radius: 999px; transition: width 0.8s ease-out; }
|
||
.phase-progress-label { margin-top: 4px; font-size: 12px; font-family: 'JetBrains Mono', monospace; color: var(--sb-text-muted); text-align: right; }
|
||
.triptych-note { margin-top: 6px; font-size: 13px; color: var(--sb-text-muted); line-height: 1.5; }
|
||
.phase-content.triptych-content { margin-left: 0; padding: 0; background: transparent; border: none; }
|
||
.triptych-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
|
||
.triptych-card { background: var(--sb-bg-card); border: 1px solid var(--sb-border); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; height: 100%; }
|
||
.triptych-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(6,182,212,0.15); color: var(--sb-cyan); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
|
||
.triptych-period { font-size: 13px; color: var(--sb-text-muted); margin: 10px 0 18px; font-family: 'JetBrains Mono', monospace; }
|
||
.triptych-items { margin: 0; flex: 1; }
|
||
.triptych-items li { border-bottom: 1px solid rgba(148,163,184,0.15); }
|
||
.triptych-items li:last-child { border-bottom: none; }
|
||
|
||
/* Why Section */
|
||
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
|
||
.why-card { background: var(--sb-bg-card); border: 1px solid var(--sb-border); border-radius: 16px; padding: 32px; text-align: center; transition: all 0.3s; }
|
||
.why-card:hover { transform: translateY(-4px); border-color: var(--sb-green); }
|
||
.why-icon { font-size: 48px; margin-bottom: 16px; }
|
||
.why-title { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
|
||
.why-desc { font-size: 14px; color: var(--sb-text-muted); line-height: 1.6; }
|
||
|
||
/* Team Section */
|
||
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
|
||
.team-card { background: var(--sb-bg-card); border: 1px solid var(--sb-border); border-radius: 16px; padding: 32px; text-align: center; }
|
||
.team-avatar { width: 100px; height: 100px; background: var(--sb-gradient); border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 48px; }
|
||
.team-name { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
|
||
.team-role { font-size: 14px; color: var(--sb-cyan); margin-bottom: 12px; }
|
||
.team-bio { font-size: 14px; color: var(--sb-text-muted); margin-bottom: 16px; }
|
||
.team-links { display: flex; justify-content: center; gap: 12px; }
|
||
.team-links a { color: var(--sb-text-muted); font-size: 13px; text-decoration: none; }
|
||
.team-links a:hover { color: var(--sb-cyan); }
|
||
|
||
/* FAQ */
|
||
.faq-list { max-width: 800px; margin: 0 auto; }
|
||
.faq-item { background: var(--sb-bg-card); border: 1px solid var(--sb-border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
|
||
.faq-question { padding: 20px 24px; font-size: 16px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
|
||
.faq-question:hover { background: rgba(255,255,255,0.02); }
|
||
.faq-icon { font-size: 20px; color: var(--sb-cyan); transition: transform 0.3s; }
|
||
.faq-item.open .faq-icon { transform: rotate(45deg); }
|
||
.faq-answer { padding: 0 24px 20px; font-size: 15px; color: var(--sb-text-muted); line-height: 1.7; display: none; }
|
||
.faq-item.open .faq-answer { display: block; }
|
||
|
||
/* Newsletter Campaign */
|
||
.newsletter-campaign {
|
||
background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(59,130,246,0.1));
|
||
border: 1px solid rgba(16,185,129,0.3); border-radius: 24px; padding: 60px; text-align: center;
|
||
}
|
||
.newsletter-title { font-size: 32px; font-weight: 800; margin-bottom: 12px; }
|
||
.newsletter-desc { font-size: 18px; color: var(--sb-text-muted); margin-bottom: 32px; }
|
||
.newsletter-form { display: flex; gap: 12px; max-width: 500px; margin: 0 auto; }
|
||
.newsletter-input { flex: 1; padding: 16px 24px; background: var(--sb-bg); border: 2px solid var(--sb-border); border-radius: 12px; color: var(--sb-text); font-size: 16px; }
|
||
.newsletter-input:focus { outline: none; border-color: var(--sb-green); }
|
||
.newsletter-perks { display: flex; justify-content: center; gap: 32px; margin-top: 24px; flex-wrap: wrap; }
|
||
.newsletter-perk { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--sb-text-muted); }
|
||
.newsletter-perk::before { content: '✓'; color: var(--sb-green); font-weight: 700; }
|
||
|
||
/* Footer */
|
||
.footer { padding: 60px 0 40px; border-top: 1px solid var(--sb-border); }
|
||
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
|
||
.footer-brand { font-size: 28px; font-weight: 800; background: var(--sb-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 16px; }
|
||
.footer-desc { font-size: 14px; color: var(--sb-text-muted); margin-bottom: 20px; }
|
||
.footer-social { display: flex; gap: 12px; }
|
||
.footer-social a { width: 40px; height: 40px; background: var(--sb-bg-card); border: 1px solid var(--sb-border); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--sb-text-muted); text-decoration: none; transition: all 0.2s; }
|
||
.footer-social a:hover { border-color: var(--sb-cyan); color: var(--sb-cyan); }
|
||
.footer-title { font-size: 14px; font-weight: 700; margin-bottom: 16px; color: var(--sb-text); }
|
||
.footer-links { list-style: none; }
|
||
.footer-links li { margin-bottom: 10px; }
|
||
.footer-links a { font-size: 14px; color: var(--sb-text-muted); text-decoration: none; }
|
||
.footer-links a:hover { color: var(--sb-cyan); }
|
||
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--sb-border); flex-wrap: wrap; gap: 16px; }
|
||
.footer-copy { font-size: 13px; color: var(--sb-text-dim); }
|
||
.footer-copy a { color: var(--sb-cyan); text-decoration: none; }
|
||
.footer-badges { display: flex; gap: 12px; }
|
||
.footer-badge { padding: 6px 12px; background: var(--sb-bg-card); border: 1px solid var(--sb-border); border-radius: 6px; font-size: 11px; color: var(--sb-text-muted); }
|
||
|
||
@media (max-width: 1024px) {
|
||
.hero-grid { grid-template-columns: 1fr; }
|
||
.why-grid { grid-template-columns: 1fr; }
|
||
.footer-grid { grid-template-columns: 1fr 1fr; }
|
||
}
|
||
@media (max-width: 768px) {
|
||
.nav-links { display: none; }
|
||
.hero-title { font-size: 36px; }
|
||
.hero-stats { grid-template-columns: 1fr; }
|
||
.phase-content { margin-left: 0; margin-top: 16px; }
|
||
.newsletter-form { flex-direction: column; }
|
||
.footer-grid { grid-template-columns: 1fr; }
|
||
.footer-bottom { flex-direction: column; text-align: center; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Navigation -->
|
||
<nav class="nav">
|
||
<div class="container nav-content">
|
||
<a href="https://secubox.cybermood.eu" class="nav-logo">SecuBox</a>
|
||
<div class="nav-links">
|
||
<a href="#rewards" data-i18n="campaign.nav.rewards">Contreparties</a>
|
||
<a href="#roadmap" data-i18n="campaign.nav.roadmap">Roadmap</a>
|
||
<a href="#why" data-i18n="campaign.nav.why">Pourquoi</a>
|
||
<a href="#team" data-i18n="campaign.nav.team">Équipe</a>
|
||
<a href="#faq" data-i18n="campaign.nav.faq">FAQ</a>
|
||
</div>
|
||
<a href="#newsletter" class="nav-cta" data-i18n="campaign.nav.signup">🚀 S'inscrire</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero Campaign -->
|
||
<section class="hero-campaign">
|
||
<div class="container">
|
||
<div class="hero-grid">
|
||
<div>
|
||
<div class="hero-badge">
|
||
<span class="hero-badge-pulse"></span>
|
||
<span>Campagne Participative — Lancement Q2 2026 (SecuBox 1.0.0)</span>
|
||
</div>
|
||
<h1 class="hero-title"><span>Soutenez</span> <span>SecuBox 1.0</span></h1>
|
||
<p class="hero-subtitle">
|
||
L'appliance de cybersécurité <strong>100% open source</strong> qui embarque désormais wizard, profils et App Store (Zigbee2MQTT, Lyrion, Domoticz) sur OpenWrt 24.10.
|
||
</p>
|
||
|
||
<div class="hero-stats">
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-value">20</div>
|
||
<div class="hero-stat-label">Modules & Apps</div>
|
||
</div>
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-value">9</div>
|
||
<div class="hero-stat-label">Architectures</div>
|
||
</div>
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-value" data-i18n="campaign.hero.stat2Value">100%</div>
|
||
<div class="hero-stat-label" data-i18n="campaign.hero.stat2Label">Open Source</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero-cta">
|
||
<a href="#rewards" class="btn btn-primary" data-i18n="campaign.hero.btnRewards">🎁 Voir les Contreparties</a>
|
||
<a href="https://secubox.cybermood.eu" class="btn btn-secondary" data-i18n="campaign.hero.btnLearnMore">📖 Découvrir le Projet</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="campaign-progress">
|
||
<div class="progress-header">
|
||
<div>
|
||
<div class="progress-amount">0 €</div>
|
||
<div class="progress-goal">sur 50 000 € objectif</div>
|
||
</div>
|
||
<div style="text-align: right;">
|
||
<div style="font-size: 24px; font-weight: 700; color: var(--sb-orange);">0%</div>
|
||
<div style="font-size: 13px; color: var(--sb-text-muted);">financé</div>
|
||
</div>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="width: 0%;"></div>
|
||
</div>
|
||
<div class="progress-stats">
|
||
<span><strong>0</strong> contributeurs</span>
|
||
<span>Lancement dans <strong>~180 jours</strong> (Q2 2026)</span>
|
||
</div>
|
||
<p style="margin-top: 20px; padding: 16px; background: rgba(249,115,22,0.1); border-radius: 10px; font-size: 14px; color: var(--sb-orange); text-align: center;">
|
||
🔧 Projet en phase d'intégration hardware. Inscrivez-vous pour être notifié du lancement Q2 2026 et bénéficier des tarifs Early Bird !
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Rewards Section -->
|
||
<section class="section section-alt" id="rewards">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-badge" data-i18n="campaign.rewards.badge">🎁 Contreparties</span>
|
||
<h2 class="section-title" data-i18n="campaign.rewards.title">Choisissez votre Pack</h2>
|
||
<p class="section-desc" data-i18n="campaign.rewards.description">Du simple soutien jusqu'à la SecuBox complète avec hardware GlobalScale et support premium.</p>
|
||
</div>
|
||
|
||
<div class="rewards-grid">
|
||
<!-- Supporter -->
|
||
<div class="reward-card">
|
||
<div class="reward-icon">💚</div>
|
||
<div class="reward-price">
|
||
<span class="amount">25</span><span class="currency">€</span>
|
||
</div>
|
||
<h3 class="reward-name">Supporter</h3>
|
||
<p class="reward-desc">Soutenez le projet open source et recevez nos remerciements.</p>
|
||
<ul class="reward-includes">
|
||
<li>Nom dans les remerciements GitHub</li>
|
||
<li>Badge Discord "Early Supporter"</li>
|
||
<li>Newsletter exclusive développeurs</li>
|
||
<li>Stickers SecuBox (x3)</li>
|
||
</ul>
|
||
<div class="reward-backers">Contributeurs illimités</div>
|
||
<button class="reward-btn">Choisir ce Pack</button>
|
||
</div>
|
||
|
||
<!-- Software Only -->
|
||
<div class="reward-card">
|
||
<div class="reward-icon">💾</div>
|
||
<div class="reward-price">
|
||
<span class="amount">49</span><span class="currency">€</span>
|
||
</div>
|
||
<h3 class="reward-name">Software Edition</h3>
|
||
<p class="reward-desc">Tous les modules SecuBox pour votre propre matériel.</p>
|
||
<ul class="reward-includes">
|
||
<li>Tous les avantages Supporter</li>
|
||
<li>20 modules & apps précompilés</li>
|
||
<li>Image OpenWrt personnalisée</li>
|
||
<li>Guide d'installation complet</li>
|
||
<li>Support Discord prioritaire</li>
|
||
</ul>
|
||
<div class="reward-backers">Contributeurs illimités</div>
|
||
<button class="reward-btn">Choisir ce Pack</button>
|
||
</div>
|
||
|
||
<!-- SecuBox Lite -->
|
||
<div class="reward-card popular" data-remaining="100 restants">
|
||
<div class="reward-icon">📦</div>
|
||
<div class="reward-price">
|
||
<span class="amount">199</span><span class="currency">€</span>
|
||
</div>
|
||
<h3 class="reward-name">SecuBox Lite</h3>
|
||
<p class="reward-desc">L'essentiel sur ESPRESSObin Ultra.</p>
|
||
<ul class="reward-includes">
|
||
<li>Tous les avantages Software</li>
|
||
<li>ESPRESSObin Ultra (1GB RAM)</li>
|
||
<li>SecuBox préinstallée</li>
|
||
<li>Boîtier aluminium</li>
|
||
<li>Alimentation EU</li>
|
||
<li>1 an support email</li>
|
||
</ul>
|
||
<div class="reward-backers">🔥 Limité à 100 unités Early Bird</div>
|
||
<button class="reward-btn">Choisir ce Pack</button>
|
||
</div>
|
||
|
||
<!-- SecuBox Pro -->
|
||
<div class="reward-card limited" data-remaining="50 restants">
|
||
<div class="reward-icon">🚀</div>
|
||
<div class="reward-price">
|
||
<span class="amount">349</span><span class="currency">€</span>
|
||
</div>
|
||
<h3 class="reward-name">SecuBox Pro</h3>
|
||
<p class="reward-desc">Performance sur Sheeva64.</p>
|
||
<ul class="reward-includes">
|
||
<li>Tous les avantages Software</li>
|
||
<li>Sheeva64 (4GB RAM, 8GB eMMC)</li>
|
||
<li>WiFi 6 intégré</li>
|
||
<li>Boîtier premium ventilé</li>
|
||
<li>Câble Ethernet Cat6</li>
|
||
<li>2 ans support email prioritaire</li>
|
||
<li>1 session RustDesk setup</li>
|
||
</ul>
|
||
<div class="reward-backers">⚡ Limité à 50 unités Early Bird</div>
|
||
<button class="reward-btn">Choisir ce Pack</button>
|
||
</div>
|
||
|
||
<!-- SecuBox Ultimate -->
|
||
<div class="reward-card limited" data-remaining="25 restants">
|
||
<div class="reward-icon">👑</div>
|
||
<div class="reward-price">
|
||
<span class="amount">599</span><span class="currency">€</span>
|
||
</div>
|
||
<h3 class="reward-name">SecuBox Ultimate</h3>
|
||
<p class="reward-desc">La puissance maximale sur MOCHAbin.</p>
|
||
<ul class="reward-includes">
|
||
<li>Tous les avantages Pro</li>
|
||
<li>MOCHAbin (8GB RAM, NVMe)</li>
|
||
<li>Dual 2.5GbE + 10GbE SFP+</li>
|
||
<li>Stockage NVMe 256GB</li>
|
||
<li>Boîtier rack 1U option</li>
|
||
<li>3 ans support premium</li>
|
||
<li>Abonnement Pro 1 an inclus</li>
|
||
</ul>
|
||
<div class="reward-backers">👑 Limité à 25 unités Early Bird</div>
|
||
<button class="reward-btn">Choisir ce Pack</button>
|
||
</div>
|
||
|
||
<!-- Enterprise -->
|
||
<div class="reward-card limited" data-remaining="10 restants">
|
||
<div class="reward-icon">🏢</div>
|
||
<div class="reward-price">
|
||
<span class="amount">1499</span><span class="currency">€</span>
|
||
</div>
|
||
<h3 class="reward-name">Pack Enterprise</h3>
|
||
<p class="reward-desc">Solution multi-sites pour PME.</p>
|
||
<ul class="reward-includes">
|
||
<li>3x SecuBox Pro (Sheeva64)</li>
|
||
<li>Console centralisée</li>
|
||
<li>VPN site-to-site préconfiguré</li>
|
||
<li>Formation visio 2h</li>
|
||
<li>Support téléphone 1 an</li>
|
||
<li>Abonnement Enterprise 1 an</li>
|
||
<li>Audit configuration inclus</li>
|
||
</ul>
|
||
<div class="reward-backers">🏢 Limité à 10 packs</div>
|
||
<button class="reward-btn">Choisir ce Pack</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Roadmap Extended -->
|
||
<section class="section" id="roadmap">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-badge">🗓️ Roadmap</span>
|
||
<h2 class="section-title">Planning du Projet</h2>
|
||
<p class="section-desc">Un développement transparent avec des jalons clairs et une livraison prévue Q4 2027.</p>
|
||
</div>
|
||
|
||
<div class="timeline-extended">
|
||
<!-- Triptych (Phases 1 à 3) -->
|
||
<div class="timeline-phase">
|
||
<div class="phase-header">
|
||
<div class="phase-icon current">🌀</div>
|
||
<div>
|
||
<h3 class="phase-title">Triptyque — Déploiement simultané des Phases 1 à 3</h3>
|
||
<div class="phase-date">Q4 2024 → Q4 2025</div>
|
||
<p class="triptych-note">Les fondations logicielles, les modules avancés et l'intégration hardware avancent en parallèle pour préparer le lancement de la campagne.</p>
|
||
</div>
|
||
</div>
|
||
<div class="phase-content triptych-content">
|
||
<div class="triptych-grid">
|
||
<div class="triptych-card">
|
||
<div class="triptych-chip">Bloc I · Modules cœur</div>
|
||
<p class="triptych-period">Phase 1 · Q4 2024 — Q1 2025</p>
|
||
<ul class="phase-items triptych-items">
|
||
<li class="done">SecuBox Central Hub
|
||
<div class="phase-progress">
|
||
<div class="phase-progress-bar"><div class="phase-progress-fill" style="width:31%;"></div></div>
|
||
<div class="phase-progress-label">v0.3.1 · 0.31 / 1.00</div>
|
||
</div>
|
||
</li>
|
||
<li class="done">System Hub
|
||
<div class="phase-progress">
|
||
<div class="phase-progress-bar"><div class="phase-progress-fill" style="width:32%;"></div></div>
|
||
<div class="phase-progress-label">v0.3.2 · 0.32 / 1.00</div>
|
||
</div>
|
||
</li>
|
||
<li class="done">CrowdSec Dashboard
|
||
<div class="phase-progress">
|
||
<div class="phase-progress-bar"><div class="phase-progress-fill" style="width:75%;"></div></div>
|
||
<div class="phase-progress-label">v0.2.2 · 0.75 / 1.00</div>
|
||
</div>
|
||
</li>
|
||
<li class="done">Netdata Dashboard
|
||
<div class="phase-progress">
|
||
<div class="phase-progress-bar"><div class="phase-progress-fill" style="width:80%;"></div></div>
|
||
<div class="phase-progress-label">v0.2.2 · 0.80 / 1.00</div>
|
||
</div>
|
||
</li>
|
||
<li class="done">Netifyd Dashboard
|
||
<div class="phase-progress">
|
||
<div class="phase-progress-bar"><div class="phase-progress-fill" style="width:62%;"></div></div>
|
||
<div class="phase-progress-label">v0.2.2 · 0.62 / 1.00</div>
|
||
</div>
|
||
</li>
|
||
<li class="done">Network Modes
|
||
<div class="phase-progress">
|
||
<div class="phase-progress-bar"><div class="phase-progress-fill" style="width:74%;"></div></div>
|
||
<div class="phase-progress-label">v0.3.1 · 0.74 / 1.00</div>
|
||
</div>
|
||
</li>
|
||
<li class="done">WireGuard Dashboard
|
||
<div class="phase-progress">
|
||
<div class="phase-progress-bar"><div class="phase-progress-fill" style="width:78%;"></div></div>
|
||
<div class="phase-progress-label">v0.2.2 · 0.78 / 1.00</div>
|
||
</div>
|
||
</li>
|
||
<li class="done">Client Guardian (Captive Portal v1.0.0)
|
||
<div class="phase-progress">
|
||
<div class="phase-progress-bar"><div class="phase-progress-fill" style="width:67%;"></div></div>
|
||
<div class="phase-progress-label">v0.2.2 · 0.67 / 1.00</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="triptych-card">
|
||
<div class="triptych-chip">Bloc II · Modules avancés</div>
|
||
<p class="triptych-period">Phase 2 · Q1 — Q2 2025</p>
|
||
<ul class="phase-items triptych-items">
|
||
<li class="done">Bandwidth Manager
|
||
<div class="phase-progress">
|
||
<div class="phase-progress-bar"><div class="phase-progress-fill" style="width:68%;"></div></div>
|
||
<div class="phase-progress-label">v0.2.2 · 0.68 / 1.00</div>
|
||
</div>
|
||
</li>
|
||
<li class="done">Auth Guardian
|
||
<div class="phase-progress">
|
||
<div class="phase-progress-bar"><div class="phase-progress-fill" style="width:72%;"></div></div>
|
||
<div class="phase-progress-label">v0.2.2 · 0.72 / 1.00</div>
|
||
</div>
|
||
</li>
|
||
<li class="done">Media Flow
|
||
<div class="phase-progress">
|
||
<div class="phase-progress-bar"><div class="phase-progress-fill" style="width:65%;"></div></div>
|
||
<div class="phase-progress-label">v0.2.2 · 0.65 / 1.00</div>
|
||
</div>
|
||
</li>
|
||
<li class="done">Traffic Shaper
|
||
<div class="phase-progress">
|
||
<div class="phase-progress-bar"><div class="phase-progress-fill" style="width:76%;"></div></div>
|
||
<div class="phase-progress-label">v0.2.2 · 0.76 / 1.00</div>
|
||
</div>
|
||
</li>
|
||
<li class="done">CDN Cache
|
||
<div class="phase-progress">
|
||
<div class="phase-progress-bar"><div class="phase-progress-fill" style="width:60%;"></div></div>
|
||
<div class="phase-progress-label">v0.2.2 · 0.60 / 1.00</div>
|
||
</div>
|
||
</li>
|
||
<li class="done">VHost Manager
|
||
<div class="phase-progress">
|
||
<div class="phase-progress-bar"><div class="phase-progress-fill" style="width:70%;"></div></div>
|
||
<div class="phase-progress-label">v0.2.2 · 0.70 / 1.00</div>
|
||
</div>
|
||
</li>
|
||
<li class="done">KSM Manager
|
||
<div class="phase-progress">
|
||
<div class="phase-progress-bar"><div class="phase-progress-fill" style="width:63%;"></div></div>
|
||
<div class="phase-progress-label">v0.2.2 · 0.63 / 1.00</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="triptych-card">
|
||
<div class="triptych-chip">Bloc III · Intégration hardware</div>
|
||
<p class="triptych-period">Phase 3 · Q2 — Q4 2025 (en cours)</p>
|
||
<ul class="phase-items triptych-items">
|
||
<li class="done">Support ESPRESSObin Ultra (Armbian/OpenWrt)
|
||
<div class="phase-progress"><div class="phase-progress-bar"><div class="phase-progress-fill" style="width:100%;"></div></div><div class="phase-progress-label">v1.0.0 · 1.00 / 1.00</div></div>
|
||
</li>
|
||
<li class="done">Support Sheeva64 avec WiFi 6
|
||
<div class="phase-progress"><div class="phase-progress-bar"><div class="phase-progress-fill" style="width:100%;"></div></div><div class="phase-progress-label">v1.0.0 · 1.00 / 1.00</div></div>
|
||
</li>
|
||
<li class="done">Support MOCHAbin avec 10GbE
|
||
<div class="phase-progress"><div class="phase-progress-bar"><div class="phase-progress-fill" style="width:100%;"></div></div><div class="phase-progress-label">v1.0.0 · 1.00 / 1.00</div></div>
|
||
</li>
|
||
<li class="done">Image SecuBox unifiée multi-plateformes
|
||
<div class="phase-progress"><div class="phase-progress-bar"><div class="phase-progress-fill" style="width:90%;"></div></div><div class="phase-progress-label">0.90 / 1.00</div></div>
|
||
</li>
|
||
<li>Tests de performance et optimisation
|
||
<div class="phase-progress"><div class="phase-progress-bar"><div class="phase-progress-fill" style="width:50%;"></div></div><div class="phase-progress-label">0.50 / 1.00</div></div>
|
||
</li>
|
||
<li>Finalisation documentation technique
|
||
<div class="phase-progress"><div class="phase-progress-bar"><div class="phase-progress-fill" style="width:40%;"></div></div><div class="phase-progress-label">0.40 / 1.00</div></div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Phase 4 -->
|
||
<div class="timeline-phase">
|
||
<div class="phase-header">
|
||
<div class="phase-icon">🧪</div>
|
||
<div>
|
||
<h3 class="phase-title">Phase 4 — Beta Testing</h3>
|
||
<div class="phase-date">Q1 2026</div>
|
||
</div>
|
||
</div>
|
||
<div class="phase-content">
|
||
<ul class="phase-items">
|
||
<li>Recrutement 100 beta testeurs</li>
|
||
<li>Tests en conditions réelles (home, PME)</li>
|
||
<li>Collecte feedback et corrections</li>
|
||
<li>Documentation utilisateur complète</li>
|
||
<li>Certification CE et homologation</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Phase 5 -->
|
||
<div class="timeline-phase">
|
||
<div class="phase-header">
|
||
<div class="phase-icon">🚀</div>
|
||
<div>
|
||
<h3 class="phase-title">Phase 5 — Campagne Crowdfunding</h3>
|
||
<div class="phase-date">Q2 2026</div>
|
||
</div>
|
||
</div>
|
||
<div class="phase-content">
|
||
<ul class="phase-items">
|
||
<li>Lancement campagne Ulule/KissKissBankBank</li>
|
||
<li>Objectif : 50 000 € minimum</li>
|
||
<li>Stretch goals : app mobile, cloud dashboard</li>
|
||
<li>Communication presse tech FR</li>
|
||
<li>Partenariats revendeurs</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Phase 6 -->
|
||
<div class="timeline-phase">
|
||
<div class="phase-header">
|
||
<div class="phase-icon">📦</div>
|
||
<div>
|
||
<h3 class="phase-title">Phase 6 — Production & Livraison</h3>
|
||
<div class="phase-date">Q3 - Q4 2026</div>
|
||
</div>
|
||
</div>
|
||
<div class="phase-content">
|
||
<ul class="phase-items">
|
||
<li>Commande composants GlobalScale</li>
|
||
<li>Assemblage et flashage France</li>
|
||
<li>Contrôle qualité unitaire</li>
|
||
<li>Expédition backers Early Bird</li>
|
||
<li>Expédition backers standard</li>
|
||
<li>Ouverture boutique en ligne</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Development Status Section -->
|
||
<section class="section" id="dev-status">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-badge">📊 État d'avancement</span>
|
||
<h2 class="section-title">Suivez le Développement en Temps Réel</h2>
|
||
<p class="section-desc">Transparence totale sur la progression du projet SecuBox.</p>
|
||
</div>
|
||
|
||
<!-- Development Status Widget -->
|
||
<div id="dev-status-widget"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="dev-status-live">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-badge">📊 Live Widget</span>
|
||
<h2 class="section-title">Live Development Dashboard (System Hub bonus tab)</h2>
|
||
<p class="section-desc">Ce widget est utilisé dans l’onglet bonus “Development Status” de System Hub et SecuBox.</p>
|
||
</div>
|
||
<div id="dev-status-widget"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Why Section -->
|
||
<section class="section section-alt" id="why">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-badge">💡 Pourquoi SecuBox ?</span>
|
||
<h2 class="section-title">Votre Réseau Mérite Mieux</h2>
|
||
<p class="section-desc">Une alternative open source aux appliances propriétaires coûteuses.</p>
|
||
</div>
|
||
|
||
<div class="why-grid">
|
||
<div class="why-card">
|
||
<div class="why-icon">🔓</div>
|
||
<h3 class="why-title">100% Open Source</h3>
|
||
<p class="why-desc">Tout le code est sur GitHub sous licence Apache 2.0. Auditez, modifiez, contribuez. Pas de backdoor, pas de télémétrie cachée.</p>
|
||
</div>
|
||
|
||
<div class="why-card">
|
||
<div class="why-icon">🇫🇷</div>
|
||
<h3 class="why-title">Made in France</h3>
|
||
<p class="why-desc">Conçu et assemblé en France par CyberMind. Support en français, documentation locale, respect du RGPD.</p>
|
||
</div>
|
||
|
||
<div class="why-card">
|
||
<div class="why-icon">💰</div>
|
||
<h3 class="why-title">Prix Juste</h3>
|
||
<p class="why-desc">À partir de 199€ pour une solution complète. Pas d'abonnement obligatoire, le logiciel reste gratuit à vie.</p>
|
||
</div>
|
||
|
||
<div class="why-card">
|
||
<div class="why-icon">🛡️</div>
|
||
<h3 class="why-title">Sécurité Pro</h3>
|
||
<p class="why-desc">CrowdSec threat intelligence, IDS/IPS, VPN WireGuard, pare-feu avancé. Les outils des pros accessibles à tous.</p>
|
||
</div>
|
||
|
||
<div class="why-card">
|
||
<div class="why-icon">⚡</div>
|
||
<h3 class="why-title">Hardware ARM Performant</h3>
|
||
<p class="why-desc">Processeurs Marvell jusqu'à 2GHz quad-core, 8GB RAM, 10GbE. Consommation < 15W, silencieux, compact.</p>
|
||
</div>
|
||
|
||
<div class="why-card">
|
||
<div class="why-icon">🤝</div>
|
||
<h3 class="why-title">Communauté Active</h3>
|
||
<p class="why-desc">Rejoignez des centaines d'utilisateurs sur Discord et GitHub. Entraide, partage de configurations, développement collaboratif.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Team Section -->
|
||
<section class="section" id="team">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-badge">👥 L'Équipe</span>
|
||
<h2 class="section-title">Qui Sommes-Nous ?</h2>
|
||
</div>
|
||
|
||
<div class="team-grid">
|
||
<div class="team-card">
|
||
<div class="team-avatar">🧙♂️</div>
|
||
<h3 class="team-name">Gandalf</h3>
|
||
<div class="team-role">Fondateur & Lead Developer</div>
|
||
<p class="team-bio">25+ ans d'expérience en cybersécurité et systèmes embarqués. Contributeur Linux kernel (SD/MMC drivers), ambassadeur CrowdSec.</p>
|
||
<div class="team-links">
|
||
<a href="https://github.com/gkerma">GitHub</a>
|
||
<a href="https://cybermind.fr">CyberMind.fr</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="team-card">
|
||
<div class="team-avatar">🌐</div>
|
||
<h3 class="team-name">GlobalScale</h3>
|
||
<div class="team-role">Partenaire Hardware</div>
|
||
<p class="team-bio">Leader mondial des SBC ARM Marvell. Fabricant des ESPRESSObin, Sheeva64 et MOCHAbin utilisés par SecuBox.</p>
|
||
<div class="team-links">
|
||
<a href="https://globalscaletechnologies.com">Site officiel</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="team-card">
|
||
<div class="team-avatar">🛡️</div>
|
||
<h3 class="team-name">CrowdSec</h3>
|
||
<div class="team-role">Partenaire Sécurité</div>
|
||
<p class="team-bio">Solution française de cybersécurité collaborative. 15M+ d'IPs malveillantes partagées par la communauté mondiale.</p>
|
||
<div class="team-links">
|
||
<a href="https://crowdsec.net">Site officiel</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FAQ Section -->
|
||
<section class="section section-alt" id="faq">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<span class="section-badge">❓ FAQ</span>
|
||
<h2 class="section-title">Questions Fréquentes</h2>
|
||
</div>
|
||
|
||
<div class="faq-list">
|
||
<div class="faq-item">
|
||
<div class="faq-question">
|
||
Puis-je utiliser SecuBox sur mon propre matériel ?
|
||
<span class="faq-icon">+</span>
|
||
</div>
|
||
<div class="faq-answer">
|
||
Absolument ! Tous les modules SecuBox sont disponibles gratuitement sur GitHub. Vous pouvez les installer sur n'importe quel routeur compatible OpenWrt (x86, ARM, MIPS). Le pack "Software Edition" à 49€ inclut des images précompilées et un support prioritaire.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<div class="faq-question">
|
||
Quelle est la différence avec une box opérateur ou un routeur grand public ?
|
||
<span class="faq-icon">+</span>
|
||
</div>
|
||
<div class="faq-answer">
|
||
SecuBox offre des fonctionnalités de sécurité professionnelles : IDS/IPS avec CrowdSec, VPN WireGuard, DPI, contrôle d'accès réseau, QoS avancée. C'est le niveau de protection d'une entreprise pour votre domicile ou TPE/PME, avec un hardware dédié et optimisé.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<div class="faq-question">
|
||
Les abonnements sont-ils obligatoires ?
|
||
<span class="faq-icon">+</span>
|
||
</div>
|
||
<div class="faq-answer">
|
||
Non. Le logiciel SecuBox est 100% gratuit et le restera. Les abonnements (9€-149€/mois) sont optionnels et ajoutent des services premium : support prioritaire, threat intelligence avancée, backup cloud, monitoring 24/7, etc. Vous pouvez utiliser SecuBox indéfiniment sans aucun abonnement.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<div class="faq-question">
|
||
Quand seront livrées les SecuBox ?
|
||
<span class="faq-icon">+</span>
|
||
</div>
|
||
<div class="faq-answer">
|
||
La campagne de financement est prévue pour Q2 2027. Les livraisons Early Bird commenceront Q3 2027, suivies des livraisons standard Q4 2027. Les contributeurs Software Edition recevront leurs accès immédiatement après la campagne.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<div class="faq-question">
|
||
Quel niveau technique faut-il pour installer SecuBox ?
|
||
<span class="faq-icon">+</span>
|
||
</div>
|
||
<div class="faq-answer">
|
||
Les SecuBox hardware arrivent préconfigurées et prêtes à l'emploi. Branchez, connectez-vous à l'interface web, suivez l'assistant. Pour les utilisateurs avancés, l'accès SSH et la personnalisation complète sont disponibles. Documentation complète et support Discord inclus.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<div class="faq-question">
|
||
Comment contribuer au projet open source ?
|
||
<span class="faq-icon">+</span>
|
||
</div>
|
||
<div class="faq-answer">
|
||
Rejoignez-nous sur GitHub ! Vous pouvez contribuer au code, à la documentation, aux traductions, ou simplement signaler des bugs et proposer des fonctionnalités. Tous les contributeurs actifs sont mentionnés dans les crédits et reçoivent un accès beta prioritaire.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Newsletter Campaign -->
|
||
<section class="section" id="newsletter">
|
||
<div class="container">
|
||
<div class="newsletter-campaign">
|
||
<h2 class="newsletter-title">🚀 Rejoignez l'Aventure SecuBox</h2>
|
||
<p class="newsletter-desc">Inscrivez-vous pour être notifié du lancement et bénéficier des tarifs Early Bird exclusifs.</p>
|
||
<form class="newsletter-form" action="#" method="POST">
|
||
<input type="email" class="newsletter-input" placeholder="votre@email.com" required>
|
||
<button type="submit" class="btn btn-primary">S'inscrire</button>
|
||
</form>
|
||
<div class="newsletter-perks">
|
||
<span class="newsletter-perk">Notification lancement J-1</span>
|
||
<span class="newsletter-perk">-20% Early Bird</span>
|
||
<span class="newsletter-perk">Accès beta privée</span>
|
||
<span class="newsletter-perk">Newsletter mensuelle</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer-grid">
|
||
<div>
|
||
<div class="footer-brand">SecuBox</div>
|
||
<p class="footer-desc">L'appliance de cybersécurité open source Made in France. Protégez votre réseau avec des outils professionnels accessibles.</p>
|
||
<div class="footer-social">
|
||
<a href="https://github.com/CyberMind-FR/secubox-openwrt" title="GitHub">💻</a>
|
||
<a href="https://discord.gg/secubox" title="Discord">💬</a>
|
||
<a href="https://twitter.com/cybermind_fr" title="Twitter">🐦</a>
|
||
<a href="https://linkedin.com/company/cybermind-fr" title="LinkedIn">💼</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="footer-title">Produit</h4>
|
||
<ul class="footer-links">
|
||
<li><a href="https://secubox.cybermood.eu">Présentation</a></li>
|
||
<li><a href="https://secubox.cybermood.eu/#modules">Modules</a></li>
|
||
<li><a href="https://secubox.cybermood.eu/#hardware">Hardware</a></li>
|
||
<li><a href="#rewards">Contreparties</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="footer-title">Ressources</h4>
|
||
<ul class="footer-links">
|
||
<li><a href="https://github.com/CyberMind-FR/secubox-openwrt">GitHub</a></li>
|
||
<li><a href="https://secubox.cybermood.eu/docs">Documentation</a></li>
|
||
<li><a href="https://discord.gg/secubox">Discord</a></li>
|
||
<li><a href="#faq">FAQ</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="footer-title">Entreprise</h4>
|
||
<ul class="footer-links">
|
||
<li><a href="https://cybermind.fr">CyberMind.fr</a></li>
|
||
<li><a href="https://cybermind.fr/contact">Contact</a></li>
|
||
<li><a href="https://cybermind.fr/legal">Mentions légales</a></li>
|
||
<li><a href="https://cybermind.fr/privacy">Confidentialité</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-bottom">
|
||
<p class="footer-copy">
|
||
<a href="https://cybermood.eu">CyberMood.eu</a> © 2025 <a href="https://cybermind.fr">CyberMind.fr</a>
|
||
— Open Source Apache-2.0 — 🇫🇷 Made in France with ❤️
|
||
</p>
|
||
<div class="footer-badges">
|
||
<span class="footer-badge">🔓 Open Source</span>
|
||
<span class="footer-badge">🇫🇷 Made in France</span>
|
||
<span class="footer-badge">🛡️ RGPD Compliant</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// FAQ Toggle
|
||
document.querySelectorAll('.faq-question').forEach(q => {
|
||
q.addEventListener('click', () => {
|
||
q.parentElement.classList.toggle('open');
|
||
});
|
||
});
|
||
|
||
// Smooth scroll
|
||
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
||
a.addEventListener('click', e => {
|
||
e.preventDefault();
|
||
const target = document.querySelector(a.getAttribute('href'));
|
||
if (target) {
|
||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<!-- Development Status Widget -->
|
||
<script src="./dev-status-widget.js"></script>
|
||
|
||
<!-- Multi-language System -->
|
||
<script>
|
||
// Prevent auto-init - we'll init manually after setting up campaign override
|
||
window.I18N_MANUAL_INIT = true;
|
||
</script>
|
||
<script src="/i18n.js"></script>
|
||
<script>
|
||
// Override loadTranslations to load campaign-specific translations
|
||
(async function() {
|
||
if (!window.I18N) {
|
||
console.error('I18N not loaded');
|
||
return;
|
||
}
|
||
|
||
// Override to load campaign.json instead
|
||
I18N.loadTranslations = async function(lang) {
|
||
try {
|
||
const response = await fetch(`/i18n/campaign.json`);
|
||
if (!response.ok) throw new Error(`Failed to load campaign.json`);
|
||
const allTranslations = await response.json();
|
||
|
||
// Set translations for the selected language, wrapped in 'campaign' namespace
|
||
// because HTML uses keys like "campaign.nav.rewards"
|
||
this.translations = {
|
||
campaign: allTranslations[lang] || allTranslations['fr']
|
||
};
|
||
} catch (error) {
|
||
console.error(`Error loading campaign translations:`, error);
|
||
// Fallback to French if loading fails
|
||
if (lang !== 'fr') {
|
||
this.translations = {
|
||
campaign: allTranslations['fr']
|
||
};
|
||
}
|
||
}
|
||
};
|
||
|
||
// Now initialize with campaign translations
|
||
await I18N.init();
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|