Golden Fibers — Integrated Technical Solutions Website
Our client: Golden Fibers Company
The problem
Golden Fibers Company — a firm spanning software, security, hosting, AI and creative brand identity — lacked an institutional digital presence worthy of its standing and 18+ years of expertise. The previous site failed to reflect the breadth of its services, its institutional partnerships with the Aleppo Chamber of Commerce and Chamber of Industry, or its flagship media project Aleppo Beacon of the East. The absence of a modern, bilingual user experience weakened first impressions with prospective clients and partner teams.
The solution
We built a bilingual (Arabic–English) institutional website with a premium Silicon-Valley-caliber design: a bespoke design system in deep navy × royal gold × tech cyan, glass-morphism cards and aurora effects. The site presents seven sections: an animated hero with live metrics, an About block, six core services (AI & Automation, Hosting & Cloud Foundations, Security & Resilience, Platforms & Software, Design & Brand Impact, Partnerships & Integrated Solutions), three flagship projects (Aleppo Chamber of Industry, Aleppo Chamber of Commerce, Aleppo Beacon of the East), a trust gallery with a slideshow and lightbox, a dedicated Aleppo Now media-project section, and a forward-looking vision. A built-in i18n engine toggles Arabic and English with full RTL/LTR support, locally loaded fonts (IBM Plex Sans Arabic, Outfit), Schema.org structured data, and a fully responsive layout down to mobile.
Platform Features
What this platform delivers — from essentials to pro capabilities
🌐 Instant bilingual toggle — built-in i18n engine switches Arabic and English with one click, preference persisted in localStorage.
🔄 Full RTL/LTR support — page direction, text flow and layout flip automatically on language switch, with dedicated fonts per language.
🎨 Bespoke premium design system — deep navy × royal gold × tech cyan with glass-morphism cards, glowing borders and animated gold gradients.
✨ Aurora & glass effects — three-layer animated aurora backdrop with noise grain and screen blend for cinematic depth.
🌌 Interactive particle constellation — Canvas layer draws gold and cyan particles linked by translucent lines drifting gently in the background.
🔮 Cursor glow — semi-transparent halo tracks the pointer with screen blend for a subtle interactive dimension.
🧲 Magnetic buttons — primary CTAs subtly pull toward the pointer on proximity with a natural physics feel.
🎴 3D tilt effect — project cards tilt in perspective as the pointer moves across them.
📊 Animated counters — hero metrics (2007, 35+, 45%, 3) count up from zero with easing on scroll into view.
🎞 Infinite marquee — horizontal ticker of service keywords, pauses on hover.
🖼️ Achievement gallery with slideshow — six images, auto-advance, prev/next and expand buttons, and active thumbnails.
🔍 Lightbox viewer — full-screen image zoom on a blurred overlay with keyboard navigation (arrows + Escape).
📱 Fully responsive — adaptive layout with breakpoints (1060px, 640px) and a hamburger menu on mobile.
🏗️ Sticky glass header — navbar becomes fixed with backdrop blur on scroll.
🚀 Staggered scroll reveals — elements fade-slide in on scroll via IntersectionObserver with delay classes.
⏱️ Live Aleppo clock — digital clock in the footer showing Asia/Damascus time, updated every second.
🔐 Schema.org structured data — Organization JSON-LD with name, founding date, address, phone and logo.
♿ Accessibility — skip-to-content link, ARIA labels, and prefers-reduced-motion support that halts all animations.
📐 Scroll progress bar — gold-to-cyan bar at page top fills proportionally with scroll position.
🔝 Back-to-top button — appears after scroll and smoothly returns to the hero.