Designo
A multi-page agency website built with Next.js, TypeScript, SASS, and Strapi CMS — a Frontend Mentor challenge with BEM architecture.
Designo Multiple Website
A multi-page agency website with a clean design system, CMS integration, and responsive layouts across five distinct pages.
Designo is a multi-page website built as a Frontend Mentor challenge. It features a complete design agency site with Home, About, Locations, Contact, and service pages — all powered by a Strapi CMS backend with a clean BEM-based SASS architecture.
Architecture
The project follows a strict BEM naming convention in SASS, with component-scoped styles and a shared design token system. Pages are dynamically rendered from Strapi CMS blocks, giving content editors full control without code changes.
Agency website pages
Multi-page design showcase with service listings, portfolio, and contact.
Key Features
What makes this Frontend Mentor solution stand out.
BEM Architecture
Strict Block-Element-Modifier naming throughout SASS stylesheets — clean, predictable, and maintainable CSS at scale.
Multi-Page Design
Five distinct pages (Home, About, Locations, Contact, Service) each with unique layouts while sharing a consistent design language.
CMS-Driven Content
Strapi CMS backend with custom content types — editors can update page content, service cards, and location details without touching code.
Responsive Design
Fully responsive across mobile, tablet, and desktop with carefully crafted breakpoints and fluid layouts for every page.
Scroll Animations
Fade-in-bottom reveal animations triggered by IntersectionObserver — elements animate into view as the user scrolls.
Location Pages
Dedicated pages for each office location with embedded maps, contact details, and service area information.
Tech Stack
The tools and frameworks behind Designo.
Next.js
TypeScript
SASS (BEM)
Tailwind CSS
Strapi CMS
Cloudflare PagesInterested in the code?
Check out the repository or browse other frontend projects in the portfolio.