{/* Floating UI fragments — only on stacked layout where there's empty side space */}
{isStacked && }
{headline}
{subhead}
}
{/* Big product screenshot — separate from hero so it sits below the fold */}
{!isSplit &&
{/* Apple-style orange wash — bleeds ~280px above the section. The mask fades
the top-third to transparent so there's no hard edge into the hero.
Intensity dialed down on small viewports via .product-wash CSS rules. */}
{/* Section intro — frames the demo and carries the SEO keyword */}
Pool service software where every answer is a few clicks away.
Whether your pool company services 100 customers a week or 15,000, finding what you need stays effortless. PoolLogic is pool service software built around how real pool companies work — customer management, billing & invoicing, and route management without trimming a single feature your team relies on.
{/* Rhetorical question — single search field that types through scenarios one by one */}
{/* Kicker — divider lines flanking the answer */}
No searching. No spreadsheets. No math. Just answers.
}
);
};
// Animated search field that types through a list of rhetorical queries one by one,
// holds, then deletes — visually previews the "everything is searchable" promise.
const TypingSearchQuery = ({ queries }) => {
const [text, setText] = useState('');
const [queryIndex, setQueryIndex] = useState(0);
const [phase, setPhase] = useState('typing'); // typing | holding | deleting | between
useEffect(() => {
const current = queries[queryIndex];
let timer;
if (phase === 'typing') {
if (text.length < current.length) {
// Slight per-char jitter so it feels human, not metronomic
const delay = 32 + Math.random() * 40;
timer = setTimeout(() => setText(current.slice(0, text.length + 1)), delay);
} else {
timer = setTimeout(() => setPhase('holding'), 1600);
}
} else if (phase === 'holding') {
timer = setTimeout(() => setPhase('deleting'), 1400);
} else if (phase === 'deleting') {
if (text.length > 0) {
timer = setTimeout(() => setText(text.slice(0, -1)), 18);
} else {
timer = setTimeout(() => setPhase('between'), 350);
}
} else if (phase === 'between') {
setQueryIndex((queryIndex + 1) % queries.length);
setPhase('typing');
}
return () => clearTimeout(timer);
}, [text, phase, queryIndex, queries]);
return (
{text}
/
);
};
// Rhetorical question styled to mirror the app's search/filter input — visually previews
// the "everything is searchable" promise the demo below pays off.
const SearchQuery = ({ text }) => (
{text}
/
);
// Authority strip: usage stat above the H1. Primes credibility before the headline lands.
const HeroAuthorityStrip = ({ centered }) => (
{window_.map((item, i) => {
const fromTop = i; // 0 is oldest
// Position from top — animate from one slot below to current slot
const top = fromTop * ROW_H;
const isNew = i === newest;
return (
{item.text}
{item.cat}
just now
);
})}
{/* Footer */}
1,247 actions automated today
across 87 trucks
);
};
const HeroProof = ({ centered }) => {
// Three buckets so the trio always reads as: [trial terms] · [product truth] · [outcome]
// Phrases trimmed to keep slot widths compact.
const pools = [
['No credit card needed', 'Cancel any time', '14-day free trial', 'Setup in 10 minutes'],
['6 nav tabs, not 23', 'Works offline', 'Photos & readings baked in', 'Tickets → quotes in 1 tap'],
['Paid 11 days faster', 'Reports clients read', 'Auto chemistry alerts', 'Quotes auto-route to techs']];
const [tick, setTick] = useState(0);
const [paused, setPaused] = useState(false);
useEffect(() => {
if (paused) return;
const id = setInterval(() => setTick((t) => t + 1), 2600);
return () => clearInterval(id);
}, [paused]);
const Check = () =>
;
// A single slot — current phrase rolls in from the right, previous rolls out to the left
const Slot = ({ pool, offset }) => {
const i = (tick + offset) % pool.length;
const prevIRef = useRef(i);
const isFirstRef = useRef(true);
const outI = isFirstRef.current ? null : prevIRef.current;
useEffect(() => {
isFirstRef.current = false;
prevIRef.current = i;
}, [i]);
const longest = pool.reduce((a, b) => a.length >= b.length ? a : b);
return (
{/* invisible sizer keeps the slot width stable across phrase changes */}
{longest}
{outI !== null && (
{pool[outI]}
)}
{pool[i]}
);
};
return (
;
// Deep-dive tabs — feature exploration without cluttering the bento grid above.
const DeepDive = () => {
const tabs = [
{
id: 'routes',
label: 'Routes',
icon: ,
headline: 'A route plan that re-optimizes overnight.',
body: 'Drag a stop in, drag a tech out, and the schedule re-flows automatically. PoolLogic balances mileage, time-on-stop and customer windows so your trucks aren\'t crossing town twice.',
bullets: [
'Auto-optimization runs at 5 AM, every day',
'Per-stop time tracking learns your actual minutes',
'Skill-based assignment for renovations & repairs',
'Drag-and-drop overrides — no menu diving'],
stats: [
['38 min', 'saved per tech daily'],
['1,208', 'stops routed in seconds'],
['12+', 'trucks supported per shop']],
preview: 'routes'
},
{
id: 'reports',
label: 'Service reports',
icon: ,
headline: 'Branded reports that send themselves.',
body: 'Every photo, chemistry reading, and dosage your tech logs goes straight into a clean, branded service report — sent to the customer the moment a stop closes.',
bullets: [
'Customer-branded with your logo & colors',
'Photos auto-attached from the on-truck app',
'Chemistry trends visible per pool, over time',
'Auto-alerts when readings drift out of range'],
stats: [
['96%', 'attach rate vs. 41% paper'],
['0', 'extra clicks for the tech'],
['Live', 'chemistry trend graphs']],
preview: 'reports'
},
{
id: 'billing',
label: 'Billing',
icon: ,
headline: 'Invoices fire from the route, not the desk.',
body: 'Recurring invoices send the moment a stop is complete. Cards on file charge automatically. ACH posts overnight. End-of-month becomes a non-event.',
bullets: [
'Per-stop invoicing on service completion',
'Stripe & ACH built in; pass-through to QBO',
'One-tap ticket → quote → invoice flow',
'Auto-retries for failed cards with smart reminders'],
stats: [
['11 days', 'faster cash on average'],
['$189', 'average invoice value'],
['1-tap', 'ticket-to-quote conversion']],
preview: 'billing'
},
{
id: 'audit',
label: 'Service audit',
icon: ,
headline: 'A 5 AM scan that catches what you can\'t.',
body: 'Every night, PoolLogic checks every stop from the day before — flags missed visits, missing photos, chemistry drift, and stale equipment notes. You wake up to a list, not a fire.',
bullets: [
'Overnight audit across every stop, every truck',
'Missed-stop, missing-photo, drift detection',
'Auto-tickets for follow-ups & rechecks',
'Per-tech quality score — visible to the team'],
stats: [
['Every night', 'at 5 AM'],
['<1%', 'missed-stop rate after rollout'],
['Auto', 'follow-up ticket creation']],
preview: 'audit'
},
{
id: 'directory',
label: 'Directory',
icon: ,
headline: 'Search 10,000+ customers in under a second.',
body: 'Every customer, pool, gate code, dog name and chemistry history — one ⌘K away. Routed and unrouted views. One tap from profile to ticket, quote, or invoice.',
bullets: [
'⌘K search across customers, pools & properties',
'Routed + unrouted segmented views',
'Custom fields for gate codes, pets, equipment',
'One-tap profile → ticket → quote → invoice'],
stats: [
['<1s', 'search across 10K customers'],
['1-tap', 'profile to ticket'],
['1,208', 'live customers in this demo']],
preview: 'directory'
}];
const [active, setActive] = useState('routes');
const tab = tabs.find((t) => t.id === active);
return (
Deep dive
Look closer at what actually runs your day.
The bento above is the headline. Here's what each piece really does — pick a feature.
);
};
// "How it works" - the day in 4 steps
const HowItWorks = () => {
const steps = [
{ t: 'Plan the day', d: 'Routes optimize at 5 AM. Each tech wakes up to a clean stop list, photos of last visit, and any flags from the last service audit.', icon: },
{ t: 'Run the route', d: 'On-truck app works offline. Tap to start, snap chemistry photos, log parts. Customers get an ETA text without anyone lifting a finger.', icon: },
{ t: 'Close out automatically', d: 'Service report sends. Invoice fires. Card on file is charged. The next day\'s route already knows what changed.', icon: },
{ t: 'See what happened', d: 'Service audit catches missed stops and chemistry drift overnight. Route insight tells you which day, tech, or zip code is bleeding margin.', icon: }];
return (
A day on PoolLogic
From route plan to deposit, without you in the loop.
The fewer apps, sticky notes and group texts between you and a clean pool, the more pools you can serve. PoolLogic collapses the day into one flow.
{steps.map((s, i) =>
0{i + 1}
{s.icon}
{s.t}
{s.d}
)}
);
};
// Stats / impact
const Stats = () =>
{[
['11 days', 'faster cash collection', 'on average vs. month-end billing'],
['38 min', 'saved per tech per day', 'with automated route optimization'],
['96%', 'service report attach rate', 'up from 41% on paper or photos-via-text'],
['4,200+', 'pool businesses', 'from 1-truck shops to 80-route operations']].
map(([big, mid, sub], i) =>
{big}
{mid}
{sub}
)}
;
// Testimonial — three-up wall, more credible than a single hero quote
const Testimonial = () => {
const quotes = [
{ q: "We went from one truck and a Notes app to seven routes across two counties without hiring an office manager.", who: 'Hector Salazar', role: 'Owner, SunCoast Pool Co.', loc: 'St. Petersburg, FL', initials: 'HS', size: 'lg' },
{ q: "First close-of-month I didn't have to chase a single invoice. Money just landed.", who: 'Dana Park', role: 'GM, BlueWave Pools', loc: 'Jacksonville, FL', initials: 'DP', size: 'sm' },
{ q: "Service audit caught a bad chemistry reading on Tuesday. Customer never noticed there was an issue.", who: 'Jamal Ortiz', role: 'Lead tech, Crystal Pools', loc: 'Naples, FL', initials: 'JO', size: 'sm' }];
return (
{/* Big quote */}
{[0, 1, 2, 3, 4].map((i) => )}
"We went from one truck and a Notes app to seven routes across two counties without hiring an office manager."
One flat price per truck. No per-stop nickel-and-diming.
{[['Monthly', false], ['Annual · save 20%', true]].map(([l, v]) =>
)}
{tiers.map((t) =>
{t.popular &&
Most popular
}
{t.name}
{t.blurb}
${t.price}/truck/mo
{t.features.map((f) =>
{f}
)}
)}
);
};
// FAQ
const FAQ = () => {
const [open, setOpen] = useState(0);
const items = [
{ q: 'How long does setup take?', a: 'Most shops are running their first route within an hour. Import customers from a CSV, QuickBooks, or your existing tool — we handle the mapping.' },
{ q: 'Does it work without internet on the truck?', a: 'Yes. The on-truck app stores stops, chemistry readings, and photos locally and syncs the moment you\'re back on signal. No service report ever gets lost.' },
{ q: 'Will you migrate my data from Skimmer or Pooltrackr?', a: 'Free migration is included on Vision and Fleet. Send us an export and we\'ll have your customers, routes, and recurring invoices live within 48 hours.' },
{ q: 'Do you charge per stop, per service, or per text?', a: 'No. PoolLogic is one flat price per truck — including unlimited customer texts, service reports, and invoices.' },
{ q: 'What payment processors do you support?', a: 'Stripe and ACH are built in. We also pass through to Square, QuickBooks Payments, and Authorize.net if you already have a relationship.' }];
return (
FAQ
Questions, before you start.
Still wondering about something? Talk to a real human — usually answers within an hour during US business days.
{items.map((it, i) =>
{it.a}
)}
);
};
// Migration / switching — closes the "I'm already on X" objection right before pricing.
// Visual hero is a faithful mock of the in-app Import Customers wizard.
const Migration = () => {
return (
{/* Copy */}
Switching
Ready to make the switch?
Bring your full customer book over in one pass — most teams are live on PoolLogic in under an hour.
{[
['Upload your list', 'Drop a CSV with up to 5,000 rows. No clean export? Our AI pulls customer data from a PDF or screenshot.'],
['Set billing rules', 'First invoice date, credit-card fees, chemical billing.'],
['Live the same day', 'Routes, history, and invoices ready before your next stop.']].
map(([t, d], i) =>