// All remaining sections + footer.
const { motion: mS, AnimatePresence: APS } = window;
// ---------- How it works (pet owner side — 4-step preview) ----------
const HowItWorks = () => {
const cards = [
{
step: "01",
title: "Create your pet profile",
copy: "Save Luna's size, age, vaccines, and care needs once. Hosts see the important details before they reply.",
tone: "mint",
preview: ,
},
{
step: "02",
title: "Search by real care needs",
copy: "Look for medication support, fenced gardens, accepted sizes, daily updates, and other details that matter for your pet.",
tone: "cream",
preview: ,
},
{
step: "03",
title: "Compare trusted providers",
copy: "Review profiles with photos, ratings, response times, care policies, and verification signals in one calm view.",
tone: "butter",
preview: ,
},
{
step: "04",
title: "Request a quote · message the host",
copy: "Send one clear request, ask questions, and agree the details directly with the sitter or hotel before you confirm.",
tone: "coral",
preview: ,
},
];
return (
);
// ---------- Inline icons for new platform features ----------
const IconWallet = ({ size = 16 }) => (
);
const IconGrid = ({ size = 16 }) => (
);
const IconChart = ({ size = 16 }) => (
);
const IconStethoscope = ({ size = 16 }) => (
);
const IconPhone = ({ size = 16 }) => (
);
// ---------- Platform feature grid ----------
const FeatureGrid = () => {
const features = [
{
icon: ,
tone: "mint",
title: "Smart Booking Management",
copy: "Manage the full booking journey, from first enquiry to check-out, with clear statuses and a shared history for every client.",
},
{
icon: ,
tone: "butter",
title: "Customer & Pet Profiles",
copy: "Keep contact details, breed, weight, vaccinations, behaviour notes, microchip numbers, and special needs in one trusted record.",
},
{
icon: ,
tone: "coral",
title: "Check-In & Check-Out with Photos",
copy: "Document arrival and departure with photos, belongings, and behaviour notes, so owners feel informed and your team has a clear record.",
},
{
icon: ,
tone: "mint",
title: "Quotations & Payment Tracking",
copy: "Create clear quotes and record off-platform payments, outstanding balances, and refunds without losing track.",
},
{
icon: ,
tone: "butter",
title: "Capacity Calendar",
copy: "See availability, daily limits, rooms, services, and busy days at a glance, so you can avoid overbooking.",
},
{
icon: ,
tone: "coral",
title: "Dashboard & KPIs",
copy: "Start each day with arrivals, departures, occupancy, open quotes, and the tasks your team should not miss.",
},
{
icon: ,
tone: "mint",
title: "Veterinary Records",
copy: "Keep vet contacts and health notes close, especially for pets with medication or special care needs.",
},
{
icon: ,
tone: "butter",
title: "iOS App for Your Team",
copy: "Give staff a mobile view for check-ins, bookings, pet records, and updates while they are moving around the property.",
},
];
const toneBg = { mint: "bg-mint text-forest", butter: "bg-butter text-[#6a4f00]", coral: "bg-coralSoft text-coral" };
return (
{features.map((f, i) => (
{f.icon}
{f.title}
{f.copy}
))}
);
};
// ---------- Operations Control ----------
const OperationsControl = () => {
const points = [
{
title: "Every pet has a clear record",
copy: "Weight, breed, medication, vaccines, microchip, vet, and notes.",
icon: ,
tone: "mint",
},
{
title: "Check-in and check-out are documented",
copy: "Photos, belongings, and notes reduce doubts on departure.",
icon: ,
tone: "butter",
},
{
title: "Bookings stay organized",
copy: "Clear statuses, dates, rooms, payments, and communication in one place.",
icon: ,
tone: "coral",
},
{
title: "Your team knows what to do next",
copy: "Arrivals, departures, tasks, and daily capacity are visible.",
icon: ,
tone: "mint",
},
];
const toneBg = { mint: "bg-mint text-forest", butter: "bg-butter text-[#6a4f00]", coral: "bg-coralSoft text-coral" };
return (
{points.map((p, i) => (
{p.icon}
{p.title}
{p.copy}
))}
);
};
// ---------- Service Types ----------
const ServiceTypes = () => {
const services = [
{
title: "Pet Boarding",
copy: "Your pet stays safely at the sitter's home.",
icon: ,
tone: "mint",
},
{
title: "House Sitting",
copy: "The sitter cares for your pet and your home.",
icon: ,
tone: "butter",
},
{
title: "Dog Walking",
copy: "Daily walks to keep your dog happy and healthy.",
icon: ,
tone: "coral",
},
{
title: "Drop-in Visits",
copy: "Quick visits for feeding, potty breaks, or medication.",
icon: ,
tone: "mint",
},
];
const toneBg = { mint: "bg-mint text-forest", butter: "bg-butter text-[#6a4f00]", coral: "bg-coralSoft text-coral" };
return (
{services.map((s, i) => (
{s.icon}
{s.title}
{s.copy}
))}
);
};
// ---------- Trust and Safety ----------
const TrustAndSafety = () => {
const pillars = [
{
title: "Verified Identity",
copy: "Every sitter passes a strict ID and background check before they can accept bookings.",
icon: ,
tone: "mint",
},
{
title: "Pet First Aid",
copy: "Look for the first-aid badge. Many of our sitters are trained to handle emergencies.",
icon: ,
tone: "coral",
},
{
title: "Centralized Records",
copy: "Diet, medication, and vet details are shared securely. No miscommunication.",
icon: ,
tone: "butter",
},
];
const toneBg = { mint: "bg-mint text-forest", butter: "bg-butter text-[#6a4f00]", coral: "bg-coralSoft text-coral" };
return (
{pillars.map((p, i) => (
{p.icon}
{p.title}
{p.copy}
))}
);
};
// ---------- Owner Testimonials ----------
const InitialAvatar = ({ name, tone = "mint" }) => {
const palette = {
mint: "bg-mint text-forest",
butter: "bg-butter text-[#6a4f00]",
coral: "bg-coralSoft text-coral",
forest: "bg-forest text-cream",
};
return (
{name.trim()[0]}
);
};
const OwnerTestimonials = () => {
const ts = [
{
q: "Luna needs medication twice a day. On StayWise I found a sitter with first-aid experience, and the daily photos completely put my mind at ease.",
n: "Mariana S.",
r: "Dog Owner, Madrid",
tone: "mint",
},
{
q: "The pet profile is genius. I only had to write out Max's allergies and routine once. Every sitter I contacted already knew exactly what to expect.",
n: "David K.",
r: "Cat Owner, Berlin",
tone: "coral",
},
{
q: "It's so much more professional than finding someone on social media. The secure payment and clear check-in process make a huge difference.",
n: "Elena V.",
r: "Pet Owner, Amsterdam",
tone: "butter",
},
];
return (
{ts.map((t, i) => (
{[0, 1, 2, 3, 4].map((s) => (
))}
"{t.q}"
{t.n}
{t.r}
))}
);
};
// ---------- Contact form ----------
const FORMSPREE_PLACEHOLDER = "https://formspree.io/f/REPLACE_WITH_YOUR_FORM_ID";
const getFormspreeEndpoint = () =>
window.STAYWISE_CONFIG?.formspreeEndpoint ||
window.STAYWISE_FORMSPREE_ENDPOINT ||
FORMSPREE_PLACEHOLDER;
const isFormspreeEndpointConfigured = (endpoint) =>
/^https:\/\/formspree\.io\/f\/[A-Za-z0-9]+$/.test(endpoint) &&
!endpoint.includes("REPLACE_WITH_YOUR_FORM_ID");
const ContactForm = ({ audience = "pets" }) => {
const [sent, setSent] = React.useState(false);
const [sending, setSending] = React.useState(false);
const [error, setError] = React.useState("");
const formspreeEndpoint = getFormspreeEndpoint();
const onSubmit = async (e) => {
e.preventDefault();
setError("");
if (!isFormspreeEndpointConfigured(formspreeEndpoint)) {
setError("Contact form is not connected yet. Add your Formspree endpoint in src/formspree-config.js.");
return;
}
const form = e.currentTarget;
const data = new FormData(form);
data.set("_subject", "New StayWise contact request");
data.set("source_page", window.location.href);
data.set("language", window.SW_I18N?.lang || "en");
setSending(true);
try {
const response = await fetch(formspreeEndpoint, {
method: "POST",
body: data,
headers: { Accept: "application/json" },
});
if (!response.ok) {
setError("Could not send your message. Please try again.");
return;
}
form.reset();
setSent(true);
} catch {
setError("Could not send your message. Please try again.");
} finally {
setSending(false);
}
};
return (
Get in touch
{audience === "pets"
? "Excited to find the perfect pet sitter?"
: "Ready to start using StayWise?"}
{audience === "pets"
? "Leave your contact and we will let you know when it's ready."
: "Contact our team and get early access to the platform."}