[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": "next lint" }, "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", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "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": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { HeroSection } from "@/components/hero-section" import { CalculatorForm } from "@/components/calculator-form" import { ResultsDisplay } from "@/components/results-display" export default function Home() { const [step, setStep] = useState<"hero" | "form" | "results">("hero") const [results, setResults] = useState<{ lostFromNewLeads: number lostFromUpsell: number lostFromAgedLeads: number totalLostRevenue: number } | null>(null) const handleStart = () => { setStep("form") } const handleCalculate = async (data: { businessType: string newLeads: number currentCustomers: number agedLeads: number name: string phone: string email: string }) => { // Industry-specific multipliers const industryMultipliers: Record = { "Real Estate": { avgRevenue: 5000, conversionRate: 0.05, upsell: 3000 }, Insurance: { avgRevenue: 800, conversionRate: 0.08, upsell: 500 }, "Financial Services": { avgRevenue: 1200, conversionRate: 0.07, upsell: 800 }, "Home Services": { avgRevenue: 400, conversionRate: 0.1, upsell: 300 }, "Legal Services": { avgRevenue: 2000, conversionRate: 0.06, upsell: 1500 }, Healthcare: { avgRevenue: 600, conversionRate: 0.09, upsell: 400 }, "B2B Services": { avgRevenue: 3000, conversionRate: 0.05, upsell: 2000 }, Other: { avgRevenue: 500, conversionRate: 0.07, upsell: 350 }, } const multiplier = industryMultipliers[data.businessType] || industryMultipliers["Other"] // Calculate lost revenue const lostFromNewLeads = data.newLeads * multiplier.conversionRate * multiplier.avgRevenue const lostFromUpsell = data.currentCustomers * multiplier.upsell * 0.15 // 15% upsell opportunity const lostFromAgedLeads = data.agedLeads * (multiplier.conversionRate * 0.5) * (multiplier.avgRevenue * 0.6) const totalLostRevenue = lostFromNewLeads + lostFromUpsell + lostFromAgedLeads setResults({ lostFromNewLeads, lostFromUpsell, lostFromAgedLeads, totalLostRevenue, }) setStep("results") try { await fetch("https://hook.us2.make.com/j3eoqdc312sy1xlvc8ehc3drqdtsauef", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ // Contact Information name: data.name, phone: data.phone, email: data.email, // Business Metrics businessType: data.businessType, newLeadsPerMonth: data.newLeads, currentCustomers: data.currentCustomers, agedLeads: data.agedLeads, // Calculated Results lostFromNewLeads: Math.round(lostFromNewLeads), lostFromUpsell: Math.round(lostFromUpsell), lostFromAgedLeads: Math.round(lostFromAgedLeads), totalLostRevenueMonthly: Math.round(totalLostRevenue), totalLostRevenueAnnual: Math.round(totalLostRevenue * 12), // Metadata submittedAt: new Date().toISOString(), }), }) } catch (error) { console.error("Failed to send webhook:", error) // Continue showing results even if webhook fails } } const handleReset = () => { setStep("hero") setResults(null) } return (

{step === "hero" && } {step === "form" && } {step === "results" && results && }

) } [V0_FILE]css:file="app/globals.css" isEdit="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated to dark futuristic theme with cyan/purple accents */ --background: oklch(0.12 0.02 265); --foreground: oklch(0.98 0.01 265); --card: oklch(0.16 0.02 265); --card-foreground: oklch(0.98 0.01 265); --popover: oklch(0.16 0.02 265); --popover-foreground: oklch(0.98 0.01 265); --primary: oklch(0.7 0.2 195); --primary-foreground: oklch(0.12 0.02 265); --secondary: oklch(0.22 0.03 265); --secondary-foreground: oklch(0.98 0.01 265); --muted: oklch(0.22 0.03 265); --muted-foreground: oklch(0.65 0.05 265); --accent: oklch(0.65 0.25 310); --accent-foreground: oklch(0.98 0.01 265); --destructive: oklch(0.6 0.25 25); --destructive-foreground: oklch(0.98 0.01 265); --border: oklch(0.25 0.03 265); --input: oklch(0.25 0.03 265); --ring: oklch(0.7 0.2 195); --chart-1: oklch(0.7 0.2 195); --chart-2: oklch(0.65 0.25 310); --chart-3: oklch(0.75 0.2 150); --chart-4: oklch(0.7 0.25 280); --chart-5: oklch(0.75 0.2 60); --radius: 0.75rem; --sidebar: oklch(0.16 0.02 265); --sidebar-foreground: oklch(0.98 0.01 265); --sidebar-primary: oklch(0.7 0.2 195); --sidebar-primary-foreground: oklch(0.12 0.02 265); --sidebar-accent: oklch(0.22 0.03 265); --sidebar-accent-foreground: oklch(0.98 0.01 265); --sidebar-border: oklch(0.25 0.03 265); --sidebar-ring: oklch(0.7 0.2 195); } @theme inline { --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; } } /* Added futuristic animation keyframes */ @keyframes float { 0%, 100% { transform: translateY(0px) translateX(0px); } 33% { transform: translateY(-20px) translateX(10px); } 66% { transform: translateY(10px) translateX(-10px); } } @keyframes pulse-glow { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.05); } } @keyframes scan-line { 0% { transform: translateY(-100%); } 100% { transform: translateY(100vh); } } @keyframes grid-move { 0% { transform: translateY(0); } 100% { transform: translateY(50px); } } @keyframes particle-float { 0%, 100% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translate(100px, -100px); opacity: 0; } } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" "use client" import { Button } from "@/components/ui/button" import { ArrowRight, TrendingDown } from "lucide-react" interface HeroSectionProps { onStart: () => void } export function HeroSection({ onStart }: HeroSectionProps) { return (

{/* Animated grid */}

{/* Floating orbs with glow */}

{/* Scan line effect */}

{/* Particle effects */} {[...Array(20)].map((_, i) => (

))}

{/* Badge */}

Free Revenue Analysis

{/* Main headline */}

Discover the{" "} hidden revenue you're leaving on the table

{/* Subheadline */}

Most businesses lose thousands in potential revenue from unconverted leads, missed upsells, and aged opportunities. Find out exactly how much in under 2 minutes.

{/* CTA Button */} {/* Trust indicators */}

No credit card required

Takes less than 2 minutes

Instant results

) } [V0_FILE]typescriptreact:file="components/calculator-form.tsx" isEdit="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { ArrowRight, Building2, Users, TrendingUp, Clock } from "lucide-react" interface CalculatorFormProps { onCalculate: (data: { businessType: string newLeads: number currentCustomers: number agedLeads: number name: string phone: string email: string }) => void } export function CalculatorForm({ onCalculate }: CalculatorFormProps) { const [formStep, setFormStep] = useState(1) const [formData, setFormData] = useState({ businessType: "", newLeads: "", currentCustomers: "", agedLeads: "", name: "", phone: "", email: "", }) const handleNext = () => { if (formStep < 2) { setFormStep(formStep + 1) } } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() onCalculate({ businessType: formData.businessType, newLeads: Number(formData.newLeads), currentCustomers: Number(formData.currentCustomers), agedLeads: Number(formData.agedLeads), name: formData.name, phone: formData.phone, email: formData.email, }) } const isStep1Valid = formData.businessType && formData.newLeads && formData.currentCustomers && formData.agedLeads const isStep2Valid = formData.name && formData.phone && formData.email return (

{/* Hexagon pattern */}

{/* Rotating rings */}

{/* Glowing corners */}

{/* Progress indicator */}

= 1 ? "bg-primary text-primary-foreground border-primary shadow-[0_0_20px_oklch(0.7_0.2_195/0.5)]" : "bg-muted text-muted-foreground border-border" }`} > 1

= 2 ? "bg-primary shadow-[0_0_10px_oklch(0.7_0.2_195/0.5)]" : "bg-muted"}`} />

= 2 ? "bg-primary text-primary-foreground border-primary shadow-[0_0_20px_oklch(0.7_0.2_195/0.5)]" : "bg-muted text-muted-foreground border-border" }`} > 2

Step {formStep} of 2

{formStep === 1 ? "Tell us about your business" : "Get your personalized report"} {formStep === 1 ? "Help us calculate your potential lost revenue" : "Enter your details to receive your complete analysis"}

{formStep === 1 && (

Type of Business

New Leads Per Month setFormData({ ...formData, newLeads: e.target.value })} className="h-12 text-base border-primary/30 focus:border-primary focus:ring-primary/20" min="0" />

Current Customers (Available for Upsell) setFormData({ ...formData, currentCustomers: e.target.value })} className="h-12 text-base border-primary/30 focus:border-primary focus:ring-primary/20" min="0" />

Aged Leads (Inactive/Not Followed Up) setFormData({ ...formData, agedLeads: e.target.value })} className="h-12 text-base border-primary/30 focus:border-primary focus:ring-primary/20" min="0" />

)} {formStep === 2 && (

Full Name setFormData({ ...formData, name: e.target.value })} className="h-12 text-base border-primary/30 focus:border-primary focus:ring-primary/20" required />

Phone Number setFormData({ ...formData, phone: e.target.value })} className="h-12 text-base border-primary/30 focus:border-primary focus:ring-primary/20" required />

Email Address setFormData({ ...formData, email: e.target.value })} className="h-12 text-base border-primary/30 focus:border-primary focus:ring-primary/20" required />

)}

) } [V0_FILE]typescriptreact:file="components/results-display.tsx" isEdit="true" "use client" import { useEffect, useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { TrendingDown, Users, Clock, DollarSign, ArrowRight, RefreshCw } from "lucide-react" interface ResultsDisplayProps { results: { lostFromNewLeads: number lostFromUpsell: number lostFromAgedLeads: number totalLostRevenue: number } onReset: () => void } function AnimatedNumber({ value, duration = 2000 }: { value: number; duration?: number }) { const [displayValue, setDisplayValue] = useState(0) useEffect(() => { let startTime: number let animationFrame: number const animate = (currentTime: number) => { if (!startTime) startTime = currentTime const progress = Math.min((currentTime - startTime) / duration, 1) // Easing function for smooth animation const easeOutQuart = 1 - Math.pow(1 - progress, 4) setDisplayValue(Math.floor(value * easeOutQuart)) if (progress < 1) { animationFrame = requestAnimationFrame(animate) } } animationFrame = requestAnimationFrame(animate) return () => cancelAnimationFrame(animationFrame) }, [value, duration]) return <>${displayValue.toLocaleString()} } export function ResultsDisplay({ results, onReset }: ResultsDisplayProps) { return (

{/* Digital rain effect */} {[...Array(30)].map((_, i) => (

))} {/* Radial gradient orbs */}

{/* Circuit board pattern */}

{/* Floating data particles */} {[...Array(15)].map((_, i) => (

))}

{/* Header */}

Revenue Analysis Complete

You're potentially losing

in revenue every month from unconverted opportunities

{/* Breakdown Cards */}

New Leads Unconverted monthly leads

Lost from leads not followed up or converted

Upsell Opportunities Existing customer potential

Missed revenue from current customers

Aged Leads Inactive lead database

Potential from re-engaging old leads

{/* Annual Projection */}

Annual Lost Revenue

If this pattern continues for 12 months

{/* CTA Section */}

Ready to recover this lost revenue?

Our team specializes in helping businesses like yours convert more leads, maximize upsells, and re-engage aged opportunities. Let's discuss your custom strategy.

) }