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
Maaz Roofing Inc
30+ Years of Roofing Excellence in Southern California
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.
Drone video hero
Full-screen autoplay drone footage with adaptive loading based on connection speed and motion preferences
Interactive services accordion
Left-panel accordion paired with a sticky auto-rotating image carousel for each roofing service category
10-project portfolio carousel
Drag, swipe, and keyboard-navigable gallery with cinematic center-card focus effect and dimmed side cards
Bilingual EN/ES
Full locale-based routing via next-intl covering all page content in English and Spanish for the SoCal market
About
Maaz Roofing Inc serves residential and commercial clients across Southern California with 950+ completed projects and 600+ satisfied clients. The site was designed to generate qualified leads fast — drone video hero, GAF Certified badges, and a bilingual experience in English and Spanish to reach the full SoCal market.
Highlights
Drone Video Hero
Full-screen autoplay drone footage with smart detection for data saver mode, slow connections, and reduced motion preferences before loading.
Interactive Services Panel
Left-side accordion expands each service category while the right side auto-rotates a sticky image carousel at 4s intervals with play/pause and dot controls.
Portfolio Carousel
10-project gallery with drag/swipe, keyboard navigation, and a cinematic center-card-focus effect where side cards are dimmed and scaled down.
Bilingual EN/ES
Full English and Spanish support via next-intl with locale-based routing — built to reach all of Southern California's diverse homeowner market.
Scroll-Triggered Animations
Intersection Observer-driven FadeIn and RevealWords components for staggered hero text cascades and section-by-section reveal throughout the page.
Dual Navigation System
Embedded hero nav transitions into a fixed navbar with a transparent-to-white scroll effect, keeping calls-to-action visible at all times.
Tags
RoofingLead GenerationBilingualNext.js 15React 18TypeScriptTailwind CSSnext-intlSouthern California
Not sure where to start?
Other Projects
Apex Build
Full multi-page marketing website for a fictional Texas-based general contracting company, built with a bilingual UX targeting the Austin construction market.
Verdant
Full-featured e-commerce frontend covering browse → filter → cart → checkout → confirmation — slide-over cart drawer with localStorage persistence, click-to-zoom gallery, Intersection Observer scroll animations, dual-context state (CartContext + UIContext), and a custom Tailwind 4 design system — no component libraries.