// Shared Nuline website layout components const { useState, useEffect, useRef } = React; // ---- Line icons (1.75 stroke, lucide-style) ---- function Icon({ name, size = 18, color = "currentColor", ...p }) { // Icon glyphs are decorative — paired with text labels (or aria-labelled parents like // the social link / hamburger button), so we hide them from screen readers by default. const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", ...p }; switch (name) { case "arrow":return ; case "phone":return ; case "check":return ; case "pin":return ; case "chevron":return ; case "star":return ; case "clock":return ; case "mail":return ; case "facebook":return ; case "instagram":return ; case "fence":return ; case "menu":return ; default:return null; } } // ---- Fence illustrations (line art, forest color) ---- const FENCE_ILL_LABELS = { paling: "Paling fence illustration", lattice: "Lattice-top fence illustration", capping: "Capped fence illustration", retaining: "Retaining wall illustration", gate: "Gate illustration", repairs: "Fence repair illustration" }; function FenceIll({ variant = "paling", size = 120 }) { const c = "#2E4B33",sw = 1.6; const common = { width: size, height: size, viewBox: "0 0 120 110", fill: "none", stroke: c, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round", role: "img", "aria-label": FENCE_ILL_LABELS[variant] || "Fence illustration" }; if (variant === "paling") { return ( {[18, 30, 42, 54, 66, 78, 90, 102].map((x, i) => )} ); } if (variant === "lattice") { return ( {[18, 30, 42, 54, 66, 78, 90, 102].map((x, i) => )} {/* lattice top */} ); } if (variant === "capping") { return ( {[18, 30, 42, 54, 66, 78, 90, 102].map((x, i) => )} ); } if (variant === "retaining") { return ( ); } if (variant === "gate") { return ( ); } if (variant === "repairs") { return ( {[18, 30, 42, 54, 66, 78, 90, 102].map((x, i) => )} {/* hammer */} ); } return null; } // Cross-section illustration for "We Build Fences that Last" const CROSS_ILL_LABELS = { plinth: "Thicker plinth board cross-section illustration", posts: "Long post in deep concrete footing illustration", tight: "Tightly spaced palings illustration", fixings: "Galvanised steel fasteners illustration", timber: "Treated pine timber post illustration", concrete: "Wide concrete footing illustration" }; function CrossIll({ variant, size = 160 }) { const c = "#2E4B33",a = "#C96442",sw = 1.6; const common = { width: size, height: size, viewBox: "0 0 160 150", fill: "none", stroke: c, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round", role: "img", "aria-label": CROSS_ILL_LABELS[variant] || "Fence-build detail illustration" }; if (variant === "plinth") { // Thicker plinth board return ( {/* palings */} {[36, 50, 64, 78, 92, 106, 120].map((x, i) => )} {/* thick plinth */} {/* measurement arrow */} ); } if (variant === "posts") { // Post in ground w/ concrete + arrow return ( {/* ground line */} {/* deep hole with concrete */} {/* rocky texture */} {/* down arrow */} ); } if (variant === "tight") { // Palings closer together w/ arrows pointing in return ( {/* posts */} {/* rails */} {/* tightly spaced palings */} {[38, 50, 62, 74, 86, 98, 110, 122].map((x, i) => )} {/* arrows */} ); } if (variant === "fixings") { // Three galvanised fixings: nail, screw, bracket return ( {/* nail */} {/* terracotta sheen on nail shank */} {/* screw */} {/* threads */} {/* L bracket with bolt holes */} ); } if (variant === "timber") { // Treated pine post with end-grain growth rings + H3 indicator return ( {/* post */} {/* end-grain rings at top */} {/* grain lines */} {/* H3 treatment tag */} H3 ); } if (variant === "concrete") { // Post embedded in a wide concrete footing - emphasises the concrete mass return ( {/* dashed ground line */} {/* timber post extending up from concrete */} {/* wide concrete footing - trapezoid below ground, terracotta outline */} {/* aggregate stones inside concrete */} {/* depth measurement arrow on the right */} ); } return null; } // ---- NAV ---- function Nav({ current }) { const [mobileOpen, setMobileOpen] = useState(false); const links = [ { label: "Services", href: "services.html", hasMenu: true }, { label: "Areas We Service", href: "areas.html" }, { label: "Gallery", href: "gallery.html" }, { label: "FAQs", href: "faqs.html" }, { label: "About", href: "about.html" }, { label: "Contact", href: "contact.html" }]; const services = [ { label: "Paling fence", sub: "Standard treated pine", href: "services.html#paling" }, { label: "Built-in lattice", sub: "Height + light", href: "services.html#lattice" }, { label: "Fence capping", sub: "Longer lifespan", href: "services.html#capping" }, { label: "Retaining walls", sub: "Sleeper & steel", href: "services.html#retaining" }]; return ( );} // ---- FOOTER ---- function Footer() { return ( ); } // ---- Credentials band (above footer) ---- function Credentials() { return (
REGIS-
TERED
RegisteredBuilding Practitioner
Proudly supporting
🌿 Greenfleet
Committed to making a sustainable difference
); } // ---- CTA strip (terracotta) ---- function CtaStrip() { return (

Ready for a fence that stays straight?

Request a free quote Call 0406 644 912
); } // ---- Hero (dark wood) ---- function HeroWood({ title, sub, mobileSub, kicker, trustLine, showMark = true, showAward = true, showBtns = true }) { return (
{kicker &&
{kicker}
}

{title}

{sub}

{mobileSub &&

{mobileSub}

} {showBtns &&
Request quote Call 0406 644 912
} {trustLine &&
{trustLine}
} {showMark &&
{showAward &&
}
Mr NULINE
}
); } function HouseMark() { return ( {/* interior palings */} ); } function AwardSeal({ size = 110 }) { return ( {/* laurel */} {[22, 30, 38, 46].map((y, i) => )} {[22, 30, 38, 46].map((y, i) => )} QUALITY BUSINESS AWARDS NULINE FENCING 2024 2025 WINNER ); } // ---- Quick quote form ---- function QuickQuote() { const [submitted, setSubmitted] = useState(false); const [form, setForm] = useState({ name: "", phone: "", suburb: "", svc: "Paling / Timber fence", length: "", note: "" }); const update = (k) => (e) => setForm({ ...form, [k]: e.target.value }); if (submitted) { return (

Thanks - we'll be in touch within 24 hours.

We read every enquiry ourselves. Expect a quick text or a phone call from Paul within 24 hours.

); } return (
Free quote

Rough measurements are fine. We re-measure on site.

Tell us a bit about your fence. We'll come out, walk the line, and send a written quote within 24 hours.

    {["You speak to Paul", "Written fixed-price quote - no surprises", "Old fence removal included*", "Fully insured - $20M public liability"].map((t) =>
  • {t}
    • )}

*Excludes trees, bushes, vines and green waste. Additional charges may apply.