Case Study

21 Reels

A cinematic portfolio website with integrated lead capture, serverless backend, and GHL CRM automation for a videography brand.

ClientMiles — 21 Reels
TypePortfolio & Lead Generation
RoleDesign & Full-Stack Dev
Visit Site
21 Reels Homepage

The Brief

Build a premium cinematic portfolio that captures the 21 Reels brand — dark, bold, and professional. Every visitor should feel the production quality before they even hit play, with seamless lead capture flowing directly into GoHighLevel.

7
Service offerings showcased
5
Notable client highlights
100%
Automated lead capture
A2P
SMS compliance built-in

Services Showcased

Seven creative offerings

Videography

Professional cinematic videography for corporate and creative projects.

Photography

High-quality product, portrait, and event photography.

Social Media

Custom packages for brand growth — faceless or personal brands.

Production

Full-scale video production with professional equipment & studio.

Content Strategy

Strategic content consulting for impactful storytelling.

Post-Production

Editing, color grading, sound design, and VFX.

What We Built

Key sections & integrations

01

Cinematic Hero & Navigation

Full-screen hero with cinematic background imagery, backdrop-blur navigation, and bold typography. Dual CTAs drive visitors to book or explore services, with direct phone and social links.

  • Sticky nav with blur backdrop
  • Dual CTA hero layout
  • Social media integration

HTML · CSS · JavaScript

Cinematic Hero & Navigation
02

About & Portfolio Showcase

Two-column about section featuring Miles' story with key statistics (100+ projects, 50+ clients, 5+ years). Grid portfolio with 6 featured projects using hover overlays and category labels.

  • Founder story with stats
  • 6-project portfolio grid
  • Hover reveal animations

HTML · CSS · Responsive Grid

About & Portfolio Showcase
03

Lead Capture & GHL Integration

A2P 10DLC-compliant contact form with three-checkbox consent flow — transactional SMS, marketing opt-in, and privacy policy agreement. Netlify Function handles contact creation in GoHighLevel with automatic tagging and duplicate detection.

  • A2P compliant SMS consent
  • Netlify → GHL serverless API
  • Duplicate contact handling

Netlify Functions · Node.js · GHL API

Lead Capture & GHL Integration

Key Features

Beyond the surface

Notable Client Roster

Showcases work with Donnell Rawlings, Matt Cox, Damon Darling, Todd Pultz, and Jason Banks with dedicated client highlight cards.

QR Code Marketing

Dedicated QR code landing page with UTM parameter tracking (utm_source=qrcode) for offline-to-online conversion and automatic contact tagging in GHL.

A2P 10DLC Compliance

Three-tier consent flow with transactional SMS, marketing opt-in, and privacy policy agreement. STOP/HELP messaging disclosure included.

Mobile-First Design

Responsive layout with hamburger menu, fluid typography via clamp(), and stacked layouts optimized for social media traffic.

Technology

HTML5CSS3JavaScriptNetlify FunctionsNode.jsGoHighLevel APIPoppins TypographyResponsive Design

The Challenge

  • 01Create a dark, cinematic brand identity that matches videography quality
  • 02Build A2P 10DLC-compliant SMS consent with three-tier checkbox flow
  • 03Serverless contact creation handling duplicates gracefully in GHL
  • 04QR code marketing pages with UTM tracking for offline events
  • 05Mobile-first responsive design for Instagram/TikTok traffic
  • 06Showcase 7 services and 6 portfolio projects without overwhelming visitors

The Solution

  • 01Custom dark UI with red accents (#f03535), hover animations, and cinematic imagery
  • 02Three-checkbox consent: transactional SMS (required), marketing (optional), privacy agreement
  • 03Netlify Function with POST validation, auto-tagging, and 409 duplicate handling
  • 04Dedicated QR page with utm_source=qrcode param and qr-code-conversion tag
  • 05Fluid typography with clamp(), hamburger menu, and stacked mobile layouts
  • 06Service card grid with gradient icons and portfolio hover reveals

Need a PortfolioThat Converts?

Let's build a website that captures your brand and generates leads on autopilot.

Available for new projects
Typically responds within 24 hours