1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 7 <!-- ââ SEO ââ --> 8 <title>Pushify â Unlimited FREE Web Push Notifications</title> 9 <meta name="description" content="Send unlimited web push notifications for free. Campaigns, flows, RSS automations, segmentation, PWA builder & full API â all in one platform. Start in minutes." /> 10 <meta name="keywords" content="web push notifications, push notifications, free push notifications, browser notifications, subscriber campaigns, RSS push" /> 11 <link rel="canonical" href="https://pushify.com/" /> 12 13 <!-- ââ Open Graph ââ --> 14 <meta property="og:type" content="website" /> 15 <meta property="og:url" content="https://pushify.com/" /> 16 <meta property="og:title" content="Pushify â Unlimited FREE Web Push Notifications" /> 17 <meta property="og:description" content="Send unlimited push notifications to your subscribers. Campaigns, flows, RSS automations, segmentation, PWA builder & full API. Free forever plan." /> 18 <meta property="og:image" content="https://pushify.com/uploads/main/4c2b584f6f0013e380a5b53a3a1e0bea.png" /> 19 <meta property="og:site_name" content="Pushify" /> 20 21 <!-- ââ Twitter Card ââ --> 22 <meta name="twitter:card" content="summary_large_image" /> 23 <meta name="twitter:site" content="@PushifyTeam" /> 24 <meta name="twitter:title" content="Pushify â Unlimited FREE Web Push Notifications" /> 25 <meta name="twitter:description" content="Send unlimited push notifications for free. Campaigns, flows, RSS automations & full API." /> 26 <meta name="twitter:image" content="https://pushify.com/uploads/main/4c2b584f6f0013e380a5b53a3a1e0bea.png" /> 27 28 29 30 <!-- ââ Favicon ââ --> 31 <link rel="icon" type="image/png" href="https://pushify.com/uploads/main/ae275a10d188e7cd52f4b1fee08c29fe.png" /> 32 <link rel="apple-touch-icon" href="https://pushify.com/uploads/main/ae275a10d188e7cd52f4b1fee08c29fe.png" /> 33 34 <link rel="preconnect" href="https://fonts.googleapis.com" /> 35 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> 36 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" /> 37 <!-- ââ CookieConsent (vanilla-cookieconsent v3) ââ --> 38 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanilla-cookieconsent@3/dist/cookieconsent.css" /> 39
39<script src="https://cdn.jsdelivr.net/npm/vanilla-cookieconsent@3/dist/cookieconsent.umd.js"></script>
39 40 41 <style> 42 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } 43 44 /* ââ LIGHT THEME (default) ââ */ 45 :root { 46 --brand: #2E90B3; 47 --brand-light: #3AADD4; 48 --brand-dark: #1E6A8A; 49 --brand-gold: #F5C518; 50 --brand-glow: rgba(46,144,179,0.22); 51 --bg: #FFFFFF; 52 --bg-alt: #F2F8FB; 53 --bg-card: #E8F3F8; 54 --bg-card-hover: #DCEDF5; 55 --border: rgba(46,144,179,0.14); 56 --border-hover: rgba(46,144,179,0.5); 57 --text: #0D2B38; 58 --text-muted: #3E6878; 59 --text-faint: #5A8FA0; 60 --radius: 12px; 61 --radius-lg: 20px; 62 --shadow: 0 4px 24px rgba(0,0,0,0.07); 63 --shadow-brand: 0 4px 32px rgba(46,144,179,0.25); 64 --nav-bg: rgba(255,255,255,0.88); 65 --mobile-nav-bg: rgba(255,255,255,0.98); 66 --hero-grid: rgba(46,144,179,0.08); 67 --hero-h1-from: #0D2B38; 68 --hero-h1-to: rgba(13,43,56,0.5); 69 --code-bg: #0D2B38; 70 --code-border: rgba(255,255,255,0.08); 71 --code-muted: #7AABB8; 72 } 73 74 /* ââ DARK THEME ââ */ 75 html.dark { 76 --brand: #3AADD4; 77 --brand-light: #50C3EC; 78 --brand-dark: #2E90B3; 79 --brand-gold: #F5C518; 80 --brand-glow: rgba(58,173,212,0.3); 81 --bg: #071820; 82 --bg-alt: #0D2535; 83 --bg-card: #122E40; 84 --bg-card-hover: #183850; 85 --border: rgba(58,173,212,0.12); 86 --border-hover: rgba(58,173,212,0.45); 87 --text: #E8F4F8; 88 --text-muted: #7AABB8; 89 --text-faint: #3A6070; 90 --shadow: 0 4px 24px rgba(0,0,0,0.4); 91 --shadow-brand: 0 4px 32px rgba(58,173,212,0.3); 92 --nav-bg: rgba(7,24,32,0.88); 93 --mobile-nav-bg: rgba(7,24,32,0.98); 94 --hero-grid: rgba(58,173,212,0.07); 95 --hero-h1-from: #E8F4F8; 96 --hero-h1-to: rgba(232,244,248,0.5); 97 --code-bg: #071820; 98 --code-border: rgba(255,255,255,0.07); 99 --code-muted: #7AABB8; 100 } 101 102 html { scroll-behavior: smooth; } 103 body { 104 font-family: 'Inter', system-ui, sans-serif; 105 background: var(--bg); color: var(--text); 106 line-height: 1.6; overflow-x: hidden; 107 transition: background 0.3s, color 0.3s; 108 } 109 110 /* ââ UTILITIES ââ */ 111 .container { max-width: 1160px; margin: 0 auto; padding: 0 24px; } 112 113 .badge { 114 display: inline-flex; align-items: center; gap: 6px; 115 background: rgba(46,144,179,0.1); border: 1px solid rgba(46,144,179,0.3); 116 color: var(--brand); font-size: 12px; font-weight: 600; 117 padding: 4px 12px; border-radius: 100px; letter-spacing: 0.05em; text-transform: uppercase; 118 } 119 .badge::before { content: 'â'; font-size: 8px; animation: pulse 2s infinite; } 120 @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} } 121 122 .btn { 123 display: inline-flex; align-items: center; gap: 8px; 124 font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; 125 border: none; border-radius: var(--radius); padding: 13px 26px; 126 text-decoration: none; transition: all 0.2s ease; white-space: nowrap; 127 } 128 .btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-brand); } 129 .btn-primary:hover { background: var(--brand-light); transform: translateY(-1px); box-shadow: 0 8px 40px rgba(46,144,179,0.4); } 130 .btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); } 131 .btn-ghost:hover { border-color: var(--border-hover); color: var(--text); background: var(--bg-card); } 132 .btn-large { padding: 16px 34px; font-size: 16px; border-radius: 14px; } 133 .btn-sm { padding: 9px 18px; font-size: 14px; } 134 135 /* ââ NAV ââ */ 136 nav { 137 position: fixed; top: 0; left: 0; right: 0; z-index: 100; 138 background: var(--nav-bg); backdrop-filter: blur(20px); 139 border-bottom: 1px solid var(--border); 140 transition: background 0.3s, border-color 0.3s; 141 } 142 .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } 143 .logo { text-decoration: none; display: flex; align-items: center; } 144 .logo-icon { height: 34px; display: flex; align-items: center; }
145 .logo-icon img { height: 100%; width: auto; object-fit: contain; display: block; } 146 .nav-links { display: flex; align-items: center; gap: 4px; } 147 .nav-links a { 148 color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 500; 149 padding: 8px 14px; border-radius: 8px; transition: all 0.2s; 150 } 151 .nav-links a:hover { color: var(--text); background: var(--bg-card); } 152 .nav-actions { display: flex; align-items: center; gap: 10px; } 153 .nav-signin { color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 14px; } 154 .nav-signin:hover { color: var(--text); } 155 .nav-mobile-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--text); font-size: 22px; } 156 157 158 /* Theme toggle */ 159 .theme-toggle { 160 width: 36px; height: 36px; border-radius: 10px; cursor: pointer; 161 background: var(--bg-card); border: 1px solid var(--border); 162 display: flex; align-items: center; justify-content: center; 163 transition: all 0.2s; flex-shrink: 0; padding: 0; color: var(--text-muted); 164 } 165 .theme-toggle:hover { border-color: var(--border-hover); background: var(--bg-card-hover); color: var(--text); } 166 .theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: all 0.2s; } 167 .icon-moon { display: block; } 168 .icon-sun { display: none; } 169 html.dark .icon-moon { display: none; } 170 html.dark .icon-sun { display: block; } 171 172 /* ââ MOBILE NAV DRAWER ââ */ 173 .mobile-nav-backdrop { 174 position: fixed; inset: 0; z-index: 199; 175 background: rgba(0,0,0,0.45); opacity: 0; pointer-events: none; 176 transition: opacity 0.3s ease; 177 } 178 .mobile-nav-backdrop.open { opacity: 1; pointer-events: all; } 179 .mobile-nav { 180 position: fixed; top: 0; right: 0; bottom: 0; z-index: 200; 181 width: min(300px, 82vw); 182 background: var(--bg); border-left: 1px solid var(--border); 183 display: flex; flex-direction: column; 184 padding: 0; overflow: hidden; 185 transform: translateX(100%); 186 transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); 187 box-shadow: -12px 0 48px rgba(0,0,0,0.12); 188 } 189 .mobile-nav.open { transform: translateX(0); } 190 .mobile-nav-header { 191 display: flex; align-items: center; justify-content: space-between; 192 padding: 18px 20px; border-bottom: 1px solid var(--border); 193 } 194 .mobile-nav-header img { height: 28px; width: auto; } 195 .mobile-nav-links { display: flex; flex-direction: column; padding: 12px 0; flex: 1; } 196 .mobile-nav-links a { 197 font-size: 16px; font-weight: 600; color: var(--text); text-decoration: none; 198 padding: 14px 24px; transition: background 0.15s, color 0.15s; 199 display: flex; align-items: center; gap: 12px; 200 opacity: 0; transform: translateX(16px); 201 transition: background 0.15s, color 0.15s, opacity 0.25s calc(var(--d, 0) * 1ms + 60ms), transform 0.25s calc(var(--d, 0) * 1ms + 60ms); 202 } 203 .mobile-nav.open .mobile-nav-links a { opacity: 1; transform: translateX(0); } 204 .mobile-nav-links a:hover { background: var(--bg-card); color: var(--brand); } 205 .mobile-nav-links a .mnav-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--bg-card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } 206 .mobile-nav-divider { height: 1px; background: var(--border); margin: 8px 24px; } 207 .mobile-nav-footer { padding: 16px 24px; border-top: 1px solid var(--border); } 208 .mobile-nav-close { 209 width: 36px; height: 36px; border-radius: 9px; 210 background: var(--bg-card); border: 1px solid var(--border); 211 display: flex; align-items: center; justify-content: center; 212 cursor: pointer; color: var(--text); font-size: 18px; 213 transition: background 0.2s; 214 } 215 216 /* ââ HERO ââ */ 217 .hero { 218 min-height: 100vh; display: flex; align-items: center; 219 padding: 100px 0 60px; position: relative; overflow: hidden; 220 } 221 .hero-bg { 222 position: absolute; inset: 0; z-index: 0; 223 background: 224 radial-gradient(ellipse 55% 80% at 75% 50%, rgba(46,144,179,0.14) 0%, transparent 65%), 225 radial-gradient(ellipse 55% 55% at 15% 40%, rgba(46,144,179,0.07) 0%, transparent 60%), 226 radial-gradient(ellipse 30% 35% at 85% 85%, rgba(245,197,24,0.06) 0%, transparent 50%); 227 } 228 html.dark .hero-bg { 229 background: 230 radial-gradient(ellipse 55% 80% at 75% 50%, rgba(46,144,179,0.22) 0%, transparent 65%), 231 radial-gradient(ellipse 55% 55% at 15% 40%, rgba(46,144,179,0.10) 0%, transparent 60%), 232 radial-gradient(ellipse 30% 35% at 85% 85%, rgba(245,197,24,0.07) 0%, transparent 50%); 233 } 234 .hero-grid { 235 position: absolute; inset: 0; z-index: 0; 236 background-image: 237 linear-gradient(var(--hero-grid) 1px, transparent 1px), 238 linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px); 239 background-size: 60px 60px; 240 mask-image: radial-gradient(ellipse 100% 80% at 50% 0%, black 0%, transparent 80%); 241 } 242 .hero > .container { position: relative; z-index: 1; } 243 .hero-inner { display: grid; grid-template-columns: 53% 47%; gap: 56px; align-items: center; min-height: calc(100vh - 240px); } 244 245 /* left */ 246 .hero-badge { margin-bottom: 14px; } 247 .hero h1 { 248 font-size: clamp(36px, 4.2vw, 60px); font-weight: 900; 249 line-height: 1.06; letter-spacing: -2px; margin-bottom: 12px; 250 background: linear-gradient(135deg, var(--hero-h1-from) 40%, var(--hero-h1-to)); 251 -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; 252 } 253 .hero-word-swap { 254 display: block; -webkit-text-fill-color: var(--brand); color: var(--brand); 255 transition: opacity 0.28s ease, transform 0.28s ease; 256 } 257 .hero-word-swap.fading { opacity: 0; transform: translateY(8px); } 258 .hero-sub { font-size: 17px; color: var(--text-muted); max-width: 500px; margin: 0 0 14px; line-height: 1.7; } 259 .hero-trust { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } 260 .hero-avatar-stack { display: flex; } 261 .ha { width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid var(--bg); margin-left: -9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; } 262 .ha:first-child { margin-left: 0; } 263 .hero-trust-text { font-size: 13px; color: var(--text-muted); } 264 .hero-trust-text strong { color: var(--text); font-weight: 700; } 265 .hero-stats { 266 display: flex; margin-bottom: 20px; 267 background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; 268 } 269 .hstat { flex: 1; padding: 13px 10px; text-align: center; border-right: 1px solid var(--border); }
270 .hstat:last-child { border-right: none; } 271 .hstat-n { display: block; font-size: 21px; font-weight: 800; color: var(--brand); letter-spacing: -1px; line-height: 1; margin-bottom: 2px; } 272 .hstat-l { font-size: 10px; color: var(--text-faint); font-weight: 500; } 273 .hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } 274 .hero-proof { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--text-faint); } 275 .hero-proof-item { display: flex; align-items: center; gap: 6px; } 276 .proof-check { color: var(--brand); font-weight: 700; } 277 278 /* right â notification demo */ 279 .hero-right { position: relative; display: flex; flex-direction: column; align-items: center; } 280 .hero-right-glow { 281 position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); 282 width: 340px; height: 340px; border-radius: 50%; 283 background: radial-gradient(circle, rgba(46,144,179,0.20) 0%, transparent 70%); 284 pointer-events: none; z-index: 0; 285 animation: glowPulse 4s ease-in-out infinite; 286 } 287 @keyframes glowPulse { 288 0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 0.7; } 289 50% { transform: translate(-50%,-50%) scale(1.18); opacity: 1; } 290 } 291 .notif-demo { position: relative; z-index: 1; width: 100%; max-width: 360px; } 292 .notif-demo-eyebrow { 293 font-size: 10.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; 294 color: var(--text-faint); text-align: center; margin-bottom: 14px; 295 display: flex; align-items: center; justify-content: center; gap: 7px; 296 } 297 .notif-demo-eyebrow::before, .notif-demo-eyebrow::after { content:''; flex:1; height:1px; background: var(--border); } 298 299 /* stacked notification cards */ 300 .notif-stack { position: relative; height: 182px; margin-bottom: 12px; } 301 .ns-card { 302 position: absolute; left: 0; right: 0; 303 background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; 304 border-top: 3px solid var(--ns-accent, var(--brand)); 305 padding: 13px 15px; display: flex; gap: 10px; align-items: flex-start; 306 box-shadow: 0 8px 32px rgba(0,0,0,0.09); 307 transition: transform 0.48s cubic-bezier(0.4,0,0.2,1), opacity 0.48s ease, box-shadow 0.48s ease; 308 } 309 html.dark .ns-card { box-shadow: 0 8px 32px rgba(0,0,0,0.35); } 310 .ns-card.pos-front { transform: translateY(0) scale(1); z-index: 3; opacity: 1; } 311 .ns-card.pos-mid { transform: translateY(13px) scale(0.95); z-index: 2; opacity: 0.60; } 312 .ns-card.pos-back { transform: translateY(24px) scale(0.90); z-index: 1; opacity: 0.28; } 313 .ns-card.exiting { transform: translateY(-32px) scale(0.96); z-index: 4; opacity: 0; } 314 .ns-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex-shrink: 0; margin-top: 5px; animation: livePulse 1.8s ease infinite; } 315 @keyframes livePulse { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0.45)} 60%{box-shadow:0 0 0 5px rgba(34,197,94,0)} } 316 .ns-icon { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; background: var(--bg-alt); border: 1px solid transparent; } 317 .ns-body { flex: 1; min-width: 0; } 318 .ns-meta { font-size: 10px; color: var(--text-faint); margin-bottom: 3px; display: flex; align-items: center; justify-content: space-between; } 319 .ns-site { font-weight: 600; color: var(--text-muted); } 320 .ns-title { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 3px; line-height: 1.35; } 321 .ns-desc { font-size: 11px; color: var(--text-muted); line-height: 1.45; margin-bottom: 9px; } 322 .ns-btns { display: flex; gap: 6px; } 323 .ns-btn { font-size: 10.5px; font-weight: 600; padding: 4px 10px; border-radius: 5px; border: 1px solid var(--border); background: var(--bg-alt); color: var(--text-muted); cursor: default; } 324 .ns-btn.ns-primary { background: var(--ns-accent, var(--brand)); border-color: var(--ns-accent, var(--brand)); color: #fff; } 325 326 /* progress + dots */ 327 .notif-progress { height: 2px; background: var(--border); border-radius: 2px; margin-bottom: 12px; overflow: hidden; } 328 .notif-progress-bar { height: 100%; background: var(--brand); border-radius: 2px; width: 0%; } 329 .notif-dots { display: flex; gap: 5px; justify-content: center; margin-bottom: 18px; } 330 .nd { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: all 0.3s; } 331 .nd.active { background: var(--brand); width: 18px; border-radius: 3px; } 332 333 /* industry tags */ 334 .hero-tags { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; } 335 .hero-tag { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; background: var(--bg-alt); border: 1px solid var(--border); color: var(--text-faint); } 336 337 /* ââ BROWSER TAGS ââ */ 338 .browsers-section { padding: 20px 0 64px; text-align: center; } 339 .browsers-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 28px; } 340 .browsers-list { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; } 341 .browser-logo { display: flex; flex-direction: column; align-items: center; gap: 9px; transition: transform 0.2s; cursor: default; } 342 .browser-logo:hover { transform: translateY(-3px); } 343 .browser-logo svg { width: 44px; height: 44px; border-radius: 10px; } 344 .browser-logo span { font-size: 12px; font-weight: 500; color: var(--text-muted); } 345 .browsers-platforms { font-size: 12px; color: var(--text-faint); margin-top: 24px; letter-spacing: 0.06em; } 346 347 /* ââ SECTION COMMON ââ */ 348 section { padding: 96px 0; } 349 .section-header { text-align: center; margin-bottom: 64px; } 350 .section-header .badge { margin-bottom: 16px; } 351 .section-header h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -1px; margin-bottom: 16px; line-height: 1.15; } 352 .section-header p { font-size: 17px; color: var(--text-muted); max-width: 540px; margin: 0 auto; } 353
354 /* ââ FEATURES (Zepio-style sticky stack) ââ */ 355 .features-section { background: var(--bg-alt); } 356 .features-sticky-wrap { position: relative; } 357 .features-sticky-title { 358 text-align: center; padding: 0 0 56px; 359 } 360 .features-sticky-title h2 { 361 font-size: clamp(26px, 3.5vw, 40px); font-weight: 900; letter-spacing: -1px; 362 background: linear-gradient(135deg, var(--hero-h1-from) 40%, var(--hero-h1-to)); 363 -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; 364 } 365 .features-sticky-title p { font-size: 16px; color: var(--text-muted); margin-top: 8px; } 366 367 .feature-stack { display: flex; flex-direction: column; gap: 0; padding: 24px 0 120px; } 368 369 .feature-panel { 370 position: sticky; top: 80px; 371 border-radius: 28px; overflow: hidden; 372 display: grid; grid-template-columns: 1fr 1fr; 373 min-height: 340px; margin-bottom: 24px; 374 box-shadow: 0 8px 40px rgba(0,0,0,0.09); 375 transition: box-shadow 0.3s; 376 } 377 .feature-panel:hover { box-shadow: 0 16px 60px rgba(46,144,179,0.18); } 378 .feature-panel:nth-child(odd) { transform: rotate(-0.6deg); } 379 .feature-panel:nth-child(even) { transform: rotate(0.6deg); } 380 .feature-stack .feature-panel:nth-child(1) { z-index: 1; } 381 .feature-stack .feature-panel:nth-child(2) { z-index: 2; } 382 .feature-stack .feature-panel:nth-child(3) { z-index: 3; } 383 .feature-stack .feature-panel:nth-child(4) { z-index: 4; } 384 .feature-stack .feature-panel:nth-child(5) { z-index: 5; } 385 .feature-stack .feature-panel:nth-child(6) { z-index: 6; } 386 .feature-stack .feature-panel:nth-child(7) { z-index: 7; } 387 .feature-stack .feature-panel:nth-child(8) { z-index: 8; } 388 .feature-stack .feature-panel:nth-child(9) { z-index: 9; } 389 390 .feature-panel-text { 391 padding: 52px 48px; display: flex; flex-direction: column; justify-content: center; 392 } 393 .feature-panel-visual { 394 display: flex; align-items: center; justify-content: center; 395 position: relative; overflow: hidden; padding: 24px; 396 } 397 .feature-panel-visual::before { 398 content: ''; position: absolute; inset: 0; 399 background: rgba(255,255,255,0.04); 400 } 401 .fp-svg { width: 88%; max-width: 340px; height: auto; position: relative; z-index: 1; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.18)); } 402 .fp-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; } 403 .feature-panel-text h3 { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 14px; line-height: 1.25; } 404 .feature-panel-text p { font-size: 15px; line-height: 1.7; margin-bottom: 20px; opacity: 0.8; } 405 .fp-list { list-style: none; display: flex; flex-direction: column; gap: 8px; } 406 .fp-list li { font-size: 14px; display: flex; align-items: flex-start; gap: 9px; opacity: 0.85; } 407 .fp-list li::before { content: 'â'; font-weight: 800; font-size: 12px; flex-shrink: 0; margin-top: 2px; } 408 409 /* Panel color themes */ 410 .fp-teal { background: linear-gradient(135deg, #E0F4FB 0%, #C8EAF5 100%); color: #0D3A50; } 411 .fp-teal .fp-tag { color: #2E90B3; } 412 .fp-teal .fp-list li::before { color: #2E90B3; } 413 .fp-teal .feature-panel-visual { background: linear-gradient(135deg, #2E90B3 0%, #1E6A8A 100%); } 414 415 .fp-gold { background: linear-gradient(135deg, #FFFBEA 0%, #FFF3C0 100%); color: #3D2E00; } 416 .fp-gold .fp-tag { color: #B8860B; } 417 .fp-gold .fp-list li::before { color: #B8860B; } 418 .fp-gold .feature-panel-visual { background: linear-gradient(135deg, #F5C518 0%, #D4A017 100%); } 419 420 .fp-sky { background: linear-gradient(135deg, #EEF8FF 0%, #D6EFFF 100%); color: #0A2A40; } 421 .fp-sky .fp-tag { color: #0070B8; } 422 .fp-sky .fp-list li::before { color: #0070B8; } 423 .fp-sky .feature-panel-visual { background: linear-gradient(135deg, #0EA5E9 0%, #0078C8 100%); } 424 425 .fp-mint { background: linear-gradient(135deg, #EAFAF5 0%, #C8F0E0 100%); color: #0A3020; } 426 .fp-mint .fp-tag { color: #0E8060; } 427 .fp-mint .fp-list li::before { color: #0E8060; } 428 .fp-mint .feature-panel-visual { background: linear-gradient(135deg, #10B981 0%, #0A7050 100%); } 429 430 .fp-lavender{ background: linear-gradient(135deg, #F4F0FF 0%, #E4D8FF 100%); color: #250A50; } 431 .fp-lavender .fp-tag { color: #7C3AED; } 432 .fp-lavender .fp-list li::before { color: #7C3AED; } 433 .fp-lavender .feature-panel-visual { background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%); } 434 435 .fp-rose { background: linear-gradient(135deg, #FFF0F5 0%, #FFD6E5 100%); color: #40001A; } 436 .fp-rose .fp-tag { color: #D0185A; } 437 .fp-rose .fp-list li::before { color: #D0185A; } 438 .fp-rose .feature-panel-visual { background: linear-gradient(135deg, #F43F8E 0%, #C0185A 100%); } 439 440 .fp-slate { background: linear-gradient(135deg, #F0F4F8 0%, #DCE8F2 100%); color: #0A1A28; } 441 .fp-slate .fp-tag { color: #2E90B3; } 442 .fp-slate .fp-list li::before { color: #2E90B3; } 443 .fp-slate .feature-panel-visual { background: linear-gradient(135deg, #334155 0%, #1E293B 100%); } 444 445 .fp-amber { background: linear-gradient(135deg, #FFF8ED 0%, #FFE8C0 100%); color: #2A1800; } 446 .fp-amber .fp-tag { color: #C07020; } 447 .fp-amber .fp-list li::before { color: #C07020; } 448 .fp-amber .feature-panel-visual { background: linear-gradient(135deg, #F59E0B 0%, #B45309 100%); } 449 450 .fp-cyan { background: linear-gradient(135deg, #E8FFFE 0%, #C0F4F2 100%); color: #001A20; } 451 .fp-cyan .fp-tag { color: #0891B2; } 452 .fp-cyan .fp-list li::before { color: #0891B2; } 453 .fp-cyan .feature-panel-visual { background: linear-gradient(135deg, #06B6D4 0%, #0E7490 100%); } 454 455 html.dark .feature-panel { box-shadow: 0 8px 40px rgba(0,0,0,0.4); } 456 html.dark .fp-teal { background: linear-gradient(135deg, #0D2535 0%, #122E40 100%); color: #C8EAF5; } 457 html.dark .fp-gold { background: linear-gradient(135deg, #1A1200 0%, #2A1E00 100%); color: #FFEAA0; } 458 html.dark .fp-sky { background: linear-gradient(135deg, #071828 0%, #0A2035 100%); color: #C0E8FF; } 459 html.dark .fp-mint { background: linear-gradient(135deg, #051A10 0%, #082818 100%); color: #B0F0D8; } 460 html.dark .fp-lavender { background: linear-gradient(135deg, #120828 0%, #1A0E38 100%); color: #DDD0FF; } 461 html.dark .fp-rose { background: linear-gradient(135deg, #1A0010 0%, #280018 100%); color: #FFCCE0; } 462 html.dark .fp-slate { background: linear-gradient(135deg, #0A1820 0%, #10222E 100%); color: #C0D8E8; } 463 html.dark .fp-amber { background: linear-gradient(135deg, #180E00 0%, #221600 100%); color: #FFE0A0; } 464 html.dark .fp-cyan { background: linear-gradient(135deg, #001820 0%, #002028 100%); color: #A0EEF8; } 465 466 /* ââ INTEGRATIONS ââ */ 467 .integrations-section { padding: 96px 0; } 468 .integrations-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 48px; } 469 .integration-item { 470 background: var(--bg-card); border: 1px solid var(--border); 471 border-radius: var(--radius); padding: 20px 16px; 472 text-align: center; font-size: 13px; font-weight: 500; 473 color: var(--text-muted); transition: all 0.2s; 474 } 475 .integration-item:hover { border-color: var(--border-hover); color: var(--text); transform: translateY(-3px); box-shadow: var(--shadow-brand); } 476 .integration-item .icon { font-size: 26px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; height: 34px; } 477 .integration-item .icon svg { width: 28px; height: 28px; } 478 479 /* ââ API SECTION ââ */ 480 .api-section { background: var(--bg-alt); } 481 .api-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } 482 .api-content .badge { margin-bottom: 20px; } 483 .api-content h2 { font-size: 36px; font-weight: 800; letter-spacing: -1px; margin-bottom: 20px; line-height: 1.2; } 484 .api-content p { font-size: 16px; color: var(--text-muted); margin-bottom: 28px; line-height: 1.7; } 485 .api-endpoints { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; } 486 .api-endpoint { 487 display: flex; align-items: center; gap: 12px; 488 font-size: 13px; color: var(--text-muted); padding: 10px 14px; 489 background: var(--bg-card); border-radius: 8px; border: 1px solid var(--border); 490 } 491 .method { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.05em; } 492 .method-post { background: rgba(46,144,179,0.15); color: var(--brand); } 493 .method-get { background: rgba(16,185,129,0.15); color: #10B981; } 494 .code-block { 495 background: var(--code-bg); border: 1px solid var(--code-border); 496 border-radius: var(--radius-lg); padding: 28px; overflow-x: auto; 497 font-family: 'SF Mono', 'Fira Code', monospace; font-size: 13px; line-height: 1.8; 498 } 499 .code-block pre { color: var(--code-muted); white-space: pre; } 500 .code-key { color: #7EC8E3; } 501 .code-val { color: #C3E88D; } 502 .code-str { color: #F78C6C; } 503 .code-comment { color: #3A6070; } 504 505 /* ââ PRICING ââ */ 506 .pricing-section { padding: 96px 0; } 507 .pricing-toggle { 508 display: flex; align-items: center; justify-content: center; 509 gap: 12px; margin-bottom: 56px; 510 } 511 .toggle-label { font-size: 14px; font-weight: 500; color: var(--text-muted); } 512 .toggle-switch { position: relative; width: 48px;
512 height: 26px; cursor: pointer; } 513 .toggle-switch input { opacity: 0; width: 0; height: 0; } 514 .toggle-track { 515 position: absolute; inset: 0; 516 background: var(--bg-card); border-radius: 100px; border: 1px solid var(--border); transition: all 0.3s; 517 } 518 .toggle-track::after { 519 content: ''; position: absolute; top: 3px; left: 3px; 520 width: 18px; height: 18px; border-radius: 50%; 521 background: var(--text-faint); transition: all 0.3s; 522 } 523 input:checked + .toggle-track { background: var(--brand); border-color: var(--brand); } 524 input:checked + .toggle-track::after { transform: translateX(22px); background: #fff; } 525 .save-badge { 526 background: rgba(245,197,24,0.15); border: 1px solid rgba(245,197,24,0.4); 527 color: #B8860B; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 100px; 528 } 529 html.dark .save-badge { color: var(--brand-gold); } 530 531 .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; } 532 533 .pricing-card { 534 background: var(--bg-card); border: 1px solid var(--border); 535 border-radius: 24px; padding: 36px 32px; position: relative; 536 transition: transform 0.2s, box-shadow 0.2s; 537 } 538 .pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } 539 .pricing-card.popular { 540 background: var(--brand); border-color: var(--brand); 541 box-shadow: 0 12px 48px rgba(46,144,179,0.35); 542 transform: scale(1.04); 543 } 544 .pricing-card.popular:hover { transform: scale(1.04) translateY(-4px); box-shadow: 0 20px 60px rgba(46,144,179,0.45); } 545 .pricing-card.popular * { color: #fff !important; } 546 .pricing-card.popular .plan-cta { background: #fff; color: var(--brand) !important; } 547 .pricing-card.popular .plan-cta:hover { background: rgba(255,255,255,0.9); } 548 .pricing-card.popular .plan-divider { background: rgba(255,255,255,0.25); } 549 .pricing-card.popular .cross { color: rgba(255,255,255,0.4) !important; } 550 551 .popular-badge { 552 position: absolute; top: -14px; left: 50%; transform: translateX(-50%); 553 background: var(--brand-gold); color: #1A1000; 554 font-size: 11px; font-weight: 800; padding: 5px 16px; 555 border-radius: 100px; letter-spacing: 0.06em; text-transform: uppercase; 556 box-shadow: 0 4px 12px rgba(245,197,24,0.4); 557 } 558 .plan-name { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; } 559 .plan-price { display: flex; align-items: flex-end; gap: 4px; margin-bottom: 6px; } 560 .plan-price-amount { font-size: 52px; font-weight: 900; letter-spacing: -2px; line-height: 1; } 561 .plan-price-period { font-size: 14px; color: var(--text-muted); padding-bottom: 8px; } 562 .plan-description { font-size: 14px; color: var(--text-muted); margin-bottom: 24px; line-height: 1.5; } 563 .plan-divider { height: 1px; background: var(--border); margin: 20px 0; } 564 .plan-features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; } 565 .plan-features li { font-size: 14px; color: var(--text-muted); display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; } 566 .plan-features li .tick { color: var(--brand); flex-shrink: 0; font-weight: 700; } 567 .plan-features li .cross { color: var(--text-faint); flex-shrink: 0; } 568 .plan-cta { width: 100%; justify-content: center; } 569 .ph { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; font-size: 10px; border-radius: 50%; background: var(--text-faint); color: #fff; cursor: help; position: relative; flex-shrink: 0; margin-left: 2px; font-style: normal; vertical-align: middle; } 570 .ph::after { content: attr(data-h); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #0f172a; color: #e2e8f0; font-size: 12px; line-height: 1.5; padding: 8px 11px; border-radius: 7px; white-space: normal; width: 230px; pointer-events: none; opacity: 0; transition: opacity 0.18s; z-index: 200; text-align: left; font-weight: 400; } 571 .ph:hover::after { opacity: 1; } 572 .pricing-card.popular .ph { background: rgba(255,255,255,0.5); } 573 574 /* ââ FAQ ââ */ 575 .faq-section { background: var(--bg-alt); padding: 96px 0; } 576 .faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; } 577 .faq-item { 578 background: var(--bg-card); border: 1px solid var(--border); 579 border-radius: var(--radius); overflow: hidden; transition: border-color 0.2s; 580 } 581 .faq-item.open { border-color: var(--border-hover); } 582 .faq-question { 583 width: 100%; display: flex; align-items: center; justify-content: space-between; 584 padding: 20px 24px; background: none; border: none; cursor: pointer; 585 text-align: left; color: var(--text); font-size: 15px; font-weight: 600; gap: 16px; 586 } 587 .faq-question:hover { color: var(--brand); } 588 .faq-chevron { font-size: 18px; color: var(--text-faint); transition: transform 0.3s; flex-shrink: 0; } 589 .faq-item.open .faq-chevron { transform: rotate(180deg); color: var(--brand); } 590 .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } 591 .faq-item.open .faq-answer { max-height: 300px; } 592 .faq-answer p { padding: 0 24px 22px; font-size: 14px; color: var(--text-muted); line-height: 1.75; } 593 594 /* ââ BLOG ââ */ 595 .blog-section { padding: 96px 0; } 596 .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } 597 .blog-card { 598 background: var(--bg-card); border: 1px solid var(--border); 599 border-radius: var(--radius-lg); overflow: hidden; transition: all 0.25s; 600 text-decoration: none; color: inherit; display: flex; flex-direction: column; 601 } 602 .blog-card:hover { border-color: var(--border-hover); transform: translateY(-4px); box-shadow: var(--shadow-brand); } 603 .blog-card-img { 604 height: 190px; overflow: hidden; background: var(--bg-alt); 605 display: flex; align-items: center; justify-content: center; 606 } 607 .blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } 608 .blog-card:hover .blog-card-img img { transform: scale(1.05); } 609 .blog-card-img .emoji-fallback { font-size: 56px; } 610 .blog-card-body { padding: 22px; flex: 1; display: flex; flex-direction: column; } 611 .blog-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; } 612 .blog-card h3 { font-size: 16px; font-weight: 700; line-height: 1.4; margin-bottom: 10px; flex: 1; } 613 .blog-card p { font-size: 13px; color: var(--text-muted); line-height: 1.6; } 614 615 /* ââ CTA SECTION ââ */ 616 .cta-section { 617 padding: 100px 0; text-align: center; 618 background: linear-gradient(135deg, #071820 0%, #0D2535 50%, #071820 100%); 619 position: relative; overflow: hidden; 620 } 621 /* animated aurora orbs */ 622 .cta-section::before { 623 content: ''; position: absolute; inset: 0; pointer-events: none; 624 background: 625 radial-gradient(ellipse 55% 60% at 20% 50%, rgba(46,144,179,0.18) 0%, transparent 65%), 626 radial-gradient(ellipse 45% 55% at 80% 50%, rgba(58,173,212,0.12) 0%, transparent 65%), 627 radial-gradient(ellipse 40% 50% at 50% 100%, rgba(46,144,179,0.15) 0%, transparent 60%); 628 animation: ctaAurora 8s ease-in-out infinite alternate; 629 }
630 @keyframes ctaAurora { 631 0% { opacity: 0.7; transform: scale(1); } 632 100% { opacity: 1; transform: scale(1.06); } 633 } 634 /* floating rings */ 635 .cta-ring { 636 position: absolute; border-radius: 50%; border: 1px solid rgba(58,173,212,0.1); 637 pointer-events: none; animation: ctaRingExpand 6s ease-in-out infinite; 638 } 639 .cta-ring:nth-child(1) { width: 300px; height: 300px; top: -80px; left: -80px; animation-delay: 0s; } 640 .cta-ring:nth-child(2) { width: 220px; height: 220px; bottom: -60px; right: -60px; animation-delay: 2s; } 641 .cta-ring:nth-child(3) { width: 160px; height: 160px; top: 30%; right: 8%; animation-delay: 4s; } 642 @keyframes ctaRingExpand { 643 0%,100% { transform: scale(1); opacity: 0.5; } 644 50% { transform: scale(1.15); opacity: 1; } 645 } 646 .cta-content { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 20px; } 647 648 /* badge */ 649 .cta-badge { 650 display: inline-flex; align-items: center; gap: 7px; margin-bottom: 28px; 651 background: rgba(46,144,179,0.15); border: 1px solid rgba(58,173,212,0.3); 652 color: #3AADD4; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; 653 text-transform: uppercase; padding: 6px 14px; border-radius: 20px; 654 } 655 .cta-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: livePulse 1.8s ease infinite; } 656 657 /* headline */ 658 .cta-section h2 { 659 font-size: clamp(30px, 4vw, 50px); font-weight: 900; letter-spacing: -1.5px; 660 margin-bottom: 18px; line-height: 1.1; color: #E8F4F8; 661 } 662 .cta-h2-highlight { 663 background: linear-gradient(90deg, #3AADD4 0%, #50C3EC 50%, #3AADD4 100%); 664 background-size: 200% auto; 665 -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; 666 animation: ctaShimmerText 3s linear infinite; 667 } 668 @keyframes ctaShimmerText { 669 0% { background-position: 0% center; } 670 100% { background-position: 200% center; } 671 } 672 .cta-br { display: none; } 673 .cta-section p { font-size: 17px; color: rgba(122,171,184,0.9); margin-bottom: 40px; line-height: 1.7; } 674 675 /* 3-step row */ 676 .cta-steps { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 40px; flex-wrap: wrap; } 677 .cta-step { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 24px; } 678 .cta-step-icon { 679 width: 48px; height: 48px; border-radius: 14px; 680 background: rgba(46,144,179,0.15); border: 1px solid rgba(58,173,212,0.25); 681 display: flex; align-items: center; justify-content: center; font-size: 22px; 682 transition: transform 0.3s, background 0.3s; 683 } 684 .cta-step:hover .cta-step-icon { transform: translateY(-4px) scale(1.08); background: rgba(46,144,179,0.28); } 685 .cta-step-num { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #3AADD4; } 686 .cta-step-label { font-size: 13px; font-weight: 600; color: #C8E8F5; } 687 .cta-step-arrow { font-size: 18px; color: rgba(58,173,212,0.3); align-self: center; margin: 0 -8px; } 688 689 /* CTA buttons */ 690 .cta-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; } 691 .btn-cta-primary { 692 display: inline-flex; align-items: center; gap: 9px; 693 padding: 16px 32px; border-radius: 12px; font-size: 16px; font-weight: 700; 694 background: linear-gradient(135deg, #2E90B3 0%, #3AADD4 100%); 695 color: #fff; text-decoration: none; position: relative; overflow: hidden; 696 box-shadow: 0 4px 24px rgba(46,144,179,0.45); 697 transition: transform 0.2s, box-shadow 0.2s; 698 } 699 .btn-cta-primary::after { 700 content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; 701 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); 702 animation: ctaBtnShimmer 2.5s ease-in-out infinite; 703 } 704 @keyframes ctaBtnShimmer { 0%,100%{left:-100%} 50%{left:150%} } 705 .btn-cta-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 36px rgba(46,144,179,0.6); } 706 .btn-cta-ghost { 707 display: inline-flex; align-items: center; gap: 8px; 708 padding: 15px 28px; border-radius: 12px; font-size: 15px; font-weight: 600; 709 border: 1.5px solid rgba(58,173,212,0.35); color: #7AABB8; 710 text-decoration: none; transition: border-color 0.2s, color 0.2s, background 0.2s; 711 } 712 .btn-cta-ghost:hover { border-color: rgba(58,173,212,0.7); color: #3AADD4; background: rgba(46,144,179,0.08); } 713 714 /* social proof */ 715 .cta-proof { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; } 716 .cta-avatars { display: flex; } 717 .cta-avatar { 718 width: 30px; height: 30px; border-radius: 50%; border: 2px solid #0D2535; 719 margin-left: -8px; font-size: 14px; display: flex; align-items: center; justify-content: center; 720 background: linear-gradient(135deg, #1E6A8A, #2E90B3); 721 } 722 .cta-avatars .cta-avatar:first-child { margin-left: 0; } 723 .cta-proof-text { font-size: 13px; color: rgba(122,171,184,0.8); } 724 .cta-proof-text strong { color: #3AADD4; } 725 .no-cc { font-size: 12px; color: rgba(90,143,160,0.7); margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } 726 .no-cc-dot { opacity: 0.3; } 727 728 /* ââ FOOTER ââ */ 729 footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding: 64px 0 32px; } 730 .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; } 731 .footer-brand .logo { margin-bottom: 14px; display: inline-flex; } 732 .footer-brand p { font-size: 14px; color: var(--text-muted); line-height: 1.7; max-width: 260px; margin-bottom: 20px; } 733 .footer-socials { display: flex; gap: 10px; } 734 .social-btn { 735 width: 36px; height: 36px; border-radius: 8px; 736 background: var(--bg-card); border: 1px solid var(--border); 737 display: flex; align-items: center; justify-content: center; 738 text-decoration: none; font-size: 14px; color: var(--text-muted); transition: all 0.2s; 739 } 740 .social-btn:hover { border-color: var(--border-hover); color: var(--brand); } 741 .footer-col h4 { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; color: var(--text); margin-bottom: 16px; } 742 .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } 743 .footer-col ul li a { font-size: 14px; color: var(--text-muted); text-decoration: none; transition: color 0.2s; } 744 .footer-col ul li a:hover { color: var(--brand); } 745 .footer-bottom { 746 border-top: 1px solid var(--border); padding-top: 24px; 747 display: flex; align-items: center; justify-content: space-between; 748 font-size: 13px; color: var(--text-faint); flex-wrap: wrap; gap: 12px; 749 } 750 751 /* ââ SCROLL ANIMATIONS ââ */ 752 .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.5s ease; } 753 .fade-up.visible { opacity: 1; transform: translateY(0); } 754 .stagger-1 { transition-delay: 0.1s; } 755 .stagger-2 { transition-delay: 0.2s; } 756 757 758 /* ââ MOBILE: hide hover tooltips (touch can't hover) ââ */ 759 @media (max-width: 768px) { 760 .ph::after { display: none; } 761 } 762 763 /* ââ WHATSAPP FLOAT BUTTON ââ */ 764 #waFloatBtn { 765 position: fixed; bottom: 24px; right: 24px; z-index: 9999; 766 width: 56px; height: 56px; border-radius: 50%; 767 background: #25D366; display: flex; align-items: center; justify-content: center; 768 box-shadow: 0 4px 20px rgba(37,211,102,0.45); 769 text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; 770 animation: waPulse 2s ease-in-out infinite; 771 }
772 #waFloatBtn:hover { transform: scale(1.12); box-shadow: 0 6px 28px rgba(37,211,102,0.65); animation: none; } 773 @keyframes waPulse { 774 0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0.4); } 775 50% { box-shadow: 0 4px 20px rgba(37,211,102,0.45), 0 0 0 12px rgba(37,211,102,0); } 776 } 777 778 /* ââ REDUCED MOTION ââ */ 779 @media (prefers-reduced-motion: reduce) { 780 *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } 781 .hero-word-swap { transition: none !important; } 782 .notif-progress-bar { transition: none !important; } 783 } 784 785 /* ââ RESPONSIVE ââ */ 786 @media (max-width: 1024px) { 787 .integrations-grid { grid-template-columns: repeat(4, 1fr); } 788 .api-grid { grid-template-columns: 1fr; gap: 40px; } 789 .footer-grid { grid-template-columns: 1fr 1fr; } 790 .feature-panel { grid-template-columns: 1fr; min-height: unset; } 791 .feature-panel-visual { height: 180px; } 792 } 793 @media (max-width: 768px) { 794 .nav-links, .nav-signin { display: none; } 795 .nav-mobile-toggle { display: block; } 796 .hero-inner { grid-template-columns: 1fr; gap: 36px; min-height: unset; } 797 .hero-right { order: -1; overflow: hidden; } 798 .hero-stats { max-width: 400px; } 799 .pricing-grid { grid-template-columns: 1fr; } 800 .pricing-card.popular { transform: none; } 801 .blog-grid { grid-template-columns: 1fr; } 802 .integrations-grid { grid-template-columns: repeat(3, 1fr); } 803 .footer-grid { grid-template-columns: 1fr; gap: 28px; } 804 .footer-bottom { flex-direction: column; text-align: center; } 805 .feature-panel:nth-child(odd), .feature-panel:nth-child(even) { transform: none; } 806 .hero-tags { display: none; } 807 } 808 @media (max-width: 480px) { 809 .integrations-grid { grid-template-columns: repeat(2, 1fr); } 810 .hero-proof { flex-direction: column; gap: 10px; align-items: center; } 811 .hero-proof-item { justify-content: center; } 812 .hero-sub { font-size: 16px; } 813 .hero-notif-wrap { margin-top: 36px; } 814 .no-cc { flex-direction: column; gap: 4px; } 815 .no-cc-dot { display: none; } 816 .cta-section p { font-size: 15px; padding: 0 4px; } 817 .cta-br { display: block; } 818 .cta-steps { gap: 0; } 819 .cta-step { padding: 12px 14px; } 820 .cta-step-arrow { display: none; } 821 .cta-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; } 822 .hero-actions { flex-direction: column; align-items: stretch; } 823 .hero-actions .btn { width: 100%; justify-content: center; } 824 } 825 </style> 826 827 828 829 <!-- Pixel Code - https://pushify.com/ --> 830
830<script defer src="https://pushify.com/pixel/OIlDJOyZeAjuV1Sw"></script>
830 831 <!-- END Pixel Code --> 832</head> 833<body> 834 835 836 837 838<!-- ââ MOBILE NAV BACKDROP ââ --> 839<div class="mobile-nav-backdrop" id="mobileNavBackdrop" onclick="closeMobileNav()"></div> 840 841<!-- ââ MOBILE NAV DRAWER ââ --> 842<div class="mobile-nav" id="mobileNav"> 843 <div class="mobile-nav-header"> 844 <img src="https://pushify.com/uploads/main/4c2b584f6f0013e380a5b53a3a1e0bea.png" alt="Pushify" /> 845 <button class="mobile-nav-close" onclick="closeMobileNav()">â</button> 846 </div> 847 <div class="mobile-nav-links"> 848 <a href="https://pushify.com/plan" style="--d:0"><span class="mnav-icon">ð°</span>Plans</a> 849 <a href="https://pushify.com/api-documentation" style="--d:50"><span class="mnav-icon">ð</span>API</a> 850 <a href="https://pushify.com/blog" style="--d:100"><span class="mnav-icon">ð</span>Blog</a> 851 <a href="https://pushify.com/contact" style="--d:150"><span class="mnav-icon">ð¬</span>Contact</a> 852 <div class="mobile-nav-divider"></div> 853 <a href="https://pushify.com/login" id="mobileAuthLink" style="--d:200"><span class="mnav-icon">ð¤</span>Sign in</a> 854 </div> 855 <div class="mobile-nav-footer"> 856 <a href="https://pushify.com/register" class="btn btn-primary" style="width:100%;justify-content:center">Get started free â</a> 857 </div> 858</div> 859 860<!-- ââ NAV ââ --> 861<nav> 862 <div class="container nav-inner"> 863 <a href="https://pushify.com" class="logo"> 864 <div class="logo-icon"><img src="https://pushify.com/uploads/main/4c2b584f6f0013e380a5b53a3a1e0bea.png" alt="Pushify" /></div> 865 </a> 866 <div class="nav-links"> 867 <a href="https://pushify.com/plan">Plans</a> 868 <a href="https://pushify.com/api-documentation">API</a> 869 <a href="https://pushify.com/blog">Blog</a> 870 <a href="https://pushify.com/contact">Contact</a> 871 </div> 872 <div class="nav-actions"> 873 <a href="https://pushify.com/login" class="nav-signin" id="navAuthLink">Sign in</a> 874 875 <button class="theme-toggle" id="themeToggle" onclick="toggleTheme()" title="Toggle theme"> 876 <svg class="icon-moon" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg> 877 <svg class="icon-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg> 878 </button> 879 <button class="nav-mobile-toggle" onclick="openMobileNav()">â°</button> 880 </div> 881 </div> 882</nav> 883 884<!-- ââ HERO ââ --> 885<section class="hero"> 886 <div class="hero-bg"></div> 887 <div class="hero-grid"></div> 888 <div class="container"> 889 <div class="hero-inner"> 890 891 <!-- LEFT --> 892 <div class="hero-left"> 893 <div class="hero-badge"><span class="badge">ð Free Forever â No Credit Card</span></div> 894 <h1>Send push notifications<br>to <span class="hero-word-swap" id="heroWord">unlimited subscribers</span><br>for $0 â forever.</h1> 895 <p class="hero-sub">The only push platform that never limits your subscribers or sends. Campaigns, flows, RSS automations, segmentation & full REST API â all completely free.</p> 896 <div class="hero-trust" id="heroTrust"> 897 <div class="hero-avatar-stack" aria-hidden="true"> 898 <div class="ha" style="background:#F43F8E">J</div> 899 <div class="ha" style="background:#8B5CF6">M</div> 900 <div class="ha" style="background:#10B981">A</div> 901 <div class="ha" style="background:#F59E0B">R</div> 902 <div class="ha" style="background:#2E90B3">K</div> 903 </div> 904 <span class="hero-trust-text">Trusted by <strong>12,000+</strong> websites worldwide</span> 905 </div> 906 <div class="hero-stats"> 907 <div class="hstat"><span class="hstat-n">â</span><span class="hstat-l">Subscribers</span></div> 908 <div class="hstat"><span class="hstat-n">â</span><span class="hstat-l">Sends/month</span></div> 909 <div class="hstat"><span class="hstat-n">$0</span><span class="hstat-l">Forever</span></div> 910 <div class="hstat"><span class="hstat-n"><5min</span><span class="hstat-l">Setup</span></div> 911 </div> 912 <div class="hero-actions"> 913 <a href="https://pushify.com/register" class="btn btn-primary btn-large" id="heroCta">Start for free â</a> 914 <a href="#features" class="btn btn-ghost btn-large">See features â</a> 915 </div> 916 <div class="hero-proof"> 917 <div class="hero-proof-item"><span class="proof-check">â</span><span>No credit card required</span></div> 918 <div class="hero-proof-item"><span class="proof-check">â</span><span>Unlimited subscribers</span></div> 919 <div class="hero-proof-item"><span class="proof-check">â</span><span>Live in under 5 minutes</span></div> 920 <div class="hero-proof-item"><span class="proof-check">â</span><span>Free forever â no expiry date</span></div> 921 </div> 922 </div> 923 924 <!-- RIGHT: live notification demo --> 925 <div class="hero-right"> 926 <div class="hero-right-glow"></div> 927 <div class="notif-demo"> 928 <div class="notif-demo-eyebrow">Live preview â what your subscribers see</div> 929 <div class="notif-stack" id="notifStack"></div> 930 <div class="notif-progress"><div class="notif-progress-bar" id="notifProgress"></div></div> 931 <div class="notif-dots" id="notifDots"></div> 932 <div class="hero-tags">
933 <span class="hero-tag">ð E-commerce</span> 934 <span class="hero-tag">ð Blogs</span> 935 <span class="hero-tag">ð° News</span> 936 <span class="hero-tag">ð SaaS</span> 937 </div> 938 </div> 939 </div> 940 941 </div> 942 </div> 943</section> 944 945<!-- ââ BROWSERS ââ --> 946<div class="browsers-section"> 947 <div class="container"> 948 <p class="browsers-label">Supported on all major platforms & browsers</p> 949 <div class="browsers-list"> 950 <div class="browser-logo"> 951 <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M20 20L20 2A18 18 0 0 1 35.6 29Z" fill="#EA4335"/><path d="M20 20L35.6 29A18 18 0 0 1 4.4 29Z" fill="#FBBC04"/><path d="M20 20L4.4 29A18 18 0 0 1 20 2Z" fill="#34A853"/><circle cx="20" cy="20" r="11" fill="white"/><circle cx="20" cy="20" r="7.5" fill="#4285F4"/></svg> 952 <span>Chrome</span> 953 </div> 954 <div class="browser-logo"> 955 <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sfg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#1EC4F5"/><stop offset="100%" stop-color="#0074DA"/></linearGradient></defs><circle cx="20" cy="20" r="20" fill="url(#sfg)"/><circle cx="20" cy="20" r="14" fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="1"/><polygon points="20,7 23.5,20 20,18 16.5,20" fill="#FF3B30"/><polygon points="20,33 16.5,20 20,22 23.5,20" fill="white"/><circle cx="20" cy="20" r="2.5" fill="white" opacity="0.7"/></svg> 956 <span>Safari</span> 957 </div> 958 <div class="browser-logo"> 959 <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="edg" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#0078D4"/><stop offset="100%" stop-color="#50E6FF"/></linearGradient></defs><circle cx="20" cy="20" r="20" fill="url(#edg)"/><path d="M10 19 Q10 11 20 11 Q30 11 30 19 L10 19" fill="none" stroke="white" stroke-width="2.8" stroke-linecap="round"/><path d="M10 19 Q11 29 20 30 Q28 30 30 24" fill="none" stroke="white" stroke-width="2.8" stroke-linecap="round"/><line x1="10" y1="19" x2="22" y2="19" stroke="white" stroke-width="2.8" stroke-linecap="round"/></svg> 960 <span>Edge</span> 961 </div> 962 <div class="browser-logo"> 963 <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="ffg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#0750BB"/><stop offset="100%" stop-color="#0250BB"/></linearGradient></defs><circle cx="20" cy="20" r="20" fill="url(#ffg)"/><circle cx="20" cy="21" r="8.5" fill="#00B3F4" opacity="0.9"/><path d="M20 5 C26 9 31 8 29 15 C32 11 34 15 31 19 C35 14 30 6 24 9 C27 5 23 3 20 5Z" fill="#FF7139"/><path d="M20 5 C14 9 9 8 11 15 C8 11 6 15 9 19 C5 14 10 6 16 9 C13 5 17 3 20 5Z" fill="#FF9500" opacity="0.6"/></svg> 964 <span>Firefox</span> 965 </div> 966 <div class="browser-logo"> 967 <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="20" fill="#1428A0"/><text x="20" y="27" font-size="20" font-weight="700" text-anchor="middle" fill="white" font-family="sans-serif">S</text></svg> 968 <span>Samsung</span> 969 </div> 970 <div class="browser-logo"> 971 <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="opg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#FF1B2D"/><stop offset="100%" stop-color="#A70010"/></linearGradient></defs><circle cx="20" cy="20" r="20" fill="url(#opg)"/><ellipse cx="20" cy="20" rx="8" ry="11.5" fill="none" stroke="white" stroke-width="2.8"/></svg> 972 <span>Opera</span> 973 </div> 974 </div> 975 <p class="browsers-platforms">Windows · macOS · Android · iOS</p> 976 </div> 977</div> 978 979<!-- ââ FEATURES (Zepio sticky-stack style) ââ --> 980<section class="features-section" id="features"> 981 <div class="container"> 982 <div class="features-sticky-wrap"> 983 <div class="features-sticky-title fade-up"> 984 <span class="badge" style="margin-bottom:14px">Everything you need</span> 985 <h2>Powerful features, zero complexity</h2> 986 <p>Everything you need to capture, engage, and retain subscribers.</p> 987 </div> 988 <div class="feature-stack"> 989 990 <div class="feature-panel fp-teal"> 991 <div class="feature-panel-text"> 992 <div class="fp-tag">Web Push</div> 993 <h3>Highly configurable notifications</h3> 994 <p>Rich, interactive push notifications with every option you need â images, action buttons, TTL and more.</p> 995 <ul class="fp-list"> 996 <li>Attach images to notifications</li> 997 <li>2à custom action buttons</li> 998 <li>Dynamic titles & descriptions</li> 999 <li>Silent mode, urgency & TTL controls</li> 1000 </ul> 1001 </div> 1002 <div class="feature-panel-visual">
1003 <svg class="fp-svg" viewBox="0 0 280 196" xmlns="http://www.w3.org/2000/svg"> 1004 <circle cx="240" cy="28" r="44" fill="rgba(255,255,255,0.06)"/> 1005 <circle cx="28" cy="168" r="32" fill="rgba(255,255,255,0.06)"/> 1006 <rect x="18" y="26" width="244" height="144" rx="14" fill="white" opacity="0.94"/> 1007 <rect x="18" y="26" width="244" height="6" rx="3" fill="#34A853" opacity="0.7"/> 1008 <rect x="36" y="54" width="36" height="36" rx="9" fill="#2E90B3" opacity="0.9"/> 1009 <rect x="46" y="64" width="16" height="16" rx="3" fill="white" opacity="0.6"/> 1010 <rect x="84" y="57" width="104" height="8" rx="4" fill="#1a1a2e" opacity="0.72"/> 1011 <rect x="84" y="71" width="146" height="6" rx="3" fill="#555" opacity="0.32"/> 1012 <rect x="84" y="82" width="112" height="6" rx="3" fill="#555" opacity="0.22"/> 1013 <rect x="34" y="114" width="84" height="28" rx="7" fill="#2E90B3"/> 1014 <rect x="34" y="114" width="84" height="28" rx="7" fill="rgba(0,0,0,0.08)"/> 1015 <rect x="50" y="124" width="52" height="7" rx="3" fill="white" opacity="0.92"/> 1016 <rect x="130" y="114" width="84" height="28" rx="7" fill="none" stroke="rgba(255,255,255,0.35)" stroke-width="1.5"/> 1017 <rect x="130" y="114" width="84" height="28" rx="7" fill="rgba(255,255,255,0.08)"/> 1018 <rect x="147" y="124" width="50" height="7" rx="3" fill="white" opacity="0.5"/> 1019 <text x="252" y="44" font-size="11" fill="rgba(255,255,255,0.45)" text-anchor="middle" font-family="sans-serif">â</text> 1020 </svg> 1021 </div> 1022 </div> 1023 1024 <div class="feature-panel fp-gold"> 1025 <div class="feature-panel-visual"> 1026 <svg class="fp-svg" viewBox="0 0 280 196" xmlns="http://www.w3.org/2000/svg"> 1027 <circle cx="250" cy="26" r="40" fill="rgba(255,255,255,0.07)"/> 1028 <rect x="18" y="18" width="244" height="160" rx="14" fill="white" opacity="0.93"/> 1029 <rect x="34" y="34" width="94" height="8" rx="4" fill="#333" opacity="0.68"/> 1030 <rect x="204" y="32" width="42" height="16" rx="8" fill="#22c55e" opacity="0.18"/> 1031 <rect x="210" y="37" width="30" height="6" rx="3" fill="#22c55e" opacity="0.65"/> 1032 <line x1="34" y1="58" x2="246" y2="58" stroke="#eee" stroke-width="1"/> 1033 <rect x="34" y="72" width="46" height="6" rx="3" fill="#aaa" opacity="0.5"/> 1034 <rect x="88" y="70" width="130" height="10" rx="5" fill="#2E90B3" opacity="0.88"/> 1035 <rect x="226" y="72" width="16" height="6" rx="3" fill="#555" opacity="0.5"/> 1036 <rect x="34" y="98" width="46" height="6" rx="3" fill="#aaa" opacity="0.5"/> 1037 <rect x="88" y="96" width="80" height="10" rx="5" fill="#F5C518" opacity="0.88"/> 1038 <rect x="176" y="98" width="16" height="6" rx="3" fill="#555" opacity="0.5"/> 1039 <rect x="34" y="124" width="46" height="6" rx="3" fill="#aaa" opacity="0.5"/> 1040 <rect x="88" y="122" width="40" height="10" rx="5" fill="#F43F8E" opacity="0.8"/> 1041 <rect x="136" y="124" width="16" height="6" rx="3" fill="#555" opacity="0.5"/> 1042 <rect x="34" y="148" width="28" height="6" rx="3" fill="#ddd" opacity="0.6"/> 1043 <rect x="72" y="148" width="28" height="6" rx="3" fill="#ddd" opacity="0.6"/> 1044 <rect x="110" y="148" width="28" height="6" rx="3" fill="#ddd" opacity="0.6"/> 1045 </svg> 1046 </div> 1047 <div class="feature-panel-text"> 1048 <div class="fp-tag">Campaigns</div> 1049 <h3>Fully featured push campaigns</h3> 1050 <p>Prepare, schedule and send targeted campaigns to all or specific segments of your audience.</p> 1051 <ul class="fp-list"> 1052 <li>Spintax for dynamic content</li> 1053 <li>Custom parameter merging</li> 1054 <li>Segment-targeted sends</li> 1055 <li>Detailed post-send insights</li> 1056 </ul> 1057 </div> 1058 </div> 1059
1060 <div class="feature-panel fp-mint"> 1061 <div class="feature-panel-text"> 1062 <div class="fp-tag">Flows</div> 1063 <h3>Automated drip notification flows</h3> 1064 <p>Set-and-forget automations that onboard, nurture and convert from day one.</p> 1065 <ul class="fp-list"> 1066 <li>After 5 min: Welcome notification</li> 1067 <li>After 1 day: Tutorial & onboarding</li> 1068 <li>After 7 days: Free trial offer</li> 1069 <li>After 37 days: Upgrade discount</li> 1070 </ul> 1071 </div> 1072 <div class="feature-panel-visual"> 1073 <svg class="fp-svg" viewBox="0 0 280 196" xmlns="http://www.w3.org/2000/svg"> 1074 <circle cx="240" cy="30" r="42" fill="rgba(255,255,255,0.06)"/> 1075 <rect x="18" y="16" width="244" height="164" rx="14" fill="white" opacity="0.92"/> 1076 <rect x="34" y="30" width="78" height="7" rx="3" fill="#333" opacity="0.65"/> 1077 <line x1="34" y1="50" x2="246" y2="50" stroke="#eee" stroke-width="1"/> 1078 <line x1="54" y1="60" x2="54" y2="170" stroke="#10B981" stroke-width="2" stroke-dasharray="3 3" opacity="0.35"/> 1079 <circle cx="54" cy="68" r="8" fill="#10B981"/> 1080 <rect x="54" y="64" width="8" height="8" rx="4" fill="white" opacity="0.5"/> 1081 <rect x="72" y="64" width="88" height="7" rx="3" fill="#333" opacity="0.65"/> 1082 <rect x="72" y="75" width="58" height="5" rx="2" fill="#888" opacity="0.35"/> 1083 <rect x="178" y="62" width="58" height="14" rx="7" fill="#E0F5EE"/> 1084 <rect x="184" y="67" width="46" height="5" rx="2" fill="#10B981" opacity="0.6"/> 1085 <circle cx="54" cy="104" r="8" fill="#10B981" opacity="0.75"/> 1086 <rect x="54" y="100" width="8" height="8" rx="4" fill="white" opacity="0.5"/> 1087 <rect x="72" y="100" width="108" height="7" rx="3" fill="#333" opacity="0.58"/> 1088 <rect x="72" y="111" width="68" height="5" rx="2" fill="#888" opacity="0.3"/> 1089 <rect x="194" y="98" width="50" height="14" rx="7" fill="#E0F5EE"/> 1090 <rect x="200" y="103" width="38" height="5" rx="2" fill="#10B981" opacity="0.5"/> 1091 <circle cx="54" cy="140" r="8" fill="#10B981" opacity="0.55"/> 1092 <rect x="54" y="136" width="8" height="8" rx="4" fill="white" opacity="0.5"/> 1093 <rect x="72" y="136" width="94" height="7" rx="3" fill="#333" opacity="0.5"/> 1094 <rect x="72" y="147" width="74" height="5" rx="2" fill="#888" opacity="0.25"/> 1095 <rect x="184" y="134" width="58" height="14" rx="7" fill="#E0F5EE"/> 1096 <rect x="190" y="139" width="46" height="5" rx="2" fill="#10B981" opacity="0.4"/> 1097 </svg> 1098 </div> 1099 </div> 1100 1101 <div class="feature-panel fp-lavender"> 1102 <div class="feature-panel-visual"> 1103 <svg class="fp-svg" viewBox="0 0 280 196" xmlns="http://www.w3.org/2000/svg"> 1104 <circle cx="36" cy="30" r="38" fill="rgba(255,255,255,0.07)"/> 1105 <rect x="18" y="16" width="244" height="164" rx="14" fill="white" opacity="0.92"/> 1106 <rect x="34" y="30" width="84" height="7" rx="3" fill="#333" opacity="0.65"/> 1107 <line x1="34" y1="50" x2="246" y2="50" stroke="#eee" stroke-width="1"/> 1108 <rect x="34" y="64" width="60" height="20" rx="10" fill="#8B5CF6" opacity="0.15"/> 1109 <rect x="40" y="71" width="48" height="6" rx="3" fill="#7C3AED" opacity="0.7"/> 1110 <rect x="104" y="64" width="72" height="20" rx="10" fill="#8B5CF6" opacity="0.12"/> 1111 <rect x="110" y="71" width="60" height="6" rx="3" fill="#7C3AED" opacity="0.55"/> 1112 <rect x="186" y="64" width="58" height="20" rx="10" fill="#8B5CF6" opacity="0.1"/> 1113 <rect x="192" y="71" width="46" height="6" rx="3" fill="#7C3AED" opacity="0.45"/> 1114 <rect x="34" y="94" width="66" height="20" rx="10" fill="#8B5CF6" opacity="0.1"/> 1115 <rect x="40" y="101" width="54" height="6" rx="3" fill="#7C3AED" opacity="0.45"/> 1116 <rect x="110" y="94" width="56" height="20" rx="10" fill="#8B5CF6" opacity="0.12"/> 1117 <rect x="116" y="101" width="44" height="6" rx="3" fill="#7C3AED" opacity="0.5"/> 1118 <line x1="34" y1="128" x2="246" y2="128" stroke="#eee" stroke-width="1"/> 1119 <rect x="34" y="140" width="140" height="7" rx="3" fill="#555" opacity="0.3"/> 1120 <rect x="34" y="152" width="40" height="16" rx="8" fill="#8B5CF6"/> 1121 <rect x="40" y="157" width="28" height="6" rx="3" fill="white" opacity="0.85"/> 1122 </svg> 1123 </div> 1124 <div class="feature-panel-text"> 1125 <div class="fp-tag">Segments</div> 1126 <h3>Custom subscriber groups</h3> 1127 <p>Slice and dice your audience for laser-targeted messaging based on any attribute.</p> 1128 <ul class="fp-list"> 1129 <li>CSV import of custom subscribers</li> 1130 <li>Filter by continent, country & city</li> 1131 <li>Device, OS & browser targeting</li> 1132 <li>Browser language filters</li> 1133 </ul> 1134 </div> 1135 </div> 1136 1137 <div class="feature-panel fp-sky"> 1138 <div class="feature-panel-text"> 1139 <div class="fp-tag">RSS Automations</div> 1140 <h3>RSS to push notifications</h3> 1141 <p>Automatically push notifications whenever your RSS feed publishes new content.</p> 1142 <ul class="fp-list"> 1143 <li>
1143Fully featured rich notifications</li> 1144 <li>Configurable feed check intervals</li> 1145 <li>Spread out delivery with delays</li> 1146 <li>Dynamic RSS title & description</li> 1147 </ul> 1148 </div> 1149 <div class="feature-panel-visual"> 1150 <svg class="fp-svg" viewBox="0 0 280 196" xmlns="http://www.w3.org/2000/svg"> 1151 <circle cx="240" cy="160" r="42" fill="rgba(255,255,255,0.06)"/> 1152 <rect x="18" y="16" width="244" height="164" rx="14" fill="white" opacity="0.92"/> 1153 <rect x="34" y="30" width="88" height="7" rx="3" fill="#333" opacity="0.65"/> 1154 <circle cx="226" cy="34" r="12" fill="#0EA5E9" opacity="0.15"/> 1155 <rect x="220" y="30" width="12" height="8" rx="2" fill="#0EA5E9" opacity="0.7"/> 1156 <line x1="34" y1="52" x2="246" y2="52" stroke="#eee" stroke-width="1"/> 1157 <rect x="34" y="64" width="6" height="6" rx="1" fill="#F97316"/> 1158 <rect x="46" y="62" width="160" height="7" rx="3" fill="#333" opacity="0.62"/> 1159 <rect x="46" y="73" width="110" height="5" rx="2" fill="#888" opacity="0.3"/> 1160 <rect x="230" y="64" width="16" height="16" rx="4" fill="#0EA5E9" opacity="0.2"/> 1161 <rect x="234" y="69" width="8" height="6" rx="2" fill="#0EA5E9" opacity="0.7"/> 1162 <line x1="34" y1="90" x2="246" y2="90" stroke="#f5f5f5" stroke-width="1"/> 1163 <rect x="34" y="98" width="6" height="6" rx="1" fill="#F97316"/> 1164 <rect x="46" y="96" width="148" height="7" rx="3" fill="#333" opacity="0.56"/> 1165 <rect x="46" y="107" width="100" height="5" rx="2" fill="#888" opacity="0.27"/> 1166 <rect x="230" y="98" width="16" height="16" rx="4" fill="#0EA5E9" opacity="0.2"/> 1167 <rect x="234" y="103" width="8" height="6" rx="2" fill="#0EA5E9" opacity="0.7"/> 1168 <line x1="34" y1="124" x2="246" y2="124" stroke="#f5f5f5" stroke-width="1"/> 1169 <rect x="34" y="132" width="6" height="6" rx="1" fill="#F97316"/> 1170 <rect x="46" y="130" width="136" height="7" rx="3" fill="#333" opacity="0.5"/> 1171 <rect x="46" y="141" width="88" height="5" rx="2" fill="#888" opacity="0.24"/> 1172 <rect x="230" y="132" width="16" height="16" rx="4" fill="#0EA5E9" opacity="0.2"/> 1173 <rect x="234" y="137" width="8" height="6" rx="2" fill="#0EA5E9" opacity="0.7"/> 1174 </svg> 1175 </div> 1176 </div> 1177 1178 <div class="feature-panel fp-amber"> 1179 <div class="feature-panel-visual"> 1180 <svg class="fp-svg" viewBox="0 0 280 196" xmlns="http://www.w3.org/2000/svg"> 1181 <circle cx="36" cy="26" r="36" fill="rgba(255,255,255,0.07)"/> 1182 <rect x="18" y="16" width="244" height="164" rx="14" fill="white" opacity="0.92"/> 1183 <rect x="34" y="30" width="88" height="7" rx="3" fill="#333" opacity="0.65"/> 1184 <line x1="34" y1="50" x2="246" y2="50" stroke="#eee" stroke-width="1"/> 1185 <rect x="34" y="60" width="34" height="34" rx="6" fill="#F59E0B" opacity="0.15"/> 1186 <rect x="40" y="66" width="22" height="7" rx="3" fill="#C07020" opacity="0.6"/> 1187 <rect x="40" y="77" width="16" height="5" rx="2" fill="#C07020" opacity="0.4"/> 1188 <rect x="78" y="60" width="34" height="34" rx="6" fill="#F59E0B" opacity="0.12"/> 1189 <rect x="84" y="66" width="22" height="7" rx="3" fill="#C07020" opacity="0.55"/> 1190 <rect x="84" y="77" width="16" height="5" rx="2" fill="#C07020" opacity="0.35"/> 1191 <rect x="122" y="60" width="34" height="34" rx="6" fill="#F59E0B" opacity="0.1"/> 1192 <rect x="128" y="66" width="22" height="7" rx="3" fill="#C07020" opacity="0.5"/> 1193 <rect x="128" y="77" width="16" height="5" rx="2" fill="#C07020" opacity="0.3"/> 1194 <rect x="166" y="60" width="34" height="34" rx="6" fill="#F59E0B" opacity="0.2"/> 1195 <rect x="172" y="66" width="22" height="7" rx="3" fill="#C07020" opacity="0.7"/> 1196 <rect x="172" y="77" width="16" height="5" rx="2" fill="#C07020" opacity="0.5"/> 1197 <rect x="210" y="60" width="34" height="34" rx="6" fill="#F59E0B" opacity="0.08"/> 1198 <rect x="216" y="66" width="22" height="7" rx="3" fill="#C07020" opacity="0.45"/> 1199 <line x1="34" y1="108" x2="246" y2="108" stroke="#eee" stroke-width="1"/> 1200 <rect x="34" y="120" width="116" height="7" rx="3" fill="#555" opacity="0.35"/> 1201 <rect x="34" y="134" width="86" height="22" rx="6" fill="#F59E0B"/> 1202 <rect x="44" y="142" width="66" height="6" rx="3" fill="white" opacity="0.9"/> 1203 <rect x="130" y="134" width="74" height="22" rx="6" fill="none" stroke="#F59E0B" stroke-width="1.5" opacity="0.5"/> 1204 </svg> 1205 </div> 1206 <div class="feature-panel-text"> 1207 <div class="fp-tag">Recurring Campaigns</div> 1208 <h3>Campaigns on autopilot</h3> 1209 <p>Schedule campaigns to fire automatically â hourly, daily, weekly or monthly.</p> 1210 <ul class="fp-list"> 1211 <li>Hour & minute scheduling</li> 1212 <li>Select specific days of the week</li> 1213 <li>Select days of the month</li> 1214 </ul> 1215 </div> 1216 </div> 1217 1218 <div class="feature-panel fp-rose"> 1219 <div class="feature-panel-text"> 1220 <div class="fp-tag">PWA Builder</div> 1221 <h3>Intelligent PWA builder</h3> 1222 <p>Create beautiful Progressive Web Apps for any website without writing a single line of code.</p> 1223 <ul class="fp-list"> 1224 <li>Create your PWA in minutes</li> 1225 <li>Works for any website or CMS</li> 1226 <li>Zero coding required</li> 1227 </ul> 1228 </div> 1229 <div class="feature-panel-visual">
1230 <svg class="fp-svg" viewBox="0 0 280 196" xmlns="http://www.w3.org/2000/svg"> 1231 <circle cx="140" cy="98" r="54" fill="rgba(255,255,255,0.06)"/> 1232 <rect x="96" y="16" width="88" height="164" rx="18" fill="white" opacity="0.94"/> 1233 <rect x="112" y="22" width="56" height="8" rx="4" fill="#ddd" opacity="0.6"/> 1234 <circle cx="140" cy="26" r="3" fill="#ccc" opacity="0.5"/> 1235 <rect x="106" y="40" width="68" height="90" rx="4" fill="#f8f8f8"/> 1236 <rect x="110" y="44" width="60" height="38" rx="4" fill="#E0F4FB"/> 1237 <rect x="116" y="50" width="24" height="24" rx="6" fill="#2E90B3" opacity="0.7"/> 1238 <rect x="146" y="52" width="18" height="5" rx="2" fill="#333" opacity="0.5"/> 1239 <rect x="146" y="61" width="24" height="4" rx="2" fill="#888" opacity="0.3"/> 1240 <rect x="110" y="90" width="60" height="14" rx="7" fill="#2E90B3"/> 1241 <rect x="124" y="94" width="32" height="5" rx="2" fill="white" opacity="0.88"/> 1242 <rect x="110" y="110" width="60" height="10" rx="5" fill="none" stroke="#ddd" stroke-width="1"/> 1243 <rect x="118" y="114" width="44" height="4" rx="2" fill="#aaa" opacity="0.4"/> 1244 <rect x="116" y="130" width="14" height="4" rx="2" fill="#22c55e" opacity="0.6"/> 1245 <rect x="116" y="138" width="14" height="4" rx="2" fill="#22c55e" opacity="0.5"/> 1246 <rect x="133" y="130" width="40" height="4" rx="2" fill="#888" opacity="0.3"/> 1247 <rect x="133" y="138" width="34" height="4" rx="2" fill="#888" opacity="0.25"/> 1248 <rect x="118" y="168" width="44" height="6" rx="3" fill="#ddd" opacity="0.5"/> 1249 <circle cx="140" cy="175" r="4" fill="#ddd" opacity="0.5"/> 1250 </svg> 1251 </div> 1252 </div> 1253 1254 <div class="feature-panel fp-cyan"> 1255 <div class="feature-panel-visual"> 1256 <svg class="fp-svg" viewBox="0 0 280 196" xmlns="http://www.w3.org/2000/svg"> 1257 <circle cx="36" cy="160" r="40" fill="rgba(255,255,255,0.06)"/> 1258 <rect x="18" y="16" width="244" height="164" rx="14" fill="white" opacity="0.92"/> 1259 <rect x="34" y="30" width="98" height="7" rx="3" fill="#333" opacity="0.65"/> 1260 <circle cx="220" cy="34" r="8" fill="#06B6D4" opacity="0.2"/> 1261 <circle cx="220" cy="34" r="4" fill="#06B6D4" opacity="0.6"/> 1262 <line x1="34" y1="52" x2="246" y2="52" stroke="#eee" stroke-width="1"/> 1263 <rect x="34" y="64" width="32" height="32" rx="8" fill="#2563EB" opacity="0.15"/> 1264 <rect x="42" y="76" width="16" height="8" rx="3" fill="#2563EB" opacity="0.7"/> 1265 <rect x="76" y="64" width="32" height="32" rx="8" fill="#7C3AED" opacity="0.15"/> 1266 <rect x="84" y="76" width="16" height="8" rx="3" fill="#7C3AED" opacity="0.7"/> 1267 <rect x="118" y="64" width="32" height="32" rx="8" fill="#059669" opacity="0.15"/> 1268 <rect x="126" y="76" width="16" height="8" rx="3" fill="#059669" opacity="0.7"/> 1269 <rect x="160" y="64" width="32" height="32" rx="8" fill="#DC2626" opacity="0.15"/> 1270 <rect x="168" y="76" width="16" height="8" rx="3" fill="#DC2626" opacity="0.7"/> 1271 <rect x="202" y="64" width="32" height="32" rx="8" fill="#D97706" opacity="0.15"/> 1272 <rect x="210" y="76" width="16" height="8" rx="3" fill="#D97706" opacity="0.7"/> 1273 <line x1="34" y1="110" x2="246" y2="110" stroke="#f0f0f0" stroke-width="1"/> 1274 <rect x="34" y="122" width="36" height="22" rx="6" fill="#06B6D4" opacity="0.12"/> 1275 <rect x="80" y="122" width="36" height="22" rx="6" fill="#06B6D4" opacity="0.12"/> 1276 <rect x="126" y="122" width="36" height="22" rx="6" fill="#06B6D4" opacity="0.12"/> 1277 <rect x="172" y="122" width="36" height="22" rx="6" fill="#06B6D4" opacity="0.12"/> 1278 <rect x="38" y="130" width="28" height="5" rx="2" fill="#0891B2" opacity="0.5"/> 1279 <rect x="84" y="130" width="28" height="5" rx="2" fill="#0891B2" opacity="0.5"/> 1280 <rect x="130" y="130" width="28" height="5" rx="2" fill="#0891B2" opacity="0.5"/> 1281 <rect x="176" y="130" width="28" height="5" rx="2" fill="#0891B2" opacity="0.5"/> 1282 <rect x="34" y="158" width="120" height="6" rx="3" fill="#888" opacity="0.25"/> 1283 </svg> 1284 </div> 1285 <div class="feature-panel-text"> 1286 <div class="fp-tag">Notification Alerts</div> 1287 <h3>New subscriber notifications</h3> 1288 <p>Get alerted instantly via your preferred channel whenever someone new subscribes.</p> 1289 <ul class="fp-list"> 1290 <li>Email, Webhook, Slack, Discord</li> 1291 <li>Telegram, WhatsApp, SMS</li> 1292 <li>Phone call, X tweet, MS Teams</li> 1293 <li>Google Chat & internal notifications</li> 1294 </ul> 1295 </div> 1296 </div> 1297 1298 <div class="feature-panel fp-slate"> 1299 <div class="feature-panel-text"> 1300 <div class="fp-tag">Subscribers</div> 1301 <h3>
1301Comprehensive subscriber journey</h3> 1302 <p>Understand your audience with deep behavioral tracking per subscriber.</p> 1303 <ul class="fp-list"> 1304 <li>Continent, country & city data</li> 1305 <li>OS, browser & device info</li> 1306 <li>Referral URL page tracking</li> 1307 <li>Full notification activity logs</li> 1308 </ul> 1309 </div> 1310 <div class="feature-panel-visual"> 1311 <svg class="fp-svg" viewBox="0 0 280 196" xmlns="http://www.w3.org/2000/svg"> 1312 <circle cx="240" cy="40" r="44" fill="rgba(255,255,255,0.06)"/> 1313 <rect x="18" y="16" width="244" height="164" rx="14" fill="white" opacity="0.92"/> 1314 <circle cx="54" cy="52" r="20" fill="#334155" opacity="0.15"/> 1315 <circle cx="54" cy="46" r="9" fill="#334155" opacity="0.4"/> 1316 <path d="M34 72 Q34 60 54 60 Q74 60 74 72" fill="#334155" opacity="0.3"/> 1317 <rect x="84" y="34" width="100" height="8" rx="4" fill="#333" opacity="0.65"/> 1318 <rect x="84" y="48" width="70" height="6" rx="3" fill="#888" opacity="0.38"/> 1319 <rect x="84" y="60" width="84" height="6" rx="3" fill="#888" opacity="0.28"/> 1320 <line x1="34" y1="84" x2="246" y2="84" stroke="#eee" stroke-width="1"/> 1321 <rect x="34" y="96" width="46" height="6" rx="3" fill="#aaa" opacity="0.45"/> 1322 <rect x="90" y="96" width="80" height="6" rx="3" fill="#333" opacity="0.5"/> 1323 <rect x="34" y="112" width="46" height="6" rx="3" fill="#aaa" opacity="0.45"/> 1324 <rect x="90" y="112" width="64" height="6" rx="3" fill="#333" opacity="0.5"/> 1325 <rect x="34" y="128" width="46" height="6" rx="3" fill="#aaa" opacity="0.45"/> 1326 <rect x="90" y="128" width="72" height="6" rx="3" fill="#333" opacity="0.5"/> 1327 <rect x="34" y="144" width="46" height="6" rx="3" fill="#aaa" opacity="0.45"/> 1328 <rect x="90" y="144" width="56" height="6" rx="3" fill="#333" opacity="0.5"/> 1329 <rect x="176" y="94" width="52" height="16" rx="8" fill="#2E90B3" opacity="0.12"/> 1330 <rect x="182" y="100" width="40" height="5" rx="2" fill="#2E90B3" opacity="0.55"/> 1331 <rect x="176" y="118" width="52" height="16" rx="8" fill="#059669" opacity="0.12"/> 1332 <rect x="182" y="124" width="40" height="5" rx="2" fill="#059669" opacity="0.55"/> 1333 <rect x="176" y="142" width="52" height="16" rx="8" fill="#7C3AED" opacity="0.12"/> 1334 <rect x="182" y="148" width="40" height="5" rx="2" fill="#7C3AED" opacity="0.55"/> 1335 </svg> 1336 </div> 1337 </div> 1338 1339 </div> 1340 </div> 1341 </div> 1342</section> 1343 1344<!-- ââ INTEGRATIONS ââ --> 1345<section class="integrations-section" id="integrations"> 1346 <div class="container"> 1347 <div class="section-header fade-up"> 1348 <span class="badge">Integrations</span> 1349 <h2>Get notified your way</h2> 1350 <p>12+ integrations for subscriber alert notifications â connect the tools your team already uses.</p> 1351 </div> 1352 <div class="integrations-grid fade-up"> 1353 <div class="integration-item"><span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="#2E90B3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><polyline points="2,4 12,13 22,4"/></svg></span>Email</div> 1354 <div class="integration-item"><span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="#6366F1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></span>Webhook</div> 1355 <div class="integration-item"><span class="icon"><svg viewBox="0 0 24 24"><path fill="#E01E5A" d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522z"/><path fill="#36C5F0" d="M8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521z"/><path fill="#2EB67D" d="M18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522zm-1.271 0a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.162 0a2.528 2.528 0 0 1 2.523 2.522z"/><path fill="#ECB22E" d="M15.162 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.162 24a2.527 2.527 0 0 1-2.52-2.522v-2.522zm0-1.271a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.162a2.528 2.528 0 0 1-2.522 2.523z"/></svg></span>Slack</div> 1356 <div class="integration-item"><span class="icon"><svg viewBox="0 0 24 24" fill="#5865F2"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057c.002.022.015.043.036.06a19.885 19.885 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18
13561.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.84 19.84 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg></span>Discord</div> 1357 <div class="integration-item"><span class="icon"><svg viewBox="0 0 24 24" fill="#26A5E4"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg></span>Telegram</div> 1358 <div class="integration-item"><span class="icon"><svg viewBox="0 0 24 24" fill="#25D366"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg></span>WhatsApp</div> 1359 <div class="integration-item"><span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="#64748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="m2 10 10 5 10-5"/></svg></span>SMS</div> 1360 <div class="integration-item"><span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="#22C55E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.18h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.73a16 16 0 0 0 6.29 6.29l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg></span>Phone Call</div> 1361 <div class="integration-item"><span class="icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></span>X / Twitter</div> 1362 <div class="integration-item"><span class="icon"><svg viewBox="0 0 24 24" fill="#6264A7"><path d="M19.952 4H4.048C2.915 4 2 4.915 2 6.048v11.904C2 19.085 2.915 20 4.048 20h15.904C21.085 20 22 19.085 22 17.952V6.048C22 4.915 21.085 4 19.952 4zM8 15H6v-5h2v5zm-1-5.75A1.25 1.25 0 1 1 7 6.5a1.25 1.25 0 0 1 0 2.75zM18 15h-2v-2.5c0-.828-.448-1.5-1.25-1.5S13.5 11.672 13.5 12.5V15h-2v-5h2v.75a2.744 2.744 0 0 1 2.25-1c1.625 0 2.25 1.063 2.25 2.5V15z"/></svg></span>MS Teams</div> 1363 <div class="integration-item"><span class="icon"><svg viewBox="0 0 24 24" fill="#1A73E8"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.5 7h-3V7.5a1.5 1.5 0 0 0-3 0V9h-3a.5.5 0 0 0 0 1h1.25l.938 6h5.624l.938-6H16.5a.5.5 0 0 0 0-1z"/></svg></span>Google Chat</div> 1364 <div class="integration-item"><span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="#2E90B3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></span>Internal</div> 1365 </div> 1366 </div> 1367</section> 1368 1369<!-- ââ API ââ --> 1370<section class="api-section" id="api"> 1371 <div class="container"> 1372 <div class="api-grid"> 1373 <div class="api-content fade-up">
1374 <span class="badge">Developer Ready</span> 1375 <h2>A full-featured API built for developers</h2> 1376 <p>Everything in the UI is exposed via a clean REST API. Build integrations, automate workflows, and embed push notifications directly into your application.</p> 1377 <div class="api-endpoints"> 1378 <div class="api-endpoint"><span class="method method-post">POST</span>/api/campaigns</div> 1379 <div class="api-endpoint"><span class="method method-get">GET</span>/api/subscribers</div> 1380 <div class="api-endpoint"><span class="method method-post">POST</span>/api/personal-notifications</div> 1381 <div class="api-endpoint"><span class="method method-get">GET</span>/api/websites</div> 1382 <div class="api-endpoint"><span class="method method-post">POST</span>/api/flows</div> 1383 <div class="api-endpoint"><span class="method method-get">GET</span>/api/segments</div> 1384 </div> 1385 <a href="https://pushify.com/api-documentation" class="btn btn-primary">Read API Documentation â</a> 1386 </div> 1387 <div class="code-block fade-up stagger-1"> 1388 <pre><span class="code-comment"># Send a personal push notification</span> 1389<span class="code-key">curl</span> --request <span class="code-val">POST</span> \ 1390 --url <span class="code-str">'https://pushify.com/api/personal-notifications'</span> \ 1391 --header <span class="code-str">'Authorization: Bearer {api_key}'</span> \ 1392 --header <span class="code-str">'Content-Type: multipart/form-data'</span> \ 1393 --form <span class="code-str">'name=Example name'</span> \ 1394 --form <span class="code-str">'website_id=1'</span> \ 1395 --form <span class="code-str">'subscriber_id=1'</span> \ 1396 --form <span class="code-str">'title=Hello ð'</span> \ 1397 --form <span class="code-str">'description=You have a new message'</span></pre> 1398 </div> 1399 </div> 1400 </div> 1401</section> 1402 1403<!-- ââ PRICING ââ --> 1404<section class="pricing-section" id="pricing"> 1405 <div class="container"> 1406 <div class="section-header fade-up"> 1407 <span class="badge">Pricing</span> 1408 <h2>Simple, transparent pricing.</h2> 1409 <p>Start free and scale as you grow. No hidden fees, no surprise charges.</p> 1410 </div> 1411 <div class="pricing-toggle fade-up"> 1412 <span class="toggle-label">Monthly</span> 1413 <label class="toggle-switch"> 1414 <input type="checkbox" id="billingToggle" onchange="toggleBilling()" /> 1415 <span class="toggle-track"></span> 1416 </label> 1417 <span class="toggle-label">Annual <span class="save-badge">Save 20%</span></span> 1418 </div> 1419 <div class="pricing-grid fade-up"> 1420 1421 <!-- STARTER --> 1422 <div class="pricing-card"> 1423 <div class="plan-name">Starter</div> 1424 <div class="plan-price"><span class="plan-price-amount">$0</span><span class="plan-price-period">/mo</span></div> 1425 <div class="plan-description">Lifetime free plan â no credit card needed.</div> 1426 <div class="plan-divider"></div> 1427 <ul class="plan-features"> 1428 <li><span class="tick">â</span> Unlimited websites</li> 1429 <li><span class="tick">â</span> Unlimited subscribers</li> 1430 <li><span class="tick">â</span> Unlimited campaigns / month</li> 1431 <li><span class="tick">â</span> Unlimited sent notifications / month</li> 1432 <li><span class="tick">â</span> Unlimited personal notifications <i class="ph" data-h="Personal notifications are like campaigns, but for one person only. Used for testing, dedicated notifications or API.">i</i></li> 1433 <li><span class="tick">â</span> 1 RSS automation <i class="ph" data-h="Parse RSS feeds and send push notifications to your subscribers automatically.">i</i></li> 1434 <li><span class="tick">â</span> 1 recurring campaign <i class="ph" data-h="Deliver recurring campaigns to your users every day, week or month.">i</i></li> 1435 <li><span class="tick">â</span> Unlimited segments</li> 1436 <li><span class="tick">â</span> Notification handlers <i class="ph" data-h="Webhook, Slack, Discord, Telegram, MS Teams, X, Google Chat, Internal: Unlimited · Email, SMS, Phone, WhatsApp: Not available">i</i></li> 1437 <li><span class="tick">â</span> Unlimited flows</li> 1438 <li><span class="tick">â</span> Unlimited PWAs</li> 1439 <li><span class="cross">â</span> Custom domains (0)</li> 1440 <li><span class="tick">â</span> 10 days subscriber log retention</li> 1441 <li><span class="cross">â</span> Analytics <i class="ph" data-h="Advanced analytics & tracking for subscribers and push notifications.">i</i></li> 1442 <li><span class="cross">â</span> API access <i class="ph" data-h="Get access to use the REST API.">i</i></li> 1443 <li><span class="cross">â</span> White labeling <i class="ph" data-h="White label your whole account title, logo, favicon and footer.">i</i></li> 1444 <li><span class="cross">â</span> Export features (0) <i class="ph" data-h="CSV export â · JSON export â · PDF export â">i</i></li> 1445 <li><span class="tick">â</span> No ads <i class="ph" data-h="No ads for everything related to your account and experience.">i</i></li> 1446 <li><span class="tick">â</span> Removable branding <i class="ph" data-h="All the branding will be removed from branded resources.">i</i></li> 1447 <li><span class="cross">â</span> Custom branding <i class="ph" data-h="Customize any brand-able resources with ease.">i</i></li> 1448 </ul> 1449 <a href="https://pushify.com/register" class="btn btn-ghost plan-cta">Get started free</a> 1450 </div> 1451 1452 <!-- PROFESSIONAL --> 1453 <div class="pricing-card popular"> 1454 <div class="popular-badge">â Most Popular</div> 1455 <div class="plan-name">Professional</div> 1456 <div class="plan-price"><span class="plan-price-amount" id="proPrice">$10</span><span class="plan-price-period">/mo</span></div> 1457 <div class="plan-description">
1457For growing teams and serious marketers.</div> 1458 <div class="plan-divider"></div> 1459 <ul class="plan-features"> 1460 <li><span class="tick">â</span> 1 website</li> 1461 <li><span class="tick">â</span> 10,000 subscribers</li> 1462 <li><span class="tick">â</span> Unlimited campaigns / month</li> 1463 <li><span class="tick">â</span> Unlimited sent notifications / month</li> 1464 <li><span class="tick">â</span> Unlimited personal notifications <i class="ph" data-h="Personal notifications are like campaigns, but for one person only. Used for testing, dedicated notifications or API.">i</i></li> 1465 <li><span class="tick">â</span> Unlimited RSS automations <i class="ph" data-h="Parse RSS feeds and send push notifications to your subscribers automatically.">i</i></li> 1466 <li><span class="tick">â</span> Unlimited recurring campaigns <i class="ph" data-h="Deliver recurring campaigns to your users every day, week or month.">i</i></li> 1467 <li><span class="tick">â</span> Unlimited segments</li> 1468 <li><span class="tick">â</span> Notification handlers <i class="ph" data-h="Email, Webhook, Slack, Discord, Telegram, MS Teams, X, Google Chat, Internal: Unlimited · SMS, Phone, WhatsApp: Not available">i</i></li> 1469 <li><span class="tick">â</span> Unlimited flows</li> 1470 <li><span class="tick">â</span> Unlimited PWAs</li> 1471 <li><span class="tick">â</span> 1 custom domain</li> 1472 <li><span class="tick">â</span> 1 month subscriber log retention</li> 1473 <li><span class="tick">â</span> Analytics <i class="ph" data-h="Advanced analytics & tracking for subscribers and push notifications.">i</i></li> 1474 <li><span class="tick">â</span> API access <i class="ph" data-h="Get access to use the REST API.">i</i></li> 1475 <li><span class="tick">â</span> White labeling <i class="ph" data-h="White label your whole account title, logo, favicon and footer.">i</i></li> 1476 <li><span class="tick">â</span> 3 export features <i class="ph" data-h="CSV export â · JSON export â · PDF export â">i</i></li> 1477 <li><span class="tick">â</span> No ads <i class="ph" data-h="No ads for everything related to your account and experience.">i</i></li> 1478 <li><span class="tick">â</span> Removable branding <i class="ph" data-h="All the branding will be removed from branded resources.">i</i></li> 1479 <li><span class="cross">â</span> Custom branding <i class="ph" data-h="Customize any brand-able resources with ease.">i</i></li> 1480 </ul> 1481 <a href="https://pushify.com/plan" class="btn btn-primary plan-cta">Choose Professional â</a> 1482 </div> 1483 1484 <!-- ENTERPRISE --> 1485 <div class="pricing-card"> 1486 <div class="plan-name">Enterprise</div> 1487 <div class="plan-price"><span class="plan-price-amount" style="font-size:36px;letter-spacing:-1px">Custom</span></div> 1488 <div class="plan-description">Contact us for enterprise pricing.</div> 1489 <div class="plan-divider"></div> 1490 <ul class="plan-features"> 1491 <li><span class="tick">â</span> Unlimited websites</li> 1492 <li><span class="tick">â</span> Unlimited subscribers</li> 1493 <li><span class="tick">â</span> Unlimited campaigns / month</li> 1494 <li><span class="tick">â</span> Unlimited sent notifications / month</li> 1495 <li><span class="tick">â</span> Unlimited personal notifications <i class="ph" data-h="Personal notifications are like campaigns, but for one person only. Used for testing, dedicated notifications or API.">i</i></li> 1496 <li><span class="tick">â</span> Unlimited RSS automations <i class="ph" data-h="Parse RSS feeds and send push notifications to your subscribers automatically.">i</i></li> 1497 <li><span class="tick">â</span> Unlimited recurring campaigns <i class="ph" data-h="Deliver recurring campaigns to your users every day, week or month.">i</i></li> 1498 <li><span class="tick">â</span> Unlimited segments</li> 1499 <li><span class="tick">â</span> Notification handlers <i class="ph" data-h="All 12 handler types unlimited: Email, Webhook, Slack, Discord, Telegram, MS Teams, SMS, Phone, WhatsApp, X, Google Chat, Internal">i</i></li> 1500 <li><span class="tick">â</span> Unlimited flows</li> 1501 <li><span class="tick">â</span> Unlimited PWAs</li> 1502 <li><span class="tick">â</span> Unlimited custom domains</li> 1503 <li><span class="tick">â</span> Unlimited subscriber log retention</li> 1504 <li><span class="tick">â</span> Analytics <i class="ph" data-h="Advanced analytics & tracking for subscribers and push notifications.">i</i></li> 1505 <li><span class="tick">â</span> API access <i class="ph" data-h="Get access to use the REST API.">i</i></li> 1506 <li><span class="tick">â</span> White labeling <i class="ph" data-h="White label your whole account title, logo, favicon and footer.">i</i></li> 1507 <li><span class="tick">â</span> 3 export features <i class="ph" data-h="CSV export â · JSON export â · PDF export â">i</i></li> 1508 <li><span class="tick">â</span> No ads <i class="ph" data-h="No ads for everything related to your account and experience.">i</i></li> 1509 <li><span class="tick">â</span> Removable branding <i class="ph" data-h="All the branding will be removed from branded resources.">i</i></li> 1510 <li><span class="tick">â</span> Custom branding <i class="ph" data-h="Customize any brand-able resources with ease.">i</i></li> 1511 </ul> 1512 <a href="https://pushify.com/contact" class="btn btn-ghost plan-cta">Contact us</a> 1513 </div> 1514 1515 </div> 1516 </div> 1517</section> 1518 1519<!-- ââ FAQ ââ --> 1520<section class="faq-section"> 1521 <div class="container"> 1522 <div class="section-header fade-up">
1523 <span class="badge">FAQ</span> 1524 <h2>Common questions answered</h2> 1525 </div> 1526 <div class="faq-list fade-up"> 1527 <div class="faq-item"> 1528 <button class="faq-question" aria-expanded="false" onclick="toggleFaq(this)">How do I get started?<span class="faq-chevron">â</span></button> 1529 <div class="faq-answer"><p>Sign up at pushify.com/register, add your website and copy the small JavaScript snippet to your site. You'll be collecting subscribers and sending push notifications within minutes â no coding required beyond the snippet install.</p></div> 1530 </div> 1531 <div class="faq-item"> 1532 <button class="faq-question" aria-expanded="false" onclick="toggleFaq(this)">Do you offer customer support?<span class="faq-chevron">â</span></button> 1533 <div class="faq-answer"><p>Yes â all plans include support via email at [email protected], through the contact page, or on WhatsApp. Enterprise customers receive priority support with an SLA.</p></div> 1534 </div> 1535 <div class="faq-item"> 1536 <button class="faq-question" aria-expanded="false" onclick="toggleFaq(this)">Is my data secure?<span class="faq-chevron">â</span></button> 1537 <div class="faq-answer"><p>Absolutely. All data is encrypted in transit and at rest. We comply with GDPR and major data protection regulations. Your subscriber data belongs to you and you can export it at any time.</p></div> 1538 </div> 1539 <div class="faq-item"> 1540 <button class="faq-question" aria-expanded="false" onclick="toggleFaq(this)">Will I need technical skills?<span class="faq-chevron">â</span></button> 1541 <div class="faq-answer"><p>Not at all. Pushify is designed for marketers and non-technical users. Setup is just adding a snippet (like Google Analytics). Everything else is managed through an intuitive dashboard. Developers can also use the full REST API.</p></div> 1542 </div> 1543 <div class="faq-item"> 1544 <button class="faq-question" aria-expanded="false" onclick="toggleFaq(this)">What makes this different from other tools?<span class="faq-chevron">â</span></button> 1545 <div class="faq-answer"><p>Pushify offers a genuinely unlimited free plan â unlimited subscribers, campaigns, and notifications. Most competitors heavily limit the free tier. We also include flows, RSS automations, PWA builder, and 12+ integrations that others charge extra for.</p></div> 1546 </div> 1547 </div> 1548 </div> 1549</section> 1550 1551<!-- ââ BLOG ââ --> 1552<section class="blog-section" id="blog"> 1553 <div class="container"> 1554 <div class="section-header fade-up"> 1555 <span class="badge">Blog</span> 1556 <h2>Latest from Pushify</h2> 1557 <p>Tips, guides and strategies to get more from web push notifications.</p> 1558 </div> 1559 <div class="blog-grid fade-up" id="blogGrid"></div> 1560 <div style="text-align:center;margin-top:40px" class="fade-up"> 1561 <a href="https://pushify.com/blog" class="btn btn-ghost">View all posts â</a> 1562 </div> 1563 </div> 1564</section> 1565 1566<!-- ââ CTA ââ --> 1567<section class="cta-section"> 1568 <div class="cta-ring"></div> 1569 <div class="cta-ring"></div> 1570 <div class="cta-ring"></div> 1571 <div class="cta-content fade-up"> 1572 1573 <div class="cta-badge"> 1574 <span class="cta-badge-dot"></span> 1575 Free Forever Plan 1576 </div> 1577 1578 <h2>Start Sending Push Notifications<br><span class="cta-h2-highlight">to Every Subscriber â Today</span></h2> 1579 <p>No credit card. No time limit. Unlimited subscribers and notifications<br class="cta-br"> on the free plan â forever.</p> 1580 1581 <!-- 3-step process --> 1582 <div class="cta-steps"> 1583 <div class="cta-step"> 1584 <div class="cta-step-icon">ð</div> 1585 <div class="cta-step-num">Step 1</div> 1586 <div class="cta-step-label">Install snippet</div> 1587 </div> 1588 <div class="cta-step-arrow">â</div> 1589 <div class="cta-step"> 1590 <div class="cta-step-icon">ð¥</div> 1591 <div class="cta-step-num">Step 2</div> 1592 <div class="cta-step-label">Collect subscribers</div> 1593 </div> 1594 <div class="cta-step-arrow">â</div> 1595 <div class="cta-step"> 1596 <div class="cta-step-icon">ð</div> 1597 <div class="cta-step-num">Step 3</div> 1598 <div class="cta-step-label">Send campaigns</div> 1599 </div> 1600 </div> 1601 1602 <div class="cta-actions"> 1603 <a href="https://pushify.com/register" class="btn-cta-primary">
1604 <span>ð</span> Create free account â 1605 </a> 1606 <a href="https://pushify.com/plan" class="btn-cta-ghost">Compare plans</a> 1607 </div> 1608 1609 <!-- social proof --> 1610 <div class="cta-proof"> 1611 <div class="cta-avatars"> 1612 <div class="cta-avatar">ð</div> 1613 <div class="cta-avatar">ð§</div> 1614 <div class="cta-avatar">ð©</div> 1615 <div class="cta-avatar">ð¨</div> 1616 <div class="cta-avatar">ð</div> 1617 </div> 1618 <div class="cta-proof-text">Trusted by <strong>12,000+</strong> websites worldwide</div> 1619 </div> 1620 1621 <div class="no-cc"> 1622 <span>â No credit card required</span> 1623 <span class="no-cc-dot">·</span> 1624 <span>â Live in under 5 minutes</span> 1625 <span class="no-cc-dot">·</span> 1626 <span>â Free forever â no expiry</span> 1627 </div> 1628 1629 </div> 1630</section> 1631 1632<!-- ââ FOOTER ââ --> 1633<footer> 1634 <div class="container"> 1635 <div class="footer-grid"> 1636 <div class="footer-brand"> 1637 <a href="https://pushify.com" class="logo" style="margin-bottom:14px;display:inline-flex"> 1638 <div class="logo-icon"><img src="https://pushify.com/uploads/main/4c2b584f6f0013e380a5b53a3a1e0bea.png" alt="Pushify" /></div> 1639 </a> 1640 <p>Unlimited web push notifications for websites of all sizes. Free to start, powerful at scale.</p> 1641 <div class="footer-socials"> 1642 <a href="https://facebook.com/PushifyTeam" class="social-btn" title="Facebook">f</a> 1643 <a href="https://x.com/PushifyTeam" class="social-btn" title="X / Twitter">ð</a> 1644 <a href="https://wa.me/+919885211789" class="social-btn" title="WhatsApp">ð¬</a> 1645 <a href="mailto:[email protected]" class="social-btn" title="Email">@</a> 1646 </div> 1647 </div> 1648 <div class="footer-col"> 1649 <h4>Product</h4> 1650 <ul> 1651 <li><a href="https://pushify.com/plan">Pricing & Plans</a></li> 1652 <li><a href="https://pushify.com/api-documentation">API Documentation</a></li> 1653 <li><a href="https://pushify.com/register">Get started free</a></li> 1654 <li><a href="https://pushify.com/login">Sign in</a></li> 1655 </ul> 1656 </div> 1657 <div class="footer-col"> 1658 <h4>Features</h4> 1659 <ul> 1660 <li><a href="#features">Push Campaigns</a></li> 1661 <li><a href="#features">Automation Flows</a></li> 1662 <li><a href="#features">RSS Automations</a></li> 1663 <li><a href="#features">PWA Builder</a></li> 1664 <li><a href="#integrations">Integrations</a></li> 1665 <li><a href="#api">API & Webhooks</a></li> 1666 <li><a href="#pricing">Pricing</a></li> 1667 </ul> 1668 </div> 1669 <div class="footer-col"> 1670 <h4>Company</h4> 1671 <ul> 1672 <li><a href="https://pushify.com/blog">Blog</a></li> 1673 <li><a href="https://pushify.com/contact">Contact Us</a></li> 1674 <li><a href="https://pushify.com/page/privacy">Privacy Policy</a></li> 1675 <li><a href="https://pushify.com/page/terms">Terms & Conditions</a></li> 1676 <li><a href="#" onclick="window.CookieConsent?.showPreferences();return false;">Cookies</a></li> 1677 </ul> 1678 </div> 1679 </div> 1680 <div class="footer-bottom"> 1681 <span>© 2025 Pushify. All rights reserved.</span> 1682 </div> 1683 </div> 1684</footer> 1685 1686<!-- ââ WhatsApp Float Button ââ --> 1687<a id="waFloatBtn" href="#" target="_blank" rel="noopener" aria-label="Chat on WhatsApp" title="Chat with us on WhatsApp"> 1688 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="28" height="28"><path fill="#fff" d="M24 4C13 4 4 13 4 24c0 3.6 1 7 2.7 10L4 44l10.3-2.7C17.1 43 20.5 44 24 44c11 0 20-9 20-20S35 4 24 4z"/><path fill="#25D366" d="M24 6C14.1 6 6 14.1 6 24c0 3.4.9 6.6 2.6 9.4L6.2 42l8.8-2.3C17.5 41.1 20.7 42 24 42c9.9 0 18-8.1 18-18S33.9 6 24 6z"/><path fill="#fff" d="M33.5 28.6c-.5-.2-2.8-1.4-3.2-1.5-.4-.2-.7-.2-1 .2-.3.4-1.2 1.5-1.4 1.8-.3.3-.5.4-1 .1-.5-.2-2-.7-3.8-2.3-1.4-1.2-2.4-2.8-2.6-3.2-.3-.5 0-.7.2-1 .2-.2.5-.5.7-.8.2-.3.3-.5.4-.8.2-.3 0-.6-.1-.8-.1-.2-1-2.5-1.4-3.4-.4-.9-.8-.8-1-.8h-.9c-.3 0-.8.1-1.2.6-.4.5-1.6 1.6-1.6 3.8s1.6 4.4 1.8 4.7c.2.3 3.2 4.9 7.8 6.7 1.1.5 2 .7 2.7.9 1.1.3 2.1.3 2.9.2.9-.1 2.8-1.1 3.2-2.2.4-1.1.4-2 .3-2.2-.1-.2-.4-.3-.9-.5z"/></svg> 1689</a> 1690
1691<script> 1692 // ââ Theme âââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 1693 const html = document.documentElement; 1694 const themeBtn = document.getElementById('themeToggle'); 1695 1696 function applyTheme(dark) { 1697 html.classList.toggle('dark', dark); 1698 themeBtn.title = dark ? 'Switch to light mode' : 'Switch to dark mode'; 1699 document.querySelector('nav').style.background = ''; 1700 } 1701 function toggleTheme() { 1702 const isDark = html.classList.toggle('dark'); 1703 localStorage.setItem('theme', isDark ? 'dark' : 'light'); 1704 applyTheme(isDark); 1705 } 1706 (function initTheme() { 1707 const saved = localStorage.getItem('theme'); 1708 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; 1709 applyTheme(saved === 'dark' || (!saved && prefersDark)); 1710 })(); 1711 1712 // ââ Auth check (works when deployed at pushify.com) ââââââââââââââââ 1713 async function checkAuth() { 1714 try { 1715 const res = await fetch('/api/user', { credentials: 'include' }); 1716 if (res.ok) { 1717 const navLink = document.getElementById('navAuthLink'); 1718 const mobileLink = document.getElementById('mobileAuthLink'); 1719 const cta = document.getElementById('navCta'); 1720 // Hide "Sign in", replace CTA with Dashboard 1721 navLink.style.display = 'none'; 1722 mobileLink.textContent = 'Dashboard'; 1723 mobileLink.href = '/dashboard'; 1724 cta.textContent = 'Dashboard â'; 1725 cta.href = '/dashboard'; 1726 cta.style.background = 'var(--brand)'; 1727 } 1728 } catch (_) { /* not on pushify.com or not logged in */ } 1729 } 1730 checkAuth(); 1731 1732 // ââ Mobile nav ââââââââââââââââââââââââââââââââââââââââââââââââââââ 1733 function openMobileNav() { 1734 document.getElementById('mobileNav').classList.add('open'); 1735 document.getElementById('mobileNavBackdrop').classList.add('open'); 1736 document.body.style.overflow = 'hidden'; 1737 } 1738 function closeMobileNav() { 1739 document.getElementById('mobileNav').classList.remove('open'); 1740 document.getElementById('mobileNavBackdrop').classList.remove('open'); 1741 document.body.style.overflow = ''; 1742 } 1743 1744 // ââ FAQ accordion âââââââââââââââââââââââââââââââââââââââââââââââââ 1745 function toggleFaq(btn) { 1746 const item = btn.closest('.faq-item'); 1747 const isOpen = item.classList.contains('open'); 1748 document.querySelectorAll('.faq-item').forEach(i => { 1749 i.classList.remove('open'); 1750 i.querySelector('.faq-question').setAttribute('aria-expanded', 'false'); 1751 }); 1752 if (!isOpen) { 1753 item.classList.add('open'); 1754 btn.setAttribute('aria-expanded', 'true'); 1755 } 1756 } 1757 1758 // ââ Pricing toggle ââââââââââââââââââââââââââââââââââââââââââââââââ 1759 function toggleBilling() { 1760 const annual = document.getElementById('billingToggle').checked; 1761 document.getElementById('proPrice').textContent = annual ? '$8' : '$10'; 1762 } 1763 1764 // ââ Blog: fetch RSS, auto-populate latest 3 ââââââââââââââââââââââ 1765 const FALLBACK_POSTS = [ 1766 { title: 'ð Available Integrations for Subscriber Alerts', link: 'https://pushify.com/blog/available-integrations-for-subscriber-alerts', description: 'A complete guide to all 12+ available integrations to stay on top of new subscriber activity in real time.', img: 'https://pushify.com/uploads/blog/5ca2be7f9db19b00ad442074bf7aa359.png', category: 'Integrations' }, 1767 { title: 'ð§ How to Automate Welcome, Reminder & Re-Engagement Campaigns', link: 'https://pushify.com/blog/automate-welcome-reminder-reengagement', description: 'Step-by-step guide to building automated notification flows that onboard, nurture and re-engage subscribers.', img: 'https://pushify.com/uploads/blog/4b1946af36ec8899ad783ee975d30f05.png', category: 'Automation' }, 1768 { title: 'ð§ The Psychology of Push Notifications: Timing, Triggers & Tactics', link: 'https://pushify.com/blog/psychology-of-push-notifications', description: 'What the data says about when and how to send push notifications that actually get clicked.', img: 'https://pushify.com/uploads/blog/28ba698cdc0de90781b548a7602adb70.png', category: 'Strategy' } 1769 ]; 1770 1771 function slugCategory(title) { 1772 if (/vs\s/i.test(title) || /compar/i.test(title)) return 'Comparisons'; 1773 if (/automat|flow|drip|rss/i.test(title)) return 'Automation'; 1774 if (/api|webhook|develop/i.test(title)) return 'Developers'; 1775 if (/segment|target/i.test(title)) return 'Advanced'; 1776 if (/introduc|update/i.test(title)) return 'Product Update';
1777 if (/integrat/i.test(title)) return 'Integrations'; 1778 if (/cart|abandon/i.test(title)) return 'E-commerce'; 1779 return 'Guide'; 1780 } 1781 1782 function renderBlogCards(posts) { 1783 document.getElementById('blogGrid').innerHTML = posts.slice(0, 3).map(p => { 1784 const title = p.title.replace(/^\p{Emoji}\s*/u, ''); 1785 const cat = p.category || slugCategory(p.title); 1786 const desc = (p.description || '').replace(/<[^>]+>/g, '').substring(0, 130); 1787 const imgHtml = p.img 1788 ? `<img src="${p.img}" alt="${title}" loading="lazy" />` 1789 : `<span class="emoji-fallback">ð</span>`; 1790 return `<a href="${p.link}" class="blog-card" target="_blank" rel="noopener"> 1791 <div class="blog-card-img">${imgHtml}</div> 1792 <div class="blog-card-body"> 1793 <div class="blog-tag">${cat}</div> 1794 <h3>${title}</h3> 1795 <p>${desc}â¦</p> 1796 </div> 1797 </a>`; 1798 }).join(''); 1799 } 1800 1801 async function loadBlog() { 1802 renderBlogCards(FALLBACK_POSTS); // show immediately; replace with live data if available 1803 try { 1804 const res = await fetch('https://pushify.com/blog/feed', { mode: 'cors' }); 1805 if (!res.ok) return; 1806 const xml = await res.text(); 1807 const doc = new DOMParser().parseFromString(xml, 'text/xml'); 1808 const posts = [...doc.querySelectorAll('item')].reverse().slice(0, 3).map(item => ({ 1809 title: item.querySelector('title')?.textContent || '', 1810 link: item.querySelector('link')?.textContent || '', 1811 description: item.querySelector('description')?.textContent || '', 1812 category: item.querySelector('category')?.textContent || '', 1813 img: null 1814 })); 1815 if (!posts.length) return; 1816 await Promise.all(posts.map(async post => { 1817 try { 1818 const pathname = new URL(post.link).pathname; 1819 const r = await fetch(pathname); 1820 const text = await r.text(); 1821 const m = text.match(/property="og:image"\s+content="([^"]+)"/); 1822 if (m) post.img = m[1]; 1823 } catch (_) {} 1824 })); 1825 renderBlogCards(posts); 1826 } catch (_) {} 1827 } 1828 loadBlog(); 1829 1830 1831 // ââ Cookie consent (vanilla-cookieconsent v3) âââââââââââââââââââââ 1832 window.addEventListener('DOMContentLoaded', () => { 1833 if (typeof window.CookieConsent === 'undefined') return; 1834 window.CookieConsent.run({ 1835 categories: { 1836 necessary: { enabled: true, readOnly: true }, 1837 analytics: {}, 1838 targeting: {}, 1839 }, 1840 language: { 1841 default: 'en', 1842 translations: { 1843 en: { 1844 consentModal: { 1845 title: 'We use cookies ðª', 1846 description: 'Hi, this website uses essential cookies to ensure its proper operation and tracking cookies to understand how you interact with it. The latter will be set only after consent.', 1847 acceptAllBtn: 'Accept all', 1848 acceptNecessaryBtn: 'Reject all', 1849 showPreferencesBtn: 'Customize', 1850 }, 1851 preferencesModal: { 1852 title: 'Cookie preferences', 1853 acceptAllBtn: 'Accept all', 1854 acceptNecessaryBtn: 'Reject all', 1855 savePreferencesBtn: 'Save settings', 1856 closeIconLabel: 'Close', 1857 sections: [ 1858 { title: 'Cookie usage ð¢', description: 'We use cookies to ensure the basic functionalities of the website and to enhance your online experience. For more details please read the full <a href="https://pushify.com/page/privacy" class="cc-link">privacy policy</a>.' }, 1859 { title: 'Strictly necessary cookies', description: 'These cookies are essential for the proper functioning of the website.', linkedCategory: 'necessary' }, 1860 { title: 'Performance and Analytics cookies', description: 'These cookies allow the website to remember the choices you have made in the past.', linkedCategory: 'analytics' }, 1861 { title: 'Advertisement and Targeting cookies', description: 'These cookies collect information about how you use the website, which pages you visited and which links you clicked on.', linkedCategory: 'targeting' }, 1862 ], 1863 }, 1864 }, 1865 }, 1866 }, 1867 guiOptions: { 1868 consentModal: { layout: 'bar', position: 'bottom center', flipButtons: fal
1868se }, 1869 preferencesModal: { layout: 'box' }, 1870 }, 1871 }); 1872 }); 1873 1874 // ââ Hero word-swap ââââââââââââââââââââââââââââââââââââââââââââââââ 1875 (function heroWordSwap() { 1876 const el = document.getElementById('heroWord'); 1877 if (!el) return; 1878 const words = ['every visitor', 'loyal customers', 'your whole list']; 1879 let idx = 0; 1880 setInterval(() => { 1881 el.classList.add('fading'); 1882 setTimeout(() => { 1883 idx = (idx + 1) % words.length; 1884 el.textContent = words[idx]; 1885 el.classList.remove('fading'); 1886 }, 280); 1887 }, 3200); 1888 })(); 1889 1890 // ââ Notification demo âââââââââââââââââââââââââââââââââââââââââââââ 1891 (function notifDemo() { 1892 const stack = document.getElementById('notifStack'); 1893 const progressBar = document.getElementById('notifProgress'); 1894 const dotsContainer = document.getElementById('notifDots'); 1895 if (!stack) return; 1896 1897 const NOTIFS = [ 1898 { icon: 'ðï¸', site: 'fashionstore.com', time: 'just now', title: 'Flash Sale â 40% off ends in 1 hour', desc: 'Your favourite items are on sale. Don\'t miss out before midnight!', primary: 'Shop now', secondary: 'Dismiss', accent: '#F97316', iconBg: '#FFF7ED', iconBorder: '#FDBA74' }, 1899 { icon: 'âï¸', site: 'myblog.com', time: '2m ago', title: 'New post: 10 SEO Tips That Actually Work in 2025', desc: 'We\'ve just published our most comprehensive SEO guide yet.', primary: 'Read now', secondary: 'Later', accent: '#10B981', iconBg: '#ECFDF5', iconBorder: '#6EE7B7' }, 1900 { icon: 'ð°', site: 'dailynews.com', time: '5m ago', title: 'Breaking: Global markets hit record highs today', desc: 'Stocks surged across Asia, Europe and the US in early trading.', primary: 'Read more', secondary: 'Dismiss', accent: '#3B82F6', iconBg: '#EFF6FF', iconBorder: '#93C5FD' }, 1901 { icon: 'â¡', site: 'myapp.io', time: '10m ago', title: 'Your free trial expires in 24 hours', desc: 'Upgrade now and keep all your data, settings and integrations.', primary: 'Upgrade', secondary: 'Remind me', accent: '#8B5CF6', iconBg: '#F5F3FF', iconBorder: '#C4B5FD' }, 1902 ]; 1903 1904 const INTERVAL = 3800; 1905 let current = 0; 1906 let progressTimer = null; 1907 1908 // Build dots 1909 NOTIFS.forEach((_, i) => { 1910 const d = document.createElement('div'); 1911 d.className = 'nd' + (i === 0 ? ' active' : ''); 1912 dotsContainer.appendChild(d); 1913 }); 1914 1915 function buildCard(n) { 1916 const card = document.createElement('div'); 1917 card.className = 'ns-card'; 1918 card.style.setProperty('--ns-accent', n.accent || 'var(--brand)'); 1919 const iconStyle = n.iconBg ? `style="background:${n.iconBg};border-color:${n.iconBorder};border-width:1.5px;"` : ''; 1920 const siteColor = n.accent ? `style="color:${n.accent}"` : ''; 1921 card.innerHTML = ` 1922 <div class="ns-live-dot"></div> 1923 <div class="ns-icon" ${iconStyle}>${n.icon}</div> 1924 <div class="ns-body"> 1925 <div class="ns-meta"><span class="ns-site" ${siteColor}>${n.site}</span><span>${n.time}</span></div> 1926 <div class="ns-title">${n.title}</div> 1927 <div class="ns-desc">${n.desc}</div> 1928 <div class="ns-btns"> 1929 <div class="ns-btn ns-primary">${n.primary}</div> 1930 <div class="ns-btn">${n.secondary}</div> 1931 </div> 1932 </div>`; 1933 return card; 1934 } 1935 1936 function setPositions() { 1937 const cards = stack.querySelectorAll('.ns-card:not(.exiting)'); 1938 const positions = ['pos-front', 'pos-mid', 'pos-back']; 1939 cards.forEach((c, i) => { 1940 c.className = 'ns-card ' + (positions[i] || 'pos-back'); 1941 }); 1942 } 1943 1944 function updateDots(idx) { 1945 dotsContainer.querySelectorAll('.nd').forEach((d, i) => d.classList.toggle('active', i === idx)); 1946 } 1947 1948 function startProgress() { 1949 if (progressBar) { progressBar.style.transition = 'none'; progressBar.style.width = '0%'; } 1950 requestAnimationFrame(() => { 1951 requestAnimationFrame(() => { 1952 if (progressBar) { progressBar.style.transition = `width ${INTERVAL}ms linear`; progressBar.style.width = '100%'; } 1953 }); 1954 }); 1955 } 1956 1957 // Init first 3 cards 1958 for (let i = Math.min(2, NOTIFS.length - 1); i >= 0; i--) { 1959 stack.appendChild(buildCard(NOTIFS[i])); 1960 } 1961 setPositions(); 1962 startProgress(); 1963 1964 setInterval(() => { 1965 current = (current + 1) % NOTIFS.length; 1966 // Exit front card 1967 const front = stack.querySelector('.pos-front'); 1968 if (front) { front.classList.replace('pos-front', 'exiting'); setTimeout(() => front.remove(), 500); } 1969 // Add new card at back 1970 const newCard = buildCard(NOTIFS[(current + 2) % NOTIFS.length]); 1971 stack.appendChild(newCard); 1972 newCard.getBoundingClientRect(); // force reflow 1973 setPositions(); 1974 updateDots(current); 1975 startProgress(); 1976 }, INTERVAL); 1977 })(); 1978 1979 // ââ Scroll animations âââââââââââââââââââââââââââââââââââââââââââââ 1980 const observer = new IntersectionObserver(entries => {
1981 entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); }); 1982 }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }); 1983 document.querySelectorAll('.fade-up').forEach(el => observer.observe(el)); 1984 1985 // ââ Nav scroll effect âââââââââââââââââââââââââââââââââââââââââââââ 1986 window.addEventListener('scroll', () => { 1987 const isDark = html.classList.contains('dark'); 1988 document.querySelector('nav').style.background = window.scrollY > 20 1989 ? (isDark ? 'rgba(7,24,32,0.97)' : 'rgba(255,255,255,0.97)') 1990 : ''; 1991 }); 1992 1993 // ââ WhatsApp dynamic link (mobile â wa.me, desktop â web.whatsapp.com) ââ 1994 (function () { 1995 var a = document.getElementById('waFloatBtn'); 1996 if (!a) return; 1997 var phone = '+919885211789'; 1998 var pageTitle = document.title; 1999 var pageUrl = location.href; 2000 var ref = document.referrer ? '\nRef: ' + document.referrer : ''; 2001 var msg = "Hi! I'm viewing: " + pageTitle + "\n" + pageUrl + ref; 2002 var isMobile = /Android|iPhone|iPad|iPod|Opera Mini|IEMobile/i.test(navigator.userAgent); 2003 var href = isMobile 2004 ? ('https://wa.me/' + phone + '?text=' + encodeURIComponent(msg)) 2005 : ('https://web.whatsapp.com/send?phone=' + phone + '&text=' + encodeURIComponent(msg)); 2006 a.setAttribute('href', href); 2007 })(); 2008 2009 2010</script>
2010 2011 2012 2013</body> 2014</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.