{
 "slug": "tegel",
 "name": "TEGEL",
 "title": "Free tile store website template",
 "description": "Free HTML tile store website template for tile shops and showrooms, with a materials table and sample form. AGENTS.md for Claude Code, or no code with 8B.",
 "kind": "One-page website for a tile shop or bathroom studio with a showroom, free samples and its own fitters",
 "summary": "A one-page site for a tile shop in Belfast: the opening grid, three tile bonds, six materials with a use table, four finished bathrooms, a free-sample form, five house glazes, the fitters, a five-step job, questions and the showroom. A white grid ruled in black, with fields of blue, yellow and red that wipe in, and photos of tiles and finished bathrooms.",
 "fits": [
  "tile shop or showroom",
  "bathroom or kitchen fitter, flooring or stone supplier",
  "building merchant, ceramics maker or interiors studio that posts samples",
  "any shop that wants a bold, gridded look with primary colour blocks"
 ],
 "categories": [
  "Shop",
  "Architecture and building"
 ],
 "tags": [
  "tiles",
  "tile shop",
  "bathroom",
  "showroom",
  "flooring",
  "interiors",
  "free samples",
  "ceramics",
  "grid",
  "primary colours",
  "bold",
  "gsap",
  "scrolltrigger",
  "lenis",
  "single-file"
 ],
 "language": "en",
 "size_kb": 99,
 "photos": 26,
 "fonts": [
  "Radio Canada Big"
 ],
 "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 108+, Safari 15.4+, Firefox 101+ (it uses cascade layers, small/dynamic viewport units).",
 "sections": [
  {
   "key": "navigation",
   "id": "navigation",
   "heading": "",
   "about": "wordmark with a yellow block, six links, sample box and basket icons, and a menu button on phones"
  },
  {
   "key": "opening",
   "id": "opening",
   "heading": "Every wall starts as a grid.",
   "about": "one screen of ruled cells: department links, opening hours, a three-line h1, a paragraph and buttons, and a red tiled bathroom photo, between blocks of blue, yellow and red"
  },
  {
   "key": "bonds",
   "id": "bonds",
   "heading": "One tile, three walls",
   "about": "a wall of ruled cells that shifts row by row from stack bond to half bond to third bond while the section is held"
  },
  {
   "key": "materials",
   "id": "materials",
   "heading": "What a tile is made of",
   "about": "a table of six tile materials with where each can go and a price per square metre"
  },
  {
   "key": "rooms",
   "id": "rooms",
   "heading": "Four rooms, one grid",
   "about": "four finished bathrooms in a four-cell stage that recomposes so each takes the large cell in turn, with a yellow marker on its caption"
  },
  {
   "key": "samples",
   "id": "samples",
   "heading": "Five samples, free",
   "about": "a free-sample form: twelve tile chips (up to five), name, email and postcode, beside a shelf photo"
  },
  {
   "key": "glazes",
   "id": "glazes",
   "heading": "Five house glazes",
   "about": "five house glaze bays that travel sideways on one held screen, each colour field rising as the bay crosses the middle"
  },
  {
   "key": "fitters",
   "id": "fitters",
   "heading": "Laid by our own fitters",
   "about": "three fitter cards with photo, name and speciality, a guarantee on a yellow field"
  },
  {
   "key": "service",
   "id": "service",
   "heading": "From a floor plan to a finished wall",
   "about": "five numbered steps of a job; a blue marker travels along the rule and the step it reaches turns yellow"
  },
  {
   "key": "faq",
   "id": "faq",
   "heading": "Before you order",
   "about": "six questions and answers (native <details>) beside a yellow card with the phone number"
  },
  {
   "key": "contact",
   "id": "contact",
   "heading": "Come and stand on them",
   "about": "\"Come and stand on them\" with a showroom photo, address with directions, hours, phone and email on a grid with yellow and red fields"
  },
  {
   "key": "footer",
   "id": "footer",
   "heading": "Shop",
   "about": "wordmark with a short description, three link columns (shop, studio, visit), a red field, and the legal line with the Design: 8B credit"
  }
 ],
 "placeholders": [
  "og-image",
  "favicon",
  "form",
  "phone",
  "map",
  "email",
  "social"
 ],
 "lighthouse": null,
 "license": {
  "code": "MIT",
  "photos": "Unsplash License",
  "fonts": "SIL Open Font License 1.1"
 },
 "get": {
  "degit": "npx degit 8bsite/tile-store-website-template my-site",
  "curl": [
   "curl -LO https://raw.githubusercontent.com/8bsite/tile-store-website-template/main/index.html",
   "curl -LO https://raw.githubusercontent.com/8bsite/tile-store-website-template/main/AGENTS.md",
   "curl -LO https://raw.githubusercontent.com/8bsite/tile-store-website-template/main/LICENSE",
   "curl -LO https://raw.githubusercontent.com/8bsite/tile-store-website-template/main/CREDITS.md"
  ],
  "agent_prompt": "Read AGENTS.md, then edit index.html. Make this the site for <my tile shop or bathroom studio: name, town, showroom address and hours, materials with prices per square metre, finished jobs, sample terms, fitters and guarantee, delivery and returns, legal name and company number>. Replace first the shop name, the Belfast details, the materials and prices, the four rooms and the fitters. Keep the section ids, the classes AGENTS.md lists, exactly four room photos and equal bond rows. Ask me for missing facts; never invent prices, guarantees, reviews or contacts."
 },
 "links": {
  "page": "https://8b.com/templates/tegel/",
  "md": "https://8b.com/templates/tegel.md",
  "json": "https://8b.com/templates/tegel.json",
  "demo": "https://8b.com/templates/tegel/demo.html",
  "ghDemo": "https://8bsite.github.io/tile-store-website-template/",
  "repo": "https://github.com/8bsite/tile-store-website-template",
  "zip": "https://8b.com/templates/tegel/tile-store-website-template.zip",
  "use": "https://github.com/new?template_name=tile-store-website-template&template_owner=8bsite",
  "agents": "https://github.com/8bsite/tile-store-website-template/blob/main/AGENTS.md",
  "credits": "https://github.com/8bsite/tile-store-website-template/blob/main/CREDITS.md",
  "raw": {
   "index": "https://raw.githubusercontent.com/8bsite/tile-store-website-template/main/index.html",
   "agents": "https://raw.githubusercontent.com/8bsite/tile-store-website-template/main/AGENTS.md",
   "license": "https://raw.githubusercontent.com/8bsite/tile-store-website-template/main/LICENSE",
   "credits": "https://raw.githubusercontent.com/8bsite/tile-store-website-template/main/CREDITS.md"
  },
  "preview": "https://8b.com/templates/tegel/desktop.webp",
  "phone": "https://8b.com/templates/tegel/phone.webp",
  "clip": "https://8b.com/templates/tegel/scroll.mp4",
  "og": "https://8b.com/templates/tegel/og.jpg",
  "design_md": "https://8b.com/templates/tegel/DESIGN.md"
 },
 "github": {
  "repo": "8bsite/tile-store-website-template",
  "template_repository": true,
  "topics": [
   "html-template",
   "landing-page",
   "website-template",
   "website-templates",
   "tile-shop-website",
   "bathroom-showroom",
   "interior-design",
   "grid-layout",
   "html5",
   "agents-md",
   "gsap",
   "scrolltrigger",
   "scroll-animation",
   "lenis",
   "single-file",
   "cursor-ai",
   "static-site",
   "mit-license",
   "vibe-coding",
   "claude-code"
  ]
 },
 "made_by": {
  "name": "8B",
  "url": "https://8b.com/"
 }
}