> ## Documentation Index
> Fetch the complete documentation index at: https://docs.frenflow.com/llms.txt
> Use this file to discover all available pages before exploring further.

# DOCS CONTEXT

# FrenFlow Docs - Context

## Repo

* **GitHub:** `https://github.com/frenflow/docs`
* **URL docs:** `docs.frenflow.com`
* **Preview local:** `cd mintlify-docs && npx mintlify dev` (puerto 3000)
* **Telegram Bot:** `@FrenFlowBot` (`https://t.me/FrenFlowBot`)

## Configuración (docs.json)

* **Theme:** mint
* **Colors:** primary/light/dark all `#baf820` (verde lima)
* **Background:** dark `#0f0f12`
* **Appearance:** strict dark mode
* **Font:** Inter
* **Icons:** Lucide library
* **Eyebrows:** breadcrumbs
* **Navbar:** botón "Guides" con icono book-open, enlaza a `/guides/getting-started` (verde lima, texto negro)
* **Footer:** socials (X, website, Telegram) — logo, links y "Powered by Mintlify" ocultos via CSS
* **Thumbnails:** dark appearance (sin background image custom)
* **Lightbox:** enabled (zoom en imágenes al hacer click)
* **GA4:** `G-JMJ3F366N8`
* **AI Assistant:** oculto (mobile + desktop) via CSS
* **Banner:** live dot con animación pulse + link a frenflow\.com

## SEO

* **og:type:** website
* **og:description:** global descriptivo
* **og:image:** auto-generado por Mintlify (thumbnails dark). Nota: Mintlify sirve og:image con `Content-Disposition: attachment` — Telegram no lo muestra
* **twitter:card:** summary\_large\_image
* **twitter:site/creator:** @frenflow
* **Páginas:** todas tienen `title` descriptivo con keywords, `sidebarTitle` corto, y `description` 120-160 chars
* **Sitemap/canonical:** auto-generados por Mintlify

## global.css — Customizaciones

### Layout

* **Logo:** "FREN" (bold 800) + "DOCS" (normal 400) via pseudo-elements `::before`/`::after`
* **Banner:** texto negro sobre fondo lima
* **Footer:** logo/links/Powered by Mintlify ocultos, socials centrados (mobile + desktop)
* **AI Assistant:** oculto completamente (`#assistant-entry`, `#assistant-entry-mobile`, `.chat-assistant-floating-input`)
* **Mobile:** 3 puntos overflow ocultos, botón Guides visible en header, hamburger icon más grande

### Sidebar

* **Group headers:** blanco por defecto, verde lima para grupos de Guides
* **Links inactivos:** `#A1A1AA`
* **Links activos:** fondo blanco, texto `#111111`, font-weight 600
* **Hover:** slide-fill izquierda a derecha con `background-size` animation
* **Icons:** `background-color` (mask-image SVGs)
* **Scrollbar:** blanco, 4px (mobile sidebar también blanco)
* **Guide groups:** ocultos por defecto, visibles y movidos al TOP cuando hay un guide link activo (CSS `:has()` + `order: -1`)

### Contenido

* **Frames/Images:** sin border, sin rounded, shadow sutil gris, margin-top 2rem, margin-bottom -1rem
* **Cards:** icono y título en misma línea (grid layout), aplica a `a.card` y `.card`
* **Tables:** lime green header, rounded 12px, hover en rows, border sutil
* **Navbar Guides button:** verde lima, texto negro, border-radius 8px
* **Pagination:** menos espacio antes, más espacio después del separador

### Page scrollbar

* Verde lima, 4px (todo el contenido)

### Custom text colors

* `.text-green` → `#22c55e`
* `.text-red` → `#ef4444`
* Nota: inline `<span style>` y `<span className>` NO funcionan dentro de markdown lists en Mintlify. Usar emojis (🟢🔴) en su lugar.

## Estilo de Contenido

* Headings H2 en verde lima: `## <span style={{color: "#baf820"}}>Título</span>`
* Excepción: Buying Shares en verde `#22c55e`, Selling Shares en rojo `#ef4444`
* UMA Voting: Commit Phase en azul `#3b82f6`, Reveal Phase en rojo `#ef4444`
* Componentes: `<Card>`, `<CardGroup>`, `<Steps>`, `<Tip>`, `<Note>`, `<Warning>`, `<Info>`, `<Accordion>`, `<Tooltip>`, `<Frame>`
* Imágenes sin click: `<div style={{pointerEvents: "none"}}>` (ej: aura.png en levels)
* Dollar signs (`$`) en texto MDX escapados con `\$` (evita interpolación de variables)
* Espaciado extra entre secciones: `&nbsp;` (línea vacía con non-breaking space)
* Mermaid diagramas eliminados — reemplazados por tablas/steps/cards (causaban auto-refresh)
* Cross-links entre páginas relacionadas
* Idioma: **inglés**

## Imágenes

Capturas reales en `/images/`:

### Markets & Trading

* `markets.webp` — Markets overview
* `polymarket.png` — Polymarket page
* `kalshi.png` — Kalshi page
* `search.png` — Search
* `discovery.png` — Special categories
* `subcategories.png` — Subcategories tabs
* `trading.png` — Trading overview
* `quick-trade.png` — Quick Trade / Ninja Mode
* `market1.png` — Market detail page
* `trade10.png` — Trading panel (Buy Yes/No buttons)
* `trade11.png` — Trade confirmation
* `trading-modal.png` — Trading modal

### Copy Trading & Leaderboard

* `copytrading.png` — Copy Trading overview
* `follow-leader.png` — Follow a Leader
* `zero-block.webp` — Zero-Block
* `leaderboard.png` — Leaderboard
* `trader-profile.png` — Trader Profile
* `filters.png` — Leaderboard Filters

### Portfolio & Social

* `positions.png` — Portfolio Positions
* `activity-positions.png` — Trade History
* `pnl.png` — PnL
* `degenbox.png` — Degenbox
* `customize.png` — Degenbox Customize
* `social.png` — Social Feed
* `following.png` — Following

### Wallet

* `deposit.png` — Deposit page
* `export.png` — Export Private Key
* `balances.png` — Wallet balances
* `bridge.png` — Cross-chain bridging
* `bridge1.png` — Polymarket Bridge widget
* `transfer.png` — Transfer funds
* `solana.png` — Solana wallet

### Sell & Redeem

* `sell1.png` — Sell position modal (web)
* `sell2.png` — Sell from Telegram
* `redeem.png` — Redeem positions

### Alerts & Notifications

* `price-alert.png` — Price alert setup
* `price-alert2.png` — Price alert notification
* `notifications.png` — Notification settings
* `notifications2.png` — Notification preferences

### Fren Points & Referrals

* `frens.png` — Fren Points overview
* `aura.png` — Aura badges (centered, no click)

### Affiliate

* `toolkit.png` — Affiliate toolkit

### UMA

* `uma.png` — UMA overview
* `uma2.png` — UMA disputes
* `uma3.png` — UMA voting
* `uma4.png` — UMA analytics

### Settings

* `profile2.png` — Profile settings
* `profile3.png` — Linked accounts
* `ninja.png` — Ninja Mode
* `trading2.png` — Trading settings
* `trading3.png` — Trading notifications
* `quick.png` — Quick buy settings

### Telegram Bot

* `tgbot.png` — Telegram bot setup
* `start.png` — Bot commands
* `tgsearch.png` — Telegram search
* `buyyesno.png` — Buy Yes/No

### Onboarding

* `welcome.webp` — Getting started hero
* `login.png` — Login/signup screen
* `enable1.png` — Enable trading
* `trade1.png` — First trade
* `first-trade.webp` — First trade guide hero

### Integrations

* `dextools1.png` — DexTools widget screenshot
* `dextools2.png` — DexTools trading flow

### Branding

* `ff.png` — FrenFlow logo (intro page, centered, no click)
* `frenflow.png` — FrenFlow platform screenshot
* `frenflow_logo.png` — Favicon/logo
* `polymarket-icon.png`, `kalshi-icon.svg` — Platform icons
* `mermaid1.png` — Architecture diagram

## Estructura del Sidebar (19 secciones + Guides)

### Secciones de referencia

1. **FrenFlow Docs** — index (Introduction), faq
2. **Markets** — overview, polymarket, kalshi, categories, search
3. **Trading** — markets, placing-trades, selling, redeem, order-types, fees
4. **Copy Trading** — how-it-works, follow-a-leader, settings, zero-block, risks
5. **Leaderboard** — overview, profiles, filters
6. **Portfolio** — positions, history, pnl
7. **Degenbox** — overview, customize
8. **Social** — feed, posts, comments, following
9. **Wallet** — deposit, withdraw, balances, bridging
10. **Wallet Tracker** — overview, add-wallet, alerts
11. **Alerts** — price-alerts, notifications
12. **Fren Points** — how-to-earn, levels, chests-&-rewards
13. **Referrals** — invite-friends, daily-spin, earnings
14. **Affiliate** — overview, toolkit, commissions
15. **UMA** — overview, voting, analytics
16. **Integrations** — coming-soon (dextools hidden until launch)
17. **Settings** — profile, trading, quick-buy
18. **Telegram Bot** — setup, commands, notifications

### Guides (16 tutoriales, 3 sub-grupos)

**Guides — Web:**

* getting-started, first-trade, sell-and-redeem, funding-your-wallet, first-copy-trade
* wallet-tracker-setup, degenbox-setup, price-alerts-setup, share-your-pnl, maximize-referrals

**Guides — Telegram:**

* trading-from-telegram, copy-trading-telegram, telegram-wallet, telegram-alerts

**Guides — Cross-Platform:**

* link-web-telegram, earning-fren-points

### Hidden pages (not in sidebar)

* `integrations/dextools` — Full DexTools integration page, hidden until launch

## Secciones revisadas ✅

* Markets (overview, polymarket, kalshi, categories, search)
* Trading (markets, placing-trades, selling, redeem, order-types, fees)
* Copy Trading (how-it-works, follow-a-leader, settings, zero-block, risks)
* Leaderboard (overview, profiles, filters)
* Portfolio (positions, history, pnl)
* Degenbox (overview, customize)
* Social (feed, posts, comments, following)
* Wallet (deposit, withdraw, balances, bridging)
* Wallet Tracker (overview, add-wallet, alerts)
* Alerts (price-alerts, notifications)
* Fren Points (how-to-earn, levels, chests-&-rewards)
* Referrals (invite-friends, daily-spin, earnings)
* Affiliate (overview, toolkit, commissions)
* UMA (overview, voting, analytics)
* Integrations (coming-soon, dextools)
* Settings (profile, trading, quick-buy)
* Telegram Bot (setup, commands, notifications)
* FAQ
* Guides — Web (10 tutorials)
* Guides — Telegram (4 tutorials)
* Guides — Cross-Platform (2 tutorials)

## Telegram Bot References

22 páginas de referencia incluyen sección "From Telegram" con comandos/funcionalidad equivalente del bot.

## Limitaciones de Mintlify

* Mermaid diagrams causan auto-refresh — usar tablas/steps en su lugar
* No quitar "Powered by Mintlify" via config (oculto via CSS)
* Grupo name no puede ser vacío (min 1 char)
* Eyebrows solo "section" o "breadcrumbs"
* Footer requiere al menos 1 link
* Footer socials: solo tipos predefinidos (x, website, telegram, discord, etc.) — NO soporta email/mailto
* `colors.background` no es válido en schema — usar `background.color`
* Tabs: en mobile aparecen al final del sidebar
* Cards sin href renderizan como `div.card` en vez de `a.card` — CSS cubre ambos
* AI Assistant: se oculta via CSS
* OG images auto-generadas se sirven con `Content-Disposition: attachment` — Telegram no las muestra
* Inline `<span style>` y `<span className>` NO funcionan dentro de markdown lists — usar emojis
* `<Info>` box puede aparecer gris en local dev (dark mode) pero azul en producción

## Notas del Producto

* FlowLinks reemplazado por Fren Points (FlowLinks es beta)
* Auth: email, wallet, Google, Twitter, Telegram
* Solana es para Kalshi (via DFlow), Polygon es para Polymarket
* Copy Trading tiene zero-block (entrar al mismo precio que el leader)
* Telegram bot: escribir texto directo también busca mercados (no solo /search)
* Telegram bot: `/wallet` existe como comando (balance, deposit, swap, bridge)
* Telegram bot: withdraw directo disponible (no solo export PK)
* Commission rates: configurables por tier, NO hardcoded 10%
* Take Profit / Stop Loss: disponibles en Telegram /settings, no en web Settings UI
* Sell modes incluyen: mirror, manual, same\_percentage, fixed, custom\_percentage, sell\_all
* DexTools integration: widget embebido como web component `<frenflow-predictions>`, browse markets + redirect a frenflow\.com para trading
