Loremed — Bilingual Corporate & Product Site

A branded loading sequence opens the site — a white screen carrying the brand mark, a breathing glow and the company promise. It waits for the page load event, enforces a minimum so the fade registers, hard-caps at two seconds, and shows only once per browser session. The cap and the once-per-session rule are the details that separate a considered intro from an annoying one.

The homepage leads with the shop — hero, featured products, how ordering works, a stats band and category tiles. The corporate story sits on dedicated about, quality and research pages: company overview, manufacturing standards, quality assurance, certifications, regional partnerships, the R&D pipeline and healthcare-professional resources. From anywhere a visitor can go straight to the catalogue and search by product name or active ingredient.

Each product has its own prerendered page with key ingredients, benefits, dosing instructions, pack data, an embedded product video and structured Product data for search engines. Available products can be added to a cart that persists across visits, and at checkout the customer enters their details, optionally shares their exact location with one tap, and submits — which opens WhatsApp with a complete, itemised order ready to send.

The visual language is derived from the brand’s own logo: a deep indigo-violet and a vivid pharma orange, developed into full 50–950 token ramps with violet-tinted neutrals and semantic UI tokens, so components describe intent rather than hue. Typography is a three-family system — a geometric display face, a neutral body face, and a dedicated Arabic face — with fluid clamp-based sizing and tightened tracking at display sizes.

There is no stock photography anywhere. All non-product imagery is hand-built SVG and CSS: gradient orbs, grid and dot fields, quarter-arc forms and molecular network graphics derived from the brand mark. Motion is treated as a system rather than decoration, with reusable scroll-reveal, stagger, parallax, magnetic-button and animated-counter primitives — every one of them reduced-motion aware.

The interesting constraint was delivering commerce behaviour from a fully static site. Cart state lives in context mirrored to browser storage, re-resolving stored items against the catalogue on every read so unavailable products drop out cleanly; totals are always derived rather than stored; and orders are transmitted as a URI-encoded structured message through a deep link.

A subtler piece of architecture separates presentation locale from operations locale. The order-message builder deliberately bypasses the active-language translation function and reads from a fixed dictionary, so the fulfilment team always receives one consistent format regardless of how the customer browsed. Most implementations miss this distinction entirely.

The build also resolves a class of bug that rarely surfaces in normal QA. The reduced-motion media query is always false during server rendering but can be true on the client’s first render, and six components branched their rendered markup on it — including the will-change property derived from their animation config. For any visitor with reduce-motion enabled, the mismatch caused React to fail hydration and discard the entire server-rendered document, re-rendering the whole page on the client. A shared SSR-safe hook now reports false until after mount so the first client render matches the server’s, then applies the real preference on the next commit.

Output is fully static: 18 prerendered pages, 87.1 kB of shared first-load JavaScript, AVIF and WebP image formats, lazily-loaded video and map embeds, and a scroll listener throttled through requestAnimationFrame and registered as passive.

Five breakpoints, with mobile treated as a distinct design problem rather than a compressed desktop. The catalogue toolbar is sticky only on large screens so it never consumes a phone viewport; category filters collapse into a single horizontal scroll row with a hidden scrollbar; the search dialog compacts and sheds its secondary column; cart line items restructure from a single row into a stacked layout to prevent right-to-left overflow.

Decorative background bleed is contained with overflow-x: clip — chosen specifically over hidden so position: sticky keeps working. The full site was verified in-browser across every route in both languages at both mobile and desktop widths, with no horizontal overflow and no console errors.