// app.jsx — MIBH Commercial homepage. Full single-page interactive prototype. const { useState, useEffect, useRef, useMemo } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "dark", "accent": "#e08a3c", "displayFont": "serif" }/*EDITMODE-END*/; const ACCENT_SWATCHES = ["#e08a3c", "#c9412a", "#d6cdb8", "#7fa3b8"]; // ──────────────────────────────────────────────────────────────────────────── // NAV // ──────────────────────────────────────────────────────────────────────────── const NAV_LINKS = [ ["Services", "/services"], ["Portfolio", "/portfolio"], ["Why MIBH", "#why"], ["About Us", "#about"], ["Contact Us", "#contact"], ]; function Nav({ scrolled }) { const [open, setOpen] = useState(false); const solid = scrolled || open; return (

+1 305 746 7307 Request Bid

{open && (

{NAV_LINKS.map(([l, href]) => ( setOpen(false)} style={{ padding: "13px 4px", font: "500 15px/1 var(--sans)", color: "var(--fg-2)", borderBottom: "1px solid var(--line)" }}>{l} ))}

)}

); } // ──────────────────────────────────────────────────────────────────────────── // HERO // ──────────────────────────────────────────────────────────────────────────── function Hero() { return (

{/* hero video */}

); } // ──────────────────────────────────────────────────────────────────────────── // TRUST BAR (marquee) // ──────────────────────────────────────────────────────────────────────────── function TrustBar() { const items = [ "CGC1527069 — Certified General Contractor", "Design-Build & CM at-Risk", "Fully Licensed & Insured", "South Florida service area", "OSHA-compliant safety program", "Florida Building Code · HVHZ compliant", ]; const row = [...items, ...items]; return (

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

))}

); } // Auto-rotating image — cross-fades through a set of photos (used by Hospitality). function RotatingImage({ photos, alt, interval = 3400, children }) { const [i, setI] = useState(0); useEffect(() => { if (!photos || photos.length < 2) return; const id = setInterval(() => setI(x => (x + 1) % photos.length), interval); return () => clearInterval(id); }, [photos ? photos.length : 0, interval]); return (

{photos.map((src, idx) => ( {alt}

))} {children}

); } // ──────────────────────────────────────────────────────────────────────────── // DIVISIONS / SERVICES // ──────────────────────────────────────────────────────────────────────────── function Divisions() { const divs = [ { tag: "Division 01", title: "Warehouse & Distribution", body: "Ground-up tilt-wall and structural-steel warehouses, distribution hubs, and light industrial — slab-to-shell, dock-high loading, and clear-span logistics space.", spec: "Tilt-wall · Clear-span · Dock-high", img: "drone — warehouse under construction" }, { tag: "Division 02", title: "Multifamily & Mixed-Use", body: "Podium, garden, and mid-rise multifamily, mixed-use, and residential — from foundations and framing through amenities, façade, and turnover.", spec: "Podium · Mid-rise · Mixed-use", img: "elevation — multifamily framing" }, { tag: "Division 03", title: "Structural Steel & Metal Deck", body: "Structural steel erection, bar joists, and metal roof & floor decking — engineered connections, welded and fastened, sequenced to keep the build moving.", spec: "Steel · Joists · Metal deck", img: "site — steel frame & metal deck" }, { tag: "Division 04", title: "Concrete & Tilt-Wall", body: "Site concrete, foundations, slabs-on-grade, and tilt-up panel casting and erection — self-performed for schedule control and quality.", spec: "Foundations · Slabs · Tilt-up", img: "site — tilt-wall panel lift", video: "assets/tilt-wall.mp4" }, { tag: "Division 05", title: "Tenant Improvements & Build-Outs", body: "Interior build-outs, white-box and second-generation TIs, and occupied renovations for retail, office, restaurant, and industrial tenants.", spec: "TI · White-box · Renovation", img: "interior — commercial build-out" }, { tag: "Division 06", title: "Site Development & Sitework", body: "Clearing, grading, underground utilities, paving, and hardscape — turning raw and infill sites into pad-ready and finished projects.", spec: "Grading · Utilities · Paving", img: "drone — sitework & grading" }, { tag: "Division 07", title: "Hospitality & Hotels", body: "Ground-up and renovation work for national hotel flags — Home2 Suites, Hilton Garden Inn, and Residence Inn by Marriott — built to brand standard across South Florida.", spec: "Hotels · Flagged · Brand-standard", img: "recent hotel projects", photos: ["assets/home2suites-1.jpg", "assets/hiltongardeninn-1.jpg", "assets/residenceinn-1.jpg"] }, ]; const [hover, setHover] = useState(null); return (

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

setHover(i)} onMouseLeave={() => setHover(null)} style={{ background: "var(--bg)", padding: 0, position: "relative", overflow: "hidden", cursor: "pointer", transition: "background .25s" }}> {d.photos ? (

{`MIBH · ${d.tag.toUpperCase()}`}

) : d.video ? (

) : ( )}

{d.tag}

Explore division

))}

Every sector

Don't see your project type?

We build across industrial, retail, office, medical, and more — tell us what you're planning and we'll scope it.

Talk to us

); } // ──────────────────────────────────────────────────────────────────────────── // WHY MIBH // ──────────────────────────────────────────────────────────────────────────── function WhyMIBH() { const items = [ { n: "01", t: "Single Point of Responsibility", b: "Preconstruction, permitting, self-perform trades, subs, scheduling, and close-out coordinated by one accountable general contractor — not a fragmented sub chain." }, { n: "02", t: "HVHZ & Building-Code Expertise", b: "Every structure built to Florida Building Code, threshold-inspected where required, and engineered for High-Velocity Hurricane Zone loads from Miami-Dade to Palm Beach." }, { n: "03", t: "Self-Perform Trades", b: "In-house concrete, steel, and metal-deck crews — the control that protects schedule, quality, and budget instead of waiting on the next sub to show up." }, { n: "04", t: "Schedule & Budget Discipline", b: "GMP transparency, real-time cost tracking, and phased scheduling that keep the project on its pro forma and the owner ahead of surprises." }, ]; return (

{items.map(it => (

{it.n}

))}

); } // ──────────────────────────────────────────────────────────────────────────── // FEATURED PROJECTS // ──────────────────────────────────────────────────────────────────────────── const PROJECTS = [ { id: "P-241", type: "Warehouse / Distribution", title: "Doral Logistics Warehouse", city: "Doral, FL", scope: "212,000 sqft tilt-wall distribution center, ground-up", systems: "Tilt-wall · steel joists · 32' clear · dock-high", timeline: "2024 · 11 months", shots: ["drone — tilt-wall shell", "exterior — dock-high doors", "interior — clear-span bays", "aerial — completed roof"] }, { id: "P-238", type: "Multifamily", title: "Las Olas Residences", city: "Fort Lauderdale, FL", scope: "214-unit podium-deck mid-rise multifamily", systems: "Post-tension podium · wood-frame · amenity deck", timeline: "2024 · 22 months", shots: ["elevation — mid-rise façade", "amenity — pool deck", "interior — model unit", "aerial — podium & site"] }, { id: "P-229", type: "Structural Steel", title: "Gateway Commerce Center", city: "Medley, FL", scope: "Structural steel & metal deck, 3-building flex park", systems: "Steel frame · bar joists · 1.5\" B-deck", timeline: "2023 · 9 months", shots: ["site — steel erection", "detail — moment connection", "deck — metal floor deck", "frame — topped out"] }, { id: "P-221", type: "Tilt-Wall", title: "Airport West Industrial", city: "Doral, FL", scope: "148,000 sqft tilt-up shell + office build-out", systems: "Tilt-up panels · slab-on-grade · TI", timeline: "2023 · 8 months", shots: ["site — panel lift", "exterior — finished shell", "interior — office build-out", "aerial — completed site"] }, { id: "P-214", type: "Tenant Improvement", title: "Aventura Retail Build-Out", city: "Aventura, FL", scope: "34,000 sqft second-gen retail + restaurant TI", systems: "White-box · MEP · storefront · FF&E", timeline: "2023 · 4 months", shots: ["interior — retail build-out", "storefront — glass & entry", "detail — MEP rough-in", "finish — completed space"] }, { id: "P-208", type: "Mixed-Use", title: "Sunset Plaza Mixed-Use", city: "Miami, FL", scope: "Ground-floor retail over structured parking", systems: "Cast-in-place · steel · façade", timeline: "2022 · 16 months", shots: ["elevation — mixed-use podium", "retail — ground floor", "structure — cast-in-place", "aerial — completed block"] }, ]; function FeaturedProjects() { const [active, setActive] = useState(0); const p = PROJECTS[active]; return (

All projects

{/* Featured detail panel */}

{p.shots.map((shot, si) => (

))} {/* overlay corners */}

● {p.id} · 4 PHOTOS {p.timeline.split(" · ")[0]}

{p.type} {p.id}

{p.title}

{k}

Full case study

{/* Project switcher rail */}

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

); } // ──────────────────────────────────────────────────────────────────────────── // PROCESS — 5 steps timeline // ──────────────────────────────────────────────────────────────────────────── function Process() { const steps = [ { n: "01", t: "Preconstruction & Estimating", b: "Constructability review, value engineering, budgeting, and GMP development — drawings, site logistics, and long-lead items pinned down before the first shovel." }, { n: "02", t: "Design-Build & Permitting", b: "Coordinate architects and engineers, threshold and structural detailing, and municipal permit submittals across Miami-Dade, Broward, and Palm Beach." }, { n: "03", t: "Scheduling & Procurement", b: "Critical-path schedule locked, steel and long-lead materials procured, subcontractors bought out, and crews and crane time confirmed." }, { n: "04", t: "Self-Perform & Construction", b: "Foundations, concrete, steel and metal deck, envelope, and interiors — daily photo logs and in-line QC against the approved GMP scope." }, { n: "05", t: "Commissioning & Close-Out", b: "Punch, inspections, Certificate of Occupancy, warranties, as-builts, and a clean digital handover package — turned over ready to occupy." }, ]; return (

{/* horizontal rule */}

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

Phase {s.n}

))}

{/* secondary differentiators */}

{[ ["Upload Plans & Drawings", "Submit plans, drawings, scopes, and site photos. Encrypted intake routed straight to preconstruction and estimating."], ["Project Map", "Interactive build map across Miami, Fort Lauderdale, Hollywood, Aventura, Boca, and Palm Beach."], ["Bid System", "Dedicated GC proposal workflow: Request a Bid, Schedule a Site Walk, Upload Plans."], ].map(([t, b], i) => (

Differentiator · 0{i+1}

{t}

{b}

))}

); } // ──────────────────────────────────────────────────────────────────────────── // SOCIAL PROOF — credentials wall // ──────────────────────────────────────────────────────────────────────────── function SocialProof() { const munis = ["Miami", "Miami Beach", "Coral Gables", "Aventura", "Hollywood", "Fort Lauderdale", "Pompano Beach", "Boca Raton", "Delray Beach", "West Palm Beach", "Palm Beach", "Doral", "Sunny Isles", "Hialeah"]; const cats = ["Ground-up construction", "Tilt-wall & concrete", "Structural steel", "Metal roof & floor deck", "Tenant improvements", "Sitework & utilities", "Design-build"]; const sectors = ["Industrial", "Warehouse", "Multifamily", "Retail", "Office", "Mixed-Use", "Restaurant", "Medical", "Municipal"]; return (

{/* Municipalities */}

Municipalities · Active permits

{munis.map(m => ( {m}, FL ))}

Self-perform & scope

Sectors we build

{sectors.map((v, i) => (

{v}

))}

{/* Documents */}

On file · Available on request

{[ ["CGC1527069", "General Contractor", "FL DBPR · Active"], ["Bonding", "Bid & Performance", "Aggregate available"], ["COI · GL/Auto", "Certificate of Insurance", "$2M / $4M agg."], ["WC Coverage", "Workers' Compensation", "FL · Active"], ["EMR / OSHA", "Safety record", "OSHA 30 · low EMR"], ["W-9 / SSAE", "Tax & vendor docs", "Available on request"], ].map(([code, t, m]) => (

))}

Request credential package

); } // ──────────────────────────────────────────────────────────────────────────── // ABOUT US // ──────────────────────────────────────────────────────────────────────────── function AboutUs() { const items = [ ["Owner-focused", "We build around your pro forma and your schedule — clear budgets, real-time cost tracking, and no surprises at close-out."], ["Self-perform trades", "In-house concrete, steel, and metal-deck crews keep the critical path in our hands, not stuck in a subcontractor's queue."], ["Licensed & insured", "Certified General Contractor CGC1527069 — fully insured, OSHA-compliant, and permitted across Miami-Dade, Broward, and Palm Beach."], ["Built to code", "Every structure engineered to Florida Building Code and HVHZ wind loads — the standard South Florida actually demands."], ]; return (

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

))}

); } // ──────────────────────────────────────────────────────────────────────────── // FINAL CTA + FOOTER // ──────────────────────────────────────────────────────────────────────────── function FinalCTA() { return (

{/* faint pattern */}

08 / Get in touch

Ready to build
your project?

Commercial construction — warehouses, multifamily, structural steel and metal deck, concrete, and tenant build-outs — engineered for South Florida and delivered on schedule.

Request a Bid Upload Plans Schedule a Site Walk

Encrypted intake · 1-business-day response
Warehouse / Multifamily / Industrial / Retail

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

South Florida's commercial general contractor.

Explore division

Don't see your project type?

{p.title}

{t}

Ready to buildyour project?

South Florida's
commercial general
contractor.

Ready to build
your project?