From 151e91fb992816c19d8da15d9ad1e981018722d7 Mon Sep 17 00:00:00 2001 From: khondokartowsif171 Date: Tue, 26 May 2026 02:47:52 +0600 Subject: [PATCH] feat(phase-2): SEO structured data, dynamic meta, service detail pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - index.html: JSON-LD Organization + Services ItemList schema, Plausible Analytics, canonical link - app.jsx: dynamic document.title + meta description/OG per hash route; service detail routing (services/:id → ServiceDetailPage) - pages.jsx: ServiceDetailPage with hero, metric, use cases (3 per service), process timeline, highlights, and CTA; registered on window Co-Authored-By: Claude Sonnet 4.6 --- .gitignore | 2 + index.html | 115 ++++++++++++++++++++++ src/app.jsx | 63 ++++++++++++ src/pages.jsx | 264 ++++++++++++++++++++++++++++++++++++++++++++++++-- 4 files changed, 437 insertions(+), 7 deletions(-) diff --git a/.gitignore b/.gitignore index 08e7dfc..4e4baff 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,5 @@ Thumbs.db *.log node_modules/ + +.vercel diff --git a/index.html b/index.html index e0b2a9a..db0e577 100644 --- a/index.html +++ b/index.html @@ -15,9 +15,124 @@ + + + + + + + + + + diff --git a/src/app.jsx b/src/app.jsx index b42800e..84ba1c8 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -71,6 +71,60 @@ function App() { document.documentElement.style.setProperty("--accent-glow", tweaks.accent + "59"); }, [tweaks.accent, tweaks.accent2]); + // Dynamic meta tags per route + React.useEffect(() => { + const BASE = 'Aura Agentic AI'; + const SERVICE_IDS = (PORTFOLIO_DATA.services || []).reduce((m, s) => { + m['services/' + s.id] = { title: `${s.name} — ${BASE}`, desc: s.description }; + return m; + }, {}); + const META = { + '': { + title: `${BASE} — AI Agents, Automation & Full-Stack Dev`, + desc: 'We build custom AI agents, automation pipelines, Web3 infrastructure, MT5 trading systems, and enterprise web apps. Based in Dhaka, serving clients worldwide.', + }, + services: { + title: `Services — ${BASE}`, + desc: 'AI agents, web development, Web3, MT5 trading automation, data pipelines, DevOps, and Meta Ads AI — 7 production-ready services that ship to production.', + }, + stack: { + title: `Tech Stack — ${BASE}`, + desc: 'Production-tested stack: React, SvelteKit, Next.js, Node.js, Python, Anthropic Claude, n8n, Solidity, Docker, and more — across 40+ production agents.', + }, + agents: { + title: `AI Agents — ${BASE}`, + desc: 'Live demos of AI agents built with Anthropic Claude, LangGraph, and n8n. Agents that triage, decide, and execute with tool access, memory, and audit trails.', + }, + timeline: { + title: `Experience — ${BASE}`, + desc: '7 years of shipping production AI systems — from fintech infrastructure to MT5 trading bots to founding Aura Agentic AI in Dhaka, Bangladesh.', + }, + contact: { + title: `Contact — ${BASE}`, + desc: 'Get a quote for AI agents, automation, web development, Web3, or MT5 trading systems. Based in Dhaka, Bangladesh. Response within 24 hours.', + }, + pricing: { + title: `Pricing — ${BASE}`, + desc: 'Transparent pricing for AI agents, automation, and full-stack development. Starter, Growth, and Enterprise tiers. Fixed scope, no surprises.', + }, + blog: { + title: `Blog — ${BASE}`, + desc: 'Technical deep-dives on building AI agents, MT5 Expert Advisors, Meta Ads automation, and the infrastructure behind Aura Agentic AI.', + }, + ...SERVICE_IDS, + }; + + const m = META[route] || META['']; + document.title = m.title; + const setMeta = (sel, val) => { const el = document.querySelector(sel); if (el) el.setAttribute('content', val); }; + setMeta('meta[name="description"]', m.desc); + setMeta('meta[property="og:title"]', m.title); + setMeta('meta[property="og:description"]', m.desc); + setMeta('meta[property="og:url"]', `https://auraajenticai.cloud/${route ? '#/' + route : ''}`); + setMeta('meta[name="twitter:title"]', m.title); + setMeta('meta[name="twitter:description"]', m.desc); + }, [route]); + // scroll reveal (re-run on route change) React.useEffect(() => { const els = document.querySelectorAll(".reveal"); @@ -92,6 +146,15 @@ function App() { }; const renderPage = () => { + // Service detail pages: #/services/:id + if (route.startsWith('services/')) { + const id = route.slice('services/'.length); + const svc = (PORTFOLIO_DATA.services || []).find(s => s.id === id); + if (svc) return ; + window.location.hash = '#/services'; + return null; + } + switch (route) { case 'services': return ; diff --git a/src/pages.jsx b/src/pages.jsx index aab89c9..3c37e2b 100644 --- a/src/pages.jsx +++ b/src/pages.jsx @@ -800,10 +800,260 @@ const BlogPage = () => { ); }; -window.ServicesPage = ServicesPage; -window.StackPage = StackPage; -window.AgentsPage = AgentsPage; -window.TimelinePage = TimelinePage; -window.ContactPage = ContactPage; -window.PricingPage = PricingPage; -window.BlogPage = BlogPage; +// ─── SERVICE DETAIL PAGE ────────────────────────────────────────────────────── + +const SVC_EXTRA = { + 'web-app-dev': { + useCases: [ + { icon: '🛒', title: 'E-commerce & Marketplace', body: 'Product catalogs, cart flows, payment integrations, and seller dashboards — all built to handle real traffic from day one.' }, + { icon: '📊', title: 'SaaS Dashboards', body: 'Multi-tenant apps with role-based access, live data, Stripe billing, and the kind of UX that keeps customers from churning.' }, + { icon: '🚀', title: 'Landing Pages that Convert', body: 'Fast, opinionated landing pages with A/B-ready structures — we\'ve seen >5% conversion on cold paid traffic.' }, + ], + process: ['Scope & wireframe in Figma (3–5 days)', 'Build core flows, DB schema, auth (2–4 weeks)', 'QA, performance audit, deploy to production'], + }, + 'ai-agent-automation': { + useCases: [ + { icon: '💬', title: 'Customer Support Triage', body: 'Agents that classify, route, and draft responses for support tickets — cutting first-response time from hours to seconds.' }, + { icon: '📈', title: 'Internal Reporting & Analysis', body: 'Agents that pull data from your tools, summarize it, and push scheduled reports to Slack or email — no analyst required.' }, + { icon: '🎯', title: 'Lead Qualification & CRM Automation', body: 'AI that scores inbound leads, enriches profiles, and books meetings without a human touching the pipeline.' }, + ], + process: ['Define the agent\'s scope and tool integrations (1–3 days)', 'Build, prompt-engineer, and eval the agent (1–3 weeks)', 'Deploy with monitoring, retry logic, and a kill switch'], + }, + 'web3-blockchain': { + useCases: [ + { icon: '🔐', title: 'DAO & Multi-sig Interfaces', body: 'Governance UIs, proposal voting, and treasury management — making on-chain decisions feel as simple as a web form.' }, + { icon: '🖼️', title: 'NFT Minting & Marketplace', body: 'ERC-721/1155 contracts, lazy minting, royalty enforcement, and storefront UIs that don\'t look like it\'s 2021.' }, + { icon: '🌉', title: 'Cross-chain Bridges & Gasless UX', body: 'Bridge infrastructure with abstract-away gas complexity — users just click "confirm" without touching ETH.' }, + ], + process: ['Contract design & security review (3–5 days)', 'Smart contract deployment + frontend integration (2–4 weeks)', 'Audit, testnet, mainnet launch'], + }, + 'mt5-ea-trading': { + useCases: [ + { icon: '📉', title: 'Automated Trading Strategies', body: 'Trend-following, mean-reversion, and multi-symbol EAs with hard risk limits, drawdown stops, and real-time alerts.' }, + { icon: '🏦', title: 'Prop Firm Dashboards', body: 'Live P&L tracking, account-level risk envelopes, one-click kill switches, and challenge-pass analytics for prop trading firms.' }, + { icon: '📋', title: 'Copy Trading Infrastructure', body: 'Master-slave signal distribution across hundreds of follower accounts with sub-100ms latency and full trade history.' }, + ], + process: ['Strategy specification & backtest design (2–5 days)', 'MQL5 development, forward test on demo (1–3 weeks)', 'Live deployment with monitoring and kill switches'], + }, + 'scraping-data-pipeline': { + useCases: [ + { icon: '🏷️', title: 'Competitor Price Monitoring', body: 'Real-time price intelligence across thousands of SKUs — normalized, deduplicated, and delivered to your dashboard or DB.' }, + { icon: '🏘️', title: 'Real Estate & Listing Aggregation', body: 'Multi-source property data collected, structured, and refreshed on schedule — feeding analytics or ML models.' }, + { icon: '💹', title: 'Financial Data ETL', body: 'Earnings reports, regulatory filings, and market data extracted from public sources and piped into your warehouse.' }, + ], + process: ['Site analysis & proxy strategy (1–2 days)', 'Scraper build with error handling & rotation (1–2 weeks)', 'ETL pipeline, scheduling, and delivery to your DB'], + }, + 'infra-devops': { + useCases: [ + { icon: '💸', title: 'Cut Cloud Bills by 60%+', body: 'Move from AWS/GCP managed services to self-hosted Coolify on a bare-metal VPS — same reliability, fraction of the cost.' }, + { icon: '🔄', title: 'Zero-downtime CI/CD Pipelines', body: 'GitHub Actions → Docker → Traefik with blue/green deploys, automatic SSL, and rollback on health-check failure.' }, + { icon: '🔭', title: 'Observability for AI Workloads', body: 'Structured logging, Prometheus metrics, and alerting for long-running agent tasks — know before your users do.' }, + ], + process: ['Audit current infra and cost (1 day)', 'Provision, configure, migrate (3–7 days)', 'CI/CD setup, monitoring, runbook handoff'], + }, + 'meta-ads-ai': { + useCases: [ + { icon: '🛍️', title: 'E-commerce Scaling ($10k+/mo spend)', body: 'AI that manages bid adjustments, budget reallocation, and creative rotation across campaigns — every 15 minutes, not twice a day.' }, + { icon: '🏢', title: 'Agencies with Multiple Client Accounts', body: 'One AI system managing dozens of accounts simultaneously, surfacing anomalies and generating client-ready reports automatically.' }, + { icon: '📣', title: 'Product Launches & Rapid Testing', body: '100+ ad variants generated and tested by AI in the first 48 hours — finding your winning creative before your budget runs out.' }, + ], + process: ['Connect Meta Ads API + brief the AI on goals (1 day)', 'Deploy optimization agent, set guardrails & budget caps (2–3 days)', 'Monitor KPIs, iterate on creative strategy weekly'], + }, +}; + +const ServiceDetailPage = ({ svc }) => { + const extra = SVC_EXTRA[svc.id] || {}; + const c = COLOR_MAP[svc.color] || COLOR_MAP.violet; + const demo = svc.demo; + const repo = svc.repo; + + return ( +
+ +
+ {demo && ( + + + + + Live Demo + + )} + Get a Quote → +
+ + + {/* Impact metric + stack */} +
+
+
+
+
Key metric
+
{svc.impact.primary}
+
{svc.impact.secondary}
+
+
+
Stack
+
+ {svc.stack.map(s => ( + {s} + ))} +
+
+
+
+
+ + {/* Highlights */} + {svc.highlights && ( +
+
+
What's included
+
+ {svc.highlights.map((h, i) => ( +
+ ✓ + {h} +
+ ))} +
+
+
+ )} + + {/* Use cases */} + {extra.useCases && ( +
+
+
Use cases
+

+ Who hires us for this +

+
+ {extra.useCases.map((uc, i) => ( +
+
{uc.icon}
+

{uc.title}

+

{uc.body}

+
+ ))} +
+
+
+ )} + + {/* Process */} + {extra.process && ( +
+
+
Process
+

+ How we work +

+
+ {extra.process.map((step, i) => ( +
+
{i + 1}
+

{step}

+
+ ))} +
+
+
+ )} + + {/* CTA */} +
+
+
+
+

+ Ready to ship {svc.name}? +

+

+ Describe your project — we'll respond within 24 hours with a scoped proposal. +

+
+ +
+
+
+ + +
+ ); +}; + +window.ServicesPage = ServicesPage; +window.StackPage = StackPage; +window.AgentsPage = AgentsPage; +window.TimelinePage = TimelinePage; +window.ContactPage = ContactPage; +window.PricingPage = PricingPage; +window.BlogPage = BlogPage; +window.ServiceDetailPage = ServiceDetailPage;