Xata Website

Xata Website - Marketing Site

Xata's marketing site sits in the same monorepo as the console and shares its component library and theme. Over the year it went through three homepage generations, a full dark mode conversion, a pricing redesign with an interactive calculator, and a blog rebuild, ending with the rebrand rollout across every page.

Key Contributions:

• Homepage, three times: Delivered a new hero and messaging, then a second pass across the remaining sections, then a full rewrite for the open source launch with new diagrams for scale to zero, copy on write branching and production Postgres.
• Dark mode: Converted the marketing pages to a dark theme end to end, including graph fills, diagram strokes and prose inversion, while keeping both themes working on the blog.
• Pricing: Redesigned the pricing page with plan cards, comparison tables and an interactive cost calculator with preset scenarios.
• Shared pricing logic: Extracted the calculator's storage model into shared utilities so the console's cost estimator and the website agree, moving from a linear slider to a logarithmic 5 GB to 5 TB scale.
• Blog rebuild: Restyled the hero with a reading time estimate, added a scroll progress indicator and pinned categories, and made blockquotes, tables and headings behave on small screens.
• Rebrand rollout: Ran four rounds of token work replacing ad hoc classes with canonical theme variables, so the new identity could be applied without revisiting individual pages.
• Deduplication: Consolidated 17 ReactFlow diagrams onto one shared wrapper, removing around 360 lines of repeated configuration, and moved duplicated currency formatters into shared utils.
• Third party surfaces: Replaced a tweet embed library with a static data implementation and a shared card component, and themed the cookie consent banner to match the site.

Technical Impact:

Sharing the component library and theme with the console meant marketing work compounded rather than diverging. The pricing calculator logic, the button variants and the diagram wrapper all became shared code. The token cleanup ahead of the rebrand was the highest leverage piece: because the site had been moved onto canonical theme variables first, the new identity could be applied without revisiting individual pages. The shared foundations are covered in the Xata Design System.

Project Structure:

• App: Next.js marketing site (apps/website) in the shared monorepo
• Content: MDX driven blog with categories, plus product, solutions and pricing pages
• Shared: consumes @xata.io/components, @xata.io/theme and @xata.io/utils