noble-website

As a user I want to explore MAS International's services on the Homepage (/) so that I understand their value proposition. Implement the Homepage based on the existing JSX design (Homepage v2). Includes: Hero section with /images/hero-home.jpg, headline 'Where Global Technology Meets Sovereign Opportunity', two CTA buttons; 'What MAS Does' section; 'Why Companies Partner With MAS' 4-card grid with hover gold-border and flip effects; Strategic Platform Pathway strip with 5 animated steps; Strategic Focus Areas 4-card grid; MAS Ecosystem grid; Final CTA linking to Contact. Apply scroll-triggered staggered fade-in/slide-up animations, animated pathway gold progress lines, and radial gold glow pulses on CTAs.

As a user I want to learn about MAS International on the About page (/about) so that I understand the firm's identity and philosophy. Implement the About page based on the existing JSX design (About v2). Includes: Hero 'About MAS International'; firm overview describing MAS as a sovereign market access platform (not a lobbyist or distributor); operating philosophy 5 bullet points; /images/mas-ai-image.jpg visual accent beside overview text; CTA to Strategic Platform. Apply scroll-triggered staggered animations.

As a user I want to review MAS International's operating model on the Operating Model page (/operating-model) so that I understand their deployment methodology. Implement the Operating Model page based on the existing JSX design (Operating Model v2). Includes: Hero 'The MAS Operating Model'; animated pathway strip (Technology Introduction → Institutional Alignment → Pilot Programs → National Deployment → Regional Expansion); six value-creation steps with descriptions; Vision 2040 gold hyperlink to https://vision2040.om; CTA to Engagement Model. Apply scroll-triggered animations and animated pathway gold progress lines.

As a user I want to view the engagement phases on the Engagement Model page (/engagement) so that I can understand the structured process MAS follows. Implement the Engagement Model page based on the existing JSX design (Engagement Model v2). Includes: Hero 'MAS Engagement Model'; four phases with detailed descriptions (Strategic Assessment, Institutional Engagement Architecture, Deployment Strategy, Regional Expansion); visual pathway strip of four phases; CTA to Partner page. Apply scroll-triggered staggered animations.

As a user I want to explore MAS International's strategic focus areas on the Strategic Platform page (/strategic-platform) so that I can understand their positioning in institutional markets. Implement the Strategic Platform page based on the existing JSX design (Strategic Platform v2). Includes: Hero 'Shaping Pathways for Technology Deployment in Oman and the GCC'; institutional market entry challenges intro; three strategic position 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; /images/globe.jpg decorative visual; engagement philosophy list; CTA to Contact. Apply scroll-triggered animations.

As a user I want to assess partnership opportunities on the Partner With MAS page (/partner) so that I can determine if my company is a fit. Implement the Partner With MAS page based on the existing JSX design (Partner With MAS v2). Includes: Hero 'Partner With MAS International'; Ideal Partners qualification list; 'What MAS Is Not' list; Strategic Engagements grid (Proof of Concept Programs, Regulatory Navigation, Sovereign Investor Introductions, Pilot Program Structuring, National Deployment Strategy, GCC Expansion Planning); CTA to Contact. Apply scroll-triggered staggered animations and gold hover effects on cards.

As a user I want to get in touch with MAS International on the Contact page (/contact) so that I can initiate an inquiry or partnership. Implement the Contact page based on the existing JSX design (Contact v2). Includes: 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); interactive map placeholder strip with hoverable regions or pins. Apply scroll-triggered animations and radial gold glow effects.

As a user I want to browse technology sectors on the Technologies page (/technologies) so that I can understand MAS International's areas of focus aligned with Oman's national development strategy. Implement the Technologies page based on the existing JSX design (Technologies v2). Includes: Hero 'Technologies' with subtitle; six sectors in 2-column grid 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 PDF link (https://hercules-cdn.com/file_S9uAwxbBW3Tafzm83et2ILq1) and https://vision2040.om gold hyperlink; Stats strip (6 Focus Sectors, 2040 Vision Horizon, GCC Regional Reach, 100% Institutional Focus); CTA to Partner and Contact pages. Apply scroll-triggered staggered animations.

As a user I want to send an inquiry via the Contact page form so that MAS International receives my message. Implement a FastAPI backend endpoint (POST /api/contact) that accepts name, email, company, and message fields, validates input, and stores submissions in MySQL. Include rate limiting and input sanitization for security.

As a user I want to experience smooth scroll-triggered animations across all pages so that the site feels immersive and engaging. Implement global animation utilities using the motion library: staggered fade-in and slide-up for all sections (whileInView), animated pathway gold progress lines that grow as users scroll, radial gold glow pulses on CTAs, smooth page transition effects (fade/slide between routes), and scroll-aware navbar background darkening. Ensure all animations are lightweight per non-functional requirements.

As a user I want to fill and submit the contact form on the Contact page so that I can send an inquiry to MAS International. Connect the Contact page form UI to the POST /api/contact backend endpoint. Show success/error states with styled feedback messages aligned with the dark theme. Validate fields client-side before submission.

As a user I want the website to load quickly and be accessible so that I can use it on any device and browser without barriers. Ensure page load time under 3 seconds on standard broadband, implement WCAG 2.1 Level AA compliance (ARIA labels, color contrast, keyboard navigation), verify cross-browser compatibility (Chrome, Firefox, Safari, Edge), enforce HTTPS across all pages, and optimize image assets and animation weights. Run Lighthouse audits and resolve critical issues.