Challenge and Context
The client needed a corporate web presence that reflected their position as a established regional consulting firm. The primary challenge was creating a sophisticated digital experience that could effectively communicate complex service offerings while maintaining fast load times and smooth interactions across all devices.
The consulting firm operates across multiple GCC markets and serves both English and Arabic-speaking audiences. This required a thoughtful approach to internationalization that went beyond simple translation to include proper right-to-left layout support, culturally appropriate imagery, and locale-specific formatting.
Architecture and System Design
The project was built on Next.js 15 using the App Router architecture. This choice provided several advantages including server-side rendering for initial page loads, built-in optimization for images and fonts, and a clean routing structure that supports the bilingual requirement through dynamic locale parameters.
The internationalization system uses next-intl middleware to handle locale detection and routing. All content lives in JSON translation files, allowing non-technical team members to update text without touching code. The routing configuration defines English as the default locale with Arabic as the secondary locale, and the middleware automatically redirects users to their preferred language based on browser settings.
The component architecture follows a pattern-based approach where reusable UI elements live in a shared components directory while page-specific components remain co-located with their routes. This organization makes it easy to maintain consistency across the bilingual site while keeping related code together.
Animation implementation uses a layered approach. The Motion library handles complex, choreographed entrance animations for hero sections and feature displays. Lottie files vector animations provide lightweight for specific visual elements like timeline markers and value icons. CSS-based animations handle simple state changes and hover effects. This layered approach keeps the bundle size reasonable while still delivering the sophisticated feel the client wanted.
Key Engineering Decisions
The choice of Tailwind CSS 4 as the styling foundation enabled rapid development of custom designs without fighting against framework defaults. The configuration uses CSS variables for theming, making it straightforward to maintain consistent colors, spacing, and typography across all components. The dark mode support uses CSS variables as well, allowing seamless switching between light and dark themes based on user preference.
Component accessibility was a non-negotiable requirement. Rather than building from scratch, the project leverages Radix UI primitives for complex interactive elements like accordions, dialogs, and navigation menus. These primitives come with full keyboard navigation and screen reader support built in, ensuring the site works for all users regardless of ability.
Image optimization happens at multiple levels. The Next.js Image component handles automatic format conversion and responsive sizing. Static assets are served from the public directory with appropriate caching headers. The project configuration includes sharp for production image processing, ensuring the final build delivers properly optimized assets to visitors.
TypeScript was used throughout the application with strict mode enabled. This catch errors during development that might otherwise manifest in production, and the type definitions make it easier for developers to understand component interfaces and data structures when making changes.
Delivery and Outcomes
The final deliverable is a fully functional bilingual corporate website that loads quickly and provides smooth animations on modern devices. The English and Arabic versions are complete with appropriate content, imagery, and layout adjustments for each locale. All interactive elements meet accessibility standards, and the site works across the target browser versions.
The animation system creates visual interest without overwhelming users or causing performance issues on lower-end devices. The Motion library allows fine-tuned control over animation timing and scroll triggers, while Lottie files stay small because they are vector-based. This approach delivers the premium feel the client wanted while keeping the site practical for real-world use.
The component library built during this project provides a solid foundation for future updates. New pages can reuse existing components, and content changes can happen through translation file updates without developer involvement. This separation of concerns means the consulting firm can maintain and evolve their web presence efficiently over time.