Quick Tyres Warwick
Project summary A modern, mobile-first website for a local tyre fitting and car mechanic business in Warwick. The project included design and build, on-page ...
Screenshots & Gallery

Video
Project summary
A modern, mobile-first website for a local tyre fitting and car mechanic business in Warwick. The project included design and build, on-page and technical SEO, structured data, and supporting documents for ongoing SEO and marketing (proposals, backlink strategy, Google Business Profile).
Technology stack
| Layer | Technology | |-------|------------| | Framework | Next.js 14 (App Router) | | Language | TypeScript | | Styling | Tailwind CSS 3.x | | UI / Icons | React 18, react-icons (Font Awesome) | | Fonts | Inter (next/font) | | Deployment | Vercel (recommended) | | Testing | Playwright (E2E) |
Why this stack
- Next.js App Router — Server components, built-in SEO (metadata, sitemap, robots), image optimization, and fast loads.
- TypeScript — Type safety and maintainability.
- Tailwind CSS — Responsive layout and consistent design without a UI library.
- React Icons — Lightweight, scalable icons.
About this project
Features delivered
Core pages
- Home — Hero with image slideshow, featured puncture repair block, services grid, special offers (NHS / taxi / teachers), tyre sizes, contact CTAs.
- Services — Detailed service cards (tyre fitting, pre-MOT, brakes, clutches, general service, jump start, locking wheel nut removal, puncture repair), puncture repair “Repair or Replace” section with infographic, tyre sizes and fitting info, contact CTAs.
- Contact — Address, both phone numbers, opening hours, embedded Google Map.
UX and conversion
- Hero slideshow — Lightweight client-side carousel (2 images in DOM, preload next), 8 images (WebP + JPG), 5s interval, dot indicators.
- Featured service — Puncture repair highlighted on homepage with Repair or Replace image and link to services.
- 24/7 / after hours — Prominent red CTA for emergency and after-hours booking (main number).
- Dual phone numbers — 07578 767977 and 07846 822488 across header, hero, footer, contact.
- Floating WhatsApp — Fixed bottom-right button linking to main business number.
- Google Reviews — Badge and link to Google reviews from hero and footer.
- Responsive layout — Mobile-first; navbar with hamburger, touch-friendly targets, readable typography.
Design
- Theme — Primary yellow
#ffcc01(brand), dark secondary, red for CTAs and emergency button. - Components — Reusable Navbar, Footer, HeroSlideshow, WhatsAppButton; consistent spacing and shadows.
SEO implementation
On-page and meta
- Title & description — Unique, length-optimised meta per page (home, services, contact).
- Keywords — Relevant terms (tyre fitting Warwick, MOT checks, brakes, etc.).
- Canonical —
metadataBaseandalternates.canonicalset for www.warwickquicktyres.co.uk. - Robots —
index, follow;robots.tsallows crawling and points to sitemap.
Technical SEO
- Sitemap — Dynamic
sitemap.ts(home, services, contact) with priorities and change frequency. - robots.txt — Generated via
robots.ts; allows/, disallows/api/, references sitemap URL. - Structured data (JSON-LD)
- Organization — Name, logo, URL, address, contact point, sameAs (Google Maps).
- LocalBusiness (AutomotiveRepair) — Name, image, telephone, address, geo, opening hours (Mon–Sun 08:30–18:30), area served (Warwick), service types, aggregate rating.
- Favicon & app icons — Favicon and Apple touch icon from brand logo.
Social and sharing
- Open Graph — Title, description, URL, site name, images (logo + dynamic OG image), locale
en_GB, typewebsite. - Twitter Card —
summary_large_image, title, description, logo image. - Dynamic OG image —
opengraph-image.tsx(Edge) fetches logo from production URL and renders branded OG image with fallback.
SEO deliverables (for client/portfolio)
- SEO audit report — Technical and on-page audit, fixes applied, recommendations.
- Backlink strategy — Phased plan (directories, local, content, outreach) and quick wins.
- SEO service proposal — Packages (foundation + growth), pricing, terms.
- SEO service agreement — Contract template for ongoing SEO.
- Pricing summary — Package options and add-ons.
- Client email template — For sending the proposal.
Google Business Profile
- Schema — LocalBusiness/Organization schema includes NAP, opening hours, phone numbers, and
aggregateRating(5-star). - On-site — Google 5-star badge in hero and footer linking to the business’s Google reviews/search.
- Contact page — Embedded Google Map for Campbell House, Stratford Road, Warwick, CV34 6RA.
- Consistency — Same NAP and hours across site, footer, and schema to align with Google Business Profile.