);
}
// ───── Results — case cards ─────
function Results() {
const cases = [
{ vert: 'Home Services', metric: '$127K', label: 'tracked revenue / 90 days', client: 'Summit Roofing Co.', detail: 'Launched, tested & scaled to 3.8x ROAS in 90 days from a cold account.' },
{ vert: 'HVAC & Plumbing', metric: '0', label: 'missed calls — ever', client: 'Prestige Home Services', detail: 'From 15 lost calls a day to a fully automated front desk — 24/7.' },
{ vert: 'Legal Services', metric: '4.1x', label: 'return on ad spend', client: 'ClearPath Law Group', detail: 'Rebuilt Google Ads, added AI chatbot, cut cost-per-consultation by 61%.' },
{ vert: 'Aesthetics & Wellness', metric: '+340%', label: 'organic enquiries', client: 'Luxe Skin Clinic', detail: 'Ranked #1 locally in 90 days — booked 6 weeks out via SEO, Meta & social.' },
{ vert: 'Real Estate', metric: '#1', label: 'for 14 local keywords', client: 'NestFinder Realty', detail: 'Rebuilt content around buyer intent; organic now outperforms every paid channel.' },
{ vert: 'Financial Services', metric: '−61%', label: 'cost per lead', client: 'LoanBridge Financial', detail: 'Restructured paid media, tightened targeting, added email nurturing.' },
];
return (
{cases.map((c, i) => ())}
);
}
function CaseCard({ c, i }) {
const ref = React.useRef(null);
const seen = useInViewOnce(ref, 0.18);
const delay = i * 110;
return (
{c.vert}
CASE / {String(i + 1).padStart(2, '0')}
{c.metric}
{c.label}
{c.client}
{c.detail}
);
}
// ───── Process ─────
function Process() {
const steps = [
{ n: '01', t: 'Discovery Call', d: 'Deep-dive into your goals, audience, current marketing & biggest growth opportunities.' },
{ n: '02', t: 'Custom Strategy', d: 'Tailored growth plan combining digital marketing, AI automation, and the right channels for your market.' },
{ n: '03', t: 'Build & Launch', d: 'Campaigns live, AI configured, assets designed fast. Most clients are live within 2 weeks.' },
{ n: '04', t: 'Optimize & Scale', d: 'Real data drives every decision — cut what doesn\'t work, double down on what does.' },
];
return (
{steps.map((s, i) => ())}
);
}
function StepCard({ s, i, isLast }) {
const ref = React.useRef(null);
const seen = useInViewOnce(ref, 0.25);
const delay = i * 160;
return (
{s.n}
{!isLast &&
}
{s.t}
{s.d}
);
}
// ───── Testimonials ─────
// Hook: fires true once the element is visible, then stays true.
function useInViewOnce(ref, threshold = 0.15) {
const [seen, setSeen] = React.useState(false);
React.useEffect(() => {
if (!ref.current || seen) return;
const io = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting) { setSeen(true); io.disconnect(); }
},
{ threshold }
);
io.observe(ref.current);
return () => io.disconnect();
}, [seen, threshold]);
return seen;
}
// Prints text character-by-character once visible (receipt printer vibe)
function TypePrint({ text, delay = 0, speed = 28, className, as = 'span', onDone }) {
const ref = React.useRef(null);
const seen = useInViewOnce(ref);
const [n, setN] = React.useState(0);
React.useEffect(() => {
if (!seen) return;
let raf, start = null;
const total = text.length;
const step = (ts) => {
if (start == null) start = ts;
const elapsed = ts - start - delay;
if (elapsed < 0) { raf = requestAnimationFrame(step); return; }
const chars = Math.min(total, Math.floor(elapsed / speed));
setN(chars);
if (chars < total) raf = requestAnimationFrame(step);
else if (onDone) onDone();
};
raf = requestAnimationFrame(step);
return () => cancelAnimationFrame(raf);
}, [seen, text, speed, delay]);
const Tag = as;
return (
{text.slice(0, n)}
{seen && n < text.length && ▍}
);
}
function QuoteCard({ qt, i }) {
const ref = React.useRef(null);
const seen = useInViewOnce(ref, 0.2);
const delay = i * 140;
return (
RECEIPT №{String(i + 1).padStart(4, '0')}
“
{qt.q}
{qt.name}
{qt.role}
{qt.stat}
);
}
function Testimonials() {
const quotes = [
{ q: "We went from drowning in missed calls to a fully booked schedule in three weeks. The AI receptionist paid for itself the first week.", name: 'Denise M.', role: 'Owner, Prestige Home Services', stat: '0 missed calls' },
{ q: "I've worked with five agencies. Terra is the first one that actually gives a damn about the number next to my name.", name: 'Marcus T.', role: 'Managing Partner, ClearPath Law', stat: '4.1x ROAS' },
{ q: "Fully booked six weeks out. From basically invisible to the #1 clinic in my zip code in 90 days. Not hype — that's my calendar.", name: 'Amelia K.', role: 'Founder, Luxe Skin Clinic', stat: '+340% enquiries' },
{ q: "They don't sell you a package. They build the thing you actually need, then they keep tuning it. That's why I stayed.", name: 'Ray P.', role: 'CEO, Summit Roofing Co.', stat: '$127K / 90 days' },
];
const headRef = React.useRef(null);
const seen = useInViewOnce(headRef, 0.2);
return (
04 — WHAT CLIENTS SAY
Not reviews.
{seen ? (
) : (
Receipts with names on them.
)}
{quotes.map((qt, i) => (
))}
);
}
// ───── Why Terra ─────
function WhyCard({ p, i }) {
const ref = React.useRef(null);
const seen = useInViewOnce(ref, 0.2);
const delay = i * 140;
return (
0{i + 1}
0{i + 1}
{p.t}
{p.d}
);
}
function WhyTerra() {
const points = [
{ t: 'Fast Onboarding', d: 'Most clients are live within 2 weeks of signing. No long setup timelines.' },
{ t: 'Dedicated Account Manager', d: 'One point of contact who knows your business inside and out.' },
{ t: 'No Long-Term Lock-In', d: 'Month-to-month agreements. We earn your business every single month.' },
];
return (