Jr Leal Brothers
Expert natural stone and door cabinet services, bringing timeless beauty and craftsmanship to your space.
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
Travel Filmz
Full multi-page photography portfolio for a travel and lifestyle brand — pure CSS masonry gallery, native dialog lightbox, custom scroll animations, and AVIF image optimization, built with zero UI libraries.
YourAITeam
Full multi-page AI agency website with a live GPT-4o-mini chatbot that captures leads through conversation, custom scroll animations, spam-protected contact form, and first-visit UX layer — zero UI component libraries.