Apex Fuels — Corporate Website
Apex Conglomerate Fuel Trading LLC is a Dubai-based energy trading company supplying petroleum products, LPG, industrial gases, and advisory services across the Middle East and Africa. They needed a corporate website that would establish credibility with government agencies, national oil companies, and industrial operators — audiences that expect professionalism, technical accuracy, and compliance awareness at every touchpoint.
The site had to work equally well in English and Arabic, with genuine RTL support rather than a bolted-on translation layer.
The Challenge
Apex Fuels operates in a sector where trust is the primary conversion driver. Their prospective clients — government procurement teams, national oil companies, and large industrial operators — evaluate potential partners through their digital presence before any conversation happens. A generic template site would not meet the standard expected in this market.
The requirements were demanding on multiple fronts:
Bilingual from the ground up. The site needed to serve English-speaking and Arabic-speaking audiences with equal quality. This meant more than translation — Arabic requires right-to-left layout, different typography considerations, and culturally appropriate content structure. A translation plugin layered on top of an English site would not deliver the experience required.
Technical product information. The company trades petroleum products across multiple categories and grades, LPG with various distribution methods, and industrial gases with specific purity specifications. Each product references international standards (EN 590, ASTM D1655, ISO 8217, and others). This information needed to be presented clearly and accurately, structured for both human readers and search engines.
Credibility at every level. From the design language to the structured data, the site needed to communicate that this is a serious, compliance-first trading operation. Government and institutional buyers pay attention to details that consumer-facing sites can ignore.
Our Solution
We built the site with SvelteKit 2 and Svelte 5, choosing the framework for its server-side rendering capabilities, compile-time optimisation, and the clean component model that Svelte 5's runes API provides. Every architectural decision was made to support the bilingual requirement as a first-class concern rather than an afterthought.
Bilingual Architecture with RTL Support
Localisation is handled by Paraglide.js with URL-based routing — /en/* for English and /ar/* for Arabic. The system manages over 350 translated message keys with zero runtime overhead, as Paraglide compiles translations at build time rather than loading them dynamically.
The RTL implementation goes beyond dir="rtl" on the HTML element. Layout uses CSS logical properties throughout, so margins, paddings, and flex directions automatically flip in Arabic without duplicate stylesheets. Arabic typography uses IBM Plex Sans Arabic with enforced minimum sizing to maintain readability, while English content uses Inter Variable. A one-click language switcher in the header preserves the user's current page context when switching languages.
SvelteKit reroute hooks handle URL delocalisation, ensuring that both /en/services and /ar/services resolve to the same component with the correct language context.
Custom Design System
The design system is built in OKLCH colour space with four carefully chosen palettes:
- Graphite — primary brand colour conveying authority and stability
- Steel — corporate blue for professional trust
- Amber — call-to-action highlights that draw attention without clashing
- Off-White — surface colours that maintain readability and reduce visual fatigue
A 12-level typography scale from Display (64px) down to Overline (12px) provides consistent hierarchy across all pages. All fonts are self-hosted with no external CDN dependencies, ensuring fast load times and full control over the rendering experience.
25-Component Library
The component architecture follows a three-tier structure designed for consistency and maintainability:
UI primitives — Button, Card, Input, and Badge components that enforce design tokens and accessibility standards at the lowest level.
Content components — Hero sections with parallax effects, CTA sections, specification tables, feature cards, animated counters, team member cards, and certification badges. These compose UI primitives into reusable content patterns that maintain visual consistency across the site.
Layout components — Sticky header with dropdown navigation, footer, breadcrumb navigation, mobile navigation, the language switcher, and scroll-to-top functionality. These provide the structural shell that every page shares.
Data-Driven Product Pages
Product information is structured as data rather than static content. The petroleum section covers eight product categories with individual grades, each referencing the relevant international standards. LPG pages detail distribution methods and application sectors. Industrial gas pages list purity grades and technical specifications.
Each product page renders structured specification tables that present technical data clearly. Standards references (EN 590, ASTM D1655, ISO 8217, and others) are presented alongside product specifications, reinforcing the company's compliance-first positioning to technically literate buyers.
SEO-First Architecture
Every page generates dynamic meta tags for Open Graph and Twitter Card, ensuring professional presentation when links are shared. JSON-LD structured data generators produce schema markup for Organization, Product, Service, LocalBusiness, and BreadcrumbList — giving search engines rich, structured information about the business and its offerings.
Canonical URLs prevent duplicate content issues across the bilingual routes. Breadcrumb navigation provides both user wayfinding and structured data for search results. Draft pages support noindex directives to prevent premature indexing during content development.
Contact and Communication
The contact page combines client-side form validation with real-time error display and SvelteKit server-side form actions for secure submission. A full-width Google Maps embed shows the office location, and office details include click-to-call and WhatsApp links for the communication channels that regional clients prefer.
Technical Highlights
The codebase uses Svelte 5 runes ($state, $derived, $props) throughout with no legacy reactive syntax. This was a deliberate choice to build on the latest patterns from the start rather than carrying forward deprecated approaches.
Tailwind CSS 4 is configured with custom OKLCH theme tokens and CSS logical properties that enable the RTL layout flipping without conditional classes or duplicate styles. The approach means that adding RTL support adds virtually zero CSS overhead.
The site is deployed on Railway.app with a health check endpoint, auto-restart configuration, and Nixpacks-based builds. Performance is prioritised through self-hosted fonts, lazy-loaded images, and no external runtime dependencies.
Pages Delivered
The site includes Home, Services (a landing page plus three detailed sub-pages), About Us, Leadership, Certifications and Compliance, Advisory Services, Contact, and a custom branded 404 error page. Every page includes bilingual content with page-level SEO metadata and structured data.
Results
The site is now live at apexfuels.ae and positions Apex Fuels as a credible, professional trading partner in a market where digital presence directly influences procurement decisions. Arabic-speaking visitors receive a genuine RTL experience rather than a mirrored afterthought, and the structured product data gives technical buyers the specification-level detail they need to evaluate the company's offerings against international standards.