Architecture & Construction Website
Architecture Beats
A bilingual, motion-led company website presenting architectural services, construction projects, team expertise, process, statistics, and direct mobile contact flows.
Role
Frontend Developer
Technology
01 / Overview
Architecture Beats is a full company presence for an architecture and construction studio. It combines service discovery, project presentation, trust-building statistics, team information, contact flows, and a sharp visual identity in Arabic and English.
02 / The challenge
The website needed to communicate both design quality and execution credibility without becoming a static corporate brochure. It also had to support two reading directions, light and dark themes, rich motion, and practical mobile actions while keeping all business content easy to maintain.
03 / The solution
I built a data-driven Next.js interface with centralized bilingual content, reusable page sections, context-based locale and theme controls, and a shared motion shell. Framer Motion handles component interactions and reveals, Lenis handles smooth scrolling, while mobile-specific contact actions keep the experience useful beyond the visual presentation.
04 / Techniques and where they were applied
Not only what was used, but where and why.
Technique
Centralized data-driven content
Where it was applied
Company data, navigation, services, projects, stats, team, FAQs, branding, and SEO are maintained in src/data/siteData.ts.
Technique
Context-based internationalization
Where it was applied
LocaleContext switches Arabic/English content, updates lang and dir, and persists the selected language in localStorage.
Technique
CSS-variable theme system
Where it was applied
ThemeContext controls light/dark appearance across sections, cards, forms, footer, and loading UI, with localStorage persistence.
Technique
Layered motion system
Where it was applied
Framer Motion powers reveals and interactions; Lenis powers smooth scrolling; ScrollProgress, CursorFollower, and PageLoadGate shape the global experience.
Technique
Responsive action design
Where it was applied
Desktop floating WhatsApp and the mobile bottom action bar provide device-appropriate contact behavior without duplicated controls.
Technique
Full metadata strategy
Where it was applied
Root metadata includes canonical URL, Open Graph, Twitter cards, icons, robots, keywords, and architecture-specific semantic positioning.
05 / Key features
The core capabilities built into Architecture Beats.
Arabic and English content with RTL / LTR switching
Light and dark themes persisted between visits
Services, process, projects, statistics, team, FAQ, and contact sections
Smooth scrolling, scroll progress, loading experience, and interactive cursor
Mobile action bar and direct WhatsApp contact
Open Graph, Twitter, robots, icons, canonical metadata, and Google Bot settings
06 / Related insights