Live · Marketing site

MarketMind — Main Website

The front door of the platform: a marketing site that has to explain a developer product to startups, investors, and engineers in one glance, then route them toward the MCP and developer sub-sites. Hosted on GitHub Pages under its own domain, built with vanilla HTML/CSS/JS.

Vanilla JSGitHub PagesCSS tokensConfig-driven linksResponsive
MarketMind main website screenshot

Overview

marketmind-hub.in is the top of a three-site funnel. It earns credibility with product substance — a CSS-built mock dashboard in the hero, live-looking stat tiles, and a working illustration of the API key you'll get — then funnels every visitor toward the real product spaces: the MCP quick-start and the developer portal.

The site content described here reflects the live deployment; the local source folder is this project's canonical architecture but lags the shipped copy. Where the two differ, the messaging below is what actually ships.

Design system

  • Light theme, one accent: everything flows from CSS custom properties in :root — accent #00b86c, a full neutral ramp, shadow and radius scales, and a 1200px container. Whatever colorwork the product itself does, the site stays calm and financial.
  • Typography: Inter for reading, JetBrains Mono for code and labels, sized with clamp() for fluid scaling — the same pairing the whole portfolio of sub-sites shares.
  • Hero: a full-viewport section layered with a repeating 80px grid-line background masked by a radial gradient and a soft green glow, a badge with a pulsing dot, a gradient-text headline, and a stats row (500+ NSE/BSE tickers · <200ms · 99.9% uptime).
  • Components: feature cards with hover lift, use-case cards with mono-font numbered badges, REST/MCP channel cards, macOS-style code windows (traffic-light dots, filename header, hand-rolled syntax highlight), and a unified-key card with a gradient border on hover displaying a mock mm_live_… key plus REST+/MCP chips.
  • Motion: IntersectionObserver fade-ins with per-card stagger delays, and a reduced-motion fallback that renders everything visible immediately.

Content architecture

The page is structured as one long persuasion document rather than ten smaller ones:

  • The one-key identity: the central promise — "generate a single API key and use it across both integration channels" — with a dedicated section showing the same key unlocking REST and MCP.
  • Two ways to integrate: an MCP panel (with the exact mcpServers config block) and a REST panel (with a live curl snippet hitting ticker-extract), driving home "no separate accounts, no separate credentials".
  • Six core capabilities: RAG intelligence, ticker extraction, price prediction, real-time data, secure API keys, multi-channel access — each one mapping to something the developer portal actually offers.
  • Four use cases: trading bots, research dashboards, AI financial advisors, portfolio analytics — each tagged with the channel (REST/MCP) and capability it relies on, so engineers can self-classify.
  • Contact surface: a standalone /contact.html plus a slide-in contact panel reachable from the footer CTA.

Architecture

  • Vanilla and tiny: two JS files and two CSS files run the whole site — no framework, no build step, no npm. config.js (~23 lines) and main.js (~188 lines).
  • Config-driven links: every external URL lives in one window.MM_CONFIG object (subdomain base URLs, sub-site page paths, contact mailto). Markup uses data-link="mcp" attributes and main.js resolves them at load — so a rebrand or a moved sub-page is a one-line change, and the site's cross-links to the MCP and developer portals can never silently rot.
  • Interaction script: sticky-nav blur state, mobile menu with scroll lock, smooth anchor scrolling with header-offset compensation, stagger reveals, and the contact-panel drawer (overlay click + Escape to close).
  • Multi-page structure: index.html, contact.html, and 404.html, with the contact panel embedded in both index and 404 so a visitor on a dead link is still one click from a conversation.

Contact system

The form (name, email, optional company and website, a ten-option subject select, and a message with a live 1000-character counter) appears in two places — the standalone page and the drawer. It validates with native HTML5, clamps the message length in JS, and swaps to a success card on submit.

Honest note: in the source, submission is client-side only — the handler prevent-defaults, hides the form, and shows the success state. There is no backend POST wired on this marketing site; the real conversation path is the config-managed email, while the developer portal carries the proper backend form flow. It's the one piece of this site that needs a production pass.

Deployment & SEO

  • Hosted on GitHub Pages with a CNAME record mapping it to the branded marketmind-hub.in domain.
  • A sitemap.xml declares the two pages, and the 404 page reuses the full design system while embedding the contact panel so it does real conversion work.
  • SEO meta is minimal — per-page titles and semantic HTML5 landmarks, but no Open Graph or JSON-LD in source. For a marketing site being linked from the developer portal and docs, that's the highest-value next investment.

Honest gaps

  • Light theme only — no dark mode, no preference query, no toggle (the site's own product supports agents that run in dark terminals, so this is a miss).
  • The contact form is a front-end mock (see above).
  • The logo SVGs are oversized (~110–245 KB each) and dominate page weight — a real opportunity for a hand-tuned version.
  • The local source folder trails the live deployment, so editing marketing copy in the repo requires disciplined syncing.

The companion deep-dives: the MCP site and the developer portal.