Création (Corporate Website Revamp)
Project Overview
The official website of Création, a digital marketing and branding agency based in Riyadh. Built from scratch with a strong focus on SEO, performance, bilingual experience (Arabic & English), and a modern dark/light UI that reflects the agency's premium identity.
Next.js - TypeScript - Tailwind CSS
Arabic - English
Key Objectives
- 01
Rebuild the company's online presence from the ground up with a fresh, modern visual identity.
- 02
Achieve top-tier SEO performance and page load speed using Next.js App Router with server-side rendering to enhance search engine visibility and ranking.
- 03
Deliver a fully bilingual experience (Arabic & English) with automatic RTL/LTR layout switching driven by Next.js middleware.
- 04
Implement a polished dark/light mode system that respects user preference and aligns with the brand's visual language.
- 05
Showcase all six core services — Branding, Digital Marketing, Social Media, Digital Campaigns, Web Design, and Production — through dedicated detail pages.
- 06
Present the agency's portfolio of 17+ projects with a filterable grid and individual project detail pages.
Challenges Solved
- 01
Designed a scalable i18n architecture using Next.js dynamic `[locale]` routing and a custom middleware-based locale negotiation system — without relying on any external i18n library.
- 02
Built a type-safe dictionary system with fully typed translation keys (`dictionaries/types.ts`) to prevent runtime errors across Arabic and English content.
- 03
Handled complex RTL/LTR layout shifts cleanly using Tailwind CSS directional utilities, ensuring pixel-perfect layouts in both languages.
- 04
Managed dark/light theming globally with `next-themes` while preserving SSR hydration consistency to avoid flash-of-incorrect-theme (FOIT).
- 05
Structured a large multi-page codebase into clean separation of concerns: `app/`, `components/pages/`, `components/common/`, `components/ui/`, `components/layout/`, `dictionaries/`, `hooks/`, `constants/`, and `lib/`.
- 06
Integrated a working contact form using `react-hook-form`, `zod` schema validation, `react-select` for country selection, and `emailjs-com` for serverless email delivery — all styled to match the dark/light theme.
- 07
Implemented smooth, performant animations across sections (hero banner, architecture section, project cards, service details) using Framer Motion without impacting Core Web Vitals.
From concept to production — built to perform and designed to impress.
Responsibilities
- -
Architected and built the entire website from scratch including all pages: Home, About, Services, Service Details (×6), Projects, Project Details (×17), Contact, Career, and FAQ.
- -
Designed and implemented the full i18n system using Next.js middleware for locale detection, `[locale]` dynamic routing, and a typed JSON dictionary approach for AR/EN content.
- -
Built all reusable UI components: `Header`, `MainTitle`, `AppButton`, `Logo`, `CreationLogo`, `CountUp`, `TextWithMotion`, `BaseSlider`, `LetsTalkLink`, and `Accordion`.
- -
Developed all layout components: responsive `Navbar` with desktop links, mobile drawer menu, language switcher, and theme toggle; and a multi-column `Footer` with project menus, trusted partner badges (Clutch, Sortlist), and copyright.
- -
Created all page-specific component sections: Hero Banner with animated images, Architecture cultural section, About stats with count-up animation, Case Study section with service-linked project cards, Portfolio slider, Testimonial slider, and Blogs preview.
- -
Built the Services section with six core service cards and dedicated service detail pages, each containing a deep-dive layout with features list, imagery carousel, and a CTA block.
- -
Implemented the Projects page with tab-based filtering (All / Branding / Website / Production / App) and 17 project cards with hover cursor tooltip effect.
- -
Developed individual Project Detail pages with a structured layout: main image, about section, full-width photo, results counters, image gallery (single & two-grid), and previous/next project navigation.
- -
Integrated `Swiper` for all sliders (Portfolio, Testimonials, Service images) with a reusable `BaseSlider` abstraction.
- -
Connected the contact form end-to-end with field-level validation via `zod`, async country list fetching, and email delivery via `emailjs-com`.
Key Features
SEO-Optimized Architecture
Implemented dynamic metadata, structured data, and optimized routing to improve search engine rankings.
High Performance Optimization
Utilized Next.js features like image optimization, lazy loading, and code splitting for faster load times.
Bilingual i18n — Arabic & English
Locale-based routing via Next.js middleware with fully typed JSON dictionaries. Arabic defaults to RTL, English to LTR — no library needed.
Dark / Light Mode
Global theme switching via next-themes with SSR-safe hydration, persisted user preference, and brand-aligned color tokens.
Animated UI with Framer Motion
Scroll-triggered and entrance animations across the hero banner, architecture section, service cards, and project previews.
Responsive Design
Fully optimized for all screen sizes with a mobile-first approach.
Modern UI/UX
Clean and engaging interface aligned with the company’s branding and vision.
Project-to-Project Navigation
Each project detail page includes Previous / Next navigation so clients can browse the full portfolio without returning to the grid.
Toolkit
A modern, production-grade stack chosen for performance, type safety, and developer experience.
Key Outcomes
- 01
Delivered a fully production-ready, bilingual website that accurately reflects Création's premium brand identity.
- 02
Achieved clean Lighthouse scores through Next.js SSR/SSG, optimized `next/image` usage, and minimal client-side JS.
- 03
Built a maintainable and scalable codebase with strict TypeScript types across all components, data files, and translation dictionaries.
- 04
Created a seamless language-switching experience — Arabic visitors land on RTL Arabic by default, English visitors on LTR English — with no layout breakage.
- 05
Established a robust component library that can be reused across future pages or sister projects inside the agency.
- 06
Delivered a complete service showcase covering all six business verticals with deep-linking from the home case-study section directly to service detail pages.
- 07
Produced a filterable portfolio that surfaces 17+ real client projects across Branding, Web, Production, and App categories.
- 08
Improved user engagement through better UX, faster navigation, and theme flexibility.
- 09
Delivered a modern, clean, and professional UI aligned with company branding.
Other Projects
Let's work together
Have an idea, a project, or a challenge you want to bring to life? Let’s turn your vision into a modern, high-performing digital experience that looks great, feels effortless to use, and is built to make a lasting impact.