🧪 Practical Assessment: SEO-Optimized Local Business Website Build

📋 Overview

This assignment is part of our evaluation for the SEO/Web Developer role. You will build a modern, SEO-friendly marketing website for a fictional local roofing business using the provided Next.js starter repo.

The goal is to evaluate how you design, develop, and optimize a real-world website independently — from structure to SEO and performance.

⏱️ You have 24 hours to complete this task once you begin.

---

🛠 Setup

Work inside the public GitHub repo:
🔗 Repo URL: https://github.com/FlorentGashi/dblseo-assignment

The repo contains:

• A basic Next.js (v14+) project with shadcn UI
• No pages or components beyond a starter scaffold

Your job: Build the website from the ground up.

---

🎯 Your Task

Build a complete, multi-page SEO-optimized marketing website for a roofing company.

• Business Name: You decide
• Location: Choose any major city (e.g., Dallas, TX; Phoenix, AZ; Miami, FL)
• Industry: Residential Roofing Services

Define a realistic services offering. At minimum include four services.

Keep decisions consistent across pages (brand voice, visuals, city, services, CTAs).

---

📄 Required Sections/Pages

✅ Homepage

• Header: Logo, primary CTA, navigation (site-wide)
• Body: Hero, Company Overview, Main Services, Features/Why Us, Blog/Resources preview, Primary CTA
• Footer: 4 columns
  • About Us (short description)
  • Quick Links
  • Contact (fictional info + social icons)
  • Embedded Google Map (your chosen city)

✅ Services

• A Services hub page
• At least 2 individual service pages (deeper content, FAQs, benefits, process, CTA)

✅ About Page

• Company story, mission, values, trust signals (badges/reviews—fictional but realistic)

✅ Contact Page

• Contact form (non-functional is fine), NAP info (fictional), service area mention

✅ 404 Page

• Custom, crawl-safe, branded 404 with route back to key pages

---

✅ What We’re Looking For

• Clean, responsive (mobile-first) design using shadcn UI + Tailwind CSS

• On-page SEO best practices:

  • Meta titles & descriptions per page
  • Logical URL structure & hierarchy
  • Crawlability & indexation (robots.txt, XML sitemap)
  • Semantic HTML5 (proper headings, ARIA where needed)
  • Internal linking (hub → service pages, blog → services, etc.)
  • Schema markup (JSON-LD: Organization, LocalBusiness, Service, Breadcrumb)
  • Open Graph + Twitter Card tags

• Performance: image optimization, lazy loading, component-level code-splitting where sensible

• Reusable components and clean project structure

• Realistic, human-sounding content (no lorem ipsum)

---

🧠 Additional Guidelines

• You may use AI tools to help generate copy, but polish for clarity and brand consistency
• Choose a coherent visual style (color palette, typography, spacing scale)
• Include at least 1–2 blog/resource posts to demonstrate internal linking and content structure
• Use accessible components and alt text for images

---

📦 Deliverables (Due in 24 Hours)

• Push the finished project to a public GitHub repo (your own)
• Update README.md with:
  • Your approach & decisions (name, city, IA, design choices)
  • SEO implementation notes (meta strategy, JSON-LD types, Open Graph, sitemap/robots)
  • Performance techniques used
  • (Optional) Link to a live deployment (Vercel recommended)

---

🧪 What We’re Evaluating

• Ability to deliver a functional, SEO-optimized website
• Understanding of SEO fundamentals & semantic HTML
• Effective use of Next.js and reusable components
• Clean code, responsive layout, and good UX
• Initiative and independent problem-solving with minimal direction

---

🎯 Good luck!
Treat this like a real client project — choose a name and city, then execute.