a33896e2d4
CRITICAL FIX: - Replaced broken GSAP-only reveal system with IntersectionObserver (CSS-based) - All sections now visible and animated reliably - GSAP used as enhancement only, not required for visibility NEW FEATURES: - Scroll progress bar at top of page - Particle background (canvas-based floating blue dots) - Animated gradient mesh background - 3D parallax phone mockup with mouse tracking - Floating badges around hero (98% Open Rate, Blue Bubbles, No Monthly Fee) - Floating iMessage bubbles around phone - Before/After draggable comparison slider (SMS vs iMessage) - Bento grid layout for features (varied card sizes) - Animated stat counters with IntersectionObserver - 4-step workflow with animated connecting line + flowing particle - Testimonial carousel with auto-rotation (4 testimonials) - Interactive pricing toggle (monthly/annual with savings badge) - Video embed placeholder with play button overlay - Wave SVG + diagonal section dividers throughout - Button ripple micro-interactions - Sticky nav that shrinks + adds blur on scroll - Dark/light mode toggle - Fully responsive mobile-first design FORMS: Both hero + CTA forms have Name, Email, Phone + 'Get Free Access →'
1558 lines
100 KiB
HTML
1558 lines
100 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="dark scroll-smooth">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BlueShift — iMessage for GoHighLevel</title>
|
|
<meta name="description" content="Send iMessage directly from GoHighLevel. 98% open rates. No subscriptions. Pay per message. The ultimate CRM messaging upgrade.">
|
|
<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@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
blue: { DEFAULT:'#007AFF',50:'#E5F2FF',100:'#CCE4FF',200:'#99CAFF',300:'#66AFFF',400:'#3395FF',500:'#007AFF',600:'#0062CC',700:'#004999',800:'#003166',900:'#001833' },
|
|
dark: { DEFAULT:'#050510',50:'#0a0a1a',100:'#0f0f24',200:'#14142e',300:'#1a1a3e' },
|
|
imsg: { blue:'#007AFF',cyan:'#34AADC',teal:'#1A8CFF',gray:'#E9E9EB',darkgray:'#3A3A3C' }
|
|
},
|
|
fontFamily: { sans: ['Inter','system-ui','-apple-system','sans-serif'] },
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<style>
|
|
/* ===== BASE ===== */
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
html{font-family:'Inter',sans-serif;scroll-behavior:smooth}
|
|
body{overflow-x:hidden}
|
|
|
|
/* ===== SCROLL PROGRESS BAR ===== */
|
|
#scrollProgress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,#007AFF,#34AADC,#1A8CFF);z-index:99999;width:0%;transition:width .05s linear}
|
|
|
|
/* ===== NOISE OVERLAY ===== */
|
|
.noise-overlay{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.03;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");background-repeat:repeat}
|
|
|
|
/* ===== GLASSMORPHISM ===== */
|
|
.glass{background:rgba(255,255,255,.05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08)}
|
|
html:not(.dark) .glass{background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.06)}
|
|
.glass-card{background:rgba(255,255,255,.03);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.06);transition:all .4s cubic-bezier(.4,0,.2,1)}
|
|
.glass-card:hover{background:rgba(255,255,255,.07);border-color:rgba(0,122,255,.3);transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,122,255,.1)}
|
|
html:not(.dark) .glass-card{background:rgba(255,255,255,.8);border:1px solid rgba(0,0,0,.08)}
|
|
html:not(.dark) .glass-card:hover{background:rgba(255,255,255,.95);box-shadow:0 20px 60px rgba(0,122,255,.12)}
|
|
|
|
/* ===== GRADIENT TEXT ===== */
|
|
.gradient-text{background:linear-gradient(135deg,#007AFF 0%,#34AADC 50%,#1A8CFF 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
|
|
.gradient-text-white{background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,.7) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
|
|
html:not(.dark) .gradient-text-white{background:linear-gradient(135deg,#050510 0%,#1a1a3e 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
|
|
|
|
/* ===== GLOW BUTTON ===== */
|
|
.glow-btn{position:relative;background:linear-gradient(135deg,#007AFF,#34AADC);transition:all .3s ease;overflow:hidden}
|
|
.glow-btn::before{content:'';position:absolute;inset:-2px;background:linear-gradient(135deg,#007AFF,#34AADC,#1A8CFF);border-radius:inherit;z-index:-1;filter:blur(15px);opacity:0;transition:opacity .3s ease}
|
|
.glow-btn:hover::before{opacity:1}
|
|
.glow-btn:hover{transform:translateY(-2px);box-shadow:0 10px 40px rgba(0,122,255,.4)}
|
|
.glow-btn:active{transform:translateY(0)}
|
|
/* ripple */
|
|
.glow-btn .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.3);transform:scale(0);animation:rippleAnim .6s ease-out}
|
|
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}
|
|
|
|
/* ===== FLOATING ORBS ===== */
|
|
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4;animation:float 20s ease-in-out infinite;pointer-events:none}
|
|
html:not(.dark) .orb{opacity:.15}
|
|
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(50px,-30px) scale(1.1)}50%{transform:translate(-20px,40px) scale(.95)}75%{transform:translate(30px,20px) scale(1.05)}}
|
|
|
|
/* ===== PARTICLES ===== */
|
|
#particles-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}
|
|
|
|
/* ===== ANIMATED GRADIENT MESH ===== */
|
|
.gradient-mesh{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.4}
|
|
.gradient-mesh::before{content:'';position:absolute;width:150%;height:150%;top:-25%;left:-25%;background:conic-gradient(from 0deg at 50% 50%,rgba(0,122,255,.08),rgba(52,170,220,.05),rgba(26,140,255,.08),rgba(0,122,255,.03),rgba(52,170,220,.08));animation:meshRotate 30s linear infinite}
|
|
html:not(.dark) .gradient-mesh{opacity:.2}
|
|
@keyframes meshRotate{to{transform:rotate(360deg)}}
|
|
|
|
/* ===== MARQUEE ===== */
|
|
.marquee-track{display:flex;animation:marquee 30s linear infinite;width:max-content}
|
|
.marquee-track:hover{animation-play-state:paused}
|
|
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
|
|
|
|
/* ===== iMESSAGE BUBBLES ===== */
|
|
.imsg-bubble-sent{background:linear-gradient(135deg,#007AFF,#34AADC);color:#fff;border-radius:20px 20px 4px 20px;padding:10px 16px;max-width:260px;font-size:14px;line-height:1.4}
|
|
.imsg-bubble-recv{background:#E9E9EB;color:#1a1a1a;border-radius:20px 20px 20px 4px;padding:10px 16px;max-width:260px;font-size:14px;line-height:1.4}
|
|
.dark .imsg-bubble-recv{background:#3A3A3C;color:#e5e5e5}
|
|
|
|
/* ===== TYPING INDICATOR ===== */
|
|
.typing-dot{width:8px;height:8px;background:#8e8e93;border-radius:50%;display:inline-block;animation:typingBounce 1.4s ease-in-out infinite}
|
|
.typing-dot:nth-child(2){animation-delay:.2s}
|
|
.typing-dot:nth-child(3){animation-delay:.4s}
|
|
@keyframes typingBounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}
|
|
|
|
/* ===== FAQ ===== */
|
|
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),padding .3s ease}
|
|
.faq-answer.open{max-height:400px}
|
|
.faq-chevron{transition:transform .3s ease}
|
|
.faq-chevron.open{transform:rotate(180deg)}
|
|
|
|
/* ===== REVEAL SYSTEM — CSS-based with IntersectionObserver ===== */
|
|
/* Elements start visible by default. JS adds .will-reveal, then .revealed when in view. */
|
|
/* This ensures nothing is ever permanently hidden if JS fails. */
|
|
.will-reveal{opacity:0;transform:translateY(40px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)}
|
|
.will-reveal.revealed{opacity:1!important;transform:translateY(0)!important}
|
|
.will-reveal.reveal-left{transform:translateX(-40px)}
|
|
.will-reveal.reveal-left.revealed{transform:translateX(0)!important}
|
|
.will-reveal.reveal-right{transform:translateX(40px)}
|
|
.will-reveal.reveal-right.revealed{transform:translateX(0)!important}
|
|
.will-reveal.reveal-scale{transform:scale(.9);opacity:0}
|
|
.will-reveal.reveal-scale.revealed{transform:scale(1)!important}
|
|
|
|
/* stagger delays */
|
|
.reveal-d1{transition-delay:.1s}.reveal-d2{transition-delay:.2s}.reveal-d3{transition-delay:.3s}.reveal-d4{transition-delay:.4s}.reveal-d5{transition-delay:.5s}.reveal-d6{transition-delay:.6s}.reveal-d7{transition-delay:.7s}.reveal-d8{transition-delay:.8s}
|
|
|
|
/* ===== GRADIENT BORDER ===== */
|
|
.gradient-border{position:relative;border-radius:16px;overflow:hidden}
|
|
.gradient-border::before{content:'';position:absolute;inset:0;padding:1px;border-radius:inherit;background:linear-gradient(135deg,rgba(0,122,255,.5),rgba(52,170,220,.2),rgba(0,122,255,.5));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
|
|
|
|
/* ===== PHONE MOCKUP ===== */
|
|
.phone-mockup{background:linear-gradient(145deg,#1c1c1e,#2c2c2e);border-radius:40px;padding:12px;box-shadow:0 25px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1)}
|
|
html:not(.dark) .phone-mockup{background:linear-gradient(145deg,#e5e5ea,#f2f2f7);box-shadow:0 25px 80px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.8)}
|
|
.phone-screen{background:#000;border-radius:30px;overflow:hidden;position:relative}
|
|
html:not(.dark) .phone-screen{background:#fff}
|
|
.phone-notch{width:120px;height:28px;background:#000;border-radius:0 0 18px 18px;margin:0 auto;position:relative;z-index:10}
|
|
html:not(.dark) .phone-notch{background:#f2f2f7}
|
|
|
|
/* ===== FLOATING BADGES ===== */
|
|
.floating-badge{animation:badgeFloat 6s ease-in-out infinite;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
|
|
.floating-badge:nth-child(2){animation-delay:-2s}
|
|
.floating-badge:nth-child(3){animation-delay:-4s}
|
|
@keyframes badgeFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(2deg)}}
|
|
|
|
/* ===== BEFORE/AFTER SLIDER ===== */
|
|
.comparison-slider{position:relative;overflow:hidden;border-radius:16px;cursor:ew-resize;user-select:none}
|
|
.comparison-slider .slider-line{position:absolute;top:0;bottom:0;width:3px;background:#007AFF;z-index:10;box-shadow:0 0 20px rgba(0,122,255,.5)}
|
|
.comparison-slider .slider-handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#007AFF,#34AADC);border:3px solid #fff;z-index:11;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.3);cursor:ew-resize}
|
|
.comparison-slider .side-right{position:absolute;top:0;right:0;bottom:0;overflow:hidden}
|
|
|
|
/* ===== TESTIMONIAL CAROUSEL ===== */
|
|
.testimonial-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
|
|
|
|
/* ===== WORKFLOW CONNECTOR ===== */
|
|
.workflow-connector{position:relative}
|
|
.workflow-connector::after{content:'';position:absolute;top:50%;right:-100%;width:100%;height:2px;background:linear-gradient(90deg,#007AFF,rgba(0,122,255,.1));z-index:0}
|
|
@media(max-width:1024px){.workflow-connector::after{display:none}}
|
|
|
|
/* ===== HAMBURGER ===== */
|
|
.hamburger span{display:block;width:24px;height:2px;background:currentColor;transition:all .3s ease;border-radius:2px}
|
|
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
|
|
.hamburger.active span:nth-child(2){opacity:0}
|
|
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
|
|
.mobile-menu{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.4,0,.2,1)}
|
|
.mobile-menu.open{max-height:400px}
|
|
|
|
/* ===== WAVE DIVIDERS ===== */
|
|
.wave-divider{position:relative;overflow:hidden}
|
|
.wave-divider svg{display:block;width:100%;height:auto}
|
|
.wave-top svg{transform:rotate(180deg)}
|
|
|
|
/* ===== BENTO GRID ===== */
|
|
.bento-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto;gap:1rem}
|
|
.bento-lg{grid-column:span 2;grid-row:span 1}
|
|
.bento-tall{grid-row:span 2}
|
|
@media(max-width:1024px){.bento-grid{grid-template-columns:repeat(2,1fr)}.bento-lg{grid-column:span 2}.bento-tall{grid-row:span 1}}
|
|
@media(max-width:640px){.bento-grid{grid-template-columns:1fr}.bento-lg,.bento-tall{grid-column:span 1;grid-row:span 1}}
|
|
|
|
/* ===== VIDEO PLACEHOLDER ===== */
|
|
.video-placeholder{position:relative;cursor:pointer}
|
|
.video-placeholder::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.4);border-radius:inherit;transition:background .3s ease}
|
|
.video-placeholder:hover::after{background:rgba(0,0,0,.2)}
|
|
.play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;width:72px;height:72px;border-radius:50%;background:rgba(0,122,255,.9);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 40px rgba(0,122,255,.4);transition:transform .3s ease,box-shadow .3s ease}
|
|
.video-placeholder:hover .play-btn{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 12px 50px rgba(0,122,255,.6)}
|
|
|
|
/* ===== PULSE RING ===== */
|
|
.pulse-ring{animation:pulseRing 2s ease-in-out infinite}
|
|
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(0,122,255,.4)}70%{box-shadow:0 0 0 15px rgba(0,122,255,0)}100%{box-shadow:0 0 0 0 rgba(0,122,255,0)}}
|
|
|
|
/* ===== SCROLL INDICATOR ===== */
|
|
.scroll-indicator{animation:scrollBounce 2s ease-in-out infinite}
|
|
@keyframes scrollBounce{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(8px);opacity:.5}}
|
|
|
|
/* ===== FORM SUCCESS ===== */
|
|
.form-success{animation:successPop .5s cubic-bezier(.4,0,.2,1)}
|
|
@keyframes successPop{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
|
|
|
|
/* ===== PRICING TOGGLE ===== */
|
|
.pricing-toggle{position:relative;width:56px;height:28px;border-radius:14px;background:rgba(255,255,255,.1);cursor:pointer;transition:background .3s ease;border:1px solid rgba(255,255,255,.1)}
|
|
.pricing-toggle.active{background:linear-gradient(135deg,#007AFF,#34AADC)}
|
|
.pricing-toggle .toggle-knob{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px rgba(0,0,0,.2)}
|
|
.pricing-toggle.active .toggle-knob{transform:translateX(28px)}
|
|
html:not(.dark) .pricing-toggle{background:rgba(0,0,0,.1);border-color:rgba(0,0,0,.1)}
|
|
|
|
/* ===== STAT COUNTER ===== */
|
|
.stat-number{font-variant-numeric:tabular-nums}
|
|
|
|
/* ===== EMAIL INPUT ===== */
|
|
.email-input:focus{box-shadow:0 0 0 3px rgba(0,122,255,.3);border-color:#007AFF}
|
|
|
|
/* ===== WINNER COL ===== */
|
|
.winner-col{box-shadow:0 0 60px rgba(0,122,255,.15)}
|
|
html:not(.dark) .winner-col{box-shadow:0 0 40px rgba(0,122,255,.1)}
|
|
|
|
/* ===== SMOOTH TRANSITIONS ===== */
|
|
html{transition:background-color .4s ease,color .4s ease}
|
|
|
|
/* ===== CUSTOM CURSOR ===== */
|
|
.custom-cursor{width:20px;height:20px;border:2px solid #007AFF;border-radius:50%;position:fixed;top:0;left:0;pointer-events:none;z-index:99999;transition:transform .15s ease,background .15s ease;mix-blend-mode:difference}
|
|
.custom-cursor.hover{transform:scale(2.5);background:rgba(0,122,255,.15);border-color:#34AADC}
|
|
@media(max-width:768px){.custom-cursor{display:none}}
|
|
|
|
/* ===== SECTION DIVIDERS ===== */
|
|
.section-divider{position:relative;height:120px;margin-top:-60px;margin-bottom:-60px;z-index:2;pointer-events:none}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="dark:bg-dark bg-white dark:text-white text-gray-900 font-sans antialiased">
|
|
|
|
<!-- Fixed Backgrounds -->
|
|
<div class="noise-overlay"></div>
|
|
<div class="gradient-mesh"></div>
|
|
<canvas id="particles-canvas"></canvas>
|
|
|
|
<!-- Scroll Progress Bar -->
|
|
<div id="scrollProgress"></div>
|
|
|
|
<!-- Custom Cursor -->
|
|
<div class="custom-cursor" id="cursor"></div>
|
|
|
|
<!-- ===== STICKY NAVBAR ===== -->
|
|
<nav id="navbar" class="fixed top-[3px] left-0 right-0 z-[9999] transition-all duration-500">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center justify-between h-16 sm:h-20 transition-all duration-300" id="navInner">
|
|
<a href="#" class="flex items-center gap-2 group">
|
|
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-500 to-imsg-cyan flex items-center justify-center shadow-lg shadow-blue-500/20 group-hover:shadow-blue-500/40 transition-shadow">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>
|
|
</div>
|
|
<span class="text-xl font-bold gradient-text">BlueShift</span>
|
|
</a>
|
|
<div class="hidden md:flex items-center gap-8">
|
|
<a href="#features" class="text-sm dark:text-white/60 text-gray-500 hover:text-blue-500 dark:hover:text-blue-400 transition-colors">Features</a>
|
|
<a href="#how-it-works" class="text-sm dark:text-white/60 text-gray-500 hover:text-blue-500 dark:hover:text-blue-400 transition-colors">How It Works</a>
|
|
<a href="#pricing" class="text-sm dark:text-white/60 text-gray-500 hover:text-blue-500 dark:hover:text-blue-400 transition-colors">Pricing</a>
|
|
<a href="#faq" class="text-sm dark:text-white/60 text-gray-500 hover:text-blue-500 dark:hover:text-blue-400 transition-colors">FAQ</a>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<button id="themeToggle" class="w-10 h-10 rounded-xl glass flex items-center justify-center cursor-pointer hover:scale-110 transition-transform" aria-label="Toggle theme">
|
|
<i data-lucide="moon" class="w-5 h-5 dark:hidden"></i>
|
|
<i data-lucide="sun" class="w-5 h-5 hidden dark:block text-yellow-400"></i>
|
|
</button>
|
|
<a href="#cta" class="hidden sm:inline-flex glow-btn text-white text-sm font-semibold px-5 py-2.5 rounded-xl">Get Free Access</a>
|
|
<button id="hamburger" class="md:hidden hamburger flex flex-col gap-1.5 p-2 cursor-pointer" aria-label="Menu">
|
|
<span class="dark:bg-white bg-gray-900"></span>
|
|
<span class="dark:bg-white bg-gray-900"></span>
|
|
<span class="dark:bg-white bg-gray-900"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="mobileMenu" class="mobile-menu md:hidden">
|
|
<div class="pb-6 pt-2 flex flex-col gap-4 border-t dark:border-white/10 border-gray-200">
|
|
<a href="#features" class="text-sm dark:text-white/70 text-gray-600 hover:text-blue-500 transition-colors py-2">Features</a>
|
|
<a href="#how-it-works" class="text-sm dark:text-white/70 text-gray-600 hover:text-blue-500 transition-colors py-2">How It Works</a>
|
|
<a href="#pricing" class="text-sm dark:text-white/70 text-gray-600 hover:text-blue-500 transition-colors py-2">Pricing</a>
|
|
<a href="#faq" class="text-sm dark:text-white/70 text-gray-600 hover:text-blue-500 transition-colors py-2">FAQ</a>
|
|
<a href="#cta" class="glow-btn text-white text-sm font-semibold px-5 py-2.5 rounded-xl text-center">Get Free Access</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
<!-- ========================================== -->
|
|
<!-- ===== SECTION 1: HERO ===== -->
|
|
<!-- ========================================== -->
|
|
<section id="hero" class="relative min-h-screen flex items-center pt-20 overflow-hidden" style="z-index:5">
|
|
<!-- Background Orbs -->
|
|
<div class="orb w-[500px] h-[500px] bg-blue-500/30 -top-40 -left-40" style="animation-delay:0s"></div>
|
|
<div class="orb w-[400px] h-[400px] bg-imsg-cyan/20 top-1/3 -right-32" style="animation-delay:-7s"></div>
|
|
<div class="orb w-[300px] h-[300px] bg-blue-600/20 bottom-20 left-1/4" style="animation-delay:-14s"></div>
|
|
|
|
<!-- Grid Pattern -->
|
|
<div class="absolute inset-0 opacity-[0.03]" style="background-image:radial-gradient(circle,currentColor 1px,transparent 1px);background-size:40px 40px"></div>
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-20 relative z-10">
|
|
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
|
<!-- Left: Copy -->
|
|
<div class="text-center lg:text-left">
|
|
<div class="reveal inline-flex items-center gap-2 px-4 py-1.5 rounded-full glass text-xs font-medium dark:text-blue-300 text-blue-600 mb-6">
|
|
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
|
|
Now available for GoHighLevel
|
|
</div>
|
|
|
|
<h1 class="reveal reveal-d1 text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-black leading-[1.05] tracking-tight mb-6">
|
|
<span class="gradient-text-white">Send iMessage</span><br>
|
|
<span class="gradient-text">from your CRM.</span>
|
|
</h1>
|
|
|
|
<p class="reveal reveal-d2 text-base sm:text-lg lg:text-xl dark:text-white/50 text-gray-500 max-w-lg mx-auto lg:mx-0 mb-8 leading-relaxed">
|
|
Ditch gray bubbles forever. BlueShift connects iMessage to GoHighLevel with
|
|
<span class="dark:text-white text-gray-900 font-semibold">98% open rates</span>,
|
|
read receipts, and zero monthly subscriptions.
|
|
</p>
|
|
|
|
<!-- Opt-in Form -->
|
|
<form class="reveal reveal-d3 flex flex-col gap-3 max-w-md mx-auto lg:mx-0 mb-6" onsubmit="handleSubmit(event, this)">
|
|
<input type="text" required placeholder="Your name" class="email-input w-full px-5 py-3.5 rounded-xl dark:bg-white/5 bg-gray-50 border dark:border-white/10 border-gray-200 dark:text-white text-gray-900 text-sm focus:outline-none transition-all placeholder:text-gray-400">
|
|
<div class="flex flex-col sm:flex-row gap-3">
|
|
<input type="email" required placeholder="Email address" class="email-input flex-1 px-5 py-3.5 rounded-xl dark:bg-white/5 bg-gray-50 border dark:border-white/10 border-gray-200 dark:text-white text-gray-900 text-sm focus:outline-none transition-all placeholder:text-gray-400">
|
|
<input type="tel" required placeholder="Phone number" class="email-input sm:w-40 px-5 py-3.5 rounded-xl dark:bg-white/5 bg-gray-50 border dark:border-white/10 border-gray-200 dark:text-white text-gray-900 text-sm focus:outline-none transition-all placeholder:text-gray-400">
|
|
</div>
|
|
<button type="submit" class="glow-btn text-white font-semibold px-6 py-3.5 rounded-xl text-sm whitespace-nowrap w-full sm:w-auto">
|
|
Get Free Access →
|
|
</button>
|
|
</form>
|
|
<p class="reveal reveal-d4 text-xs dark:text-white/30 text-gray-400">Free to start · No credit card required · Self-hosted option available</p>
|
|
</div>
|
|
|
|
<!-- Right: 3D Parallax Phone Mockup with Floating Bubbles & Badges -->
|
|
<div class="reveal reveal-d2 flex justify-center relative" id="phoneContainer" style="perspective:1000px">
|
|
<!-- Floating Badges -->
|
|
<div class="floating-badge absolute -top-4 -left-4 sm:left-0 z-20 px-4 py-2 rounded-full glass text-xs font-bold dark:text-green-300 text-green-600 border border-green-500/20 shadow-lg" style="animation-delay:0s">
|
|
✅ 98% Open Rate
|
|
</div>
|
|
<div class="floating-badge absolute top-1/4 -right-4 sm:-right-8 z-20 px-4 py-2 rounded-full glass text-xs font-bold dark:text-blue-300 text-blue-600 border border-blue-500/20 shadow-lg" style="animation-delay:-2s">
|
|
💬 Blue Bubbles
|
|
</div>
|
|
<div class="floating-badge absolute bottom-16 -left-6 sm:-left-8 z-20 px-4 py-2 rounded-full glass text-xs font-bold dark:text-cyan-300 text-cyan-600 border border-cyan-500/20 shadow-lg" style="animation-delay:-4s">
|
|
🚫 No Monthly Fee
|
|
</div>
|
|
|
|
<!-- Floating iMessage Bubbles -->
|
|
<div class="absolute top-8 -right-2 sm:right-0 z-10 imsg-bubble-sent text-[11px] floating-badge opacity-80 shadow-xl" style="animation-delay:-1s;max-width:160px">
|
|
Hey! Special offer just for you 🎉
|
|
</div>
|
|
<div class="absolute bottom-24 -right-4 sm:-right-6 z-10 imsg-bubble-recv text-[11px] floating-badge opacity-80 shadow-xl" style="animation-delay:-3s;max-width:140px">
|
|
I'm interested! 👀
|
|
</div>
|
|
|
|
<!-- Phone with 3D tilt -->
|
|
<div class="phone-mockup w-[280px] sm:w-[300px] transition-transform duration-300 relative z-10" id="phoneMockup" style="transform-style:preserve-3d">
|
|
<div class="phone-screen" style="aspect-ratio:9/17">
|
|
<div class="phone-notch"></div>
|
|
<div class="px-4 pt-2 pb-3">
|
|
<div class="flex items-center justify-between mb-1">
|
|
<svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>
|
|
<div class="text-center">
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-imsg-cyan mx-auto mb-0.5 flex items-center justify-center text-white text-xs font-bold">JD</div>
|
|
<p class="text-[10px] dark:text-white/70 text-gray-600 font-medium">John Davis</p>
|
|
</div>
|
|
<svg class="w-4 h-4 dark:text-white/40 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M15.05 5A5 5 0 0 1 19 8.95M15.05 1A9 9 0 0 1 23 8.94M22 16.92v3a2 2 0 0 1-2.18 2A19.79 19.79 0 0 1 3 5.18 2 2 0 0 1 5 3h3"/></svg>
|
|
</div>
|
|
<div class="text-center">
|
|
<span class="text-[9px] px-2 py-0.5 rounded-full bg-blue-500/20 text-blue-400 font-medium">iMessage</span>
|
|
</div>
|
|
</div>
|
|
<div class="px-3 pb-4 space-y-2.5" id="chatDemo">
|
|
<div class="flex justify-start"><div class="imsg-bubble-recv text-[13px] chat-msg" data-delay="0">Hey, I saw your ad about the marketing package 👀</div></div>
|
|
<div class="flex justify-end"><div class="imsg-bubble-sent text-[13px] chat-msg" data-delay="800">Hey John! Yes, we're running a special this week 🎉</div></div>
|
|
<div class="flex justify-end"><div class="imsg-bubble-sent text-[13px] chat-msg" data-delay="1600">Want me to send over the details?</div></div>
|
|
<div class="flex justify-start"><div class="imsg-bubble-recv text-[13px] chat-msg" data-delay="2400">Absolutely! That would be great</div></div>
|
|
<div class="flex justify-end">
|
|
<div class="imsg-bubble-sent text-[13px] chat-msg" data-delay="3200">
|
|
Perfect! Here's the link: <span class="underline">blueshift.io/offer</span><br>
|
|
<span class="text-[11px] opacity-70 mt-0.5 block">Delivered · Read ✓</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-start chat-msg" data-delay="4000">
|
|
<div class="imsg-bubble-recv flex gap-1 items-center py-3 px-4">
|
|
<span class="typing-dot"></span><span class="typing-dot"></span><span class="typing-dot"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="absolute bottom-0 left-0 right-0 px-3 py-2 dark:bg-black/80 bg-white/80 backdrop-blur-sm border-t dark:border-white/10 border-gray-200">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-7 h-7 rounded-full bg-blue-500/20 flex items-center justify-center">
|
|
<svg class="w-3.5 h-3.5 text-blue-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>
|
|
</div>
|
|
<div class="flex-1 dark:bg-white/10 bg-gray-100 rounded-full px-3 py-1.5 text-[11px] dark:text-white/30 text-gray-400">iMessage</div>
|
|
<svg class="w-5 h-5 text-blue-500" fill="currentColor" viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scroll Indicator -->
|
|
<div class="hidden lg:flex justify-center mt-12 scroll-indicator">
|
|
<div class="flex flex-col items-center gap-2 dark:text-white/20 text-gray-300">
|
|
<span class="text-xs tracking-widest uppercase">Scroll</span>
|
|
<i data-lucide="chevron-down" class="w-4 h-4"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- ========================================== -->
|
|
<!-- ===== SECTION 2: SOCIAL PROOF MARQUEE ===== -->
|
|
<!-- ========================================== -->
|
|
<section class="relative py-8 sm:py-12 border-y dark:border-white/5 border-gray-100 overflow-hidden" style="z-index:5">
|
|
<div class="text-center mb-6 sm:mb-8">
|
|
<p class="text-xs sm:text-sm font-medium dark:text-white/30 text-gray-400 tracking-widest uppercase">Trusted by 200+ agencies worldwide</p>
|
|
</div>
|
|
<div class="relative overflow-hidden">
|
|
<div class="marquee-track">
|
|
<div class="flex items-center gap-12 sm:gap-16 px-8">
|
|
<div class="flex items-center gap-2 dark:text-white/20 text-gray-300 whitespace-nowrap"><i data-lucide="message-square" class="w-5 h-5"></i><span class="text-sm font-semibold">GoHighLevel</span></div>
|
|
<div class="flex items-center gap-2 dark:text-white/20 text-gray-300 whitespace-nowrap"><i data-lucide="smartphone" class="w-5 h-5"></i><span class="text-sm font-semibold">BlueBubbles</span></div>
|
|
<div class="flex items-center gap-2 dark:text-white/20 text-gray-300 whitespace-nowrap"><i data-lucide="bot" class="w-5 h-5"></i><span class="text-sm font-semibold">Conversation AI</span></div>
|
|
<div class="flex items-center gap-2 dark:text-white/20 text-gray-300 whitespace-nowrap"><i data-lucide="volume-2" class="w-5 h-5"></i><span class="text-sm font-semibold">ElevenLabs</span></div>
|
|
<div class="flex items-center gap-2 dark:text-white/20 text-gray-300 whitespace-nowrap"><i data-lucide="workflow" class="w-5 h-5"></i><span class="text-sm font-semibold">LC Workflows</span></div>
|
|
<div class="flex items-center gap-2 dark:text-white/20 text-gray-300 whitespace-nowrap"><i data-lucide="shield-check" class="w-5 h-5"></i><span class="text-sm font-semibold">End-to-End Encryption</span></div>
|
|
<div class="flex items-center gap-2 dark:text-white/20 text-gray-300 whitespace-nowrap"><i data-lucide="zap" class="w-5 h-5"></i><span class="text-sm font-semibold">Spintax Engine</span></div>
|
|
<div class="flex items-center gap-2 dark:text-white/20 text-gray-300 whitespace-nowrap"><i data-lucide="users" class="w-5 h-5"></i><span class="text-sm font-semibold">Group Chats</span></div>
|
|
</div>
|
|
<div class="flex items-center gap-12 sm:gap-16 px-8">
|
|
<div class="flex items-center gap-2 dark:text-white/20 text-gray-300 whitespace-nowrap"><i data-lucide="message-square" class="w-5 h-5"></i><span class="text-sm font-semibold">GoHighLevel</span></div>
|
|
<div class="flex items-center gap-2 dark:text-white/20 text-gray-300 whitespace-nowrap"><i data-lucide="smartphone" class="w-5 h-5"></i><span class="text-sm font-semibold">BlueBubbles</span></div>
|
|
<div class="flex items-center gap-2 dark:text-white/20 text-gray-300 whitespace-nowrap"><i data-lucide="bot" class="w-5 h-5"></i><span class="text-sm font-semibold">Conversation AI</span></div>
|
|
<div class="flex items-center gap-2 dark:text-white/20 text-gray-300 whitespace-nowrap"><i data-lucide="volume-2" class="w-5 h-5"></i><span class="text-sm font-semibold">ElevenLabs</span></div>
|
|
<div class="flex items-center gap-2 dark:text-white/20 text-gray-300 whitespace-nowrap"><i data-lucide="workflow" class="w-5 h-5"></i><span class="text-sm font-semibold">LC Workflows</span></div>
|
|
<div class="flex items-center gap-2 dark:text-white/20 text-gray-300 whitespace-nowrap"><i data-lucide="shield-check" class="w-5 h-5"></i><span class="text-sm font-semibold">End-to-End Encryption</span></div>
|
|
<div class="flex items-center gap-2 dark:text-white/20 text-gray-300 whitespace-nowrap"><i data-lucide="zap" class="w-5 h-5"></i><span class="text-sm font-semibold">Spintax Engine</span></div>
|
|
<div class="flex items-center gap-2 dark:text-white/20 text-gray-300 whitespace-nowrap"><i data-lucide="users" class="w-5 h-5"></i><span class="text-sm font-semibold">Group Chats</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Wave Divider -->
|
|
<div style="z-index:5;position:relative">
|
|
<svg viewBox="0 0 1440 100" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full" preserveAspectRatio="none" style="display:block;height:80px">
|
|
<path d="M0 50C240 0 480 100 720 50C960 0 1200 100 1440 50V100H0V50Z" class="dark:fill-[#060614] fill-gray-50/50"/>
|
|
</svg>
|
|
</div>
|
|
|
|
|
|
<!-- ========================================== -->
|
|
<!-- ===== SECTION 3: PROBLEM/SOLUTION ===== -->
|
|
<!-- ========================================== -->
|
|
<section id="problem" class="relative py-20 sm:py-32 overflow-hidden dark:bg-[#060614] bg-gray-50/50" style="z-index:5">
|
|
<div class="orb w-[400px] h-[400px] bg-red-500/10 top-20 -right-40"></div>
|
|
<div class="orb w-[300px] h-[300px] bg-blue-500/10 bottom-20 -left-32" style="animation-delay:-10s"></div>
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
<div class="text-center mb-16">
|
|
<span class="reveal text-xs sm:text-sm font-semibold tracking-widest uppercase text-red-400 mb-4 block">The Problem</span>
|
|
<h2 class="reveal reveal-d1 text-3xl sm:text-4xl lg:text-5xl font-black mb-6">
|
|
<span class="gradient-text-white">SMS is </span><span class="text-red-400">dead.</span>
|
|
</h2>
|
|
<p class="reveal reveal-d2 dark:text-white/50 text-gray-500 max-w-2xl mx-auto text-base sm:text-lg">Your messages are getting filtered, ignored, and lost in a sea of spam. Drag the slider to see the difference.</p>
|
|
</div>
|
|
|
|
<!-- Before/After Comparison Slider -->
|
|
<div class="reveal max-w-4xl mx-auto mb-16">
|
|
<div class="comparison-slider rounded-2xl border dark:border-white/10 border-gray-200 overflow-hidden" id="compSlider" style="height:420px">
|
|
<!-- SMS Side (Left/Background) -->
|
|
<div class="absolute inset-0 dark:bg-[#0a0a14] bg-white p-6 sm:p-10 flex flex-col justify-center">
|
|
<div class="max-w-sm">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<div class="w-14 h-14 rounded-2xl bg-red-500/10 flex items-center justify-center">
|
|
<i data-lucide="message-square-dashed" class="w-7 h-7 text-red-400"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold text-red-400">SMS / Green Bubbles</h3>
|
|
<p class="text-xs dark:text-white/40 text-gray-400">The old way</p>
|
|
</div>
|
|
</div>
|
|
<ul class="space-y-3">
|
|
<li class="flex items-start gap-3"><i data-lucide="x-circle" class="w-5 h-5 text-red-400 shrink-0 mt-0.5"></i><span class="text-sm dark:text-white/60 text-gray-600"><strong class="dark:text-white/80 text-gray-800">20-30%</strong> open rates — most go unread</span></li>
|
|
<li class="flex items-start gap-3"><i data-lucide="x-circle" class="w-5 h-5 text-red-400 shrink-0 mt-0.5"></i><span class="text-sm dark:text-white/60 text-gray-600">Carrier <strong class="dark:text-white/80 text-gray-800">spam filters</strong> block your messages</span></li>
|
|
<li class="flex items-start gap-3"><i data-lucide="x-circle" class="w-5 h-5 text-red-400 shrink-0 mt-0.5"></i><span class="text-sm dark:text-white/60 text-gray-600"><strong class="dark:text-white/80 text-gray-800">No read receipts</strong> — you're flying blind</span></li>
|
|
<li class="flex items-start gap-3"><i data-lucide="x-circle" class="w-5 h-5 text-red-400 shrink-0 mt-0.5"></i><span class="text-sm dark:text-white/60 text-gray-600"><strong class="dark:text-white/80 text-gray-800">10DLC registration</strong> headaches</span></li>
|
|
<li class="flex items-start gap-3"><i data-lucide="x-circle" class="w-5 h-5 text-red-400 shrink-0 mt-0.5"></i><span class="text-sm dark:text-white/60 text-gray-600">Green bubbles = <strong class="dark:text-white/80 text-gray-800">looks like spam</strong></span></li>
|
|
</ul>
|
|
<div class="mt-6 flex items-center gap-2 text-red-400 text-sm font-semibold">
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> Green bubble zone
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- iMessage Side (Right/Overlay) -->
|
|
<div class="side-right dark:bg-[#050520] bg-blue-50 p-6 sm:p-10 flex flex-col justify-center" id="compRight" style="width:50%">
|
|
<div class="max-w-sm ml-auto">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<div class="w-14 h-14 rounded-2xl bg-blue-500/10 flex items-center justify-center">
|
|
<i data-lucide="message-circle" class="w-7 h-7 text-blue-400"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold text-blue-400">iMessage / Blue Bubbles</h3>
|
|
<p class="text-xs dark:text-white/40 text-gray-400">The BlueShift way</p>
|
|
</div>
|
|
</div>
|
|
<ul class="space-y-3">
|
|
<li class="flex items-start gap-3"><i data-lucide="check-circle-2" class="w-5 h-5 text-green-400 shrink-0 mt-0.5"></i><span class="text-sm dark:text-white/60 text-gray-600"><strong class="dark:text-white/80 text-gray-800">98% open rates</strong> — nearly every message read</span></li>
|
|
<li class="flex items-start gap-3"><i data-lucide="check-circle-2" class="w-5 h-5 text-green-400 shrink-0 mt-0.5"></i><span class="text-sm dark:text-white/60 text-gray-600"><strong class="dark:text-white/80 text-gray-800">No spam filters</strong> — direct to inbox</span></li>
|
|
<li class="flex items-start gap-3"><i data-lucide="check-circle-2" class="w-5 h-5 text-green-400 shrink-0 mt-0.5"></i><span class="text-sm dark:text-white/60 text-gray-600"><strong class="dark:text-white/80 text-gray-800">Read receipts</strong> + typing indicators</span></li>
|
|
<li class="flex items-start gap-3"><i data-lucide="check-circle-2" class="w-5 h-5 text-green-400 shrink-0 mt-0.5"></i><span class="text-sm dark:text-white/60 text-gray-600"><strong class="dark:text-white/80 text-gray-800">Rich media</strong> — links, reactions, voice</span></li>
|
|
<li class="flex items-start gap-3"><i data-lucide="check-circle-2" class="w-5 h-5 text-green-400 shrink-0 mt-0.5"></i><span class="text-sm dark:text-white/60 text-gray-600">Blue bubbles = <strong class="dark:text-white/80 text-gray-800">trusted & personal</strong></span></li>
|
|
</ul>
|
|
<div class="mt-6 flex items-center gap-2 text-blue-400 text-sm font-semibold">
|
|
<div class="w-3 h-3 rounded-full bg-blue-500"></div> Blue bubble zone
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slider Line & Handle -->
|
|
<div class="slider-line" id="compLine" style="left:50%"></div>
|
|
<div class="slider-handle" id="compHandle" style="left:50%">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5"><path d="M8 6l-4 6 4 6M16 6l4 6-4 6"/></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Animated Stats Counters -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 sm:gap-6 max-w-4xl mx-auto">
|
|
<div class="text-center reveal">
|
|
<div class="text-3xl sm:text-4xl font-black gradient-text stat-number" data-target="98" data-suffix="%">0%</div>
|
|
<p class="text-xs sm:text-sm dark:text-white/40 text-gray-500 mt-1">Open Rate</p>
|
|
</div>
|
|
<div class="text-center reveal reveal-d1">
|
|
<div class="text-3xl sm:text-4xl font-black gradient-text stat-number" data-target="3.5" data-suffix="x" data-decimal="true">0x</div>
|
|
<p class="text-xs sm:text-sm dark:text-white/40 text-gray-500 mt-1">More Replies</p>
|
|
</div>
|
|
<div class="text-center reveal reveal-d2">
|
|
<div class="text-3xl sm:text-4xl font-black gradient-text stat-number" data-target="0" data-prefix="$" data-suffix="">$0</div>
|
|
<p class="text-xs sm:text-sm dark:text-white/40 text-gray-500 mt-1">Monthly Fee</p>
|
|
</div>
|
|
<div class="text-center reveal reveal-d3">
|
|
<div class="text-3xl sm:text-4xl font-black gradient-text stat-number" data-target="200" data-suffix="+">0+</div>
|
|
<p class="text-xs sm:text-sm dark:text-white/40 text-gray-500 mt-1">Agencies</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Diagonal Divider -->
|
|
<div style="z-index:5;position:relative">
|
|
<svg viewBox="0 0 1440 60" preserveAspectRatio="none" class="w-full" style="display:block;height:60px">
|
|
<path d="M0 60L1440 0V60H0Z" class="dark:fill-dark fill-white"/>
|
|
</svg>
|
|
</div>
|
|
|
|
|
|
<!-- ========================================== -->
|
|
<!-- ===== SECTION 4: VIDEO PLACEHOLDER ===== -->
|
|
<!-- ========================================== -->
|
|
<section class="relative py-16 sm:py-24 overflow-hidden" style="z-index:5">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
<div class="text-center mb-10">
|
|
<h2 class="reveal text-2xl sm:text-3xl font-bold mb-3 gradient-text-white">See it in action</h2>
|
|
<p class="reveal reveal-d1 dark:text-white/50 text-gray-500 text-sm sm:text-base">Watch how BlueShift transforms your GoHighLevel messaging in under 2 minutes.</p>
|
|
</div>
|
|
<div class="reveal reveal-d2 video-placeholder rounded-2xl overflow-hidden aspect-video dark:bg-[#0a0a1a] bg-gray-100 border dark:border-white/10 border-gray-200 relative" onclick="this.innerHTML='<div class=\'flex items-center justify-center h-full text-white/50 text-sm\'>Video coming soon — stay tuned!</div>'">
|
|
<!-- Dark screenshot mock -->
|
|
<div class="absolute inset-0 flex items-center justify-center" style="background:linear-gradient(135deg,#050520 0%,#0a0a2e 50%,#050520 100%)">
|
|
<div class="text-center">
|
|
<div class="w-20 h-20 rounded-full bg-blue-500/10 border border-blue-500/20 flex items-center justify-center mx-auto mb-4">
|
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-imsg-cyan flex items-center justify-center">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" stroke="white" stroke-width="2"/></svg>
|
|
</div>
|
|
</div>
|
|
<p class="text-white/40 text-xs">BlueShift Demo</p>
|
|
</div>
|
|
</div>
|
|
<div class="play-btn">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="white"><polygon points="10,8 16,12 10,16"/></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Wave Divider -->
|
|
<div style="z-index:5;position:relative">
|
|
<svg viewBox="0 0 1440 80" fill="none" preserveAspectRatio="none" class="w-full" style="display:block;height:60px">
|
|
<path d="M0 0C360 80 720 0 1080 60C1260 80 1380 40 1440 0V80H0V0Z" class="dark:fill-[#060614] fill-gray-50/50"/>
|
|
</svg>
|
|
</div>
|
|
|
|
|
|
<!-- ========================================== -->
|
|
<!-- ===== SECTION 5: FEATURES — BENTO GRID ===== -->
|
|
<!-- ========================================== -->
|
|
<section id="features" class="relative py-20 sm:py-32 overflow-hidden dark:bg-[#060614] bg-gray-50/50" style="z-index:5">
|
|
<div class="orb w-[500px] h-[500px] bg-blue-500/10 top-1/4 left-1/3" style="animation-delay:-5s"></div>
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
<div class="text-center mb-16">
|
|
<span class="reveal text-xs sm:text-sm font-semibold tracking-widest uppercase text-blue-400 mb-4 block">Features</span>
|
|
<h2 class="reveal reveal-d1 text-3xl sm:text-4xl lg:text-5xl font-black mb-6">
|
|
<span class="gradient-text-white">Everything you need.</span><br>
|
|
<span class="gradient-text">Nothing you don't.</span>
|
|
</h2>
|
|
<p class="reveal reveal-d2 dark:text-white/50 text-gray-500 max-w-2xl mx-auto text-base sm:text-lg">Enterprise-grade iMessage integration built specifically for GoHighLevel agencies.</p>
|
|
</div>
|
|
|
|
<div class="bento-grid">
|
|
<!-- Feature 1 — Large -->
|
|
<div class="bento-lg reveal glass-card rounded-2xl p-6 sm:p-8 gradient-border group">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-14 h-14 rounded-xl bg-blue-500/10 flex items-center justify-center shrink-0 group-hover:bg-blue-500/20 transition-colors">
|
|
<i data-lucide="message-circle" class="w-7 h-7 text-blue-400"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold mb-2 dark:text-white text-gray-900">iMessage + SMS Rollover</h3>
|
|
<p class="text-sm dark:text-white/50 text-gray-500 leading-relaxed">Sends via iMessage when available, automatically rolls over to SMS when it's not. Never miss a lead. Your contacts see blue bubbles, you see higher conversions.</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 flex gap-2">
|
|
<span class="px-3 py-1 rounded-full text-[10px] font-medium dark:bg-blue-500/10 bg-blue-50 dark:text-blue-300 text-blue-600">Auto-detect</span>
|
|
<span class="px-3 py-1 rounded-full text-[10px] font-medium dark:bg-green-500/10 bg-green-50 dark:text-green-300 text-green-600">Fallback SMS</span>
|
|
<span class="px-3 py-1 rounded-full text-[10px] font-medium dark:bg-purple-500/10 bg-purple-50 dark:text-purple-300 text-purple-600">Zero config</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 2 — Tall -->
|
|
<div class="bento-tall reveal reveal-d1 glass-card rounded-2xl p-6 gradient-border group flex flex-col justify-between">
|
|
<div>
|
|
<div class="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center mb-4 group-hover:bg-blue-500/20 transition-colors">
|
|
<i data-lucide="refresh-cw" class="w-6 h-6 text-blue-400"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-2 dark:text-white text-gray-900">Two-Way Device Sync</h3>
|
|
<p class="text-sm dark:text-white/50 text-gray-500 leading-relaxed">Messages sync between your personal device and GHL in real-time. Reply from anywhere — your phone, Mac, or GHL dashboard.</p>
|
|
</div>
|
|
<div class="mt-4 p-3 rounded-xl dark:bg-white/5 bg-gray-100">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<div class="w-6 h-6 rounded-full bg-blue-500/20 flex items-center justify-center"><i data-lucide="smartphone" class="w-3 h-3 text-blue-400"></i></div>
|
|
<div class="h-px flex-1 dark:bg-white/10 bg-gray-200 relative overflow-hidden"><div class="absolute inset-y-0 left-0 w-1/2 bg-blue-500/50" style="animation:shimmer 2s ease infinite"></div></div>
|
|
<div class="w-6 h-6 rounded-full bg-blue-500/20 flex items-center justify-center"><i data-lucide="monitor" class="w-3 h-3 text-blue-400"></i></div>
|
|
</div>
|
|
<p class="text-[10px] dark:text-white/30 text-gray-400 text-center">Real-time sync active</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 3 -->
|
|
<div class="reveal reveal-d2 glass-card rounded-2xl p-6 gradient-border group">
|
|
<div class="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center mb-4 group-hover:bg-blue-500/20 transition-colors">
|
|
<i data-lucide="smartphone" class="w-6 h-6 text-blue-400"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-2 dark:text-white text-gray-900">Unlimited Phones</h3>
|
|
<p class="text-sm dark:text-white/50 text-gray-500 leading-relaxed">Connect as many devices as you want. Scale without per-phone fees.</p>
|
|
</div>
|
|
|
|
<!-- Feature 4 -->
|
|
<div class="reveal reveal-d3 glass-card rounded-2xl p-6 gradient-border group">
|
|
<div class="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center mb-4 group-hover:bg-blue-500/20 transition-colors">
|
|
<i data-lucide="volume-2" class="w-6 h-6 text-blue-400"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-2 dark:text-white text-gray-900">ElevenLabs Voice</h3>
|
|
<p class="text-sm dark:text-white/50 text-gray-500 leading-relaxed">Send AI-powered voice messages via ElevenLabs TTS. Stand out.</p>
|
|
</div>
|
|
|
|
<!-- Feature 5 — Large -->
|
|
<div class="bento-lg reveal reveal-d1 glass-card rounded-2xl p-6 sm:p-8 gradient-border group">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-14 h-14 rounded-xl bg-blue-500/10 flex items-center justify-center shrink-0 group-hover:bg-blue-500/20 transition-colors">
|
|
<i data-lucide="bot" class="w-7 h-7 text-blue-400"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold mb-2 dark:text-white text-gray-900">Conversation AI</h3>
|
|
<p class="text-sm dark:text-white/50 text-gray-500 leading-relaxed">Native GHL Conversation AI support. Automate responses while keeping the iMessage channel. AI replies arrive as blue bubbles — your leads can't tell the difference.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 6 -->
|
|
<div class="reveal reveal-d2 glass-card rounded-2xl p-6 gradient-border group">
|
|
<div class="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center mb-4 group-hover:bg-blue-500/20 transition-colors">
|
|
<i data-lucide="workflow" class="w-6 h-6 text-blue-400"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-2 dark:text-white text-gray-900">Workflow Actions</h3>
|
|
<p class="text-sm dark:text-white/50 text-gray-500 leading-relaxed">Check iMessage availability, send messages, wait for replies — all within GHL workflows.</p>
|
|
</div>
|
|
|
|
<!-- Feature 7 -->
|
|
<div class="reveal reveal-d3 glass-card rounded-2xl p-6 gradient-border group">
|
|
<div class="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center mb-4 group-hover:bg-blue-500/20 transition-colors">
|
|
<i data-lucide="users" class="w-6 h-6 text-blue-400"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-2 dark:text-white text-gray-900">Group Chats</h3>
|
|
<p class="text-sm dark:text-white/50 text-gray-500 leading-relaxed">Create and manage group chats directly from your CRM. Perfect for team selling.</p>
|
|
</div>
|
|
|
|
<!-- Feature 8 -->
|
|
<div class="reveal reveal-d4 glass-card rounded-2xl p-6 gradient-border group">
|
|
<div class="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center mb-4 group-hover:bg-blue-500/20 transition-colors">
|
|
<i data-lucide="zap" class="w-6 h-6 text-blue-400"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-2 dark:text-white text-gray-900">Spintax Engine</h3>
|
|
<p class="text-sm dark:text-white/50 text-gray-500 leading-relaxed">Randomize messages with spintax to keep every outbound feeling personal and unique.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(200%)}}</style>
|
|
|
|
|
|
<!-- Wave Divider -->
|
|
<div style="z-index:5;position:relative">
|
|
<svg viewBox="0 0 1440 80" fill="none" preserveAspectRatio="none" class="w-full" style="display:block;height:60px"><path d="M0 80C480 20 960 80 1440 30V0H0V80Z" class="dark:fill-[#060614] fill-gray-50/50"/></svg>
|
|
</div>
|
|
|
|
|
|
<!-- ========================================== -->
|
|
<!-- ===== SECTION 6: HOW IT WORKS ===== -->
|
|
<!-- ========================================== -->
|
|
<section id="how-it-works" class="relative py-20 sm:py-32 overflow-hidden" style="z-index:5">
|
|
<div class="orb w-[400px] h-[400px] bg-imsg-cyan/10 bottom-0 right-0" style="animation-delay:-8s"></div>
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
<div class="text-center mb-16">
|
|
<span class="reveal text-xs sm:text-sm font-semibold tracking-widest uppercase text-blue-400 mb-4 block">How It Works</span>
|
|
<h2 class="reveal reveal-d1 text-3xl sm:text-4xl lg:text-5xl font-black mb-6">
|
|
<span class="gradient-text-white">Up and running</span><br>
|
|
<span class="gradient-text">in minutes.</span>
|
|
</h2>
|
|
<p class="reveal reveal-d2 dark:text-white/50 text-gray-500 max-w-2xl mx-auto text-base sm:text-lg">Four simple steps to transform your CRM messaging forever.</p>
|
|
</div>
|
|
|
|
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8 relative">
|
|
<!-- Connecting line (desktop) -->
|
|
<div class="hidden lg:block absolute top-[56px] left-[12%] right-[12%] h-[2px] z-0" style="background:linear-gradient(90deg,rgba(0,122,255,.1),#007AFF,#34AADC,#007AFF,rgba(0,122,255,.1))"></div>
|
|
<!-- Animated particle on the line -->
|
|
<div class="hidden lg:block absolute top-[52px] w-3 h-3 rounded-full bg-blue-400 z-[1] shadow-lg shadow-blue-500/50" style="left:12%;animation:flowParticle 4s ease-in-out infinite"></div>
|
|
<style>@keyframes flowParticle{0%{left:12%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:88%;opacity:0}}</style>
|
|
|
|
<!-- Step 1 -->
|
|
<div class="reveal relative z-10">
|
|
<div class="glass-card rounded-2xl p-6 text-center">
|
|
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-blue-500 to-imsg-cyan flex items-center justify-center mx-auto mb-4 shadow-lg shadow-blue-500/20">
|
|
<span class="text-2xl font-black text-white">1</span>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-2 dark:text-white text-gray-900">Install</h3>
|
|
<p class="text-sm dark:text-white/50 text-gray-500">Install the BlueShift app from the GHL marketplace in seconds.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="reveal reveal-d1 relative z-10">
|
|
<div class="glass-card rounded-2xl p-6 text-center">
|
|
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-blue-500 to-imsg-cyan flex items-center justify-center mx-auto mb-4 shadow-lg shadow-blue-500/20">
|
|
<span class="text-2xl font-black text-white">2</span>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-2 dark:text-white text-gray-900">Connect</h3>
|
|
<p class="text-sm dark:text-white/50 text-gray-500">Link your Mac or hosted VM running BlueBubbles to your GHL account.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="reveal reveal-d2 relative z-10">
|
|
<div class="glass-card rounded-2xl p-6 text-center">
|
|
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-blue-500 to-imsg-cyan flex items-center justify-center mx-auto mb-4 shadow-lg shadow-blue-500/20">
|
|
<span class="text-2xl font-black text-white">3</span>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-2 dark:text-white text-gray-900">Send</h3>
|
|
<p class="text-sm dark:text-white/50 text-gray-500">Start sending iMessages right from your GHL conversations & workflows.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 4 -->
|
|
<div class="reveal reveal-d3 relative z-10">
|
|
<div class="glass-card rounded-2xl p-6 text-center">
|
|
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-blue-500 to-imsg-cyan flex items-center justify-center mx-auto mb-4 shadow-lg shadow-blue-500/20">
|
|
<span class="text-2xl font-black text-white">4</span>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-2 dark:text-white text-gray-900">Convert</h3>
|
|
<p class="text-sm dark:text-white/50 text-gray-500">Watch your reply rates skyrocket and close more deals with blue bubbles.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Diagonal Divider -->
|
|
<div style="z-index:5;position:relative">
|
|
<svg viewBox="0 0 1440 60" preserveAspectRatio="none" class="w-full" style="display:block;height:60px"><path d="M0 0L1440 60V0H0Z" class="dark:fill-[#060614] fill-gray-50/50"/></svg>
|
|
</div>
|
|
|
|
|
|
<!-- ========================================== -->
|
|
<!-- ===== SECTION 7: TESTIMONIALS ===== -->
|
|
<!-- ========================================== -->
|
|
<section id="testimonials" class="relative py-20 sm:py-32 overflow-hidden dark:bg-[#060614] bg-gray-50/50" style="z-index:5">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
<div class="text-center mb-16">
|
|
<span class="reveal text-xs sm:text-sm font-semibold tracking-widest uppercase text-blue-400 mb-4 block">Testimonials</span>
|
|
<h2 class="reveal reveal-d1 text-3xl sm:text-4xl lg:text-5xl font-black mb-6">
|
|
<span class="gradient-text-white">Loved by</span>
|
|
<span class="gradient-text"> agency owners.</span>
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="reveal relative overflow-hidden" id="testimonialCarousel">
|
|
<div class="testimonial-track" id="testimonialTrack">
|
|
<!-- Testimonial 1 -->
|
|
<div class="w-full sm:w-1/2 lg:w-1/3 shrink-0 px-3">
|
|
<div class="glass-card rounded-2xl p-6 h-full">
|
|
<div class="flex items-center gap-1 mb-4">
|
|
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
|
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
|
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
|
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
|
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
|
</div>
|
|
<p class="text-sm dark:text-white/70 text-gray-600 leading-relaxed mb-6">"We switched from Twilio SMS to BlueShift and our reply rates went from 12% to over 45% literally overnight. The ROI is insane — this single tool paid for itself in the first week."</p>
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center text-white text-sm font-bold">MR</div>
|
|
<div>
|
|
<p class="text-sm font-semibold dark:text-white text-gray-900">Marcus Rivera</p>
|
|
<p class="text-xs dark:text-white/40 text-gray-400">Founder, LeadFlow Agency</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Testimonial 2 -->
|
|
<div class="w-full sm:w-1/2 lg:w-1/3 shrink-0 px-3">
|
|
<div class="glass-card rounded-2xl p-6 h-full">
|
|
<div class="flex items-center gap-1 mb-4">
|
|
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
|
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
|
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
|
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
|
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
|
</div>
|
|
<p class="text-sm dark:text-white/70 text-gray-600 leading-relaxed mb-6">"My clients were skeptical about iMessage marketing until they saw the numbers. 98% open rate isn't a gimmick — we see it every single day. BlueShift is now our secret weapon."</p>
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-green-500 to-emerald-500 flex items-center justify-center text-white text-sm font-bold">SK</div>
|
|
<div>
|
|
<p class="text-sm font-semibold dark:text-white text-gray-900">Sarah Kim</p>
|
|
<p class="text-xs dark:text-white/40 text-gray-400">CEO, GrowthPath Digital</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Testimonial 3 -->
|
|
<div class="w-full sm:w-1/2 lg:w-1/3 shrink-0 px-3">
|
|
<div class="glass-card rounded-2xl p-6 h-full">
|
|
<div class="flex items-center gap-1 mb-4">
|
|
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
|
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
|
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
|
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
|
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
|
</div>
|
|
<p class="text-sm dark:text-white/70 text-gray-600 leading-relaxed mb-6">"I was paying $89/mo per phone with our old provider. BlueShift? Zero subscription. I've got 6 phones connected and my total cost went down 70%. Plus the two-way sync is chef's kiss."</p>
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-orange-500 to-red-500 flex items-center justify-center text-white text-sm font-bold">DT</div>
|
|
<div>
|
|
<p class="text-sm font-semibold dark:text-white text-gray-900">Derek Thompson</p>
|
|
<p class="text-xs dark:text-white/40 text-gray-400">Owner, Apex Lead Gen</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Testimonial 4 -->
|
|
<div class="w-full sm:w-1/2 lg:w-1/3 shrink-0 px-3">
|
|
<div class="glass-card rounded-2xl p-6 h-full">
|
|
<div class="flex items-center gap-1 mb-4">
|
|
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
|
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
|
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
|
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
|
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
|
</div>
|
|
<p class="text-sm dark:text-white/70 text-gray-600 leading-relaxed mb-6">"The Conversation AI integration is a game-changer. Our AI assistant responds via iMessage and leads literally think they're texting a real person. Booking rates are through the roof."</p>
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-pink-500 to-violet-500 flex items-center justify-center text-white text-sm font-bold">JL</div>
|
|
<div>
|
|
<p class="text-sm font-semibold dark:text-white text-gray-900">Jessica Lopez</p>
|
|
<p class="text-xs dark:text-white/40 text-gray-400">Director, Summit Marketing Co</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Carousel Controls -->
|
|
<div class="flex justify-center gap-3 mt-8">
|
|
<button onclick="moveCarousel(-1)" class="w-10 h-10 rounded-full glass flex items-center justify-center hover:bg-blue-500/10 transition-colors cursor-pointer" aria-label="Previous">
|
|
<i data-lucide="chevron-left" class="w-5 h-5"></i>
|
|
</button>
|
|
<div class="flex items-center gap-2" id="carouselDots">
|
|
<button class="w-2.5 h-2.5 rounded-full bg-blue-500 transition-all cursor-pointer" data-index="0"></button>
|
|
<button class="w-2.5 h-2.5 rounded-full dark:bg-white/20 bg-gray-300 transition-all cursor-pointer" data-index="1"></button>
|
|
<button class="w-2.5 h-2.5 rounded-full dark:bg-white/20 bg-gray-300 transition-all cursor-pointer" data-index="2"></button>
|
|
<button class="w-2.5 h-2.5 rounded-full dark:bg-white/20 bg-gray-300 transition-all cursor-pointer" data-index="3"></button>
|
|
</div>
|
|
<button onclick="moveCarousel(1)" class="w-10 h-10 rounded-full glass flex items-center justify-center hover:bg-blue-500/10 transition-colors cursor-pointer" aria-label="Next">
|
|
<i data-lucide="chevron-right" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Wave Divider -->
|
|
<div style="z-index:5;position:relative">
|
|
<svg viewBox="0 0 1440 80" fill="none" preserveAspectRatio="none" class="w-full" style="display:block;height:60px"><path d="M0 80C360 20 720 80 1080 30C1260 10 1380 50 1440 80V0H0V80Z" class="dark:fill-[#060614] fill-gray-50/50"/></svg>
|
|
</div>
|
|
|
|
|
|
<!-- ========================================== -->
|
|
<!-- ===== SECTION 8: PRICING ===== -->
|
|
<!-- ========================================== -->
|
|
<section id="pricing" class="relative py-20 sm:py-32 overflow-hidden" style="z-index:5">
|
|
<div class="orb w-[400px] h-[400px] bg-green-500/10 top-1/3 -right-32" style="animation-delay:-3s"></div>
|
|
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
<div class="text-center">
|
|
<span class="reveal text-xs sm:text-sm font-semibold tracking-widest uppercase text-blue-400 mb-4 block">Pricing</span>
|
|
<h2 class="reveal reveal-d1 text-3xl sm:text-4xl lg:text-5xl font-black mb-6">
|
|
<span class="gradient-text-white">No subscriptions.</span><br>
|
|
<span class="gradient-text">Pay per message.</span>
|
|
</h2>
|
|
<p class="reveal reveal-d2 dark:text-white/50 text-gray-500 max-w-2xl mx-auto text-base sm:text-lg mb-8">Stop paying $29/month per phone. With BlueShift, self-hosted users pay zero subscription fees.</p>
|
|
|
|
<!-- Pricing Toggle -->
|
|
<div class="reveal reveal-d3 flex items-center justify-center gap-4 mb-12">
|
|
<span class="text-sm dark:text-white/60 text-gray-500" id="toggleLabelMonthly">Monthly</span>
|
|
<div class="pricing-toggle" id="pricingToggle" onclick="togglePricing()">
|
|
<div class="toggle-knob"></div>
|
|
</div>
|
|
<span class="text-sm dark:text-white/60 text-gray-500" id="toggleLabelAnnual">Annual</span>
|
|
<span class="px-2 py-0.5 rounded-full bg-green-500/10 text-green-400 text-[10px] font-bold" id="savingsBadge" style="opacity:0;transition:opacity .3s ease">SAVE 20%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-6 sm:gap-8">
|
|
<!-- Self-Hosted -->
|
|
<div class="reveal glass-card rounded-2xl p-6 sm:p-8 gradient-border">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h3 class="text-xl font-bold dark:text-white text-gray-900">Self-Hosted</h3>
|
|
<p class="text-sm dark:text-white/40 text-gray-500">Use your own Mac</p>
|
|
</div>
|
|
<div class="px-3 py-1 rounded-full bg-green-500/10 text-green-400 text-xs font-bold">MOST POPULAR</div>
|
|
</div>
|
|
<div class="flex items-baseline gap-1 mb-6">
|
|
<span class="text-4xl sm:text-5xl font-black gradient-text" id="selfHostedPrice">$0</span>
|
|
<span class="dark:text-white/40 text-gray-500 text-sm" id="selfHostedPeriod">/month</span>
|
|
</div>
|
|
<ul class="space-y-3 mb-8">
|
|
<li class="flex items-center gap-3 text-sm dark:text-white/60 text-gray-600"><i data-lucide="check" class="w-4 h-4 text-green-400 shrink-0"></i>No monthly subscription</li>
|
|
<li class="flex items-center gap-3 text-sm dark:text-white/60 text-gray-600"><i data-lucide="check" class="w-4 h-4 text-green-400 shrink-0"></i>Pay only per message sent</li>
|
|
<li class="flex items-center gap-3 text-sm dark:text-white/60 text-gray-600"><i data-lucide="check" class="w-4 h-4 text-green-400 shrink-0"></i>Unlimited connected phones</li>
|
|
<li class="flex items-center gap-3 text-sm dark:text-white/60 text-gray-600"><i data-lucide="check" class="w-4 h-4 text-green-400 shrink-0"></i>All features included</li>
|
|
<li class="flex items-center gap-3 text-sm dark:text-white/60 text-gray-600"><i data-lucide="check" class="w-4 h-4 text-green-400 shrink-0"></i>Full control & privacy</li>
|
|
</ul>
|
|
<a href="#cta" class="block w-full glow-btn text-white font-semibold py-3.5 rounded-xl text-center text-sm">Get Started Free →</a>
|
|
</div>
|
|
|
|
<!-- Hosted VM -->
|
|
<div class="reveal reveal-d1 glass-card rounded-2xl p-6 sm:p-8 gradient-border">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h3 class="text-xl font-bold dark:text-white text-gray-900">Hosted VM</h3>
|
|
<p class="text-sm dark:text-white/40 text-gray-500">We handle the hardware</p>
|
|
</div>
|
|
<div class="px-3 py-1 rounded-full bg-blue-500/10 text-blue-400 text-xs font-bold">HANDS-FREE</div>
|
|
</div>
|
|
<div class="flex items-baseline gap-1 mb-6">
|
|
<span class="text-4xl sm:text-5xl font-black gradient-text" id="hostedPrice">$—</span>
|
|
<span class="dark:text-white/40 text-gray-500 text-sm" id="hostedPeriod">/month</span>
|
|
</div>
|
|
<ul class="space-y-3 mb-8">
|
|
<li class="flex items-center gap-3 text-sm dark:text-white/60 text-gray-600"><i data-lucide="check" class="w-4 h-4 text-blue-400 shrink-0"></i>Managed Mac VM included</li>
|
|
<li class="flex items-center gap-3 text-sm dark:text-white/60 text-gray-600"><i data-lucide="check" class="w-4 h-4 text-blue-400 shrink-0"></i>Per-message pricing + hosting</li>
|
|
<li class="flex items-center gap-3 text-sm dark:text-white/60 text-gray-600"><i data-lucide="check" class="w-4 h-4 text-blue-400 shrink-0"></i>Unlimited connected phones</li>
|
|
<li class="flex items-center gap-3 text-sm dark:text-white/60 text-gray-600"><i data-lucide="check" class="w-4 h-4 text-blue-400 shrink-0"></i>All features included</li>
|
|
<li class="flex items-center gap-3 text-sm dark:text-white/60 text-gray-600"><i data-lucide="check" class="w-4 h-4 text-blue-400 shrink-0"></i>Zero hardware maintenance</li>
|
|
</ul>
|
|
<a href="#cta" class="block w-full py-3.5 rounded-xl text-center text-sm font-semibold border dark:border-white/10 border-gray-200 dark:text-white text-gray-700 hover:border-blue-500/50 transition-colors">Contact for Pricing →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Diagonal Divider -->
|
|
<div style="z-index:5;position:relative">
|
|
<svg viewBox="0 0 1440 60" preserveAspectRatio="none" class="w-full" style="display:block;height:60px"><path d="M0 60L1440 0V60H0Z" class="dark:fill-[#060614] fill-gray-50/50"/></svg>
|
|
</div>
|
|
|
|
|
|
<!-- ========================================== -->
|
|
<!-- ===== SECTION 9: FAQ ===== -->
|
|
<!-- ========================================== -->
|
|
<section id="faq" class="relative py-20 sm:py-32 overflow-hidden dark:bg-[#060614] bg-gray-50/50" style="z-index:5">
|
|
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
<div class="text-center mb-16">
|
|
<span class="reveal text-xs sm:text-sm font-semibold tracking-widest uppercase text-blue-400 mb-4 block">FAQ</span>
|
|
<h2 class="reveal reveal-d1 text-3xl sm:text-4xl lg:text-5xl font-black mb-6">
|
|
<span class="gradient-text-white">Got questions?</span>
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="space-y-3 reveal" id="faqContainer">
|
|
<div class="faq-item glass-card rounded-xl overflow-hidden">
|
|
<button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left cursor-pointer" onclick="toggleFaq(this)">
|
|
<span class="text-sm sm:text-base font-semibold dark:text-white text-gray-900 pr-4">Do I need a Mac to use BlueShift?</span>
|
|
<i data-lucide="chevron-down" class="w-5 h-5 dark:text-white/40 text-gray-400 shrink-0 faq-chevron"></i>
|
|
</button>
|
|
<div class="faq-answer px-5 sm:px-6">
|
|
<p class="text-sm dark:text-white/50 text-gray-500 pb-5 sm:pb-6 leading-relaxed">Yes, iMessage requires a Mac (or macOS VM) running BlueBubbles as the bridge. You can use your own Mac mini, or choose our hosted VM option where we provide the hardware for you — zero maintenance required.</p>
|
|
</div>
|
|
</div>
|
|
<div class="faq-item glass-card rounded-xl overflow-hidden">
|
|
<button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left cursor-pointer" onclick="toggleFaq(this)">
|
|
<span class="text-sm sm:text-base font-semibold dark:text-white text-gray-900 pr-4">What happens if the contact doesn't have iMessage?</span>
|
|
<i data-lucide="chevron-down" class="w-5 h-5 dark:text-white/40 text-gray-400 shrink-0 faq-chevron"></i>
|
|
</button>
|
|
<div class="faq-answer px-5 sm:px-6">
|
|
<p class="text-sm dark:text-white/50 text-gray-500 pb-5 sm:pb-6 leading-relaxed">BlueShift automatically detects iMessage availability. If a contact doesn't have iMessage, the message rolls over to standard SMS through your GHL phone number. You'll never miss a lead.</p>
|
|
</div>
|
|
</div>
|
|
<div class="faq-item glass-card rounded-xl overflow-hidden">
|
|
<button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left cursor-pointer" onclick="toggleFaq(this)">
|
|
<span class="text-sm sm:text-base font-semibold dark:text-white text-gray-900 pr-4">Is there a limit on messages?</span>
|
|
<i data-lucide="chevron-down" class="w-5 h-5 dark:text-white/40 text-gray-400 shrink-0 faq-chevron"></i>
|
|
</button>
|
|
<div class="faq-answer px-5 sm:px-6">
|
|
<p class="text-sm dark:text-white/50 text-gray-500 pb-5 sm:pb-6 leading-relaxed">There's no hard cap on messages. Each device supports up to 50 new contacts per day to maintain deliverability and avoid Apple rate limits. You can add more devices for higher volume.</p>
|
|
</div>
|
|
</div>
|
|
<div class="faq-item glass-card rounded-xl overflow-hidden">
|
|
<button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left cursor-pointer" onclick="toggleFaq(this)">
|
|
<span class="text-sm sm:text-base font-semibold dark:text-white text-gray-900 pr-4">How does pricing work?</span>
|
|
<i data-lucide="chevron-down" class="w-5 h-5 dark:text-white/40 text-gray-400 shrink-0 faq-chevron"></i>
|
|
</button>
|
|
<div class="faq-answer px-5 sm:px-6">
|
|
<p class="text-sm dark:text-white/50 text-gray-500 pb-5 sm:pb-6 leading-relaxed">Self-hosted users pay $0/month — just a small per-message fee. No per-phone charges, no seat limits. The hosted VM option includes a monthly hosting fee plus per-message costs. Either way, it's a fraction of what competitors charge.</p>
|
|
</div>
|
|
</div>
|
|
<div class="faq-item glass-card rounded-xl overflow-hidden">
|
|
<button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left cursor-pointer" onclick="toggleFaq(this)">
|
|
<span class="text-sm sm:text-base font-semibold dark:text-white text-gray-900 pr-4">Does it work with GoHighLevel workflows?</span>
|
|
<i data-lucide="chevron-down" class="w-5 h-5 dark:text-white/40 text-gray-400 shrink-0 faq-chevron"></i>
|
|
</button>
|
|
<div class="faq-answer px-5 sm:px-6">
|
|
<p class="text-sm dark:text-white/50 text-gray-500 pb-5 sm:pb-6 leading-relaxed">Absolutely. BlueShift includes custom workflow actions: check iMessage availability, send iMessages, and wait for replies — all natively inside GHL workflows. It also supports Conversation AI for automated responses.</p>
|
|
</div>
|
|
</div>
|
|
<div class="faq-item glass-card rounded-xl overflow-hidden">
|
|
<button class="faq-toggle w-full flex items-center justify-between p-5 sm:p-6 text-left cursor-pointer" onclick="toggleFaq(this)">
|
|
<span class="text-sm sm:text-base font-semibold dark:text-white text-gray-900 pr-4">Can I use my personal iMessage and keep it synced?</span>
|
|
<i data-lucide="chevron-down" class="w-5 h-5 dark:text-white/40 text-gray-400 shrink-0 faq-chevron"></i>
|
|
</button>
|
|
<div class="faq-answer px-5 sm:px-6">
|
|
<p class="text-sm dark:text-white/50 text-gray-500 pb-5 sm:pb-6 leading-relaxed">Yes! Two-way device sync means conversations stay synced between your personal iPhone/Mac and GoHighLevel. Reply from either place and everything stays in sync.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Wave Divider -->
|
|
<div style="z-index:5;position:relative">
|
|
<svg viewBox="0 0 1440 80" fill="none" preserveAspectRatio="none" class="w-full" style="display:block;height:60px"><path d="M0 0C360 80 720 0 1080 60C1260 80 1380 40 1440 0V80H0V0Z" class="dark:fill-dark fill-white"/></svg>
|
|
</div>
|
|
|
|
|
|
<!-- ========================================== -->
|
|
<!-- ===== SECTION 10: FINAL CTA ===== -->
|
|
<!-- ========================================== -->
|
|
<section id="cta" class="relative py-20 sm:py-32 overflow-hidden" style="z-index:5">
|
|
<div class="orb w-[600px] h-[600px] bg-blue-500/15 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" style="animation-delay:-4s"></div>
|
|
<div class="orb w-[300px] h-[300px] bg-imsg-cyan/10 top-10 left-10" style="animation-delay:-9s"></div>
|
|
<div class="orb w-[300px] h-[300px] bg-blue-600/10 bottom-10 right-10" style="animation-delay:-15s"></div>
|
|
|
|
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
|
|
<div class="reveal inline-flex items-center gap-2 px-4 py-1.5 rounded-full glass text-xs font-medium dark:text-blue-300 text-blue-600 mb-6">
|
|
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
|
|
Limited free access spots available
|
|
</div>
|
|
|
|
<h2 class="reveal reveal-d1 text-3xl sm:text-4xl lg:text-5xl xl:text-6xl font-black mb-6 leading-tight">
|
|
<span class="gradient-text-white">Stop losing leads to</span><br>
|
|
<span class="gradient-text">green bubbles.</span>
|
|
</h2>
|
|
|
|
<p class="reveal reveal-d2 dark:text-white/50 text-gray-500 max-w-xl mx-auto text-base sm:text-lg mb-10 leading-relaxed">
|
|
Join 200+ agencies already using iMessage to close more deals. Get free access to BlueShift and transform your outreach.
|
|
</p>
|
|
|
|
<!-- Opt-in Form -->
|
|
<form class="reveal reveal-d3 flex flex-col gap-3 max-w-md mx-auto mb-4" onsubmit="handleSubmit(event, this)">
|
|
<input type="text" required placeholder="Your name" class="email-input w-full px-5 py-4 rounded-xl dark:bg-white/5 bg-gray-50 border dark:border-white/10 border-gray-200 dark:text-white text-gray-900 text-sm focus:outline-none transition-all placeholder:text-gray-400">
|
|
<div class="flex flex-col sm:flex-row gap-3">
|
|
<input type="email" required placeholder="Email address" class="email-input flex-1 px-5 py-4 rounded-xl dark:bg-white/5 bg-gray-50 border dark:border-white/10 border-gray-200 dark:text-white text-gray-900 text-sm focus:outline-none transition-all placeholder:text-gray-400">
|
|
<input type="tel" required placeholder="Phone number" class="email-input sm:w-40 px-5 py-4 rounded-xl dark:bg-white/5 bg-gray-50 border dark:border-white/10 border-gray-200 dark:text-white text-gray-900 text-sm focus:outline-none transition-all placeholder:text-gray-400">
|
|
</div>
|
|
<button type="submit" class="glow-btn text-white font-semibold px-8 py-4 rounded-xl text-sm whitespace-nowrap pulse-ring w-full sm:w-auto">
|
|
Get Free Access →
|
|
</button>
|
|
</form>
|
|
<p class="reveal reveal-d4 text-xs dark:text-white/30 text-gray-400">🔒 No spam. Unsubscribe anytime. Your email is safe with us.</p>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- ========================================== -->
|
|
<!-- ===== SECTION 11: FOOTER ===== -->
|
|
<!-- ========================================== -->
|
|
<footer class="relative border-t dark:border-white/5 border-gray-100 py-12 sm:py-16" style="z-index:5">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8 sm:gap-12 mb-12">
|
|
<div class="sm:col-span-2 lg:col-span-1">
|
|
<a href="#" class="flex items-center gap-2 mb-4">
|
|
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-500 to-imsg-cyan flex items-center justify-center">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>
|
|
</div>
|
|
<span class="text-xl font-bold gradient-text">BlueShift</span>
|
|
</a>
|
|
<p class="text-sm dark:text-white/40 text-gray-500 leading-relaxed">iMessage integration for GoHighLevel. Send blue bubbles, close more deals.</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-sm font-semibold dark:text-white text-gray-900 mb-4">Product</h4>
|
|
<ul class="space-y-2.5">
|
|
<li><a href="#features" class="text-sm dark:text-white/40 text-gray-500 hover:text-blue-500 transition-colors">Features</a></li>
|
|
<li><a href="#pricing" class="text-sm dark:text-white/40 text-gray-500 hover:text-blue-500 transition-colors">Pricing</a></li>
|
|
<li><a href="#how-it-works" class="text-sm dark:text-white/40 text-gray-500 hover:text-blue-500 transition-colors">How It Works</a></li>
|
|
<li><a href="#faq" class="text-sm dark:text-white/40 text-gray-500 hover:text-blue-500 transition-colors">FAQ</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-sm font-semibold dark:text-white text-gray-900 mb-4">Resources</h4>
|
|
<ul class="space-y-2.5">
|
|
<li><a href="#" class="text-sm dark:text-white/40 text-gray-500 hover:text-blue-500 transition-colors">Documentation</a></li>
|
|
<li><a href="#" class="text-sm dark:text-white/40 text-gray-500 hover:text-blue-500 transition-colors">API Reference</a></li>
|
|
<li><a href="#" class="text-sm dark:text-white/40 text-gray-500 hover:text-blue-500 transition-colors">Status Page</a></li>
|
|
<li><a href="#" class="text-sm dark:text-white/40 text-gray-500 hover:text-blue-500 transition-colors">Changelog</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-sm font-semibold dark:text-white text-gray-900 mb-4">Legal</h4>
|
|
<ul class="space-y-2.5">
|
|
<li><a href="#" class="text-sm dark:text-white/40 text-gray-500 hover:text-blue-500 transition-colors">Privacy Policy</a></li>
|
|
<li><a href="#" class="text-sm dark:text-white/40 text-gray-500 hover:text-blue-500 transition-colors">Terms of Service</a></li>
|
|
<li><a href="#" class="text-sm dark:text-white/40 text-gray-500 hover:text-blue-500 transition-colors">Cookie Policy</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="border-t dark:border-white/5 border-gray-100 pt-8 flex flex-col sm:flex-row items-center justify-between gap-4">
|
|
<p class="text-xs dark:text-white/30 text-gray-400">© 2025 BlueShift by CuratedConnector. Naples Curated LLC. All rights reserved.</p>
|
|
<div class="flex items-center gap-4">
|
|
<a href="#" class="dark:text-white/30 text-gray-400 hover:text-blue-500 transition-colors"><i data-lucide="twitter" class="w-4 h-4"></i></a>
|
|
<a href="#" class="dark:text-white/30 text-gray-400 hover:text-blue-500 transition-colors"><i data-lucide="linkedin" class="w-4 h-4"></i></a>
|
|
<a href="#" class="dark:text-white/30 text-gray-400 hover:text-blue-500 transition-colors"><i data-lucide="youtube" class="w-4 h-4"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
<!-- ========================================== -->
|
|
<!-- ===== JAVASCRIPT ===== -->
|
|
<!-- ========================================== -->
|
|
<script>
|
|
// ===== INIT =====
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
lucide.createIcons();
|
|
initAll();
|
|
});
|
|
|
|
function initAll() {
|
|
initParticles();
|
|
initScrollProgress();
|
|
initCursor();
|
|
initTheme();
|
|
initNavbar();
|
|
initMobileMenu();
|
|
initRevealSystem();
|
|
initChatDemo();
|
|
initStatCounters();
|
|
initComparisonSlider();
|
|
initTestimonialCarousel();
|
|
initPhone3D();
|
|
initRippleButtons();
|
|
}
|
|
|
|
// ===== PARTICLE BACKGROUND =====
|
|
function initParticles() {
|
|
const canvas = document.getElementById('particles-canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
let particles = [];
|
|
const count = window.innerWidth < 768 ? 30 : 60;
|
|
|
|
function resize() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
resize();
|
|
window.addEventListener('resize', resize);
|
|
|
|
for (let i = 0; i < count; i++) {
|
|
particles.push({
|
|
x: Math.random() * canvas.width,
|
|
y: Math.random() * canvas.height,
|
|
r: Math.random() * 2 + 0.5,
|
|
dx: (Math.random() - 0.5) * 0.3,
|
|
dy: (Math.random() - 0.5) * 0.3,
|
|
opacity: Math.random() * 0.5 + 0.1
|
|
});
|
|
}
|
|
|
|
function animate() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
const isDark = document.documentElement.classList.contains('dark');
|
|
particles.forEach(p => {
|
|
p.x += p.dx;
|
|
p.y += p.dy;
|
|
if (p.x < 0 || p.x > canvas.width) p.dx *= -1;
|
|
if (p.y < 0 || p.y > canvas.height) p.dy *= -1;
|
|
ctx.beginPath();
|
|
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
|
|
ctx.fillStyle = isDark
|
|
? `rgba(0, 122, 255, ${p.opacity})`
|
|
: `rgba(0, 122, 255, ${p.opacity * 0.5})`;
|
|
ctx.fill();
|
|
});
|
|
requestAnimationFrame(animate);
|
|
}
|
|
animate();
|
|
}
|
|
|
|
// ===== SCROLL PROGRESS BAR =====
|
|
function initScrollProgress() {
|
|
const bar = document.getElementById('scrollProgress');
|
|
window.addEventListener('scroll', () => {
|
|
const h = document.documentElement.scrollHeight - window.innerHeight;
|
|
bar.style.width = (window.scrollY / h * 100) + '%';
|
|
});
|
|
}
|
|
|
|
// ===== CUSTOM CURSOR =====
|
|
function initCursor() {
|
|
const cursor = document.getElementById('cursor');
|
|
if (!cursor || window.innerWidth < 768) return;
|
|
let mx = 0, my = 0, cx = 0, cy = 0;
|
|
document.addEventListener('mousemove', e => { mx = e.clientX; my = e.clientY; });
|
|
(function loop() {
|
|
cx += (mx - cx) * 0.15;
|
|
cy += (my - cy) * 0.15;
|
|
cursor.style.left = cx - 10 + 'px';
|
|
cursor.style.top = cy - 10 + 'px';
|
|
requestAnimationFrame(loop);
|
|
})();
|
|
document.querySelectorAll('a, button, input, .glass-card, .faq-toggle').forEach(el => {
|
|
el.addEventListener('mouseenter', () => cursor.classList.add('hover'));
|
|
el.addEventListener('mouseleave', () => cursor.classList.remove('hover'));
|
|
});
|
|
}
|
|
|
|
// ===== THEME TOGGLE =====
|
|
function initTheme() {
|
|
const toggle = document.getElementById('themeToggle');
|
|
const html = document.documentElement;
|
|
if (localStorage.getItem('theme') === 'light') html.classList.remove('dark');
|
|
else html.classList.add('dark');
|
|
toggle.addEventListener('click', () => {
|
|
html.classList.toggle('dark');
|
|
localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
|
|
lucide.createIcons();
|
|
});
|
|
}
|
|
|
|
// ===== NAVBAR SCROLL (shrink + blur) =====
|
|
function initNavbar() {
|
|
const nav = document.getElementById('navbar');
|
|
const inner = document.getElementById('navInner');
|
|
window.addEventListener('scroll', () => {
|
|
if (window.scrollY > 50) {
|
|
nav.classList.add('glass');
|
|
if (inner) inner.style.height = '56px';
|
|
} else {
|
|
nav.classList.remove('glass');
|
|
if (inner) inner.style.height = '';
|
|
}
|
|
});
|
|
}
|
|
|
|
// ===== MOBILE MENU =====
|
|
function initMobileMenu() {
|
|
const hamburger = document.getElementById('hamburger');
|
|
const menu = document.getElementById('mobileMenu');
|
|
hamburger.addEventListener('click', () => {
|
|
hamburger.classList.toggle('active');
|
|
menu.classList.toggle('open');
|
|
});
|
|
menu.querySelectorAll('a').forEach(l => l.addEventListener('click', () => {
|
|
hamburger.classList.remove('active');
|
|
menu.classList.remove('open');
|
|
}));
|
|
}
|
|
|
|
// ===== REVEAL SYSTEM (IntersectionObserver — bulletproof) =====
|
|
function initRevealSystem() {
|
|
const els = document.querySelectorAll('.reveal');
|
|
els.forEach(el => el.classList.add('will-reveal'));
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('revealed');
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
|
|
|
|
els.forEach(el => observer.observe(el));
|
|
|
|
// GSAP enhancement (non-blocking)
|
|
if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') {
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
gsap.utils.toArray('section').forEach(sec => {
|
|
sec.querySelectorAll('.orb').forEach(orb => {
|
|
gsap.to(orb, {
|
|
y: -60,
|
|
scrollTrigger: { trigger: sec, start: 'top bottom', end: 'bottom top', scrub: 1 }
|
|
});
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
// ===== CHAT DEMO =====
|
|
function initChatDemo() {
|
|
const msgs = document.querySelectorAll('.chat-msg');
|
|
msgs.forEach(m => { m.style.opacity = '0'; m.style.transform = 'translateY(10px)'; });
|
|
function show() {
|
|
msgs.forEach(m => {
|
|
const delay = parseInt(m.dataset.delay) || 0;
|
|
setTimeout(() => {
|
|
m.style.transition = 'all .4s cubic-bezier(.4,0,.2,1)';
|
|
m.style.opacity = '1';
|
|
m.style.transform = 'translateY(0)';
|
|
}, delay + 1000);
|
|
});
|
|
}
|
|
show();
|
|
setInterval(() => {
|
|
msgs.forEach(m => { m.style.transition = 'all .3s ease'; m.style.opacity = '0'; m.style.transform = 'translateY(10px)'; });
|
|
setTimeout(show, 500);
|
|
}, 12000);
|
|
}
|
|
|
|
// ===== STAT COUNTERS =====
|
|
function initStatCounters() {
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const el = entry.target;
|
|
const target = parseFloat(el.dataset.target);
|
|
const prefix = el.dataset.prefix || '';
|
|
const suffix = el.dataset.suffix || '';
|
|
const isDecimal = el.dataset.decimal === 'true';
|
|
const duration = 2000;
|
|
const start = performance.now();
|
|
|
|
function tick(now) {
|
|
const elapsed = now - start;
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
const eased = 1 - Math.pow(1 - progress, 3);
|
|
const val = target * eased;
|
|
if (target === 0) {
|
|
el.textContent = prefix + '0' + suffix;
|
|
} else if (isDecimal) {
|
|
el.textContent = prefix + val.toFixed(1) + suffix;
|
|
} else {
|
|
el.textContent = prefix + Math.round(val) + suffix;
|
|
}
|
|
if (progress < 1) requestAnimationFrame(tick);
|
|
}
|
|
requestAnimationFrame(tick);
|
|
observer.unobserve(el);
|
|
}
|
|
});
|
|
}, { threshold: 0.5 });
|
|
|
|
document.querySelectorAll('.stat-number').forEach(el => observer.observe(el));
|
|
}
|
|
|
|
// ===== COMPARISON SLIDER =====
|
|
function initComparisonSlider() {
|
|
const slider = document.getElementById('compSlider');
|
|
if (!slider) return;
|
|
const handle = document.getElementById('compHandle');
|
|
const line = document.getElementById('compLine');
|
|
const right = document.getElementById('compRight');
|
|
let isDragging = false;
|
|
|
|
function setPosition(x) {
|
|
const rect = slider.getBoundingClientRect();
|
|
let pct = ((x - rect.left) / rect.width) * 100;
|
|
pct = Math.max(5, Math.min(95, pct));
|
|
handle.style.left = pct + '%';
|
|
line.style.left = pct + '%';
|
|
right.style.width = (100 - pct) + '%';
|
|
}
|
|
|
|
function onDown(e) {
|
|
isDragging = true;
|
|
e.preventDefault();
|
|
setPosition(e.touches ? e.touches[0].clientX : e.clientX);
|
|
}
|
|
function onMove(e) {
|
|
if (!isDragging) return;
|
|
setPosition(e.touches ? e.touches[0].clientX : e.clientX);
|
|
}
|
|
function onUp() { isDragging = false; }
|
|
|
|
slider.addEventListener('mousedown', onDown);
|
|
slider.addEventListener('touchstart', onDown, { passive: false });
|
|
window.addEventListener('mousemove', onMove);
|
|
window.addEventListener('touchmove', onMove, { passive: false });
|
|
window.addEventListener('mouseup', onUp);
|
|
window.addEventListener('touchend', onUp);
|
|
}
|
|
|
|
// ===== TESTIMONIAL CAROUSEL =====
|
|
let carouselIndex = 0;
|
|
let carouselAuto;
|
|
|
|
function initTestimonialCarousel() {
|
|
updateCarousel();
|
|
carouselAuto = setInterval(() => moveCarousel(1), 5000);
|
|
document.querySelectorAll('#carouselDots button').forEach(dot => {
|
|
dot.addEventListener('click', () => {
|
|
carouselIndex = parseInt(dot.dataset.index);
|
|
updateCarousel();
|
|
resetAutoCarousel();
|
|
});
|
|
});
|
|
}
|
|
|
|
function moveCarousel(dir) {
|
|
const total = document.querySelectorAll('#testimonialTrack > div').length;
|
|
const visible = window.innerWidth >= 1024 ? 3 : window.innerWidth >= 640 ? 2 : 1;
|
|
const maxIndex = total - visible;
|
|
carouselIndex = Math.max(0, Math.min(maxIndex, carouselIndex + dir));
|
|
updateCarousel();
|
|
resetAutoCarousel();
|
|
}
|
|
|
|
function updateCarousel() {
|
|
const track = document.getElementById('testimonialTrack');
|
|
const cards = document.querySelectorAll('#testimonialTrack > div');
|
|
if (!cards.length) return;
|
|
const cardWidth = cards[0].offsetWidth;
|
|
track.style.transform = `translateX(-${carouselIndex * cardWidth}px)`;
|
|
document.querySelectorAll('#carouselDots button').forEach((dot, i) => {
|
|
dot.className = i === carouselIndex
|
|
? 'w-2.5 h-2.5 rounded-full bg-blue-500 transition-all cursor-pointer'
|
|
: 'w-2.5 h-2.5 rounded-full dark:bg-white/20 bg-gray-300 transition-all cursor-pointer';
|
|
});
|
|
}
|
|
|
|
function resetAutoCarousel() {
|
|
clearInterval(carouselAuto);
|
|
carouselAuto = setInterval(() => moveCarousel(1), 5000);
|
|
}
|
|
|
|
// ===== 3D PHONE PARALLAX =====
|
|
function initPhone3D() {
|
|
const container = document.getElementById('phoneContainer');
|
|
const phone = document.getElementById('phoneMockup');
|
|
if (!container || !phone || window.innerWidth < 768) return;
|
|
|
|
container.addEventListener('mousemove', e => {
|
|
const rect = container.getBoundingClientRect();
|
|
const x = (e.clientX - rect.left) / rect.width - 0.5;
|
|
const y = (e.clientY - rect.top) / rect.height - 0.5;
|
|
phone.style.transform = `rotateY(${x * 12}deg) rotateX(${-y * 8}deg)`;
|
|
});
|
|
container.addEventListener('mouseleave', () => {
|
|
phone.style.transform = 'rotateY(0deg) rotateX(0deg)';
|
|
});
|
|
}
|
|
|
|
// ===== RIPPLE EFFECT ON GLOW BUTTONS =====
|
|
function initRippleButtons() {
|
|
document.querySelectorAll('.glow-btn').forEach(btn => {
|
|
btn.addEventListener('click', function(e) {
|
|
const ripple = document.createElement('span');
|
|
ripple.classList.add('ripple');
|
|
const rect = this.getBoundingClientRect();
|
|
ripple.style.left = (e.clientX - rect.left) + 'px';
|
|
ripple.style.top = (e.clientY - rect.top) + 'px';
|
|
ripple.style.width = ripple.style.height = Math.max(rect.width, rect.height) + 'px';
|
|
this.appendChild(ripple);
|
|
setTimeout(() => ripple.remove(), 600);
|
|
});
|
|
});
|
|
}
|
|
|
|
// ===== PRICING TOGGLE =====
|
|
let pricingAnnual = false;
|
|
function togglePricing() {
|
|
pricingAnnual = !pricingAnnual;
|
|
const toggle = document.getElementById('pricingToggle');
|
|
const badge = document.getElementById('savingsBadge');
|
|
toggle.classList.toggle('active', pricingAnnual);
|
|
badge.style.opacity = pricingAnnual ? '1' : '0';
|
|
document.getElementById('selfHostedPrice').textContent = '$0';
|
|
document.getElementById('selfHostedPeriod').textContent = pricingAnnual ? '/year' : '/month';
|
|
document.getElementById('hostedPrice').textContent = '$—';
|
|
document.getElementById('hostedPeriod').textContent = pricingAnnual ? '/year' : '/month';
|
|
}
|
|
|
|
// ===== FAQ ACCORDION =====
|
|
function toggleFaq(btn) {
|
|
const item = btn.closest('.faq-item');
|
|
const answer = item.querySelector('.faq-answer');
|
|
const chevron = item.querySelector('.faq-chevron');
|
|
const isOpen = answer.classList.contains('open');
|
|
document.querySelectorAll('.faq-answer').forEach(a => a.classList.remove('open'));
|
|
document.querySelectorAll('.faq-chevron').forEach(c => c.classList.remove('open'));
|
|
if (!isOpen) { answer.classList.add('open'); chevron.classList.add('open'); }
|
|
}
|
|
|
|
// ===== FORM HANDLER =====
|
|
function handleSubmit(e, form) {
|
|
e.preventDefault();
|
|
const email = form.querySelector('input[type="email"]').value;
|
|
const btn = form.querySelector('button');
|
|
btn.innerHTML = '<span class="inline-flex items-center gap-2"><svg class="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" class="opacity-25"/><path fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" class="opacity-75"/></svg> Sending...</span>';
|
|
btn.disabled = true;
|
|
setTimeout(() => {
|
|
form.innerHTML = `
|
|
<div class="form-success flex items-center gap-3 px-6 py-4 rounded-xl bg-green-500/10 border border-green-500/20 w-full">
|
|
<svg class="w-6 h-6 text-green-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
|
<div><p class="text-sm font-semibold dark:text-white text-gray-900">You're on the list! 🎉</p><p class="text-xs dark:text-white/50 text-gray-500">We'll reach out to ${email} soon.</p></div>
|
|
</div>`;
|
|
}, 1500);
|
|
}
|
|
|
|
// ===== SMOOTH SCROLL =====
|
|
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
|
a.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const t = document.querySelector(this.getAttribute('href'));
|
|
if (t) t.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |