import React from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Check, Cpu, Bot, Gauge, Move, Settings, Shield, Globe2, LineChart, Workflow, Rocket, Network, DollarSign, Headphones, Briefcase, BookOpen, Contact, Sparkles } from "lucide-react";
// Single-file landing page for Advanced Autonomics (marketing site)
// Notes:
// - E-commerce will live on a separate site (Robocrafter). This page positions AA as the one-stop provider.
// - Sales model: success-based reps + network of Advanced Autonomics Certified Service Providers (AACSPs).
// - 3D Sales System + AI Agents for configuration and support.
export default function AdvancedAutonomicsSite() {
return (
<div className="min-h-screen bg-gradient-to-b from-slate-50 to-white text-slate-900">
<SiteHeader />
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<Hero />
<TrustBar />
<Products />
<Solutions />
<Platform3D />
<Agents />
<Services />
<SalesModel />
<PartnerProgram />
<Outcomes />
<CTA />
</main>
<SiteFooter />
</div>
);
}
function SiteHeader() {
return (
<header className="sticky top-0 z-40 bg-white/70 backdrop-blur-md border-b border-slate-200">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
<div className="flex items-center gap-2">
<div className="h-8 w-8 rounded-xl bg-slate-900 text-white grid place-items-center font-bold">AA</div>
<span className="font-semibold">Advanced Autonomics</span>
</div>
<nav className="hidden md:flex items-center gap-6 text-sm">
<a href="#products" className="hover:text-slate-700">Products</a>
<a href="#solutions" className="hover:text-slate-700">Solutions</a>
<a href="#platform3d" className="hover:text-slate-700">3D Sales</a>
<a href="#agents" className="hover:text-slate-700">AI Agents</a>
<a href="#services" className="hover:text-slate-700">Services</a>
<a href="#sales" className="hover:text-slate-700">Sales Model</a>
<a href="#partners" className="hover:text-slate-700">Partners</a>
<a href="#contact" className="hover:text-slate-700">Contact</a>
</nav>
<div className="flex items-center gap-3">
<Button className="hidden sm:inline-flex" variant="outline" asChild>
<a href="#contact">Talk to an AI Agent</a>
</Button>
<Button asChild>
<a href="#platform3d">Launch 3D Demo</a>
</Button>
</div>
</div>
</header>
);
}
function Hero() {
return (
<section className="py-16 sm:py-24">
<div className="grid lg:grid-cols-2 gap-10 items-center">
<div>
<h1 className="text-4xl sm:text-5xl font-extrabold tracking-tight ">
The Complete <span className="text-slate-900">Automation Ecosystem</span>
</h1>
<p className="mt-4 text-lg text-slate-600">
Turnkey robot packages that combine <strong>industrial robots</strong>, <strong>AMRs</strong>,
<strong> AI control</strong>, <strong>software</strong>, and <strong>services</strong> — engineered for ROI in under 2 years.
</p>
<ul className="mt-6 grid sm:grid-cols-2 gap-3 text-slate-700">
{[
"2–5 year product guarantees",
"–30 day cash conversion cycle for projects",
"76% gross margin systems",
"30–50% manufacturing cost reduction",
].map((t) => (
<li key={t} className="flex items-center gap-2"><Check className="h-5 w-5" />{t}</li>
))}
</ul>
<div className="mt-8 flex gap-3">
<Button asChild>
<a href="#platform3d">Try 3D Sales System</a>
</Button>
<Button variant="outline" asChild>
<a href="#products">Explore Products</a>
</Button>
</div>
</div>
<div className="relative">
<div className="aspect-video rounded-2xl bg-slate-900/90 shadow-xl grid place-items-center text-white">
<div className="text-center p-6">
<Sparkles className="mx-auto mb-4 h-10 w-10" />
<p className="font-semibold">Interactive 3D Configurator (Preview)</p>
<p className="text-slate-300 mt-1">Configure AMRs, payloads, sensors, and fleet size — guided by AI.</p>
</div>
</div>
<div className="absolute -bottom-6 -left-6 bg-white rounded-2xl shadow-md p-4 border border-slate-200">
<div className="flex items-center gap-3">
<div className="h-10 w-10 rounded-full bg-slate-900 text-white grid place-items-center">AI</div>
<div>
<p className="text-sm font-medium">AA Agent</p>
<p className="text-xs text-slate-600">“I’ve sized a 12-AMR fleet for your 18k m² warehouse.”</p>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
function TrustBar() {
const items = [
{ icon: Shield, label: "2–5 Year Guarantee" },
{ icon: LineChart, label: "ROI < 24 Months" },
{ icon: Globe2, label: "Global Presence" },
{ icon: Workflow, label: "End-to-End Delivery" },
];
return (
<section className="py-6">
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
{items.map(({ icon: Icon, label }) => (
<Card key={label} className="border-slate-200">
<CardContent className="flex items-center gap-3 p-4">
<Icon className="h-5 w-5" />
<span className="text-sm font-medium">{label}</span>
</CardContent>
</Card>
))}
</div>
</section>
);
}
function Products() {
const items = [
{
icon: Move,
title: "Autonomous Mobile Robots (AMRs)",
desc: "Modular AMRs for logistics & manufacturing — payloads, lifts, tow, conveyors, and custom top modules.",
bullets: ["Fleet AI & traffic orchestration", "Safety-certified sensors", "Hot-swap batteries"],
},
{
icon: Cpu,
title: "Industrial Robots",
desc: "AI-guided robotic cells for assembly, handling, pick & place, and inspection.",
bullets: ["Vision + force control", "Quick-change end effectors", "Simulation to deployment"],
},
{
icon: Bot,
title: "Service Robots",
desc: "Autonomous service platforms for healthcare, hospitality, and facilities.",
bullets: ["Mapping & navigation", "Human-safe operation", "24/7 duty cycles"],
},
{
icon: Settings,
title: "Control Software",
desc: "Unified control platform with AI planners, digital twins, and predictive maintenance.",
bullets: ["REST & OPC-UA APIs", "3rd-party robot integration", "Analytics & dashboards"],
},
];
return (
<section id="products" className="py-20">
<div className="mb-10">
<h2 className="text-3xl font-bold">Products</h2>
<p className="text-slate-600 mt-2">A single catalog for robots, AMRs, software, and turnkey cells — engineered to work together.</p>
</div>
<div className="grid md:grid-cols-2 xl:grid-cols-4 gap-6">
{items.map(({ icon: Icon, title, desc, bullets }) => (
<Card key={title} className="hover:shadow-lg transition-shadow">
<CardHeader>
<div className="flex items-center gap-3">
<Icon className="h-6 w-6" />
<CardTitle className="text-lg">{title}</CardTitle>
</div>
</CardHeader>
<CardContent>
<p className="text-sm text-slate-600 mb-4">{desc}</p>
<ul className="space-y-2 text-sm">
{bullets.map((b) => (
<li key={b} className="flex gap-2"><Check className="h-4 w-4 mt-0.5" />{b}</li>
))}
</ul>
</CardContent>
</Card>
))}
</div>
</section>
);
}
function Solutions() {
const items = [
{ title: "Factories", text: "Line automation, machine tending, palletizing, inspection, traceability." },
{ title: "Warehouses", text: "AMR fleets, goods-to-person, cross-docking, staging, inventory." },
{ title: "Hospitals", text: "Service robots for delivery, sanitation, and asset transport." },
{ title: "Hospitality & Facilities", text: "Autonomous cleaning, delivery, guest-assist solutions." },
];
return (
<section id="solutions" className="py-16">
<div className="mb-10">
<h2 className="text-3xl font-bold">Solutions</h2>
<p className="text-slate-600 mt-2">Industry-tailored deployments with guaranteed outcomes and lifecycle support.</p>
</div>
<div className="grid md:grid-cols-2 gap-6">
{items.map((x) => (
<Card key={x.title}>
<CardHeader>
<CardTitle className="text-lg">{x.title}</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm text-slate-600">{x.text}</p>
</CardContent>
</Card>
))}
</div>
</section>
);
}
function Platform3D() {
return (
<section id="platform3d" className="py-20">
<div className="mb-8">
<h2 className="text-3xl font-bold">3D Sales System</h2>
<p className="text-slate-600 mt-2">Configure robots and AMR fleets in an interactive 3D environment. Our AI Agent sizes payloads, routes, and fleet constraints automatically.</p>
</div>
<div className="grid lg:grid-cols-2 gap-6 items-stretch">
<Card className="h-full">
<CardHeader>
<CardTitle className="text-lg flex items-center gap-2"><Gauge className="h-5 w-5"/> Live Configurator (Mock)</CardTitle>
</CardHeader>
<CardContent>
<div className="aspect-video rounded-xl border border-dashed border-slate-300 grid place-items-center text-slate-500">
<span>3D viewport placeholder — connect to your WebGL/three.js app</span>
</div>
<div className="mt-4 grid grid-cols-2 gap-3 text-sm">
<div className="space-y-2">
<label className="block text-slate-600">Payload</label>
<select className="w-full border rounded-xl p-2">
<option>100 kg</option>
<option>300 kg</option>
<option>600 kg</option>
</select>
</div>
<div className="space-y-2">
<label className="block text-slate-600">Top Module</label>
<select className="w-full border rounded-xl p-2">
<option>Conveyor</option>
<option>Lift</option>
<option>Tow hitch</option>
</select>
</div>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="text-lg flex items-center gap-2"><Rocket className="h-5 w-5"/> Auto-Spec by AI Agent</CardTitle>
</CardHeader>
<CardContent>
<ul className="space-y-3 text-sm">
{[
"12 AMRs recommended for 18k m² facility; expected throughput +42%",
"Traffic orchestration with dynamic zone control",
"Battery swap every 6 hours; 2 chargers per 10 units",
"Payback in ~18 months; TCO reduced by 37%",
].map((t) => (
<li key={t} className="flex gap-2"><Check className="h-4 w-4 mt-0.5" />{t}</li>
))}
</ul>
<div className="mt-6 flex gap-3">
<Button>Export Spec</Button>
<Button variant="outline">Request Proposal</Button>
</div>
</CardContent>
</Card>
</div>
</section>
);
}
function Agents() {
return (
<section id="agents" className="py-16">
<div className="mb-8">
<h2 className="text-3xl font-bold">AI Agents & Bots</h2>
<p className="text-slate-600 mt-2">Always-on assistance: prospecting, qualification, configuration, quoting, and post-sale support — no traditional sales hires required.</p>
</div>
<div className="grid md:grid-cols-3 gap-6">
{[{
icon: Network, title: "Autonomous Lead Gen", text: "AI scouts opportunities, validates legitimacy, and onboards qualified buyers."},
{icon: DollarSign, title: "Success-Based Sales", text: "Commission-only partner reps augmented by AA Agents for demos and quotes."},
{icon: Headphones, title: "24/7 Support Bots", text: "Troubleshooting, RMA, spare parts, and predictive alerts."},
]).map((x) => (
<Card key={x.title}>
<CardHeader>
<div className="flex items-center gap-2">
<x.icon className="h-5 w-5" />
<CardTitle className="text-lg">{x.title}</CardTitle>
</div>
</CardHeader>
<CardContent>
<p className="text-sm text-slate-600">{x.text}</p>
</CardContent>
</Card>
))}
</div>
</section>
);
}
function Services() {
const items = [
{ icon: Briefcase, title: "Consulting & Design", text: "Process mapping, simulation, and automation design." },
{ icon: WrenchIcon, title: "Deployment", text: "Installation, integration, and commissioning." },
{ icon: Shield, title: "Lifecycle & Guarantees", text: "Predictive maintenance and 2–5 year guarantees." },
];
return (
<section id="services" className="py-16">
<div className="mb-8">
<h2 className="text-3xl font-bold">Services</h2>
<p className="text-slate-600 mt-2">End-to-end delivery with measurable outcomes and guaranteed uptime.</p>
</div>
<div className="grid md:grid-cols-3 gap-6">
{items.map(({icon: Icon, title, text}) => (
<Card key={title}>
<CardHeader>
<div className="flex items-center gap-2">
<Icon className="h-5 w-5" />
<CardTitle className="text-lg">{title}</CardTitle>
</div>
</CardHeader>
<CardContent>
<p className="text-sm text-slate-600">{text}</p>
</CardContent>
</Card>
))}
</div>
</section>
);
}
function SalesModel() {
return (
<section id="sales" className="py-16">
<div className="mb-8">
<h2 className="text-3xl font-bold">A Different Sales Model</h2>
<p className="text-slate-600 mt-2">We don’t build a traditional sales & marketing headcount. Instead, we scale through <strong>success-based sales reps</strong> and a global network of <strong>Advanced Autonomics Certified Service Providers</strong> (AACSPs), orchestrated by AI Agents.</p>
</div>
<div className="grid md:grid-cols-2 gap-6">
<Card>
<CardHeader>
<CardTitle className="text-lg flex items-center gap-2"><BookOpen className="h-5 w-5"/> Success-Based Reps</CardTitle>
</CardHeader>
<CardContent>
<ul className="space-y-2 text-sm">
<li className="flex gap-2"><Check className="h-4 w-4 mt-0.5"/>Commission-only; AI-powered demo & quoting tools</li>
<li className="flex gap-2"><Check className="h-4 w-4 mt-0.5"/>Performance transparency via partner dashboards</li>
<li className="flex gap-2"><Check className="h-4 w-4 mt-0.5"/>No fixed sales payroll; scalable globally</li>
</ul>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="text-lg flex items-center gap-2"><Network className="h-5 w-5"/> AACSP Network</CardTitle>
</CardHeader>
<CardContent>
<ul className="space-y-2 text-sm">
<li className="flex gap-2"><Check className="h-4 w-4 mt-0.5"/>Certified integrators for install & service</li>
<li className="flex gap-2"><Check className="h-4 w-4 mt-0.5"/>SLA-backed maintenance & uptime guarantees</li>
<li className="flex gap-2"><Check className="h-4 w-4 mt-0.5"/>Coverage across regions, managed centrally by AI</li>
</ul>
</CardContent>
</Card>
</div>
</section>
);
}
function Outcomes() {
const stats = [
{ label: "Gross Margin", value: "~76%" },
{ label: "Customer Payback", value: "< 24 mo" },
{ label: "Cost Reduction", value: "30–50%" },
{ label: "Guarantee", value: "2–5 years" },
];
return (
<section className="py-16">
<div className="mb-8">
<h2 className="text-3xl font-bold">Outcomes That Matter</h2>
<p className="text-slate-600 mt-2">We engineer for measurable ROI — profitability for customers and a capital-efficient scale model for us.</p>
</div>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
{stats.map((s) => (
<Card key={s.label}>
<CardContent className="p-6 text-center">
<div className="text-3xl font-extrabold">{s.value}</div>
<div className="mt-1 text-sm text-slate-600">{s.label}</div>
</CardContent>
</Card>
))}
</div>
</section>
);
}
function CTA() {
return (
<section id="contact" className="py-20">
<Card className="border-slate-200">
<CardContent className="p-8 lg:p-12 text-center">
<h3 className="text-2xl font-bold">Ready to spec your automation?</h3>
<p className="mt-2 text-slate-600">Connect with our AI Agent for an initial configuration and ROI preview within minutes.</p>
<div className="mt-6 flex justify-center gap-3">
<Button>Chat with AI Agent</Button>
<Button variant="outline">Book a Technical Session</Button>
</div>
</CardContent>
</Card>
</section>
);
}
function SiteFooter() {
return (
<footer className="border-t border-slate-200 mt-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 text-sm text-slate-600 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div className="flex items-center gap-2">
<div className="h-8 w-8 rounded-xl bg-slate-900 text-white grid place-items-center font-bold">AA</div>
<div>
<div className="font-semibold text-slate-900">Advanced Autonomics</div>
<div>Robotics • AMR • AI • Software • Services</div>
</div>
</div>
<div className="flex flex-wrap gap-4">
<a href="#products">Products</a>
<a href="#solutions">Solutions</a>
<a href="#platform3d">3D Sales</a>
<a href="#agents">AI Agents</a>
<a href="#services">Services</a>
<a href="#sales">Sales Model</a>
<a href="#contact">Contact</a>
</div>
</div>
</footer>
);
}
// Local icon for wrench (to keep imports tidy)
function WrenchIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
<path d="M14.7 6.3a4 4 0 0 0-5.4 5.4l-6.3 6.3a2 2 0 1 0 2.8 2.8l6.3-6.3a4 4 0 0 0 5.4-5.4l-2.1 2.1-2.8-2.8 2.1-2.1z" />
</svg>
);
}