1054 lines
76 KiB
HTML
1054 lines
76 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="scroll-smooth">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CartPulse AI — AI-Powered Cart Abandonment Prevention for WooCommerce</title>
|
|
<meta name="description" content="Stop losing 70% of your sales to cart abandonment. CartPulse AI detects exit intent in real time and delivers personalized AI interventions. 7 strategies, A/B testing, GDPR compliant. $49 one-time for WooCommerce.">
|
|
<meta name="keywords" content="woocommerce, cart abandonment, exit intent, ai, cart recovery, conversion optimization, woocommerce plugin, popup, openai, ecommerce">
|
|
<meta name="author" content="Earlybirds">
|
|
<meta name="robots" content="index, follow">
|
|
<link rel="canonical" href="https://earlybirds.me/cartpulse-ai">
|
|
|
|
<!-- Open Graph -->
|
|
<meta property="og:type" content="product">
|
|
<meta property="og:title" content="CartPulse AI — Stop Cart Abandonment in Real Time">
|
|
<meta property="og:description" content="AI-powered exit intent detection with 7 intervention strategies for WooCommerce. Recover up to 25% more revenue. $49 one-time.">
|
|
<meta property="og:url" content="https://earlybirds.me/cartpulse-ai">
|
|
<meta property="og:site_name" content="Earlybirds">
|
|
<meta property="product:price:amount" content="49">
|
|
<meta property="product:price:currency" content="USD">
|
|
<meta property="og:image" content="https://earlybirds.me/cartpulse-ai/assets/screenshots/new-dashboard.png">
|
|
<meta property="og:image:width" content="1200">
|
|
<meta property="og:image:height" content="630">
|
|
<meta property="og:image:alt" content="CartPulse AI dashboard in WooCommerce">
|
|
|
|
<!-- Twitter -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="CartPulse AI — Stop Cart Abandonment in Real Time">
|
|
<meta name="twitter:description" content="AI-powered exit intent detection with 7 intervention strategies for WooCommerce. $49 one-time.">
|
|
<meta name="twitter:image" content="https://earlybirds.me/cartpulse-ai/assets/screenshots/new-dashboard.png">
|
|
<meta name="twitter:image:alt" content="CartPulse AI dashboard in WooCommerce">
|
|
|
|
<!-- JSON-LD Structured Data -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "SoftwareApplication",
|
|
"name": "CartPulse AI",
|
|
"description": "AI-powered real-time cart abandonment prevention for WooCommerce",
|
|
"applicationCategory": "BusinessApplication",
|
|
"operatingSystem": "WordPress",
|
|
"offers": {
|
|
"@type": "Offer",
|
|
"price": "49",
|
|
"priceCurrency": "USD"
|
|
},
|
|
"author": {
|
|
"@type": "Organization",
|
|
"name": "Earlybirds",
|
|
"url": "https://earlybirds.me"
|
|
}
|
|
}
|
|
</script>
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "VideoObject",
|
|
"name": "CartPulse AI product tour",
|
|
"description": "Overview of CartPulse AI for WooCommerce: real-time cart abandonment prevention, campaigns, and analytics.",
|
|
"thumbnailUrl": "https://earlybirds.me/cartpulse-ai/assets/screenshots/new-dashboard.png",
|
|
"uploadDate": "2026-03-23",
|
|
"contentUrl": "https://earlybirds.me/cartpulse-ai/assets/video/cartpulse-ai/video60s.mp4"
|
|
}
|
|
</script>
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
brand: {
|
|
50: '#eef2ff',
|
|
100: '#e0e7ff',
|
|
200: '#c7d2fe',
|
|
300: '#a5b4fc',
|
|
400: '#818cf8',
|
|
500: '#6366f1',
|
|
600: '#4f46e5',
|
|
700: '#4338ca',
|
|
800: '#3730a3',
|
|
900: '#312e81',
|
|
950: '#1e1b4b',
|
|
},
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
|
|
mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
|
|
},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
/* Smooth entrance animations */
|
|
@keyframes fade-up {
|
|
from { opacity: 0; transform: translateY(30px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-12px); }
|
|
}
|
|
@keyframes pulse-ring {
|
|
0% { transform: scale(0.9); opacity: 1; }
|
|
100% { transform: scale(1.5); opacity: 0; }
|
|
}
|
|
@keyframes count-up {
|
|
from { opacity: 0; transform: scale(0.5); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
@keyframes gradient-shift {
|
|
0%, 100% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
}
|
|
|
|
.animate-fade-up { animation: fade-up 0.7s ease-out both; }
|
|
.animate-fade-in { animation: fade-in 0.5s ease-out both; }
|
|
.animate-float { animation: float 6s ease-in-out infinite; }
|
|
.animate-float-delayed { animation: float 6s ease-in-out 2s infinite; }
|
|
.animate-gradient { animation: gradient-shift 8s ease infinite; background-size: 200% 200%; }
|
|
|
|
/* Intersection Observer reveal */
|
|
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
|
|
.reveal.visible { opacity: 1; transform: translateY(0); }
|
|
.reveal-delay-1 { transition-delay: 0.1s; }
|
|
.reveal-delay-2 { transition-delay: 0.2s; }
|
|
.reveal-delay-3 { transition-delay: 0.3s; }
|
|
.reveal-delay-4 { transition-delay: 0.4s; }
|
|
.reveal-delay-5 { transition-delay: 0.5s; }
|
|
|
|
/* Hero grid */
|
|
.hero-grid {
|
|
background-image:
|
|
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
|
|
background-size: 60px 60px;
|
|
}
|
|
|
|
/* Glass card */
|
|
.glass { background: rgba(255,255,255,0.05); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1); }
|
|
|
|
/* FAQ Accordion */
|
|
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; padding-top: 0; padding-bottom: 0; }
|
|
.faq-item.open .faq-answer { max-height: 500px; padding-top: 0.75rem; padding-bottom: 0; }
|
|
.faq-item.open .faq-chevron { transform: rotate(180deg); }
|
|
.faq-chevron { transition: transform 0.3s ease; }
|
|
|
|
/* Comparison row highlight */
|
|
.comparison-row:hover { background: #f0fdf4; }
|
|
|
|
/* Noise texture */
|
|
.noise::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0.015;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar { width: 8px; }
|
|
::-webkit-scrollbar-track { background: #f1f5f9; }
|
|
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #64748b; }
|
|
|
|
/* Demo browser chrome */
|
|
.demo-browser-dot { width: 10px; height: 10px; border-radius: 9999px; }
|
|
.gallery-chip { transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
|
|
.gallery-chip.is-active { background: #4f46e5; color: #fff; border-color: #4f46e5; }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.gallery-card { transition: none; }
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="font-sans text-gray-900 antialiased">
|
|
|
|
<!-- ============================================================
|
|
NAVIGATION
|
|
============================================================ -->
|
|
<nav id="nav" class="fixed top-0 inset-x-0 z-50 transition-all duration-300">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center justify-between h-16 lg:h-20">
|
|
<!-- Logo -->
|
|
<a href="index.html" class="flex items-center gap-2.5 group">
|
|
<div class="w-9 h-9 rounded-xl bg-white ">
|
|
<!-- CartPulse-AI Logo -->
|
|
<img src="assets/img/logo.png" alt="CartPulse-AI Logo" >
|
|
</div>
|
|
<span class="text-lg font-bold text-brand-500">CartPulse <span class="text-brand-500">AI</span></span>
|
|
</a>
|
|
|
|
<!-- Desktop links -->
|
|
<div class="hidden md:flex items-center gap-6 lg:gap-8">
|
|
<a href="#features" class="text-sm font-medium nav-link-text hover:text-brand-500 transition-colors">Features</a>
|
|
<a href="https://acg.earlybirds.me/" class="text-sm font-medium nav-link-text hover:text-brand-500 transition-colors">Demo</a>
|
|
<a href="#how-it-works" class="text-sm font-medium nav-link-text hover:text-brand-500 transition-colors">How It Works</a>
|
|
<a href="#comparison" class="text-sm font-medium nav-link-text hover:text-brand-500 transition-colors">Compare</a>
|
|
<a href="#faq" class="text-sm font-medium nav-link-text hover:text-brand-500 transition-colors">FAQ</a>
|
|
<a href="docs/cartpulse-ai.html" class="text-sm font-medium nav-link-text hover:text-brand-500 transition-colors">Docs</a>
|
|
<a href="support.html" class="text-sm font-medium nav-link-text hover:text-brand-500 transition-colors">Support</a>
|
|
<a href="#pricing" class="inline-flex items-center gap-2 px-5 py-2.5 bg-brand-600 text-white text-sm font-semibold rounded-xl hover:bg-brand-700 transition-colors shadow-lg shadow-brand-600/25">
|
|
Get CartPulse AI
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Mobile menu button -->
|
|
<button id="mobile-menu-btn" class="md:hidden p-2 rounded-lg hover:bg-white/10 transition" aria-label="Menu">
|
|
<svg class="w-6 h-6 nav-link-text" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile menu -->
|
|
<div id="mobile-menu" class="md:hidden hidden bg-white border-t border-gray-100 shadow-xl">
|
|
<div class="px-4 py-4 space-y-2">
|
|
<a href="#features" class="block px-4 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50">Features</a>
|
|
<a href="https://acg.earlybirds.me/" class="block px-4 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50">Demo</a>
|
|
<a href="#how-it-works" class="block px-4 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50">How It Works</a>
|
|
<a href="#comparison" class="block px-4 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50">Compare</a>
|
|
<a href="#faq" class="block px-4 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50">FAQ</a>
|
|
<a href="docs/cartpulse-ai.html" class="block px-4 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50">Documentation</a>
|
|
<a href="support.html" class="block px-4 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-50">Support</a>
|
|
<a href="#pricing" class="block px-4 py-3 bg-brand-600 text-white text-sm font-semibold rounded-xl text-center mt-2">Get CartPulse AI — $49</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
<!-- ============================================================
|
|
HERO SECTION
|
|
============================================================ -->
|
|
<header class="relative min-h-[100svh] flex items-center bg-gradient-to-br from-brand-950 via-brand-900 to-purple-900 overflow-hidden noise">
|
|
<div class="absolute inset-0 hero-grid"></div>
|
|
|
|
<!-- Glow orbs -->
|
|
<div class="absolute top-1/4 -right-32 w-[500px] h-[500px] bg-brand-500/20 rounded-full blur-[120px] animate-float"></div>
|
|
<div class="absolute -bottom-24 left-1/4 w-[400px] h-[400px] bg-purple-500/15 rounded-full blur-[100px] animate-float-delayed"></div>
|
|
|
|
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32 lg:py-40">
|
|
<div class="max-w-3xl">
|
|
<!-- Badge -->
|
|
<div class="animate-fade-up inline-flex items-center gap-2 px-4 py-2 glass rounded-full mb-8">
|
|
<span class="flex h-2 w-2 relative">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-400"></span>
|
|
</span>
|
|
<span class="text-sm text-gray-300">AI-Powered · WooCommerce</span>
|
|
</div>
|
|
|
|
<!-- Headline -->
|
|
<h1 class="animate-fade-up text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-black text-white leading-[1.08] tracking-tight" style="animation-delay:0.1s">
|
|
Stop Losing <span class="bg-gradient-to-r from-brand-400 to-purple-400 bg-clip-text text-transparent">70%</span> of Your Sales to Cart Abandonment
|
|
</h1>
|
|
|
|
<!-- Subheadline -->
|
|
<p class="animate-fade-up mt-6 text-lg sm:text-xl text-gray-300 leading-relaxed max-w-2xl" style="animation-delay:0.2s">
|
|
CartPulse AI detects when shoppers are about to leave and delivers a personalized, AI‑generated offer in real time — before they're gone forever.
|
|
</p>
|
|
|
|
<!-- CTA -->
|
|
<div class="animate-fade-up mt-10 flex flex-col sm:flex-row gap-4" style="animation-delay:0.3s">
|
|
<a href="#pricing" class="inline-flex items-center justify-center gap-2.5 px-8 py-4 bg-white text-brand-700 text-base font-bold rounded-2xl hover:bg-gray-100 transition-colors shadow-2xl shadow-white/10">
|
|
Get CartPulse AI — $49
|
|
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
|
</a>
|
|
<a href="#how-it-works" class="inline-flex items-center justify-center gap-2 px-8 py-4 text-white/90 text-base font-semibold rounded-2xl border border-white/15 hover:bg-white/5 transition-colors">
|
|
See How It Works
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Trust badges -->
|
|
<div class="animate-fade-up mt-10 flex flex-wrap gap-x-6 gap-y-2 text-sm text-gray-400" style="animation-delay:0.4s">
|
|
<span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Works without AI key</span>
|
|
<span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>5-minute setup</span>
|
|
<span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>GDPR compliant</span>
|
|
<span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>No monthly fees</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
|
|
<!-- ============================================================
|
|
PROBLEM — STAT CARDS
|
|
============================================================ -->
|
|
<section class="relative py-24 lg:py-32 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center max-w-3xl mx-auto mb-16 reveal">
|
|
<p class="text-sm font-semibold text-brand-600 tracking-widest uppercase mb-3">The Problem</p>
|
|
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight">Cart Abandonment Is Costing You <span class="text-red-500">Thousands</span> Every Month</h2>
|
|
<p class="mt-6 text-lg text-gray-600 leading-relaxed">The Baymard Institute analyzed 48 studies and found that 70.19% of online shopping carts are abandoned. Most cart recovery tools try to fix this with emails — but the shopper has already moved on.</p>
|
|
</div>
|
|
|
|
<!-- Stat cards -->
|
|
<div class="grid md:grid-cols-3 gap-6 lg:gap-8">
|
|
<div class="reveal reveal-delay-1 group relative bg-gradient-to-br from-red-50 to-orange-50 border border-red-100 rounded-3xl p-8 text-center hover:shadow-xl hover:shadow-red-100/50 transition-shadow duration-500">
|
|
<div class="text-5xl lg:text-6xl font-black text-red-500 mb-2 stat-number" data-target="70.19">0</div>
|
|
<div class="text-xl font-bold text-red-500 mb-1">%</div>
|
|
<p class="text-gray-600 font-medium">of carts are abandoned before checkout</p>
|
|
</div>
|
|
<div class="reveal reveal-delay-2 group relative bg-gradient-to-br from-amber-50 to-yellow-50 border border-amber-100 rounded-3xl p-8 text-center hover:shadow-xl hover:shadow-amber-100/50 transition-shadow duration-500">
|
|
<div class="text-5xl lg:text-6xl font-black text-amber-500 mb-2">$18B</div>
|
|
<p class="text-gray-600 font-medium">lost annually to cart abandonment worldwide</p>
|
|
</div>
|
|
<div class="reveal reveal-delay-3 group relative bg-gradient-to-br from-green-50 to-emerald-50 border border-green-100 rounded-3xl p-8 text-center hover:shadow-xl hover:shadow-green-100/50 transition-shadow duration-500">
|
|
<div class="text-5xl lg:text-6xl font-black text-green-500 mb-2"><2s</div>
|
|
<p class="text-gray-600 font-medium">to intervene before they leave your store</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="reveal reveal-delay-4 text-center mt-12 text-lg text-gray-500 font-medium">The window to convert an abandoning shopper is measured in <strong class="text-gray-800">seconds</strong>, not hours.</p>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- ============================================================
|
|
HOW IT WORKS — 3 STEPS
|
|
============================================================ -->
|
|
<section id="how-it-works" class="relative py-24 lg:py-32 bg-gray-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center max-w-3xl mx-auto mb-20 reveal">
|
|
<p class="text-sm font-semibold text-brand-600 tracking-widest uppercase mb-3">How It Works</p>
|
|
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight">Intervene in Real Time.<br class="hidden sm:block"> Not After the Fact.</h2>
|
|
</div>
|
|
|
|
<div class="grid lg:grid-cols-3 gap-8 lg:gap-12">
|
|
<!-- Step 1 -->
|
|
<div class="reveal reveal-delay-1 relative">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div class="flex-shrink-0 w-14 h-14 rounded-2xl bg-brand-600 flex items-center justify-center shadow-lg shadow-brand-600/30">
|
|
<svg class="w-7 h-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 3.75H6A2.25 2.25 0 003.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0120.25 6v1.5m0 9V18A2.25 2.25 0 0118 20.25h-1.5m-9 0H6A2.25 2.25 0 013.75 18v-1.5M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
|
</div>
|
|
<div>
|
|
<span class="text-xs font-bold text-brand-600 uppercase tracking-widest">Step 1</span>
|
|
<h3 class="text-xl font-bold">Detect</h3>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-600 leading-relaxed">CartPulse silently monitors <strong>6 behavioral signals</strong> — mouse trajectory, rapid scroll-up, tab switching, idle time, back-button hover, and mobile swipe patterns — to predict abandonment the moment it begins.</p>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="reveal reveal-delay-2 relative">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div class="flex-shrink-0 w-14 h-14 rounded-2xl bg-purple-600 flex items-center justify-center shadow-lg shadow-purple-600/30">
|
|
<svg class="w-7 h-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456z"/></svg>
|
|
</div>
|
|
<div>
|
|
<span class="text-xs font-bold text-purple-600 uppercase tracking-widest">Step 2</span>
|
|
<h3 class="text-xl font-bold">Personalize</h3>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-600 leading-relaxed">The AI engine (OpenAI GPT-4o or Anthropic Claude — or smart template fallback) analyzes <strong>cart value, product categories, and customer context</strong> to generate the highest-converting intervention for that specific shopper.</p>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="reveal reveal-delay-3 relative">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div class="flex-shrink-0 w-14 h-14 rounded-2xl bg-green-600 flex items-center justify-center shadow-lg shadow-green-600/30">
|
|
<svg class="w-7 h-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"/></svg>
|
|
</div>
|
|
<div>
|
|
<span class="text-xs font-bold text-green-600 uppercase tracking-widest">Step 3</span>
|
|
<h3 class="text-xl font-bold">Convert</h3>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-600 leading-relaxed">A beautifully designed popup appears with a <strong>personalized offer</strong> — a discount, free shipping nudge, urgency timer, or spin wheel. The shopper engages, completes checkout. <strong>Revenue recovered.</strong></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- ============================================================
|
|
PRODUCT DEMO — VIDEO + SCREENSHOTS
|
|
============================================================ -->
|
|
<section id="demo" class="relative py-24 lg:py-32 bg-white overflow-hidden">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center max-w-3xl mx-auto mb-16 reveal">
|
|
<p class="text-sm font-semibold text-brand-600 tracking-widest uppercase mb-3">Product tour</p>
|
|
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight">See CartPulse AI in Action</h2>
|
|
<p class="mt-6 text-lg text-gray-600 leading-relaxed">A full walkthrough of the admin experience, campaigns, and storefront interventions — then explore high-resolution screenshots by area.</p>
|
|
</div>
|
|
|
|
<!-- Video -->
|
|
<div class="max-w-4xl mx-auto mb-20 lg:mb-28 reveal reveal-delay-1">
|
|
<div class="rounded-2xl border border-gray-200 bg-gray-50/80 shadow-2xl shadow-gray-900/10 overflow-hidden">
|
|
<div class="flex items-center gap-2 px-4 py-3 bg-gray-100 border-b border-gray-200">
|
|
<span class="demo-browser-dot bg-red-400"></span>
|
|
<span class="demo-browser-dot bg-amber-400"></span>
|
|
<span class="demo-browser-dot bg-green-400"></span>
|
|
<span class="ml-3 text-xs font-medium text-gray-500 truncate">cartpulse-ai — WooCommerce</span>
|
|
</div>
|
|
<div class="bg-gray-900 aspect-video">
|
|
<video
|
|
class="w-full h-full object-contain"
|
|
controls
|
|
playsinline
|
|
preload="metadata"
|
|
poster="assets/screenshots/new-dashboard.png"
|
|
aria-label="CartPulse AI product tour video: dashboard, campaigns, and recovery features."
|
|
>
|
|
<source src="assets/video/cartpulse-ai/video60s.mp4" type="video/mp4">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
</div>
|
|
</div>
|
|
<p class="mt-4 text-center text-sm text-gray-500">HD overview · ~60s · Admin and storefront highlights</p>
|
|
</div>
|
|
|
|
<!-- Screenshot gallery -->
|
|
<div id="screenshots" class="reveal reveal-delay-2 scroll-mt-28">
|
|
<div class="text-center max-w-2xl mx-auto mb-10">
|
|
<h3 class="text-2xl sm:text-3xl font-bold text-gray-900 tracking-tight">Screenshots</h3>
|
|
<p class="mt-3 text-gray-600">Filter by area. Click any image to view full size.</p>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap justify-center gap-2 mb-10" id="gallery-filters" role="tablist" aria-label="Screenshot categories">
|
|
<button type="button" class="gallery-chip is-active px-4 py-2 rounded-full text-sm font-semibold border border-gray-200 bg-white text-gray-700 hover:border-brand-300" data-filter="all" role="tab" aria-selected="true">All</button>
|
|
<button type="button" class="gallery-chip px-4 py-2 rounded-full text-sm font-semibold border border-gray-200 bg-white text-gray-700 hover:border-brand-300" data-filter="overview" role="tab" aria-selected="false">Overview</button>
|
|
<button type="button" class="gallery-chip px-4 py-2 rounded-full text-sm font-semibold border border-gray-200 bg-white text-gray-700 hover:border-brand-300" data-filter="campaigns" role="tab" aria-selected="false">Campaigns</button>
|
|
<button type="button" class="gallery-chip px-4 py-2 rounded-full text-sm font-semibold border border-gray-200 bg-white text-gray-700 hover:border-brand-300" data-filter="triggers" role="tab" aria-selected="false">Triggers</button>
|
|
<button type="button" class="gallery-chip px-4 py-2 rounded-full text-sm font-semibold border border-gray-200 bg-white text-gray-700 hover:border-brand-300" data-filter="settings" role="tab" aria-selected="false">Settings</button>
|
|
<button type="button" class="gallery-chip px-4 py-2 rounded-full text-sm font-semibold border border-gray-200 bg-white text-gray-700 hover:border-brand-300" data-filter="wizard" role="tab" aria-selected="false">Setup wizard</button>
|
|
<button type="button" class="gallery-chip px-4 py-2 rounded-full text-sm font-semibold border border-gray-200 bg-white text-gray-700 hover:border-brand-300" data-filter="interventions" role="tab" aria-selected="false">Interventions</button>
|
|
</div>
|
|
|
|
<div id="gallery-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Lightbox -->
|
|
<div id="lightbox" class="fixed inset-0 z-[100] hidden flex-col items-center justify-center p-4 sm:p-8 bg-gray-950/90 backdrop-blur-sm" role="dialog" aria-modal="true" aria-labelledby="lightbox-caption">
|
|
<button type="button" id="lightbox-close" class="absolute top-4 right-4 z-10 flex h-11 w-11 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20 transition-colors" aria-label="Close preview">
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
|
</button>
|
|
<div class="max-w-[min(100%,1200px)] max-h-[min(85vh,900px)] flex flex-col items-center">
|
|
<img id="lightbox-img" src="" alt="" class="max-h-[min(80vh,860px)] w-auto max-w-full rounded-lg shadow-2xl object-contain border border-white/10">
|
|
<p id="lightbox-caption" class="mt-4 text-center text-sm font-medium text-gray-200 max-w-2xl"></p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- ============================================================
|
|
FEATURES GRID
|
|
============================================================ -->
|
|
<section id="features" class="relative py-24 lg:py-32 bg-white overflow-hidden">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center max-w-3xl mx-auto mb-20 reveal">
|
|
<p class="text-sm font-semibold text-brand-600 tracking-widest uppercase mb-3">Features</p>
|
|
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight">Everything You Need to Convert Abandoning Shoppers</h2>
|
|
</div>
|
|
|
|
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
|
|
|
|
<!-- Feature cards -->
|
|
<article class="reveal reveal-delay-1 group relative bg-white border border-gray-200 rounded-2xl p-7 hover:border-brand-200 hover:shadow-xl hover:shadow-brand-100/40 transition-all duration-300">
|
|
<div class="w-11 h-11 rounded-xl bg-brand-50 flex items-center justify-center mb-5 group-hover:bg-brand-100 transition-colors">
|
|
<svg class="w-6 h-6 text-brand-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456z"/></svg>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-2">AI-Powered Messages</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">OpenAI or Anthropic generates personalized copy tailored to each cart and shopper. No API key? Smart templates work beautifully out of the box.</p>
|
|
</article>
|
|
|
|
<article class="reveal reveal-delay-2 group relative bg-white border border-gray-200 rounded-2xl p-7 hover:border-brand-200 hover:shadow-xl hover:shadow-brand-100/40 transition-all duration-300">
|
|
<div class="w-11 h-11 rounded-xl bg-red-50 flex items-center justify-center mb-5 group-hover:bg-red-100 transition-colors">
|
|
<svg class="w-6 h-6 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 3.75H6A2.25 2.25 0 003.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0120.25 6v1.5m0 9V18A2.25 2.25 0 0118 20.25h-1.5m-9 0H6A2.25 2.25 0 013.75 18v-1.5M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-2">6-Signal Exit Detection</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Mouse trajectory, scroll velocity, tab visibility, idle time, back-button proximity, and mobile touch — catch 3x more exit signals than basic detection.</p>
|
|
</article>
|
|
|
|
<article class="reveal reveal-delay-3 group relative bg-white border border-gray-200 rounded-2xl p-7 hover:border-brand-200 hover:shadow-xl hover:shadow-brand-100/40 transition-all duration-300">
|
|
<div class="w-11 h-11 rounded-xl bg-amber-50 flex items-center justify-center mb-5 group-hover:bg-amber-100 transition-colors">
|
|
<svg class="w-6 h-6 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"/></svg>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-2">7 Proven Strategies</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Discounts, free shipping, urgency timers, social proof, value reminders, objection handlers, and a gamified spin‑to‑win wheel.</p>
|
|
</article>
|
|
|
|
<article class="reveal reveal-delay-1 group relative bg-white border border-gray-200 rounded-2xl p-7 hover:border-brand-200 hover:shadow-xl hover:shadow-brand-100/40 transition-all duration-300">
|
|
<div class="w-11 h-11 rounded-xl bg-purple-50 flex items-center justify-center mb-5 group-hover:bg-purple-100 transition-colors">
|
|
<svg class="w-6 h-6 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/></svg>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-2">A/B Testing Built-In</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Test strategies against each other. CartPulse automatically splits traffic, tracks conversions, and declares a winner so your rates improve on autopilot.</p>
|
|
</article>
|
|
|
|
<article class="reveal reveal-delay-2 group relative bg-white border border-gray-200 rounded-2xl p-7 hover:border-brand-200 hover:shadow-xl hover:shadow-brand-100/40 transition-all duration-300">
|
|
<div class="w-11 h-11 rounded-xl bg-green-50 flex items-center justify-center mb-5 group-hover:bg-green-100 transition-colors">
|
|
<svg class="w-6 h-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"/></svg>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-2">Revenue Analytics</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Interactive charts showing recovered revenue, conversion rates, strategy performance, and per-campaign ROI. Export reports for stakeholders.</p>
|
|
</article>
|
|
|
|
<article class="reveal reveal-delay-3 group relative bg-white border border-gray-200 rounded-2xl p-7 hover:border-brand-200 hover:shadow-xl hover:shadow-brand-100/40 transition-all duration-300">
|
|
<div class="w-11 h-11 rounded-xl bg-cyan-50 flex items-center justify-center mb-5 group-hover:bg-cyan-100 transition-colors">
|
|
<svg class="w-6 h-6 text-cyan-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-2">Live Visitor Dashboard</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Real-time view of active shoppers with intent scores, cart values, and browsing patterns. Watch interventions fire live as they happen.</p>
|
|
</article>
|
|
|
|
<article class="reveal reveal-delay-1 group relative bg-white border border-gray-200 rounded-2xl p-7 hover:border-brand-200 hover:shadow-xl hover:shadow-brand-100/40 transition-all duration-300">
|
|
<div class="w-11 h-11 rounded-xl bg-pink-50 flex items-center justify-center mb-5 group-hover:bg-pink-100 transition-colors">
|
|
<svg class="w-6 h-6 text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/></svg>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-2">Cart Recovery Emails</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Timed email sequences with personalized product reminders and optional discount incentives for shoppers who slip through real-time interventions.</p>
|
|
</article>
|
|
|
|
<article class="reveal reveal-delay-2 group relative bg-white border border-gray-200 rounded-2xl p-7 hover:border-brand-200 hover:shadow-xl hover:shadow-brand-100/40 transition-all duration-300">
|
|
<div class="w-11 h-11 rounded-xl bg-emerald-50 flex items-center justify-center mb-5 group-hover:bg-emerald-100 transition-colors">
|
|
<svg class="w-6 h-6 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-2">GDPR Compliant</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Cookie consent integration, WordPress privacy exporters & erasers, Do Not Track support. Zero external tracking scripts. All data in your database.</p>
|
|
</article>
|
|
|
|
<article class="reveal reveal-delay-3 group relative bg-white border border-gray-200 rounded-2xl p-7 hover:border-brand-200 hover:shadow-xl hover:shadow-brand-100/40 transition-all duration-300">
|
|
<div class="w-11 h-11 rounded-xl bg-yellow-50 flex items-center justify-center mb-5 group-hover:bg-yellow-100 transition-colors">
|
|
<svg class="w-6 h-6 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-2">15KB · Zero Impact</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Smaller than a product thumbnail. Async loading. Zero render-blocking. Your Core Web Vitals and PageSpeed scores remain completely unaffected.</p>
|
|
</article>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- ============================================================
|
|
COMPARISON TABLE
|
|
============================================================ -->
|
|
<section id="comparison" class="relative py-24 lg:py-32 bg-gray-50">
|
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center max-w-3xl mx-auto mb-16 reveal">
|
|
<p class="text-sm font-semibold text-brand-600 tracking-widest uppercase mb-3">Comparison</p>
|
|
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight">Why CartPulse AI Beats Monthly Subscription Tools</h2>
|
|
</div>
|
|
|
|
<div class="reveal bg-white rounded-3xl border border-gray-200 shadow-xl overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left">
|
|
<thead>
|
|
<tr class="bg-gray-50 border-b border-gray-200">
|
|
<th class="px-6 py-4 text-sm font-semibold text-gray-600 w-2/5"></th>
|
|
<th class="px-6 py-4 text-sm font-semibold text-gray-400 text-center w-[30%]">Others</th>
|
|
<th class="px-6 py-4 text-sm font-bold text-brand-600 text-center w-[30%] bg-brand-50">CartPulse AI</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100">
|
|
<tr class="comparison-row transition-colors"><td class="px-6 py-4 text-sm font-medium text-gray-800">Pricing</td><td class="px-6 py-4 text-sm text-gray-500 text-center">$19-99/month</td><td class="px-6 py-4 text-sm text-green-600 font-bold text-center bg-green-50/50">$49 one-time</td></tr>
|
|
<tr class="comparison-row transition-colors"><td class="px-6 py-4 text-sm font-medium text-gray-800">Approach</td><td class="px-6 py-4 text-sm text-gray-500 text-center">Email after abandonment</td><td class="px-6 py-4 text-sm text-green-600 font-semibold text-center bg-green-50/50">Real-time prevention</td></tr>
|
|
<tr class="comparison-row transition-colors"><td class="px-6 py-4 text-sm font-medium text-gray-800">AI Personalization</td><td class="px-6 py-4 text-sm text-center"><span class="text-red-400">Not available</span></td><td class="px-6 py-4 text-sm text-green-600 font-semibold text-center bg-green-50/50">OpenAI + Anthropic</td></tr>
|
|
<tr class="comparison-row transition-colors"><td class="px-6 py-4 text-sm font-medium text-gray-800">Strategies</td><td class="px-6 py-4 text-sm text-gray-500 text-center">1-2</td><td class="px-6 py-4 text-sm text-green-600 font-semibold text-center bg-green-50/50">7 built-in</td></tr>
|
|
<tr class="comparison-row transition-colors"><td class="px-6 py-4 text-sm font-medium text-gray-800">A/B Testing</td><td class="px-6 py-4 text-sm text-gray-500 text-center">Pro tier only</td><td class="px-6 py-4 text-sm text-green-600 font-semibold text-center bg-green-50/50">Included</td></tr>
|
|
<tr class="comparison-row transition-colors"><td class="px-6 py-4 text-sm font-medium text-gray-800">Performance Impact</td><td class="px-6 py-4 text-sm text-gray-500 text-center">50-200KB scripts</td><td class="px-6 py-4 text-sm text-green-600 font-semibold text-center bg-green-50/50">15KB, zero impact</td></tr>
|
|
<tr class="comparison-row transition-colors"><td class="px-6 py-4 text-sm font-medium text-gray-800">Data Ownership</td><td class="px-6 py-4 text-sm text-gray-500 text-center">Vendor servers</td><td class="px-6 py-4 text-sm text-green-600 font-semibold text-center bg-green-50/50">Your database</td></tr>
|
|
<tr class="comparison-row transition-colors"><td class="px-6 py-4 text-sm font-medium text-gray-800">GDPR Compliance</td><td class="px-6 py-4 text-sm text-gray-500 text-center">Partial</td><td class="px-6 py-4 text-sm text-green-600 font-semibold text-center bg-green-50/50">Full</td></tr>
|
|
<tr class="comparison-row transition-colors"><td class="px-6 py-4 text-sm font-medium text-gray-800">Setup Time</td><td class="px-6 py-4 text-sm text-gray-500 text-center">30-60 min</td><td class="px-6 py-4 text-sm text-green-600 font-semibold text-center bg-green-50/50">Under 5 minutes</td></tr>
|
|
<tr class="comparison-row transition-colors"><td class="px-6 py-4 text-sm font-medium text-gray-800">Spin-to-Win</td><td class="px-6 py-4 text-sm text-gray-500 text-center">Separate plugin</td><td class="px-6 py-4 text-sm text-green-600 font-semibold text-center bg-green-50/50">Built-in</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- ============================================================
|
|
ROI CALCULATOR
|
|
============================================================ -->
|
|
<section class="relative py-24 lg:py-32 bg-white">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16 reveal">
|
|
<p class="text-sm font-semibold text-brand-600 tracking-widest uppercase mb-3">ROI Calculator</p>
|
|
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight">See How Much Revenue CartPulse Can Recover</h2>
|
|
</div>
|
|
|
|
<div class="reveal bg-gradient-to-br from-brand-950 via-brand-900 to-purple-900 rounded-3xl p-8 lg:p-12 text-white overflow-hidden relative noise">
|
|
<div class="absolute top-0 right-0 w-64 h-64 bg-brand-500/10 rounded-full blur-[80px]"></div>
|
|
<div class="relative z-10">
|
|
<div class="grid md:grid-cols-2 gap-8 lg:gap-12">
|
|
<!-- Inputs -->
|
|
<div class="space-y-6">
|
|
<h3 class="text-xl font-bold mb-6">Your Store</h3>
|
|
<div>
|
|
<label for="roi-visitors" class="block text-sm font-medium text-gray-300 mb-2">Daily Visitors</label>
|
|
<input type="range" id="roi-visitors" min="100" max="10000" value="1000" step="100" class="w-full h-2 bg-white/20 rounded-full appearance-none cursor-pointer accent-brand-400">
|
|
<div class="text-right text-sm text-gray-400 mt-1"><span id="roi-visitors-val">1,000</span>/day</div>
|
|
</div>
|
|
<div>
|
|
<label for="roi-cart" class="block text-sm font-medium text-gray-300 mb-2">Average Cart Value</label>
|
|
<input type="range" id="roi-cart" min="10" max="500" value="75" step="5" class="w-full h-2 bg-white/20 rounded-full appearance-none cursor-pointer accent-brand-400">
|
|
<div class="text-right text-sm text-gray-400 mt-1">$<span id="roi-cart-val">75</span></div>
|
|
</div>
|
|
<div>
|
|
<label for="roi-rate" class="block text-sm font-medium text-gray-300 mb-2">Recovery Rate</label>
|
|
<input type="range" id="roi-rate" min="5" max="30" value="12" step="1" class="w-full h-2 bg-white/20 rounded-full appearance-none cursor-pointer accent-brand-400">
|
|
<div class="text-right text-sm text-gray-400 mt-1"><span id="roi-rate-val">12</span>%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Results -->
|
|
<div class="flex flex-col justify-center">
|
|
<div class="space-y-6">
|
|
<div>
|
|
<p class="text-sm text-gray-400 mb-1">Daily recovered revenue</p>
|
|
<p class="text-4xl lg:text-5xl font-black text-green-400">$<span id="roi-daily">189</span></p>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<p class="text-sm text-gray-400 mb-1">Monthly</p>
|
|
<p class="text-2xl font-bold">$<span id="roi-monthly">5,670</span></p>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-gray-400 mb-1">Yearly</p>
|
|
<p class="text-2xl font-bold">$<span id="roi-yearly">68,040</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="pt-4 border-t border-white/10">
|
|
<p class="text-sm text-gray-400">CartPulse pays for itself in</p>
|
|
<p class="text-xl font-bold text-brand-300"><span id="roi-payback">6</span> hours</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- ============================================================
|
|
SOCIAL PROOF / TRUST
|
|
============================================================ -->
|
|
<section class="relative py-24 lg:py-32 bg-gray-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center max-w-3xl mx-auto mb-16 reveal">
|
|
<p class="text-sm font-semibold text-brand-600 tracking-widest uppercase mb-3">Compatibility</p>
|
|
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight">Built for WooCommerce Stores That Take Revenue Seriously</h2>
|
|
</div>
|
|
|
|
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
|
|
<div class="reveal reveal-delay-1 flex items-start gap-3 bg-white rounded-2xl border border-gray-200 p-5">
|
|
<svg class="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
|
|
<p class="text-sm text-gray-700 font-medium">Works with <strong>any WooCommerce theme</strong> — Storefront, Flatsome, Astra, OceanWP, Woodmart, Kadence</p>
|
|
</div>
|
|
<div class="reveal reveal-delay-2 flex items-start gap-3 bg-white rounded-2xl border border-gray-200 p-5">
|
|
<svg class="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
|
|
<p class="text-sm text-gray-700 font-medium">WooCommerce <strong>HPOS compatible</strong> (High-Performance Order Storage)</p>
|
|
</div>
|
|
<div class="reveal reveal-delay-3 flex items-start gap-3 bg-white rounded-2xl border border-gray-200 p-5">
|
|
<svg class="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
|
|
<p class="text-sm text-gray-700 font-medium">Tested with <strong>WooCommerce 8.0 – 9.6+</strong> and WordPress 6.0+</p>
|
|
</div>
|
|
<div class="reveal reveal-delay-4 flex items-start gap-3 bg-white rounded-2xl border border-gray-200 p-5">
|
|
<svg class="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
|
|
<p class="text-sm text-gray-700 font-medium"><strong>30+ hooks & filters</strong>, REST API, and WP-CLI commands for developers</p>
|
|
</div>
|
|
<div class="reveal reveal-delay-1 flex items-start gap-3 bg-white rounded-2xl border border-gray-200 p-5">
|
|
<svg class="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
|
|
<p class="text-sm text-gray-700 font-medium"><strong>Quality checked</strong> by Envato</p>
|
|
</div>
|
|
<div class="reveal reveal-delay-2 flex items-start gap-3 bg-white rounded-2xl border border-gray-200 p-5">
|
|
<svg class="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
|
|
<p class="text-sm text-gray-700 font-medium"><strong>Translation-ready</strong> with .pot file and full RTL support</p>
|
|
</div>
|
|
<div class="reveal reveal-delay-3 flex items-start gap-3 bg-white rounded-2xl border border-gray-200 p-5">
|
|
<svg class="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
|
|
<p class="text-sm text-gray-700 font-medium"><strong>PHP 7.4+</strong> compatible, PSR-4 autoloaded codebase</p>
|
|
</div>
|
|
<div class="reveal reveal-delay-4 flex items-start gap-3 bg-white rounded-2xl border border-gray-200 p-5">
|
|
<svg class="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
|
|
<p class="text-sm text-gray-700 font-medium"><strong>6 months support</strong> included with every license</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- ============================================================
|
|
FAQ
|
|
============================================================ -->
|
|
<section id="faq" class="relative py-24 lg:py-32 bg-white">
|
|
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16 reveal">
|
|
<p class="text-sm font-semibold text-brand-600 tracking-widest uppercase mb-3">FAQ</p>
|
|
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight">Frequently Asked Questions</h2>
|
|
</div>
|
|
|
|
<div class="reveal space-y-3" id="faq-list">
|
|
<div class="faq-item border border-gray-200 rounded-2xl overflow-hidden">
|
|
<button class="faq-toggle w-full flex items-center justify-between px-6 py-5 text-left hover:bg-gray-50 transition-colors" aria-expanded="false">
|
|
<span class="text-base font-semibold text-gray-900 pr-4">Does CartPulse AI require an OpenAI or Anthropic API key?</span>
|
|
<svg class="faq-chevron w-5 h-5 text-gray-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
|
|
</button>
|
|
<div class="faq-answer px-6 text-sm text-gray-600 leading-relaxed">No. CartPulse AI works perfectly without any API key. Every intervention strategy includes professionally written templates out of the box. Adding an AI API key unlocks personalized, context-aware messages — but it is completely optional.</div>
|
|
</div>
|
|
<div class="faq-item border border-gray-200 rounded-2xl overflow-hidden">
|
|
<button class="faq-toggle w-full flex items-center justify-between px-6 py-5 text-left hover:bg-gray-50 transition-colors" aria-expanded="false">
|
|
<span class="text-base font-semibold text-gray-900 pr-4">Will it slow down my store or hurt my PageSpeed score?</span>
|
|
<svg class="faq-chevron w-5 h-5 text-gray-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
|
|
</button>
|
|
<div class="faq-answer px-6 text-sm text-gray-600 leading-relaxed">No. The entire storefront script is ~15KB gzipped (smaller than a product thumbnail), loads asynchronously, and has zero impact on LCP, FID, or CLS. Your Core Web Vitals stay unaffected.</div>
|
|
</div>
|
|
<div class="faq-item border border-gray-200 rounded-2xl overflow-hidden">
|
|
<button class="faq-toggle w-full flex items-center justify-between px-6 py-5 text-left hover:bg-gray-50 transition-colors" aria-expanded="false">
|
|
<span class="text-base font-semibold text-gray-900 pr-4">Is CartPulse AI GDPR compliant?</span>
|
|
<svg class="faq-chevron w-5 h-5 text-gray-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
|
|
</button>
|
|
<div class="faq-answer px-6 text-sm text-gray-600 leading-relaxed">Yes. It integrates with CookieYes, Complianz, CookieBot, and others. Includes WordPress privacy exporters & erasers. All data stays in your database — zero external tracking. Respects Do Not Track.</div>
|
|
</div>
|
|
<div class="faq-item border border-gray-200 rounded-2xl overflow-hidden">
|
|
<button class="faq-toggle w-full flex items-center justify-between px-6 py-5 text-left hover:bg-gray-50 transition-colors" aria-expanded="false">
|
|
<span class="text-base font-semibold text-gray-900 pr-4">How does the AI personalization work?</span>
|
|
<svg class="faq-chevron w-5 h-5 text-gray-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
|
|
</button>
|
|
<div class="faq-answer px-6 text-sm text-gray-600 leading-relaxed">When exit intent fires, CartPulse sends cart contents, product details, and store context to your AI provider (via your own encrypted API key). The AI generates a personalized message in under 2 seconds. Earlybirds never sees or stores your key.</div>
|
|
</div>
|
|
<div class="faq-item border border-gray-200 rounded-2xl overflow-hidden">
|
|
<button class="faq-toggle w-full flex items-center justify-between px-6 py-5 text-left hover:bg-gray-50 transition-colors" aria-expanded="false">
|
|
<span class="text-base font-semibold text-gray-900 pr-4">What if the AI API goes down?</span>
|
|
<svg class="faq-chevron w-5 h-5 text-gray-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
|
|
</button>
|
|
<div class="faq-answer px-6 text-sm text-gray-600 leading-relaxed">CartPulse has a robust fallback. If the AI provider is unreachable or slow, it instantly switches to pre-written template interventions. Your shoppers always see a professional popup. Zero downtime for your conversions.</div>
|
|
</div>
|
|
<div class="faq-item border border-gray-200 rounded-2xl overflow-hidden">
|
|
<button class="faq-toggle w-full flex items-center justify-between px-6 py-5 text-left hover:bg-gray-50 transition-colors" aria-expanded="false">
|
|
<span class="text-base font-semibold text-gray-900 pr-4">Does it work with my theme?</span>
|
|
<svg class="faq-chevron w-5 h-5 text-gray-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
|
|
</button>
|
|
<div class="faq-answer px-6 text-sm text-gray-600 leading-relaxed">CartPulse AI works with any WooCommerce-compatible theme including Storefront, Flatsome, Astra, OceanWP, Woodmart, and Kadence. Popups use isolated styles that never conflict with your theme.</div>
|
|
</div>
|
|
<div class="faq-item border border-gray-200 rounded-2xl overflow-hidden">
|
|
<button class="faq-toggle w-full flex items-center justify-between px-6 py-5 text-left hover:bg-gray-50 transition-colors" aria-expanded="false">
|
|
<span class="text-base font-semibold text-gray-900 pr-4">How does A/B testing work?</span>
|
|
<svg class="faq-chevron w-5 h-5 text-gray-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
|
|
</button>
|
|
<div class="faq-answer px-6 text-sm text-gray-600 leading-relaxed">Create multiple variants in one campaign (e.g., 10% discount vs. free shipping vs. spin wheel). CartPulse splits traffic automatically, tracks per-variant conversions, and identifies the winner. Set it and let it optimize itself.</div>
|
|
</div>
|
|
<div class="faq-item border border-gray-200 rounded-2xl overflow-hidden">
|
|
<button class="faq-toggle w-full flex items-center justify-between px-6 py-5 text-left hover:bg-gray-50 transition-colors" aria-expanded="false">
|
|
<span class="text-base font-semibold text-gray-900 pr-4">What is the refund policy?</span>
|
|
<svg class="faq-chevron w-5 h-5 text-gray-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
|
|
</button>
|
|
<div class="faq-answer px-6 text-sm text-gray-600 leading-relaxed">CartPulse AI is covered by the Envato Market refund policy. If it doesn't work as described, you're eligible for a refund within 30 days. We also provide dedicated support to resolve any issue before it comes to that.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- ============================================================
|
|
PRICING CTA
|
|
============================================================ -->
|
|
<section id="pricing" class="relative py-24 lg:py-32 bg-gradient-to-br from-brand-950 via-brand-900 to-purple-900 overflow-hidden noise">
|
|
<div class="absolute inset-0 hero-grid"></div>
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-brand-500/10 rounded-full blur-[120px]"></div>
|
|
|
|
<div class="relative z-10 max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<div class="reveal">
|
|
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-black text-white tracking-tight">Stop Losing Sales.<br>Start Converting.</h2>
|
|
<p class="mt-6 text-lg text-gray-300 leading-relaxed max-w-2xl mx-auto">Every minute you wait, more shoppers are abandoning their carts. CartPulse AI gives you the tools to intervene in real time — with AI personalization, 7 proven strategies, and built-in A/B testing.</p>
|
|
|
|
<!-- Price -->
|
|
<div class="mt-10 inline-flex flex-col items-center">
|
|
<div class="flex items-baseline gap-1">
|
|
<span class="text-6xl lg:text-7xl font-black text-white">$49</span>
|
|
<span class="text-xl text-gray-400 font-medium">one-time</span>
|
|
</div>
|
|
<p class="text-sm text-gray-400 mt-1">No monthly fees. No subscriptions. Ever.</p>
|
|
</div>
|
|
|
|
<!-- CTA -->
|
|
<div class="mt-10">
|
|
<a href="#" class="inline-flex items-center justify-center gap-2.5 px-10 py-5 bg-white text-brand-700 text-lg font-bold rounded-2xl hover:bg-gray-100 transition-colors shadow-2xl shadow-black/20">
|
|
Get CartPulse AI on CodeCanyon
|
|
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Trust -->
|
|
<div class="mt-8 flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm text-gray-400">
|
|
<span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Quality checked by Envato</span>
|
|
<span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>6 months support</span>
|
|
<span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>Future updates</span>
|
|
<span class="flex items-center gap-1.5"><svg class="w-4 h-4 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>30-day refund policy</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- ============================================================
|
|
FOOTER
|
|
============================================================ -->
|
|
<footer class="bg-gray-950 text-gray-400 py-12">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex flex-col lg:flex-row items-center justify-between gap-8">
|
|
<div class="flex flex-col sm:flex-row items-center gap-4 sm:gap-6 text-center sm:text-left">
|
|
<div class="flex items-center gap-2.5">
|
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-purple-600 flex items-center justify-center">
|
|
<svg class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
|
</div>
|
|
<span class="text-sm font-semibold text-gray-300">CartPulse AI</span>
|
|
<span class="text-xs text-gray-600">by Earlybirds</span>
|
|
</div>
|
|
<nav class="flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-xs font-medium">
|
|
<a href="https://acg.earlybirds.me/" class="hover:text-white transition-colors">Demo</a>
|
|
<a href="docs/cartpulse-ai.html" class="hover:text-white transition-colors">Documentation</a>
|
|
<a href="support.html" class="hover:text-white transition-colors">Support</a>
|
|
<a href="index.html#faq" class="hover:text-white transition-colors">FAQ</a>
|
|
<a href="index.html#pricing" class="hover:text-white transition-colors">Pricing</a>
|
|
</nav>
|
|
</div>
|
|
<p class="text-xs text-gray-500 text-center lg:text-right">© 2026 Earlybirds. All rights reserved. CartPulse AI is a product of Earlybirds.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
<!-- ============================================================
|
|
SCRIPTS
|
|
============================================================ -->
|
|
<script>
|
|
// --- Intersection Observer for reveal animations ---
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
|
|
|
|
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
|
|
|
|
// --- Nav scroll behavior ---
|
|
const nav = document.getElementById('nav');
|
|
let lastScroll = 0;
|
|
window.addEventListener('scroll', () => {
|
|
const scrollY = window.scrollY;
|
|
if (scrollY > 80) {
|
|
nav.classList.add('bg-white/95', 'backdrop-blur-lg', 'shadow-sm', 'border-b', 'border-gray-100');
|
|
nav.querySelectorAll('.nav-logo-text').forEach(el => el.classList.add('text-gray-900'));
|
|
nav.querySelectorAll('.nav-link-text').forEach(el => { el.classList.remove('text-white/80'); el.classList.add('text-gray-600'); });
|
|
} else {
|
|
nav.classList.remove('bg-white/95', 'backdrop-blur-lg', 'shadow-sm', 'border-b', 'border-gray-100');
|
|
nav.querySelectorAll('.nav-logo-text').forEach(el => el.classList.remove('text-gray-900'));
|
|
nav.querySelectorAll('.nav-link-text').forEach(el => { el.classList.add('text-white/80'); el.classList.remove('text-gray-600'); });
|
|
}
|
|
lastScroll = scrollY;
|
|
}, { passive: true });
|
|
|
|
// Set initial nav state
|
|
if (window.scrollY <= 80) {
|
|
nav.querySelectorAll('.nav-link-text').forEach(el => el.classList.add('text-white/80'));
|
|
}
|
|
|
|
// --- Mobile menu ---
|
|
document.getElementById('mobile-menu-btn').addEventListener('click', () => {
|
|
document.getElementById('mobile-menu').classList.toggle('hidden');
|
|
});
|
|
document.querySelectorAll('#mobile-menu a').forEach(a => {
|
|
a.addEventListener('click', () => document.getElementById('mobile-menu').classList.add('hidden'));
|
|
});
|
|
|
|
// --- FAQ Accordion ---
|
|
document.querySelectorAll('.faq-toggle').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const item = btn.closest('.faq-item');
|
|
const isOpen = item.classList.contains('open');
|
|
// Close all
|
|
document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
|
|
// Toggle current
|
|
if (!isOpen) item.classList.add('open');
|
|
});
|
|
});
|
|
|
|
// --- ROI Calculator ---
|
|
function updateROI() {
|
|
const visitors = parseInt(document.getElementById('roi-visitors').value);
|
|
const cart = parseInt(document.getElementById('roi-cart').value);
|
|
const rate = parseInt(document.getElementById('roi-rate').value);
|
|
|
|
const addToCartRate = 0.03;
|
|
const abandonRate = 0.70;
|
|
const dailyCarts = visitors * addToCartRate;
|
|
const abandoned = dailyCarts * abandonRate;
|
|
const recovered = abandoned * (rate / 100);
|
|
const dailyRev = recovered * cart;
|
|
const monthlyRev = dailyRev * 30;
|
|
const yearlyRev = dailyRev * 365;
|
|
const paybackHours = dailyRev > 0 ? Math.max(1, Math.round(49 / (dailyRev / 24))) : 999;
|
|
|
|
document.getElementById('roi-visitors-val').textContent = visitors.toLocaleString();
|
|
document.getElementById('roi-cart-val').textContent = cart;
|
|
document.getElementById('roi-rate-val').textContent = rate;
|
|
document.getElementById('roi-daily').textContent = Math.round(dailyRev).toLocaleString();
|
|
document.getElementById('roi-monthly').textContent = Math.round(monthlyRev).toLocaleString();
|
|
document.getElementById('roi-yearly').textContent = Math.round(yearlyRev).toLocaleString();
|
|
document.getElementById('roi-payback').textContent = paybackHours;
|
|
}
|
|
|
|
document.getElementById('roi-visitors').addEventListener('input', updateROI);
|
|
document.getElementById('roi-cart').addEventListener('input', updateROI);
|
|
document.getElementById('roi-rate').addEventListener('input', updateROI);
|
|
updateROI();
|
|
|
|
// --- Screenshot gallery + lightbox ---
|
|
function escapeHtml(s) {
|
|
return String(s)
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"');
|
|
}
|
|
|
|
const GALLERY_ITEMS = [
|
|
{ src: 'assets/screenshots/dashboard.png', title: 'Dashboard', cats: ['overview'] },
|
|
{ src: 'assets/screenshots/new-dashboard.png', title: 'New dashboard', cats: ['overview'] },
|
|
{ src: 'assets/screenshots/tools.png', title: 'Tools', cats: ['overview'] },
|
|
{ src: 'assets/screenshots/analytics.png', title: 'Analytics', cats: ['overview'] },
|
|
{ src: 'assets/screenshots/live-visitors.png', title: 'Live visitors', cats: ['overview'] },
|
|
{ src: 'assets/screenshots/campaigns.png', title: 'Campaigns', cats: ['campaigns'] },
|
|
{ src: 'assets/screenshots/campaign-preset-library.png', title: 'Campaign preset library', cats: ['campaigns'] },
|
|
{ src: 'assets/screenshots/spin-to-win-campaign.png', title: 'Spin to Win campaign', cats: ['campaigns'] },
|
|
{ src: 'assets/screenshots/spin-wheel-intervention.png', title: 'Spin wheel intervention', cats: ['campaigns'] },
|
|
{ src: 'assets/screenshots/trigger-cart-value.png', title: 'Trigger: cart value', cats: ['triggers'] },
|
|
{ src: 'assets/screenshots/trigger-checkout-abandon.png', title: 'Trigger: checkout abandon', cats: ['triggers'] },
|
|
{ src: 'assets/screenshots/trigger-exit-intent.png', title: 'Trigger: exit intent', cats: ['triggers'] },
|
|
{ src: 'assets/screenshots/trigger-idle-timeout.png', title: 'Trigger: idle timeout', cats: ['triggers'] },
|
|
{ src: 'assets/screenshots/trigger-scroll-depth.png', title: 'Trigger: scroll depth', cats: ['triggers'] },
|
|
{ src: 'assets/screenshots/trigger-tab-switch.png', title: 'Trigger: tab switch', cats: ['triggers'] },
|
|
{ src: 'assets/screenshots/settings-behavior.png', title: 'Settings: behavior', cats: ['settings'] },
|
|
{ src: 'assets/screenshots/settings-connection.png', title: 'Settings: connection', cats: ['settings'] },
|
|
{ src: 'assets/screenshots/settings-integrations.png', title: 'Settings: integrations', cats: ['settings'] },
|
|
{ src: 'assets/screenshots/settings-intent-signals.png', title: 'Settings: intent signals', cats: ['settings'] },
|
|
{ src: 'assets/screenshots/settings-maintenance.png', title: 'Settings: maintenance', cats: ['settings'] },
|
|
{ src: 'assets/screenshots/settings-privacy.png', title: 'Settings: privacy', cats: ['settings'] },
|
|
{ src: 'assets/screenshots/setup-wizard-page-01.png', title: 'Setup wizard (step 1 of 5)', cats: ['wizard'] },
|
|
{ src: 'assets/screenshots/setup-wizard-page-02.png', title: 'Setup wizard (step 2 of 5)', cats: ['wizard'] },
|
|
{ src: 'assets/screenshots/setup-wizard-page-03.png', title: 'Setup wizard (step 3 of 5)', cats: ['wizard'] },
|
|
{ src: 'assets/screenshots/setup-wizard-page-04.png', title: 'Setup wizard (step 4 of 5)', cats: ['wizard'] },
|
|
{ src: 'assets/screenshots/setup-wizard-page-05.png', title: 'Setup wizard (step 5 of 5)', cats: ['wizard'] },
|
|
{ src: 'assets/screenshots/intervention-cart-value.png', title: 'Intervention: cart value', cats: ['interventions'] },
|
|
{ src: 'assets/screenshots/intervention-checkout-abandon.png', title: 'Intervention: checkout abandon', cats: ['interventions'] },
|
|
{ src: 'assets/screenshots/intervention-exit-intent.png', title: 'Intervention: exit intent', cats: ['interventions'] },
|
|
{ src: 'assets/screenshots/intervention-idle-timeout.png', title: 'Intervention: idle timeout', cats: ['interventions'] },
|
|
{ src: 'assets/screenshots/intervention-scroll-depth.png', title: 'Intervention: scroll depth', cats: ['interventions'] },
|
|
{ src: 'assets/screenshots/intervention-tab-switch.png', title: 'Intervention: tab switch', cats: ['interventions'] },
|
|
{ src: 'assets/screenshots/frontend-intervention.png', title: 'Storefront intervention', cats: ['interventions'] },
|
|
{ src: 'assets/screenshots/frontend-preview-debug-mode.png', title: 'Frontend preview (debug)', cats: ['interventions'] },
|
|
{ src: 'assets/screenshots/cart-recovery-email.png', title: 'Cart recovery email', cats: ['interventions'] },
|
|
{ src: 'assets/screenshots/weekly-performance-email.png', title: 'Weekly performance email', cats: ['interventions'] },
|
|
];
|
|
|
|
const galleryGrid = document.getElementById('gallery-grid');
|
|
const lightbox = document.getElementById('lightbox');
|
|
const lightboxImg = document.getElementById('lightbox-img');
|
|
const lightboxCaption = document.getElementById('lightbox-caption');
|
|
const lightboxClose = document.getElementById('lightbox-close');
|
|
let lightboxLastFocus = null;
|
|
|
|
function filterItems(cat) {
|
|
if (cat === 'all') return GALLERY_ITEMS;
|
|
return GALLERY_ITEMS.filter((item) => item.cats.includes(cat));
|
|
}
|
|
|
|
function renderGallery(cat) {
|
|
const items = filterItems(cat);
|
|
galleryGrid.innerHTML = items.map((item) => {
|
|
const safe = escapeHtml(item.title);
|
|
const safeSrc = escapeHtml(item.src);
|
|
return `
|
|
<button type="button" class="gallery-card group text-left rounded-2xl border border-gray-200 bg-white overflow-hidden shadow-sm hover:shadow-xl hover:border-brand-200 hover:-translate-y-0.5 transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2">
|
|
<span class="block aspect-[16/10] bg-gray-100 overflow-hidden">
|
|
<img src="${safeSrc}" alt="${safe}" loading="lazy" decoding="async" class="w-full h-full object-cover object-top group-hover:scale-[1.02] transition-transform duration-300" data-full="${safeSrc}" data-caption="${safe}">
|
|
</span>
|
|
<span class="block px-4 py-3 text-sm font-semibold text-gray-800 border-t border-gray-100">${safe}</span>
|
|
</button>`;
|
|
}).join('');
|
|
|
|
galleryGrid.querySelectorAll('button.gallery-card').forEach((btn) => {
|
|
btn.addEventListener('click', () => {
|
|
const img = btn.querySelector('img');
|
|
openLightbox(img.dataset.full, img.dataset.caption);
|
|
});
|
|
});
|
|
}
|
|
|
|
function openLightbox(src, caption) {
|
|
lightboxLastFocus = document.activeElement;
|
|
lightboxImg.src = src;
|
|
lightboxImg.alt = caption;
|
|
lightboxCaption.textContent = caption;
|
|
lightbox.classList.remove('hidden');
|
|
lightbox.classList.add('flex');
|
|
document.body.style.overflow = 'hidden';
|
|
lightboxClose.focus();
|
|
}
|
|
|
|
function closeLightbox() {
|
|
lightbox.classList.add('hidden');
|
|
lightbox.classList.remove('flex');
|
|
lightboxImg.src = '';
|
|
document.body.style.overflow = '';
|
|
if (lightboxLastFocus && typeof lightboxLastFocus.focus === 'function') lightboxLastFocus.focus();
|
|
}
|
|
|
|
document.querySelectorAll('#gallery-filters .gallery-chip').forEach((chip) => {
|
|
chip.addEventListener('click', () => {
|
|
const f = chip.getAttribute('data-filter');
|
|
document.querySelectorAll('#gallery-filters .gallery-chip').forEach((c) => {
|
|
c.classList.remove('is-active');
|
|
c.setAttribute('aria-selected', 'false');
|
|
});
|
|
chip.classList.add('is-active');
|
|
chip.setAttribute('aria-selected', 'true');
|
|
renderGallery(f);
|
|
});
|
|
});
|
|
|
|
lightboxClose.addEventListener('click', closeLightbox);
|
|
lightbox.addEventListener('click', (e) => {
|
|
if (e.target === lightbox) closeLightbox();
|
|
});
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && !lightbox.classList.contains('hidden')) closeLightbox();
|
|
});
|
|
|
|
renderGallery('all');
|
|
</script>
|
|
|
|
</body>
|
|
</html> |