/* Variation 3 — Enterprise
Editorial hero with awards, tabbed phases for "How It Works",
tighter, more formal tone */
/* Animated counter-rotating ring of dots / micro-effect */
const HeroBackdrop = () => {
const [t, setT] = React.useState(0);
React.useEffect(() => {
let raf;
const tick = () => {setT((x) => x + 1);raf = requestAnimationFrame(tick);};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, []);
return (
);
};
/* Floating avatars + status pill that orbit around the awards */
const HeroFloater = ({ x, y, delay, children }) =>
{children}
;
const HeroV3 = () => {
const tweaks = React.useContext(window.VEAContext || React.createContext({}));
const headline = tweaks.headline || 'Design and Unify your Operations with AI & Automation';
const accent = tweaks.headlineAccent || 'AI & Automation';
const subhead = tweaks.subhead || "Stop letting fragmented systems, antiquated design, and restrictive tools slow your business. As an agency focused on technology and driving business results, we recognize the tremendous ability of AI tools to build solutions for progressive business that solves the challenges facing your teams.";
const ctaPrimary = tweaks.ctaPrimary || 'Book Your AI Discovery Call';
const ctaSecondary = tweaks.ctaSecondary || 'Download capabilities deck';
const showAwards = tweaks.showAwards !== false;
const showStatStrip = tweaks.showStatStrip !== false;
const h1Scale = tweaks.h1Scale || 1;
// Split headline so the accent phrase renders red + underlined.
const i = accent ? headline.indexOf(accent) : -1;
const before = i >= 0 ? headline.slice(0, i) : headline;
const after = i >= 0 ? headline.slice(i + accent.length) : '';
const [mouse, setMouse] = React.useState({ x: 0, y: 0 });
const ref = React.useRef(null);
const onMove = (e) => {
if (!ref.current) return;
const r = ref.current.getBoundingClientRect();
setMouse({
x: ((e.clientX - r.left) / r.width - 0.5) * 2,
y: ((e.clientY - r.top) / r.height - 0.5) * 2
});
};
return;
};
const BottleneckV3 = () =>
The challenge
You’re competing for some of the most coveted “real estate” on the planet.
{[
{ n: '01', t: 'Search Engine Foundations', b: 'We cover all the bases and more with SEO. Local optimization of listings, review management, onsite optimization, and site health are part of even our smallest packages to help you grow online and get organic traffic.' },
{ n: '02', t: 'Content Planning', b: '“Content is King,” as they say. New blogs and landing pages cause the sitemap of your website to get indexed, drive traffic for new keywords, and increase rankings. Get ongoing content planning to grow organic traffic quickly.' },
{ n: '03', t: 'Technical SEO', b: 'Beyond the basics, we provide technical SEO for site load time optimizations, schema architecture, backlinks, and image compression to make your website lightning-fast, reduce errors, and improve ranking potential.' }].
map((it) =>
{it.n}
{it.t}
{it.b}
)}
;
/* Tabbed how-it-works */
const HowItWorksV3 = () => {
const phases = [
{
n: 'Phase 01', title: 'Visualize', dur: 'Weeks 1–2',
lede: 'A structured onboarding phase to define your goals, audience, and the channel strategy built to reach them.',
body: 'We dig into your business objectives, target audience, competitive landscape, and historical performance data before recommending a single channel or setting a single budget. Findings are reviewed with your team in a working session and strategy is locked before any campaigns go live.',
deliverables: ['Audience research & competitive analysis', 'Content analysis and audits', 'Campaign goals, KPIs & success benchmarks', '90-day SEO roadmap'],
kpi: [{ v: 'Week 2-3', l: 'Strategy presentation delivered' }, { v: '100%', l: 'Alignment before launch' }]
},
{
n: 'Phase 02', title: 'Execute', dur: 'Week 2–3',
lede: 'Campaigns, tracking, and content are built to spec and validated.',
body: 'We configure your ad accounts, install and verify tracking, develop creative assets, and structure campaigns against the approved strategy. Everything goes through an internal QA pass and a client review before launch so the foundation is clean from day one.',
deliverables: ['SEO tool setup & website foundation work', 'Conversion tracking verification', 'Initial content roll out', 'Pre-launch QA & client approval'],
kpi: [{ v: '0 Tracking gaps at launch', l: 'Launch review & sign-off session' }]
},
{
n: 'Phase 03', title: 'Achieve', dur: 'Weeks 3–8',
lede: 'Active campaign management focused on improving rankings and generating web traffic',
body: 'Optimizations are live and our team is driving initiatives forward weekly. You receive regular reporting that connects SEO activity directly to the leads and revenue it is driving.',
deliverables: ['Ongoing content optimization', 'Technical SEO work to support your website’s health', 'Monthly performance reporting', 'Quarterly strategy review & recommendations'],
kpi: [{ v: 'Monthly', l: ' Performance reporting cadence' }, { v: 'Continuous', l: 'Testing & optimization cycles' }]
},
{
n: 'Phase 04', title: 'Scale', dur: 'Month 3+',
lede: 'What\'s working gets scaled. Content and audiences, channels, and off-site work expand in line with your growth goals.',
body: 'With a proven foundation in place, we identify the highest-leverage opportunities to increase rankings, expand into new fields, and build on audience segments that are converting. The engagement grows alongside your results and adapts as your business priorities shift.',
deliverables: ['Content expansion recommendations', 'Backlink recommendations', 'Quarterly business & performance reviews', 'Ongoing website and app maintenance'],
kpi: [{ v: 'Quarterly', l: 'Growth strategy reviews' }, { v: 'Full visibility', l: 'Into performance & website/tech' }]
}];
const [active, setActive] = React.useState(0);
const a = phases[active];
return (
Engagement model
An established methodology from strategy session to advertising launch
{/* Before vs With VEA — sub-band inside engagement model */}
{/*
Before vs. With VEA
The shift you can measure in within weeks
*/}
);
};
/* Compact comparison rows used inside HowItWorksV3 */
const BeforeAfterTable = () => {
const rows = [
{ topic: 'Reporting cadence', before: 'Manually compiled, often 2–3 weeks stale', after: 'Real-time dashboards, executive summary auto-generated daily' },
{ topic: 'Data entry', before: 'Experienced staff wasting hours re-working data between systems', after: 'Agentic workflows sync sources every 5 minutes, zero re-keying' },
{ topic: 'Lead routing', before: 'Dependent upon static round robins, assignors, and potentially spreadsheets', after: 'AI-scored, routed in <60 seconds with full context attached' },
{ topic: 'Forecasting', before: 'Gut-feel + last quarter\u2019s spreadsheet, based on data from past years - not your current market', after: 'Predictive model trained on your data, based on the current market, refreshed weekly' },
{ topic: 'New hire ramp', before: '4–6 weeks to learn your system and spreadsheet maze', after: 'New hires productive day one—the system is the source of truth' },
{ topic: 'Data security', before: 'Files emailed, shared drives, unknown sprawl', after: 'Role-based access, audit logs, private deployments' }];
return (