[V0_FILE]typescriptreact:file="app/components/faq-chatbot.tsx" isMerged="true" "use client" import type React from "react" import { MessageSquare } from "lucide-react" // FAQ data structure type FAQCategory = { id: string name: string description: string icon: React.ReactNode } type FAQItem = { id: string categoryId: string question: string answer: React.ReactNode relatedQuestions?: string[] } // Message types for the chat interface type Message = { id: string content: React.ReactNode sender: "bot" | "user" includeOptions?: boolean categoryId?: string } // Sample FAQ data const faqCategories: FAQCategory[] = [ { id: "technology", name: "About the Technology", description: "How ClikConvert works and what makes it unique", icon: , }, { id: "implementation", name: "Implementation", description: "How to get started and integrate with your site", icon: , }, { id: "results", name: "Results & ROI", description: "What results to expect and timeframes", icon: , }, { id: "pricing", name: "Pricing & Plans", description: "Pricing information and available plans", icon: , }, ] const faqItems: FAQItem[] = [ { id: "tech-1", categoryId: "technology", question: "How does ClikConvert identify anonymous website visitors?", answer: (

ClikConvert uses advanced visitor identification technology that works in three steps:

Captures anonymous visitor data when they land on your site
Matches this data against our proprietary database of business professionals
Identifies key decision-makers from companies that visit your website

This happens without requiring visitors to fill out any forms or provide contact information.

), relatedQuestions: ["tech-2", "tech-3"], }, { id: "tech-2", categoryId: "technology", question: "Is ClikConvert compliant with privacy regulations?", answer: (

Yes, ClikConvert is fully compliant with major privacy regulations including GDPR, CCPA, and other regional privacy laws.

Our technology only identifies business information that's already publicly available, and we follow strict data protection protocols to ensure compliance.

We never collect or process personally identifiable information (PII) without proper consent.

), relatedQuestions: ["tech-1", "tech-4"], }, { id: "tech-3", categoryId: "technology", question: "What information can ClikConvert provide about visitors?", answer: (

ClikConvert can identify:

Company name and industry
Company size and revenue
Key decision-makers and their roles
Contact information for outreach
Pages visited and time spent on site
Visit frequency and engagement patterns

This information helps you target the right people with personalized outreach.

), relatedQuestions: ["tech-1", "tech-4"], }, { id: "tech-4", categoryId: "technology", question: "How accurate is the visitor identification?", answer: (

ClikConvert achieves an industry-leading identification accuracy rate of over 85% for B2B visitors.

Our technology continuously improves through machine learning algorithms that refine identification methods based on results.

We focus on quality over quantity, ensuring that the leads we identify are highly relevant to your business.

), relatedQuestions: ["tech-1", "tech-3"], }, { id: "impl-1", categoryId: "implementation", question: "How long does it take to implement ClikConvert?", answer: (

Implementation is quick and straightforward:

Simple JavaScript snippet installation: 5 minutes
Account setup and configuration: 1 business day
Initial data collection period: 7-14 days
First campaign launch: Within 2 weeks

Our team handles most of the setup process, requiring minimal effort from your technical team.

), relatedQuestions: ["impl-2", "impl-3"], }, { id: "impl-2", categoryId: "implementation", question: "Do I need technical knowledge to use ClikConvert?", answer: (

No technical knowledge is required to use ClikConvert.

Implementation involves adding a simple JavaScript snippet to your website, which our team can help with if needed.

The platform features an intuitive dashboard designed for marketing and sales professionals, not technical users.

We provide full training and support throughout the onboarding process.

), relatedQuestions: ["impl-1", "impl-3"], }, { id: "impl-3", categoryId: "implementation", question: "Can ClikConvert integrate with my existing CRM?", answer: (

Yes, ClikConvert integrates seamlessly with most popular CRM systems, including:

Salesforce
HubSpot
Pipedrive
Zoho CRM
Microsoft Dynamics

We also offer an API for custom integrations with other systems.

Our integration ensures that identified leads and meeting bookings flow directly into your existing workflow.

), relatedQuestions: ["impl-1", "impl-4"], }, { id: "impl-4", categoryId: "implementation", question: "What support is provided during implementation?", answer: (

We provide comprehensive support throughout the implementation process:

Dedicated implementation specialist
Technical support for script installation
Configuration assistance
Training sessions for your team
Campaign setup guidance

After implementation, you'll have ongoing access to our customer success team and knowledge base.

), relatedQuestions: ["impl-1", "impl-2"], }, { id: "results-1", categoryId: "results", question: "How quickly will I see results with ClikConvert?", answer: (

Most clients begin seeing results within the first 30 days:

First 7 days: Visitor identification begins
Days 7-14: Initial outreach campaigns launch
Days 14-30: First meetings typically get booked
After 30 days: Steady flow of qualified meetings

Results improve over time as our system learns from engagement patterns and refines targeting.

), relatedQuestions: ["results-2", "results-3"], }, { id: "results-2", categoryId: "results", question: "What ROI can I expect from ClikConvert?", answer: (

ClikConvert clients typically see:

3-5x ROI within the first 90 days
15-30 qualified sales meetings per month
50-70% reduction in cost per qualified lead
30-40% increase in website conversion rate

Results vary based on factors like website traffic volume, industry, and average deal size.

Our performance guarantee ensures you'll see a positive ROI.

), relatedQuestions: ["results-1", "results-3"], }, { id: "results-3", categoryId: "results", question: "How does ClikConvert compare to traditional lead generation?", answer: (

Compared to traditional lead generation methods, ClikConvert offers:

Higher quality leads (already showing interest in your solution)
Lower cost per qualified meeting (typically 50-70% less)
Faster time to meeting (no lengthy nurturing required)
Better conversion rates (3-5x higher than form fills)
More efficient use of sales team resources

Unlike traditional methods that rely on prospects to identify themselves, ClikConvert proactively identifies interested prospects.

), relatedQuestions: ["results-1", "results-2"], }, { id: "pricing-1", categoryId: "pricing", question: "How is ClikConvert priced?", answer: (

ClikConvert offers flexible pricing models:

Performance-based: Pay per qualified meeting booked
Subscription: Monthly fee based on website traffic volume
Hybrid: Lower base fee plus performance component

All plans include the full suite of features, implementation support, and our performance guarantee.

Contact our team for a custom quote based on your specific needs.

), relatedQuestions: ["pricing-2", "pricing-3"], }, { id: "pricing-2", categoryId: "pricing", question: "Is there a minimum contract period?", answer: (

We offer flexible contract terms:

Standard contracts are 3, 6, or 12 months
Longer contracts include preferential pricing
Month-to-month options available with performance-based pricing

We recommend at least a 3-month commitment to allow sufficient time for optimization and to see meaningful results.

), relatedQuestions: ["pricing-1", "pricing-3"], }, { id: "pricing-3", categoryId: "pricing", question: "Do you offer a performance guarantee?", answer: (

Yes, ClikConvert offers a performance guarantee:

If we don't deliver the agreed number of qualified meetings, you don't pay
Clear definition of "qualified meeting" established upfront
Monthly performance reviews to ensure we're meeting targets

This guarantee aligns our success with yours and demonstrates our confidence in our solution.

), relatedQuestions: ["pricing-1", "pricing-2"], }, ] // Find FAQ item by ID const findFaqItemById = (id: string): FAQItem | undefined => { return faqItems.find((item) => item.id === id) } // Find related questions const findRelatedQuestions = (ids: string[] = []): FAQItem[] => { return ids.map((id) => findFaqItemById(id)).filter((item) => item !== undefined) as FAQItem[] } // Find questions by category const findQuestionsByCategory = (categoryId: string): FAQItem[] => { return faqItems.filter((item) => item.categoryId === categoryId) } function FAQChatbot() { return null } export default FAQChatbot [V0_FILE]typescriptreact:file="app/components/footer.tsx" isMerged="true" import Link from "next/link" import Image from "next/image" export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="app/components/header.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import Image from "next/image" import { Menu, X, ChevronRight } from "lucide-react" import { usePathname } from "next/navigation" import { motion, AnimatePresence } from "framer-motion" export default function Header() { const [isMenuOpen, setIsMenuOpen] = useState(false) const [scrolled, setScrolled] = useState(false) const pathname = usePathname() useEffect(() => { const handleScroll = () => { if (window.scrollY > 20) { setScrolled(true) } else { setScrolled(false) } } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const isActive = (path: string) => { return pathname === path } const navItemVariants = { hidden: { opacity: 0, y: -10 }, visible: (i: number) => ({ opacity: 1, y: 0, transition: { delay: 0.1 + i * 0.1, duration: 0.4, ease: [0.25, 0.1, 0.25, 1.0], }, }), } return (

{/* Logo */}

ClikConvert

{/* Desktop Navigation */} {/* CTA Button */} Book a Free Call {/* Mobile menu button */}

setIsMenuOpen(!isMenuOpen)} aria-label={isMenuOpen ? "Close menu" : "Open menu"} > {isMenuOpen ? : }

{/* Mobile menu */} {isMenuOpen && (

{[ { name: "How It Works", href: "/how-it-works" }, { name: "Results", href: "/results" }, { name: "About", href: "/about" }, ].map((item, index) => ( setIsMenuOpen(false)} >

{isActive(item.href) && (

)} {item.name}

))} setIsMenuOpen(false)} > Book a Free Call

)}

) } [V0_FILE]typescriptreact:file="app/components/hero.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { motion, AnimatePresence } from "framer-motion" import { ChevronRight, ArrowRight, User, Calendar, CheckCircle, Bell } from "lucide-react" export default function Hero() { const [animationComplete, setAnimationComplete] = useState(false) const [showVisitorCard, setShowVisitorCard] = useState(false) const [showLeadCard, setShowLeadCard] = useState(false) const [showMeetingCard, setShowMeetingCard] = useState(false) useEffect(() => { // Start the animation sequence const timer1 = setTimeout(() => setShowVisitorCard(true), 1000) const timer2 = setTimeout(() => setShowLeadCard(true), 2000) const timer3 = setTimeout(() => setShowMeetingCard(true), 3000) const timer4 = setTimeout(() => setAnimationComplete(true), 4000) return () => { clearTimeout(timer1) clearTimeout(timer2) clearTimeout(timer3) clearTimeout(timer4) } }, []) return (

{/* Left side - Text content */}

Identify & Convert Your Website Visitors Turn Anonymous Visitors Into Booked Sales Calls ClikConvert identifies your high-intent traffic and gets them on your calendar—automatically. Book a Free Strategy Call See How It Works

{/* Right side - Dashboard visualization */} {/* Dashboard header */}

ClikConvert Dashboard

{/* Dashboard content */}

{/* Dashboard sidebar */}

{/* Dashboard main content */}

Visitor Activity

Today

{/* Visitor stats */}

Total Visitors

247

Identified

Meetings

{/* Activity graph placeholder */}

{Array.from({ length: 24 }).map((_, i) => ( 18 ? "bg-[#16c2d5]" : i > 12 ? "bg-[#1e56a0]" : "bg-gray-200" } rounded-t-sm`} /> ))}

{/* Recent activity */}

Recent Activity

{/* Notification cards */} {showVisitorCard && (

Visitor Identified

Company: TechCorp Inc.

Just now

)} {showLeadCard && (

Lead Qualified

Decision Maker: John Smith

2m ago

)} {showMeetingCard && (

Meeting Booked

Tomorrow at 2:00 PM

5m ago

)}

{/* Background decorative elements */}

) } [V0_FILE]typescriptreact:file="app/components/how-it-works-accordion.tsx" isMerged="true" "use client" import { useState, useRef } from "react" import { motion, useInView, AnimatePresence } from "framer-motion" import { ChevronRight, Search, Users, Mail, Calendar, Plus, Minus } from "lucide-react" import Link from "next/link" export default function HowItWorksAccordion() { const containerRef = useRef(null) const isInView = useInView(containerRef, { once: true, amount: 0.2 }) const [activeStep, setActiveStep] = useState(1) const steps = [ { id: 1, title: "Identify", description: "We detect and identify anonymous traffic visiting your site", icon: , details: [ "Proprietary visitor identification technology", "Company-level tracking without cookies", "Behavior analysis to identify intent", ], }, { id: 2, title: "Target", description: "We build smart outbound email campaigns tailored to your audience", icon: , details: ["Decision-maker identification", "Personalized campaign creation", "Multi-channel approach"], }, { id: 3, title: "Engage", description: "Prospects receive personalized outreach at scale, written to convert", icon: , details: ["Proven messaging frameworks", "Automated follow-up sequences", "A/B testing for optimization"], }, { id: 4, title: "Book", description: "We handle replies and scheduling—your calendar fills up automatically", icon: , details: ["Qualification before booking", "Direct calendar integration", "Pre-call briefing documents"], }, ] return (

Our Process: Done-for-You, Start to Finish We handle everything from identifying visitors to booking qualified calls on your calendar.

{steps.map((step, index) => ( {activeStep === step.id && (

{detail}

)} ))}

{/* CTA */} Book a Free Strategy Call

) } [V0_FILE]typescriptreact:file="app/components/how-it-works-animated.tsx" isMerged="true" "use client" import { useRef, useState } from "react" import { motion, useInView, AnimatePresence } from "framer-motion" import { ChevronRight, ChevronDown, ChevronUp } from "lucide-react" import Link from "next/link" export default function HowItWorksAnimated() { const containerRef = useRef(null) const isInView = useInView(containerRef, { once: true, amount: 0.2 }) const [activeStep, setActiveStep] = useState(1) const steps = [ { id: 1, title: "Identify", description: "We detect and identify anonymous traffic visiting your site", longDescription: "Our proprietary technology identifies companies visiting your website without requiring them to fill out forms. We track their behavior, pages visited, and time spent to determine their level of interest.", stats: "98% of website visitors never fill out a form", animation: "/placeholder-o369l.png", }, { id: 2, title: "Target", description: "We build smart outbound email campaigns tailored to your audience", longDescription: "Once we identify companies visiting your site, we find the right decision-makers and create personalized outreach campaigns based on their specific interests and behavior on your website.", stats: "93% accuracy in identifying the right decision makers", animation: "/placeholder-ay3a0.png", }, { id: 3, title: "Engage", description: "Prospects receive personalized outreach at scale, written to convert", longDescription: "Our team crafts personalized messages that reference their specific website activity and interests. This personalized approach generates 5x higher response rates than traditional cold outreach.", stats: "5x higher response rate than traditional cold outreach", animation: "/placeholder-ylkgb.png", }, { id: 4, title: "Book", description: "We handle replies and scheduling—your calendar fills up automatically", longDescription: "We manage all responses, handle objections, and qualify prospects before scheduling them directly on your calendar. You just show up to the calls with prepared prospects.", stats: "15-30 qualified meetings booked per month", animation: "/placeholder-etdcr.png", }, ] return (

Our Process: Done-for-You, Start to Finish We handle everything from identifying visitors to booking qualified calls on your calendar.

{/* Step Selector - Desktop */}

{/* Progress Bar */}

{steps.map((step) => ( setActiveStep(step.id)} >

= step.id ? "bg-gradient-to-r from-[#1e56a0] to-[#16c2d5] text-white" : "bg-white text-gray-400 border border-gray-200" }`} > {step.id}

{step.title} ))}

{/* Step Selector - Mobile */}

Step {activeStep}: {steps[activeStep - 1].title}

{/* Step Content */} {/* Text Content */}

Step {activeStep}: {steps[activeStep - 1].title}

{steps[activeStep - 1].longDescription}

{steps[activeStep - 1].stats}

{/* Navigation Buttons */}

{/* Animation/Illustration */}

{/* Step Indicator */}

{activeStep} of {steps.length}

{/* CTA */} Book a Free Strategy Call

) } [V0_FILE]typescriptreact:file="app/components/how-it-works-blocks.tsx" isMerged="true" "use client" import { useState, useRef } from "react" import { motion, useInView, AnimatePresence } from "framer-motion" import { ChevronRight, Search, Users, Mail, Calendar } from "lucide-react" import Link from "next/link" export default function HowItWorksBlocks() { const containerRef = useRef(null) const isInView = useInView(containerRef, { once: true, amount: 0.2 }) const [activeStep, setActiveStep] = useState(null) const steps = [ { id: 1, title: "Identify", description: "We detect and identify anonymous traffic visiting your site", icon: , details: "Our proprietary technology identifies companies visiting your website without requiring them to fill out forms. We track their behavior, pages visited, and time spent to determine their level of interest.", stat: "98% of website visitors never fill out a form", }, { id: 2, title: "Target", description: "We build smart outbound email campaigns tailored to your audience", icon: , details: "Once we identify companies visiting your site, we find the right decision-makers and create personalized outreach campaigns based on their specific interests and behavior on your website.", stat: "93% accuracy in identifying the right decision makers", }, { id: 3, title: "Engage", description: "Prospects receive personalized outreach at scale, written to convert", icon: , details: "Our team crafts personalized messages that reference their specific website activity and interests. This personalized approach generates 5x higher response rates than traditional cold outreach.", stat: "5x higher response rate than traditional cold outreach", }, { id: 4, title: "Book", description: "We handle replies and scheduling—your calendar fills up automatically", icon: , details: "We manage all responses, handle objections, and qualify prospects before scheduling them directly on your calendar. You just show up to the calls with prepared prospects.", stat: "15-30 qualified meetings booked per month", }, ] return (

Our Process: Done-for-You, Start to Finish We handle everything from identifying visitors to booking qualified calls on your calendar.

{/* Step Selector */}

{steps.map((step) => ( setActiveStep(activeStep === step.id ? null : step.id)} >

{step.icon}

Step {step.id}

{step.title}

))}

{/* Step Details */} {activeStep && (

{steps[activeStep - 1].icon}

Step {activeStep}

{steps[activeStep - 1].title}

{steps[activeStep - 1].details}

{steps[activeStep - 1].stat}

)} {/* Default view when no step is selected */} {!activeStep && (

Select a step above to learn more about our process.

)}

{/* CTA */} Book a Free Strategy Call

) } [V0_FILE]typescriptreact:file="app/components/how-it-works-cards.tsx" isMerged="true" "use client" import { useRef } from "react" import { motion, useInView } from "framer-motion" import { ChevronRight, Search, Users, Mail, Calendar } from "lucide-react" import Link from "next/link" export default function HowItWorksCards() { const containerRef = useRef(null) const isInView = useInView(containerRef, { once: true, amount: 0.2 }) const steps = [ { id: 1, title: "Identify", description: "We detect and identify anonymous traffic visiting your site", icon: , }, { id: 2, title: "Target", description: "We build smart outbound email campaigns tailored to your audience", icon: , }, { id: 3, title: "Engage", description: "Prospects receive personalized outreach at scale, written to convert", icon: , }, { id: 4, title: "Book", description: "We handle replies and scheduling—your calendar fills up automatically", icon: , }, ] return (

Our Process: Done-for-You, Start to Finish We handle everything from identifying visitors to booking qualified calls on your calendar.

{steps.map((step, index) => (

{step.icon}

Step {step.id}

{step.title}

{step.description}

{step.id === 1 && item === 1 && "Identify companies without form fills"} {step.id === 1 && item === 2 && "Track visitor behavior and interests"} {step.id === 1 && item === 3 && "Prioritize high-intent visitors"} {step.id === 2 && item === 1 && "Find decision-makers at target companies"} {step.id === 2 && item === 2 && "Create personalized outreach sequences"} {step.id === 2 && item === 3 && "Optimize messaging based on site behavior"} {step.id === 3 && item === 1 && "Send personalized, relevant messages"} {step.id === 3 && item === 2 && "Follow up automatically at optimal times"} {step.id === 3 && item === 3 && "Handle objections with proven templates"} {step.id === 4 && item === 1 && "Qualify leads before scheduling"} {step.id === 4 && item === 2 && "Book directly to your calendar"} {step.id === 4 && item === 3 && "Provide context for successful calls"}

))}

{/* CTA */} Book a Free Strategy Call

) } [V0_FILE]typescriptreact:file="app/components/how-it-works-diagram.tsx" isMerged="true" "use client" import { useState, useRef } from "react" import { motion, useInView, AnimatePresence } from "framer-motion" import { Search, Users, Mail, Calendar, ArrowRight, ChevronRight, ExternalLink } from "lucide-react" import Link from "next/link" export default function HowItWorksDiagram() { const containerRef = useRef(null) const isInView = useInView(containerRef, { once: true, amount: 0.2 }) const [activeStep, setActiveStep] = useState(null) const steps = [ { id: 1, title: "Identify", description: "We detect and identify anonymous traffic visiting your site", icon: , details: [ "Proprietary visitor identification technology", "Company-level tracking without cookies", "Behavior analysis to identify intent", ], }, { id: 2, title: "Target", description: "We build smart outbound email campaigns tailored to your audience", icon: , details: ["Decision-maker identification", "Personalized campaign creation", "Multi-channel approach"], }, { id: 3, title: "Engage", description: "Prospects receive personalized outreach at scale, written to convert", icon: , details: ["Proven messaging frameworks", "Automated follow-up sequences", "A/B testing for optimization"], }, { id: 4, title: "Book", description: "We handle replies and scheduling—your calendar fills up automatically", icon: , details: ["Qualification before booking", "Direct calendar integration", "Pre-call briefing documents"], }, ] return (

Our Process: Done-for-You, Start to Finish We handle everything from identifying visitors to booking qualified calls on your calendar.

{/* Process Diagram - Desktop */}

{/* Central Flow Line */} {/* Steps */}

{steps.map((step, index) => ( setActiveStep(step.id)} onMouseLeave={() => setActiveStep(null)} > {/* Step Circle */}

{step.icon}

{/* Step Card */}

{step.title}

{step.description}

{/* Expandable Details */} {activeStep === step.id && (

{detail}

)}

{/* Arrow to next step */} {index < steps.length - 1 && ( )} ))}

{/* Process Diagram - Mobile */}

{steps.map((step, index) => (

{step.icon}

{step.title}

{step.description}

Learn more

{detail}

{/* Arrow to next step */} {index < steps.length - 1 && (

)} ))}

{/* CTA */} Learn More Book a Free Strategy Call

) } [V0_FILE]typescriptreact:file="app/components/how-it-works-testimonials.tsx" isMerged="true" "use client" import { useRef } from "react" import { motion, useInView } from "framer-motion" import { ChevronRight, Search, Users, Mail, Calendar, Quote } from "lucide-react" import Link from "next/link" export default function HowItWorksTestimonials() { const containerRef = useRef(null) const isInView = useInView(containerRef, { once: true, amount: 0.2 }) const steps = [ { id: 1, title: "Identify", description: "We detect and identify anonymous traffic visiting your site", icon: , color: "from-[#1e56a0] to-[#16c2d5]", testimonial: { quote: "We were shocked to see how many potential customers were visiting our site without converting. ClikConvert revealed who they were and turned them into leads.", author: "Sarah Johnson", company: "TechSolutions Inc.", image: "/professional-woman-headshot.png", }, }, { id: 2, title: "Target", description: "We build smart outbound email campaigns tailored to your audience", icon: , color: "from-[#1e56a0] to-[#16c2d5]", testimonial: { quote: "The targeting was spot-on. They found decision-makers at companies we'd been trying to reach for months, all based on website visits we didn't even know about.", author: "Michael Chen", company: "Growth Partners", image: "/professional-man-headshot.png", }, }, { id: 3, title: "Engage", description: "Prospects receive personalized outreach at scale, written to convert", icon: , color: "from-[#1e56a0] to-[#16c2d5]", testimonial: { quote: "The personalized messages they sent were incredible. Prospects thought we'd been watching their every move on our site—which technically, we had been!", author: "Alex Rivera", company: "MarketBoost", image: "/professional-headshot.png", }, }, { id: 4, title: "Book", description: "We handle replies and scheduling—your calendar fills up automatically", icon: , color: "from-[#1e56a0] to-[#16c2d5]", testimonial: { quote: "I literally just show up to the calls. ClikConvert handles everything else—from identifying prospects to qualifying them and getting them on my calendar.", author: "Jessica Williams", company: "SaaS Accelerator", image: "/professional-woman-headshot.png", }, }, ] return (

Our Process: Done-for-You, Start to Finish We handle everything from identifying visitors to booking qualified calls on your calendar.

{steps.map((step, index) => ( {/* Connector Line */} {index !== steps.length - 1 && (

)}

{/* Step Content */}

{step.id}

{step.title}

{step.description}

{/* Feature Points */}

{step.id === 1 && item === 1 && "Identify companies without form fills"} {step.id === 1 && item === 2 && "Track visitor behavior and interests"} {step.id === 1 && item === 3 && "Prioritize high-intent visitors"} {step.id === 2 && item === 1 && "Find decision-makers at target companies"} {step.id === 2 && item === 2 && "Create personalized outreach sequences"} {step.id === 2 && item === 3 && "Optimize messaging based on site behavior"} {step.id === 3 && item === 1 && "Send personalized, relevant messages"} {step.id === 3 && item === 2 && "Follow up automatically at optimal times"} {step.id === 3 && item === 3 && "Handle objections with proven templates"} {step.id === 4 && item === 1 && "Qualify leads before scheduling"} {step.id === 4 && item === 2 && "Book directly to your calendar"} {step.id === 4 && item === 3 && "Provide context for successful calls"}

{/* Testimonial */}

"{step.testimonial.quote}"

{step.testimonial.author}

{step.testimonial.company}

))}

{/* Results Summary */}

The Results Speak for Themselves

15-30

Booked Calls/Month

3-5x

ROI in 60 Days

93%

Meeting Show Rate

Our clients consistently see these results because we handle the entire process from start to finish.

{/* CTA */} Book a Free Strategy Call

) } [V0_FILE]typescriptreact:file="app/components/how-it-works-timeline.tsx" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import { motion, useInView, AnimatePresence } from "framer-motion" import { ChevronRight, Search, Users, Mail, Calendar, CheckCircle } from "lucide-react" import Link from "next/link" export default function HowItWorksTimeline() { const containerRef = useRef(null) const isInView = useInView(containerRef, { once: true, amount: 0.2 }) const [activeStep, setActiveStep] = useState(0) const [isMobile, setIsMobile] = useState(false) // Check if we're on mobile useEffect(() => { const checkMobile = () => { setIsMobile(window.innerWidth < 768) } // Initial check checkMobile() // Add event listener window.addEventListener("resize", checkMobile) // Clean up return () => window.removeEventListener("resize", checkMobile) }, []) // Auto-advance steps when in view useEffect(() => { if (isInView && activeStep < steps.length) { const timer = setTimeout(() => { setActiveStep((prev) => (prev < steps.length - 1 ? prev + 1 : prev)) }, 1000) return () => clearTimeout(timer) } }, [isInView, activeStep]) const steps = [ { id: 1, title: "Identify", description: "We detect and identify anonymous traffic visiting your site", icon: , color: "from-[#1e56a0] to-[#16c2d5]", }, { id: 2, title: "Target", description: "We build smart outbound email campaigns tailored to your audience", icon: , color: "from-[#1e56a0] to-[#16c2d5]", }, { id: 3, title: "Engage", description: "Prospects receive personalized outreach at scale, written to convert", icon: , color: "from-[#1e56a0] to-[#16c2d5]", }, { id: 4, title: "Book", description: "We handle replies and scheduling—your calendar fills up automatically", icon: , color: "from-[#1e56a0] to-[#16c2d5]", }, ] return (

Our Process: Done-for-You, Start to Finish We handle everything from identifying visitors to booking qualified calls on your calendar.

{/* Desktop Timeline */} {!isMobile && (

{/* Timeline Track - MOVED UP */}

{/* Timeline Progress - MOVED UP */} {/* Steps */}

{steps.map((step, index) => (

{/* Step Circle - POSITIONED ABOVE THE LINE */} = index ? 1 : 0.5, opacity: activeStep >= index ? 1 : 0.5, }} transition={{ duration: 0.4 }} className={`absolute -top-8 w-16 h-16 rounded-full bg-gradient-to-r ${step.color} flex items-center justify-center text-white mb-4 z-10 shadow-lg`} > {step.icon} {/* Step Content - NOW POSITIONED BELOW THE LINE AND ICONS */} = index ? 1 : 0.5, y: activeStep >= index ? 0 : 20, }} transition={{ duration: 0.4, delay: 0.1 }} className="text-center w-48 mt-12" >

{step.title}

{step.description}

{/* Checkmark for completed steps */} {activeStep > index && ( )}

))}

)} {/* Mobile Timeline */} {isMobile && (

{steps.map((step, index) => ( = index ? 1 : 0.5, y: activeStep >= index ? 0 : 20, }} transition={{ duration: 0.4, delay: index * 0.1 }} className="mb-12 flex items-start" > {/* Step Circle with Number */}

{step.icon}

{/* Checkmark for completed steps */} {activeStep > index && ( )}

{/* Step Content - Completely separate from the timeline line */}

{step.title}

{step.description}

))} {/* Vertical line connecting steps - positioned behind content */}

)} {/* CTA */} Book a Free Strategy Call

) } [V0_FILE]typescriptreact:file="app/components/problem-calculator.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" import { DollarSign, Users, BarChart3, ArrowRight, Info } from "lucide-react" export default function ProblemCalculator() { // State for calculator inputs and results const [monthlyVisitors, setMonthlyVisitors] = useState(5000) const [averageDealValue, setAverageDealValue] = useState(5000) const [conversionRate, setConversionRate] = useState(2) // Default 2% conversion const [improvedConversionRate, setImprovedConversionRate] = useState(5) // Default 5% with ClikConvert // Calculated values const [currentLeads, setCurrentLeads] = useState(0) const [potentialLeads, setPotentialLeads] = useState(0) const [currentRevenue, setCurrentRevenue] = useState(0) const [potentialRevenue, setPotentialRevenue] = useState(0) const [revenueDifference, setRevenueDifference] = useState(0) // Animation control const [hasCalculated, setHasCalculated] = useState(false) const [isTooltipVisible, setIsTooltipVisible] = useState(false) // Calculate results whenever inputs change useEffect(() => { // Calculate current scenario const currentLeadsValue = Math.round(monthlyVisitors * (conversionRate / 100)) const currentRevenueValue = currentLeadsValue * averageDealValue // Calculate potential with ClikConvert const potentialLeadsValue = Math.round(monthlyVisitors * (improvedConversionRate / 100)) const potentialRevenueValue = potentialLeadsValue * averageDealValue // Calculate difference const revenueDifferenceValue = potentialRevenueValue - currentRevenueValue // Update state setCurrentLeads(currentLeadsValue) setPotentialLeads(potentialLeadsValue) setCurrentRevenue(currentRevenueValue) setPotentialRevenue(potentialRevenueValue) setRevenueDifference(revenueDifferenceValue) // Trigger animation if not already calculated if (!hasCalculated) { setHasCalculated(true) } }, [monthlyVisitors, averageDealValue, conversionRate, improvedConversionRate, hasCalculated]) // Format currency const formatCurrency = (value: number) => { return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0, }).format(value) } return (

{/* Section header */}

Calculate Your Lost Revenue Opportunity Up to 98% of your website visitors never convert. See how much revenue you could be missing out on.

{/* Calculator card */} {/* Calculator header */}

Revenue Opportunity Calculator

See how much more revenue you could generate with ClikConvert

{/* Calculator body */}

{/* Input section */}

Your Website Metrics

{/* Monthly visitors input */}

Monthly Website Visitors

setMonthlyVisitors(Number.parseInt(e.target.value) || 0)} className="block w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:ring-[#1e56a0] focus:border-[#1e56a0] text-lg" placeholder="5,000" />

Min: 100 setMonthlyVisitors(Number.parseInt(e.target.value))} className="w-3/4 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-[#1e56a0]" /> Max: 100k

{/* Average deal value input */}

Average Deal Value

setAverageDealValue(Number.parseInt(e.target.value) || 0)} className="block w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:ring-[#1e56a0] focus:border-[#1e56a0] text-lg" placeholder="5,000" />

Min: $500 setAverageDealValue(Number.parseInt(e.target.value))} className="w-3/4 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-[#1e56a0]" /> Max: $50k

{/* Conversion rates */}

Current Conversion Rate

{isTooltipVisible && (

Industry average for B2B websites is 1-3%

)}

{conversionRate}%

setConversionRate(Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-[#1e56a0]" />

With ClikConvert {improvedConversionRate}%

setImprovedConversionRate(Number.parseFloat(e.target.value))} className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-[#16c2d5]" />

{/* Results section */}

Your Results

{/* Current scenario */}

Current Scenario

Monthly Leads

{currentLeads}

Monthly Revenue

{formatCurrency(currentRevenue)}

{/* With ClikConvert */}

With ClikConvert

Monthly Leads

{potentialLeads}

Monthly Revenue

{formatCurrency(potentialRevenue)}

{/* Revenue opportunity */}

Additional Revenue Opportunity

{formatCurrency(revenueDifference)} per month

That's {formatCurrency(revenueDifference * 12)} in additional annual revenue!

{/* CTA */}

Unlock This Revenue Opportunity

{/* Additional context */}

Most businesses focus on getting more traffic, but the real opportunity is converting the traffic you already have.

Based on data from 500+ B2B companies

) } [V0_FILE]typescriptreact:file="app/components/problem-section.tsx" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import { motion, useInView, useAnimation, AnimatePresence } from "framer-motion" import { CheckCircle } from "lucide-react" export default function ProblemSection() { const controls = useAnimation() const sectionRef = useRef(null) const isInView = useInView(sectionRef, { once: true, amount: 0.3 }) const [count, setCount] = useState(0) const [visitorCount, setVisitorCount] = useState(0) const [showIdentified, setShowIdentified] = useState(false) const [showConverted, setShowConverted] = useState(false) useEffect(() => { if (isInView) { controls.start("visible") // Animate the counter from 0 to 98 const timer = setTimeout(() => { const interval = setInterval(() => { setCount((prev) => { if (prev >= 98) { clearInterval(interval) return 98 } return prev + 1 }) }, 20) return () => clearInterval(interval) }, 500) // Animate visitor dots const visitorTimer = setTimeout(() => { const interval = setInterval(() => { setVisitorCount((prev) => { if (prev >= 100) { clearInterval(interval) return 100 } return prev + 1 }) }, 10) return () => clearInterval(interval) }, 500) // Show identified visitors const identifiedTimer = setTimeout(() => { setShowIdentified(true) }, 2500) // Show converted visitors const convertedTimer = setTimeout(() => { setShowConverted(true) }, 3500) return () => { clearTimeout(timer) clearTimeout(visitorTimer) clearTimeout(identifiedTimer) clearTimeout(convertedTimer) } } }, [isInView, controls]) const textVariants = { hidden: { opacity: 0, y: 20 }, visible: (custom: number) => ({ opacity: 1, y: 0, transition: { delay: 0.2 * custom, duration: 0.5, ease: "easeOut", }, }), } const dotVariants = { hidden: { opacity: 0, scale: 0 }, visible: (custom: number) => ({ opacity: 1, scale: 1, transition: { delay: 0.005 * custom, duration: 0.2, ease: "easeOut", }, }), exit: { opacity: 0, x: 100, transition: { duration: 0.3, }, }, } const cardVariants = { hidden: { opacity: 0, y: 20, scale: 0.9 }, visible: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.4, ease: "easeOut", }, }, } return (

{/* Left side - Text content */}

You're driving traffic. But most of it disappears without a trace. {count}% of visitors leave without converting

{[ "Lost opportunities from anonymous visitors", "No way to follow up with interested prospects", "Wasted marketing spend on traffic that doesn't convert", ].map((point, index) => (

{point}

))}

That's not a traffic problem—it's a follow-up problem.

{/* Right side - Visualization */}

{/* Website representation */}

Your Website

{/* Visitor dots container */}

{/* Generate 100 visitor dots */} {Array.from({ length: 100 }).map((_, i) => { // Determine if this dot is one of the 2% that converts const isConverting = i >= 98 // Only show dots up to the current count if (i >= visitorCount) return null // Position dots randomly but with some structure const left = `${10 + (i % 9) * 10}%` const top = `${10 + Math.floor(i / 9) * 8}%` return ( ) })} {/* Conversion funnel */}

{/* Identified visitor cards */} {showIdentified && ( <>

Visitor Identified

Company: TechCorp

)} {showConverted && (

Meeting Booked

Tomorrow, 2:00 PM

)}

) } [V0_FILE]typescriptreact:file="app/components/process-diagram.tsx" isMerged="true" "use client" import { useState, useRef } from "react" import { motion, useInView, AnimatePresence } from "framer-motion" import { Search, Users, Mail, Calendar, ArrowRight, ChevronRight } from "lucide-react" import Link from "next/link" export default function ProcessDiagram() { const containerRef = useRef(null) const isInView = useInView(containerRef, { once: true, amount: 0.2 }) const [activeStep, setActiveStep] = useState(null) const [isMobile, setIsMobile] = useState(false) // Check if we're on mobile useState(() => { if (typeof window !== "undefined") { const checkMobile = () => { setIsMobile(window.innerWidth < 768) } checkMobile() window.addEventListener("resize", checkMobile) return () => window.removeEventListener("resize", checkMobile) } }) const steps = [ { id: 1, title: "Identify", description: "We detect and identify anonymous traffic visiting your site", icon: , details: [ "Proprietary visitor identification technology", "Company-level tracking without cookies", "Behavior analysis to identify intent", ], }, { id: 2, title: "Target", description: "We build smart outbound email campaigns tailored to your audience", icon: , details: ["Decision-maker identification", "Personalized campaign creation", "Multi-channel approach"], }, { id: 3, title: "Engage", description: "Prospects receive personalized outreach at scale, written to convert", icon: , details: ["Proven messaging frameworks", "Automated follow-up sequences", "A/B testing for optimization"], }, { id: 4, title: "Book", description: "We handle replies and scheduling—your calendar fills up automatically", icon: , details: ["Qualification before booking", "Direct calendar integration", "Pre-call briefing documents"], }, ] return (

Our Process: Done-for-You, Start to Finish We handle everything from identifying visitors to booking qualified calls on your calendar.

{/* Process Diagram - Desktop */}

{/* Central Flow Line */} {/* Steps */}

{steps.map((step, index) => ( setActiveStep(step.id)} onMouseLeave={() => setActiveStep(null)} > {/* Step Circle */}

{step.icon}

{/* Step Card */}

{step.title}

{step.description}

{/* Expandable Details */} {activeStep === step.id && (

{detail}

)}

{/* Arrow to next step */} {index < steps.length - 1 && ( )} ))}

{/* Process Diagram - Mobile */}

{steps.map((step, index) => ( {/* Step Header */}

{step.icon}

{step.title}

Step {step.id} of 4

{/* Step Content */}

{step.description}

{/* Expandable Details */}

Learn more

{detail}

{/* Arrow to next step */} {index < steps.length - 1 && (

)} ))}

{/* CTA */} Book a Free Strategy Call

) } [V0_FILE]typescriptreact:file="app/components/results-compact.tsx" isMerged="true" "use client" import { useRef } from "react" import { motion, useInView } from "framer-motion" import { Calendar, TrendingUp, BarChart, ArrowRight, Star } from "lucide-react" import Link from "next/link" export default function ResultsCompact() { const containerRef = useRef(null) const isInView = useInView(containerRef, { once: true, amount: 0.2 }) return (

{/* Section Header */}

We don't promise meetings. We guarantee them. Every campaign comes with a performance guarantee. If we don't deliver qualified, booked calls—we don't stop until we do.

{/* Results Cards */} {[ { icon: , title: "15–30 booked calls/month", color: "from-[#1e56a0] to-[#1e56a0]", }, { icon: , title: "3–5x ROI within the first 60 days", color: "from-[#16c2d5] to-[#16c2d5]", }, { icon: , title: "Higher lead quality compared to ads or cold lists", color: "from-[#1e56a0] to-[#16c2d5]", }, ].map((result, index) => (

{result.icon}

{result.title}

))} {/* Featured Testimonial */}

{[1, 2, 3, 4, 5].map((star) => ( ))}

"We didn't need more traffic—we needed more action. ClikConvert delivered qualified meetings with decision-makers who were already familiar with our brand."

— Sarah Johnson, VP of Marketing at TechSolutions Inc.

{/* CTA Link */} See our results

) } [V0_FILE]typescriptreact:file="app/components/results-credibility.tsx" isMerged="true" "use client" import { useRef } from "react" import { motion, useInView } from "framer-motion" import { Calendar, TrendingUp, BarChart, Award, Star, ChevronRight, Quote } from "lucide-react" import Link from "next/link" import Image from "next/image" export default function ResultsCredibility() { const containerRef = useRef(null) const isInView = useInView(containerRef, { once: true, amount: 0.2 }) const testimonials = [ { quote: "We didn't need more traffic—we needed more action. ClikConvert delivered qualified meetings with decision-makers who were already familiar with our brand.", author: "Sarah Johnson", title: "VP of Marketing", company: "TechSolutions Inc.", image: "/testimonial-1.png", }, { quote: "After wasting thousands on ads that brought low-quality leads, ClikConvert helped us connect with prospects who were already visiting our site. Game changer.", author: "Michael Chen", title: "CEO", company: "Growth Partners", image: "/testimonial-2.png", }, { quote: "The ROI speaks for itself. Within 45 days, we closed 3 enterprise deals from meetings ClikConvert booked for us. Best marketing investment we've made.", author: "Jessica Williams", title: "Sales Director", company: "SaaS Accelerator", image: "/testimonial-3.png", }, ] return (

{/* Section Header */}

Performance Guarantee We don't promise meetings. We guarantee them. Every campaign comes with a performance guarantee. If we don't deliver qualified, booked calls—we don't stop until we do.

{/* Results Cards */} {[ { icon: , title: "15–30 booked calls/month", description: "Qualified meetings with decision-makers, not gatekeepers", color: "from-[#1e56a0] to-[#1e56a0]", }, { icon: , title: "3–5x ROI within the first 60 days", description: "Measurable return on your investment, guaranteed", color: "from-[#16c2d5] to-[#16c2d5]", }, { icon: , title: "Higher lead quality", description: "Compared to ads or cold lists, with better conversion rates", color: "from-[#1e56a0] to-[#16c2d5]", }, ].map((result, index) => (

{result.icon}

{result.title}

{result.description}

))} {/* Testimonials */}

What Our Clients Say

{testimonials.map((testimonial, index) => (

{testimonial.quote}

{testimonial.author}

{testimonial.title}, {testimonial.company}

))}

{/* Trust Indicators */}

Trusted by Growing B2B Companies

Companies like yours rely on ClikConvert to drive qualified meetings

{/* Client Logos */}

{[1, 2, 3, 4].map((logo) => (

Client Logo

))}

{/* Satisfaction Stats */}

{[ { value: "97%", label: "Client Satisfaction" }, { value: "93%", label: "Meeting Show Rate" }, { value: "85%", label: "Clients Renew" }, { value: "4.9/5", label: "Average Rating" }, ].map((stat, index) => (

{stat.value}

{stat.label === "Average Rating" && (

{[1, 2, 3, 4, 5].map((star) => ( ))}

)}

{stat.label}

))}

{/* Guarantee Box */}

Guaranteed

Our Performance Guarantee

If we don't deliver the agreed number of qualified meetings within the first 60 days, we'll continue working at no additional cost until we do. No excuses, no fine print—just results.

Learn more about our guarantee

{/* CTA */} Book a Free Strategy Call

) } [V0_FILE]typescriptreact:file="app/components/solution-section.tsx" isMerged="true" "use client" import type React from "react" import { useRef, useState, useEffect } from "react" import { motion, useInView } from "framer-motion" import { CheckCircle, Users, Mail, Calendar, Search, UserCheck, ArrowRight, ChevronRight, Star } from "lucide-react" import Link from "next/link" export default function SolutionSection() { const containerRef = useRef(null) const [activeStep, setActiveStep] = useState(1) const [isMobile, setIsMobile] = useState(false) // Check if we're on mobile useEffect(() => { const checkMobile = () => { setIsMobile(window.innerWidth < 768) } checkMobile() window.addEventListener("resize", checkMobile) return () => window.removeEventListener("resize", checkMobile) }, []) return (

{/* Background decorative elements - monochromatic */}

{/* Section header */}

We turn lost traffic into live conversations. ClikConvert uncovers the identities of your anonymous visitors and turns them into warm leads. Then, our done-for-you outreach system books qualified calls directly to your calendar.

{/* Connected timeline (visible on desktop) */} {!isMobile && (

)} {/* Connected timeline (visible on mobile) */} {isMobile &&

} {/* Step-by-step process */}

} stats={[ { label: "of website visitors", value: "98%", suffix: "", highlight: true }, { label: "never fill out a form", value: "", suffix: "", highlight: false }, ]} isActive={activeStep === 1} >

{/* Animated background - more subtle */}

TechCorp Inc.

Visited your pricing page

Global Solutions Ltd.

Viewed 5 pages in 3 minutes

Acme Corp

Returned 3 times this week

} stats={[ { label: "accuracy in identifying", value: "93%", suffix: "", highlight: true }, { label: "the right decision makers", value: "", suffix: "", highlight: false }, ]} reversed isActive={activeStep === 2} >

{/* Animated background - more subtle */}

TechCorp Inc.

Company Profile

John Doe

CTO • Primary Decision Maker

Alice Smith

VP of Marketing • Influencer

Robert Johnson

CEO • Final Approver

} stats={[ { label: "higher response rate than", value: "5x", suffix: "", highlight: true }, { label: "traditional cold outreach", value: "", suffix: "", highlight: false }, ]} isActive={activeStep === 3} >

{/* Animated background - more subtle */}

ClikConvert

to John Doe (TechCorp)

9:32 AM

Hi John,

I noticed you've been exploring our pricing page at TechCorp. Many of our clients in the tech industry have found our solution helps increase conversion rates by 3x.

Would you be open to a quick call to discuss how we could help TechCorp specifically?

Book a Call Reply

} stats={[ { label: "qualified meetings booked", value: "15-30", suffix: "/mo", highlight: true }, { label: "on average per client", value: "", suffix: "", highlight: false }, ]} reversed isActive={activeStep === 4} >

{/* Animated background - more subtle */}

Your Calendar

Upcoming Meetings

John Doe - TechCorp

Tomorrow, 10:00 AM

Alice Smith - Global Solutions

Thursday, 2:00 PM

Robert Johnson - Acme Corp

Friday, 11:30 AM

{/* CTA */} Turn Your Traffic Into Revenue

{/* Add CSS for grid pattern */}

) } interface StepItemProps { number: number title: string description: string icon: React.ReactNode stats: Array<{ label: string value: string suffix: string highlight: boolean }> reversed?: boolean isActive?: boolean children: React.ReactNode } function StepItem({ number, title, description, icon, stats, reversed = false, isActive = false, children, }: StepItemProps) { const ref = useRef(null) const isInView = useInView(ref, { once: true, amount: 0.3 }) const [isMobile, setIsMobile] = useState(false) useEffect(() => { const checkMobile = () => { setIsMobile(window.innerWidth < 768) } checkMobile() window.addEventListener("resize", checkMobile) return () => window.removeEventListener("resize", checkMobile) }, []) return (

{/* Step number */}

{number}

{/* Content */}

{icon}

{title}

{description}

{stats.map((stat, index) => (

{stat.value && ( {stat.value} )} {stat.label} {stat.suffix}

))}

{children}

) } [V0_FILE]typescriptreact:file="app/components/why-it-works-visual.tsx" isMerged="true" "use client" import { useRef } from "react" import { motion, useInView } from "framer-motion" import { CheckCircle, X, ChevronRight, BarChart2, Settings, Shield, Users, Mail, Target } from "lucide-react" import Link from "next/link" export default function WhyItWorksVisual() { const containerRef = useRef(null) const isInView = useInView(containerRef, { once: true, amount: 0.2 }) return (

{/* Section Header */}

Cold outreach has changed. ClikConvert stays ahead of the curve. Most outreach fails because it's generic, manual, and slow. We use data, automation, and proven copy to break through the noise and connect with real decision-makers.

{/* Visual Comparison */}

{/* Traditional vs ClikConvert */}

{/* Traditional Approach */}

Traditional Cold Outreach

{problem}

"We spent thousands on cold emails with almost no results."

{/* ClikConvert Approach */}

ClikConvert Approach

TechCorp Inc.

Acme Corp

{solution}

"ClikConvert delivered 22 qualified meetings in our first month."

{/* What Makes Us Different */}

What Makes Us Different

{[ { title: "Proprietary Lead Identification Tech", description: "Our technology identifies high-intent visitors others miss, turning anonymous traffic into qualified leads.", icon: , color: "from-[#1e56a0] to-[#1e56a0]", }, { title: "Fully-Managed Systems and Copywriting", description: "We handle everything from copywriting to campaign management, so you can focus on closing deals.", icon: , color: "from-[#16c2d5] to-[#16c2d5]", }, { title: "Built-in Warmup and Deliverability Protection", description: "Advanced email warmup and protection ensures your messages reach decision-makers' inboxes.", icon: , color: "from-[#1e56a0] to-[#16c2d5]", }, { title: "No Cold Lists or Guesswork", description: "We only target people who've already shown interest in your business by visiting your website.", icon: , color: "from-[#16c2d5] to-[#1e56a0]", }, ].map((item, index) => (

{item.icon}

{item.title}

{item.description}

))}

{/* CTA */} Book a Free Strategy Call

) } [V0_FILE]typescriptreact:file="app/components/why-it-works.tsx" isMerged="true" "use client" import { useRef } from "react" import { motion, useInView } from "framer-motion" import { CheckCircle, X, ArrowRight, ChevronRight, BarChart2, Settings, Shield, Users } from "lucide-react" import Link from "next/link" export default function WhyItWorks() { const containerRef = useRef(null) const isInView = useInView(containerRef, { once: true, amount: 0.2 }) const differentiators = [ { title: "Proprietary Lead Identification", description: "Our technology identifies high-intent visitors others miss, turning anonymous traffic into qualified leads.", icon: , }, { title: "Fully-Managed Systems", description: "We handle everything from copywriting to campaign management, so you can focus on closing deals.", icon: , }, { title: "Built-in Deliverability Protection", description: "Advanced email warmup and protection ensures your messages reach decision-makers' inboxes.", icon: , }, { title: "Only Engaged Visitors", description: "No cold lists or guesswork—we only target people who've already shown interest in your business.", icon: , }, ] return (

{/* Section Header */}

{/* Traditional vs ClikConvert Comparison */} {/* Traditional Approach */}

Traditional Approach

Cold Outreach Problems

{problem}

"We wasted thousands on cold email campaigns that went nowhere. It was like shouting into the void."

{/* ClikConvert Approach */}

ClikConvert Approach

Our Solution

{solution}

"ClikConvert delivered 22 qualified meetings in our first month. These were prospects who already knew our brand."

{/* What Makes Us Different */}

What Makes Us Different

{differentiators.map((item, index) => (

{item.icon}

{item.title}

{item.description}

))}

{/* Results Section */}

The Results Speak for Themselves

Our clients consistently see these outcomes:

{[ { value: "15-30", label: "Qualified Meetings Per Month" }, { value: "3-5x", label: "ROI Within 60 Days" }, { value: "93%", label: "Meeting Show Rate" }, { value: "5x", label: "Higher Response Rate" }, ].map((stat, index) => (

{stat.value}

{stat.label}

))}

See detailed case studies

{/* CTA */} Book a Free Strategy Call

) } [V0_FILE]typescriptreact:file="app/faq/page.tsx" isMerged="true" import FAQChatbot from "@/components/faq-chatbot" import type { Metadata } from "next" export const metadata: Metadata = { title: "Frequently Asked Questions | ClikConvert", description: "Get answers to common questions about ClikConvert - how our technology works, implementation process, expected results, and pricing options.", } export default function FAQPage() { return (

) } [V0_FILE]typescriptreact:file="app/why-it-works/page.tsx" isMerged="true" import type { Metadata } from "next" import WhyItWorksVisual from "../components/why-it-works-visual" import Link from "next/link" import { ChevronRight } from "lucide-react" export const metadata: Metadata = { title: "Why It Works | ClikConvert", description: "Learn why ClikConvert's approach to cold outreach delivers results when traditional methods fail.", } export default function WhyItWorksPage() { return (

Why ClikConvert Works

Our approach to cold outreach delivers results when traditional methods fail.

Ready to turn your traffic into revenue?

Let's build a predictable pipeline from the people already visiting your site.

Book a Free Strategy Call

) } [V0_FILE]typescriptreact:file="components/faq-chatbot.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { motion, AnimatePresence } from "framer-motion" import { Mic, Send, ChevronRight, MessageSquare, Volume2, VolumeX } from "lucide-react" import Image from "next/image" // Types type MessageType = "assistant" | "user" | "system" | "options" interface Message { id: string type: MessageType content: React.ReactNode timestamp: Date mood?: "neutral" | "happy" | "thinking" | "confused" options?: { id: string text: string }[] } interface FAQCategory { id: string name: string } interface FAQItem { id: string categoryId: string question: string answer: React.ReactNode relatedQuestions?: string[] suggestedReplies?: string[] } // FAQ Data const faqCategories: FAQCategory[] = [ { id: "technology", name: "About the Technology" }, { id: "implementation", name: "Implementation" }, { id: "results", name: "Results & ROI" }, { id: "pricing", name: "Pricing & Plans" }, ] const faqItems: FAQItem[] = [ { id: "tech-1", categoryId: "technology", question: "How does ClikConvert identify anonymous website visitors?", answer: (

ClikConvert uses advanced visitor identification technology that works in three steps:

Captures anonymous visitor data when they land on your site
Matches this data against our proprietary database of business professionals
Identifies key decision-makers from companies that visit your website

This happens without requiring visitors to fill out any forms or provide contact information.

), relatedQuestions: ["tech-2", "tech-3"], suggestedReplies: ["Is this GDPR compliant?", "What information can you identify?", "How accurate is this?"], }, { id: "tech-2", categoryId: "technology", question: "Is ClikConvert compliant with privacy regulations?", answer: (

Yes, ClikConvert is fully compliant with major privacy regulations including GDPR, CCPA, and other regional privacy laws.

Our technology only identifies business information that's already publicly available, and we follow strict data protection protocols to ensure compliance.

We never collect or process personally identifiable information (PII) without proper consent.

), relatedQuestions: ["tech-1", "tech-4"], suggestedReplies: ["How do you handle data security?", "What about international regulations?"], }, { id: "tech-3", categoryId: "technology", question: "What information can ClikConvert provide about visitors?", answer: (

ClikConvert can identify:

Company name and industry
Company size and revenue
Key decision-makers and their roles
Contact information for outreach
Pages visited and time spent on site
Visit frequency and engagement patterns

This information helps you target the right people with personalized outreach.

), relatedQuestions: ["tech-1", "tech-4"], suggestedReplies: ["How accurate is this information?", "Can I see a sample report?"], }, { id: "tech-4", categoryId: "technology", question: "How accurate is the visitor identification?", answer: (

ClikConvert achieves an industry-leading identification accuracy rate of over 85% for B2B visitors.

Our technology continuously improves through machine learning algorithms that refine identification methods based on results.

We focus on quality over quantity, ensuring that the leads we identify are highly relevant to your business.

), relatedQuestions: ["tech-1", "tech-3"], suggestedReplies: ["What happens if a visitor can't be identified?", "How do you verify accuracy?"], }, { id: "impl-1", categoryId: "implementation", question: "How long does it take to implement ClikConvert?", answer: (

Implementation is quick and straightforward:

Simple JavaScript snippet installation: 5 minutes
Account setup and configuration: 1 business day
Initial data collection period: 7-14 days
First campaign launch: Within 2 weeks

Our team handles most of the setup process, requiring minimal effort from your technical team.

), relatedQuestions: ["impl-2", "impl-3"], suggestedReplies: ["Do I need technical knowledge?", "Can it integrate with my CRM?"], }, { id: "impl-2", categoryId: "implementation", question: "Do I need technical knowledge to use ClikConvert?", answer: (

No technical knowledge is required to use ClikConvert.

Implementation involves adding a simple JavaScript snippet to your website, which our team can help with if needed.

The platform features an intuitive dashboard designed for marketing and sales professionals, not technical users.

We provide full training and support throughout the onboarding process.

), relatedQuestions: ["impl-1", "impl-3"], suggestedReplies: ["What support do you provide?", "How much time will I need to spend managing it?"], }, { id: "impl-3", categoryId: "implementation", question: "Can ClikConvert integrate with my existing CRM?", answer: (

Yes, ClikConvert integrates seamlessly with most popular CRM systems, including:

Salesforce
HubSpot
Pipedrive
Zoho CRM
Microsoft Dynamics

We also offer an API for custom integrations with other systems.

Our integration ensures that identified leads and meeting bookings flow directly into your existing workflow.

), relatedQuestions: ["impl-1", "impl-4"], suggestedReplies: ["How does the Salesforce integration work?", "What about custom CRMs?"], }, { id: "impl-4", categoryId: "implementation", question: "What support is provided during implementation?", answer: (

We provide comprehensive support throughout the implementation process:

Dedicated implementation specialist
Technical support for script installation
Configuration assistance
Training sessions for your team
Campaign setup guidance

After implementation, you'll have ongoing access to our customer success team and knowledge base.

), relatedQuestions: ["impl-1", "impl-2"], suggestedReplies: ["Is there ongoing support after implementation?", "How many training sessions are included?"], }, { id: "results-1", categoryId: "results", question: "How quickly will I see results with ClikConvert?", answer: (

Most clients begin seeing results within the first 30 days:

First 7 days: Visitor identification begins
Days 7-14: Initial outreach campaigns launch
Days 14-30: First meetings typically get booked
After 30 days: Steady flow of qualified meetings

Results improve over time as our system learns from engagement patterns and refines targeting.

), relatedQuestions: ["results-2", "results-3"], suggestedReplies: ["What ROI can I expect?", "How many meetings per month?"], }, { id: "results-2", categoryId: "results", question: "What ROI can I expect from ClikConvert?", answer: (

ClikConvert clients typically see:

3-5x ROI within the first 90 days
15-30 qualified sales meetings per month
50-70% reduction in cost per qualified lead
30-40% increase in website conversion rate

Results vary based on factors like website traffic volume, industry, and average deal size.

Our performance guarantee ensures you'll see a positive ROI.

), relatedQuestions: ["results-1", "results-3"], suggestedReplies: ["Do you have case studies?", "What's your performance guarantee?"], }, { id: "results-3", categoryId: "results", question: "How does ClikConvert compare to traditional lead generation?", answer: (

Compared to traditional lead generation methods, ClikConvert offers:

Higher quality leads (already showing interest in your solution)
Lower cost per qualified meeting (typically 50-70% less)
Faster time to meeting (no lengthy nurturing required)
Better conversion rates (3-5x higher than form fills)
More efficient use of sales team resources

Unlike traditional methods that rely on prospects to identify themselves, ClikConvert proactively identifies interested prospects.

), relatedQuestions: ["results-1", "results-2"], suggestedReplies: ["How is this better than LinkedIn outreach?", "Can this replace our SDR team?"], }, { id: "pricing-1", categoryId: "pricing", question: "How is ClikConvert priced?", answer: (

ClikConvert offers flexible pricing models:

Performance-based: Pay per qualified meeting booked
Subscription: Monthly fee based on website traffic volume
Hybrid: Lower base fee plus performance component

All plans include the full suite of features, implementation support, and our performance guarantee.

Contact our team for a custom quote based on your specific needs.

), relatedQuestions: ["pricing-2", "pricing-3"], suggestedReplies: ["What's the minimum investment?", "Do you offer any discounts?"], }, { id: "pricing-2", categoryId: "pricing", question: "Is there a minimum contract period?", answer: (

We offer flexible contract terms:

Standard contracts are 3, 6, or 12 months
Longer contracts include preferential pricing
Month-to-month options available with performance-based pricing

We recommend at least a 3-month commitment to allow sufficient time for optimization and to see meaningful results.

), relatedQuestions: ["pricing-1", "pricing-3"], suggestedReplies: ["Can I cancel anytime?", "What happens at the end of the contract?"], }, { id: "pricing-3", categoryId: "pricing", question: "Do you offer a performance guarantee?", answer: (

Yes, ClikConvert offers a performance guarantee:

If we don't deliver the agreed number of qualified meetings, you don't pay
Clear definition of "qualified meeting" established upfront
Monthly performance reviews to ensure we're meeting targets

This guarantee aligns our success with yours and demonstrates our confidence in our solution.

), relatedQuestions: ["pricing-1", "pricing-2"], suggestedReplies: ["How do you define a qualified meeting?", "What happens if targets aren't met?"], }, ] // Helper functions const getFAQItemById = (id: string): FAQItem | undefined => { return faqItems.find((item) => item.id === id) } const getFAQItemsByCategory = (categoryId: string): FAQItem[] => { return faqItems.filter((item) => item.categoryId === categoryId) } const getRelatedFAQItems = (ids: string[] = []): FAQItem[] => { return ids.map((id) => getFAQItemById(id)).filter(Boolean) as FAQItem[] } // Speech synthesis and recognition setup const useSpeechSupport = () => { const [isSpeechSupported, setIsSpeechSupported] = useState(false) const [isListening, setIsListening] = useState(false) const [isSpeaking, setIsSpeaking] = useState(false) const recognitionRef = useRef(null) useEffect(() => { // Check if speech recognition is supported const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition const speechSynthesis = window.speechSynthesis if (SpeechRecognition && speechSynthesis) { setIsSpeechSupported(true) } }, []) const startListening = (onResult: (text: string) => void) => { if (!isSpeechSupported) return const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition recognitionRef.current = new SpeechRecognition() recognitionRef.current.continuous = false recognitionRef.current.interimResults = false recognitionRef.current.lang = "en-US" recognitionRef.current.onstart = () => { setIsListening(true) } recognitionRef.current.onresult = (event: any) => { const transcript = event.results[0][0].transcript onResult(transcript) stopListening() } recognitionRef.current.onerror = () => { stopListening() } recognitionRef.current.onend = () => { setIsListening(false) } recognitionRef.current.start() } const stopListening = () => { if (recognitionRef.current) { recognitionRef.current.stop() setIsListening(false) } } const speak = (text: string) => { if (!isSpeechSupported) return // Cancel any ongoing speech window.speechSynthesis.cancel() const utterance = new SpeechSynthesisUtterance(text) // Get available voices and select a good one const voices = window.speechSynthesis.getVoices() const preferredVoice = voices.find( (voice) => voice.name.includes("Samantha") || voice.name.includes("Google US English Female") || voice.name.includes("Microsoft Zira"), ) if (preferredVoice) { utterance.voice = preferredVoice } utterance.rate = 1.0 utterance.pitch = 1.0 utterance.volume = 1.0 utterance.onstart = () => { setIsSpeaking(true) } utterance.onend = () => { setIsSpeaking(false) } window.speechSynthesis.speak(utterance) } const stopSpeaking = () => { window.speechSynthesis.cancel() setIsSpeaking(false) } return { isSpeechSupported, isListening, isSpeaking, startListening, stopListening, speak, stopSpeaking, } } // Extract plain text from React nodes for speech const extractTextFromReactNode = (node: React.ReactNode): string => { if (typeof node === "string") return node if (typeof node === "number") return node.toString() if (node === null || node === undefined) return "" if (Array.isArray(node)) { return node.map(extractTextFromReactNode).join(" ") } if (typeof node === "object") { const reactElement = node as React.ReactElement if (reactElement.props && reactElement.props.children) { return extractTextFromReactNode(reactElement.props.children) } return "" } return "" } export default function FAQChatbot() { const [messages, setMessages] = useState([]) const [inputValue, setInputValue] = useState("") const [isTyping, setIsTyping] = useState(false) const [currentMood, setCurrentMood] = useState<"neutral" | "happy" | "thinking" | "confused">("neutral") const [isMobileView, setIsMobileView] = useState(false) const [isExpanded, setIsExpanded] = useState(true) const messagesEndRef = useRef(null) const { isSpeechSupported, isListening, isSpeaking, startListening, stopListening, speak, stopSpeaking } = useSpeechSupport() // Check if mobile view useEffect(() => { const checkIfMobile = () => { setIsMobileView(window.innerWidth < 768) // On mobile, start with chat collapsed if (window.innerWidth < 768) { setIsExpanded(false) } } checkIfMobile() window.addEventListener("resize", checkIfMobile) return () => window.removeEventListener("resize", checkIfMobile) }, []) // Initialize chat with welcome message useEffect(() => { const initialMessages: Message[] = [ { id: "welcome", type: "assistant", content: (

Hi there! 👋 I'm Clik, your ClikConvert assistant.

I can help answer any questions you have about our service. What would you like to know?

), timestamp: new Date(), mood: "happy", }, { id: "options", type: "options", content: "I can help with these topics:", timestamp: new Date(), options: [ { id: "technology", text: "How the technology works" }, { id: "implementation", text: "Implementation process" }, { id: "results", text: "Results & ROI" }, { id: "pricing", text: "Pricing & plans" }, ], }, ] setMessages(initialMessages) setCurrentMood("happy") }, []) // Scroll to bottom when messages change useEffect(() => { scrollToBottom() }, [messages]) const scrollToBottom = () => { if (messagesEndRef.current) { messagesEndRef.current.scrollIntoView({ behavior: "smooth" }) } } // Add a message with typing effect const addMessage = (message: Omit) => { const newMessage: Message = { ...message, id: `msg-${Date.now()}`, timestamp: new Date(), } setMessages((prev) => [...prev, newMessage]) } // Add a typing indicator, then a message after delay const addMessageWithTyping = (message: Omit, typingDuration = 1500) => { setIsTyping(true) setCurrentMood("thinking") setTimeout(() => { setIsTyping(false) addMessage(message) // Update mood based on message type if (message.mood) { setCurrentMood(message.mood) } else if (message.type === "assistant") { setCurrentMood("happy") } // If speech is enabled and it's an assistant message, speak it if (message.type === "assistant" && isSpeechSupported) { const textToSpeak = extractTextFromReactNode(message.content) speak(textToSpeak) } }, typingDuration) } // Handle category selection const handleCategorySelect = (categoryId: string) => { const category = faqCategories.find((c) => c.id === categoryId) if (!category) return // Add user message addMessage({ type: "user", content: `Tell me about ${category.name}`, }) // Add typing indicator, then bot response addMessageWithTyping( { type: "assistant", content: `I'd be happy to tell you about ${category.name}! Here are some common questions:`, mood: "happy", }, 1500, ) // Get questions for this category const categoryQuestions = getFAQItemsByCategory(categoryId) // Add options message with questions setTimeout(() => { addMessage({ type: "options", content: "Select a question to learn more:", options: categoryQuestions.map((q) => ({ id: q.id, text: q.question, })), }) }, 2500) } // Handle question selection const handleQuestionSelect = (questionId: string) => { const question = getFAQItemById(questionId) if (!question) return // Add user message addMessage({ type: "user", content: question.question, }) // Add typing indicator, then bot response with answer const typingDuration = Math.min(2000, question.answer.toString().length * 3) // Show thinking mood while typing setCurrentMood("thinking") addMessageWithTyping( { type: "assistant", content: question.answer, mood: "happy", }, typingDuration, ) // If there are suggested replies, add them after a delay if (question.suggestedReplies && question.suggestedReplies.length > 0) { setTimeout(() => { addMessage({ type: "options", content: "Quick follow-up questions:", options: question.suggestedReplies.map((reply, index) => ({ id: `suggested-${questionId}-${index}`, text: reply, })), }) }, typingDuration + 1000) } // If there are related questions but no suggested replies, add them after a delay else if (question.relatedQuestions && question.relatedQuestions.length > 0) { setTimeout(() => { const relatedQuestions = getRelatedFAQItems(question.relatedQuestions) if (relatedQuestions.length > 0) { addMessage({ type: "options", content: "You might also be interested in:", options: relatedQuestions.map((q) => ({ id: q.id, text: q.question, })), }) } }, typingDuration + 1000) } } // Handle suggested reply selection const handleSuggestedReplySelect = (replyId: string, replyText: string) => { // Add user message addMessage({ type: "user", content: replyText, }) // Extract the original question ID from the suggested reply ID const parts = replyId.split("-") if (parts.length >= 2) { const originalQuestionId = parts[1] // Find questions that might answer this follow-up const relatedQuestions = faqItems.filter( (item) => item.question.toLowerCase().includes(replyText.toLowerCase()) || item.answer.toString().toLowerCase().includes(replyText.toLowerCase()), ) if (relatedQuestions.length > 0) { // We found a good match, use that answer const bestMatch = relatedQuestions[0] const typingDuration = Math.min(2000, bestMatch.answer.toString().length * 3) addMessageWithTyping( { type: "assistant", content: bestMatch.answer, mood: "happy", }, typingDuration, ) // Add suggested replies for this answer if (bestMatch.suggestedReplies && bestMatch.suggestedReplies.length > 0) { setTimeout(() => { addMessage({ type: "options", content: "Anything else you'd like to know?", options: bestMatch.suggestedReplies.map((reply, index) => ({ id: `suggested-${bestMatch.id}-${index}`, text: reply, })), }) }, typingDuration + 1000) } } else { // No good match, give a generic response addMessageWithTyping( { type: "assistant", content: (

That's a great question! While I don't have a specific answer prepared for that, I'd be happy to connect you with our team who can provide more details.

Book a Free Strategy Call

), mood: "confused", }, 1500, ) // Show categories again setTimeout(() => { addMessage({ type: "options", content: "Or I can tell you about:", options: faqCategories.map((category) => ({ id: category.id, text: category.name, })), }) }, 3000) } } } // Handle form submission const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (!inputValue.trim()) return // Add user message addMessage({ type: "user", content: inputValue, }) const userQuery = inputValue.trim() setInputValue("") // Simple search through questions const query = userQuery.toLowerCase() const matchingQuestions = faqItems.filter( (item) => item.question.toLowerCase().includes(query) || item.answer.toString().toLowerCase().includes(query), ) if (matchingQuestions.length > 0) { // Found matching questions addMessageWithTyping( { type: "assistant", content: "I found some information that might help answer your question:", mood: "happy", }, 1200, ) setTimeout(() => { addMessage({ type: "options", content: "Select the most relevant question:", options: matchingQuestions.slice(0, 3).map((q) => ({ id: q.id, text: q.question, })), }) }, 2000) } else { // No matching questions addMessageWithTyping( { type: "assistant", content: (

I'm not quite sure how to answer that specific question. Our team would be happy to provide you with more personalized information.

Book a Free Strategy Call

), mood: "confused", }, 1500, ) // Show categories again setTimeout(() => { addMessage({ type: "options", content: "In the meantime, I can tell you about:", options: faqCategories.map((category) => ({ id: category.id, text: category.name, })), }) }, 3000) } } // Handle voice input const handleVoiceInput = () => { if (isListening) { stopListening() return } startListening((transcript) => { setInputValue(transcript) // Auto-submit after a short delay setTimeout(() => { const fakeEvent = { preventDefault: () => {} } as React.FormEvent handleSubmit(fakeEvent) }, 500) }) } // Toggle speech output const handleToggleSpeech = () => { if (isSpeaking) { stopSpeaking() } else { // Find the last assistant message and speak it const lastAssistantMessage = [...messages].reverse().find((m) => m.type === "assistant") if (lastAssistantMessage) { const textToSpeak = extractTextFromReactNode(lastAssistantMessage.content) speak(textToSpeak) } } } // Toggle chat expansion const toggleChat = () => { setIsExpanded(!isExpanded) } // Format time const formatTime = (date: Date) => { return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) } return (

Frequently Asked Questions

Chat with our AI assistant to get instant answers about ClikConvert

{/* Chat container */}

{/* Chat header */}

Clik

ClikConvert AI Assistant

{/* Chat content - only render when expanded */} {isExpanded && ( <> {/* Assistant avatar and mood */}

{isListening && (

)} {isSpeaking && (

)}

{isListening ? "Listening..." : isSpeaking ? "Speaking..." : "How can I help you today?"}

{/* Speech controls */} {isSpeechSupported && (

)}

{/* Messages container */}

{messages.map((message) => ( {message.type === "assistant" && (

{message.content}

{formatTime(message.timestamp)}

)} {message.type === "user" && (

{message.content}

{formatTime(message.timestamp)}

)} {message.type === "system" && (

{message.content}

)} {message.type === "options" && (

{message.content}

{message.options?.map((option) => ( { if ( option.id.startsWith("tech-") || option.id.startsWith("impl-") || option.id.startsWith("results-") || option.id.startsWith("pricing-") ) { handleQuestionSelect(option.id) } else if (option.id.startsWith("suggested-")) { handleSuggestedReplySelect(option.id, option.text) } else { handleCategorySelect(option.id) } }} className="w-full text-left flex items-center p-3 rounded-xl bg-white hover:bg-blue-50 border border-gray-200 hover:border-blue-200 transition-all duration-200 shadow-sm hover:shadow" > {option.text} ))}

)} ))} {/* Typing indicator */} {isTyping && (

)}

{/* Input area */}

)} {/* Mobile chat button - only show when collapsed */} {isMobileView && !isExpanded && (

)}

{/* Additional help text */}

Want to speak with a human?{" "} Book a free strategy call {" "} with our team.

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import Link from "next/link" import Image from "next/image" export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/header.tsx" isMerged="true" "use client" export default function Header() { // Component code... } [V0_FILE]typescriptreact:file="components/hero.tsx" isMerged="true" import Link from "next/link" export default function Hero() { return (

Turn Anonymous Website Visitors Into Booked Sales Calls

ClikConvert identifies your high-intent traffic and gets them on your calendar—automatically.

Book a Free Strategy Call

Hero Illustration

) } [V0_FILE]typescriptreact:file="components/immersive-footer.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useRef, useState } from "react" import Link from "next/link" import Image from "next/image" import { useInView } from "react-intersection-observer" import { ArrowUpRight, Mail, MapPin, Phone } from "lucide-react" // Animation counter hook const useCounter = (end: number, start = 0, duration = 2000) => { const [count, setCount] = useState(start) const countRef = useRef(start) const [inViewRef, inView] = useInView({ triggerOnce: true, threshold: 0.3, }) useEffect(() => { if (!inView) return countRef.current = start const step = (end - start) / (duration / 16) let animationFrame: number const updateCount = () => { if (countRef.current < end) { countRef.current += step setCount(Math.min(Math.floor(countRef.current), end)) animationFrame = requestAnimationFrame(updateCount) } else { setCount(end) } } animationFrame = requestAnimationFrame(updateCount) return () => cancelAnimationFrame(animationFrame) }, [end, start, duration, inView]) return [count, inViewRef] as const } // Stat counter component const StatCounter = ({ value, label, suffix = "+", }: { value: number label: string suffix?: string }) => { const [count, ref] = useCounter(value) return (

{count} {suffix}

{label}

) } // Client logo component const ClientLogo = ({ src, alt, delay }: { src: string; alt: string; delay: number }) => { return (

) } // Footer link component with animation const FooterLink = ({ href, children }: { href: string; children: React.ReactNode }) => { return ( {children} ) } // Main footer component export default function ImmersiveFooter() { const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) const footerRef = useRef(null) const [isFooterInView, setIsFooterInView] = useState(false) // Handle mouse movement for particle effect useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (!footerRef.current) return const rect = footerRef.current.getBoundingClientRect() if (e.clientY >= rect.top && e.clientY <= rect.bottom) { setIsFooterInView(true) setMousePosition({ x: e.clientX, y: e.clientY - rect.top, }) } else { setIsFooterInView(false) } } window.addEventListener("mousemove", handleMouseMove) return () => window.removeEventListener("mousemove", handleMouseMove) }, []) // Prevent auto-scrolling to footer on page load useEffect(() => { // Scroll to top when the component mounts window.scrollTo(0, 0) }, []) return ( ) } [V0_FILE]typescriptreact:file="components/problem.tsx" isMerged="true" import Image from "next/image" export default function Problem() { return (

Website visitors disappearing without converting

You're driving traffic. But most of it disappears without a trace.

Up to 98% of your website visitors never fill out a form, book a call, or convert. That's not a traffic problem—it's a follow-up problem.

If you're still relying on manual outreach or passive forms, you're missing a huge opportunity to grow revenue.

) } [V0_FILE]typescriptreact:file="components/results-before-after.tsx" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import { motion, useAnimation, useInView } from "framer-motion" import { ChevronRight, Award, Star, Play, ArrowRight, ChevronDown } from "lucide-react" import Link from "next/link" import Image from "next/image" export default function ResultsBeforeAfter() { const containerRef = useRef(null) const isInView = useInView(containerRef, { once: true, amount: 0.2 }) const controls = useAnimation() const [activeTestimonial, setActiveTestimonial] = useState(null) const [sliderPosition, setSliderPosition] = useState(50) const [isMobile, setIsMobile] = useState(false) // Check if we're on mobile useEffect(() => { const checkMobile = () => { setIsMobile(window.innerWidth < 768) } checkMobile() window.addEventListener("resize", checkMobile) return () => window.removeEventListener("resize", checkMobile) }, []) // Start animation when in view useEffect(() => { if (isInView) { controls.start("visible") } }, [isInView, controls]) // Sample testimonial data const testimonials = [ { id: 1, name: "Sarah Johnson", title: "VP of Marketing", company: "TechSolutions Inc.", image: "/testimonial-1.png", video: "/video-placeholder.mp4", quote: "We didn't need more traffic—we needed more action. ClikConvert delivered qualified meetings with decision-makers who were already familiar with our brand.", before: { meetings: 5, conversionRate: "1.2%", leadQuality: "Low", }, after: { meetings: 28, conversionRate: "4.7%", leadQuality: "High", }, }, { id: 2, name: "Michael Chen", title: "CEO", company: "Growth Partners", image: "/testimonial-2.png", video: "/video-placeholder.mp4", quote: "After wasting thousands on ads that brought low-quality leads, ClikConvert helped us connect with prospects who were already visiting our site. Game changer.", before: { meetings: 8, conversionRate: "1.8%", leadQuality: "Medium", }, after: { meetings: 32, conversionRate: "5.2%", leadQuality: "Very High", }, }, { id: 3, name: "Jessica Williams", title: "Sales Director", company: "SaaS Accelerator", image: "/testimonial-3.png", video: "/video-placeholder.mp4", quote: "The ROI speaks for itself. Within 45 days, we closed 3 enterprise deals from meetings ClikConvert booked for us. Best marketing investment we've made.", before: { meetings: 3, conversionRate: "0.9%", leadQuality: "Very Low", }, after: { meetings: 22, conversionRate: "4.1%", leadQuality: "High", }, }, ] // Handle slider movement const handleSliderChange = (e) => { setSliderPosition(e.target.value) } // Handle slider touch/mouse events for mobile const handleSliderTouch = (e) => { const slider = e.currentTarget const rect = slider.getBoundingClientRect() const offsetX = e.type.includes("touch") ? e.touches[0].clientX - rect.left : e.clientX - rect.left const newPosition = Math.max(0, Math.min(100, (offsetX / rect.width) * 100)) setSliderPosition(newPosition) } return (

{/* Section Header */}

Proven Results See the transformation. Experience the difference. Our clients consistently see dramatic improvements in their lead generation and meeting booking metrics. Explore their before and after stories.

{/* Interactive Before/After Slider */}

Before vs After: See the ClikConvert Difference

{/* Slider Control */}

Before

After

Drag the slider to see the transformation

{/* Before/After Comparison */}

{/* Left Side - Metrics */}

Key Performance Metrics

{/* Monthly Meetings */}

Monthly Meetings {sliderPosition < 50 ? "5-8" : `${Math.round(15 + ((sliderPosition - 50) / 50) * 15)}-${Math.round(20 + ((sliderPosition - 50) / 50) * 10)}`}

{/* Conversion Rate */}

Conversion Rate {sliderPosition < 50 ? "0.9-1.8%" : `${(1.8 + ((sliderPosition - 50) / 50) * 3.4).toFixed(1)}%`}

{/* Lead Quality */}

Lead Quality {sliderPosition < 50 ? "Low" : sliderPosition < 75 ? "High" : "Very High"}

{/* ROI */}

ROI {sliderPosition < 50 ? "Negative" : sliderPosition < 75 ? "2-3x" : "3-5x"}

{/* Right Side - Visual */}

{/* Before Image */}

📉

Missed Opportunities

98% of visitors leave without converting

{/* After Image */}

= 50 ? 1 : 0 }} >

📈

Booked Meetings

15-30 qualified calls per month

{/* Slider Caption */}

{sliderPosition < 30 ? "Before: Wasted website traffic and missed opportunities" : sliderPosition < 70 ? "During: Implementing ClikConvert's identification and outreach system" : "After: Qualified meetings with interested prospects"}

{sliderPosition < 30 ? "Most businesses lose 98% of their website visitors without any way to follow up." : sliderPosition < 70 ? "ClikConvert identifies your anonymous visitors and engages them with personalized outreach." : "Your calendar fills with qualified meetings from prospects who already know your brand."}

{/* Testimonial Video Wall */}

Hear From Our Clients

{testimonials.map((testimonial, index) => ( {/* Video Thumbnail */}

setActiveTestimonial(activeTestimonial === testimonial.id ? null : testimonial.id)} >

{testimonial.name}

{testimonial.title}, {testimonial.company}

{/* Testimonial Content */}

{[1, 2, 3, 4, 5].map((star) => ( ))}

"{testimonial.quote}"

{/* Before/After Metrics - Only show when active */} {activeTestimonial === testimonial.id && (

Results Achieved:

Before

Meetings/mo: {testimonial.before.meetings}

Conv. Rate: {testimonial.before.conversionRate}

Lead Quality: {testimonial.before.leadQuality}

After

Meetings/mo: {testimonial.after.meetings}

Conv. Rate: {testimonial.after.conversionRate}

Lead Quality: {testimonial.after.leadQuality}

)} {/* Expand/Collapse Button */}

))}

View all client success stories

{/* Guarantee Spotlight */}

{/* Background Pattern */}

{/* Guarantee Badge */}

100%

GUARANTEED

{/* Guarantee Content */}

Our Performance Guarantee

If we don't deliver the agreed number of qualified meetings within the first 60 days, we'll continue working at no additional cost until we do. No excuses, no fine print—just results.

Book a Free Strategy Call

{/* CTA */} Book a Free Strategy Call

{/* Add CSS for grid pattern */}

) } [V0_FILE]typescriptreact:file="components/solution.tsx" isMerged="true" import Image from "next/image" export default function Solution() { return (

We turn lost traffic into live conversations.

ClikConvert uncovers the identities of your anonymous visitors and turns them into warm leads. Then, our done-for-you outreach system books qualified calls directly to your calendar.

You don't need new traffic—you need better conversion from the traffic you already have.

ClikConvert turning anonymous visitors into leads

) } [V0_FILE]typescript:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, primary: "#1e56a0", // Darker blue from logo "primary-dark": "#174785", secondary: "#16c2d5", // Lighter blue/cyan from logo "secondary-dark": "#14afc0", }, borderRadius: { lg: "0.5rem", md: "0.375rem", sm: "0.25rem", }, }, }, plugins: [require("tailwindcss-animate")], } export default config [V0_FILE]png:file="public/book-infographic.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/book-infographic-hyycPDFQKKgRHErIqLJNauGmmOaDcK.png" isMerged="true" [V0_FILE]png:file="public/engage-infographic.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/engage-infographic-5sMCxf6nZc5WCpALPRzCnRGHGk9CtP.png" isMerged="true" [V0_FILE]png:file="public/identify-infographic.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/identify-infographic-cMWW4w8T0cAhLaSpiXUwpeXRYPSfcJ.png" isMerged="true" [V0_FILE]png:file="public/logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/logo-ibm3dobOmX7SgTLb0ruEMWLHyrgNpU.png" isMerged="true" [V0_FILE]png:file="public/modern-creative-studio.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/modern-creative-studio-gyPVrDXSGZLgRqfjYqLJx56ROAtzri.png" isMerged="true" [V0_FILE]png:file="public/modern-data-center.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/modern-data-center-CpVdDWNi0kOYiqqoSky6kFojgqxXG0.png" isMerged="true" [V0_FILE]png:file="public/modern-office-research.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/modern-office-research-czan4VSB27VnkfkZqsX0ZGzTU68hQD.png" isMerged="true" [V0_FILE]png:file="public/placeholder-7ktdr.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/placeholder-7ktdr-jDojzNx43h9saz6XVn0jXFetNEwI9T.png" isMerged="true" [V0_FILE]png:file="public/placeholder-ay3a0.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/placeholder-ay3a0-U3IYmYDAoSmDSo7i4LaHYRuNcIqvLY.png" isMerged="true" [V0_FILE]png:file="public/placeholder-e7q3t.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/placeholder-e7q3t-Jbpp9vjq2H6HMB4KfbXjDJgapItjKk.png" isMerged="true" [V0_FILE]png:file="public/placeholder-etdcr.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/placeholder-etdcr-uxy5ysV4fWmYyr7HEy7tWHxJHsvTN4.png" isMerged="true" [V0_FILE]png:file="public/placeholder-fqvmz.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/placeholder-fqvmz-WWoZUHeKNbLzZa5dtIFQgsaT9OFgMv.png" isMerged="true" [V0_FILE]png:file="public/placeholder-g2a27.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/placeholder-g2a27-1wEh3nZMGqhj6hgSST7MZp5Cqi40IX.png" isMerged="true" [V0_FILE]png:file="public/placeholder-hm3cy.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/placeholder-hm3cy-MTqGsj3QSs5x0Umsv7jchiKWzkEB8B.png" isMerged="true" [V0_FILE]png:file="public/placeholder-j408s.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/placeholder-j408s-Nbm8bUoq8P18bym09pDUyAwpwZd3nQ.png" isMerged="true" [V0_FILE]png:file="public/placeholder-lbkx7.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/placeholder-lbkx7-wdjIKmuzQCSGBG6zjleWceqcKmo7bv.png" isMerged="true" [V0_FILE]png:file="public/placeholder-o369l.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/placeholder-o369l-jyy8RBX1Oy4xOUtHJSfh2pQ1122V9L.png" isMerged="true" [V0_FILE]png:file="public/placeholder-ofqxd.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/placeholder-ofqxd-BBhliHTWBP6R20iF8M0oCpMNJSdjam.png" isMerged="true" [V0_FILE]png:file="public/placeholder-tse1n.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/placeholder-tse1n-BnP26k3aI88BtG3bKBhwGqMJZcWXSB.png" isMerged="true" [V0_FILE]png:file="public/placeholder-usxui.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/placeholder-usxui-4JXiShAyfLpa9Iz0qA7ZdFiv0JY87B.png" isMerged="true" [V0_FILE]png:file="public/placeholder-ylkgb.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/placeholder-ylkgb-kpR0NBbD0MjFpj12KVgc6Fxl3ZGRQn.png" isMerged="true" [V0_FILE]png:file="public/professional-headshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/professional-headshot-9uOErOfm2ccjOYPleFTcWOidl5ZZWR.png" isMerged="true" [V0_FILE]png:file="public/professional-man-headshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/professional-man-headshot-twF7uHvjnuZWjwOv9IYOqduHNls3Lm.png" isMerged="true" [V0_FILE]png:file="public/professional-woman-headshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/professional-woman-headshot-5GSUp41plV1DT8bPIzsBr3alN2GkC2.png" isMerged="true" [V0_FILE]png:file="public/target-infographic.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/target-infographic-Iv67VN41TtMQ7AQfXT0DVPWNzc3mqf.png" isMerged="true" [V0_FILE]png:file="public/testimonial-1.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/testimonial-1-dpp0WayRymfrkVONixv4bnDhpS9XBe.png" isMerged="true" [V0_FILE]png:file="public/testimonial-2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/testimonial-2-Tycl7PYmXL5XGFPIGKVhO7tQ9BG5wt.png" isMerged="true" [V0_FILE]png:file="public/testimonial-3.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/l5r7MR3R4WV/public/testimonial-3-ME5E7IA3tCmq6MvbjAkovaHXWbOuwQ.png" isMerged="true" [V0_FILE]typescriptreact:file="app/components/process-diagram-interactive.tsx" isMerged="true" "use client" import { useState } from "react" import { ChevronRight, ChevronLeft } from "lucide-react" export default function ProcessDiagramInteractive() { const [activeStep, setActiveStep] = useState(1) const steps = [ { id: 1, title: "Identify", description: "We detect and identify anonymous traffic visiting your site", icon: ( ), }, { id: 2, title: "Target", description: "We build smart outbound email campaigns tailored to your audience", icon: ( ), }, { id: 3, title: "Engage", description: "Prospects receive personalized outreach at scale, written to convert", icon: ( ), }, { id: 4, title: "Book", description: "We handle replies and scheduling—your calendar fills up automatically", icon: ( ), }, ] const nextStep = () => { if (activeStep < steps.length) { setActiveStep(activeStep + 1) } } const prevStep = () => { if (activeStep > 1) { setActiveStep(activeStep - 1) } } const goToStep = (stepId) => { setActiveStep(stepId) } return (

{/* Step Selector */}

{/* Progress Bar */}

{steps.map((step) => ( ))}

{/* Step Selector - Mobile */}

Step {activeStep}: {steps[activeStep - 1].title}

{/* Step Content */}

{/* Text Content */}

Step {activeStep}: {steps[activeStep - 1].title}

{activeStep === 1 && "Our proprietary technology identifies companies visiting your website without requiring them to fill out forms. We track their behavior, pages visited, and time spent to determine their level of interest."} {activeStep === 2 && "Once we identify companies visiting your site, we find the right decision-makers and create personalized outreach campaigns based on their specific interests and behavior on your website."} {activeStep === 3 && "Our team crafts personalized messages that reference their specific website activity and interests. This personalized approach generates 5x higher response rates than traditional cold outreach."} {activeStep === 4 && "We manage all responses, handle objections, and qualify prospects before scheduling them directly on your calendar. You just show up to the calls with prepared prospects."}

{activeStep === 1 && "98% of website visitors never fill out a form"} {activeStep === 2 && "93% accuracy in identifying the right decision makers"} {activeStep === 3 && "5x higher response rate than traditional cold outreach"} {activeStep === 4 && "15-30 qualified meetings booked per month"}

{/* Navigation Buttons */}

{/* Animation/Illustration */}

{/* Step Indicator */}

{activeStep} of {steps.length}

) } [V0_FILE]typescriptreact:file="app/components/how-it-works-steps.tsx" isMerged="true" "use client" import { useState } from "react" import { ChevronLeft, ChevronRight, Check } from "lucide-react" export default function HowItWorksSteps() { const [activeStep, setActiveStep] = useState(1) const steps = [ { id: 1, title: "Identify", icon: ( ), description: "We detect and identify anonymous traffic visiting your site", details: "Our proprietary technology identifies companies visiting your website without requiring them to fill out forms. We track their behavior, pages visited, and time spent to determine their level of interest.", stat: "98%", statDescription: "of website visitors never fill out a form", features: [ "Proprietary visitor identification technology", "Company-level tracking without cookies", "Behavior analysis to identify intent", ], metrics: [ { label: "Anonymous", value: 98 }, { label: "Identified", value: 2 }, ], }, { id: 2, title: "Target", icon: ( ), description: "We build smart outbound email campaigns tailored to your audience", details: "Once we identify companies visiting your site, we find the right decision-makers and create personalized outreach campaigns based on their specific interests and behavior on your website.", stat: "93%", statDescription: "accuracy in identifying the right decision makers", features: [ "AI-powered contact discovery", "Personalized messaging based on site behavior", "Multi-channel outreach strategies", ], metrics: [ { label: "Accurate", value: 93 }, { label: "Inaccurate", value: 7 }, ], }, { id: 3, title: "Engage", icon: ( ), description: "Prospects receive personalized outreach at scale, written to convert", details: "Our team crafts personalized messages that reference their specific website activity and interests. This personalized approach generates 5x higher response rates than traditional cold outreach.", stat: "5x", statDescription: "higher response rate than traditional cold outreach", features: [ "Personalized messaging at scale", "Automated follow-up sequences", "Response handling and objection management", ], metrics: [ { label: "ClikConvert", value: 83 }, { label: "Traditional", value: 17 }, ], }, { id: 4, title: "Book", icon: ( ), description: "We handle replies and scheduling—your calendar fills up automatically", details: "We manage all responses, handle objections, and qualify prospects before scheduling them directly on your calendar. You just show up to the calls with prepared prospects.", stat: "15-30", statDescription: "qualified meetings booked per month", features: [ "Automated calendar scheduling", "Pre-call qualification and briefing", "Meeting reminder and follow-up system", ], metrics: [ { label: "Qualified", value: 90 }, { label: "Unqualified", value: 10 }, ], }, ] const nextStep = () => { if (activeStep < steps.length) { setActiveStep(activeStep + 1) } } const prevStep = () => { if (activeStep > 1) { setActiveStep(activeStep - 1) } } const goToStep = (stepId) => { setActiveStep(stepId) } const activeStepData = steps.find((step) => step.id === activeStep) || steps[0] return (

{/* Step Navigation */}

{steps.map((step) => ( ))}

{/* Content Area */}

{/* Step Header */}

{activeStepData.id}

{activeStepData.title}

{/* Step Description */}

{activeStepData.description}

{/* Details Box */}

{activeStepData.details}

{/* Stat */}

{activeStepData.stat}

{activeStepData.statDescription}

{/* Features */}

Key Features:

{feature}

{/* Metrics */}

Performance Metrics:

{activeStepData.metrics.map((metric, index) => (

{metric.label} {metric.value}%

))}

{/* Image Placeholder */}

{ e.currentTarget.src = "/data-visualization-abstract.png" }} />

{/* Footer Navigation */}

{steps.map((step) => ( ))}

{/* CTA Button */}

Book a Strategy Call

) } [V0_FILE]png:file="public/data-visualization-abstract.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/data-visualization-abstract-5yv0WvaTYh6FsHvoXetzOBHz9Inf42.png" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect } from "react" import Hero from "./components/hero" import ProblemCalculator from "./components/problem-calculator" import SolutionSection from "./components/solution-section" import HowItWorksPanels from "./components/how-it-works-panels" import WhyItWorks from "./components/why-it-works" import ResultsBeforeAfter from "@/components/results-before-after" import FAQChatbot from "@/components/faq-chatbot" export default function Home() { // Force scroll to top when the page loads useEffect(() => { // Scroll to top immediately window.scrollTo(0, 0) // Also set a timeout to ensure it happens after any other effects const timer = setTimeout(() => { window.scrollTo(0, 0) }, 100) return () => clearTimeout(timer) }, []) return (

) } [V0_FILE]typescriptreact:file="app/components/how-it-works-panels.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { ChevronLeft, ChevronRight } from "lucide-react" import { cn } from "@/lib/utils" // Define the panel data structure interface Panel { id: string title: string description: string stats: { value: string label: string }[] features: { title: string description: string }[] color: string } export default function HowItWorksPanels() { // Panel data const panels: Panel[] = [ { id: "identify", title: "1. Identify Anonymous Visitors", description: "Our proprietary technology identifies the companies visiting your website, even if they don't fill out a form.", stats: [ { value: "98%", label: "of website visitors never fill out a form" }, { value: "67%", label: "of the buyer journey happens anonymously" }, ], features: [ { title: "Company Identification", description: "Identify companies visiting your site in real-time" }, { title: "Contact Discovery", description: "Get decision-maker contact information" }, { title: "Visit Tracking", description: "See which pages they viewed and for how long" }, ], color: "from-blue-600 to-blue-700", }, { id: "target", title: "2. Target High-Intent Prospects", description: "We analyze visitor behavior to identify which companies are most likely to convert.", stats: [ { value: "10x", label: "more effective than cold outreach" }, { value: "85%", label: "of prospects prefer this approach" }, ], features: [ { title: "Intent Scoring", description: "Prioritize prospects based on behavior" }, { title: "Engagement Analysis", description: "Track content engagement and interest" }, { title: "Visit Frequency", description: "Monitor repeat visits and engagement patterns" }, ], color: "from-purple-600 to-purple-700", }, { id: "engage", title: "3. Engage With Personalized Outreach", description: "Our system automatically engages prospects with personalized messaging based on their behavior.", stats: [ { value: "3.2x", label: "higher response rate than generic outreach" }, { value: "72%", label: "reduction in sales cycle length" }, ], features: [ { title: "Automated Sequences", description: "Trigger personalized outreach based on behavior" }, { title: "Multi-Channel", description: "Reach prospects via email, LinkedIn, and more" }, { title: "Content Matching", description: "Share relevant content based on interests" }, ], color: "from-teal-600 to-teal-700", }, { id: "book", title: "4. Book Qualified Meetings", description: "Convert warm leads into booked meetings directly on your calendar.", stats: [ { value: "5.4x", label: "more meetings booked than traditional methods" }, { value: "92%", label: "show-up rate for scheduled calls" }, ], features: [ { title: "Calendar Integration", description: "Seamless booking with your calendar" }, { title: "Qualification Questions", description: "Pre-qualify leads before they book" }, { title: "Automated Reminders", description: "Reduce no-shows with smart reminders" }, ], color: "from-green-600 to-green-700", }, ] // State for the active panel const [activePanel, setActivePanel] = useState(0) const [isPlaying, setIsPlaying] = useState(false) const containerRef = useRef(null) const intervalRef = useRef(null) // Handle auto-play functionality useEffect(() => { if (isPlaying) { intervalRef.current = setInterval(() => { setActivePanel((prev) => (prev + 1) % panels.length) }, 5000) } else if (intervalRef.current) { clearInterval(intervalRef.current) } return () => { if (intervalRef.current) clearInterval(intervalRef.current) } }, [isPlaying, panels.length]) // Handle keyboard navigation useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "ArrowLeft") { setActivePanel((prev) => (prev - 1 + panels.length) % panels.length) } else if (e.key === "ArrowRight") { setActivePanel((prev) => (prev + 1) % panels.length) } else if (e.key === " " || e.key === "Spacebar") { e.preventDefault() setIsPlaying((prev) => !prev) } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [panels.length]) // Handle navigation const goToPanel = (index: number) => { setActivePanel(index) if (isPlaying) { setIsPlaying(false) if (intervalRef.current) clearInterval(intervalRef.current) } } const nextPanel = () => { setActivePanel((prev) => (prev + 1) % panels.length) if (isPlaying) setIsPlaying(false) } const prevPanel = () => { setActivePanel((prev) => (prev - 1 + panels.length) % panels.length) if (isPlaying) setIsPlaying(false) } const togglePlayPause = () => { setIsPlaying((prev) => !prev) } return (

{/* Main headline */}

We turn lost traffic into live conversations.

ClikConvert uncovers the identities of your anonymous visitors and turns them into warm leads. Then, our done-for-you outreach system books qualified calls directly to your calendar.

{/* Floating Cards Navigation */}

{/* Step Navigation */}

{panels.map((panel, index) => ( ))}

{/* Content Card */}

{/* Left Column - Content */}

{activePanel + 1} {panels[activePanel].title.split(".")[1].trim()}

{panels[activePanel].description}

{/* Info Box */}

Our proprietary technology identifies companies visiting your website, even if they don't fill out a form. We track their behavior, pages visited, and time spent to determine their level of interest.

{/* Stats */}

{panels[activePanel].stats.map((stat, i) => (

{stat.value}

{stat.label}

))}

{/* Right Column - Features & Visualization */}

{/* Features */}

Key Features:

{panels[activePanel].features.map((feature, i) => (

{feature.title}

{feature.description}

))}

{/* Performance Metrics */}

Performance Metrics:

{activePanel === 0 && (

Anonymous 98%

Identified 2%

Without ClikConvert, you're missing out on 98% of your website visitors

)} {activePanel === 1 && (

High Intent 23%

Medium Intent 45%

Low Intent 32%

)} {activePanel === 2 && (

Response Rate 32%

Traditional Outreach 10%

3.2x higher response rate than traditional outreach

)} {activePanel === 3 && (

Meeting Show Rate 92%

Qualified Leads 78%

5.4x more meetings booked than traditional methods

)}

{/* Card Footer with Navigation */}

{panels.map((_, index) => ( ))}

{/* CTA Button */}

Book a Strategy Call

) } [V0_FILE]typescriptreact:file="hooks/use-intersection-observer.ts" isMerged="true" "use client" import { useState, useEffect, useRef, type RefObject } from "react" interface UseIntersectionObserverProps { threshold?: number rootMargin?: string } export function useIntersectionObserver({ threshold = 0.1, rootMargin = "0px", }: UseIntersectionObserverProps = {}): [RefObject, boolean] { const ref = useRef(null) const [isIntersecting, setIsIntersecting] = useState(false) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { // Once the element has been observed and is intersecting, set state setIsIntersecting(entry.isIntersecting) }, { rootMargin, threshold, }, ) const element = ref.current if (element) { observer.observe(element) } return () => { if (element) { observer.unobserve(element) } } }, [rootMargin, threshold]) return [ref, isIntersecting] } [V0_FILE]typescriptreact:file="components/results-dashboard.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" import { useInView } from "react-intersection-observer" import { ArrowUpRight, BarChart3, Users, LineChart, TrendingUp, ExternalLink } from "lucide-react" // Animation utility for counting up numbers const AnimatedCounter = ({ value, duration = 2000, decimals = 0, }: { value: number; duration?: number; decimals?: number }) => { const [count, setCount] = useState(0) const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.3 }) useEffect(() => { if (!inView) return let start = 0 const end = Math.min(value, 999999) const incrementTime = duration / end const timer = setInterval(() => { start += 1 setCount(start) if (start >= end) clearInterval(timer) }, incrementTime) return () => clearInterval(timer) }, [inView, value, duration]) return ( {decimals > 0 ? count.toFixed(decimals) : count} ) } // Circular progress component const CircularProgress = ({ percentage, color }: { percentage: number; color: string }) => { const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.3 }) const [progress, setProgress] = useState(0) useEffect(() => { if (!inView) return const timer = setTimeout(() => { setProgress(percentage) }, 100) return () => clearTimeout(timer) }, [inView, percentage]) const circumference = 2 * Math.PI * 40 const strokeDashoffset = circumference - (progress / 100) * circumference return (

{progress}%

) } // Bar chart component const BarChart = ({ data }: { data: { label: string; value: number; color: string }[] }) => { const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.3 }) const [visible, setVisible] = useState(false) useEffect(() => { if (inView) { const timer = setTimeout(() => { setVisible(true) }, 100) return () => clearTimeout(timer) } }, [inView]) const maxValue = Math.max(...data.map((item) => item.value)) return (

{data.map((item, index) => (

{item.value}%

{item.label}

))}

) } export default function ResultsDashboard() { const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.1 }) const [isVisible, setIsVisible] = useState(false) useEffect(() => { if (inView) { setIsVisible(true) } }, [inView]) const barChartData = [ { label: "Before", value: 12, color: "bg-gray-300" }, { label: "After", value: 68, color: "bg-gradient-to-t from-[#1e56a0] to-[#16c2d5]" }, ] const mouseMove = (e: React.MouseEvent) => { const cards = document.querySelectorAll(".metric-card") const { clientX, clientY } = e cards.forEach((card) => { const rect = card.getBoundingClientRect() const x = clientX - rect.left const y = clientY - rect.top const cardElement = card as HTMLElement cardElement.style.setProperty("--mouse-x", `${x}px`) cardElement.style.setProperty("--mouse-y", `${y}px`) }) } return (

{/* Background elements */}

{/* Clean white background */}

{/* Subtle grid pattern */}

{/* Decorative elements */}

{/* Floating shapes */}

{/* Section header */}

Real Results, Real Revenue

Our clients see dramatic improvements in lead generation and conversion rates.

{/* Metrics grid */}

{/* Metric Card 1 */}

Conversion Rate

Increase

Average improvement after implementation

{/* Metric Card 2 */}

Qualified Leads

Growth

Average increase in qualified leads per month

{/* Metric Card 3 */}

Average ROI

Return

Average return on investment within 6 months

{/* Metric Card 4 */}

Time to First Meeting

Faster

Reduction in time to first qualified meeting

{/* Data visualization section */}

{/* Circular progress chart */}

Visitor Identification Rate

B2B Companies

Tech Companies

Professional Services

{/* Bar chart */}

Conversion Rate Improvement

Average conversion rate before and after implementing ClikConvert

{/* CTA section */}

Trusted by 200+ companies

{[1, 2, 3, 4, 5].map((i) => (

))}

See How We Can Help You

) } [V0_FILE]typescriptreact:file="components/client-success-stories.tsx" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import { ArrowLeft, ArrowRight, Play, Quote } from "lucide-react" import Image from "next/image" // Define types for our case studies type CaseStudy = { id: number clientName: string industry: string challenge: string solution: string results: { metric: string before: number after: number unit: string }[] testimonial: { quote: string author: string position: string image: string } logo: string bgColor: string } // Sample case study data const caseStudies: CaseStudy[] = [ { id: 1, clientName: "TechSolutions Inc.", industry: "SaaS", challenge: "Struggling to identify and engage website visitors, resulting in missed opportunities and low conversion rates.", solution: "Implemented ClikConvert's visitor identification and automated outreach system.", results: [ { metric: "Qualified Leads", before: 12, after: 47, unit: "per month" }, { metric: "Conversion Rate", before: 1.8, after: 4.2, unit: "%" }, { metric: "Sales Meetings", before: 8, after: 32, unit: "per month" }, ], testimonial: { quote: "ClikConvert transformed our lead generation process. We're now connecting with prospects we never knew existed.", author: "Sarah Johnson", position: "VP of Marketing", image: "/professional-woman-headshot.png", }, logo: "/placeholder-tse1n.png", bgColor: "from-blue-50 to-cyan-50", }, { id: 2, clientName: "Global Consulting Group", industry: "Professional Services", challenge: "High website traffic but poor conversion to consultation bookings and difficulty tracking ROI.", solution: "Deployed ClikConvert to identify anonymous visitors and create personalized outreach campaigns.", results: [ { metric: "Identified Visitors", before: 5, after: 68, unit: "%" }, { metric: "Booked Consultations", before: 6, after: 23, unit: "per month" }, { metric: "Revenue", before: 100, after: 340, unit: "% increase" }, ], testimonial: { quote: "The ability to see which companies are visiting our site and reach out to them directly has been game-changing for our business development team.", author: "Michael Chen", position: "Director of Business Development", image: "/professional-man-headshot.png", }, logo: "/placeholder-lbkx7.png", bgColor: "from-indigo-50 to-blue-50", }, { id: 3, clientName: "Manufacturing Innovators", industry: "Manufacturing", challenge: "Long sales cycles and difficulty identifying which website visitors were genuine prospects.", solution: "Used ClikConvert to identify and prioritize high-value prospects for sales team follow-up.", results: [ { metric: "Sales Cycle", before: 94, after: 61, unit: "days" }, { metric: "Lead Quality", before: 100, after: 230, unit: "% increase" }, { metric: "Close Rate", before: 12, after: 28, unit: "%" }, ], testimonial: { quote: "ClikConvert has helped us focus our efforts on the prospects that matter most. Our sales team is now much more efficient and effective.", author: "Robert Williams", position: "Sales Director", image: "/professional-headshot.png", }, logo: "/placeholder-ylkgb.png", bgColor: "from-cyan-50 to-blue-50", }, ] export default function ClientSuccessStories() { const [activeIndex, setActiveIndex] = useState(0) const [isAnimating, setIsAnimating] = useState(false) const [isVisible, setIsVisible] = useState(false) const sectionRef = useRef(null) const activeCase = caseStudies[activeIndex] // Handle navigation const goToCase = (index: number) => { if (isAnimating) return setIsAnimating(true) setActiveIndex(index) setTimeout(() => setIsAnimating(false), 500) } const nextCase = () => { goToCase((activeIndex + 1) % caseStudies.length) } const prevCase = () => { goToCase((activeIndex - 1 + caseStudies.length) % caseStudies.length) } // Intersection observer for animations useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true) } }, { threshold: 0.1 }, ) if (sectionRef.current) { observer.observe(sectionRef.current) } return () => { if (sectionRef.current) { observer.unobserve(sectionRef.current) } } }, []) // Animation classes based on visibility const fadeInClass = isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10" return (

{/* Background elements - matching the hero section */}

{/* Clean white background */}

{/* Subtle grid pattern */}

{/* Decorative elements */}

{/* Floating shapes */}

{/* Section header */}

Client Success Stories

Real results from businesses just like yours

{/* Featured case study */}

{/* Case study header */}

{activeCase.industry}

{activeCase.clientName}

{/* Case study content */}

{/* Left column - Challenge and Solution */}

The Challenge

{activeCase.challenge}

Our Solution

{activeCase.solution}

{/* Testimonial */}

{activeCase.testimonial.quote}

{activeCase.testimonial.author}

{activeCase.testimonial.position}

{/* Right column - Results */}

The Results

{/* Results metrics */}

{activeCase.results.map((result, index) => (

{result.metric}

{result.unit}

{/* Before/After comparison */}

{/* Before bar */}

{result.before}

{/* After bar with animation */}

{result.after}

{/* Labels */}

Before

After

))}

{/* Watch video button */}

{/* Navigation controls */}

{caseStudies.map((study, index) => (

{/* Industry badges */}

SaaS

Professional Services

Manufacturing

Healthcare

E-commerce

Financial Services

) } [V0_FILE]typescriptreact:file="components/industry-specific-results.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { useInView } from "react-intersection-observer" import { ArrowRight, Building2, ShoppingBag, Stethoscope, Briefcase, Server, DollarSign, BarChart3, TrendingUp, Users, Clock, Quote, } from "lucide-react" import Image from "next/image" // Define types for our industry data type IndustryMetric = { name: string value: number benchmark: number unit: string icon: React.ReactNode description: string } type IndustryTestimonial = { quote: string author: string company: string position: string image: string } type Industry = { id: string name: string icon: React.ReactNode color: string gradientFrom: string gradientTo: string description: string metrics: IndustryMetric[] testimonial: IndustryTestimonial clients: string[] } // Sample industry data const industries: Industry[] = [ { id: "saas", name: "SaaS & Technology", icon: , color: "text-blue-600", gradientFrom: "from-blue-50", gradientTo: "to-indigo-50", description: "SaaS companies see dramatic improvements in lead quality and conversion rates with our visitor identification system.", metrics: [ { name: "Lead Conversion", value: 4.8, benchmark: 2.1, unit: "%", icon: , description: "Average conversion rate from visitor to qualified lead", }, { name: "Demo Bookings", value: 267, benchmark: 100, unit: "%", icon: , description: "Increase in demo bookings after implementation", }, { name: "Sales Cycle", value: 42, benchmark: 68, unit: "days", icon: , description: "Average time from first touch to closed deal", }, ], testimonial: { quote: "We've been able to identify and engage with enterprise prospects that were previously anonymous on our site. This has directly contributed to a 32% increase in our enterprise pipeline.", author: "David Chen", company: "CloudTech Solutions", position: "VP of Marketing", image: "/professional-man-headshot.png", }, clients: ["/placeholder-tse1n.png", "/placeholder-lbkx7.png", "/placeholder-ylkgb.png"], }, { id: "professional", name: "Professional Services", icon: , color: "text-indigo-600", gradientFrom: "from-indigo-50", gradientTo: "to-purple-50", description: "Consulting firms and agencies leverage our platform to identify high-value prospects and personalize outreach.", metrics: [ { name: "Identified Visitors", value: 72, benchmark: 23, unit: "%", icon: , description: "Percentage of B2B visitors successfully identified", }, { name: "Proposal Win Rate", value: 38, benchmark: 22, unit: "%", icon: , description: "Success rate for proposals to identified prospects", }, { name: "Client Acquisition Cost", value: 42, benchmark: 100, unit: "%", icon: , description: "Reduction in cost to acquire new clients", }, ], testimonial: { quote: "The ability to see which companies are visiting our site and tailor our outreach accordingly has transformed our business development process. We're closing larger deals with less effort.", author: "Sarah Williams", company: "Apex Consulting Group", position: "Director of Business Development", image: "/professional-woman-headshot.png", }, clients: ["/placeholder-j408s.png", "/placeholder-ofqxd.png", "/placeholder-usxui.png"], }, { id: "manufacturing", name: "Manufacturing", icon: , color: "text-cyan-600", gradientFrom: "from-cyan-50", gradientTo: "to-blue-50", description: "Manufacturing companies use our platform to identify potential buyers early in the research phase.", metrics: [ { name: "Sales Pipeline", value: 186, benchmark: 100, unit: "%", icon: , description: "Increase in qualified opportunities in pipeline", }, { name: "RFP Win Rate", value: 42, benchmark: 28, unit: "%", icon: , description: "Success rate for RFPs with identified prospects", }, { name: "Sales Cycle", value: 38, benchmark: 100, unit: "%", icon: , description: "Reduction in time from first touch to purchase", }, ], testimonial: { quote: "In our industry, knowing which companies are researching our products gives us a critical advantage. ClikConvert has helped us identify and engage with prospects much earlier in their buying journey.", author: "Michael Rodriguez", company: "Precision Manufacturing Inc.", position: "Sales Director", image: "/professional-headshot.png", }, clients: ["/placeholder-hm3cy.png", "/placeholder-g2a27.png", "/placeholder-fqvmz.png"], }, { id: "healthcare", name: "Healthcare", icon: , color: "text-emerald-600", gradientFrom: "from-emerald-50", gradientTo: "to-teal-50", description: "Healthcare providers and services companies use our platform to identify and engage with potential partners.", metrics: [ { name: "Partner Identification", value: 215, benchmark: 100, unit: "%", icon: , description: "Increase in identified potential partners", }, { name: "Meeting Conversion", value: 32, benchmark: 14, unit: "%", icon: , description: "Conversion rate from outreach to meeting", }, { name: "Contract Value", value: 47, benchmark: 100, unit: "%", icon: , description: "Increase in average contract value", }, ], testimonial: { quote: "In the healthcare space, relationships are everything. ClikConvert has helped us identify and build relationships with key decision-makers at target organizations much more efficiently.", author: "Jennifer Lee", company: "MedTech Innovations", position: "Chief Growth Officer", image: "/professional-woman-headshot.png", }, clients: ["/placeholder-etdcr.png", "/placeholder-o369l.png", "/placeholder-e7q3t.png"], }, { id: "ecommerce", name: "E-commerce", icon: , color: "text-amber-600", gradientFrom: "from-amber-50", gradientTo: "to-yellow-50", description: "E-commerce businesses use our platform to identify and engage with high-value B2B customers.", metrics: [ { name: "B2B Conversion", value: 3.8, benchmark: 1.2, unit: "%", icon: , description: "Conversion rate for B2B visitors", }, { name: "Average Order Value", value: 186, benchmark: 100, unit: "%", icon: , description: "Increase in average B2B order value", }, { name: "Repeat Purchase Rate", value: 42, benchmark: 28, unit: "%", icon: , description: "Rate of repeat purchases from B2B customers", }, ], testimonial: { quote: "We've been able to identify corporate buyers visiting our site and create personalized outreach that has dramatically increased our B2B sales channel.", author: "Robert Taylor", company: "Global Commerce Partners", position: "B2B Sales Manager", image: "/professional-man-headshot.png", }, clients: ["/placeholder-ay3a0.png", "/placeholder-7ktdr.png", "/placeholder-j408s.png"], }, ] export default function IndustrySpecificResults() { const [activeIndustry, setActiveIndustry] = useState(industries[0]) const [isAnimating, setIsAnimating] = useState(false) const [isVisible, setIsVisible] = useState(false) const sectionRef = useRef(null) const { ref, inView } = useInView({ threshold: 0.1, triggerOnce: true }) // Handle industry selection const selectIndustry = (industry: Industry) => { if (isAnimating) return setIsAnimating(true) setActiveIndustry(industry) setTimeout(() => setIsAnimating(false), 500) } // Intersection observer for animations useEffect(() => { if (inView) { setIsVisible(true) } }, [inView]) // Animation classes based on visibility const fadeInClass = isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10" return (

{/* Background elements - matching the hero section */}

{/* Clean white background */}

{/* Subtle grid pattern */}

{/* Decorative elements */}

{/* Floating shapes */}

{/* Section header */}

Industry-Specific Results

See how companies in your industry achieve exceptional results with ClikConvert

{/* Industry selection tabs */}

{industries.map((industry) => ( ))}

{/* Active industry content */}

{/* Industry header */}

{activeIndustry.icon}

{activeIndustry.name}

{activeIndustry.description}

{/* Metrics cards */}

Key Performance Metrics

{activeIndustry.metrics.map((metric, index) => (

{metric.icon}

{metric.name}

{metric.description}

{metric.unit}

{/* Metric visualization */}

{/* Benchmark indicator */}

Industry avg: {metric.benchmark} {metric.unit}

{/* Value bar with animation */}

{metric.value} {metric.unit}

))}

{/* Testimonial */}

Client Testimonial

{activeIndustry.testimonial.quote}

{activeIndustry.testimonial.author}

{activeIndustry.testimonial.position}, {activeIndustry.testimonial.company}

{/* Client logos */}

Trusted by leading {activeIndustry.name} companies

{activeIndustry.clients.map((logo, index) => (

))}

{/* CTA */}

See Results in Your Industry

) } [V0_FILE]typescriptreact:file="components/results-guarantee.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useRef } from "react" import { motion, useInView } from "framer-motion" import { Award, ChevronRight } from "lucide-react" import Link from "next/link" export default function ResultsGuarantee() { const containerRef = useRef(null) const isInView = useInView(containerRef, { once: true, amount: 0.2 }) return (

{/* Background elements */}

{/* Section Header */}

Performance Guarantee We don't promise meetings. We guarantee them. Every campaign comes with a performance guarantee. If we don't deliver qualified, booked calls—we don't stop until we do.

{/* Guarantee Box */}

Guaranteed

Our Performance Guarantee

If we don't deliver the agreed number of qualified meetings within the first 60 days, we'll continue working at no additional cost until we do. No excuses, no fine print—just results.

Book a Free Strategy Call

) } [V0_FILE]typescriptreact:file="app/about/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import type { Metadata } from "next" import AboutPageClient from "./AboutPageClient" export const metadata: Metadata = { title: "About | ClikConvert", description: "Learn about ClikConvert and our mission to transform anonymous website traffic into qualified sales conversations.", } export default function AboutPage() { return } [V0_FILE]typescriptreact:file="app/about/TeamMosaic.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { ArrowRight, Linkedin, Twitter, Mail } from "lucide-react" // Team data const teamMembers = [ { id: 1, name: "Sarah Johnson", role: "CEO & Co-Founder", image: "/professional-woman-headshot.png", experience: 15, bio: "Sarah has 15+ years of experience in B2B sales and marketing. Prior to founding ClikConvert, she led sales teams at several SaaS companies, where she recognized the need for better website visitor identification.", expertise: ["B2B Sales Strategy", "Go-to-Market Planning", "Team Leadership"], social: { linkedin: "#", twitter: "#", email: "sarah@clikconvert.com", }, }, { id: 2, name: "Michael Chen", role: "CTO & Co-Founder", image: "/professional-man-headshot.png", experience: 12, bio: "Michael brings 12+ years of technical expertise in data analytics and machine learning. He architected ClikConvert's core identification algorithm that powers our visitor recognition technology.", expertise: ["Machine Learning", "Data Analytics", "Software Architecture"], social: { linkedin: "#", twitter: "#", email: "michael@clikconvert.com", }, }, { id: 3, name: "David Rodriguez", role: "Head of Customer Success", image: "/professional-headshot.png", experience: 8, bio: "David ensures our clients achieve maximum ROI from the ClikConvert platform. His team works closely with clients to optimize their visitor identification and engagement strategies.", expertise: ["Customer Onboarding", "Success Metrics", "Client Retention"], social: { linkedin: "#", twitter: "#", email: "david@clikconvert.com", }, }, ] export default function TeamMosaic() { const [activeTeamMember, setActiveTeamMember] = useState(null) // Calculate total years of experience const totalExperience = teamMembers.reduce((total, member) => total + member.experience, 0) return (

{/* Background elements - same as hero */}

{/* Clean white background */}

{/* Subtle grid pattern */}

{/* Decorative elements */}

{/* Floating shapes */}

{/* Section heading */}

Our Team {/* Subtle underline */}

Meet the passionate experts behind ClikConvert who are dedicated to transforming how B2B companies identify and engage with their website visitors.

{/* Team experience counter */}

{totalExperience}+ Years Combined Experience

{/* Team mosaic grid */}

{teamMembers.map((member, index) => (

setActiveTeamMember(member.id)} > {/* Image with gradient overlay */}

{/* Name and role overlay */}

{member.name}

{member.role}

{/* Quick info */}

{member.experience}+ Years Experience

{member.bio}

))}

{/* Team member modal */} {activeTeamMember && (

{/* Content will be populated based on active team member */}

{teamMembers.find((m) => m.id === activeTeamMember)?.name}

{teamMembers.find((m) => m.id === activeTeamMember)?.role}

{/* Additional content would go here */}

{teamMembers.find((m) => m.id === activeTeamMember)?.bio}

Areas of Expertise

{teamMembers .find((m) => m.id === activeTeamMember) ?.expertise.map((skill, i) => ( {skill} ))}

Connect with {teamMembers.find((m) => m.id === activeTeamMember)?.name}

m.id === activeTeamMember)?.social.linkedin} className="bg-blue-50 hover:bg-blue-100 text-blue-600 p-3 rounded-full transition-colors" > m.id === activeTeamMember)?.social.twitter} className="bg-blue-50 hover:bg-blue-100 text-blue-600 p-3 rounded-full transition-colors" > m.id === activeTeamMember)?.social.email}`} className="bg-blue-50 hover:bg-blue-100 text-blue-600 p-3 rounded-full transition-colors" >

Schedule a Call with {teamMembers.find((m) => m.id === activeTeamMember)?.name.split(" ")[0]}

)} {/* Join our team CTA */}

Join Our Team

) } [V0_FILE]typescriptreact:file="styles/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; body { font-family: Arial, Helvetica, sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-20px) rotate(5deg); } } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Animation for card entrance */ @keyframes animate-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-in { animation: animate-in 0.6s ease-out forwards; } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { body { @apply bg-white text-gray-900 antialiased; } h1, h2, h3, h4, h5, h6 { @apply font-bold tracking-tight; } h1 { @apply text-4xl md:text-5xl lg:text-6xl; } h2 { @apply text-3xl md:text-4xl; } h3 { @apply text-2xl md:text-3xl; } p { @apply leading-relaxed; } } @layer components { .btn-primary { @apply relative inline-flex items-center justify-center overflow-hidden rounded-lg p-0.5 font-medium; } .btn-primary-gradient { @apply absolute inset-0 bg-gradient-to-br from-[#1e56a0] to-[#16c2d5]; } .btn-primary-gradient-hover { @apply absolute inset-0 bg-gradient-to-br from-[#174785] to-[#14afc0]; } .btn-primary-content { @apply relative rounded-md bg-white px-6 py-3 transition-all duration-300 ease-out flex items-center; } .btn-primary-text { @apply text-[#1e56a0] tracking-wide; } .btn-secondary { @apply bg-secondary hover:bg-secondary-dark text-white font-medium py-3 px-6 rounded-lg transition-colors duration-200 shadow-sm; } .container-section { @apply container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16; } .glass-card { @apply backdrop-blur-md bg-white/90 border border-gray-100/20 shadow-[0_8px_30px_rgb(0,0,0,0.06)]; } .bg-grid-pattern { background-size: 40px 40px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px); } } /* Animation keyframes */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 15px 0 rgba(30, 86, 160, 0.3); } 50% { box-shadow: 0 0 25px 5px rgba(22, 194, 213, 0.5); } } @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes bounce-in { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } } @keyframes number-count { 0% { content: "0"; } 20% { content: "20"; } 40% { content: "40"; } 60% { content: "60"; } 80% { content: "80"; } 100% { content: "100"; } } @keyframes flow { 0% { stroke-dashoffset: 1000; } 100% { stroke-dashoffset: 0; } } @keyframes rotate-3d { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } @keyframes path-animation { 0% { stroke-dashoffset: 1000; } 100% { stroke-dashoffset: 0; } } @keyframes fade-slide-up { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } /* Force initial scroll position */ html { scroll-behavior: auto !important; } body { min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; } @keyframes ping { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 75%, 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(0.95); } } @layer utilities { .animate-ping { animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite; } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } } [V0_FILE]typescriptreact:file="app/about/AboutPageClient.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import Link from "next/link" import { Play, ArrowRight, CheckCircle2 } from "lucide-react" import TeamMosaic from "./TeamMosaic" import RippleEffect from "./RippleEffect" export default function AboutPageClient() { // State for tracking which value card is active const [activeValue, setActiveValue] = useState(null) // Refs for the card container and individual cards const cardsContainerRef = useRef(null) const cardRefs = useRef<(HTMLDivElement | null)[]>([]) // Effect for handling card animations on scroll useEffect(() => { // Make sure cards are visible by default cardRefs.current.forEach((card) => { if (card) card.classList.add("opacity-100", "translate-y-0") }) const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add("animate-in") } }) }, { threshold: 0.2 }, ) cardRefs.current.forEach((card) => { if (card) observer.observe(card) }) return () => { cardRefs.current.forEach((card) => { if (card) observer.unobserve(card) }) } }, []) // Function to handle mouse movement for 3D card effect const handleMouseMove = (e: React.MouseEvent, index: number) => { if (!cardRefs.current[index]) return const card = cardRefs.current[index] const rect = card?.getBoundingClientRect() if (!rect) return const x = e.clientX - rect.left const y = e.clientY - rect.top const centerX = rect.width / 2 const centerY = rect.height / 2 const rotateX = (y - centerY) / 10 const rotateY = (centerX - x) / 10 if (card) { card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)` } } // Function to reset card transform on mouse leave const handleMouseLeave = (index: number) => { if (cardRefs.current[index]) { cardRefs.current[index]!.style.transform = "perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)" } } // Values data const values = [ { title: "Innovation", description: "We constantly push boundaries to develop cutting-edge solutions that transform how B2B companies identify and engage with their website visitors.", icon: "🚀", color: "from-blue-500 to-cyan-400", }, { title: "Transparency", description: "We believe in complete openness with our clients, providing clear insights and honest communication throughout our partnership.", icon: "🔍", color: "from-indigo-500 to-blue-400", }, { title: "Results-Driven", description: "We measure our success by the tangible outcomes we deliver for our clients, focusing on metrics that directly impact their bottom line.", icon: "📈", color: "from-cyan-500 to-blue-400", }, { title: "Partnership", description: "We work as an extension of your team, aligning our strategies with your business goals to ensure mutual success.", icon: "🤝", color: "from-blue-600 to-indigo-400", }, ] return (

{/* Hero Section - Framer-like design */}

{/* Background elements */}

{/* Clean white background */}

{/* Subtle grid pattern */}

{/* Decorative elements */}

{/* Floating shapes */}

{/* Heading with 3D effect */}

Our Story {/* Multiple layered shadows for 3D effect */} Our Story Our Story

{/* Animated divider */}

{/* Subheading */}

{/* Enhanced subheading with animated underlines */}

We're transforming how B2B companies{" "} identify and engage {" "} with their{" "} website visitors

{/* Buttons */}

{/* Interactive primary button with hover effects */} Meet Our Team {/* Animated glow effect */} {/* Interactive secondary button with hover effects */}

{/* Company badge */}

{/* Enhanced data badge with hover effect */}

Helping B2B companies since 2018

{/* Mission & Values Section - with same background style as hero */}

{/* Background elements - same as hero */}

{/* Clean white background */}

{/* Subtle grid pattern */}

{/* Decorative elements */}

{/* Floating shapes */}

{/* Section heading */}

Our Mission & Values {/* Subtle underline */}

Our mission is to empower B2B companies to unlock the full potential of their website traffic, transforming anonymous visitors into qualified sales conversations and predictable revenue.

{/* Mission statement with gradient border */}

{/* Animated corner accent */}

Our Mission

At ClikConvert, we believe every website visitor represents an opportunity. Our mission is to {" "} transform how B2B companies identify and engage with their website visitors , turning anonymous traffic into qualified sales conversations and predictable revenue. We're committed to providing innovative solutions that empower sales teams to connect with the right prospects at the right time.

{/* Stats with animated counting effect */}

250+

B2B Companies Served

$120M+

Revenue Generated

35%

Avg. Conversion Increase

{/* Values heading */}

Our Core Values

These principles guide everything we do and define how we work with our clients.

{/* Interactive 3D Values Cards */}

{values.map((value, index) => (

(cardRefs.current[index] = el)} className="relative bg-white rounded-2xl p-6 shadow-lg border border-gray-100 transition-all duration-300 transform hover:shadow-xl" style={{ transformStyle: "preserve-3d", transition: "transform 0.3s ease" }} onMouseMove={(e) => handleMouseMove(e, index)} onMouseLeave={() => handleMouseLeave(index)} onClick={() => setActiveValue(activeValue === index ? null : index)} > {/* Gradient overlay on hover */}

{/* Card content */}

{/* Icon with gradient background */}

{value.icon}

{value.title}

{value.description}

{/* Expandable content */}

How we demonstrate this value:

Through continuous innovation in our approach
By measuring and reporting on tangible results
With transparent communication at every step

{/* Expand/collapse indicator */}

))}

{/* CTA Section */}

Learn About Our Approach

{/* Team Mosaic Section */} {/* Global Impact Visualization Section */}

) } [V0_FILE]typescriptreact:file="app/about/RippleEffect.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useRef, useEffect, useState } from "react" import { ArrowRight, Globe, Users, BarChart3, Building } from "lucide-react" import Link from "next/link" // Impact data for visualization const impactData = [ { id: 1, name: "North America", clients: 120, revenue: "$65M+", position: { x: 30, y: 40 }, size: 1.2, }, { id: 2, name: "Europe", clients: 85, revenue: "$42M+", position: { x: 55, y: 35 }, size: 1, }, { id: 3, name: "Asia Pacific", clients: 45, revenue: "$18M+", position: { x: 75, y: 45 }, size: 0.9, }, { id: 4, name: "Latin America", clients: 25, revenue: "$8M+", position: { x: 40, y: 65 }, size: 0.8, }, { id: 5, name: "Middle East", clients: 15, revenue: "$6M+", position: { x: 60, y: 55 }, size: 0.7, }, ] // Impact categories for filtering const impactCategories = [ { id: "all", name: "All Impact", icon: Globe }, { id: "clients", name: "Clients Served", icon: Users }, { id: "revenue", name: "Revenue Generated", icon: BarChart3 }, { id: "industries", name: "Industries", icon: Building }, ] // Success stories for nodes const successStories = [ { id: 1, company: "TechGrowth Inc.", industry: "SaaS", result: "43% increase in qualified leads", quote: "ClikConvert transformed how we identify and engage with our website visitors, resulting in a significant boost to our pipeline.", }, { id: 2, company: "Global Manufacturing Co.", industry: "Manufacturing", result: "28% increase in sales conversions", quote: "The ability to identify anonymous website visitors has been a game-changer for our sales team's efficiency.", }, { id: 3, company: "FinServe Solutions", industry: "Financial Services", result: "52% increase in high-value meetings", quote: "We're now able to prioritize our outreach based on actual website engagement, focusing our team on the most promising opportunities.", }, { id: 4, company: "HealthTech Innovations", industry: "Healthcare", result: "37% reduction in sales cycle", quote: "Knowing which pages prospects visited allowed us to tailor our conversations and close deals faster.", }, { id: 5, company: "EduLearn Platform", industry: "Education", result: "63% increase in enterprise deals", quote: "ClikConvert helped us identify when key decision-makers were on our site, allowing for perfectly timed follow-ups.", }, ] export default function RippleEffect() { const canvasRef = useRef(null) const containerRef = useRef(null) const [activeCategory, setActiveCategory] = useState("all") const [activeNode, setActiveNode] = useState(null) const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) const [ripples, setRipples] = useState([]) const [isMobile, setIsMobile] = useState(false) // Check if device is mobile useEffect(() => { const checkMobile = () => { setIsMobile(window.innerWidth < 768) } checkMobile() window.addEventListener("resize", checkMobile) return () => window.removeEventListener("resize", checkMobile) }, []) // Handle canvas setup and animation useEffect(() => { const canvas = canvasRef.current const container = containerRef.current if (!canvas || !container) return // Set canvas size const resizeCanvas = () => { const { width, height } = container.getBoundingClientRect() canvas.width = width canvas.height = height } resizeCanvas() window.addEventListener("resize", resizeCanvas) // Canvas context const ctx = canvas.getContext("2d") if (!ctx) return // Animation variables let animationFrameId: number const centerX = canvas.width / 2 const centerY = canvas.height / 2 // Draw ripple effect const drawRipples = () => { ctx.clearRect(0, 0, canvas.width, canvas.height) // Draw central orb const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, 50) gradient.addColorStop(0, "#1e56a0") gradient.addColorStop(1, "#16c2d5") ctx.beginPath() ctx.arc(centerX, centerY, 30 + Math.sin(Date.now() / 500) * 5, 0, Math.PI * 2) ctx.fillStyle = gradient ctx.fill() // Glow effect ctx.save() ctx.beginPath() ctx.arc(centerX, centerY, 40 + Math.sin(Date.now() / 500) * 8, 0, Math.PI * 2) ctx.fillStyle = "rgba(22, 194, 213, 0.2)" ctx.filter = "blur(10px)" ctx.fill() ctx.restore() // Draw concentric rings for (let i = 0; i < 4; i++) { const radius = 80 + i * 60 + Math.sin(Date.now() / 1000 + i) * 5 ctx.beginPath() ctx.arc(centerX, centerY, radius, 0, Math.PI * 2) ctx.strokeStyle = `rgba(30, 86, 160, ${0.3 - i * 0.07})` ctx.lineWidth = 2 ctx.stroke() } // Draw impact nodes impactData.forEach((node) => { // Skip if filtered out if (activeCategory !== "all" && activeCategory !== "clients" && activeCategory !== "revenue") return const nodeX = (canvas.width * node.position.x) / 100 const nodeY = (canvas.height * node.position.y) / 100 const nodeSize = 10 * node.size // Node glow ctx.save() ctx.beginPath() ctx.arc(nodeX, nodeY, nodeSize + 5, 0, Math.PI * 2) ctx.fillStyle = "rgba(22, 194, 213, 0.3)" ctx.filter = "blur(8px)" ctx.fill() ctx.restore() // Node circle ctx.beginPath() ctx.arc(nodeX, nodeY, nodeSize, 0, Math.PI * 2) ctx.fillStyle = node.id === activeNode ? "#1e56a0" : "#16c2d5" ctx.fill() // Pulsating effect if (node.id === activeNode) { ctx.beginPath() ctx.arc(nodeX, nodeY, nodeSize + 10 + Math.sin(Date.now() / 300) * 5, 0, Math.PI * 2) ctx.strokeStyle = "rgba(30, 86, 160, 0.5)" ctx.lineWidth = 2 ctx.stroke() } }) // Draw user-generated ripples ripples.forEach((ripple, index) => { ripple.radius += 2 ripple.opacity -= 0.01 if (ripple.opacity <= 0) { // Remove faded ripples setRipples((prev) => prev.filter((_, i) => i !== index)) return } ctx.beginPath() ctx.arc(ripple.x, ripple.y, ripple.radius, 0, Math.PI * 2) ctx.strokeStyle = `rgba(22, 194, 213, ${ripple.opacity})` ctx.lineWidth = 2 ctx.stroke() }) // Draw particles flowing along rings const time = Date.now() / 1000 for (let i = 0; i < 4; i++) { const radius = 80 + i * 60 const particleCount = 8 for (let j = 0; j < particleCount; j++) { const angle = (time * (0.5 - i * 0.1) + j * ((Math.PI * 2) / particleCount)) % (Math.PI * 2) const x = centerX + Math.cos(angle) * radius const y = centerY + Math.sin(angle) * radius ctx.beginPath() ctx.arc(x, y, 3, 0, Math.PI * 2) ctx.fillStyle = j % 2 === 0 ? "#1e56a0" : "#16c2d5" ctx.fill() } } // Continue animation animationFrameId = requestAnimationFrame(drawRipples) } // Start animation drawRipples() // Cleanup return () => { window.removeEventListener("resize", resizeCanvas) cancelAnimationFrame(animationFrameId) } }, [activeNode, ripples, activeCategory]) // Handle canvas interaction const handleCanvasClick = (e: React.MouseEvent) => { const canvas = canvasRef.current if (!canvas) return const rect = canvas.getBoundingClientRect() const x = e.clientX - rect.left const y = e.clientY - rect.top // Add new ripple setRipples((prev) => [...prev, { x, y, radius: 10, opacity: 0.8 }]) // Check if clicked on a node impactData.forEach((node) => { const nodeX = (canvas.width * node.position.x) / 100 const nodeY = (canvas.height * node.position.y) / 100 const distance = Math.sqrt(Math.pow(x - nodeX, 2) + Math.pow(y - nodeY, 2)) if (distance < 20) { setActiveNode(node.id) } }) } // Handle mouse movement for lens effect const handleMouseMove = (e: React.MouseEvent) => { const canvas = canvasRef.current if (!canvas) return const rect = canvas.getBoundingClientRect() setMousePosition({ x: e.clientX - rect.left, y: e.clientY - rect.top, }) } return (

{/* Background elements */}

{/* Section heading */}

Our Global Impact

Since 2018, we've helped B2B companies around the world transform how they identify and engage with their website visitors, creating measurable impact across industries and regions.

{/* Enhanced CSS-based impact visualization */}

{/* Background glow effects */}

{/* Grid overlay */}

{/* Central orb with enhanced ripple effects */}

{/* Ripple animations - more dramatic */}

{/* Enhanced central orb with glow */}

ClikConvert

{/* Enhanced impact nodes with 3D effect and glow */}

120+

North America

120 Clients • $65M+ Revenue

"ClikConvert transformed how we identify and engage with our website visitors."

{/* Connection line to central orb */}

85+

Europe

85 Clients • $42M+ Revenue

"The ability to identify anonymous website visitors has been a game-changer for our sales team."

{/* Connection line to central orb */}

45+

Asia Pacific

45 Clients • $18M+ Revenue

"We're now able to prioritize our outreach based on actual website engagement."

{/* Connection line to central orb */}

25+

Latin America

25 Clients • $8M+ Revenue

"Knowing which pages prospects visited allowed us to tailor our conversations and close deals faster."

{/* Connection line to central orb */}

15+

Middle East

15 Clients • $6M+ Revenue

"ClikConvert helped us identify when key decision-makers were on our site, allowing for perfectly timed follow-ups."

{/* Connection line to central orb */}

{/* Enhanced flowing particles */}

{/* Larger particles */}

{/* Smaller particles */}

{/* Tiny particles */}

{/* Enhanced timeline */}

2018 2020 2022 Today

{/* Instructional overlay */}

Hover over nodes to see regional impact details

{/* Impact stats */}

290+

B2B Companies Worldwide

$140M+

Revenue Generated

Industries Transformed

{/* CTA Section */}

Add Your Success Story

) } [V0_FILE]typescriptreact:file="app/book-call/page.tsx" isEdit="true" isMerged="true" import type { Metadata } from "next" import BookCallClient from "./BookCallClient" export const metadata: Metadata = { title: "Apply for a Strategic Partnership | ClikConvert", description: "Apply to work with ClikConvert and transform how you convert anonymous website visitors into booked sales calls. Limited spots available.", } export default function BookCallPage() { return (

) } [V0_FILE]png:file="public/geometric-grid.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/geometric-grid-xByFOdjcNAI6NaP7sC3Wvb08e7Waqs.png" isMerged="true" [V0_FILE]typescriptreact:file="app/book-call/BookCallClient.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { motion } from "framer-motion" import { CheckCircle, ChevronRight, Clock, Calendar, Users, Award, ArrowRight, CheckCheck } from "lucide-react" import Image from "next/image" // Define the steps in the application process type Step = "qualification" | "tier" | "application" | "calendar" | "confirmation" // Define the tier options type Tier = "discovery" | "partnership" | "vip" export default function BookCallClient() { const [currentStep, setCurrentStep] = useState("qualification") const [selectedTier, setSelectedTier] = useState(null) const [answers, setAnswers] = useState({ companySize: "", challenge: "", timeline: "", }) const [formData, setFormData] = useState({ firstName: "", lastName: "", email: "", company: "", website: "", phone: "", goals: "", }) // Handle qualification form submission const handleQualificationSubmit = (e: React.FormEvent) => { e.preventDefault() setCurrentStep("tier") } // Handle tier selection const handleTierSelect = (tier: Tier) => { setSelectedTier(tier) setCurrentStep("application") } // Handle application form submission const handleApplicationSubmit = (e: React.FormEvent) => { e.preventDefault() setCurrentStep("calendar") } // Handle calendar selection const handleCalendarSubmit = (e: React.FormEvent) => { e.preventDefault() setCurrentStep("confirmation") } // Handle form input changes const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target if (name in answers) { setAnswers((prev) => ({ ...prev, [name]: value })) } else { setFormData((prev) => ({ ...prev, [name]: value })) } } return ( <> {/* Hero Section - Matching About/Results Page Style */}

{/* Background elements */}

{/* Clean white background */}

{/* Subtle grid pattern */}

{/* Decorative elements */}

{/* Floating shapes */}

{/* Heading with 3D effect */}

Apply Now {/* Multiple layered shadows for 3D effect */} Apply Now Apply Now

{/* Animated divider */}

{/* Subheading */}

{/* Enhanced subheading with animated underlines */}

We carefully select clients where we can{" "} deliver exceptional {" "} results. Currently accepting{" "} 5 new partners {" "} this quarter.

{/* Data badge */}

{/* Enhanced data badge with hover effect */}

Limited availability for strategic partnerships

{/* Application Process Section */}

{/* Background elements */}

{/* Subtle grid pattern */}

{/* Progress Indicator */}

{[ { step: "qualification", label: "Qualification" }, { step: "tier", label: "Select Tier" }, { step: "application", label: "Application" }, { step: "calendar", label: "Schedule" }, { step: "confirmation", label: "Confirmation" }, ].map((item, index) => (

{currentStep === "confirmation" || index < ["qualification", "tier", "application", "calendar", "confirmation"].indexOf(currentStep) ? ( ) : ( index + 1 )}

{item.label}

))}

{/* Step Content */}

{/* Qualification Step */} {currentStep === "qualification" && (

Let's see if we're a good fit

Answer these brief questions to help us understand your needs and determine if we can deliver exceptional results for your business.

What's the size of your company?

What's your biggest challenge with converting website visitors?

What's your implementation timeline?

)} {/* Tier Selection Step */} {currentStep === "tier" && (

Select Your Partnership Tier

Based on your needs, we offer three partnership levels. Each is designed to deliver exceptional results with different levels of engagement.

{/* Discovery Tier */}

handleTierSelect("discovery")} >

DISCOVERY

Initial Strategy Session

30 min

Problem identification
High-level solution overview
Initial recommendations

{/* Partnership Tier */}

handleTierSelect("partnership")} >

PARTNERSHIP

Deep Dive Session

60 min

Executive Roadmap

90 min

APPLICATION ONLY

All Partnership features
Senior team participation
Custom technology assessment
Competitive analysis
Priority implementation

)} {/* Application Form Step */} {currentStep === "application" && (

{selectedTier === "discovery" ? "Discovery Session" : selectedTier === "partnership" ? "Partnership Session" : "VIP Executive Roadmap"}

Complete Your Application

Please provide your information to complete your application for a strategic partnership.

First Name*

Last Name*

Business Email*

Phone Number*

Company Name*

Website URL*

What are your main goals for this session?

)} {/* Calendar Step */} {currentStep === "calendar" && (

Select Your Preferred Time

Choose a time that works best for your{" "} {selectedTier === "discovery" ? "30-minute Discovery Session" : selectedTier === "partnership" ? "60-minute Partnership Session" : "90-minute VIP Executive Roadmap"} .

{/* Calendar Placeholder - In a real implementation, you would integrate with a calendar service */}

May 2025

{["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day) => (

{day}

))}

{Array.from({ length: 31 }, (_, i) => i + 1).map((day) => ( ))}

Available Times for May 20, 2025

{["9:00 AM", "10:00 AM", "11:00 AM", "1:00 PM", "2:00 PM", "3:00 PM", "4:00 PM"].map((time) => ( ))}

Your Selected Time

May 20, 2025 at 2:00 PM (Your local time)

)} {/* Confirmation Step */} {currentStep === "confirmation" && (

Application Submitted!

Thank you for applying for a strategic partnership with ClikConvert. We've received your application and will review it within the next 24 hours.

Your Appointment

May 20, 2025 at 2:00 PM

Session Type

{selectedTier === "discovery" ? "30-minute Discovery Session" : selectedTier === "partnership" ? "60-minute Partnership Session" : "90-minute VIP Executive Roadmap"}

Next Steps

You'll receive a calendar invitation and preparation materials via email shortly.

Learn How It Works See Client Results

)}

{/* Social Proof Section */}

{/* Background elements */}

{/* Subtle grid pattern */}

Trusted by Industry Leaders

{/* Testimonial 1 */}

Sarah Johnson

CMO, TechCorp

"ClikConvert transformed our lead generation process. We've seen a 267% increase in qualified leads since implementation."

{/* Testimonial 2 */}

Michael Chen

CEO, GrowthWave

"The strategic partnership with ClikConvert has been game-changing. Our sales team is now focused only on pre-qualified leads."

{/* Testimonial 3 */}

Amanda Torres

Director, SaaS Solutions

"The VIP session exceeded our expectations. We implemented the roadmap and saw results within weeks."

{/* Stats */}

94%

Client Satisfaction

3.2x

Average ROI

Days to Results

{/* Behind the Scenes Preview */}

{/* Background elements */}

{/* Subtle grid pattern */}

What to Expect

Our strategic partnership process is designed to deliver maximum value in every interaction. Here's a glimpse into what happens after you apply.

Our Methodology

1

Discovery & Analysis

We analyze your current visitor data and conversion processes to identify opportunities.
2

Strategy Development

We create a customized implementation plan based on your specific business needs.
3

Implementation Support

Our team guides you through the implementation process with expert support.
4

Optimization & Growth

We continuously optimize your system to maximize results and drive ongoing growth.

Preparation Guide

To make the most of your strategic session, please have the following information ready:

Current website traffic statistics
Existing conversion rates and goals
Current lead generation process
Sales cycle information
Key business challenges and goals

Meet Your Strategy Team

Alex Morgan

Lead Strategist

Jessica Lee

Implementation Expert

David Chen

Technical Director

) } [V0_FILE]typescriptreact:file="app/results/ResultsPageClient.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { DollarSign, ArrowRight } from "lucide-react" import ResultsDashboard from "@/components/results-dashboard" import ClientSuccessStories from "@/components/client-success-stories" import IndustrySpecificResults from "@/components/industry-specific-results" import ResultsGuarantee from "@/components/results-guarantee" function RoiCalculatorStatic() { const [revenuePerMeeting, setRevenuePerMeeting] = useState(20000) const [meetingsPerMonth, setMeetingsPerMonth] = useState(15) const [clikConvertCost, setClikConvertCost] = useState(500) const [monthlyRevenue, setMonthlyRevenue] = useState(300000) const [monthlyProfit, setMonthlyProfit] = useState(299500) const [roi, setRoi] = useState(59900.0) useEffect(() => { // Calculate values immediately on component mount and when inputs change const revenue = revenuePerMeeting * meetingsPerMonth const profit = revenue - clikConvertCost const calculatedRoi = (profit / clikConvertCost) * 100 setMonthlyRevenue(revenue) setMonthlyProfit(profit) setRoi(calculatedRoi) }, [revenuePerMeeting, meetingsPerMonth, clikConvertCost]) const formatCurrency = (value: number) => { return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0, }).format(value) } return (

{/* Background elements */}

{/* Clean white background */}

{/* Subtle grid pattern */}

{/* Decorative elements */}

Calculate Your Potential ROI

Estimate the potential return on investment you could achieve with ClikConvert.

ROI Calculator

Estimate your potential return on investment

Investment Assumptions

Average Revenue Per Meeting

setRevenuePerMeeting(Number.parseInt(e.target.value) || 0)} className="block w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:ring-[#1e56a0] focus:border-[#1e56a0] text-lg" placeholder="20,000" />

Meetings Booked Per Month

setMeetingsPerMonth(Number.parseInt(e.target.value) || 0)} className="block w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-[#1e56a0] focus:border-[#1e56a0] text-lg" placeholder="15" />

ClikConvert Monthly Cost

setClikConvertCost(Number.parseInt(e.target.value) || 0)} className="block w-full pl-10 px-4 py-2 border border-gray-300 rounded-md focus:ring-[#1e56a0] focus:border-[#1e56a0] text-lg" placeholder="500" />

Projected ROI

Monthly Revenue

{formatCurrency(monthlyRevenue)}

Monthly Profit

{formatCurrency(monthlyProfit)}

Return on Investment (ROI)

{roi.toFixed(1)}

Get a Custom ROI Estimate

) } export default function ResultsPageClient() { return (

{/* Hero Section */}

{/* Background elements */}

{/* Clean white background */}

{/* Subtle grid pattern */}

{/* Decorative elements */}

{/* Floating shapes */}

{/* Heading with 3D effect */}

Our Results {/* Multiple layered shadows for 3D effect */} Our Results Our Results

{/* Animated divider */}

{/* Subheading */}

{/* Enhanced subheading with animated underlines */}

We don't{" "} promise {" "} meetings. We{" "} guarantee {" "} them.

{/* Data badge */}

{/* Enhanced data badge with hover effect */}

Proven results with 500+ B2B companies

{/* Results Dashboard section */} {/* Client Success Stories section */} {/* Industry-Specific Results section */} {/* ROI Calculator section - directly embedded */} {/* Results Guarantee section */}

) } [V0_FILE]typescriptreact:file="app/results/ResultsClient.tsx" isMerged="true" "use client" import ResultsDashboard from "@/components/results-dashboard" import ClientSuccessStories from "@/components/client-success-stories" import IndustrySpecificResults from "@/components/industry-specific-results" import ResultsGuarantee from "@/components/results-guarantee" import dynamic from "next/dynamic" // Dynamically import the RoiCalculator with no SSR const RoiCalculator = dynamic(() => import("@/components/roi-calculator"), { ssr: false }) export default function ResultsClient() { return (

{/* Hero Section */}

{/* Background elements */}

{/* Clean white background */}

{/* Subtle grid pattern */}

{/* Decorative elements */}

{/* Floating shapes */}

{/* Heading with 3D effect */}

Our Results {/* Multiple layered shadows for 3D effect */} Our Results Our Results

{/* Animated divider */}

{/* Subheading */}

{/* Enhanced subheading with animated underlines */}

We don't{" "} promise {" "} meetings. We{" "} guarantee {" "} them.

{/* Data badge */}

{/* Enhanced data badge with hover effect */}

Proven results with 500+ B2B companies

{/* Results Dashboard section */} {/* Client Success Stories section */} {/* Industry-Specific Results section */} {/* Dynamically loaded ROI Calculator */} {/* Results Guarantee section */}

) } [V0_FILE]typescriptreact:file="app/results/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import type { Metadata } from "next" import ResultsClient from "./ResultsClient" export const metadata: Metadata = { title: "Results & Testimonials | ClikConvert", description: "See the real results businesses achieve with ClikConvert's visitor identification and outreach system.", } export default function ResultsPage() { return } [V0_FILE]typescriptreact:file="components/roi-calculator.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" export default function RoiCalculator() { // Interactive state const [revenuePerMeeting, setRevenuePerMeeting] = useState(20000) const [meetingsPerMonth, setMeetingsPerMonth] = useState(15) const [monthlyCost, setMonthlyCost] = useState(500) const [monthlyRevenue, setMonthlyRevenue] = useState(300000) const [monthlyProfit, setMonthlyProfit] = useState(299500) const [roi, setRoi] = useState(59900) // Calculate results when inputs change useEffect(() => { const revenue = revenuePerMeeting * meetingsPerMonth const profit = revenue - monthlyCost const roiValue = monthlyCost > 0 ? (profit / monthlyCost) * 100 : 0 setMonthlyRevenue(revenue) setMonthlyProfit(profit) setRoi(roiValue) }, [revenuePerMeeting, meetingsPerMonth, monthlyCost]) return (

Calculate Your Potential ROI

Estimate the potential return on investment you could achieve with ClikConvert.

ROI Calculator

Estimate your potential return on investment

Investment Assumptions

Average Revenue Per Meeting

$ setRevenuePerMeeting(Number(e.target.value) || 0)} className="block w-full pl-8 pr-4 py-3 border border-gray-300 rounded-lg" />

Meetings Booked Per Month setMeetingsPerMonth(Number(e.target.value) || 0)} className="block w-full px-4 py-3 border border-gray-300 rounded-lg" />

ClikConvert Monthly Cost

$ setMonthlyCost(Number(e.target.value) || 0)} className="block w-full pl-8 pr-4 py-3 border border-gray-300 rounded-lg" />

Projected ROI

Monthly Revenue

${monthlyRevenue.toLocaleString()}

Monthly Profit

${monthlyProfit.toLocaleString()}

Return on Investment (ROI)

{roi.toLocaleString(undefined, { maximumFractionDigits: 1 })}

Get a Custom ROI Estimate

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next/types" import { Inter } from "next/font/google" import "./globals.css" import Header from "./components/header" import ImmersiveFooter from "@/components/immersive-footer" import ClientLayout from "./ClientLayout" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "ClikConvert | Turn Anonymous Website Visitors Into Booked Sales Calls", description: "ClikConvert identifies your high-intent traffic and gets them on your calendar—automatically.", openGraph: { title: "ClikConvert | Turn Anonymous Website Visitors Into Booked Sales Calls", description: "ClikConvert identifies your high-intent traffic and gets them on your calendar—automatically.", url: "https://clikconvert.com", siteName: "ClikConvert", images: [ { url: "/og-image.jpg", width: 1200, height: 630, alt: "ClikConvert", }, ], locale: "en_US", type: "website", }, twitter: { card: "summary_large_image", title: "ClikConvert | Turn Anonymous Website Visitors Into Booked Sales Calls", description: "ClikConvert identifies your high-intent traffic and gets them on your calendar—automatically.", images: ["/og-image.jpg"], }, generator: "v0.dev", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {/* Simple script to ensure page starts at top */}

About

Tags

Share

More from humexa

More Templates Like This

About

Tags

Share

About

Tags

Share

More from humexa

More Templates Like This