Docs section: 3-column cards with labels, descriptions, explore links

Author: prasad-kumkar

src/pages/index.module.css

@@ -326,69 +326,79 @@
 /* ── DOCS ────────────────────────────────────────────────────── */
 
 .docs {
-  padding: 2rem 2rem 4rem;
+  padding: 6rem 2rem 8rem;
   background: #000;
 }
 
 .docsInner {
-  max-width: 700px;
+  max-width: 1100px;
   margin: 0 auto;
 }
 
+.docsGrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.2rem;
+  margin-top: 3rem;
+}
+
 .dCard {
   display: flex;
-  align-items: center;
-  gap: 1.5rem;
-  padding: 1.2rem 1.5rem;
-  margin-bottom: 0.5rem;
+  flex-direction: column;
+  padding: 2rem;
   border: 1px solid rgba(255, 255, 255, 0.06);
-  border-radius: 12px;
+  border-radius: 16px;
   text-decoration: none;
   color: #fff;
-  transition: all 0.2s;
+  transition: all 0.25s;
   background: rgba(255, 255, 255, 0.02);
 }
 
 .dCard:hover {
   text-decoration: none;
   color: #fff;
-  background: rgba(77, 139, 255, 0.05);
-  border-color: rgba(77, 139, 255, 0.2);
+  background: rgba(255, 255, 255, 0.04);
+  border-color: rgba(255, 255, 255, 0.12);
+  transform: translateY(-2px);
 }
 
-.dNum {
-  font-size: 0.75rem;
+.dLabel {
+  font-size: 0.65rem;
   font-weight: 700;
-  color: rgba(255, 255, 255, 0.15);
-  min-width: 1.5rem;
-  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.1em;
+  color: rgba(255, 255, 255, 0.2);
+  margin-bottom: 1.5rem;
 }
 
 .dCard h3 {
-  font-size: 0.95rem;
+  font-size: 1.15rem;
   font-weight: 700;
-  margin: 0 0 0.15rem;
+  margin: 0 0 0.6rem;
+  letter-spacing: -0.01em;
 }
 
 .dCard p {
-  font-size: 0.8rem;
-  color: rgba(255, 255, 255, 0.35);
+  font-size: 0.88rem;
+  color: rgba(255, 255, 255, 0.4);
   margin: 0;
-}
-
-.dCard > div {
+  line-height: 1.6;
   flex: 1;
 }
 
-.dArrow {
-  color: rgba(255, 255, 255, 0.1);
-  flex-shrink: 0;
+.dLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-top: 1.5rem;
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.3);
   transition: all 0.2s;
 }
 
-.dCard:hover .dArrow {
+.dCard:hover .dLink {
   color: #4d8bff;
-  transform: translateX(4px);
+  gap: 0.6rem;
 }
 
 /* ── FOOTER ──────────────────────────────────────────────────── */
@@ -488,4 +498,5 @@
   .ctas { flex-direction: column; align-items: center; }
   .btnWhite, .btnGhost { width: 100%; max-width: 280px; justify-content: center; }
   .footInner { grid-template-columns: 1fr; gap: 2rem; }
+  .docsGrid { grid-template-columns: 1fr; }
 }

src/pages/index.tsx

@@ -119,21 +119,27 @@ function Docs() {
   return (
     <section className={styles.docs}>
       <div className={styles.docsInner}>
-        <Link className={styles.dCard} to={useBaseUrl('/docs/cardano/research')}>
-          <span className={styles.dNum}>I</span>
-          <div><h3>Cardano Protocol</h3><p>Research papers, eras, Haskell node</p></div>
-          <ArrowRight size={20} className={styles.dArrow} />
-        </Link>
-        <Link className={styles.dCard} to={useBaseUrl('/docs/spec/notation')}>
-          <span className={styles.dNum}>II</span>
-          <div><h3>Formal Specification</h3><p>Every type, rule, and transition</p></div>
-          <ArrowRight size={20} className={styles.dArrow} />
-        </Link>
-        <Link className={styles.dCard} to={useBaseUrl('/docs/architecture/overview')}>
-          <span className={styles.dNum}>III</span>
-          <div><h3>Architecture</h3><p>Call flows, modules, storage</p></div>
-          <ArrowRight size={20} className={styles.dArrow} />
-        </Link>
+        <p className={styles.tag}>DOCUMENTATION</p>
+        <div className={styles.docsGrid}>
+          <Link className={styles.dCard} to={useBaseUrl('/docs/cardano/research')}>
+            <span className={styles.dLabel}>01</span>
+            <h3>Cardano Protocol</h3>
+            <p>Ouroboros papers, hard fork history, Haskell node internals, networking protocols</p>
+            <span className={styles.dLink}>Explore <ArrowRight size={14} /></span>
+          </Link>
+          <Link className={styles.dCard} to={useBaseUrl('/docs/spec/notation')}>
+            <span className={styles.dLabel}>02</span>
+            <h3>Formal Specification</h3>
+            <p>14 chapters defining every data type, validation rule, and state transition</p>
+            <span className={styles.dLink}>Explore <ArrowRight size={14} /></span>
+          </Link>
+          <Link className={styles.dCard} to={useBaseUrl('/docs/architecture/overview')}>
+            <span className={styles.dLabel}>03</span>
+            <h3>Architecture</h3>
+            <p>Function-by-function call flows, module map, storage tiers, sync pipeline</p>
+            <span className={styles.dLink}>Explore <ArrowRight size={14} /></span>
+          </Link>
+        </div>
       </div>
     </section>
   );