const { useState, useEffect, useRef, useCallback } = React;
// ─── Icons ───
const ChevronDown = ({ size = 16 }) => (
{ setPage("home"); setOpenDropdown(null); }}>
Dragoo n
toggleDropdown("platform")}>
Platform
{ setPage("platform"); setOpenDropdown(null); }}>Overview
{modules.map(m => (
{ setPage(m.key); setOpenDropdown(null); }}>
{m.name}
{m.comingSoon && Soon }
))}
toggleDropdown("solutions")}>
Solutions
{ setPage("solutions"); setOpenDropdown(null); }}>Overview
{solutions.map(s => (
{ setPage(s.key); setOpenDropdown(null); }}>
{s.name}
))}
toggleDropdown("resources")}>
Resources
{ setPage("resources"); setOpenDropdown(null); }}>Overview
{ setPage("blog"); setOpenDropdown(null); }}>Blog
{ setPage("guides"); setOpenDropdown(null); }}>Guides
{ setPage("faqs"); setOpenDropdown(null); }}>FAQs
{ setPage("updates"); setOpenDropdown(null); }}>Product Updates
{ setPage("pricing"); setOpenDropdown(null); }}>Pricing
toggleDropdown("about")}>
About
{ setPage("about"); setOpenDropdown(null); }}>About Dragoon
{ setPage("contact"); setOpenDropdown(null); }}>Contact
Sign in
setPage("contact")}>Book a demo
setMobileOpen(true)}>
{/* Mobile drawer */}
{ setPage("home"); closeMobileDrawer(); }}>Home
toggleMobileSection("platform")}>
Platform
{ setPage("platform"); closeMobileDrawer(); }}>
Overview
{modules.map((m) => (
{ setPage(m.key); closeMobileDrawer(); }}>
{m.name}
{m.comingSoon && Soon }
))}
toggleMobileSection("solutions")}>
Solutions
{ setPage("solutions"); closeMobileDrawer(); }}>
Overview
{solutions.map((s) => (
{ setPage(s.key); closeMobileDrawer(); }}>
{s.name}
))}
toggleMobileSection("resources")}>
Resources
{ setPage("resources"); closeMobileDrawer(); }}>
Overview
{ setPage("blog"); closeMobileDrawer(); }}>
Blog
{ setPage("guides"); closeMobileDrawer(); }}>
Guides
{ setPage("faqs"); closeMobileDrawer(); }}>
FAQs
{ setPage("updates"); closeMobileDrawer(); }}>
Product Updates
{ setPage("pricing"); closeMobileDrawer(); }}>Pricing
toggleMobileSection("about")}>
About
{ setPage("about"); closeMobileDrawer(); }}>
About Dragoon
{ setPage("contact"); closeMobileDrawer(); }}>
Contact
{ setPage("contact"); closeMobileDrawer(); }}>Book a demo
);
}
function Footer({ setPage }) {
return (
);
}
// ─── Reusable Page Hero Visual ───
function PageHeroVisual({ type, items, metrics }) {
if (type === "features") {
return (
{items && items.map((item, i) => (
))}
);
}
if (type === "metrics") {
return (
{metrics && metrics.map((m, i) => (
))}
{[40, 65, 50, 80, 55, 70, 45, 85, 60, 75].map((h, i) => (
))}
);
}
if (type === "cards") {
return (
{items && items.map((item, i) => (
{item.icon ||
{item.title}
{item.sub &&
{item.sub}
}
))}
);
}
return null;
}
// ─── Page: Home ───
function ShowcaseSection() {
const sectionRef = useRef(null);
const itemRefs = useRef([]);
const [activeIdx, setActiveIdx] = useState(0);
const [progressStyle, setProgressStyle] = useState({ top: 10, height: 24 });
const items = [
{
title: "Workspace visibility",
desc: "Preview project and task views designed for execution clarity.",
variant: "workspace",
render: () => (
<>
ACTIVE PROJECTS 24
TEAM MEMBERS 148
OKR PROGRESS 73%
ENGAGEMENT 4.2
),
},
{
title: "People operations",
desc: "See employee, leave and overtime workflows in a more structured system.",
variant: "operations",
render: () => (
{[
["Annual Leave", "Approved"],
["Overtime Entry", "Pending"],
["Sick Leave", "Approved"],
["Policy Update", "Review"],
].map((row) => (
{row[0]}
People Operations
{row[1]}
))}
{[
["Q2 Performance Reviews", 78],
["Leadership Goals", 62],
["Skills Progress", 84],
["Succession Plan", 57],
].map((row) => (
))}
Connected Signals
Last 30 days
{[36, 48, 42, 66, 58, 72, 64, 80, 76].map((h, i) => (
),
},
];
useEffect(() => {
const handleScroll = () => {
if (window.innerWidth <= 900) return;
if (!sectionRef.current) return;
const rect = sectionRef.current.getBoundingClientRect();
const sectionHeight = rect.height;
const viewportOffset = -rect.top;
const maxScrollable = Math.max(sectionHeight - window.innerHeight, 1);
const progress = Math.max(0, Math.min(1, viewportOffset / maxScrollable));
const idx = Math.min(
items.length - 1,
Math.max(0, Math.floor(progress * items.length * 0.999)),
);
setActiveIdx((prev) => (prev === idx ? prev : idx));
};
handleScroll();
window.addEventListener("scroll", handleScroll, { passive: true });
window.addEventListener("resize", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
window.removeEventListener("resize", handleScroll);
};
}, [items.length]);
useEffect(() => {
const el = itemRefs.current[activeIdx];
if (!el) return;
setProgressStyle({
top: el.offsetTop + 6,
height: Math.max(el.offsetHeight - 12, 18),
});
}, [activeIdx]);
const handleItemClick = (i) => {
if (!sectionRef.current) return;
if (window.innerWidth <= 900) {
setActiveIdx(i);
return;
}
const sectionTop = sectionRef.current.offsetTop;
const sectionHeight = sectionRef.current.offsetHeight;
const targetProgress = i / items.length + 0.05;
window.scrollTo({
top: sectionTop + (sectionHeight - window.innerHeight) * targetProgress,
behavior: "smooth",
});
};
return (
See Dragoon in action
A connected platform is easier to understand when you can see how workflows, people operations and talent processes come together in practice.
{ itemRefs.current[i] = el; }}
onClick={() => handleItemClick(i)}
>
{item.title}
))}
{items.map((item, i) => (
))}
See Dragoon in action
A connected platform is easier to understand when you can see how workflows, people operations and talent processes come together in practice.
{items.map((item) => (
))}
);
}
function HomePage({ setPage }) {
const [activeTab, setActiveTab] = useState(0);
const mod = modules[activeTab];
const TAB_VISUAL_ROW_COUNT = 6;
const visualRows = [
...mod.features,
...Array(Math.max(0, TAB_VISUAL_ROW_COUNT - mod.features.length)).fill(null),
];
return (
<>
{/* Hero */}
Connected Work, People & AI Platform
Run work, people and performance inone connected system
Dragoon brings project execution, people operations, talent development, engagement and AI into one connected platform. Instead of stitching together disconnected tools, teams can manage workflows, support growth and make better decisions from a shared system.
setPage("contact")}>Book a demo
setPage("platform")}>Explore the platform
{/* Product mockup */}
Organization Overview
{[65, 45, 80, 55, 90, 60, 75, 50, 85, 70].map((h, i) => (
))}
{[{ name: "AK", text: "Completed Q2 review" }, { name: "BT", text: "Updated project status" }, { name: "CS", text: "Submitted OKR draft" }].map((item, i) => (
))}
{/* Value Pillars */}
One platform. More connected decisions.
Built for organizations that need more than separate tools for execution, people operations and performance.
{[
{ title: "Connected by design", desc: "Projects, people operations and talent workflows live in one system instead of separate stacks.", color: "blue" },
{ title: "Built for operational clarity", desc: "Track execution, approvals, feedback and performance with stronger visibility across the organization.", color: "teal" },
{ title: "AI where it adds real value", desc: "Use AI to generate, summarize and support decisions across everyday workflows.", color: "blue" },
].map((item, i) => (
))}
{/* Tabbed Product Architecture */}
A platform built around connected workflows
Explore the core layers of Dragoon, from execution and people operations to talent, engagement, AI and analytics.
{modules.map((m, i) => (
setActiveTab(i)}>
{m.name}
))}
{mod.name} {mod.comingSoon && Coming soon }
{mod.desc}
{mod.features.map(f => (
{mod.outcome}
setPage(mod.key)}>Learn more
{mod.name}
{visualRows.map((f, i) => (
{f ?
{f || "placeholder"}
))}
{/* Why Dragoon */}
Why teams choose Dragoon
Dragoon is built for organizations that want more than disconnected HR, performance and workflow tools.
{[
{ title: "Work and people in one system", desc: "Bring project execution, people operations and talent workflows together instead of managing them across separate platforms." },
{ title: "Operational context, not isolated processes", desc: "Make better decisions with broader visibility across work, people and performance signals." },
{ title: "Embedded AI, not AI as a label", desc: "Apply AI where teams need real leverage: creation, summarization and guided action." },
{ title: "Built for connected intelligence", desc: "Create the foundation for stronger analytics by bringing system-wide signals together over time." },
].map((item, i) => (
{[
{item.title}
{item.desc}
))}
{/* Interface Showcase */}
How Dragoon works
Dragoon connects execution, people workflows and intelligence in a system designed to scale with the organization.
{[
{ n: 1, title: "Connect workflows", desc: "Bring work, people operations and performance processes into one shared system." },
{ n: 2, title: "Capture signals", desc: "Track goals, feedback, approvals, activity and operational changes across teams." },
{ n: 3, title: "Support action", desc: "Use structured workflows and embedded AI to reduce manual effort and improve consistency." },
{ n: 4, title: "Turn data into insight", desc: "Build toward clearer decisions through connected, system-level intelligence." },
].map(step => (
{step.n}
{step.title}
{step.desc}
))}
{/* Final CTA */}
See how Dragoon fits your organization
Explore how Dragoon connects work, people operations, talent and AI in one platform built for modern teams.
setPage("contact")}>Talk to us
);
}
// ─── Page: Platform Overview ───
function PlatformPage({ setPage }) {
return (
<>
One connected platform for work, people and intelligence
Dragoon connects execution, people operations, talent, engagement and AI in one shared system.
setPage("contact")}>Book a demo
Explore modules
({ title: m.name, sub: m.features.length + " capabilities", icon: m.icon }))} />
Built around connected workflows
Dragoon brings work, people and performance processes together in one platform, helping teams reduce fragmentation and operate with more clarity.
Explore the platform
{modules.map(m => (
setPage(m.key)}>
{m.icon}
{m.name} {m.comingSoon && Coming soon }
{m.desc}
))}
How it works
{[
{ n: 1, title: "Connect workflows", desc: "Bring core processes into one shared platform." },
{ n: 2, title: "Capture signals", desc: "Track goals, feedback, approvals and activity." },
{ n: 3, title: "Support action", desc: "Use workflows and AI to reduce manual effort." },
{ n: 4, title: "Build toward insight", desc: "Turn connected data into better decisions." },
].map(s => (
))}
See how Dragoon fits your organization
Explore how Dragoon connects work, people operations, talent and AI in one platform built for modern teams.
setPage("contact")}>Talk to us
);
}
// ─── Page: Module Detail ───
function ModulePage({ moduleKey, setPage }) {
const mod = modules.find(m => m.key === moduleKey);
if (!mod) return null;
return (
<>
{mod.h1}
{mod.subtitle}
{mod.comingSoon &&
Coming soon
}
setPage("contact")}>{mod.comingSoon ? "Talk to us" : "Book a demo"}
{mod.intro_title}
{mod.intro_copy}
{mod.feature_details.map((f, i) => (
{i % 2 === 1 && (
)}
{i % 2 === 0 && (
)}
))}
{mod.cta_title}
setPage("contact")}>Talk to us
);
}
// ─── Page: Solutions Overview ───
function SolutionsPage({ setPage }) {
return (
<>
Built for teams that need more than disconnected tools
Dragoon supports the workflows behind execution, people operations, talent development and organizational visibility in one connected platform.
setPage("contact")}>Book a demo
Explore solutions
({ title: s.name, sub: s.card_desc.split(" ").slice(0, 6).join(" ") + "..." }))} />
One platform, different needs, shared visibility
Different teams need different workflows, but they should not have to operate in disconnected systems. Dragoon helps organizations bring work, people and performance processes into one platform.
{solutions.map(s => (
setPage(s.key)}>
{s.name}
{s.card_desc}
))}
See how Dragoon fits your organization
Explore how Dragoon connects work, people operations, talent and AI in one platform built for modern teams.
setPage("contact")}>Talk to us
);
}
// ─── Page: Solution Detail ───
function SolutionDetailPage({ solutionKey, setPage }) {
const sol = solutions.find(s => s.key === solutionKey);
if (!sol) return null;
return (
<>
{sol.h1}
{sol.subtitle}
setPage("contact")}>Book a demo
setPage("contact")}>Talk to us
v.title)} />
{sol.intro_title}
{sol.intro_copy}
{sol.values.map((v, i) => (
))}
See how Dragoon supports {sol.name.toLowerCase().replace("for ", "")}
setPage("contact")}>Talk to us
);
}
// ─── Page: Resources / Blog / Guides / Updates ───
function ResourcePage({ type, setPage }) {
const config = {
resources: {
h1: "Resources for teams building more connected ways of working",
sub: "Explore practical content on people operations, performance, engagement, AI workflows and connected organizational systems.",
intro_title: "Learn how Dragoon works — and why it matters",
categories: [
{ name: "Blog", desc: "Perspectives on work, people operations, performance, AI and connected organizational systems.", link: "blog" },
{ name: "Guides", desc: "Practical content to help teams improve workflows, structure processes and make better operational decisions.", link: "guides" },
{ name: "FAQs", desc: "Quick answers about Dragoon, its modules and how the platform works.", link: "faqs" },
{ name: "Product Updates", desc: "See what's new across the platform, from workflow improvements to new product capabilities.", link: "updates" },
],
},
blog: {
h1: "Ideas, insights and perspectives on connected work",
sub: "Read articles on people operations, performance, employee engagement, AI workflows and the systems modern organizations need.",
intro_title: "Where product thinking meets operational reality",
categories: [
{ name: "Work & Operations", desc: "Perspectives on execution, operational structure, workflows and organizational clarity." },
{ name: "People Operations", desc: "Ideas on employee workflows, HR structure and modern operating models for HR teams." },
{ name: "Performance & Growth", desc: "Articles on reviews, goals, competencies and development systems." },
{ name: "AI & Organizational Intelligence", desc: "Perspectives on AI-supported workflows, decision support and connected intelligence." },
],
},
guides: {
h1: "Practical guides for connected work, people and performance",
sub: "Explore practical content on people operations, performance management, employee engagement, AI-supported workflows and connected organizational systems.",
intro_title: "Useful guidance for teams building stronger systems",
categories: [
{ name: "People Operations", desc: "Practical guidance on employee management, leave, overtime, structure and day-to-day HR workflows." },
{ name: "Performance & Growth", desc: "Content on reviews, goals, competencies and development workflows." },
{ name: "Employee Engagement", desc: "Guides on surveys, feedback loops, 1:1s and employee listening practices." },
{ name: "AI Workflows & Insights", desc: "Content on AI-assisted workflows, summarization, organizational signals and future intelligence layers." },
],
},
updates: {
h1: "What's new in Dragoon",
sub: "Follow the latest updates across Dragoon, from workflow improvements and module enhancements to new platform capabilities.",
intro_title: "Track how the platform evolves",
categories: [
{ name: "Platform Improvements", desc: "See updates that improve the overall Dragoon experience, structure and navigation." },
{ name: "Workflow Enhancements", desc: "Follow changes to approvals, task flows, reviews, feedback loops and operational processes." },
{ name: "New Features", desc: "Explore newly released capabilities across Dragoon modules." },
{ name: "AI & Insights", desc: "Track developments across Cortex AI and the future Dragoon Insights layer." },
],
},
};
const c = config[type];
return (
<>
{type !== "resources" &&
}
{c.h1}
{c.sub}
setPage("contact")}>Book a demo
({ title: cat.name, sub: cat.desc.split(" ").slice(0, 5).join(" ") + "..." }))} />
{c.intro_title}
{c.categories.map((cat, i) => (
cat.link && setPage(cat.link)}>
{cat.name}
{cat.desc}
{cat.link &&
}
))}
See how Dragoon fits your organization
Explore how Dragoon connects work, people operations, talent and AI in one platform built for modern teams.
setPage("contact")}>Talk to us
);
}
// ─── Page: FAQs ───
function FAQsPage({ setPage }) {
const [openFaq, setOpenFaq] = useState(null);
const renderSection = (title, items, prefix) => (
{title}
{items.map((item, i) => {
const key = `${prefix}-${i}`;
const isOpen = openFaq === key;
return (
setOpenFaq(isOpen ? null : key)}>
{item.q}
{isOpen &&
{item.a}
}
);
})}
);
return (
<>
Frequently asked questions about Dragoon
Find quick answers about the platform, its modules, how it works and how different teams use it.
setPage("contact")}>Book a demo
setPage("contact")}>Talk to us
{renderSection("General", faqData.general, "gen")}
{renderSection("Platform & Modules", faqData.platform, "plat")}
{renderSection("Buying & Getting Started", faqData.buying, "buy")}
Still have questions?
Talk to our team and explore how Dragoon can support your workflows, team structure and growth goals.
setPage("contact")}>Talk to us
);
}
// ─── Page: Pricing ───
function PricingPage({ setPage }) {
return (
<>
Pricing built around your organization's needs
Dragoon is designed as a connected platform. Pricing depends on the modules, scope and structure that best fit your organization.
setPage("contact")}>Book a demo
setPage("contact")}>Talk to us
Flexible pricing for a connected platform
Different organizations need different combinations of workflows, modules and levels of support. Dragoon pricing is built to reflect that.
What shapes pricing
{[
{ title: "Team or organization size", desc: "The number of users or organizational scale can affect the recommended setup." },
{ title: "Module selection", desc: "Pricing depends on which parts of the platform your team wants to use." },
{ title: "Workflow complexity", desc: "Organizations with broader process and structure needs may require a more tailored setup." },
{ title: "Support and rollout needs", desc: "Implementation, onboarding or rollout scope may also shape the final plan." },
].map((item, i) => (
))}
Platform Starter
For teams looking to create a stronger operational foundation across key workflows.
{["Workspace Management", "HRIS core", "Basic approvals", "Team onboarding"].map((item, i) => (
))}
setPage("contact")}>Talk to us
Growth Platform
For organizations connecting people operations, talent workflows and engagement in one system.
{["Everything in Starter", "TalentHub", "EngagementHub", "Advanced workflows", "Priority support"].map((item, i) => (
))}
setPage("contact")}>Talk to us
Connected Intelligence
For teams building toward broader workflow coverage, AI support and future analytics.
{["Everything in Growth", "Cortex AI", "Dragoon Insights (when available)", "Custom integrations", "Dedicated support"].map((item, i) => (
))}
setPage("contact")}>Talk to us
Find the right plan for your organization
Talk to the Dragoon team to shape the right module mix, rollout scope and support model for your needs.
setPage("contact")}>Talk to us
);
}
// ─── Page: About ───
function AboutPage({ setPage }) {
return (
<>
Built for more connected organizations
Dragoon is designed for teams that want to move beyond fragmented tools and build a stronger system for work, people operations, talent and organizational visibility.
setPage("contact")}>Book a demo
setPage("contact")}>Talk to us
Why Dragoon exists
Most organizations still manage critical workflows across separate systems. Work happens in one tool, people operations in another, performance somewhere else, and visibility gets lost between them. Dragoon was built to bring these layers together in one connected platform — helping teams operate with more clarity, consistency and context.
A connected operating system for work, people and intelligence
Dragoon brings project execution, people operations, talent development, employee engagement and AI-supported workflows into one platform. The goal is not to add another isolated tool to the stack, but to help organizations create a stronger operational foundation across teams.
What we believe
{[
{ title: "Better systems create better decisions", desc: "When work, people and performance signals stay connected, organizations can make clearer decisions with less guesswork." },
{ title: "Operational clarity matters", desc: "Teams need more than isolated workflows. They need stronger visibility across the systems they rely on every day." },
{ title: "AI should support real work", desc: "AI creates value when it is embedded into workflows that teams already use — not when it exists as a disconnected feature." },
{ title: "Scale needs structure", desc: "As organizations grow, connected systems become more important, not less." },
].map((item, i) => (
))}
See how Dragoon fits your organization
Explore how Dragoon connects work, people operations, talent and AI in one platform built for modern teams.
setPage("contact")}>Talk to us
);
}
// ─── Page: Contact ───
function ContactPage({ setPage }) {
return (
<>
Talk to the Dragoon team
Whether you are exploring the platform, looking for a demo or want to learn how Dragoon could fit your organization, we would love to hear from you.
setPage("contact")}>Book a demo
Talk to us
Start the conversation
Dragoon is built for teams that want a more connected way to manage work, people operations, talent and organizational visibility. Reach out to explore the platform, ask questions or discuss how Dragoon could support your team.
Tell us a bit about your team
See how Dragoon fits your organization
Explore how Dragoon connects work, people operations, talent and AI in one platform built for modern teams.
setPage("contact")}>Talk to us
);
}
// ─── App ───
function App() {
const [page, setPage] = useState("home");
const navigate = useCallback((p) => {
setPage(p);
window.scrollTo({ top: 0, behavior: "smooth" });
}, []);
const renderPage = () => {
switch (page) {
case "home": return {renderPage()}
);
}
const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(