// app.jsx — MIBH Commercial Roofing. // Multi-page (hash-routed) marketing site written for the GC audience: MIBH is the // roofing subcontractor South Florida general contractors bid and build with. // Type system: Archivo (display, heavy) · IBM Plex Sans (body) · IBM Plex Mono (spec stamps). // // NOTE: Numbers/claims flagged /*VERIFY*/ come from the blueprint as placeholders and must // be confirmed against reality before this ever goes to production. const { useState, useEffect, useRef, useMemo } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "dark", "accent": "#c28933" }/*EDITMODE-END*/; const ACCENT_SWATCHES = ["#c28933", "#e0ae55", "#c9412a", "#7fa3b8"]; const PHONE_DISPLAY = "(305) 746-7307"; const PHONE_HREF = "tel:+13057467307"; const BIDS_EMAIL = "bids@mibhcommercialroofing.com"; const BIDS_HREF = "mailto:" + BIDS_EMAIL + "?subject=" + encodeURIComponent("Bid Request — MIBH Commercial Roofing") + "&body=" + encodeURIComponent("Project / GC:\nLocation:\nRoof size (sqft):\nSystem (if known):\nTarget dry-in / turnover date:\nPlans attached: "); // ──────────────────────────────────────────────────────────────────────────── // ROUTING — tiny hash router. #/services, #/work, etc. Anything else → home. // ──────────────────────────────────────────────────────────────────────────── const NAV = [ { label: "Services", route: "services" }, { label: "Systems", route: "systems" }, { label: "Work", route: "work" }, { label: "About", route: "about" }, { label: "Markets", route: "markets" }, ]; const ROUTES = NAV.map(n => n.route); function currentRoute() { const h = (window.location.hash || "").replace(/^#\/?/, "").split(/[?#]/)[0].toLowerCase(); return ROUTES.includes(h) ? h : "home"; } function useHashRoute() { const [route, setRoute] = useState(currentRoute); useEffect(() => { const onHash = () => { setRoute(currentRoute()); window.scrollTo(0, 0); }; window.addEventListener("hashchange", onHash); return () => window.removeEventListener("hashchange", onHash); }, []); return route; } // ──────────────────────────────────────────────────────────────────────────── // Spec-stamp — the signature "engineering stamp" device. Mono, tracked, gold tick. // Reserved for FACTS only (NOA #, wind rating, license, sqft) — never prose. // ──────────────────────────────────────────────────────────────────────────── function Stamp({ children, tick = true, style }) { return ( {tick && ▸} {children} ); } // ──────────────────────────────────────────────────────────────────────────── // NAV // ──────────────────────────────────────────────────────────────────────────── function Nav({ scrolled, route }) { return (

{PHONE_DISPLAY} Invite us to bid

); } // ──────────────────────────────────────────────────────────────────────────── // PAGE HEADER — shared masthead for the sub-pages (sits under the fixed nav). // ──────────────────────────────────────────────────────────────────────────── function PageHeader({ index, kicker, title, lede }) { return (

{index} {kicker &&

{kicker}

}

{title}

{lede &&

{lede}

}

); } // ──────────────────────────────────────────────────────────────────────────── // HERO // ──────────────────────────────────────────────────────────────────────────── function Hero() { const videoRef = useRef(null); useEffect(() => { const v = videoRef.current; if (!v) return; // React doesn't reliably set the DOM `muted` property — iOS blocks autoplay // without it. Force it, then kick playback (and retry on first interaction, // which covers iOS Low Power Mode where autoplay is hard-blocked). v.muted = true; v.defaultMuted = true; v.setAttribute("muted", ""); v.setAttribute("playsinline", ""); v.setAttribute("webkit-playsinline", ""); const play = () => { const p = v.play(); if (p && p.catch) p.catch(() => {}); }; play(); const kick = () => play(); document.addEventListener("touchstart", kick, { once: true, passive: true }); document.addEventListener("click", kick, { once: true }); return () => { document.removeEventListener("touchstart", kick); document.removeEventListener("click", kick); }; }, []); return (

{/* hero video — real asset, preserved from the original site */}

); } // ──────────────────────────────────────────────────────────────────────────── // TRUST BAR (marquee) // ──────────────────────────────────────────────────────────────────────────── function TrustBar() { const items = [ "Licensed Roofing CCC1336817", "Miami-Dade NOA assemblies", "In-house structural engineering", "GAF Certified", "Single-source warranty", ]; const row = [...items, ...items]; return (

{row.map((t, i) => (

{t}

))}

); } // ──────────────────────────────────────────────────────────────────────────── // THE WEDGE — why a GC subs the roof to us, not just anyone with a price // ──────────────────────────────────────────────────────────────────────────── function Wedge() { const cards = [ { k: "On schedule", b: "We build to your critical path. Dry-in dates hit, other trades never wait on the roof, and turnover doesn't slip because of us." }, { k: "Engineered & permitted", b: "NOA-approved assemblies, wind-uplift calcs, and permit submittals handled in-house — your PM never chases the AHJ." }, { k: "One accountable sub", b: "One license holds the crew, the QC, and the warranty. No finger-pointing at closeout, no callbacks landing back on you." }, ]; return (

The roof is schedule, inspection, and warranty risk. We take all three.} lede="A GC doesn't need another number — you need a roofing sub who bids it right, hits the dry-in date, and passes inspection without a callback. In the HVHZ, that's the whole job." />

{cards.map((c, i) => (

{`0${i + 1}`}

{c.k}

{c.b}

))}

); } // ──────────────────────────────────────────────────────────────────────────── // SERVICES — six headline services (grid is reused on the Services page) // ──────────────────────────────────────────────────────────────────────────── const SERVICES = [ { tag: "Service 01", title: "TPO & Single-Ply", lead: "Welded membrane for flat decks.", body: "60–80 mil TPO and PVC, hot-air welded into one continuous watertight surface over tapered insulation. HVHZ-rated attachment, Miami-Dade NOA-approved assemblies.", spec: "TPO · PVC · 60–80 mil", img: "assets/services/svc-01-tpo.jpg" }, { tag: "Service 02", title: "Standing Seam Metal", lead: "The HVHZ workhorse.", body: "Concealed-fastener panels engineered for superior wind uplift and a 40–50 year service life. Galvalume and aluminum on NOA-approved clip systems.", spec: "Metal · 40–50 yr life", img: "assets/services/svc-02-metal.jpg" }, { tag: "Service 03", title: "Modified Bitumen & BUR", lead: "Proven multi-ply redundancy.", body: "SBS and APP modified bitumen and built-up roofing with granulated, reflective cap sheets — where layered redundancy matters most. NOA-approved.", spec: "SBS · APP · BUR", img: "assets/services/svc-03-modbit.jpg" }, { tag: "Service 04", title: "Coatings & Restoration", lead: "Add years without a tear-off.", body: "Silicone and acrylic fluid-applied systems that extend roof life 10–15 years — often a maintenance line item instead of a capital replacement on your budget.", spec: "Silicone · Acrylic", img: "assets/services/svc-04-coatings.jpg" }, { tag: "Service 05", title: "Preventive Maintenance", lead: "Protect the warranty.", body: "Semi-annual and post-storm inspections, photo reports, drain and flashing service, sealant renewal, and a running roof-asset record. The cheapest roof is the one you maintain.", spec: "Inspect · Report · Renew", img: "assets/services/svc-05-maintenance.jpg" }, { tag: "Service 06", title: "Storm & Leak Repair", lead: "When water's coming in.", body: "24/7 emergency response: temporary dry-in today, permanent engineered repair this week. Leak detection and insurance-ready photo documentation.", spec: "24/7 · Dry-in · Repair", img: "assets/services/svc-06-storm.jpg" }, ]; function ServicesGrid() { const [hover, setHover] = useState(null); return (

{SERVICES.map((d, i) => (

setHover(i)} onMouseLeave={() => setHover(null)} style={{ background: "var(--bg-2)", padding: 0, position: "relative", overflow: "hidden", cursor: "pointer" }}>

{d.tag}

{d.lead}

{d.spec}

))}

); } function ServicesPage() { return (

Every roofing scope a GC needs, on one sub.} lede="Flat, metal, restoration, maintenance, and emergency repair — bid accurately and installed to Miami-Dade code by one licensed, accountable contractor." />

{/* Recurring GC note — every scope comes with the paperwork a PM needs */}

For general contractors

Every scope is provided with full submittals, NOA product approvals, manufacturer + workmanship warranties, and a closeout package — sequenced to your project timeline and your other trades.

Invite us to bid this scope See the roof systems

{/* Scopes we self-perform */}

{[ ["New construction", "Threshold-inspection roofing on ground-up commercial builds."], ["Re-roof & overlay", "On occupied commercial buildings — phased, with interiors protected."], ["Tenant build-out / TI", "Roofing for tenant improvements coordinated to the fit-out schedule."], ["Sheet metal & edge metal", "Flashing, coping, and edge metal fabricated and installed in-house."], ["Coatings & restoration", "Fluid-applied systems that extend roof life without a tear-off."], ["Penetrations & curbs", "Rooftop penetration detailing and curb flashing coordinated with your MEP subs."], ].map(([t, b], i) => (

{`0${i + 1}`}

))}

); } // ──────────────────────────────────────────────────────────────────────────── // SYSTEMS — the assemblies we spec and stand behind // ──────────────────────────────────────────────────────────────────────────── const SYSTEMS = [ { code: "SYS-01", name: "TPO & PVC Single-Ply", use: "Low-slope · large-format decks", spec: "60–80 mil · hot-air welded · fully-adhered or mechanically-attached", noa: "Miami-Dade NOA", life: "20–30 yr", note: "The default for warehouse, retail, and flat commercial decks. One continuous welded membrane with HVHZ-rated attachment engineered to the deck and wind zone." }, { code: "SYS-02", name: "Standing Seam Metal", use: "Architectural · steep-slope", spec: "Concealed-fastener · Galvalume / aluminum · NOA clip systems", noa: "Miami-Dade NOA", life: "40–50 yr", note: "The HVHZ workhorse where wind uplift and service life matter most — and the assembly that reads on an architectural elevation." }, { code: "SYS-03", name: "Modified Bitumen & BUR", use: "High-redundancy multi-ply", spec: "SBS / APP · granulated reflective cap · multi-ply", noa: "Miami-Dade NOA", life: "20–25 yr", note: "Layered redundancy for residential decks, plazas, and roofs that take foot traffic and rooftop equipment." }, { code: "SYS-04", name: "Silicone & Acrylic Coatings", use: "Restoration in lieu of tear-off", spec: "Fluid-applied · primer · reinforcing fabric", noa: "System-dependent", life: "+10–15 yr", note: "Extend a sound roof a decade-plus without a tear-off — often a maintenance expense on the budget rather than a capital replacement." }, ]; function SystemsPage() { return (

The assemblies we'll spec and stand behind on your job.} lede="Every system we bid is a Miami-Dade NOA-approved assembly detailed to the deck, the wind zone, and the AHJ — not a product off a shelf. Here's how we choose." />

{SYSTEMS.map((s, i) => (

{s.code}

{s.use}

{s.note}

{k}

))}

Get an assembly spec'd & bid

); } // ──────────────────────────────────────────────────────────────────────────── // PROCESS — four steps, documented (lives on home) // ──────────────────────────────────────────────────────────────────────────── function Process() { const steps = [ { n: "01", t: "Bid", b: "A detailed, itemized bid backed by a photo-documented condition report. Line-by-line scope and a fixed price you can drop straight into your proposal — no surprises at buyout." }, { n: "02", t: "Engineer", b: "An NOA-approved assembly detailed to the building's wind loads. Membrane selection, wind-uplift calcs, and permit submittals across Miami-Dade, Broward, and Palm Beach." }, { n: "03", t: "Install", b: "Phased tear-off with nightly dry-in, deck repair, insulation, membrane, and flashing — daily photo logs, in-line QC, and a build that passes inspection the first time." }, { n: "04", t: "Warranty", b: "Final and threshold inspections, manufacturer field check, and a single-source warranty — workmanship and manufacturer — with the closeout package your PM needs to turn over." }, ]; return (

{steps.map((s, i) => (

Step {s.n}

{s.t}

{s.b}

))}

); } // ──────────────────────────────────────────────────────────────────────────── // WORK — five case studies, written for the GC who hired us // ──────────────────────────────────────────────────────────────────────────── const PROJECTS = [ { id: "P-241", type: "TPO Re-Roof", title: "Doral Retail Plaza Re-Roof", city: "Doral, FL", gc: "Retail build-out GC · national tenant program", scope: "32,000 sqft failed BUR → fully-adhered 60-mil TPO on tapered ISO, over an occupied plaza", systems: "GAF EverGuard TPO 60-mil · Miami-Dade NOA · 25-yr NDL", result: "Bid held to the dollar — zero change orders. Closed out two days ahead of the GC's tenant-turnover date." /*VERIFY*/, timeline: "2024 · 6 weeks", img: "drone — TPO membrane on retail plaza", video: "assets/projects/doral-retail.mp4" }, { id: "P-214", type: "New-Construction TPO", title: "Doral Logistics Warehouse", city: "Doral, FL", gc: "Design-build industrial GC", scope: "212,000 sqft mechanically-attached TPO on new metal deck", systems: "Carlisle TPO 60-mil · R-30 ISO · wind-rated attachment", result: "Dried-in on the CM's critical-path date so interior trades never waited. Full drone + photo QC log delivered at closeout.", timeline: "2023 · 11 weeks", img: "drone — warehouse TPO field" }, { id: "P-238", type: "PVC Single-Ply", title: "Las Olas Retail Center", city: "Fort Lauderdale, FL", gc: "Mixed-use GC", scope: "86,200 sqft PVC re-roof phased around live tenant fit-outs", systems: "Sika Sarnafil PVC 80-mil · tapered ISO · 20-yr", result: "Sequenced to the GC's fit-out schedule with nightly dry-in — no tenant downtime. Punch list cleared in a single walk.", timeline: "2024 · 12 weeks", img: "drone — PVC membrane retail roof" }, { id: "P-229", type: "Mod-Bit / BUR", title: "Oceanview Condominium Re-Roof", city: "Hollywood, FL", gc: "Coastal residential GC", scope: "Multi-ply SBS over a 9-story occupied residential deck", systems: "SBS mod-bit · granular cap · full flashing rebuild · Miami-Dade NOA", result: "NOA package and warranty registered before the GC's substantial-completion deadline. Watertight through hurricane season.", timeline: "2023 · 16 weeks", img: "elevation — mod-bit roof on condo" }, { id: "P-208", type: "Silicone Restoration", title: "Aventura Mixed-Use Restoration", city: "Aventura, FL", gc: "CM · capital projects", scope: "64,000 sqft silicone restorative coating in lieu of a full tear-off", systems: "Silicone · primer · reinforcing fabric · 15-yr", result: "Restoration bid came in ~60% under tear-off — booked as maintenance, not capital. Zero disruption to the CM's occupied tenants.", timeline: "2022 · 6 weeks", img: "rooftop — silicone coating spray" }, ]; function WorkGallery() { const [active, setActive] = useState(0); const p = PROJECTS[active]; return (

{p.video ? (

{p.type} {p.id}

{p.title}

{k}: {v}

Invite us to bid this scope

{PROJECTS.map((pr, i) => ( ))}

); } function WorkPage() { return (

Delivered for the GCs who bid us.} lede="Five South Florida projects, each judged the way a GC judges a sub: bid held, schedule hit, inspection passed, closeout clean." />

); } // ──────────────────────────────────────────────────────────────────────────── // ABOUT // ──────────────────────────────────────────────────────────────────────────── function AboutPage() { const creds = [ ["CCC1336817", "State-licensed roofing"], ["Since 2006", "Roofing South Florida"], ["Miami-Dade NOA", "Approved assemblies"], ["GAF Certified", "Manufacturer-backed"], ["Fully insured", "GL + workers' comp"], ["350+", "Roofs delivered" /*VERIFY*/], ]; const why = [ ["We hit your dates", "We schedule to your critical path and coordinate mobilization around the other trades. Your CO doesn't wait on the roof."], ["We pass inspection the first time", "NOA-compliant assemblies, HVHZ detailing, and an in-house structural engineer mean threshold and final inspections don't bounce."], ["Clean paperwork, start to finish", "Submittals, product approvals (NOAs), shop drawings, pay apps, lien waivers, and a full closeout package with warranties."], ["Fully insured, COI on request", "General liability, workers' comp, and auto — with a certificate of insurance issued to your requirements, fast."], ["We work around your tenants", "Occupied-building logistics: phased tear-off, nightly dry-in, and interiors protected — no downtime for the building's operations."], ["One point of contact", "A dedicated project manager who answers the phone, coordinates penetrations and curbs with your MEP subs, and keeps you ahead of surprises."], ]; const coordination = [ ["Preconstruction & submittals", "We turn around NOAs, product data, and shop drawings fast so nothing stalls approval."], ["Coordinated mobilization", "We set our start to your schedule, not ours."], ["Trade coordination", "We sequence around mechanical, plumbing, and electrical rooftop work and detail every penetration."], ["Inspections", "We're on-site for threshold and final — and we know the AHJs across Miami-Dade, Broward, and Palm Beach."], ["Closeout", "As-builts, warranties (manufacturer + workmanship), final lien releases, and O&M docs — handed over, not chased."], ]; return (

The roofing sub South Florida GCs keep on the bid list.} lede="Since 2006, MIBH has run the roofing scope for general contractors and construction managers across Miami-Dade, Broward, and Palm Beach — the buildings where the roof is on the critical path and the AHJ is unforgiving." />

A roofing sub that thinks like a GC.

Most roofers sell a price. On a real project, the price is the easy part — the risk is the schedule, the inspection, and the warranty callback that lands back on the GC six months later. We built MIBH's commercial division around removing that risk: engineered assemblies, permit authority in-house, and one license that owns the crew, the QC, and the warranty from bid to turnover.

That's why GCs and CMs keep us on the bid list: we hand back a number we stand behind, hit the dry-in date, and pass inspection the first time — so the roof is the line item you stop worrying about.

Invite us to bid See the work

{creds.map(([n, l]) => (

{n}

{l}

))}

{why.map(([k, b], i) => (

{`0${i + 1}`}

{k}

{b}

))}

{/* How we work with your team — GC coordination process */}

{coordination.map(([t, b], i) => (

{`0${i + 1}`}

{t}

{b}

))}

Serving Miami-Dade · Broward · Palm Beach — Hollywood, FL

); } // ──────────────────────────────────────────────────────────────────────────── // MARKETS // ──────────────────────────────────────────────────────────────────────────── const MARKET_ROWS = [ ["Retail & shopping plazas", "Occupied re-roofs sequenced to your tenant fit-out schedule, with nightly dry-in and zero downtime."], ["Warehouse & industrial", "Large-format TPO and metal engineered for wide, high-uplift spans — dried in on the CM's critical path."], ["Office & medical", "Quiet, phased work and documentation that keeps facilities running and inspectors satisfied."], ["Condo & HOA", "Board-ready proposals, reserve-study support, and the closeout package a residential GC needs."], ["Hospitality", "Guest-experience-first scheduling and reflective, efficient systems that hold up on the coast."], ["New construction", "NOA-compliant assemblies that pass threshold inspection the first time, on the GC's schedule."], ]; function MarketsGrid() { return (

{MARKET_ROWS.map(([t, b], i) => (

{`0${i + 1}`}

{b}

))}

); } function MarketsPage() { return (

Different buildings, different roofs. We know the difference.} lede="The building types South Florida GCs put us on — each with the assembly, schedule, and documentation it demands." />

Invite us to bid

); } // ──────────────────────────────────────────────────────────────────────────── // HOME // ──────────────────────────────────────────────────────────────────────────── function HomePage() { return (

); } // ──────────────────────────────────────────────────────────────────────────── // FINAL CTA + FOOTER (shared — appended to every page) // ──────────────────────────────────────────────────────────────────────────── function FinalCTA() { const footCols = [ ["Company", [["Home", "#/"], ["About MIBH", "#/about"], ["Our Work", "#/work"], ["Contact", BIDS_HREF], ["Careers", "#"]]], ["Services", [["TPO & Single-Ply", "#/services"], ["Standing Seam Metal", "#/services"], ["Modified Bitumen & BUR", "#/services"], ["Coatings & Restoration", "#/services"], ["Systems overview", "#/systems"]]], ["Markets", [["Retail & Plazas", "#/markets"], ["Warehouse & Industrial", "#/markets"], ["Office & Medical", "#/markets"], ["Condo & HOA", "#/markets"], ["New Construction", "#/markets"]]], ["For GCs", [["Invite us to bid", BIDS_HREF], ["Emergency Repair", PHONE_HREF], ["Warranty Info", "#"], ["Financing", "#"]]], ]; return (

Add us to your bid list

GCs trust us
to bid their
jobs.

Send us the plans and get a scoped, itemized roofing bid you can drop straight into your proposal — accurate, on time, and backed by a licensed roofer who stands behind the number.

Bids: {BIDS_EMAIL}

Invite us to bid Call {PHONE_DISPLAY}

Same-business-day response
Commercial · Industrial · Condo/HOA · New construction

); } ReactDOM.createRoot(document.getElementById("root")).render();

{title}

Roofing your GC can build on.

{c.k}

{d.lead} {d.spec}

{s.use}

{s.t}

{p.title}

A roofing sub that thinks like a GC.

{k}

{t}

{b}

GCs trust usto bid theirjobs.

Roofing your GC
can build on.

{d.lead}

{d.spec}

GCs trust us
to bid their
jobs.