// NSS Software — page sections const { useEffect, useRef, useState } = React; // --- Service Image Carousel --- const ServiceCarousel = ({ images, title }) => { const [active, setActive] = useState(0); const [fading, setFading] = useState(false); useEffect(() => { if (!images || images.length <= 1) return; const id = setInterval(() => { setFading(true); setTimeout(() => { setActive(prev => (prev + 1) % images.length); setFading(false); }, 280); }, 3800); return () => clearInterval(id); }, [images]); const go = (idx) => { if (idx === active || fading) return; setFading(true); setTimeout(() => { setActive(idx); setFading(false); }, 280); }; if (!images || images.length === 0) return null; return (
{`${title}
Preview {active + 1}/{images.length}
{images.length > 1 && (
{images.map((_, i) => (
)}
); }; // --- Urgency ticker strip --- const Ticker = () => { const items = [ "Stop losing clients — no response = no sale", "Delivery in record time · weeks, not months", "More visibility · More leads · More revenue", "24 / 7 AI agents that never sleep", "Less delay — more action — more autonomy", "Your first AI agent live in 7 days", "Every day offline is a day losing money", ]; const doubled = [...items, ...items]; return (
{doubled.map((item, i) => ( {item} ))}
); }; // --- intersection-observer reveal hook --- const useReveal = () => { useEffect(() => { const els = document.querySelectorAll(".reveal, .mask-reveal"); const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } }); }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); }; // --- progress bar --- const Progress = () => { const ref = useRef(null); useEffect(() => { const onScroll = () => { const h = document.documentElement; const pct = h.scrollTop / (h.scrollHeight - h.clientHeight || 1); if (ref.current) ref.current.style.transform = `scaleX(${pct})`; }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return
; }; // --- nav --- const Nav = () => { const [open, setOpen] = useState(false); const links = [ { idx: "01", label: "Services", href: "#services" }, { idx: "02", label: "Portfolio", href: "#portfolio" }, { idx: "03", label: "Systems", href: "#ai" }, { idx: "04", label: "Process", href: "#process" }, { idx: "05", label: "Contact", href: "#cta" }, ]; const close = () => setOpen(false); // lock body scroll when menu open useEffect(() => { document.body.style.overflow = open ? "hidden" : ""; return () => { document.body.style.overflow = ""; }; }, [open]); return ( ); }; // --- hero --- const Hero = () => { const titleLines = window.NSS.hero.title; return (
Index 01 — Digital Infrastructure
Origin Doha · Qatar · QAT (UTC+3)
Status ◉ Available — 24/7 AI Support

{titleLines.map((line, i) => ( {i === 1 ? {line} : line} ))}

{window.NSS.hero.sub}

Scroll
Currently engineering 4 active engagements · 9 systems in maintenance
); }; // --- trust --- const Trust = () => (
02 — Philosophy

{window.NSS.trust.statement}

{window.NSS.trust.stats.map((s, i) => (
Metric / {String(i + 1).padStart(2, "0")}
{s.value}{s.unit}

{s.label}

))}
); // --- services --- const Services = () => { const wireKinds = ["landing", "gallery", "portfolio", "corp", "ecom", "hosting"]; return (
03 — Solutions

Every problem your business faces online — we solve it.

From a landing page that turns visitors into paying clients, to a full AI-powered platform that runs your operations around the clock. Pick the layer that fits where you are today.

{window.NSS.services.map((s, i) => (
{s.num} / Web Development
{window.NSS && window.NSS.serviceImages && window.NSS.serviceImages[s.num] ? :
}
{s.name}
{s.desc}
    {s.bullets.map((b, j) =>
  • {b}
    • )}
↳ {s.footnote}
))}
); }; // Thumbnail map for case studies const WORK_IMAGES = { "01": "images/meridian-thumb.jpg", "02": "images/atlas-inventory.jpg", "03": "images/souq-lumiere.jpg", "04": "images/cedar-clinic.jpg", }; // --- portfolio (unified: case studies + live projects + in-dev) --- const Portfolio = () => { const videoRef = useRef(null); // Merge work case studies + portfolio items into one list const caseStudies = (window.NSS.work || []).map((w, i) => ({ id: `w${w.num}`, name: w.name, slug: w.meta, desc: null, tags: [w.tag], status: "live", image: WORK_IMAGES[w.num], url: null, })); const ownProjects = (window.NSS.portfolio || []).filter(p => p.num !== "01").concat( (window.NSS.portfolio || []).filter(p => p.num === "01") ).sort((a, b) => a.num - b.num); return (
04 — Portfolio

Real businesses. Real results.

Every project below is live, generating revenue, or actively in development for a real client. Not demos. Not concepts. Working systems.

{/* Featured case study — video */}
Featured · 2026
Meridian Capital — Investor Portal & Corporate AI Agent.
10-page architecture · 2 AI agents · 1 client portal
Featured · 2026
Meridian Capital — Investor Portal & Corporate AI Agent.
10-page architecture · 2 AI agents · 1 client portal
{/* Case studies list */}
{caseStudies.filter(c => c.id !== "w01").map((c) => (
{c.tags[0]}
{c.name}{c.slug}
{c.name}
))}
{/* Own projects grid */}
NSS-Built Platforms
{ownProjects.map((p, i) => (
{p.name} {p.status === "dev" ?
In Development
:
◉ Live
}
{p.num} {p.slug}
{p.name}

{p.desc}

{p.tags.map((t) => {t})}
{p.status === "live" && p.url ? View project : p.status === "dev" ? Coming soon : null }
))}
); }; // AI agent icons (inline SVG — one per agent type) const AI_ICONS = { "01": ( ), "02": ( ), "03": ( ), "04": ( ), }; // --- AI --- const AI = () => (
05 — Automation

Your business, running without you.

An AI agent never sleeps, never misses a lead, never forgets to follow up. We deploy them as part of every engagement — because manual response is the fastest way to lose clients.

02 / AI
AI Agents
& Automation

Deploy intelligent agents across WhatsApp, Web, and Telegram — 24/7, no human needed.

Deploy an agent →
{window.NSS.ai.map((a, i) => (
{AI_ICONS[a.idx]}
{a.idx}
{a.name}

{a.desc}

Inquire →
))}
); // --- process --- const Process = () => (
06 — How We Work

From signed to shipped — in weeks, not months.

No discovery theater. No endless revision cycles. Clear scope, clear milestones, clear delivery. We move fast because every week without a system is a week losing revenue.

{window.NSS.process.map((p, i) => (
STEP {p.num}
{p.title}
{p.desc}
{p.meta}
))}
); // --- testimonials --- const Testimonials = () => (
07 — Client Signal

Don't take our word for it.

{window.NSS.testimonials.map((t, i) => (
{t.quote}
{t.name} {t.org}
))}
); // --- WhatsApp contact form --- const WhatsAppForm = () => { const [name, setName] = useState(''); const [interest, setInterest] = useState(''); const [note, setNote] = useState(''); const submit = (e) => { e.preventDefault(); const lines = [`Hi NSS Software, I'm ${name}.`]; if (interest) lines.push(`I'm interested in: ${interest}.`); if (note) lines.push(note); window.open(`https://wa.me/97451701529?text=${encodeURIComponent(lines.join(' '))}`, '_blank'); }; return (
setName(e.target.value)} required />