// Individual page views for hash router const COLOR_MAP = { violet: { bg: "rgba(124,92,255,0.08)", border: "rgba(124,92,255,0.22)", text: "#a78bfa" }, cyan: { bg: "rgba(0,212,255,0.07)", border: "rgba(0,212,255,0.20)", text: "#67e8f9" }, green: { bg: "rgba(34,197,94,0.07)", border: "rgba(34,197,94,0.20)", text: "#86efac" }, amber: { bg: "rgba(251,191,36,0.08)", border: "rgba(251,191,36,0.22)", text: "#fde68a" }, rose: { bg: "rgba(244,63,94,0.08)", border: "rgba(244,63,94,0.22)", text: "#fda4af" }, }; const PageHero = ({ eyebrow, title, sub, children }) => (
e.currentTarget.style.color = "var(--text-dim)"} onMouseLeave={e => e.currentTarget.style.color = "var(--text-faint)"} >← Home {eyebrow}

{title}

{sub &&

{sub}

} {children}
); // ─── SERVICES PAGE ──────────────────────────────────────────────────────────── const DASHBOARD_API = 'https://aura.auraajenticai.cloud'; const ServicesPage = ({ lang }) => { const D = PORTFOLIO_DATA; const [active, setActive] = React.useState(null); const [svcLinks, setSvcLinks] = React.useState({}); // Fetch demo/repo overrides from Dashboard (stale-while-revalidate) React.useEffect(() => { const CACHE_KEY = 'aura_svc_links_v2'; const CACHE_TTL = 10 * 60 * 1000; try { const cached = sessionStorage.getItem(CACHE_KEY); if (cached) { const { data, ts } = JSON.parse(cached); if (Date.now() - ts < CACHE_TTL) { setSvcLinks(data); return; } } } catch {} fetch(`${DASHBOARD_API}/api/public/services`, { signal: AbortSignal.timeout(3000) }) .then(r => r.ok ? r.json() : null) .then(data => { if (Array.isArray(data)) { const map = {}; data.forEach(s => { if (s.id) map[s.id] = { demo: s.demo, repo: s.repo }; }); setSvcLinks(map); sessionStorage.setItem(CACHE_KEY, JSON.stringify({ data: map, ts: Date.now() })); } }) .catch(() => {}); }, []); return (
Services that ship — not decks that pitch} sub="Every engagement ends with production code. No retainers for decks. No sprints for prototypes that never deploy." />
{D.services.map((svc, i) => { const c = COLOR_MAP[svc.color] || COLOR_MAP.violet; const isOpen = active === svc.id; const demo = (svcLinks[svc.id]?.demo) || svc.demo; const repo = (svcLinks[svc.id]?.repo) || svc.repo; const isNew = !!svc.badge; return (
setActive(isOpen ? null : svc.id)} > {/* Header row */}
0{i + 1}

{lang === "bn" && svc.nameBn ? svc.nameBn : svc.name}

{isNew && ( {svc.badge} )}
{svc.kind}
{svc.impact.primary}
{svc.impact.secondary}
+
{/* Expanded content */} {isOpen && (

{svc.description}

{svc.highlights && (
    {svc.highlights.map((h, hi) => (
  • ✓ {h}
    • ))}
)}
Stack
{svc.stack.map(s => ( {s} ))}
{/* Demo / Repo links */} {(demo || repo) && ( )} e.stopPropagation()} style={{ alignSelf: "flex-start", padding: "10px 20px", background: "var(--text)", color: "var(--bg)", borderRadius: 9, fontSize: 13.5, fontWeight: 500, textDecoration: "none", marginTop: "auto", }} >Get a Quote →
)}
); })}
); }; // ─── STACK PAGE ────────────────────────────────────────────────────────────── const StackPage = () => { const D = PORTFOLIO_DATA; const cats = Object.entries(D.stack); const [activeTab, setActiveTab] = React.useState(cats[0][0]); const skills = cats.find(([k]) => k === activeTab)?.[1] || []; return (
Tools we wield daily} sub="Production-tested across 40+ agents, 12 enterprise clients, and 7 years of shipping real systems." />
{/* Tab bar */}
{cats.map(([cat]) => ( ))}
{/* Skill bars */}
{skills.map((s, i) => (
{s.name} {s.level}%
))}
); }; // ─── AGENTS PAGE ───────────────────────────────────────────────────────────── const AgentsPage = () => (
Agents that act — not chat} sub="Every agent we ship has tool access, memory, retry logic, and an audit trail. Live demo below." />
); // ─── TIMELINE PAGE ─────────────────────────────────────────────────────────── const TimelinePage = () => { const D = PORTFOLIO_DATA; return (
{D.experience.map((exp, i) => (
{exp.year}
{exp.role} {exp.kind}
{exp.company}

{exp.detail}

))}
); }; // ─── CONTACT PAGE ───────────────────────────────────────────────────────────── const ContactPage = ({ lang }) => { const [sent, setSent] = React.useState(false); const [form, setForm] = React.useState({ name: "", email: "", service: "", message: "" }); const [loading, setLoading] = React.useState(false); const handleSubmit = async (e) => { e.preventDefault(); setLoading(true); try { const res = await fetch(`${DASHBOARD_API}/api/public/contact`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(form), signal: AbortSignal.timeout(8000), }); if (res.ok) { setSent(true); } else { alert('Something went wrong. Please email us directly at hello@auraajenticai.cloud'); } } catch { alert('Could not send message. Please email us at hello@auraajenticai.cloud'); } setLoading(false); }; const services = PORTFOLIO_DATA.services.map(s => s.name); return (
{/* Left info */}
{[ { label: "Email", value: "hello@auraajenticai.cloud", href: "mailto:hello@auraajenticai.cloud" }, { label: "Response time", value: "< 24 hours" }, { label: "Location", value: "Dhaka, Bangladesh · Remote" }, { label: "Availability", value: "Open to new projects" }, ].map(item => (
{item.label}
{item.href ? {item.value} :
{item.value}
}
))}
{/* Contact form */} {sent ? (
✓

Message sent!

We'll get back to you within 24 hours.

) : (
{[ { key: "name", label: "Your name", type: "text", placeholder: "Jane Smith" }, { key: "email", label: "Email", type: "email", placeholder: "jane@company.com" }, ].map(f => (
setForm(p => ({ ...p, [f.key]: e.target.value }))} style={{ width: "100%", padding: "11px 14px", background: "var(--bg-elev)", border: "1px solid var(--line)", borderRadius: 9, color: "var(--text)", fontSize: 14.5, fontFamily: "var(--font-sans)", outline: "none", boxSizing: "border-box", }} />
))}