Last active
March 30, 2026 08:07
-
-
Save Aboudjem/0784c1c8ecf8603a655d771d277f7bde to your computer and use it in GitHub Desktop.
Integra PRD: 23-ecosystem-hub (HTML)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>PRD: Ecosystem Hub</title><style>*{margin:0;padding:0;box-sizing:border-box}body{background:#0A0A1A;color:#E8E8F0;font-family:'Inter',system-ui,sans-serif;line-height:1.7}a{color:#00CEC9;text-decoration:none}a:hover{text-decoration:underline}.hero{padding:48px 32px 36px;border-bottom:1px solid #2A2A4A;background:linear-gradient(135deg,#0A0A1A 0%,#1A1040 50%,#0A0A1A 100%)}.hero h1{font-size:2rem;font-weight:800;color:#fff;margin-bottom:8px}.hero .meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}.badge{display:inline-block;padding:4px 12px;border-radius:6px;font-size:12px;font-weight:700}.badge-owner{background:rgba(108,92,231,0.15);color:#A29BFE;border:1px solid rgba(108,92,231,0.3)}.badge-week{background:rgba(0,206,201,0.15);color:#00CEC9;border:1px solid rgba(0,206,201,0.3)}.badge-est{background:rgba(0,184,148,0.15);color:#00B894;border:1px solid rgba(0,184,148,0.3)}.container{max-width:900px;margin:0 auto;padding:32px 24px}.section{background:#12122A;border:1px solid #2A2A4A;border-radius:12px;padding:24px;margin-bottom:20px}.section h2{font-size:0.8rem;font-weight:700;color:#8888AA;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid #2A2A4A}.section h3{font-size:0.95rem;font-weight:600;color:#E8E8F0;margin:12px 0 6px}.section p{font-size:0.95rem;margin-bottom:8px}.section ul{list-style:none;padding:0}.section ul li{padding:6px 0 6px 20px;position:relative;font-size:0.95rem}.section ul li::before{content:'>';position:absolute;left:0;color:#A29BFE;font-weight:700;font-family:monospace}.section code{background:rgba(108,92,231,0.1);padding:2px 6px;border-radius:4px;font-size:0.88rem;color:#A29BFE}table{width:100%;border-collapse:collapse;font-size:0.9rem;margin:8px 0}th{text-align:left;padding:8px 12px;background:rgba(108,92,231,0.08);color:#A29BFE;font-size:0.75rem;text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid #2A2A4A}td{padding:8px 12px;border-bottom:1px solid rgba(42,42,74,0.5)}.checklist li::before{content:'\2610' !important;color:#8888AA !important;font-family:inherit !important}.back{display:inline-block;margin-bottom:16px;color:#8888AA;font-size:0.9rem}.footer{text-align:center;padding:24px;color:#555577;font-size:0.82rem;border-top:1px solid #2A2A4A;margin-top:32px}</style></head><body><div class="hero"><a class="back" href="https://gist.githack.com/Aboudjem/0af8c2ce9d5b62038a18eeff09603553/raw/integra-testnet-master-plan.html">← Back to Master Plan</a><h1>Ecosystem Hub</h1><div class="meta"><span class="badge badge-owner">Adam</span><span class="badge badge-week">Week 2-3</span><span class="badge badge-est">0.5-1d</span></div><p style="color:#8888AA;font-size:0.9rem">Integrated into integra-dashboard-frontend (polytrade-finance repo)</p></div><div class="container"><div class="section"><h2>Overview</h2><div class=""><p>A directory page within the existing Integra dashboard that showcases every dApp, tool, and service in the ecosystem. Grid layout with category filters, search, and a featured section — modeled after Polygon, Arbitrum, and Base ecosystem pages. This is the front door for the ecosystem: it drives traffic to all other dApps, signals ecosystem health to investors, and gives builders a place to list their projects.</p></div></div> | |
| <div class="section"><h2>Features</h2><div class=""><ul><li><strong>Featured Section</strong> — Top-of-page highlight area for 2-3 core products (GOB, Staking, etc.) with larger cards and descriptions</li></ul><ul><li><strong>App Grid</strong> — 3-4 column responsive card grid of all ecosystem dApps, collapsing to 1-2 columns on mobile</li></ul><ul><li><strong>App Cards</strong> — Each card shows: logo, app name, category badge, one-line description, status badge (Live / Coming Soon), and external link</li></ul><ul><li><strong>Category Filter</strong> — Pill/tab filter across 6 categories: DeFi, AI Agents, Infrastructure, Trading, Consumer, Developer Tools</li></ul><ul><li><strong>Search Bar</strong> — Client-side fuzzy search over app name and description with real-time filtering</li></ul><ul><li><strong>Status Badges</strong> — Visual distinction between Live and Coming Soon apps</li></ul><ul><li><strong>Static Data Source</strong> — All app entries stored in a single JSON file checked into the repo for easy updates</li></ul><ul><li><strong>No Wallet Required</strong> — Public page, no authentication needed to browse</li></ul><ul><li><strong>Responsive Layout</strong> — Full grid on desktop, stacked cards on mobile</li></ul><ul><li><strong>Deep Linking</strong> — Each app card links out to the dApp in a new tab</li></ul></div></div> | |
| <div class="section"><h2>Functions</h2><div class=""><ul><li><code>EcosystemPage</code> — Main page component with featured section and filterable grid</li></ul><ul><li><code>AppCard</code> — Reusable card component rendering logo, name, category, description, status, and link</li></ul><ul><li><code>CategoryFilter</code> — Pill/tab filter toggling visible categories</li></ul><ul><li><code>SearchBar</code> — Client-side fuzzy search filtering cards by name and description</li></ul></div></div> | |
| <div class="section"><h2>User Flow</h2><div class=""><ul><li>Navigate to /ecosystem from the dashboard sidebar or top nav</li></ul><ul><li>See featured apps highlighted at the top</li></ul><ul><li>Browse the full grid of ecosystem dApps below</li></ul><ul><li>Filter by category (DeFi, AI Agents, Infrastructure, Trading, Consumer, Developer Tools)</li></ul><ul><li>Search by name or keyword</li></ul><ul><li>Click a card to open the dApp in a new tab</li></ul></div></div> | |
| <div class="section"><h2>Deliverables</h2><div class="checklist"><ul class="checklist"><li>/ecosystem route within existing dashboard layout</li></ul><ul class="checklist"><li>Featured section with 2-3 highlighted apps</li></ul><ul class="checklist"><li>Responsive app card grid (3-4 columns desktop, 1-2 mobile)</li></ul><ul class="checklist"><li>Category filter across all 6 categories</li></ul><ul class="checklist"><li>Fuzzy search bar with real-time filtering</li></ul><ul class="checklist"><li>App card component (logo, name, category badge, description, status badge, link)</li></ul><ul class="checklist"><li>ecosystem-apps.json data file with 8+ entries across 3+ categories</li></ul><ul class="checklist"><li>Mobile-responsive layout</li></ul></div></div> | |
| <div class="section"><h2>Integration Points</h2><div class=""><ul><li><strong>Depends on:</strong> polytrade-finance/integra-dashboard-frontend (existing repo, existing layout/theme/components)</li></ul><ul><li><strong>Used by:</strong> All Integra dApps (listed as entries), Marketing site (links to this page)</li></ul><ul><li><strong>Explorer:</strong> N/A (no on-chain component)</li></ul></div></div> | |
| <div class="section"><h2>XP Rewards</h2><div class=""><table><thead><tr><th>Action</th><th>Points</th></tr></thead><tbody><tr><td>N/A</td><td>Discovery page — no transactional XP</td></tr></tbody></table></div></div> | |
| <div class="section"><h2>Success Metrics</h2><div class=""><table><thead><tr><th>Metric</th><th>Target</th></tr></thead><tbody><tr><td>App entries listed</td><td>15+ across 4+ categories</td></tr><tr><td>Outbound clicks to dApps</td><td>500+ per month</td></tr><tr><td>Page views</td><td>1,000+ per month</td></tr><tr><td>Search usage rate</td><td>20%+ of visitors use search</td></tr><tr><td>Mobile traffic share</td><td>30%+ of page views</td></tr></tbody></table></div></div> | |
| </div><div class="footer">Integra Testnet PRD — Ecosystem Hub — Chain: integra-testnet-1 (EVM 26218)</div></body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment