LunarCrush.com Landing Pages
LunarCrush · Design direction and front-end build · 2026 · Shipped
Complete redesign and production build of 17 landing pages, from design direction to deployed code on Cloudflare Pages.
I led the complete redesign, architecture, and production build of lunarcrush.com — the primary public-facing website for LunarCrush. This wasn't a simple redesign: it was a ground-up rebuild that required me to operate across design, front-end engineering, content infrastructure, and brand strategy simultaneously.
With the CTO focused on product infrastructure and no dedicated front-end team for marketing, I took full ownership of the front-end pipeline — from design decisions in Figma through to production code deployed on Cloudflare Pages.
What I Owned End-to-End
Design Direction: Visual language, layout architecture, responsive behavior, typography system (Plus Jakarta Sans + Butler), color palette, animation choreography, and brand consistency across all 17 pages.
Front-End Engineering: Built the complete SPA using Vite + React 18, architected the monorepo with npm workspaces, designed the component library (@lunarcrush/ds), established the W3C token system (@lunarcrush/tokens), and implemented chunk splitting for optimal performance.
Content Infrastructure: Designed and built the Notion-to-TypeScript CMS pipeline so the team can update content without touching code. Created fully-typed data schemas for pages, pricing, blog, use cases, FAQs, and navigation.
Brand & SEO: Produced 35 custom OG preview images, set up multi-file sitemap generation, optimized image assets (20MB to 3.4MB), and ensured every page has proper meta tags for social sharing and search engines.
Analytics & Tooling: Integrated PostHog (session recording, heatmaps, events), GA4, Intercom (contextual loading), and built a custom analytics dashboard script that pulls from ChartMogul + Stripe + Cloudflare + GA4 into Notion.
Key Pages
Homepage: Features a custom typewriter animation for the hero prompts across Connect/Build/Discover tabs, showing AI platform integrations (Claude, ChatGPT, Gemini, Grok, Perplexity, Cursor). Interactive terminal preview demonstrates MCP connection in real time. Trust bar with Anthropic, Coinbase, and Google logos.
Pricing Page: Conversion-focused architecture with clear tier comparison, feature matrices, and strategically placed CTAs.
Use Cases: Product discovery pages that showcase different user personas and how they leverage the platform.
Blog: Full content engine with Notion CMS integration, automated publishing pipeline, and SEO-optimized article layouts.
Enterprise: B2B landing page targeting institutional clients with custom data needs.
Technical Highlights
- Monorepo with npm workspaces: @lunarcrush/tokens, @lunarcrush/ds, apps/home
- W3C design tokens built with custom build.js → JS/CSS/Tailwind output
- 15 design system components shared between marketing and product
- Notion-to-TypeScript CMS: fully-typed schemas, zero-downtime content updates
- Image optimization pipeline: 20MB → 3.4MB with maintained visual quality
- Cloudflare Pages deployment with GitHub Actions CI/CD
Impact
17 pages designed and built. 66 commits shipped. 35 custom OG images. 15 DS components. The infrastructure I built is now used by the entire team for both marketing and product development.