// Mobile Services page const { useState: svS, useEffect: svE, useRef: svR } = React; function ServicesHero() { return (

What we do

Stone protection, engineered to last.

A virtually invisible protective layer engineered to preserve the beauty of natural stone — bonded to your countertops in one day, warranted for life.

); } // The System — dark photo bg with explainer card overlay function System() { return (

The first line of defense
between your stone and the life around it.

Certified StoneGuard® Installer

01 · The System

The StoneGuard® System.

An advanced, nearly invisible barrier engineered to preserve the beauty of natural stone. It bonds to the surface, takes the abuse that stone can't, and leaves your countertop looking identical to the day it was installed.

{String(i + 1).padStart(2, "0")} · {r.t}

{r.d}

); } // Two-service section (re-use of home's pattern but standalone) function ServiceCards({ onInquire }) { const services = [ { name: "StoneGuard® Clear", sub: "Polished finish", desc: "A virtually invisible film for polished marble — stain-proof, etch-proof, heat-resistant. Marble looks identical, just stops getting ruined.", bullets: ["Polished & glossy surfaces", "Stain Proof", "Etch Proof", "Lifetime Warranty"], img: "../assets/work-clear-6.jpg", }, { name: "StoneGuard® Satin", sub: "Honed finish", desc: "Engineered for honed stone. Protects the full surface, preserves the tactile softness, and adds depth that brings out the stone's natural color.", bullets: ["Honed surfaces", "Matches matte finish perfectly", "Food-safe & non-yellowing", "Enhances depth and colors"], img: "../assets/work-satin-2.png", }, ]; return (

02 · Two Finishes

One outcome: a countertop that stays like new.

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

{s.sub}

{s.name}

{s.desc}

))}

); } // Applications — 2-col room grid function Applications() { const apps = [ { name: "Kitchens", img: "../assets/work-clear-1.jpg" }, { name: "Master Baths", img: "../assets/work-clear-2.jpg" }, { name: "Dining Tables", img: "../assets/work-clear-4.jpg" }, { name: "Bars & Built-ins", img: "../assets/work-clear-5.jpg" }, { name: "Outdoor Kitchens", img: "../assets/hero-5313.jpg" }, { name: "Vanities & Tops", img: "../assets/work-satin-3.png" }, ]; return (

Applications

In every room of the home.

{apps.map((a, i) => (

{a.name}

{String(i + 1).padStart(2, "0")}

))}

); } // ───────────────────────────────────────────── // FUTURE SERVICES — annex tease of products in development // ───────────────────────────────────────────── function FutureServices() { const items = [ { name: "Restoration Service", status: "Q3 2026", desc: "Full marble polishing and etch repair as a standalone service — for clients who don't yet want a film, but need their stone brought back." }, ]; return (

03 · On the way

More services on the way.

{items.map((it, i) => (

Coming soon

{it.status}

{it.name}

{it.desc}

))}

); } // ───────────────────────────────────────────── // COMPARISON — drag (or scrub) between Clear & Satin on the same photo // Touch-native: drag the handle left-right, or tap one side to reveal. // ───────────────────────────────────────────── function ServiceComparison() { const [pos, setPos] = svS(50); // 0-100, percent revealed of the right side (Satin) const dragRef = svR(null); const draggingRef = svR(false); svE(() => { const el = dragRef.current; if (!el) return; const onMove = (clientX) => { const rect = el.getBoundingClientRect(); const x = ((clientX - rect.left) / rect.width) * 100; setPos(Math.max(0, Math.min(100, x))); }; const onDown = (e) => { draggingRef.current = true; onMove(e.touches ? e.touches[0].clientX : e.clientX); e.preventDefault(); }; const onMv = (e) => { if (!draggingRef.current) return; onMove(e.touches ? e.touches[0].clientX : e.clientX); }; const onUp = () => { draggingRef.current = false; }; el.addEventListener("touchstart", onDown, { passive: false }); el.addEventListener("touchmove", onMv, { passive: false }); el.addEventListener("touchend", onUp); el.addEventListener("mousedown", onDown); window.addEventListener("mousemove", onMv); window.addEventListener("mouseup", onUp); return () => { el.removeEventListener("touchstart", onDown); el.removeEventListener("touchmove", onMv); el.removeEventListener("touchend", onUp); el.removeEventListener("mousedown", onDown); window.removeEventListener("mousemove", onMv); window.removeEventListener("mouseup", onUp); }; }, []); return (

04 · Compare

Similar stones. Two finishes.

Drag the handle to switch between the polished Clear film and the matte Satin film on similar stones.

{/* Bottom: Satin (right side) */} StoneGuard Satin on honed marble

{/* Top: Clear (left side) — clipped at pos */}

{/* Labels */}

Clear · Polished

Satin · Honed

{/* The divider + handle */}

Clear

For polished stone

Optically clear. Enhances the reflective depth of polished marble.

Satin

For honed stone

Matched-matte. Preserves the soft tactility of honed finishes.

); } // ───────────────────────────────────────────── // WHAT IT IS — expandable spec accordion (4 facts) // ───────────────────────────────────────────── function WhatItIs() { const facts = [ { q: "What is StoneGuard?", a: "A precision-engineered protective film, hand-applied to your stone. Roughly the thickness of a human hair. It bonds to the surface and acts as the wear layer — taking the rings, scratches, and etches, instead of your stone.", spec: [ ["Material", "Multi-layer urethane film"], ["Thickness", "~8 mil (0.2 mm)"], ["Bond type", "Pressure-activated, residue-free removal"], ["Cure time", "24 hours after install"], ], }, { q: "What does it actually stop?", a: "Stains from wine, oil, coffee, citrus. Etches from acidic foods. Scratches from cutting and sliding pans. Heat up to 420°F. The film is the surface that takes the abuse — your stone never sees it.", spec: [ ["Stains", "Sealed top layer is non-porous"], ["Etches", "Acid-resistant"], ["Scratches", "Self-healing surface to a depth"], ["Heat", "Tested to 420°F continuous"], ], }, { q: "Will I see it?", a: "No. Clear is optically matched to polished stone — most clients can't find the edge after install. Satin is engineered to match honed and matte finishes exactly. We hand-trim every edge to disappear into the stone's existing seams.", spec: [ ["Clarity", "Clear, UV-stable, non-yellowing"], ["Match", "Polished or honed"], ["Edges", "Hand-trimmed, no visible seam"], ], }, { q: "Can it be removed?", a: "Yes, cleanly, by us. The adhesive is engineered for a residue-free release. Sell the home, renovate, change your mind — the stone underneath is exactly as it was the day we installed.", spec: [ ["Removal", "Professional, residue-free"], ["Stone", "Unchanged from pre-install"], ["Re-install", "Possible after cleaning"], ], }, ]; return (

05 · What it actually is

A film as thin as a human hair, doing the job of a coaster, a cutting board, and a trivet — permanently.

{/* Cross-section diagram — simple, illustrative */}

{facts.map((f, i) => )}

); } function FactRow({ fact, index }) { const [open, setOpen] = svS(false); return (

{k} {v}

); } // Simple cross-section: stone slab → adhesive → film → wear function FilmDiagramMobile() { return (

Cross-section · Actual scale exaggerated 20×

Protected by U.S. Patent 9,980,567 · View

); } // ───────────────────────────────────────────── // WHY US — 4 pillars on dark // ───────────────────────────────────────────── function WhyUs() { const pillars = [ { h: "We only do this.", p: "Surface protection is the entire business. Not a tile shop, not a fabricator, not a side service. Specialists, not generalists." }, { h: "Certified by the manufacturer.", p: "We're a Certified StoneGuard® installer. That's a relationship the brand only extends to teams whose work they'll stand behind." }, { h: "Lifetime warranty, in writing.", p: "If the film fails, we're back. No subcontractor lottery. No expiration date. The same two installers who applied it answer the call." }, { h: "Five stars, every review.", p: "Five-star average across Google and Houzz. Thousands of homes. Read them all on the home page if you'd like." }, ]; return (

06 · Why us

There are other installers. This is what makes us different.

{pillars.map((p, i) => (

0{i + 1}

{p.h}

{p.p}

))}

); } // ───────────────────────────────────────────── // PROCESS — 6 steps from "I'm worried" to "I forgot it was there" // ───────────────────────────────────────────── function ServicesProcess() { const steps = [ { no: "01", t: "You find us.", d: "Most clients arrive through social, a referral, or a fabricator who's seen our work. You submit an inquiry — it takes about a minute.", side: "DAY 0" }, { no: "02", t: "Consultation.", d: "We discuss your project, your specific stone, and how we can best service you.", side: "DAY 1–2" }, { no: "03", t: "Measurements.", d: "We walk you through the measurement process we use to price the installation.", side: "DAY 2" }, { no: "04", t: "We send the quote.", d: "An itemized quote based on the exact square footage and finish. No surprises later.", side: "DAY 3" }, { no: "05", t: "We schedule and install.", d: "Two installers, one day, your kitchen. Template, prep, lay, hand-trim, cure. You can use the counters that night.", side: "INSTALL" }, { no: "06", t: "You forget it's there.", d: "By the next morning, the film has fully cured and disappeared into the stone. You'll never think about coasters again.", side: "FOREVER" }, ]; return (

07 · The Process

Six steps from "I'm worried" to "I forgot it was there."

The whole arc usually takes a week. The install itself is one day.

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

{s.no}

{s.t}

{s.side}

{s.d}

))}

); } Object.assign(window, { ServicesHero, System, ServiceCards, Applications, FutureServices, ServiceComparison, WhatItIs, WhyUs, ServicesProcess, });