Mango Peel
Responsive custom-sticker storefront with two configurable product lines, instant size-and-quantity pricing, a guided three-step checkout, WhatsApp artwork submission, and QR-based payment options — built with Next.js and TypeScript.
Home
Works
Services
Resources
Contact
Responsive Design
Mobile
375px viewport
GL Car Wash & Detailing
Mobile Detailing for the Wasatch Front
Full-stack production site for a Utah mobile detailing company — Sanity CMS, Nodemailer email, YouTube API integration, 20+ city SEO landing pages, service card 3D flip, custom word-reveal animation system, and a multi-step booking modal — zero animation libraries.
Mobile-first responsive layouts
All sections collapse gracefully — dual hero, service cards, reviews carousel, and city pages all adapt to any screen size
Animated hamburger nav
Custom mobile nav with animated X-to-burger icon transition and staggered link reveal — no external menu library
Google reviews carousel on mobile
Auto-advancing review carousel with touch-swipe support displays live Google reviews at every breakpoint
Booking modal on mobile
Full multi-step booking flow and service recommendation quiz work seamlessly on mobile without any third-party booking library
About
GL Car Wash & Detailing is a mobile detailing company serving Salt Lake City and the Wasatch Front. They bring professional-grade car care directly to the customer — offering interior and exterior detailing packages for individuals and fleets across 20+ Utah cities.
Highlights
Sanity CMS + ISR Integration
Services, gallery, blog posts, about, and contact all editable via Sanity Studio — ISR revalidation every 60 seconds keeps content near-real-time without a full redeploy.
Service Card 3D Flip System
Desktop uses true CSS 3D card flip with preserve-3d showing full service details and an inline booking form on the back. Mobile swaps to a horizontal slide to avoid iOS 3D rendering lag.
20+ City SEO Landing Pages
Each Utah city slug has unique hero copy, localized reviews, canonical URL, and full OpenGraph tags — all statically generated and included in the sitemap.
Custom Word-Reveal Animation System
Word-by-word staggered entrance animations built from scratch with IntersectionObserver — used consistently across all section headings with no GSAP or Framer Motion.
YouTube API + Nodemailer Backend
Live YouTube video feed pulls the latest GL Car Wash videos via a custom Express backend with Google APIs. Contact form submissions are delivered via Nodemailer.
Multi-Step Booking Modal
Custom booking modal with a service recommendation quiz guides users to the right service — no external booking library, built entirely with React state.
Tags
Mobile DetailingLead GenerationBookingNext.jsReactTypeScriptTailwind CSSUtah
Not sure where to start?
Other Projects
Maaz Roofing Inc
Full marketing and lead generation website for Maaz Roofing Inc — a licensed, BBB Accredited A+ roofing contractor with 30+ years of craftsmanship across Southern California. Built in Next.js 15 with a drone video hero, bilingual EN/ES support, interactive services accordion, and a 10-project portfolio carousel.
United Youth We Stand
Full nonprofit website for United Youth We Stand — a youth-led immigration advocacy org founded in 2019. Built to serve immigrant communities across the Bay Area and Coachella Valley with free legal clinics, Know Your Rights workshops, a 24/7 emergency hotline, and civic engagement tools.