{ "slug": "ferrule", "name": "Ferrule", "title": "Free plumber website template", "description": "Free HTML plumber website template for plumbing and heating firms, with a fixed price board. AGENTS.md for AI agents, or a no-code site from 8B.", "kind": "One-page website for a plumbing and heating company that fixes and fits boilers, radiators, bathrooms and heat pumps for households and landlords in one city", "summary": "A one-page site for a plumbing and heating firm in Sheffield: services with prices, a fixed price board, how a visit goes, recent jobs, the engineers, boiler or heat pump advice, reviews, an emergency number, questions and a call-back form. Giant uppercase lines staggered left and right with small orange notes tucked into their gaps, outlined pills, rounded panoramic photo bands, and plumbing in cobalt blue against heating in orange.", "fits": [ "plumbing and heating company", "plumber, gas engineer, boiler or heat pump installer", "neighbour trades with fixed prices and a callout line (electrician, drainage, locksmith, roofer, HVAC)", "any local service business that wants giant uppercase type, rounded photo bands and one hot accent" ], "categories": [ "Local business" ], "tags": [ "plumber", "plumbing", "heating engineer", "gas engineer", "boiler installer", "heat pump installer", "hvac", "trades", "home services", "local business", "bold typography", "panoramic photos", "gsap", "scrolltrigger", "lenis", "single-file" ], "language": "en", "size_kb": 103, "photos": 19, "fonts": [ "Geist", "Instrument Sans" ], "libraries": [ "https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js", "https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js", "https://cdn.jsdelivr.net/npm/lenis@1.3.4/dist/lenis.min.js" ], "browsers": "Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), container query units, cascade layers, small/dynamic viewport units).", "sections": [ { "key": "navigation", "id": "navigation", "heading": "", "about": "fixed row of outlined pills: wordmark, area select, four section links, phone and a black Book a visit; Menu pill and full-screen overlay on phones; hides on scroll down" }, { "key": "opening", "id": "opening", "heading": "Plumbing and heating engineers for Sheffield", "about": "two screens: a wide rounded photo band over a three-line staggered uppercase headline with an orange tagline, a note, the asterisk and a Book a visit button, then a dark screen with a statement and the cold side and hot side lists" }, { "key": "services", "id": "services", "heading": "What we fix and fit", "about": "index of seven services as giant words, each with a note, a price tag and a panoramic photo strip" }, { "key": "prices", "id": "prices", "heading": "Prices we put in writing", "about": "fixed price board of eight jobs with dotted leaders, beside a heading, a lead and a note marked with the asterisk" }, { "key": "visit", "id": "visit", "heading": "How a visit goes", "about": "five steps of a visit zig-zagging either side of a vertical line that fills from blue to orange" }, { "key": "work", "id": "work", "heading": "Recent jobs", "about": "four recent jobs as panoramic photo cards that stack as you scroll, each with a title, three tags and a line" }, { "key": "team", "id": "team", "heading": "Who turns up", "about": "four engineers in tall capsule portraits on a staggered row, each with a name, two tags and a line" }, { "key": "heat", "id": "heat", "heading": "Boiler or heat pump?", "about": "boiler or heat pump advice: a blue card and an orange card that part to reveal a heat pump photo between them" }, { "key": "reviews", "id": "reviews", "heading": "What the neighbours say", "about": "six short reviews on white cards in one continuous moving row" }, { "key": "emergency", "id": "emergency", "heading": "Burst pipe, no heat, no hot water? Call us, day or night.", "about": "dark emergency block: heading, the phone number as a giant orange link filling the width, three first steps and a gas flame photo" }, { "key": "faq", "id": "faq", "heading": "Before you ask", "about": "questions and answers (native
) with the asterisk as the toggle, beside a heading and a phone line" }, { "key": "contact", "id": "contact", "heading": "Tell us what's leaking, banging or cold", "about": "closing photo band, a giant three-line heading with a call-back tagline, phone and email pills, the address and a call-back form" }, { "key": "footer", "id": "footer", "heading": "", "about": "dark footer: one-line description, five links, address, phone, email, a drawn rule, the wordmark filling the width, copyright with the Design: 8B credit, Gas Safe number and Book a visit" } ], "placeholders": [ "og-image", "favicon", "phone", "email", "form" ], "lighthouse": null, "license": { "code": "MIT", "photos": "Unsplash License", "fonts": "SIL Open Font License 1.1" }, "get": { "degit": "npx degit 8bsite/plumber-website-template my-site", "curl": [ "curl -LO https://raw.githubusercontent.com/8bsite/plumber-website-template/main/index.html", "curl -LO https://raw.githubusercontent.com/8bsite/plumber-website-template/main/AGENTS.md", "curl -LO https://raw.githubusercontent.com/8bsite/plumber-website-template/main/LICENSE", "curl -LO https://raw.githubusercontent.com/8bsite/plumber-website-template/main/CREDITS.md" ], "agent_prompt": "Read AGENTS.md, then edit index.html. Make this the site for . Start with the prices, service tags, area select and emergency number. Keep ids, data-8b attributes except data-8b-placeholder, the classes AGENTS.md lists and the data-area-text span; reset each giant line's --len to its character count. Ask me for anything missing; never invent prices, hours, addresses, licence or Gas Safe numbers, reviews or contacts." }, "links": { "page": "https://8b.com/templates/ferrule/", "md": "https://8b.com/templates/ferrule.md", "json": "https://8b.com/templates/ferrule.json", "demo": "https://8b.com/templates/ferrule/demo.html", "ghDemo": "https://8bsite.github.io/plumber-website-template/", "repo": "https://github.com/8bsite/plumber-website-template", "zip": "https://8b.com/templates/ferrule/plumber-website-template.zip", "use": "https://github.com/new?template_name=plumber-website-template&template_owner=8bsite", "agents": "https://github.com/8bsite/plumber-website-template/blob/main/AGENTS.md", "credits": "https://github.com/8bsite/plumber-website-template/blob/main/CREDITS.md", "raw": { "index": "https://raw.githubusercontent.com/8bsite/plumber-website-template/main/index.html", "agents": "https://raw.githubusercontent.com/8bsite/plumber-website-template/main/AGENTS.md", "license": "https://raw.githubusercontent.com/8bsite/plumber-website-template/main/LICENSE", "credits": "https://raw.githubusercontent.com/8bsite/plumber-website-template/main/CREDITS.md" }, "preview": "https://8b.com/templates/ferrule/desktop.webp", "phone": "https://8b.com/templates/ferrule/phone.webp", "clip": "https://8b.com/templates/ferrule/scroll.mp4", "og": "https://8b.com/templates/ferrule/og.jpg", "design_md": "https://8b.com/templates/ferrule/DESIGN.md" }, "github": { "repo": "8bsite/plumber-website-template", "template_repository": true, "topics": [ "html-template", "landing-page", "website-template", "website-templates", "plumber-website", "plumbing-website", "hvac-website", "html5", "agents-md", "gsap", "scrolltrigger", "scroll-animation", "lenis", "single-file", "cursor-ai", "static-site", "mit-license", "vibe-coding", "claude-code", "ai-agents" ] }, "made_by": { "name": "8B", "url": "https://8b.com/" } }