);
}
/* Logos are organised into named groups so individual tools or whole groups
can be added, removed, or reordered without touching the JSX. Edit the
arrays below to change what's shown; edit the order in TOOL_DISPLAY to
change the on-screen sequence. Comment a group out to hide it. */
const TOOL_GROUPS = {
workflowAutomation: [
{ name: 'n8n', src: 'assets/N8n-logo-new.svg.png' },
{ name: 'Make', src: 'assets/Make-com-Logo-500x281.png' },
{ name: 'Microsoft Power Automate', src: 'assets/Microsoft_Power_Automate.svg.png' },
],
aiPlatforms: [
{ name: 'OpenAI', src: 'assets/OpenAI_Logo.svg.png' },
{ name: 'Anthropic', src: 'assets/Claude_AI_symbol.svg.png' },
{ name: 'Gemini', src: 'assets/Google_Gemini_logo_2025.svg.png' },
],
infrastructure: [
{ name: 'Supabase', src: 'assets/supabase-logo-wordmark--light.png' },
{ name: 'Cloudflare', src: 'assets/Cloudflare_Logo.svg.png' },
],
workspace: [
{ name: 'Notion', src: 'assets/Notion-logo.svg.png' },
],
messaging: [
{ name: 'LINE', src: 'assets/LINE.png' },
{ name: 'WhatsApp Business', src: 'assets/WhatsApp_Business_icon.png' },
],
trading: [
{ name: 'TradingView (Pine)', src: 'assets/Pinescript--Streamline-Simple-Icons.svg' },
],
};
/* Order shown on the page. Comment a line out to hide a group. */
const TOOL_DISPLAY = [
...TOOL_GROUPS.workflowAutomation,
...TOOL_GROUPS.aiPlatforms,
...TOOL_GROUPS.infrastructure,
...TOOL_GROUPS.workspace,
...TOOL_GROUPS.messaging,
...TOOL_GROUPS.trading,
];
function Tools({ t }) {
// Duplicate the list inside the track so the -50% transform produces a
// seamless loop. Each pill carries its own right-margin (see CSS) so the
// duplicate's rhythm matches the original at the seam.
const renderRow = (logos) => [...logos, ...logos].map((l, i) => (
));
return (
{t.tools.title}
{renderRow(TOOL_DISPLAY)}
{t.tools.closing}
);
}
/* Workflow diagram modelled on the n8n editor visual: real tool logos as
nodes, smooth bezier curves connecting them, dot-grid background, and a
gradient stroke on the paths. Lines draw sequentially on scroll-in.
The tools shown are real options from your stack so the diagram tells a
concrete story: Notion task → n8n trigger → Claude AI → LINE message. */
function ProblemFlowSvg({ accent }) {
const NODES = [
{ x: 70, label: 'Notion', src: 'assets/Notion-logo.svg.png', logoSize: 30 },
{ x: 220, label: 'n8n', src: 'assets/N8n-logo-new.svg.png', logoSize: 34 },
{ x: 370, label: 'Claude', src: 'assets/Claude_AI_symbol.svg.png', logoSize: 30 },
{ x: 520, label: 'LINE', src: 'assets/LINE.png', logoSize: 32 },
];
const VBW = 590;
const VBH = 170;
const cy = 70;
const r = 32;
// Subtle alternating curves so the path has rhythm without being busy.
const yOffsets = [-8, 12, -8];
const labelY = 132;
return (
);
}
function Problem({ accent, t }) {
return (
{t.problem.title} {t.problem.title2}
{t.problem.lead}
{t.problem.bullets.map((b, i) => (
{b}
))}
{t.problem.promise}
);
}
function HowItWorks({ accent, t }) {
// Stepper journey: icon → number node → time/stage → title → body.
// The connecting line between nodes draws on scroll-in (same one-shot
// pattern as the Why spine). Mobile collapses to vertical with the line
// running down the left margin.
const stepIcons = [Icon.Compass, Icon.Blocks, Icon.Pulse];
return (
);
}
function FAQ({ accent, t }) {
const [open, setOpen] = useState(0);
// Group items by category, preserving relative order. The first time a
// category appears in t.faq.items defines its position in the display.
// Edit t.faq.items in i18n to add/remove/reorder questions or categories.
const order = [];
const groups = {};
t.faq.items.forEach((it, idx) => {
const cat = it.category || 'Other';
if (!order.includes(cat)) order.push(cat);
(groups[cat] = groups[cat] || []).push({ ...it, originalIdx: idx });
});
const card = t.faq.contactCard;
return (
);
}
function Footer({ t }) {
return (
);
}
/* Language switcher — segmented EN | TH pill. Two render variants share
logic: sits inside SideNav (desktop),
is fixed top-right and shown only on mobile via CSS media query, since
SideNav is hidden below 1100px. */
function LangSwitch({ lang, setLang, className }) {
const cls = `lang-switch${className ? ` ${className}` : ''}`;
return (
);
}
function LangSwitchFloat({ lang, setLang }) {
return ;
}
function SideNav({ accent, t, lang, setLang }) {
const items = [
{ id: 'top', label: 'Autopilot' },
{ id: 'problem', label: t.nav.gap },
{ id: 'results', label: t.nav.results },
{ id: 'how', label: t.nav.how },
{ id: 'about', label: t.nav.about },
{ id: 'capabilities', label: t.nav.caps },
{ id: 'why', label: t.nav.why },
{ id: 'pricing', label: t.nav.pricing || 'Pricing' },
{ id: 'faq', label: t.nav.faq },
{ id: 'contact', label: t.nav.cta, kind: 'cta' },
];
// Default to 'top' so the AUTOPILOT label is highlighted at first paint,
// even before the IntersectionObserver fires its first callback.
const [active, setActive] = useState('top');
const [hoverY, setHoverY] = useState(null);
const itemRefs = useRef([]);
const rafRef = useRef(0);
useEffect(() => {
const ratios = new Map(items.map(it => [it.id, 0]));
const sections = items
.map(it => ({ id: it.id, el: document.getElementById(it.id) }))
.filter(s => s.el);
if (!sections.length) return;
const pickActive = () => {
let best = null, bestRatio = 0;
ratios.forEach((r, id) => { if (r > bestRatio) { bestRatio = r; best = id; } });
if (bestRatio > 0) {
setActive(best);
} else if (window.scrollY < window.innerHeight * 0.5) {
// Near the top of the page with nothing intersecting the trigger
// zone — hold AUTOPILOT active rather than going blank.
setActive('top');
}
};
const io = new IntersectionObserver((entries) => {
entries.forEach(e => ratios.set(e.target.id, e.intersectionRatio));
pickActive();
}, {
rootMargin: '-30% 0px -55% 0px',
threshold: [0, 0.25, 0.5, 0.75, 1]
});
sections.forEach(s => io.observe(s.el));
// Scroll listener as a backstop — IO can miss edge cases near page top.
const onScroll = () => pickActive();
window.addEventListener('scroll', onScroll, { passive: true });
return () => { io.disconnect(); window.removeEventListener('scroll', onScroll); };
}, [t]);
const handleClick = (e, id) => {
const el = document.getElementById(id);
if (!el) return;
e.preventDefault();
const top = el.getBoundingClientRect().top + window.pageYOffset - 88;
window.scrollTo({ top, behavior: 'smooth' });
history.replaceState(null, '', `#${id}`);
};
const onMove = (e) => {
const y = e.clientY;
if (rafRef.current) return;
rafRef.current = requestAnimationFrame(() => {
setHoverY(y);
rafRef.current = 0;
});
};
const onLeave = () => {
if (rafRef.current) { cancelAnimationFrame(rafRef.current); rafRef.current = 0; }
setHoverY(null);
};
// Dock-style magnification: baseline lift when cursor is anywhere over the
// nav, peak scale on the item nearest the cursor, smooth Gaussian falloff
// to neighbors so the bulge "flows" with the cursor.
const MIN_LIFT = 1.05;
const PEAK = 1.22;
const RADIUS = 100; // px
const getScale = (i) => {
if (hoverY === null) return 1;
const el = itemRefs.current[i];
if (!el) return MIN_LIFT;
const r = el.getBoundingClientRect();
const center = r.top + r.height / 2;
const d = Math.abs(hoverY - center);
const f = Math.exp(-(d * d) / (2 * RADIUS * RADIUS));
return MIN_LIFT + (PEAK - MIN_LIFT) * f;
};
const hovering = hoverY !== null;
return (
);
}
Object.assign(window, { Nav, Hero, Tools, Problem, HowItWorks, Capabilities, Results, Why, About, Pricing, FAQ, CTA, StickyMobileCTA, Footer, SideNav, LangSwitch, LangSwitchFloat, Icon, I18N, GuaranteeSeal });