update landing page sections + refine CLI examples

Author: GaspardKirira

css/style.css

@@ -1436,3 +1436,279 @@ td {
     text-align: center;
   }
 }
+/* ===== Hero terminal: VIX READY output ===== */
+
+.terminal-body pre {
+  white-space: pre; /* garde le layout */
+  line-height: 1.55;
+}
+
+.shell-time {
+  color: #93c5fd;
+  font-weight: 500;
+}
+
+.shell-pill {
+  color: #22c55e;
+  font-weight: 700;
+}
+
+.shell-brand {
+  color: #7dd3fc;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+}
+
+.shell-muted {
+  color: #9ca3af;
+}
+
+.shell-success {
+  color: #22c55e;
+  font-weight: 700;
+}
+
+.shell-indent {
+  color: #a5f3fc;
+  font-weight: 600;
+  display: inline-block;
+  width: 2ch; /* aligne les lignes (› / i) */
+}
+
+.shell-label {
+  color: #e5e7eb;
+  font-weight: 600;
+  display: inline-block;
+  width: 9ch; /* aligne "HTTP:", "Threads:" etc */
+}
+
+.shell-value {
+  color: #a7f3d0;
+  font-weight: 600;
+}
+
+.shell-link {
+  color: #a5b4fc;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-color: rgba(165, 180, 252, 0.45);
+}
+.shell-pill-dev {
+  color: #38bdf8; /* bleu dev */
+  font-weight: 800;
+}
+.cpp-comment {
+  color: #6b7280;
+  font-style: italic;
+}
+/* ===== Subtle reveal animation (no framework) ===== */
+.reveal {
+  opacity: 0;
+  transform: translateY(10px);
+  transition: opacity 420ms ease, transform 420ms ease;
+  will-change: opacity, transform;
+}
+
+.reveal.is-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* small premium hover */
+.reveal.card {
+  transition: transform 160ms ease, box-shadow 160ms ease,
+    border-color 160ms ease;
+}
+
+.reveal.card:hover {
+  transform: translateY(-2px);
+  border-color: rgba(34, 197, 154, 0.85);
+  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.75);
+}
+/* ===== Hero text polish ===== */
+.hero-text {
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0));
+  border: 1px solid rgba(34, 197, 154, 0.18);
+  padding: 1rem;
+  border-radius: 16px;
+}
+
+.hero-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+  padding: 0.35rem 0.7rem;
+  border-radius: 999px;
+  background: rgba(2, 44, 34, 0.75);
+  border: 1px solid rgba(45, 212, 191, 0.35);
+  color: #d1fae5;
+  font-size: 0.78rem;
+  margin-bottom: 0.9rem;
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
+}
+
+.hero-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--accent);
+  box-shadow: 0 0 14px rgba(30, 230, 163, 0.65);
+}
+
+.hero-sep {
+  opacity: 0.55;
+}
+
+.hero-actions .btn.ghost {
+  border-color: rgba(45, 212, 191, 0.25);
+  background: transparent;
+  color: #cbd5e1;
+}
+
+.hero-actions .btn.ghost:hover {
+  background: rgba(2, 44, 34, 0.55);
+  border-color: rgba(45, 212, 191, 0.55);
+}
+
+.hero-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.85rem;
+}
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.22rem 0.6rem;
+  border-radius: 999px;
+  border: 1px solid rgba(45, 212, 191, 0.3);
+  background: rgba(2, 44, 34, 0.55);
+  color: #e5f9f6;
+  font-size: 0.78rem;
+  white-space: nowrap;
+}
+
+.hero-bench {
+  margin-top: 1.05rem;
+  max-width: 520px;
+}
+
+.hero-bench-title {
+  font-size: 0.78rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #a7f3d0;
+  margin-bottom: 0.35rem;
+}
+
+.hero-bench-line {
+  color: #cbd5e1;
+  font-size: 0.92rem;
+  line-height: 1.5;
+}
+.hero-text {
+  animation: hero-in 420ms ease-out both;
+}
+
+@keyframes hero-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.hero-panel {
+  animation: hero-in 520ms ease-out both;
+}
+/* Small reveal animation (works with your existing JS .reveal/.is-visible) */
+.reveal {
+  opacity: 0;
+  transform: translateY(10px);
+}
+.reveal.is-visible {
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 0.6s ease, transform 0.6s ease;
+}
+
+/* Architecture */
+.arch-grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 14px;
+  margin-top: 18px;
+}
+.arch-card {
+  grid-column: span 6;
+  overflow: hidden;
+}
+@media (max-width: 900px) {
+  .arch-card {
+    grid-column: span 12;
+  }
+}
+.arch-title {
+  font-weight: 700;
+  font-size: 1.02rem;
+  margin-bottom: 0.35rem;
+}
+.arch-desc {
+  opacity: 0.9;
+  line-height: 1.55;
+  margin-bottom: 0.75rem;
+}
+.arch-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+/* CLI grid */
+.cli-grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 14px;
+  margin-top: 18px;
+}
+.cli-grid .code-card {
+  grid-column: span 6;
+}
+@media (max-width: 900px) {
+  .cli-grid .code-card {
+    grid-column: span 12;
+  }
+}
+
+/* Roadmap */
+.roadmap {
+  margin-top: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.road-item {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+.road-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  margin-top: 7px;
+  background: rgba(255, 255, 255, 0.45);
+  flex: 0 0 auto;
+}
+.road-title {
+  font-weight: 700;
+  margin-bottom: 2px;
+}
+.road-desc {
+  opacity: 0.9;
+  line-height: 1.55;
+}