feat(website): hero section improvements — eyebrow banner + code snippet + CTAs

- Add eyebrow banner: v5.1.0 — 7 DOI-verified publications
- Add code snippet (brew install, tri agent, tri cloud)
- Update CTAs: Install CLI + Read Papers (replacing theorems/calculator)
- Render in first viewport, no delay on code block

Refs #473

Author: gHashTag

apps/website/src/components/sections/HeroSection.tsx

@@ -173,12 +173,33 @@ export default function HeroSection() {
     <section id="hero" aria-labelledby="hero-heading">
       <div className="radial-glow" aria-hidden="true" />
 
+      {/* Eyebrow banner */}
+      <motion.div
+        className="fade"
+        initial={{ opacity: 0, y: -10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4 }}
+        style={{
+          display: 'inline-block',
+          padding: '0.35em 1em',
+          border: '1px solid var(--accent)',
+          borderRadius: '999px',
+          fontSize: '0.78rem',
+          letterSpacing: '0.08em',
+          color: 'var(--accent)',
+          marginBottom: '1.2rem',
+          opacity: 0.85,
+        }}
+      >
+        v5.1.0 — 7 DOI-verified publications on Zenodo
+      </motion.div>
+
       <h2 style={{ color: 'var(--accent)', fontSize: '0.9rem', textTransform: 'uppercase', letterSpacing: 'clamp(0.1em, 2vw, 0.3em)', marginBottom: '0', margin: 0 }}>
         <motion.div
           className="fade"
           initial={{ opacity: 0, y: -20 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6 }}
+          transition={{ duration: 0.6, delay: 0.1 }}
         >
           {t.tag}
         </motion.div>
@@ -195,6 +216,30 @@ export default function HeroSection() {
       </motion.div>
 
       <AnimatedEquation />
+
+      {/* Code snippet — visible immediately, no delay */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 0.8 }}
+        transition={{ duration: 0.5, delay: 1.0 }}
+        style={{
+          background: 'rgba(0,0,0,0.4)',
+          border: '1px solid rgba(255,255,255,0.1)',
+          borderRadius: '8px',
+          padding: '0.8em 1.4em',
+          fontFamily: '"SF Mono", "Fira Code", monospace',
+          fontSize: 'clamp(0.72rem, 1.6vw, 0.88rem)',
+          color: '#c9d1d9',
+          textAlign: 'left',
+          maxWidth: '480px',
+          margin: '0 auto 1.5rem',
+          lineHeight: 1.6,
+        }}
+      >
+        <div style={{ color: '#8b949e' }}>$ brew tap gHashTag/trinity && brew install tri</div>
+        <div style={{ color: '#79c0ff' }}>$ tri agent run 420 <span style={{ color: '#8b949e' }}># autonomous 8-step cycle</span></div>
+        <div style={{ color: '#7ee787' }}>$ tri cloud deploy <span style={{ color: '#8b949e' }}># push to Railway</span></div>
+      </motion.div>
 
       {/* Only show headline if it's not the φ equation (already shown above) */}
       {t.headline && !t.headline.includes('φ²') && (
@@ -234,19 +279,19 @@ export default function HeroSection() {
           style={{ minWidth: 'clamp(140px, 40vw, 200px)' }}
           whileHover={{ scale: 1.05, boxShadow: '0 0 20px rgba(218,165,32,0.3)' }}
           whileTap={{ scale: 0.95 }}
-          aria-label="Learn more about the theorems"
+          aria-label="Install Trinity CLI"
         >
-          {t.cta}
+          Install CLI
         </motion.a>
         <motion.a
-          href="#calculator"
+          href="#publications"
           className="btn secondary"
           style={{ minWidth: 'clamp(140px, 40vw, 200px)' }}
           whileHover={{ scale: 1.05 }}
           whileTap={{ scale: 0.95 }}
-          aria-label="Open the sacred calculator"
+          aria-label="Read our publications"
         >
-          {t.ctaSecondary}
+          Read Papers
         </motion.a>
       </motion.div>