[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" "use client" import { useState, useRef } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { TrendingUp, Clock, Zap, Brain, Eye, RefreshCw, Users, BarChart3, Loader2, X, Lock, CheckCircle, Download, Mail, } from "lucide-react" type FlowState = | "initial" | "generating" | "ready-for-email" | "otp-modal" | "preview-modal" | "pricing-plans" | "payment-modal" | "success-modal" export default function WinCardLanding() { const [flowState, setFlowState] = useState("initial") const [email, setEmail] = useState("") const [otp, setOtp] = useState(["", "", "", "", "", ""]) const [companyUrl, setCompanyUrl] = useState("") const [competitorUrl, setCompetitorUrl] = useState("") const [showToast, setShowToast] = useState(false) const [selectedPlan, setSelectedPlan] = useState<"single" | "bundle" | "premium">("single") const generatorRef = useRef(null) const handleGenerateBattlecard = () => { // Start generation process setFlowState("generating") // Simulate AI generation process setTimeout(() => { setFlowState("ready-for-email") }, 4000) } const handleVerifyEmail = () => { // Send OTP to email setFlowState("otp-modal") setShowToast(true) setTimeout(() => setShowToast(false), 3000) } const handleOtpChange = (index: number, value: string) => { if (value.length <= 1) { const newOtp = [...otp] newOtp[index] = value setOtp(newOtp) // Auto-focus next input if (value && index < 5) { const nextInput = document.getElementById(`otp-${index + 1}`) nextInput?.focus() } } } const handleVerifyOTP = () => { // Verify OTP and show preview setFlowState("preview-modal") } const handleUpgradeFromPreview = () => { setFlowState("pricing-plans") } const handlePurchase = () => { setFlowState("payment-modal") } const handleCompletePayment = () => { // Simulate payment processing setTimeout(() => { setFlowState("success-modal") }, 2000) } const closeModal = () => { setFlowState("initial") setOtp(["", "", "", "", "", ""]) setEmail("") } const scrollToGenerator = () => { generatorRef.current?.scrollIntoView({ behavior: "smooth", block: "center", }) } return (

{/* Header */}

{/* Hero Section */}

{/* Compact Header with Badge and Main Heading */}

Competitive Intelligence Made Simple

Win Every Deal with AI-Powered Battlecards

{/* Supporting Value Proposition */}

WinCard delivers highly actionable, deal-ready sales battlecards that help your reps win against top competitors — fast.

{/* Secondary CTA Buttons */}

{/* Statistics */}

85%

Higher Win Rate

3min

Setup Time

Faster Deals

{/* Battlecard Form */} {flowState === "initial" && ( <>

Generate Your Battlecard

Enter your company and competitor URLs to get started

{/* Company Website Input */}

Your Company Website setCompanyUrl(e.target.value)} className="w-full h-12 text-lg bg-white border-gray-300 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all duration-200 font-light" />

{/* Competitor Website */}

Competitor Website setCompetitorUrl(e.target.value)} className="w-full h-12 text-lg bg-white border-gray-300 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all duration-200 font-light" />

{/* Generate CTA */}

Free to generate • No credit card required

)} {flowState === "generating" && (

Creating Your Battlecard

Our AI is analyzing your competitors and crafting your winning strategy...

Analyzing competitive landscape...

)} {flowState === "ready-for-email" && (

Your Battlecard is Ready!

We've created a comprehensive competitive analysis for you. Just verify your email to access it.

{/* Email Input */}

Your Email Address setEmail(e.target.value)} className="w-full h-12 text-lg bg-white border-gray-300 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition-all duration-200 font-light" required />

We'll send a quick verification code to your email

)} {/* Why Sales Teams Choose WinCard Section */}

Why Sales Teams Choose WinCard

Stop losing deals to competitors. Get the intelligence you need to win more, sell faster, and close bigger deals.

{/* AI-Powered Analysis */}

AI-Powered Analysis

Advanced AI analyzes competitor websites, news, reports, and positioning to create comprehensive battlecards.

{/* Lightning Fast */}

Lightning Fast

Get competitive intelligence in minutes. Set up takes 3 minutes for urgent deals and quick decision making.

{/* Deal-Ready Insights */}

Deal-Ready Insights

Actionable talking points, objection handling, and competitive differentiation tailored for your sales team.

{/* Always Current */}

Always Current

Real-time monitoring ensures your battlecards stay updated with the latest competitor changes and market shifts.

{/* Team Collaboration */}

Team Collaboration

Share insights across your sales team with collaborative features and centralized competitive intelligence.

{/* Performance Tracking */}

Performance Tracking

Track win rates and measure the impact of competitive intelligence on your sales performance.

{/* Customer Testimonials Section */}

TRUSTED BY FAST-GROWING COMPANIES

What Our Customers Say

Join hundreds of sales teams winning more deals with WinCard

{/* Testimonial 1 */}

{[...Array(5)].map((_, i) => ( ★ ))}

"WinCard helped us increase our win rate by 45% against our biggest competitor. The insights are incredibly detailed and actionable."

Sarah Chen

VP Sales at TechFlow

{/* Testimonial 2 */}

{[...Array(5)].map((_, i) => ( ★ ))}

"What used to take our team weeks of research now happens in minutes. WinCard is a game-changer for competitive sales."

Marcus Rodriguez

Sales Director at CloudScale

{/* Testimonial 3 */}

{[...Array(5)].map((_, i) => ( ★ ))}

"The AI-powered battlecards give our reps exactly what they need to handle objections and position against competitors."

Jennifer Walsh

Head of Revenue at DataSync

{/* Footer CTA Section */} {/* Modal Overlay */} {(flowState === "otp-modal" || flowState === "preview-modal" || flowState === "pricing-plans" || flowState === "payment-modal" || flowState === "success-modal") && (

{/* OTP Verification Modal */} {flowState === "otp-modal" && (

Enter Verification Code

We've sent a 6-digit code to

{email}

Demo: Use code 123456

{otp.map((digit, index) => ( handleOtpChange(index, e.target.value)} className="w-12 h-12 text-center text-lg font-medium border-2 border-purple-200 focus:border-purple-500" /> ))}

)} {/* Pricing Plans Modal */} {flowState === "pricing-plans" && (

Choose Your Battlecard Package

Your competitive analysis is ready! Select the package that works best for you.

{/* Pricing Plans Grid */}

{/* Single Report Plan */}

setSelectedPlan("single")} >

Single Report

Perfect for analyzing one competitor

$5 $3

one-time payment

15+ detailed analysis sections
Battle-ready talking points
Objection handling scripts
Competitive positioning
Instant PDF delivery

{selectedPlan === "single" && (

)}

{/* Bundle Plan */}

setSelectedPlan("bundle")} >

Bundle Package

Analyze 2 competitors and save

$6 $5

$2.50 per report

Save $1 vs individual

Everything in Single Report
2 competitor battlecards
Cross-competitor insights
Market positioning map
Priority email support

{/* Premium Plan */}

setSelectedPlan("premium")} >

Premium Suite

Complete competitive intelligence

$15 $9

$1.80 per report

Save $6 vs individual

Everything in Bundle
5 competitor battlecards
Industry landscape analysis
Custom sales playbooks
30-day update guarantee

{selectedPlan === "premium" && (

)}

{/* Selected Plan Summary */}

Selected:{" "} {selectedPlan === "single" ? "Single Report" : selectedPlan === "bundle" ? "Bundle Package" : "Premium Suite"}

{selectedPlan === "single" && "1 competitor analysis with 15+ sections"} {selectedPlan === "bundle" && "2 competitor analyses with cross-insights"} {selectedPlan === "premium" && "5 competitor analyses with industry insights"}

${selectedPlan === "single" ? "3" : selectedPlan === "bundle" ? "5" : "9"}

one-time payment

{/* Continue Button */}

Secure payment

Instant email delivery

Immediate download

)} {flowState === "preview-modal" && (

Your Battlecard is Ready

Here's a preview of your AI-generated competitive intelligence

{/* Enhanced PDF Preview */}

{/* PDF Header */}

Sales Battlecard

Competitive Intelligence Report

Generated: {new Date().toLocaleDateString()}

Company: {companyUrl.replace("https://", "").replace("http://", "")}

{/* PDF Content */}

{/* Executive Summary */}

1 Executive Summary

Key Finding: Your company has a significant competitive advantage in pricing and customer support, while your main competitor leads in market presence and feature breadth. This battlecard provides specific talking points to leverage your strengths and address competitive challenges.

{/* Company Positioning */}

2 Your Company Positioning

Key Strengths

• 40% more cost-effective than competitors
• 24/7 customer support with 2-min response
• Enterprise-grade security compliance
• Seamless integration capabilities

Unique Value Props

• AI-powered automation features
• No setup fees or hidden costs
• 99.9% uptime guarantee
• Custom workflow builder

{/* Competitive Analysis */}

3 Competitor Analysis: {competitorUrl.replace("https://", "").replace("http://", "")}

Their Strengths

• Established market presence since 2015
• Comprehensive feature set with advanced analytics
• Strong brand recognition in enterprise segment

Their Weaknesses

• 60% higher pricing than market average
• Complex setup process (avg. 6 weeks)
• Limited customer support hours

{/* Battle-Ready Talking Points */}

4 Battle-Ready Talking Points

When they mention pricing:

"While [Competitor] might seem feature-rich, our clients save an average of $50,000 annually with our solution while getting faster implementation and better support. Let me show you our ROI calculator..."

When they mention features:

"Features are great, but what matters is results. Our AI-powered automation delivers the same outcomes with 70% less manual work. Plus, you'll be up and running in days, not months..."

{/* Enhanced Preview Limitation Overlay with FOMO */}

11+ Premium Sections Awaiting

Objection handling scripts, pricing strategies, win/loss analysis, competitive positioning maps, and battle-tested sales plays

✓ Instant download

{/* Blurred content preview with more sections */}

5 Objection Handling Scripts

• Pre-written responses to 15+ common objections
• Proven conversion rates and success metrics
• Tailored scripts for your specific industry
• Ready-to-use email and call templates

6 Pricing Strategy & ROI Analysis

• Detailed cost comparison matrix
• ROI calculators for your prospects
• Value-based pricing recommendations
• Competitive pricing intelligence

+ 9 More Premium Sections

Customer case studies, market trends, feature comparisons, and more...

)} {/* Payment Modal */} {flowState === "payment-modal" && (

Complete Purchase

Card Number

Expiry

CVC

Name on Card

{selectedPlan === "single" ? "Single Report" : selectedPlan === "bundle" ? "Bundle Package" : "Premium Suite"} ${selectedPlan === "single" ? "3.00" : selectedPlan === "bundle" ? "5.00" : "9.00"}

)} {/* Success Modal */} {flowState === "success-modal" && (

{/* Success Icon */}

{/* Success Message */}

Payment Successful!

Your battlecard is ready for download

{/* Email Notification */}

Download link sent to your email

{email}

Link expires in 24 hours for security

{/* Direct Download Button */}

Secure download • 15+ sections • Ready to use

{/* Upsell Section */}

Want to analyze more competitors?

Get additional battlecards for just $2.50 each (normally $3)

{/* Close Button */}

)}

)} {/* Toast Notification */} {showToast && (

OTP Sent

Verification code sent to {email}

)}

) }