SmartPhoneRepairs.ca

Overview

What We Built

SmartPhoneRepairs is a local smartphone repair business in Edmonton serving the Mill Woods and South Edmonton areas. They offer same-day screen repairs, battery replacements, iPhone back glass repairs, data recovery, and refurbished device sales. The client had zero online presence, no website, no Google visibility, and was losing business to franchise repair shops that dominated local search. We built a fully custom, modern single-page website with a blog system from scratch, complete with local SEO, schema markup, custom animations, and a contact form for lead generation. The site is deployed on Firebase Hosting.

Investment

Full Cost Breakdown

The total project cost was $300, covering everything from design and development to SEO setup, custom animations, a blog system, contact form, and Firebase deployment. This is the same tech stack used by top-tier companies, delivered at a fraction of the cost because we build efficiently. The client received a complete, production-ready website.

The Challenge

What We Were Up Against

The client was relying entirely on foot traffic and word-of-mouth in a competitive Edmonton repair market dominated by franchise chains and big-box retailers with established online presences. They needed a website that would rank for high-intent local search terms, clearly communicate services and pricing, build trust through reviews and professional branding, provide a way for customers to request service online, and load fast on mobile devices, since the majority of visitors would be searching from their phones.

Our Approach

How We Solved It

We designed and built a fully custom, mobile-first website using Next.js 14 with static export, giving the client a blazing-fast site with Firebase Hosting. The design uses a bold purple and dark navy color palette with glassmorphism navigation, custom Framer Motion animations, and responsive layouts that adapt seamlessly across all devices. We implemented comprehensive local SEO with structured schema markup, optimized meta tags targeting 18 long-tail keywords, an XML sitemap, and a complete MobilePhoneRepairBusiness JSON-LD schema. A blog system with dynamic routing adds ongoing SEO value, and a two-column contact form captures leads directly from the site.

Part 1 of 5

Design & Branding

The site uses a bold purple (#925ff0) and dark navy (#020140) color palette that feels modern and trustworthy. A glassmorphism-style navigation bar with backdrop blur gives the header a premium feel. The overall design is mobile-first and fully responsive, with light lavender (#f0f0ff) backgrounds for visual breathing room, rounded corners, soft shadows, and smooth scroll-triggered animations throughout. The hero section features a full-width background image with an animated text highlight overlay, and a prominent 'Call Now' CTA button positioned front and center for effortless mobile tap-to-call.

• Purple primary (#925ff0) with dark navy (#020140) and light lavender (#f0f0ff)
• Glassmorphism navigation bar with backdrop blur
• Mobile-first responsive design across all breakpoints
• Prominent tap-to-call CTA designed for mobile users

Part 2 of 5

Custom Animation Components

Four bespoke animation components were built from scratch using Framer Motion, elevating the site well beyond cookie-cutter templates. The Animated Tooltip uses spring physics for position-aware hover tooltips. The Aurora Background creates a flowing gradient animation with purple, blue, and indigo hues on a 60-second loop behind the testimonials section. The Direction-Aware Hover component detects cursor entry direction and slides an overlay accordingly on product cards. The Highlight component animates text background color from 0% to 100% fill for the hero section headline.

• Animated Tooltip, spring-animated hover tooltips with position awareness
• Aurora Background, 60-second animated gradient loop behind reviews
• Direction-Aware Hover, cursor-entry-direction image card overlays
• Highlight, animated text background fill effect in the hero

Part 3 of 5

Local SEO & Structured Data

We implemented a comprehensive local SEO strategy from the ground up. The site targets 18 long-tail keywords focused on local search intent, including 'phone repair near me,' 'cell phone repair Edmonton,' 'iPhone screen repair near me,' and more. A complete MobilePhoneRepairBusiness JSON-LD schema provides Google with the business name, address, phone number, geographic coordinates, service area definitions for Edmonton, Mill Woods, and South Edmonton, and a full catalog of repair services. This structured data helps Google display rich results with the business's address, phone, and services directly in search results. The footer includes consistent NAP information and an embedded Google Maps widget for local relevance signals.

• 18 long-tail keywords targeting local repair search intent
• MobilePhoneRepairBusiness JSON-LD with geo coordinates and service catalog
• Open Graph tags with en_CA locale for Canadian social sharing
• XML sitemap with priority-based page hierarchy
• Consistent NAP (Name, Address, Phone) across the site footer

Part 4 of 5

Blog System & Content Strategy

The blog system is built with Next.js dynamic routing (/blog/[slug]) and supports static generation for maximum SEO value. Each article page features a full-width header image, an auto-generated table of contents sidebar, sectioned content with titles and body text, and related content suggestions at the bottom. Blog data is managed through an internal data layer, making it easy to add new articles without any CMS complexity. Three featured blog posts appear on the homepage with image cards, titles, descriptions, and 'Watch Now' links, providing social proof and fresh content signals for search engines.

• Dynamic blog routing with static generation at build time
• Auto-generated table of contents sidebar on article pages
• Related content suggestions for internal linking
• Internal data layer, no CMS dependency

Part 5 of 5

Lead Generation & Contact System

A two-column contact form captures all the information needed to process a repair request: name, phone number, email, message, service type (Repair or Purchase dropdown), and device name. The CTA reads 'Get Free Consultancy', a low-friction offer designed to maximize form submissions. The entire site is built as a conversion funnel: the hero section drives tap-to-call, service cards explain offerings, the product showcase builds interest in refurbished devices, customer reviews build trust, pricing cards create price transparency, and the contact form captures leads who aren't ready to call immediately.

• Two-column contact form with service type dropdown
• 'Get Free Consultancy' CTA for low-friction lead capture
• Tap-to-call button in the hero for immediate mobile conversions
• Pricing section with clear tiers and direct call-to-action buttons

Working With Us

What It Was Like Working With Us

This was a straightforward, fast-turnaround project built on clear communication and transparent pricing. We worked directly with the client to understand their repair services, pricing, and local market, then delivered a complete website that was ready to launch within days. The $300 price was quoted upfront, no revisions fees, no surprise invoices.

Tech Stack

Built With

FAQ

Frequently Asked Questions