# Reflow, a free repair shop website template > Website for a phone and laptop repair shop with walk-in repairs, prices and refurbished devices. One HTML file with GSAP scroll animations, no build step, MIT license. Made by 8B (https://8b.com/). A one-page site for a phone and laptop repair shop with a free diagnosis, a price list, refurbished stock, business pickups and repairs by post. Near-black and white with one electric blue; the wordmark is built from rounded dashes that stretch and flood the screen on the first scroll, and a blue selection scans the checklist, crosses the pickup schedule and reads along the reviews. - Page: https://8b.com/templates/reflow/ - Live demo: https://8bsite.github.io/repair-shop-website-template/ - Repository (GitHub template): https://github.com/8bsite/repair-shop-website-template - Download ZIP: https://github.com/8bsite/repair-shop-website-template/archive/refs/heads/main.zip - Size: 108 KB, 11 photos (Unsplash), fonts: Instrument Sans and TikTok Sans - Motion: GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll ## Use it with an AI coding agent Download the files into the project (Windows PowerShell: `curl.exe`): ```bash curl -LO https://raw.githubusercontent.com/8bsite/repair-shop-website-template/main/index.html curl -LO https://raw.githubusercontent.com/8bsite/repair-shop-website-template/main/AGENTS.md curl -LO https://raw.githubusercontent.com/8bsite/repair-shop-website-template/main/LICENSE curl -LO https://raw.githubusercontent.com/8bsite/repair-shop-website-template/main/CREDITS.md ``` Then: ```text Read AGENTS.md, then edit index.html. Use this template as the base for a site for . Keep the layout, the motion and the single-file format; replace the brand name and the dash wordmark, copy, photos, prices, times, stock, links and contacts, and recolour it through the CSS variables if needed. ``` Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/repair-shop-website-template my-site`. ## Design Reflow is a repair shop website template for a phone and laptop business with a walk-in bench, free diagnosis, price list, refurbished stock, business pickups and repairs by post. It suits phone repair and computer repair alike; consoles and tablets are already on its price list. - Palette: #0e0e0e (near-black grained sections), #f5f5f5 (off-white sections, headings), #d0d0d0 (text on dark, wordmark), #8e8e8e (muted text on dark), #575757 (muted text on light), #0000ff (electric blue highlights), #1b1b1b (hairlines on dark), #e2e2e2 (hairlines, form panel) - Fonts: Instrument Sans (headings and body, very large and tight), TikTok Sans (condensed uppercase labels and buttons) A four-column grid where near-black and off-white sections take turns. Headings step across the columns like a staircase. Rounded dashes are the motif: they build the wordmark and mark buttons, time bars, steps and the footer rule. Electric blue appears only as a text selection, and photos sit in small, barely rounded tiles. ## Sections and motion - **Navigation** (navigation): top bar: dash mark and name, opening hours, section links, Book a repair button; phone menu overlay - **Reflow: Phone and laptop repair, done at the window while you watch.** (opening): two screens: a dash-built wordmark with headline and contact bar, then a staircase statement with three photos (demo: REFLOW, "Most broken things are fixable."). Motion: Smooth scrolling throughout; small uppercase lines spread word by word to full width. On the held first screen the dash wordmark stretches and floods white, then staircase words slide in over rising photos. - **Fifteen minutes, free, out loud.** (diagnosis): service explainer: staircase heading, paragraph and a twelve-row checklist with results and a quote (demo: the free diagnosis). Motion: Pinned on large screens, a blue band steps down the twelve checks as you scroll, turning each from Queued to its result. - **Price wall** (prices): price list table grouped by device, each row with models, a time bar and a price (demo: Price wall). Motion: As each device group appears, its time bars draw from the left, and a blue selection sweeps over the cheaper-price promise. - **Fixed at the window.** (bench): how-we-work block: staircase heading over a wide photo cut into four strips, three columns of text (demo: "Fixed at the window."). Motion: Tied to scroll, four strips of the workshop photo slide from staggered heights into one picture. - **Three grades of part. You choose, and the receipt names the one we fitted.** (parts): comparison table of three options with four rows and an example price (demo: Original, Certified, Value parts). Motion: As the comparison table comes into view, the dash beside each row label draws in from the left. - **Second life** (refurb): horizontal shelf of numbered products with photo, specs, price and a Reserve link (demo: five refurbished devices). Motion: The section pins and the shelf of five refurbished devices runs sideways as you scroll. - **For offices and schools: we collect on a weekly route, leave a loan device for every one we take and invoice once a month.** (fleet): business offer with a weekly schedule drawn as bars on an hour grid (demo: office and school pickups, Monday to Friday). Motion: Tied to scroll, a blue cursor sweeps the hour grid; pickup bars it passes turn dark, the current one blue. - **Post it.** (mailin): how it works: four steps under one dashed line and a button (demo: repair by post). Motion: The four dashed step lines draw in from the left, one after another, as the steps come into view. - **Reviews** (reviews): three customer quotes in large type, each with name and device. Motion: Tied to scroll, a blue selection box jumps word by word along each quote, as if someone were reading it. - **Before you ask.** (faq): questions and answers (native
) - **Come to the bench.** (visit): contact and booking: staircase heading, address, hours, phone and email, a photo and a booking form (placeholders). Motion: Tied to scroll, the heading grows from one small line at the top into a big three-word staircase. - **Visit** (footer): dashed rule, one-line description, address, contact and page links, copyright and the Design: 8B credit. Motion: The dashed rule at the top of the footer draws in dash after dash as it appears. ## Good for - phone, laptop or computer repair shop - electronics, console or watch repair - refurbished device shop - any walk-in service with a price list and a booking form ## Questions **Can I change the prices and repair times?** Yes. The price wall is an HTML table grouped by device; each row has a repair, its models, a bench time in minutes that sets its bar length, and a price. **Does the booking form send requests?** Not yet. It checks for a name and a phone number or email and shows a confirmation line. Connect a form service such as Formspree or Netlify Forms to receive bookings. ## Before publishing Replace: social preview image, favicon, phone number, email address and contact form (sends nothing yet), plus the invented demo facts (prices, dates, addresses). ## License Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. The "Design: 8B" footer link is optional.