fix: revert landing page pipeline to simple flat steps

Author: jimmdd

client/src/Landing.css

@@ -441,237 +441,121 @@
     background: rgba(15, 20, 30, 0.4);
 }
 
-.pipeline-stages {
+.pipeline-chain {
     display: flex;
-    flex-direction: column;
-    gap: 0;
-    margin-top: 2.5rem;
-    max-width: 900px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.pipeline-stage-group {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.stage-header {
-    display: flex;
-    align-items: center;
-    gap: 0.6rem;
-    padding: 0.5rem 1.2rem;
-    border-radius: 12px 12px 0 0;
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    border-bottom: none;
-    width: 100%;
-    max-width: 800px;
-}
-
-.stage-number {
-    width: 22px;
-    height: 22px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.7rem;
-    font-weight: 800;
-    background: rgba(255, 255, 255, 0.06);
-    color: #94a3b8;
-}
-
-.stage-name {
-    font-size: 0.85rem;
-    font-weight: 700;
-    color: #e2e8f0;
-    flex: 1;
-}
-
-.stage-badge {
-    font-size: 0.6rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    padding: 0.2rem 0.5rem;
-    border-radius: 6px;
-}
-
-.stage-badge-l1 {
-    background: rgba(52, 211, 153, 0.1);
-    color: #34d399;
-}
-
-.stage-badge-er {
-    background: rgba(245, 158, 11, 0.1);
-    color: #fbbf24;
-}
-
-.stage-badge-zk {
-    background: rgba(6, 182, 212, 0.1);
-    color: #22d3ee;
-}
-
-.stage-header-l1 {
-    background: rgba(52, 211, 153, 0.03);
-}
-
-.stage-header-er {
-    background: rgba(245, 158, 11, 0.03);
-}
-
-.stage-header-zk {
-    background: rgba(6, 182, 212, 0.03);
-}
-
-.stage-header-l1 .stage-number {
-    background: rgba(52, 211, 153, 0.15);
-    color: #34d399;
-}
-
-.stage-header-er .stage-number {
-    background: rgba(245, 158, 11, 0.15);
-    color: #fbbf24;
-}
-
-.stage-header-zk .stage-number {
-    background: rgba(6, 182, 212, 0.15);
-    color: #22d3ee;
-}
-
-.stage-steps {
-    display: flex;
-    align-items: flex-start;
+    flex-wrap: wrap;
     justify-content: center;
+    align-items: center;
     gap: 0;
-    padding: 1rem 1.2rem 1.2rem;
-    background: rgba(15, 23, 42, 0.4);
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    border-top: none;
-    border-radius: 0 0 12px 12px;
-    width: 100%;
-    max-width: 800px;
-    flex-wrap: wrap;
+    margin-top: 2rem;
 }
 
-.stage-step {
+.pipeline-chain-item {
     display: flex;
-    flex-direction: column;
     align-items: center;
-    gap: 0.5rem;
-    flex: 1;
-    min-width: 120px;
-    max-width: 180px;
-    position: relative;
+    gap: 0;
 }
 
-.step-node {
-    display: flex;
+.chain-node {
+    display: inline-flex;
     align-items: center;
-    gap: 0.3rem;
-    padding: 0.45rem 0.75rem;
+    gap: 0.35rem;
+    padding: 0.4rem 0.7rem;
     border-radius: 8px;
-    transition: all 0.2s;
     cursor: default;
-    white-space: nowrap;
+    transition: all 0.2s;
 }
 
-.step-node:hover {
-    transform: translateY(-2px);
+.chain-node:hover {
+    transform: translateY(-1px);
 }
 
-.step-node-l1 {
+.chain-l1 {
     background: rgba(52, 211, 153, 0.08);
     border: 1px solid rgba(52, 211, 153, 0.15);
 }
 
-.step-node-er {
+.chain-er {
     background: rgba(245, 158, 11, 0.08);
     border: 1px solid rgba(245, 158, 11, 0.15);
 }
 
-.step-node-zk {
-    background: rgba(6, 182, 212, 0.08);
-    border: 1px solid rgba(6, 182, 212, 0.15);
+.chain-privacy {
+    background: rgba(124, 58, 237, 0.08);
+    border: 1px solid rgba(124, 58, 237, 0.15);
 }
 
-.step-icon {
+.chain-icon {
     font-size: 0.9rem;
 }
 
-.step-label {
+.chain-label {
     font-size: 0.75rem;
     font-weight: 700;
     color: #e2e8f0;
 }
 
-.step-node-l1 .step-label {
-    color: #34d399;
+.chain-text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
 }
 
-.step-node-er .step-label {
-    color: #fbbf24;
+.chain-desc {
+    font-size: 0.6rem;
+    color: #64748b;
+    font-weight: 400;
 }
 
-.step-node-zk .step-label {
-    color: #22d3ee;
+.chain-l1 .chain-label {
+    color: #34d399;
 }
 
-.step-helper {
-    font-size: 0.65rem;
-    color: #64748b;
-    text-align: center;
-    line-height: 1.4;
-    max-width: 160px;
-    margin: 0;
+.chain-er .chain-label {
+    color: #fbbf24;
 }
 
-.step-connector {
-    position: absolute;
-    right: -8px;
-    top: 14px;
+.chain-privacy .chain-label {
+    color: #a78bfa;
+}
+
+.chain-arrow {
     color: #334155;
     font-size: 0.7rem;
-    z-index: 1;
+    margin: 0 0.2rem;
 }
 
-.stage-arrow {
+.pipeline-legend {
     display: flex;
     justify-content: center;
-    padding: 0.5rem 0;
-    opacity: 0.5;
+    gap: 1.5rem;
+    margin-top: 1.5rem;
 }
 
-@media (max-width: 768px) {
-    .stage-steps {
-        flex-direction: column;
-        align-items: center;
-        gap: 0.8rem;
-    }
-
-    .stage-step {
-        max-width: 100%;
-        flex-direction: row;
-        gap: 0.8rem;
-    }
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: 0.75rem;
+    color: #64748b;
+}
 
-    .step-helper {
-        text-align: left;
-        max-width: none;
-    }
+.legend-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+}
 
-    .step-connector {
-        display: none;
-    }
+.legend-l1 .legend-dot {
+    background: #34d399;
+}
 
-    .stage-header {
-        max-width: 100%;
-    }
+.legend-er .legend-dot {
+    background: #fbbf24;
+}
 
-    .stage-steps {
-        max-width: 100%;
-    }
+.legend-privacy .legend-dot {
+    background: #a78bfa;
 }
 
 /* ===== WHY TASKFOREST ===== */