/* 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
Your brand is stagnating due to creative production requirements.
{[
{ n: '01', t: 'Website Design & Development', b: 'A beautiful and engaging website is crucial for today’s online customers. But more importantly, it is how you add value for your customer through the overall experience they have when visiting your website.' },
{ n: '02', t: 'Logo Design & Brand Development', b: 'Branding goes beyond just your logo, fonts, and colors. We develop complex brand standards that can be carried out across your organization to better communicate your message consistently.' },
{ n: '03', t: 'Video Production & Animation', b: 'The majority of consumers’ buying decisions are impacted by video. How are you utilizing video in your advertising and website experience? Discover more creative ways to engage your audiences.' }].
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 creative direction our designs need to match.',
body: 'We dig into your business objectives, target audience, brand positioning, and existing creative assets before any design work begins. Findings are reviewed with your team in a working session and creative direction is locked before any production starts.',
deliverables: ['Audience research & competitive analysis', 'Brand & creative asset audits', 'Campaign goals, KPIs & success benchmarks', '90-day creative roadmap'],
kpi: [{ v: 'Weeks 1-2', l: 'Strategy presentation delivered' }, { v: '100%', l: 'Alignment before production' }]
},
{
n: 'Phase 02', title: 'Execute', dur: 'Week 2–3',
lede: 'Assets, templates, and campaigns are built to spec and validated.',
body: 'We set up your brand asset library, develop initial design concepts, and structure creative production 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: ['Brand asset setup & style guide finalization', 'Design concept development & approval', 'Initial creative roll out', 'Pre-launch QA & client approval'],
kpi: [{ v: 'Launch', l: 'review & sign-off session' }, { v: '0', l: 'Revisions needed at launch' }]
},
{
n: 'Phase 03', title: 'Achieve', dur: 'Weeks 3–8',
lede: 'Active creative production focused on strengthening your brand presence and supporting campaign performance.',
body: 'Production is live and our team is driving initiatives forward weekly. You receive regular reporting that connects creative output directly to the engagement and results it is driving.',
deliverables: ['Ongoing design refinement & iteration', 'Creative quality work to support brand consistency', '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. Assets, channels, and audience segments expand in line with your growth goals.',
body: 'With a proven foundation in place, we identify the highest-leverage opportunities to expand creative output, extend into new channels, and build on the designs that are converting. The engagement grows alongside your results and adapts as your business priorities shift.',
deliverables: [' Creative expansion recommendations', 'Channel expansion recommendations', 'Quarterly business & performance reviews', 'Ongoing asset and template maintenance'],
kpi: [{ v: 'Quarterly', l: 'Growth strategy reviews' }, { v: 'Full visibility', l: ' Into performance & creative output' }]
}];
const [active, setActive] = React.useState(0);
const a = phases[active];
return (
Engagement model
An established four-phase path from strategy to scale
{/* 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 (