feat(landing): integrate with CI, finalize polish for txkit.dev launch

CI/CD:
- Add landing target to .github/workflows/lighthouse.yml matrix
- Pin vite to <7.1.13 in pnpm overrides (Astro 6 requires Vite 7, was 8)
- .gitignore .astro/ build cache

Landing polish:
- Honest copy: drop fake metrics ("12M tx verified"), use verifiable claims
  (7 packages on npm, built on viem + wagmi)
- Hide HostedVerify section until hosted beta is closer to ship
- Hero diagram: real lucide icons (decode/preview/simulate/sign), proper centering
- LogoWall: 16 real brand SVGs from @web3icons/react with grayscale-on-default,
  full color on hover
- TxApproval mockup: based on real DecodedCalldataPreview structure
- Skip-link for keyboard users (WCAG 2.4.1)
- WCAG AA contrast fix: text-tertiary #64748B (4.15:1, fail) -> #7F8DA0 (5.85:1)
- Primary border token #5C4FE3 (3.46:1) for non-text UI
- JSON-LD @graph: Organization + WebSite + SoftwareApplication + FAQPage
- Anchor IDs on every section for AI-citable deep links
- Static sitemap.xml, robots.txt, llms.txt
- public/logo.svg for txkit.dev/logo.svg (npm pages, etc)

Author: mike-diamond

.github/workflows/lighthouse.yml

@@ -21,6 +21,7 @@ jobs:
         target:
           - { app: docs, name: '@txkit/docs' }
           - { app: story, name: '@txkit/story' }
+          - { app: landing, name: '@txkit/landing' }
         # Mobile preset crashes consistently on Ubuntu CI runners — known
         # LHCI issue with --no-sandbox + headless Chromium combinations.
         # See lighthouse-ci issues/921. Local `pnpm exec lhci collect` works

.gitignore

@@ -10,6 +10,9 @@ node_modules
 # next.js
 .next/
 
+# astro
+.astro/
+
 # misc
 .DS_Store
 

app/landing/public/logo.svg

@@ -185,7 +185,7 @@ const HeroDiagram = () => {
           // at target.y - 16 and label baseline at target.y + 14.
           const iconX = target.x - iconSize / 2
           const iconY = target.y - 16
-          const labelY = target.y + 14
+          const labelY = target.y + 18
 
           return (
             <g key={ `node-${ node.id }` }>

app/landing/src/components/Hero/HeroDiagram.tsx

@@ -5,7 +5,7 @@ import './HostedVerify.css'
 <section class="hosted" id="hosted-verification" data-testid="landing-hosted">
   <div class="container">
     <header class="hosted__header">
-      <h2 class="hosted__heading">Run verification yourself, or let us run it for you.</h2>
+      <h2 class="hosted__heading">Run verification yourself today. Hosted beta opens Q1 2027.</h2>
     </header>
 
     <div class="hosted__grid">

app/landing/src/components/HostedVerify/HostedVerify.astro

@@ -34,7 +34,7 @@
 }
 
 .hosted__card--saas {
-  border-color: rgba(67, 56, 202, 0.4);
+  border-color: var(--txkit-color-primary-border);
 }
 
 .hosted__tag {

app/landing/src/components/HostedVerify/HostedVerify.css

@@ -16,33 +16,22 @@
   border: 1px solid var(--txkit-color-border);
   border-radius: var(--txkit-radius-md);
   color: var(--txkit-color-text-tertiary);
-  opacity: 0.85;
+  filter: grayscale(1);
+  opacity: 0.7;
   transition:
+    filter var(--txkit-duration-base) var(--txkit-easing),
     opacity var(--txkit-duration-base) var(--txkit-easing),
     border-color var(--txkit-duration-base) var(--txkit-easing),
     transform var(--txkit-duration-base) var(--txkit-easing);
 }
 
 .logo-wall__tile:hover {
+  filter: none;
   opacity: 1;
   border-color: var(--txkit-color-border-strong);
   transform: translateY(-1px);
 }
 
-.logo-wall__initial {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  font-family: var(--txkit-font-mono);
-  font-weight: 700;
-  font-size: 0.9375rem;
-  letter-spacing: -0.04em;
-  color: #FFFFFF;
-}
-
 @media (max-width: 720px) {
   .logo-wall {
     grid-template-columns: repeat(4, minmax(0, 1fr));

app/landing/src/components/LogoWall/LogoWall.css

@@ -3,26 +3,29 @@ import WalletPhantom from '@web3icons/react/icons/wallets/WalletPhantom'
 import WalletRabby from '@web3icons/react/icons/wallets/WalletRabby'
 import WalletSafe from '@web3icons/react/icons/wallets/WalletSafe'
 import WalletCoinbase from '@web3icons/react/icons/wallets/WalletCoinbase'
-import WalletWalletConnect from '@web3icons/react/icons/wallets/WalletWalletConnect'
+import WalletRainbow from '@web3icons/react/icons/wallets/WalletRainbow'
 import NetworkSui from '@web3icons/react/icons/networks/NetworkSui'
 import NetworkArbitrumOne from '@web3icons/react/icons/networks/NetworkArbitrumOne'
-import NetworkBase from '@web3icons/react/icons/networks/NetworkBase'
+import NetworkPolygon from '@web3icons/react/icons/networks/NetworkPolygon'
 import NetworkOptimism from '@web3icons/react/icons/networks/NetworkOptimism'
 import NetworkEthereum from '@web3icons/react/icons/networks/NetworkEthereum'
 import TokenAAVE from '@web3icons/react/icons/tokens/TokenAAVE'
+import ExchangeUniswap from '@web3icons/react/icons/exchanges/ExchangeUniswap'
+import Exchange1inch from '@web3icons/react/icons/exchanges/Exchange1inch'
+import ExchangeCowswap from '@web3icons/react/icons/exchanges/ExchangeCowswap'
+import ExchangeHyperliquid from '@web3icons/react/icons/exchanges/ExchangeHyperliquid'
 
 
-// 16-slot logo wall - mix of real Web3 brand SVGs from @web3icons/react +
-// abstract tiles for brands not in the icon set (Morpho, LI.FI, Crossmint,
-// x402). Tiles preserve visual rhythm so the wall reads as one coherent
-// integration grid.
+// 16-slot logo wall, all real brand SVGs from @web3icons/react.
+// Brands not in the icon set (Morpho, LI.FI, Crossmint, x402) are
+// replaced with same-category integration anchors that ARE shipped
+// (DEX/aggregator/MEV-aware/perp). Wall reads as one coherent grid
+// of recognizable Web3 marks.
 
 type Tile = {
   id: string,
   label: string,
-  Icon?: React.ComponentType<{ size?: number, variant?: 'mono' | 'branded' }>,
-  initial?: string,
-  brandColor?: string,
+  Icon: React.ComponentType<{ size?: number, variant?: 'mono' | 'branded' }>,
 }
 
 const TILES: Tile[] = [
@@ -31,17 +34,17 @@ const TILES: Tile[] = [
   { id: 'rabby', label: 'Rabby', Icon: WalletRabby },
   { id: 'safe', label: 'Safe', Icon: WalletSafe },
   { id: 'coinbase', label: 'Coinbase', Icon: WalletCoinbase },
-  { id: 'walletconnect', label: 'Reown', Icon: WalletWalletConnect },
+  { id: 'rainbow', label: 'Rainbow', Icon: WalletRainbow },
   { id: 'sui', label: 'Sui / Mysten', Icon: NetworkSui },
   { id: 'arbitrum', label: 'Arbitrum', Icon: NetworkArbitrumOne },
-  { id: 'base', label: 'Base', Icon: NetworkBase },
+  { id: 'polygon', label: 'Polygon', Icon: NetworkPolygon },
   { id: 'optimism', label: 'Optimism', Icon: NetworkOptimism },
   { id: 'ethereum', label: 'Ethereum', Icon: NetworkEthereum },
   { id: 'aave', label: 'Aave', Icon: TokenAAVE },
-  { id: 'morpho', label: 'Morpho', initial: 'M', brandColor: '#3B82F6' },
-  { id: 'lifi', label: 'LI.FI', initial: 'L', brandColor: '#FF7B7C' },
-  { id: 'crossmint', label: 'Crossmint', initial: 'C', brandColor: '#00FFB7' },
-  { id: 'x402', label: 'x402', initial: 'x', brandColor: '#0052FF' },
+  { id: 'uniswap', label: 'Uniswap', Icon: ExchangeUniswap },
+  { id: '1inch', label: '1inch', Icon: Exchange1inch },
+  { id: 'cowswap', label: 'CowSwap', Icon: ExchangeCowswap },
+  { id: 'hyperliquid', label: 'Hyperliquid', Icon: ExchangeHyperliquid },
 ]
 
 const ICON_SIZE = 32
@@ -56,16 +59,7 @@ const LogoWall = () => (
         role="listitem"
         title={ tile.label }
       >
-        { tile.Icon ? (
-          <tile.Icon size={ ICON_SIZE } variant="branded" />
-        ) : (
-          <span
-            className="logo-wall__initial"
-            style={{ backgroundColor: tile.brandColor }}
-          >
-            { tile.initial }
-          </span>
-        ) }
+        <tile.Icon size={ ICON_SIZE } variant="branded" />
       </div>
     )) }
   </div>

app/landing/src/components/LogoWall/LogoWall.tsx

@@ -171,6 +171,7 @@ const ogImageUrl = new URL(ogImage, siteUrl).href
     })} />
   </head>
   <body>
+    <a class="skip-link" href="#main">Skip to content</a>
     <slot />
   </body>
 </html>

app/landing/src/layouts/BaseLayout.astro

@@ -7,20 +7,21 @@ import CodeExample from '../components/CodeExample/CodeExample.astro'
 import DualTrack from '../components/DualTrack/DualTrack.astro'
 import Protocol from '../components/Protocol/Protocol.astro'
 import Components from '../components/Components/Components.astro'
-import HostedVerify from '../components/HostedVerify/HostedVerify.astro'
 import Footer from '../components/Footer/Footer.astro'
+
+// HostedVerify section hidden until hosted beta is closer to ship.
+// Component file kept at app/landing/src/components/HostedVerify/ for revival.
 ---
 
 <BaseLayout>
   <Header />
-  <main>
+  <main id="main">
     <Hero />
     <DecodePreviewSimulate />
     <CodeExample />
     <DualTrack />
     <Protocol />
     <Components />
-    <HostedVerify />
   </main>
   <Footer />
 </BaseLayout>