Files
1d94a307-b19f-485c-8851-e12…/src/app/page.tsx
2026-03-03 08:15:40 +00:00

318 lines
18 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
"use client";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import AboutMetric from '@/components/sections/about/AboutMetric';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { AlertCircle, CheckCircle, Zap, Wrench, TrendingUp, Shield, Users, GitBranch, Layers } from 'lucide-react';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="small"
sizing="largeSmallSizeLargeTitles"
background="floatingGradient"
cardStyle="glass-depth"
primaryButtonStyle="flat"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
brandName="HostMind"
navItems={[
{ name: "Platform", id: "services" },
{ name: "Why Us", id: "positioning" },
{ name: "Results", id: "metrics" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" }
]}
button={{
text: "Schedule Audit", href: "contact"
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboardSplit
logoText="HOSTMIND"
description="Operations Infrastructure for Rental Hosts Scaling Beyond Chaos. Stop firefighting. Start building systems that work without you."
background={{ variant: "radial-gradient" }}
buttons={[
{ text: "Schedule Free Audit", href: "#contact" },
{ text: "See How It Works", href: "#services" }
]}
layoutOrder="default"
imageSrc="http://img.b2bpic.net/free-photo/businessman-studying-infographics-performance-metrics_482257-122632.jpg"
imageAlt="HostMind Operations Dashboard showing centralized control"
frameStyle="browser"
mediaAnimation="slide-up"
buttonAnimation="slide-up"
/>
</div>
<div id="problem-transformation" data-section="problem-transformation">
<FeatureCardTwentyFive
title="From Reactive Firefighting to Systematic Scaling"
description="The real problem isn't growth. It's what growth exposes: a fragile backend that collapses under pressure. We fix that."
tag="The Transformation"
features={[
{
title: "Before: Operational Breakdown", description: "Manual guest messaging across WhatsApp. Cleaner coordination on chat threads. Maintenance tickets scattered in Google Docs. Each new unit multiplies your workload. When you disappear for 48 hours, operations slow down.", icon: AlertCircle,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/view-office-desk-with-messy-workspace-laptop_23-2150282087.jpg?_wi=1", imageAlt: "Chaotic scattered tools and manual processes"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/view-office-desk-with-messy-workspace-laptop_23-2150282087.jpg?_wi=2", imageAlt: "Operational chaos before HostMind"
}
]
},
{
title: "After: Systems Architecture", description: "Automated guest flows respond to check-ins. Cleaners and maintenance routed through a central dashboard. SOPs tied to tasks, not Google Docs. Escalation logic handles edge cases. You add 5 new units and workload stays flat.", icon: CheckCircle,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-vector/business-infographic-with-image_23-2148340472.jpg?_wi=1", imageAlt: "Organized centralized operations system"
},
{
imageSrc: "http://img.b2bpic.net/free-vector/business-infographic-with-image_23-2148340472.jpg?_wi=2", imageAlt: "Systematic workflow after HostMind"
}
]
}
]}
animationType="depth-3d"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="services" data-section="services">
<FeatureCardTwentyFive
title="Three-Phase Build: Audit → Install → Optimize"
description="We don't just automate tools. We install operational architecture."
tag="Our Service"
features={[
{
title: "Phase 1: Operational Audit", description: "Complete tool-stack analysis. Workflow mapping. Bottleneck identification. We quantify manual labor and score automation opportunities. Deliverable: Custom Ops Roadmap (visualized).", icon: Zap,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/business-executives-having-meeting_1098-18316.jpg?_wi=1", imageAlt: "Business analysis and workflow mapping"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/business-executives-having-meeting_1098-18316.jpg?_wi=2", imageAlt: "Audit process documentation"
}
]
},
{
title: "Phase 2: System Install", description: "Guest Messaging Engine (automated pre-arrival, check-in, FAQ resolution, escalation logic). Cleaner & Maintenance Routing (structured turnover, priority tagging, central visibility). Ops Command Center (SOP-linked tasks, role-based access, exception tracking). Goal: Automate 7080% of predictable workflows.", icon: Wrench,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/data-center-supervisor-overseeing-admin-using-pc-visualize-ai-node-trees_482257-125205.jpg?_wi=1", imageAlt: "System implementation and automation setup"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/data-center-supervisor-overseeing-admin-using-pc-visualize-ai-node-trees_482257-125205.jpg?_wi=2", imageAlt: "Infrastructure build process"
}
]
},
{
title: "Phase 3: Optimization & Oversight", description: "Not a handover. Monthly system health audits. Flow refinement. Automation performance review. Growth scaling adjustments. New listing onboarding templates. Continuous SOP evolution. This is what separates us from one-time automation guys.", icon: TrendingUp,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/woman-watching-business-conference-computer-screen-looking-statistics_482257-125563.jpg?_wi=1", imageAlt: "Performance monitoring and continuous improvement"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/woman-watching-business-conference-computer-screen-looking-statistics_482257-125563.jpg?_wi=2", imageAlt: "Optimization and metrics analysis"
}
]
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardFourteen
title="The Math of Operational Adulthood: If a host adds 5 new units at £1.5k/month each, that's £7.5k new revenue. Our system makes that operationally possible. Your service cost becomes negligible."
tag="Revenue Impact"
metrics={[
{
id: "1", value: "7080%", description: "Predictable workflows automated, reducing manual overhead and human error."
},
{
id: "2", value: "48h", description: "Founder can disappear for 2 days without operations degrading—the system runs autonomously."
},
{
id: "3", value: "525", description: "Unit portfolio range. We specialize in this sweet spot—big enough to need systems, small enough for customization."
},
{
id: "4", value: "£7.5k", description: "Revenue from 5 new units at £1.5k/month each. Our infrastructure cost is negligible ROI."
}
]}
metricsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="positioning" data-section="positioning">
<AboutMetric
title="Why HostMind Is Different: We Build Infrastructure, Not Services"
useInvertedBackground={true}
metrics={[
{
icon: Shield,
label: "vs. Co-Hosts", value: "No Revenue Share"
},
{
icon: Users,
label: "vs. VA Agencies", value: "System First"
},
{
icon: GitBranch,
label: "vs. Automation Freelancers", value: "STR Expertise"
},
{
icon: Layers,
label: "vs. PMS", value: "Above PMS Layer"
}
]}
metricsAnimation="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
title="Proven Results from Operators Like You"
description="Hear from hosts who've moved from operational stress to systematic scale."
tag="Client Success"
testimonials={[
{
id: "1", name: "Sarah Chen", role: "Founder & Operator", company: "Chen Properties (12 units)", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1", imageAlt: "Sarah Chen"
},
{
id: "2", name: "James Murphy", role: "Managing Partner", company: "Murphy Hospitality (18 units)", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-serious-businessman-looking-camera-meeting-headshot-portrait_1163-3923.jpg", imageAlt: "James Murphy"
},
{
id: "3", name: "Emma Rodriguez", role: "Operations Lead", company: "Coastal Stays (15 units)", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2", imageAlt: "Emma Rodriguez"
},
{
id: "4", name: "David Kwon", role: "Portfolio Owner", company: "Urban Rentals (22 units)", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg?_wi=1", imageAlt: "David Kwon"
},
{
id: "5", name: "Lisa Thompson", role: "Founder", company: "Luxury Estates (20 units)", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3", imageAlt: "Lisa Thompson"
},
{
id: "6", name: "Marcus Green", role: "Director of Operations", company: "Green Hospitality (25 units)", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg?_wi=2", imageAlt: "Marcus Green"
}
]}
gridVariant="uniform-all-items-equal"
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
title="Frequently Asked Questions"
description="Everything you need to know about HostMind's approach to operations infrastructure."
tag="FAQ"
faqs={[
{
id: "1", title: "What makes HostMind different from a VA agency?", content: "VAs execute tasks. We build the system that eliminates the need for those tasks. We systemize first, then automate. You scale your portfolio without scaling your team proportionally."
},
{
id: "2", title: "Do you replace my PMS?", content: "No. We operate above the PMS layer. Your PMS handles booking, rates, and calendar sync. We handle everything else—guest communication flows, cleaner routing, maintenance pipelines, SOP enforcement, and the operational logic that ties it all together."
},
{
id: "3", title: "How long does the build take?", content: "Phase 1 (Audit): 23 weeks. Phase 2 (System Install): 46 weeks. Phase 3 (Optimization): Ongoing monthly. Total initial build: 69 weeks from start to live operations."
},
{
id: "4", title: "What if I'm currently using scattered tools (WhatsApp, Airtable, Google Sheets)?", content: "That's the norm. During the Audit, we map your current stack, identify what's working, and what's creating friction. We consolidate tools, eliminate redundancy, and build a unified backbone that connects everything."
},
{
id: "5", title: "Do you only work with hosts using specific PMS software?", content: "We work with all major PMS systems (Airbnb, Vrbo, Booking.com, Hostaway, etc.) and custom setups. The operations architecture we build sits on top of your PMS, so it's agnostic to which booking platform you use."
},
{
id: "6", title: "What's included in the retainer after Phase 2?", content: "Monthly system health audits, flow refinement based on new guest patterns, automation performance review (what's working, what needs tweaking), growth scaling adjustments as you add units, new listing onboarding templates, and continuous SOP evolution. You're not abandoned—you're continuously optimized."
},
{
id: "7", title: "What's the minimum portfolio size?", content: "5 units. Below that, manual processes might suffice. We optimize for hosts scaling from 525 units who feel operational pressure but haven't yet built robust systems."
},
{
id: "8", title: "Can I see an example of the automated guest messaging flow?", content: "Absolutely. During your free Audit, we walk through a complete example: automated pre-arrival message → smart check-in flow → FAQ resolution logic → escalation triggers for edge cases → post-stay review automation. It's designed to reduce 80% of repetitive guest communication."
}
]}
textboxLayout="default"
useInvertedBackground={true}
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Get Started"
title="Ready to Stop Firefighting?"
description="Schedule your free Operational Audit. We'll map your current backend, identify bottlenecks, and show you exactly how HostMind can scale your portfolio without operational collapse."
background={{ variant: "rotated-rays-animated" }}
useInvertedBackground={false}
inputPlaceholder="your@email.com"
buttonText="Schedule Audit"
termsText="We'll send you audit details and availability options within 24 hours. No spam, no BS."
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-vector/technology-digital-concept-blue-background_1035-17972.jpg"
imageAlt="Digital technology background"
logoText="HostMind"
copyrightText="© 2025 HostMind. Operational Architecture for Rental Hosts."
columns={[
{
title: "Platform", items: [
{ label: "How It Works", href: "#services" },
{ label: "Pricing", href: "#" },
{ label: "Case Studies", href: "#" },
{ label: "Documentation", href: "#" }
]
},
{
title: "Company", items: [
{ label: "About HostMind", href: "#" },
{ label: "Blog", href: "#" },
{ label: "Careers", href: "#" },
{ label: "Contact", href: "#contact" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Security", href: "#" },
{ label: "Status", href: "#" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}