Decks - Brutalist DJ Landing Page Template

Decks is a one-page brutalist DJ landing page built on a bento grid layout. It opens with a Before/After Slider that transforms a dead venue into a packed crowd. Every cell in the grid is a proof point: an embedded mix, press logos, a muted crowd clip, and a booking form that filters serious inquiries from casual visitors.

by Rocket studio

Quick summary

Decks is a single-page DJ portfolio and mix landing page with a bold brutalist aesthetic. The bento grid layout turns your career into a gallery that bookers can wander freely. A fixed booking bar stays on screen throughout, making it easy for festival bookers, club promoters, and brand event coordinators to reach out the moment they are ready.

Who this template is for

This template is built for working DJs who need a booking-ready web presence. It speaks directly to the professionals who get hired, not the hobbyists who just want a profile.

  • DJs pitching to festival bookers, club promoters, and brand event coordinators
  • Artists who want their mixes, press coverage, and live energy on one page
  • Performers who receive serious booking inquiries and need a form that filters genuine requests

What problem this template solves

Most DJ portfolios look like a résumé. They list credits without conveying atmosphere. Bookers scanning fifty portfolios before lunch need to feel the room before they book the act.

  • A static page fails to communicate energy, crowd response, or set quality
  • Generic contact forms attract spam and casual interest rather than real booking leads
  • Scattered social profiles make it hard for a promoter to assess the act in one sitting

What you get with this template

You get a complete one-page layout designed specifically for DJ portfolio and mix page use cases. Every component is paired to a real booker need.

  • A viewport-filling Before/After Slider that shows a venue empty versus packed mid-set
  • A bento grid with cells for an embedded mix, press logos, a muted crowd video, and a typeset track list
  • A fixed bottom booking bar with a minimal form that asks for event type, date, venue capacity, and a free-text room description

Feature list

This template includes six purpose-built components. Each one earns its place on the page.

Before/After Venue Slider

The header splits the viewport in half. A draggable brutalist steel-textured handle lets visitors pull a desaturated empty venue into a fully lit, crowd-packed mid-set scene. The stamp headline "THIS IS WHAT I DO TO A ROOM" runs across both states in monospaced caps.

Bento Grid Portfolio Layout

The main body is an exhibition-style bento grid. Cells vary in size and shape so the layout feels curated, not templated. Bookers can move through cells in any order, sampling proof points the way they would walk through a gallery.

Embedded Mix with Waveform Visualizer

One oversized bento cell holds the embedded mix alongside a custom waveform visualizer. This lets a booker sample the set quality directly on the page without leaving to a third-party platform.

Press Logo Column

A tall narrow cell stacks press and media logos vertically, styled like a concrete column. It communicates credibility at a glance without needing a paragraph of explanation.

Muted Crowd Autoplay Cell

A square bento cell autoplays a muted crowd clip. The visual motion communicates live energy without interrupting any audio already playing from the mix cell.

Fixed Bottom Booking Bar

A bottom bar slides up on scroll and stays fixed. Clicking it expands a minimal booking form with four fields: event type selector, date picker, venue capacity dropdown, and a free-text field labeled "Describe the room." No pricing or packages appear, which keeps the form focused on serious inquiries.

Page sections overview

SectionPurpose
Before/After Slider HeaderContrast empty venue with packed mid-set crowd
Monospaced Stamp HeadlineAnchor the DJ's core value statement
Embedded Mix CellLet bookers sample set quality directly
Press Logos ColumnStack media credibility markers vertically
Muted Crowd ClipShow live energy through ambient autoplay video
Track List PosterDisplay set structure in brutalist typographic style
Fixed Booking BarSurface the booking form on scroll throughout the page
Booking Inquiry FormCollect event type, date, capacity, and room description

Design & branding system

The visual identity follows a Monochrome Steel color system built on four deliberate tones. There is no warmth in this palette and that is intentional.

  • Forge black (#0D0D0D) dominates the background, cold-rolled steel (#3A3A3C) surfaces cards and section dividers, industrial silver (#B0B0B4) carries body text and secondary labels, and arc-weld white (#F0F0F0) hits only on headlines and hover states
  • Typography uses monospaced fonts throughout, reinforcing the brutalist industrial tone and making headlines read like stamps on concrete
  • The overall aesthetic references a warehouse at 2 a.m.: functional, load-tested surfaces with no decorative softening

Mobile & speed optimization

The bento grid and fixed booking bar are structured to function across screen sizes. The layout adapts without losing the visual weight that defines the brutalist identity.

  • Cell sizes and proportions are designed to reflow on smaller screens while keeping the grid hierarchy readable
  • The Before/After Slider handle interaction is built for touch drag as well as mouse drag
  • The fixed booking bar remains accessible at the bottom of the viewport on mobile, keeping the call to action within reach at all times

How this template helps you convert

The page is engineered around a single conversion goal: turning a browsing booker into a submitted inquiry. Every design decision supports that path.

  1. The Before/After Slider creates an immediate emotional argument for booking. A booker sees the transformation before they read a single word of copy.
  2. The bento grid delivers proof points non-linearly, so each booker finds the evidence they care about fastest, whether that is press coverage, a live clip, or the mix itself.
  3. The fixed booking form uses specific fields like venue capacity and room description to filter out casual contacts and surface only genuine leads.

Other information about this template

This template suits DJs who operate at a professional level and need a landing page that communicates that seriousness to the people who hire them. A few additional points worth noting:

  • The Bold Brutalist theme and Gallery Walk creative direction are intentional choices, not just visual preferences. They position the DJ as a serious craft practitioner rather than a content creator.
  • The form deliberately excludes pricing and packages. This creates a higher-intent inquiry funnel and positions the DJ to negotiate directly.
  • The template is built as a single-page layout, which keeps the visitor focused and eliminates navigation drop-off between pages.
  • This layout is well suited to portfolio platforms and personal domains where the DJ controls the full brand experience from first impression to booking form.
Decks - Brutalist DJ Landing Page Template
Decks - Brutalist DJ Landing Page Template
Decks - Brutalist DJ Landing Page Template
Decks - Brutalist DJ Landing Page Template

Theme

Bold Brutalist

Creative direction

Gallery Walk

Color system

Monochrome Steel

Style

Bento Grid

Direction

Lead Generation

Page Sections

Before/after Venue Slider Header

Bento Grid Portfolio Layout

Embedded Mix with Waveform Visualizer

Muted Crowd Autoplay Cell

Fixed Bottom Booking Bar

Brutalist Monochrome Visual System

Related questions

Can I replace the venue images in the Before/After Slider with my own photos?

Does the booking form connect to a calendar or email system?

Can I add my own mix, or does the embed support only one player?

Is this template suitable if I also do live production or hybrid sets?

Can I edit the booking form fields to match my own inquiry process?