maratoolNew homepage: search, recently used, and better navigation
With 79 tools across 7 categories, the old homepage wasn't cutting it. We redesigned it from scratch for discoverability at scale.
When maratool had 8 tools, a simple list was enough. At 79 tools, you need search, shortcuts, and structure. Here's what changed.
Hero search
The homepage now opens with a large search bar. Start typing — "convert csv", "color picker", "regex" — and matching tools appear instantly. It searches tool names, descriptions, and keywords. No page reload, no waiting.
Recently used
Below the search bar, you'll see a "Pick up where you left off" section showing tools you've used recently. It's powered by localStorage — nothing is sent to a server. The sidebar also shows your last 5 tools at the top for quick access from any page.
New tools section
The latest additions get a dedicated section at the top of the page with a ✨ badge. Right now that's the Instagram Video Downloader, GIF Background Remover, and SVG Optimizer.
Task-oriented categories
Instead of listing every tool on the homepage, we show 3 tools per category with a "See all X tools" link. Categories are labeled by what you're trying to do — "Convert formats", "Work with images", "Inspect & debug" — not by abstract taxonomy. Each card has a color-coded left border so you can scan categories at a glance.
Sidebar improvements
The sidebar got three upgrades:
- Recently used — your last 5 tools appear at the very top of the sidebar, above the category list.
- Count badges — each category shows how many live tools it contains (e.g. "Image 18").
- Subcategory tag pills — when you expand a category, you'll see clickable pills like "Format", "Unit", "Transform", "Social" that filter the tool list. These link to the corresponding subcategory pages.
Simplified topbar
The topbar used to show category links (Converter, PDF, Text, Image...). With 7 categories and growing, that was getting crowded. We stripped it down to just the essentials: logo, Blog, About, Contact, and the search bar. Category navigation now lives entirely in the sidebar where there's room to expand it.
Design details
The homepage cards use a compact horizontal layout — emoji on the left, name and description on the right. Grid is 3 columns on desktop, 2 on tablet, 1 on mobile. The color system uses 7 category colors applied as left borders: warm red for Converter, purple for Image, green for Text, blue for Developer, orange for Color, pink for PDF, teal for Marketing.
The whole site continues to use the warm beige palette (background #f5f4f1, not stark white) with Instrument Serif for headings and Inter for body text.