2026
ثمار | Thimar
A concept marketing site for a fictional Shariah-compliant micro-investment platform, built to showcase front-end, motion, RTL, and design-system engineering. Thimar is not a real company. Nothing on the site is a real financial product and no figure is real advice. Live sections: bilingual hero, trust bar, product bento grid, "how it works", an interactive returns calculator, FAQ, security, and an app-download CTA.
What went into it
- Bilingual and RTL-first - Arabic is the default language; every layout, animation, and icon mirrors correctly.
- Logical CSS properties throughout, Western digits forced in both locales, charts kept LTR per KSA convention.
- Motion - GSAP (ScrollTrigger, SplitText line reveals, DrawSVG) for scroll choreography, plus a custom WebGL liquid-mesh shader and a scroll-driven growth chart. All reduced-motion aware.
- Self-hosted fonts - Readex Pro variable, subset by script, served from the app (no external font requests).
- SEO - per-locale metadata, hreflang alternates, Open Graph image, JSON-LD (Organization, WebSite, FAQPage), sitemap, robots, web manifest.
- Static - both locales are prerendered (SSG); the Saudi Riyal glyph and the LinkedIn QR are generated at build time.
- Accessible - WCAG-AA contrast, visible focus rings, reduced-motion and reduced-transparency fallbacks.
Built with
- Next.js
- React.js
- TypeScript
- Tailwind CSS
- UI/UX
- Prototyping