[V0_FILE]typescriptreact:file="components/contact-form.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface ContactFormProps { onSubmit: (data: any) => void onBack: () => void } export function ContactForm({ onSubmit, onBack }: ContactFormProps) { const [formData, setFormData] = useState({ name: "", clinic: "", email: "", phoneCode: "+44", phone: "", }) const countryCodes = [ { code: "+44", label: "🇬🇧 UK (+44)" }, { code: "+1", label: "🇺🇸 USA (+1)" }, { code: "+61", label: "🇦🇺 Australia (+61)" }, { code: "+1-CA", label: "🇨🇦 Canada (+1)" }, { code: "+33", label: "🇫🇷 France (+33)" }, { code: "+49", label: "🇩🇪 Germany (+49)" }, { code: "+39", label: "🇮🇹 Italy (+39)" }, { code: "+34", label: "🇪🇸 Spain (+34)" }, ] const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (formData.name && formData.email && formData.phone) { onSubmit(formData) } } const isValid = formData.name && formData.email && formData.phone return (

Let's get in touch

We'll book your free pilot call and send you the full breakdown.

Your name setFormData({ ...formData, name: e.target.value })} className="h-11" />

Clinic name (optional) setFormData({ ...formData, clinic: e.target.value })} className="h-11" />

Email setFormData({ ...formData, email: e.target.value })} className="h-11" />

Phone number

setFormData({ ...formData, phone: e.target.value })} className="flex-1 h-11" />

Not a promise — based on results we've already seen with UK clinics.

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono, Poppins } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) const _poppins = Poppins({ weight: ["400", "500", "600", "700", "800"], subsets: ["latin"] }) export const metadata: Metadata = { title: "XFo Group - Estate Agent AI Revenue Calculator", description: "Discover how much revenue your agency is missing. Calculate your AI ROI in minutes.", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); /* Add teal and burnt orange accent colors */ --teal: #20aaad; --burnt-orange: #e27d02; } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Poppins", "Poppins Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Custom slider and button styles for teal and burnt orange */ [type="range"] { accent-color: #20aaad; } .slider-track { background: #20aaad; } .button-next { background-color: #e27d02; color: white; } .button-next:hover { background-color: #c86a01; } [V0_FILE]typescriptreact:file="components/calculator-form.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Slider } from "@/components/ui/slider" interface FormData { websiteUrl: string monthlyVisitors: number directoryEnquiries: number conversionRate: string averageFee: number frustration: string } interface CalculatorFormProps { onSubmit: (data: FormData) => void } export function CalculatorForm({ onSubmit }: CalculatorFormProps) { const [currentStep, setCurrentStep] = useState(1) const [formData, setFormData] = useState({ websiteUrl: "", monthlyVisitors: 1500, directoryEnquiries: 30, conversionRate: "1–2%", averageFee: 55, frustration: "", }) useEffect(() => { const style = document.createElement("style") style.innerHTML = ` [data-state="checked"] { background-color: #20AAAD !important; border-color: #20AAAD !important; } [data-state="checked"]::after { background-color: #20AAAD !important; } ` document.head.appendChild(style) return () => document.head.removeChild(style) }, []) const handleNext = () => { if (currentStep < 3) { setCurrentStep(currentStep + 1) } else { onSubmit(formData) } } const handlePrevious = () => { if (currentStep > 1) { setCurrentStep(currentStep - 1) } } const isStepValid = () => { if (currentStep === 1) return formData.websiteUrl && formData.monthlyVisitors > 0 if (currentStep === 2) return formData.conversionRate && formData.averageFee > 0 if (currentStep === 3) return formData.frustration return false } return (

Step {currentStep} of 3

{currentStep === 1 && "Tell us about your clinic"} {currentStep === 2 && "Your current performance"} {currentStep === 3 && "Your biggest challenge"} {currentStep === 1 && ( <>

Website URL setFormData({ ...formData, websiteUrl: e.target.value })} className="h-11" />

This helps us estimate your current enquiry potential.

Monthly website visitors {formData.monthlyVisitors.toLocaleString()}

setFormData({ ...formData, monthlyVisitors: value[0] })} className="w-full [&>span>span]:bg-[#20AAAD] [&>span>span]:border-2 [&>span>span]:border-[#20AAAD]" />

Most UK clinics fall between 500–3,000.

Monthly directory & Google enquiries {formData.directoryEnquiries.toLocaleString()}

setFormData({ ...formData, directoryEnquiries: value[0] })} className="w-full [&>span>span]:bg-[#20AAAD] [&>span>span]:border-2 [&>span>span]:border-[#20AAAD]" />

Google Business, directories, and referral platforms.

)} {currentStep === 2 && ( <>

What % of your enquiries turn into booked appointments? setFormData({ ...formData, conversionRate: value })} >

Under 1% — We barely convert anything

1–2% — Steady, but nothing special

3–5% — Decent, could be better

5%+ — We're pretty strong already

Average fee per patient session £{formData.averageFee.toLocaleString()}

setFormData({ ...formData, averageFee: value[0] })} className="w-full [&>span>span]:bg-[#20AAAD] [&>span>span]:border-2 [&>span>span]:border-[#20AAAD]" />

Most UK Osteo, Chiro, and Physio clinics charge £45–£80 per session.

)} {currentStep === 3 && ( <>

What frustrates you most about handling patient enquiries? setFormData({ ...formData, frustration: value })} > {[ "Missed calls and slow response times", "Lots of enquiries but few booked appointments", "Reception overwhelmed with repetitive questions", "Potential patients go elsewhere before we reply", "Honestly… all of the above", ].map((option) => (

{option}

))}

This helps us customise your AI ROI report.

)}

Not a promise — based on results we've already seen with UK clinics.

) } [V0_FILE]typescriptreact:file="components/booking-page.tsx" isEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" export function BookingPage() { const handleBookingClick = () => { // Replace with your GoHighLevel booking link window.open("https://calendar.google.com/calendar/u/0/r", "_blank") } return (

You're almost there.

Book a free call with our team to see your AI assistant in action.

We'll show you exactly how the AI handles your patient enquiries, and you'll get your full ROI breakdown tailored to your clinic's numbers.

What to expect:

✓ {item}

See your AI assistant in action and get your full ROI breakdown.

Not a promise — based on results we've already seen with UK clinics.

) } [V0_FILE]typescriptreact:file="components/results-page.tsx" isEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" interface ResultsPageProps { results: { totalMonthlyLeads: number extraBookingsPerMonth: number extraPatientsPerYear: number monthlyRevenueIncrease: number monthlyTimeSavedHours: number netMonthlyROI: number roiPercent: number monthlyFee: number annualRevenueIncrease: number } onContinue: () => void } export function ResultsPage({ results, onContinue }: ResultsPageProps) { const roiMultiplier = (results.monthlyRevenueIncrease / results.monthlyFee).toFixed(1) return (

{/* Main Headline */}

Your clinic may be missing out on{" "} £{results.annualRevenueIncrease.toLocaleString()} every year — from the traffic you already have.

Here's what AI-powered patient enquiry handling could unlock for you.

{/* Stat Cards */}

{results.extraBookingsPerMonth}

Extra appointment bookings per month

{results.extraPatientsPerYear}

Extra new patients per year

£{results.monthlyRevenueIncrease.toLocaleString()}

Extra revenue per month (estimated)

{/* Time Saved Card */}

Hours your team gets back every month:

{results.monthlyTimeSavedHours} hours

{/* ROI Section */} Your Monthly ROI Breakdown

Monthly uplift £{results.monthlyRevenueIncrease.toLocaleString()}

Our fee £{results.monthlyFee.toLocaleString()}

Net ROI £{results.netMonthlyROI.toLocaleString()}

ROI Multiple

{roiMultiplier}x

Most clinics see uplift within 30 days.

Your 3-Month Journey with Us

Month 1

30-Day Trial

Refinement, training & optimisation

Month 2

Multichannel Rollout

Website, phone, SMS & more

Month 3

Lead Recovery Automation

Fully installed & capturing lost leads

{/* CTA */}

Not a promise — based on results we've already seen with UK clinics.

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { CalculatorForm } from "@/components/calculator-form" import { ResultsPage } from "@/components/results-page" import { ContactForm } from "@/components/contact-form" import { BookingPage } from "@/components/booking-page" export default function Home() { const [step, setStep] = useState<"form" | "results" | "contact" | "booking">("form") const [formData, setFormData] = useState({ websiteUrl: "", monthlyVisitors: 1500, directoryEnquiries: 30, conversionRate: "1–2%", averageFee: 55, frustration: "", }) const [results, setResults] = useState(null) const handleFormSubmit = (data: any) => { setFormData(data) const calcs = calculateResults(data) setResults(calcs) setStep("results") } const handleContactSubmit = (contactData: any) => { setFormData((prev) => ({ ...prev, ...contactData })) setStep("booking") } const calculateResults = (data: any) => { // A. Total Monthly Leads (website + directory enquiries) const websiteLeads = data.monthlyVisitors * 0.02 // Higher engagement rate for health searches const totalMonthlyLeads = websiteLeads + data.directoryEnquiries // B. Current Bookings Per Month const conversionRates: Record = { "Under 1%": 0.008, "1–2%": 0.015, "3–5%": 0.04, "5%+": 0.06, } const currentConversionRate = conversionRates[data.conversionRate] || 0.015 const currentBookingsPerMonth = totalMonthlyLeads * currentConversionRate // C. AI-Improved Conversion Rate const aiRates: Record = { "Under 1%": 0.025, "1–2%": 0.04, "3–5%": 0.07, "5%+": 0.075, } const aiConversionRate = aiRates[data.conversionRate] || 0.04 const aiGeneratedBookings = totalMonthlyLeads * aiConversionRate const extraBookingsPerMonth = aiGeneratedBookings - currentBookingsPerMonth // D. Extra Patients Per Year (assuming ~70% of bookings become ongoing patients) const patientRetentionRatio = 0.7 const extraPatientsPerYear = extraBookingsPerMonth * patientRetentionRatio * 12 // E. Extra Revenue Calculations (average 4 sessions per new patient) const avgSessionsPerPatient = 4 const annualRevenueIncrease = extraPatientsPerYear * data.averageFee * avgSessionsPerPatient const monthlyRevenueIncrease = annualRevenueIncrease / 12 // F. Time Saved Calculation (8 mins per enquiry handled) const monthlyTimeSavedHours = (totalMonthlyLeads * 8) / 60 const calculateMonthlyFee = (leads: number, directoryEnquiries: number) => { const totalEnquiries = leads + directoryEnquiries if (totalEnquiries <= 50) return 297 if (totalEnquiries <= 100) return 397 if (totalEnquiries <= 200) return 497 if (totalEnquiries <= 400) return 697 if (totalEnquiries <= 600) return 897 return 1197 } const monthlyFee = calculateMonthlyFee(totalMonthlyLeads, data.directoryEnquiries) // G. ROI Calculation const netMonthlyROI = monthlyRevenueIncrease - monthlyFee const roiPercent = (monthlyRevenueIncrease / monthlyFee) * 100 return { totalMonthlyLeads: Math.round(totalMonthlyLeads), currentBookingsPerMonth: Math.round(currentBookingsPerMonth * 10) / 10, extraBookingsPerMonth: Math.round(extraBookingsPerMonth * 10) / 10, extraPatientsPerYear: Math.round(extraPatientsPerYear), annualRevenueIncrease: Math.round(annualRevenueIncrease), monthlyRevenueIncrease: Math.round(monthlyRevenueIncrease), monthlyTimeSavedHours: Math.round(monthlyTimeSavedHours * 10) / 10, monthlyFee, netMonthlyROI: Math.round(netMonthlyROI), roiPercent: Math.round(roiPercent), } } return (

{step === "form" && } {step === "results" && results && setStep("contact")} />} {step === "contact" && setStep("results")} />} {step === "booking" && }

) }