# JOGi MODS — www

The selected local-specialist homepage and supporting service pages, prepared September 21, 2026. Open `index.html` as the production entry point. Pages can be opened directly without a build step. Fonts use Google Fonts with local fallbacks; imagery is copied from the existing website.

The confirmed business focus is **console repairs and modifications, especially PlayStation, Xbox and Nintendo**. The selected reference concept broadens the visible homepage to three featured service cards: game console repairs, iPhone/iPad repairs, and microsoldering/soldering work. The selected homepage is semantic HTML/CSS markup using sharp local crops from the supplied reference for the logo, handwritten notes, device images, arrows, issue icons, process icons and trust icons. The full console, phone, tablet, computer, accessory and specialist catalogue remains linked. The mockups link to the adjacent `legacy` directory, so keep the two folders together.

| Concept | Design | Best fit | Tradeoff |
|---|---|---|---|
| 01 — Selected reference concept | White, teal and three featured repair cards | Selected direction from the supplied reference image; broad enough for consoles, Apple repairs and microsoldering | Needs final confirmation of phone number, card photography and quote workflow |
| 02 — Console lab | Charcoal, lime and real circuit-board photography | Emphasizing console expertise and modifications | A more technical tone may appeal less to general phone/computer customers |
| 03 — Neighbourhood workshop | Warm cream, green and editorial serif typography | Emphasizing family ownership and established local service | Console categories are less immediately dominant than the finder |
| 04 — Service finder | Clean white interface, platform buttons and issue cards | Helping visitors quickly identify a service | Needs careful service routing as the catalogue grows |

**Recommendation:** Proceed with concept 01, now updated to follow the supplied reference image. It uses the chosen structure: a compact header, “Trusted Repairs Since 2002” hero, three featured repair cards, common issue shortcuts, a three-step process, and a local trust bar. The platform chooser from concept 04 can still be incorporated into the Repairs menu if useful. This is a design judgment; no conversion or search ranking improvements have been measured.

## Content and navigation

Primary navigation in the selected concept: Home / Repairs / Mail-In Service / Contact, with a visible quote action.

Homepage sequence: trusted-repairs headline, three featured service cards, common issue shortcuts, a simple three-step process, local trust signals, and a compact secondary-services directory. The console card keeps PlayStation/Xbox/Nintendo repair language prominent; controller repairs and microsoldering remain directly linked.

The representative interior page `console-repairs.html` is the next step after the Game Console Repairs card. It keeps the same header, typography, teal accents and trust bar, then adds a breadcrumb, console-repair H1, phone/mail-in actions, platform cards, symptom shortcuts, a three-step support section and FAQs. Its platform links reuse the existing detailed PlayStation, Xbox, Nintendo and controller pages while giving the selected homepage a clearer SEO-oriented console hub.

The directory retains links for phone/tablet brands, computers, Mac, parts, accessories, Android TV, website services, and support pages. None of the old pages or prices were edited. Existing copy errors remain on the linked old pages and are outside this mockup change.

The chooser in concept 04 changes the visible platform, supported-model summary, repair destinations and modification destination. It is a navigation prototype, not a diagnostic tool. Its first repair links lead to the main current-generation service page for each platform; the static console directory provides other models. In a full implementation, add an explicit model choice or a platform hub so PS4/PS3, Xbox One/360 and older Nintendo users get exact destinations.

Modifications are linked only to existing supported-service pages: PS3, PSP/PS Vita, Xbox 360, Nintendo DS/3DS and Wii. The mockups do not promise PS5, Series X|S or Switch modifications. Compatibility must be confirmed for the customer's model and firmware.

## SEO direction

1. **Preserve established URLs.** Keep existing service URLs wherever possible. If any must change later, prepare a one-to-one redirect map rather than sending everything to the homepage. No routes are being migrated in these mockups.
2. **Make pages accurate and specific.** Give every service page a unique title, description, primary heading and useful content matching the device and work performed. Correct the PS5/PS4 and Switch/3DS metadata errors identified in the audit. Use Brampton naturally rather than repeating location keywords throughout the page. [Google title-link guidance](https://developers.google.com/search/docs/appearance/title-link).
3. **Keep services discoverable.** Use ordinary HTML links from the homepage and platform pages to services, including secondary offerings. All four mockups have static service anchors in addition to any interactive chooser. [Google Search Essentials](https://developers.google.com/search/docs/essentials).
4. **Show practical expertise.** Use original work photographs, supported models, symptom descriptions, repair limitations, and clear contact/visit information. Do not fabricate review counts, certifications, completion times or case studies. [Google people-first content guidance](https://developers.google.com/search/docs/fundamentals/creating-helpful-content).
5. **Add verified local details at implementation.** Confirm the business name, address, telephone, hours and available services, then use corresponding LocalBusiness structured data and consistent visible contact information. No ratings or review schema has been invented. [Google LocalBusiness documentation](https://developers.google.com/search/docs/appearance/structured-data/local-business).
6. **Keep the implementation light.** These mockups avoid the old jQuery/MDL dependencies and carousel. For production, resize and compress the archived photographs, choose font delivery deliberately, verify accessibility, and test performance on actual phones. The mockups intentionally use original image files, which are larger than production assets should be.

The prototypes use one H1, descriptive local/service copy, semantic sections, alternative text, keyboard-accessible native controls, responsive layouts and working legacy service links. The alternate slogans in concepts 02–04 are supported by nearby visible service/location text. In the final implementation, keep the page title and primary heading aligned with the service intent.

All mockups deliberately include `noindex,follow` to keep alternate drafts out of search results if accidentally served. Remove the draft directive only from the selected, validated production pages; add the final canonical URLs, sitemap and verified structured data at that point. These local previews do not improve the live website's SEO until implemented and deployed.

## Assumptions to confirm before launch

The address, telephone, family ownership and history since 2002 come from the archived website and should be reconfirmed. The supplied reference image shows `(905) 497-0298`, while the archived site lists `905-846-0309`; the prototype keeps the archived number until you confirm which number should launch. No old prices, current opening-hours claims, star ratings or unverified stock levels are shown. The photographs are existing archive assets; new photographs of current consoles and the current workspace would improve the selected design.

## Files

- `index.html` — selected local-specialist homepage and production entry point.
- `console-repairs.html` — representative Game Console Repairs interior page reached from the selected homepage console card.
- `styles.css` and `interactions.js` — shared responsive styling and local interactions.
- `assets/` — three copied images from the archive.
- `assets/reference-homepage.png` — supplied homepage reference retained for comparison.
- `assets/game-console-transparent.png` — latest user-supplied transparent console lineup, displayed at its original 3:2 aspect ratio beneath the console card text with its alpha channel preserved. The featured cards stretch to match its height on desktop.
- `assets/game-console-banner.png` — previous landscape console banner, retained as an unused asset.
- `assets/game-console-card.png` — previous console cutout, retained as an unused asset.
- `assets/phones-tablets.png` — user-supplied transparent phones-and-tablets lineup shown in the iPhone, iPad and tablet repairs card; its alpha channel is preserved.
- `assets/iphone-ipad-card.png` — previous generated iPhone/iPad cutout, retained as an unused asset.
- `assets/computers-mac.png` — user-supplied transparent computer, laptop and Mac lineup used in the Computers, Laptops and Mac card; its alpha channel is preserved.
- `assets/computers-mac-card.png` — previous generated computer cutout, retained as an unused asset.
- `assets/icon-computer-caption.svg` — archived laptop/Mac caption icon used by the computer card.
- `assets/reference-console.png`, `reference-apple.png`, `reference-microsoldering.png` — sharp local crops used by the semantic service cards and reference comparisons.
- `assets/reference-logo.png`, `reference-scribble-*.png`, `reference-arrow.png`, and `icon-*.png` — visual assets cropped from the supplied reference and used inside semantic markup.
- `build_mockups.py` — repeatable page generator; only writes inside www.

The scope is design selection. Booking systems, new service pages, price changes, production SEO migration and publishing are not included in these mockups.