Prepared by Bhr Solutions for the National Interactive Entertainment Company (Qsas). A modern, headless, bilingual website designed for performance, security, and editorial agility.
After reviewing the requirements document submitted by Qsas, Bhr Solutions presents this proposal for the development and implementation of the website, following best practices in software engineering and adopting modern, flexible methodologies in project management and delivery. In this document, you will find the proposed design and the technical offer for the system that will be developed for you by Bhr.
Bhr Solutions Company is a Saudi limited liability company, with commercial registration number 4030459162. Mobile 0507979869, email [email protected].
We look forward to our partnership with you on this project to be the beginning of a fruitful collaboration.
After reviewing the Statement of Work shared by Qsas, the work has been organized into ten primary streams. Each stream below details the proposed approach.
The front-end will be developed using Next.js with TailwindCSS, one of the most powerful modern stacks for high-performance, highly-interactive web experiences with full control over design fidelity. Bhr will join the two scheduled sessions with the Qsas design team to walk through the Figma system, prototype, and page flow. The full design system (tokens, components, typography, spacing, color, iconography) will be codified into a reusable Tailwind-based component library so every page is built from the same primitives.
Every page will be implemented to match the approved Figma design precisely — layout, spacing, typography scale, color system, imagery, and micro-interactions — with design-review checkpoints for sign-off.
Fully responsive across Desktop, Tablet, and Mobile using TailwindCSS Grid, Flexbox, and media queries. Touch-friendly targets, swipe gestures, and optimized form inputs are implemented for mobile and tablet, with both portrait and landscape support.
Native Right-to-Left support for Arabic, including mirrored layouts, CSS logical properties, localized typography, localized date/number formatting, and language-aware routing. Language switching is fully content-managed from the CMS.
All animations and scroll-triggered behaviors defined in the
Figma prototype implemented using
Framer Motion and GSAP,
respecting prefers-reduced-motion.
Typography, color palette, and the complete visual system implemented exactly per Qsas brand guidelines, enforced through design tokens at the code level.
Tested across Chrome, Safari, Edge, and Firefox on desktop and mobile, covering recent major versions and operating systems.
A headless architecture powered by a modern CMS, exposing data through well-documented APIs consumed by the Next.js front-end. This separation of concerns delivers flexibility, scalability, and a significantly better editing experience than traditional monolithic CMSs.
A library of reusable, composable templates — hero sections, feature grids, content blocks, CTAs, media galleries, team cards, insight cards. Marketing can assemble new landing pages without engineering involvement.
All content modeled with first-class Arabic and English fields. Admins add, remove, or modify content in either language independently.
Cloud-ready, container-based architecture with horizontal scalability, stateless app nodes, managed database with read replicas, and clear separation between application, CMS, and storage layers. Secrets handled via a managed vault.
Designed for marketers, not developers. Live preview, visual composition, rich-text WYSIWYG editing, and guardrails that prevent broken layouts.
Static generation (SSG), incremental static regeneration (ISR), edge rendering, automated image and font optimization, lazy loading, code splitting, and aggressive caching. Full CI/CD pipeline (GitHub Actions or Azure DevOps) running automated linting, type-checking, unit tests, build verification, staging on every merge, production on tagged release, and automated rollback.
Served through a global CDN (Cloudflare recommended). Compliant cookie consent banner with category-level controls. WAF layer (OWASP Top 10), bot mitigation, rate limiting. HTTPS site-wide with TLS 1.2+, HSTS, modern cipher suites, and auto-renewing certificates.
The platform will be built on a headless CMS approach. Every page can be composed and customized fully without being constrained by a fixed theme — content remains cleanly separated from presentation.
The Marketing team can update pages, upload content, manage banners, and create new landing pages entirely through the CMS, with no technical dependency.
Workflows configured for Draft → Under Review → Approved → Published, with role-based permissions at each stage and email/in-app notifications. Custom workflows per content type.
Development will cover all website pages defined in the approved Figma, including indicative sections:
Each section is implemented both as a public-facing page and as a CMS-manageable content area, so Qsas can continue to evolve the content independently post-launch.
All integrations use secure authentication (OAuth 2.0, API keys, or token-based), with robust error handling, retry logic, and activity logging.
Core Web Vitals. Full Google Core Web Vitals compliance — LCP < 2.5s, INP < 200ms, CLS < 0.1. Target page load under 2 seconds on a good 4G connection.
Fast loading. Lazy loading, modern image formats (WebP / AVIF) with fallbacks, font subsetting, code splitting, tree shaking, CSS / JS minification.
Mobile optimization. Mobile-first implementation, validated on real mid-range mobile devices.
SEO readiness. SSR/SSG, semantic HTML, canonical URLs, sitemap, robots.txt, structured data, clean URL taxonomy.
Accessibility compliance. WCAG 2.1 AA — semantic HTML, heading hierarchy, color contrast, keyboard navigability, visible focus, ARIA, alt text, screen-reader support in both languages.
Uptime & availability. 99.9% application-level uptime via multi-AZ deployment, managed DB with auto-failover, CDN edge delivery, health-check-driven auto-recovery.
Security is addressed by design and continuously verified during operation. The implementation follows the standards of the National Cybersecurity Authority (NCA) and international standards including OWASP Top 10 and W3C.
Quality assurance is embedded throughout the build, not reserved for the end of the project.
Full documentation package: CMS user guide, solution architecture document, functional design document, integration design document, configuration and admin guides, go-live plan, rollback plan, and support and escalation matrix.
Two live training sessions for Qsas team members to operate the CMS confidently. Sessions are recorded and accompanied by the CMS user guide.
Maintenance terms beyond the initial support window will be agreed separately as a managed-service arrangement.
Software systems are technically divided into the following layers — each chosen to deliver a sustainable system with room for future expansion.
Next.js is one of the most powerful front-end frameworks for delivering fast, SEO-friendly, highly interactive UIs. TailwindCSS gives fine-grained control to implement the Figma design exactly and adapt elegantly across devices.
Directus exposes clean, permissioned REST and GraphQL APIs out of the box, supports custom business logic, and integrates smoothly with external systems (CRM, analytics, booking) at scale.
Directus delivers a marketing-friendly admin UI, role-based access, media library, scheduling, and editorial workflows. PostgreSQL is the most reliable open-source relational database.
Containerization guarantees environment parity; CI/CD guarantees safe, repeatable releases; Cloudflare delivers global performance and an application firewall in a single managed layer.
Proactive observability is how we sustain the 99.9% application-level uptime target and detect issues before they affect users.
A ticketing portal will be provided to receive requests and change items. All requests are handled per the Service Level Agreement, with first-response times mapped to the severity tiers (Critical / High / Medium / Low) defined in the Qsas SOW.
Bhr's team is a group of specialists with broad expertise in programming, development, and project management. Several of our specialists hold multiple certifications including PMP from PMI, and SAFe certifications including SAFe Product Manager / Product Owner and SAFe Scrum Master, in addition to the Scrum Developer Certificate.
Accordingly, the Agile methodology is followed in project management — short development stages ("Sprints") with continuous improvement of the product, presenting real initial products, evaluating them, and incorporating feedback.
The following software and techniques will be used to manage the project:
| Member | Function | Number | Group |
|---|---|---|---|
| Project Supervisor | General supervision; ensuring progress according to plan and timely deliveries | 1 | NIEC (Qsas) |
| Project & Development Manager | Manage project, tasks, resources; design system architecture; link development teams; ensure work is received and tested | 1 | Bhr |
| Developer of User Interfaces | Develop UIs and ensure integration with CMS | 2 | Bhr |
| CMS Developer | Prepare infrastructure; launch and update systems; ensure stability through changes | 2 | Bhr |
| Integration Developer | Develop and implement integrations with external services; secure API connections; data synchronization | 2 | Bhr |
| Administrative & Documentation Coordinator | Coordinate teams, prepare reports, manage documentation | 1 | Bhr |
Based on our experience delivering similarly scoped website projects on Next.js with a headless CMS, Bhr estimates that development can be completed within 3 to 4 weeks from kickoff to go-live, assuming the design files, content, and stakeholder availability are in place as outlined in the assumptions section.
| Milestone | Week 1 | Week 2 | Week 3 | Week 4 |
|---|---|---|---|---|
| Kickoff, design handover & environment setup | ||||
| Front-end development & component library | ||||
| CMS configuration & content modeling | ||||
| Integrations (Analytics, SEO, CRM, Forms) | ||||
| Performance, security & accessibility hardening | ||||
| Testing (UAT, cross-browser, VAPT) | ||||
| Training, documentation & Go-Live |
Activities run in parallel where possible — for example, front-end development and CMS configuration overlap during weeks 2 and 3. A weekly progress update is shared with Qsas, and any change to the timeline is raised through the agreed change-management approach.
An SLA is an agreement between the service provider and the beneficiary that defines services, expected service grade, and the metrics by which it is measured — including response times, availability, and uptime.
First-level service is via the ticketing portal. Delays or errors are escalated through three levels of administrators agreed at kickoff.
| Service | Completion | Availability |
|---|---|---|
| Edit content on a page | 3 hours | Sun–Thu, 8 am – 5 pm |
| Simple page-design modification | 2 days | Sun–Thu, 8 am – 5 pm |
| Radical page-design change | 3 days | Sun–Thu, 8 am – 5 pm |
| Develop new page (no DB / API) | 5 days | Sun–Thu, 8 am – 5 pm |
| Extract data from website | 1 day | Sun–Thu, 8 am – 5 pm |
| Fix S1 critical issues | 2 hours | 24/7 |
| Fix S2 urgent issues | 6 hours | 24/7 |
| Fix S3 important issues | 12 hours | 24/7 |
| Fix S4 incident issues | 1 day | 24/7 |
| Service | Completion | Availability |
|---|---|---|
| Add a new user | 3 hours | Sun–Thu, 8 am – 5 pm |
| Modify user permissions | 3 hours | Sun–Thu, 8 am – 5 pm |
| Delete a user | 3 hours | Sun–Thu, 8 am – 5 pm |
| Add a new integration | 5 days | Sun–Thu, 8 am – 5 pm |
| Fix S1 critical issues | 2 hours | 24/7 |
| Fix S2 urgent issues | 6 hours | 24/7 |
| Fix S3 important issues | 12 hours | 24/7 |
| Fix S4 incident issues | 1 day | 24/7 |
Restrictions. The agreement guarantees 5 change requests per month (not including issues), non-transferable to the following month. Radical amendments are studied and quoted separately.
Security Commitments. All service data must be saved inside Saudi Arabia.
This proposal is based on several assumptions, including:
Bhr Solutions for Information Technology — a trusted technology partner for prominent SMEs across the region, delivering enterprise-grade software with the personalised service of a focused team.
