2024 · SaaS landing page

MC Hosting Company

A concept landing page for a Minecraft server host, pairing a dark gamer-friendly palette with a clean SaaS pricing layout.

Figma Next.js Tailwind CSS Framer Motion
MC Hosting Company

Overview

This is a concept landing page I designed for a fictional Minecraft server hosting brand. I wanted to see if I could merge the moody, blocky world of Minecraft with the structured clarity of a modern SaaS site. The hero leans on a darkened in-game screenshot with a strong white headline, “Best Minecraft Servers At Your Fingertips,” set in a chunky display weight. Below it, the page settles into a light surface with services, pricing tiers, testimonials, and a contact block, giving the whole thing a familiar conversion-led rhythm.

Context

Minecraft hosting sites tend to either go full pixel-art and lose credibility, or go full corporate SaaS and lose the audience. I treated this as a portfolio exercise to find the middle: enough gaming texture to feel native to the community, enough structure to feel trustworthy for a parent buying a server for their kid. The brief I gave myself was a single-page marketing site with hero, services, pricing, social proof, and a lead form, all sharing one cohesive system.

Problem

The core challenge was tonal. A Minecraft screenshot is visually noisy, full of greens, browns, and torchlight, which fights with any UI placed on top of it. At the same time, a pricing grid needs calm space to be readable. If I leaned too hard into the game, the pricing would feel like a billboard in a forest. If I leaned too far into SaaS minimalism, the hero would feel disconnected from the product itself.

Approach

I split the page into two visual zones. The hero uses a dark overlay on the gameplay image with a single cyan accent for the CTA, echoed later in star ratings and underlines. Everything below switches to a near-white background with charcoal cards, so the pricing tiers and service icons sit on calm ground. The pricing block uses a three-by-two grid of dark cards with checklist features, which I balanced against lighter testimonial cards above. A faint outlined “PROVE OURS” wordmark runs vertically down the side as a quiet branding moment.

Outcome

The result is a layout that reads as a real product page first and a gaming site second. The hero carries the personality, while the body does the selling. The cyan accent gives me a consistent way to mark interactive elements without repainting the whole page. As a concept piece it lives on Dribbble, but the component structure, hero with overlay, icon-led services row, dark pricing grid, testimonial strip, footer with inline form, is something I have since reused as a starting point for other SaaS briefs.

Lessons

  • Anchor noisy hero imagery with a single accent color so the rest of the system can stay neutral.
  • Switch background tone, not just spacing, when moving from storytelling to conversion sections.
  • Treat pricing cards as the quietest element on the page; let them breathe.
  • Use vertical wordmarks and subtle underlines to add brand texture without extra UI weight.
  • Design for the skeptical buyer, not just the enthusiast, when the audience is mixed.