The Complete
Ranketta Marketing Site
Production marketing site for Ranketta — AI product visibility for e-commerce. Pages, typography, design tokens, and components — all included.
Pages
12 pagesAll pages organized by purpose — core marketing pages, legal documentation, and utility pages.
Landing Page
/Main marketing page with all conversion sections
About Page
/aboutCompany story, team, culture, and investors
Pricing Page
/pricingDetailed pricing with comparison and FAQ
Compare Page
/compareSide-by-side competitor comparisons
Contact Page
/contactContact form with offices and direct channels
Blog List
/blogAll blog posts in a clean grid
Blog Detail
/blog/real-time-dashboards-best-practicesIndividual blog post with rich MDX content
Changelog
/changelogProduct release notes with timeline
Typography
10 stylesA clear, hierarchical type system using system fonts for maximum performance.
Aa Bb Cc 123
font-sans (system-ui)Aa Bb Cc 123
font-mono (ui-monospace)Move Faster
text-6xl sm:text-7xl font-medium tracking-tightPage Heading
text-5xl font-medium tracking-tightSection Title
text-4xl font-medium tracking-tightCard Title
text-2xl font-medium tracking-tightSubsection
text-xl font-semiboldLorem ipsum dolor sit amet, consectetur adipiscing elit.
text-base leading-relaxedLorem ipsum dolor sit amet, consectetur adipiscing elit.
text-sm leading-relaxedLorem ipsum dolor sit amet.
text-xs text-neutral-500[ Section Label ]
font-mono text-[11px] font-bold uppercase tracking-[0.2em]const x = 'value'
font-mono text-sm bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5Colors
3 palettesA focused color system built on primary (#2F55D4) + Zinc (neutrals) + semantic states.
#f0f3fc#e8edfb#6b86e0#4a6fd9#2F55D4Primary#2745b0#141f4d#fafafa#f4f4f5#e4e4e7#d4d4d8#71717a#3f3f46#27272a#18181b#09090bSpacing
8 tokensA consistent 4px-based spacing scale used throughout padding, margin, and gap utilities.
1234681216px-4 sm:px-6 lg:px-10py-16 sm:py-20p-6 sm:p-8Component Samples
Live previewsInteractive samples of the most-used UI patterns from the template.
Card Title
Cards use bordered containers with optional corner brackets.