noble-website

Waseem AI Integration

Build a complete multi-page website for MAS International — a strategic advisory firm based in Muscat, Oman that helps global technology companies enter sovereign institutional markets across Oman and the GCC. Design & Theme: Dark futuristic aesthetic throughout. Background colors: deep base #06080f , mid #0c1220 , surface #111a2e . Gold accent color #c9a84c . White text at varying opacities (95%, 50%, 35%). Serif font (Cormorant Garamond) for headings, clean sans-serif for body. Grid dot patterns, radial gold glows, and horizontal gold rule dividers for atmosphere. Staggered fade-in and slide-up animations on all sections using the motion library (animate on scroll with whileInView). Gold top-border reveals on hover for cards. No white or bright screens anywhere. Logo: Use https://hercules-cdn.com/file_hn6msGYE3luDti5Yjn9uyJMX as the logo in both the navbar and footer. Shared Layout: Fixed navbar with scroll-aware dark background, gold active link highlight, mobile hamburger menu with animated expand/collapse Footer with logo, navigation links, Muscat office address (Muscat Hills Tower 1, 6th Floor – Office 09, Muscat Hills), and copyright Pages to build: 1. Homepage (/) Hero: Background image /images/hero-home.jpg, headline "Where Global Technology Meets Sovereign Opportunity", sub-headline about bridging global tech with sovereign institutional markets, two CTA buttons: "Explore Engagement Model" and "Partner With MAS" "What MAS Does" section: MAS operates at the intersection of global technology innovation, sovereign investors, and national institutions — enabling structured technology deployment "Why Companies Partner With MAS" grid (4 cards): Sovereign Market Access, Institutional Deployment Expertise, Regulatory & Strategic Navigation (with a gold link to https://vision2040.om for "Vision 2040"), GCC Expansion Platform Strategic Platform Pathway strip: 5 numbered steps — Innovation → Institutional Alignment → Pilot Deployment → National Adoption → GCC Expansion Strategic Focus Areas: 4 cards — Digital Health, AI & Data Infrastructure, Cybersecurity, Emerging Deep Technologies MAS Ecosystem grid: Global Technology Innovators, Government Institutions, Sovereign Investors, Industry Operators Final CTA linking to Contact 2. About (/about) Hero: "About MAS International" Firm overview: strategic advisory firm, not a lobbyist or distributor — operates as a sovereign market access platform Operating philosophy: 5 bullet points covering institutional relationships, long-term deployment over quick sales, alignment with national strategies, sovereign investor relationships, GCC expansion Include the image /images/mas-ai-image.jpg as a visual accent beside the overview text CTA to Strategic Platform 3. Operating Model (/operating-model) Hero: "The MAS Operating Model" Pathway strip: Technology Introduction → Institutional Alignment → Pilot Programs → National Deployment → Regional Expansion Six value-creation steps in detail: Technology Engagement, Sovereign Alignment, Institutional Engagement, Pilot Programs, National Deployment, Regional Expansion — each with description Reference to Vision 2040 with gold link to https://vision2040.om CTA to Engagement Model 4. Engagement Model (/engagement) Hero: "MAS Engagement Model" Four phases with detailed descriptions: Phase 1 Strategic Assessment, Phase 2 Institutional Engagement Architecture, Phase 3 Deployment Strategy, Phase 4 Regional Expansion Visual pathway strip of the four phases CTA to Partner page 5. Strategic Platform (/strategic-platform) Hero: "Shaping Pathways for Technology Deployment in Oman and the GCC" Introduction on institutional market entry challenges Strategic position: 3 areas — Technology Innovation, Institutional Ecosystems, Strategic Capital Four detailed focus area sections: Digital Health Infrastructure, AI & Data Infrastructure, Cybersecurity & Critical Infrastructure, Emerging Strategic Technologies Pathway visualization Key statement blockquote: "MAS International enables advanced technologies to move from innovation to institutional deployment across Oman and the GCC." Include the globe image /images/globe.jpg as a decorative visual element Engagement philosophy list CTA to Contact 6. Partner With MAS (/partner) Hero: "Partner With MAS International" "Ideal Partners" qualification list: companies with proven technology, seeking institutional adoption, aligned with national development priorities, able to commit to structured deployment programs "What MAS Is Not" list: not a sales agent, distributor, lobbyist, or short-term deal maker Strategic Engagements grid: Proof of Concept Programs, Regulatory Navigation, Sovereign Investor Introductions, Pilot Program Structuring, National Deployment Strategy, GCC Expansion Planning CTA to Contact 7. Contact (/contact) Hero: "Get In Touch" Address card: Muscat Hills Tower 1, 6th Floor – Office 09, Muscat Hills, Muscat, Sultanate of Oman Website: masinternational.om Engagement approach description Focus area tags: Digital Health, AI & Data, Cybersecurity, Smart Cities, Energy, Emerging Tech Map placeholder strip 8. Technologies (/technologies) Hero: "Technologies" with subtitle about driving progress aligned with Oman's national development strategy Six sectors in a 2-column grid (each with icon, subtitle, full description, and topic tags): Healthcare Innovation, Smart Cities & Infrastructure, Education & Workforce Development, Energy & Environmental Sustainability, Economic Sectors & Innovation, Data Analytics & Insights "Commitment to Partnerships and Innovation" section Oman Vision 2040 card with a button that opens the PDF https://hercules-cdn.com/file_S9uAwxbBW3Tafzm83et2ILq1 in a new tab, plus a link to https://vision2040.om Stats strip: 6 Focus Sectors, 2040 Vision Horizon, GCC Regional Reach, 100% Institutional Focus CTA to Partner and Contact pages All "Vision 2040" text references across the site should be styled as a gold hyperlink to https://vision2040.om

Comments (0)

No comments yet. Be the first!

Page 1 of 4

System Requirements Document (SRD)

noble-website

1. Introduction

The noble-website project is a multi-page website for MAS International, a strategic advisory firm based in Muscat, Oman. MAS International specializes in helping global technology companies enter sovereign institutional markets across Oman and the GCC. The website will reflect the firm's expertise, professionalism, and futuristic vision through a dark, elegant design aesthetic with gold accents and interactive elements.

This document outlines the system requirements for the development of the noble-website, including functional and non-functional requirements, user personas, design themes, and technical specifications.

2. System Overview

The noble-website will serve as a digital platform for MAS International to showcase its services, operating model, and strategic focus areas. It will feature eight core pages: Homepage, About, Operating Model, Engagement Model, Strategic Platform, Partner With MAS, Contact, and Technologies.

The website will incorporate a dark futuristic aesthetic with interactive animations and hover effects to enhance user engagement. It will also include smooth navigation, scroll-triggered animations, and dynamic visual elements to create a professional yet innovative experience.

The system will be optimized for desktop and mobile devices, ensuring accessibility and usability for a global audience.

Page 2 of 4

3. Functional Requirements

As a User, I should be able to navigate between pages using a fixed navbar with scroll-aware background and active link highlights.
As a User, I should see smooth scrolling when navigating between sections and pages.
As a User, I should experience staggered fade-in and slide-up animations for all sections as I scroll.
As a User, I should be able to interact with hoverable cards that reveal a gold top-border and subtle scaling.
As a User, I should see animated pathway strips with progress lines lighting up as I scroll.
As a User, I should experience radial gold glows that subtly pulse on CTAs.
As a User, I should be able to view an interactive map on the Contact page with hoverable regions or pins.
As a User, I should experience smooth page transitions with fade or slide effects.
As a User, I should be able to access detailed information about MAS International's services, operating model, and strategic focus areas.
As a User, I should be able to contact MAS International via a form or provided contact details.

4. User Personas

Admin
- Role: Manages website content and updates.
- Goals: Ensure the website is up-to-date, accurate, and aligned with MAS International's branding.
Corporate Client
- Role: Technology companies seeking to enter sovereign institutional markets.
- Goals: Understand MAS International's services, operating model, and partnership opportunities.
Government Official
- Role: Representatives from sovereign institutions or national agencies.
- Goals: Explore MAS International's strategic focus areas and engagement philosophy.
General Visitor
- Role: Individuals or organizations interested in MAS International.
- Goals: Learn about the firm, its services, and how to get in touch.

Page 3 of 4

5. Visuals Colors and Theme

The noble-website will feature a dark futuristic aesthetic with the following unique color palette:

Background: #06080f
Mid-tone: #0c1220
Surface: #111a2e
Accent (Gold): #c9a84c
Text (Primary): #ffffff (95% opacity)
Text (Secondary): #ffffff (50% opacity)
Text (Muted): #ffffff (35% opacity)

Additional design elements include grid dot patterns, radial gold glows, and horizontal gold rule dividers. Animations will use the motion library for staggered fade-in and slide-up effects.

6. Signature Design Concept

Interactive Pathway Universe

The homepage will feature an Interactive Pathway Universe design. Upon landing, users will see a dark, starry background with a glowing gold pathway that dynamically animates as they scroll. Each section of the homepage will appear as a "node" on this pathway, connected by animated gold lines that light up progressively.

Hero Section: A parallax background image of Oman’s skyline with the headline "Where Global Technology Meets Sovereign Opportunity" fading in. The two CTA buttons will glow softly and pulse when hovered.
Pathway Animation: As users scroll, the pathway will "grow" in real-time, connecting sections like "What MAS Does" and "Why Companies Partner With MAS."
Hover Effects: Cards in the "Why Companies Partner With MAS" grid will flip slightly and reveal a glowing gold border on hover.
Micro-interactions: Subtle animations like glowing dots, pulsating radial effects, and smooth transitions will make the site feel alive.
Final CTA: The pathway will culminate in a glowing gold "Contact" node, encouraging users to get in touch.

This design will create an immersive, futuristic experience that aligns with MAS International's innovative identity.

7. Non-Functional Requirements

The website must load within 3 seconds on a standard broadband connection.
The website must be responsive and optimized for both desktop and mobile devices.
The website must comply with accessibility standards (WCAG 2.1 Level AA).
The website must support cross-browser compatibility (Chrome, Firefox, Safari, Edge).
The website must be secure, with HTTPS enforced across all pages.

Page 4 of 4

8. Tech Stack

Frontend: React for Web
Backend: Python with FastAPI
Database: MySQL (using Alembic for migrations)
AI Tools: Litellm for LLM Routing, Langchain for advanced interactions
Local Orchestration: Docker, docker-compose
Server-Side Orchestration: Kubernetes

9. Assumptions and Constraints

The website will primarily target users in Oman and the GCC region, so content will be tailored to this audience.
The website will use English as the primary language.
All animations and interactive elements must be lightweight to avoid performance issues.
The website will rely on the provided logo and branding guidelines.

10. Glossary

CTA: Call to Action
GCC: Gulf Cooperation Council
WCAG: Web Content Accessibility Guidelines
LLM: Large Language Model

This concludes the updated SRD for the noble-website. Let me know if you'd like to refine or expand any section further, Waseem!