ItqanLab.com — Our Own Marketing Website, Built to Practice What We Preach
We designed and built our own marketing website from scratch — brand identity, bilingual support, performance-first architecture, and SEO foundations — as a showcase of the craft we deliver to clients.
Services
Results
Links
Why We Built Our Own Site from Scratch
Many studios use templates for their own websites. We chose to build ours from zero — applying the same standards and process we use for client work. The site isn’t just a marketing page; it’s a living proof of our craft.
Brand Identity
The Name: ItqanLab
“Itqan” (إتقان) is an Arabic word meaning mastery, precision, and excellence in craftsmanship. “Lab” signals experimentation and innovation. Together, the name bridges Arabic precision with a modern, exploratory spirit.
Colors
Our primary accent is amber (#d97706) — warm, confident, and distinctive in a sea of blue tech websites. We added switchable themes (Blue, Rose, Emerald, Violet) that visitors can toggle — an interactive detail that demonstrates our attention to craft.
Typography
- Outfit for headings — geometric, modern, bold
- Inter for body text — optimized for screen readability
- JetBrains Mono for code — technical precision
- IBM Plex Sans Arabic for Arabic text — designed specifically for Arabic digital typography
Every font was chosen because it serves its purpose precisely, not because it’s trendy.
Bilingual Architecture
The site supports English and Arabic with full RTL layout. Language switching is instant — client-side, no page reload. All translatable elements use data-i18n attributes mapped to a single translation object.
The Arabic copy isn’t machine-translated or literally translated from English. It’s written to feel native — natural phrasing, cultural context, and proper Arabic tone. When you switch to Arabic, the entire layout flips to RTL, and the content reads like it was written Arabic-first.
Tech Stack
We built with Astro 5 using static output. The result: zero JavaScript by default. Scripts load only when needed — Three.js for the interactive hero, lightweight vanilla JS for the language toggle and theme switcher.
Why Astro? For a marketing site, static generation wins. No hydration overhead, no framework runtime, just HTML and CSS delivered at the edge. The same recommendation we give clients in our tech stack guide.
Infrastructure
- Hosting: Dokploy (self-hosted) with GitHub auto-deploy from
main - CDN/DNS/SSL: Cloudflare with proxy enabled, Full SSL mode
- Build: Nixpacks
- Domain: itqanlab.com
This setup gives us full control, fast deploys, and global edge caching — without paying for managed hosting platforms.
SEO Foundations
Every page includes:
- Custom meta titles and descriptions — unique per page, not auto-generated
- Structured data (JSON-LD) — Organization, WebSite, FAQ, BlogPosting, and CreativeWork schemas
- Open Graph images — custom SVG → PNG for every page
- Hreflang tags — proper
en,ar, andx-defaultalternates - Auto-generated sitemap — via Astro’s built-in sitemap integration
- Semantic HTML — proper heading hierarchy, landmark roles, accessible markup
We don’t just build sites that look good — we build sites that search engines can understand.
Interactive Details
The homepage features a Three.js particle hero — an interactive 3D canvas that responds to cursor movement. It’s loaded asynchronously so it doesn’t block the critical rendering path.
Other details:
- Custom cursor with dot + ring that responds to interactive elements
- Scroll progress indicator at the top of the page
- Theme switcher with 5 color themes that persist across sessions
- Smooth scroll animations powered by GSAP with IntersectionObserver triggers
These aren’t gimmicks — they’re deliberate choices that make the site feel crafted, not templated.
Services
We present our six core services in a clean, scannable grid — each with a clear description and a link to the full service page. The layout translates seamlessly to Arabic.
Content System
Blog posts and project case studies use Astro Content Collections with Markdown files. Each content type has a strict schema defined in TypeScript — enforcing required fields, optional bilingual variants, and structured metadata.
This means:
- Adding a new blog post = creating a Markdown file with frontmatter
- Adding a new project = same, with bilingual body support via
body_arin frontmatter - No CMS overhead, no database, no API calls — just files in a Git repo
The Result
A fast, beautiful, bilingual, SEO-optimized website that reflects exactly the level of quality we deliver to our clients. Not just a company site — a real project that proves our capabilities.
Want a site built with this level of craft? Let’s talk.