Featured
Landing page
Project Information
Role: Frontend Developer
Team: 2 Frontend Developers
Duration: 2 weeks
Year: 2026
Tech Stack
Next.js 16
React 19
TypeScript
Tailwind CSS 4
shadcn/ui
Radix UI
next-intl
Embla Carousel
Lucide
reCAPTCHA
Docker
GitLab CI
Key Features
- Arabic language support with English as a second language
- Right-to-left layout and Arabic typography
- Language switcher with clean /ar and /en URLs
- Hero carousel, how it works in three steps and a dashboard preview
- Industries carousel: restaurants, hotels, banks, universities, fitness, transport and more
- Product ecosystem and reasons to choose Smartcast
- Free 3-screen trial and live demo request form with validation and reCAPTCHA
- WhatsApp and phone contact for Saudi customers
- Privacy policy in Arabic and English
- SEO with locale-aware metadata, sitemap, robots, manifest and structured data
- Responsive design for phones, tablets and desktops
My Responsibilities
- Built the whole landing page with Next.js 16, React 19 and TypeScript, organized in Feature-Sliced Design layers
- Added Arabic language support: Arabic is the default language, English is available, and both live on locale URLs (/ar and /en) with next-intl
- Made the whole layout work right-to-left: mirrored layout, logical spacing and alignment, RTL-aware carousels and a self-hosted Arabic font
- Built responsive sections with light and dark surfaces: hero carousel, how it works, dashboard preview, industries, ecosystem, why Smartcast, CTA and contact
- Implemented the demo request form and dialog with validation, reCAPTCHA and a server route that forwards requests to the backend
- Set up locale-aware SEO: metadata, sitemap, robots, manifest and JSON-LD for Saudi Arabia
- Containerized the app with Docker and set up the GitLab CI pipeline for the production branch
Advantages
- Full Arabic experience for Saudi Arabia, with an English version one click away
- Correct right-to-left layout on every section, not just translated text
- Fast static pages with clean locale URLs and good search visibility
- Visitors can request a live demo or a free 3-screen trial in seconds
Challenges
- Arabic reads right-to-left, so a plain translation breaks alignment, carousels and icons
- The hero carousel rendered blank slides in an RTL container
- Arabic needs its own typeface while English keeps the brand fonts
- Every new string had to exist in both languages
Solutions
- Used next-intl with locale-prefixed routes and Arabic as the default, with no browser-language guessing
- Used logical utilities (start/end) instead of left/right and passed the direction to Embla explicitly
- Scoped IBM Plex Sans Arabic to the /ar pages through font variables so components did not change
- Kept copy in message files with matching keys for ar and en, and long legal text in per-language components
