Technical Assignment: Development of a Multi-Page Website on WordPress (2 Locations)
## 1. General Provisions and Project Goal
**Project Goal:** Development of a fast, responsive (mobile-first) business card website with multi-location for a company providing installation and repair services. The main task is to receive leads through a feedback form with **automatic binding to a specific location and service** (without selection by the client), as well as optimization for local search (SEO).
**Important:** In the future, the client should have the ability to **independently add new services** through standard WordPress pages, without the need to edit code or menus.
**Engine (CMS):** WordPress (latest stable version).
**Budget:** [By agreement].
**Timeline:** [Specify number of days/weeks].
---
## 2. Website Structure (Page Map)
It is necessary to implement the following hierarchy of pages:
1. **Home Page (/)**
* Acts as a landing page. The main task is to encourage the user to select their city.
2. **Location Pages (Parent Sections):**
* `/calgary/` (Calgary)
* `/oshawa/` (Oshawa)
3. **Service Pages (Child Pages Related to Locations):**
* `/calgary/tv-mounting/` (TV Installation)
* `/calgary/furniture-assembly/` (Furniture Assembly)
* `/calgary/house-painting/` (House Painting)
* *(Similar structure for `/oshawa/`)*
* **Important:** In the future, the client will be able to create new child service pages (for example, `/calgary/new-service/`) using standard WordPress tools.
4. **Blog:**
* `/blog/` (General Section)
* Ability to publish articles both in the general blog and link tips to specific services.
---
## 3. Design and Layout Requirements (Responsiveness)
1. **Layout Type:** Mobile-first. The website must display flawlessly on all types of devices: smartphones (320px+), tablets (768px+), desktops (1920px+).
2. **Visual Design:**
* Clean, modern minimalism, inspired by the provided screenshots.
* The main focus is on readability and clear call-to-action (CTA) buttons.
---
## 4. Description of Pages and Functional Blocks
### 4.1. Home Page (Landing)
* **Header:** Logo, minimal menu (Home, Blog, Contacts).
* **Main Screen (Hero):** Title (H1): "Professional Home Services". Subtitle: "Select your city to continue".
* **Location Selection Block:**
* Two large buttons: "Calgary" and "Oshawa" (as in the second screenshot).
* **Footer:** Brief contact information, copyright.
### 4.2. Location Page (Parent), for example /calgary/
* **URL:** `/calgary/` (SEO-friendly URL).
* **Header:** Logo, **automatic menu** (should automatically pull all child service pages), "Get Quote" button.
* **Content:**
* H1: "Services in Calgary".
* Block "About Us / Description": Unique text for the city.
* **Services Block:** Automatic display of all child service pages as cards. Each card contains: service name, brief description (from the page), "Read More" button.
* **Blog (Widget):** Display of 2-3 latest articles related to this location.
* **Map:** Interactive Google Maps with a city marker.
* **"Get Quote" Form:** Fields: Name, Phone, Email. **No dropdown list of services!**
* **Footer:** Contacts (phone, email), working hours.
### 4.3. Service Page (Child), for example /calgary/tv-mounting/
* **URL:** `/calgary/tv-mounting/` (SEO-friendly URL).
* **Header and Footer:** Inherit from the parent location page (menu with services is automatic).
* **Content:**
* H1: "TV Installation in Calgary" (automatically generated from the page title and parent location).
* **Description Block:** Detailed description of the service.
* **Gallery:** Slider or grid of images (3-5 photos) of work examples.
* **Blog (topic tips):** Display of 1-2 articles from the relevant category.
* **"Get Quote" Button** (leads to the form).
* **Contact Form:** Similar to the form on the parent page (Name, Phone, Email).
### 4.4. Blog
* General archive of posts `/blog/`.
* Archives by categories (for example, `/blog/tv-tips/`, `/blog/furniture-tips/`).
* Individual blog post: standard view (H1 title, date, text, images).
---
## 5. Technical Requirements (Specification)
### 5.1. Key Requirement: Ease of Adding New Services
* All service pages are created as **regular child pages** of the respective locations (Calgary/Oshawa).
* **The header menu must be dynamic:** It should automatically display links to ALL child pages of the current location. The client does not need to manually edit the menu when adding a new service.
* **Services Block** on the location page must also automatically display all child pages (services).
### 5.2. Integration with Telegram (automatic detection)
1. **Task:** All data from forms must be sent to a Telegram chat.
2. **Message Format (critically important):**
* The message must **automatically determine**:
* **Service Name** — taken from the title of the current page (if it is a service page) or passed as "General request from the location page" if the form is filled out on the parent page.
* **Location** — taken from the title of the parent page (Calgary / Oshawa).
* The client **does not select** a service from a list — the system understands where the request came from.
3. *Example notification:*
> 🔥 **New Request!**
> **Service:** TV Installation
> **Location:** Calgary
> **Name:** Ivan
> **Phone:**
> **Email:**
### 5.3. SEO Settings
1. **Headings:** Strict hierarchy. One H1 per page.
2. **SEO Plugin:** Installation and configuration of Rank Math or Yoast SEO (Title, Description, SEO-friendly URL, sitemap).
3. **LocalBusiness Microdata:** On all location pages. Contains company name, address (for Calgary and Oshawa separately), phone, working hours.
### 5.4. Engine and Speed
* Prohibition on heavy page builders (heavy Elementor Pro). Allowed Gutenberg or lightweight builders (Kadence Blocks, etc.) with code cleanliness control.
* Speed optimization: image compression, script minimization, caching.
### 5.5. Blog
* Create categories corresponding to services: "TV Installation", "Furniture Assembly", "House Painting".
* Articles should be displayed on the corresponding service pages (as "topic tips").
---
## 6. Work Result (What is delivered?)
1. Fully completed website on WordPress.
2. Source files of the theme.
3. Database dump (SQL).
4. **Administration Instructions (mandatory):**
* How to create a new service (step-by-step, with screenshots).
* How to change phone/contacts for the location.
* How to check the operation of the Telegram bot.
5. Video presentation of the forms and key functions.
---
## 7. Acceptance Criteria
1. The website displays correctly on all devices (mobile, tablets, desktop).
2. When creating a new child page (service) for Calgary or Oshawa:
* It automatically appears in the menu on the corresponding location page.
* It automatically appears in the services block on the location page.
3. Forms send data to Telegram. The message **automatically** specifies the correct service and location (without selection by the client).
4. The heading hierarchy is checked (no errors).
5. The code of the location pages contains LocalBusiness microdata.
6. Speed according to Google PageSpeed Insights: no less than 85+ (mobile) and 90+ (desktop).
---
## 8. Questions for the Performer (for freelance exchange)
When responding, please answer the questions:
1. How will you implement the **automatic menu** so that when creating a new service page, it immediately appears in the header without my involvement?
2. How will the sending to Telegram with **automatic determination of the service name and location** (without a selection field in the form) be technically implemented?
3. What builder/approach do you plan to use for the layout to ensure the website is fast?
