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<title>Zoho Bigin CRM | Neehara Premium IT Solutions</title> 7<link rel="preconnect" href="https://fonts.googleapis.com"> 8<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap" rel="stylesheet"> 9<!-- EmailJS SDK -->
10<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
10 11<style> 12 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } 13 14 :root { 15 --navy: #0B1C3F; 16 --navy2: #112656; 17 --blue: #1462D4; 18 --blue2: #2176FF; 19 --orange: #FF6B1A; 20 --orange2: #FF8C42; 21 --white: #FFFFFF; 22 --offwhite:#F4F7FF; 23 --gray: #8A9BBF; 24 --light: #E8EEFF; 25 --card-bg: rgba(255,255,255,0.04); 26 --border: rgba(255,255,255,0.08); 27 } 28 29 html { scroll-behavior: smooth; } 30 31 body { 32 font-family: 'DM Sans', sans-serif; 33 background: var(--navy); 34 color: var(--white); 35 overflow-x: hidden; 36 } 37 38 /* ââ HEADER ââ */ 39 header { 40 position: sticky; top: 0; z-index: 100; 41 background: rgba(11,28,63,0.9); 42 backdrop-filter: blur(16px); 43 border-bottom: 1px solid var(--border); 44 padding: 0 5%; 45 display: flex; align-items: center; justify-content: space-between; 46 height: 68px; 47 } 48 .logo-wrap { display: flex; align-items: center; gap: 12px; } 49 .logo-mark { 50 width: 40px; height: 40px; 51 background: linear-gradient(135deg, var(--blue), var(--orange)); 52 border-radius: 10px; 53 display: flex; align-items: center; justify-content: center; 54 font-family: 'Syne', sans-serif; font-weight: 800; font-size: 18px; 55 letter-spacing: -1px; color: #fff; 56 } 57 .logo-text { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.2; } 58 .logo-text span { display: block; font-weight: 400; font-size: 11px; color: var(--gray); letter-spacing: 0.05em; } 59 nav { display: flex; align-items: center; gap: 28px; } 60 nav a { font-size: 14px; color: var(--gray); text-decoration: none; transition: color .2s; } 61 nav a:hover { color: #fff; } 62 .btn-nav { 63 background: var(--orange); color: #fff; border: none; 64 padding: 9px 22px; border-radius: 8px; font-size: 14px; font-weight: 600; 65 cursor: pointer; transition: background .2s, transform .15s; 66 font-family: inherit; text-decoration: none; 67 } 68 .btn-nav:hover { background: var(--orange2); transform: translateY(-1px); } 69 70 /* ââ HERO ââ */ 71 .hero { 72 min-height: 92vh; 73 display: grid; grid-template-columns: 1fr 1fr; 74 align-items: center; gap: 60px; 75 padding: 80px 5% 80px; 76 position: relative; overflow: hidden; 77 } 78 .hero::before { 79 content: ''; 80 position: absolute; inset: 0; 81 background: 82 radial-gradient(ellipse 60% 70% at 70% 40%, rgba(20,98,212,0.18) 0%, transparent 70%), 83 radial-gradient(ellipse 40% 50% at 20% 80%, rgba(255,107,26,0.10) 0%, transparent 60%); 84 pointer-events: none; 85 } 86 .hero-eyebrow { 87 display: inline-flex; align-items: center; gap: 8px; 88 background: rgba(255,107,26,0.12); border: 1px solid rgba(255,107,26,0.3); 89 color: var(--orange2); padding: 5px 14px; border-radius: 100px; 90 font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; 91 margin-bottom: 22px; 92 } 93 .hero-eyebrow::before { content: 'â'; font-size: 8px; animation: pulse 2s infinite; } 94 @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} } 95 .hero h1 { 96 font-family: 'arial', sans-serif; font-weight: 800; 97 font-size: clamp(36px, 4.5vw, 58px); line-height: 1.08; 98 letter-spacing: -0.03em; margin-bottom: 24px; 99 } 100 .hero h1 em { font-style: normal; color: var(--orange); } 101 .hero h1 strong { font-style: normal; color: var(--blue2); } 102 .hero-sub { 103 font-size: 17px; line-height: 1.65; color: #B0C0E0; max-width: 480px; 104 margin-bottom: 36px; 105 } 106 .hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } 107 .btn-primary { 108 background: linear-gradient(135deg, var(--orange), var(--orange2)); 109 color: #fff; border: none; 110 padding: 14px 32px; border-radius: 10px; font-size: 16px; font-weight: 600; 111 cursor: pointer; text-decoration: none; 112 box-shadow: 0 8px 28px rgba(255,107,26,0.35); 113 transition: transform .2s, box-shadow .2s; font-family: inherit; 114 display: inline-flex; align-items: center; gap: 8px; 115 } 116 .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(255,107,26,0.45); } 117 .btn-secondary { 118 background: transparent; color: #fff; 119 border: 1px solid rgba(255,255,255,0.2); 120 padding: 14px 28px; border-radius: 10px; font-size: 15px; font-weight: 500; 121 cursor: pointer; text-decoration: none; font-family: inherit; 122 display: inline-flex; align-items: center; gap: 8px; 123 transition: border-color .2s, background .2s; 124 } 125 .btn-secondary:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); } 126 .hero-stats { 127 display: flex; gap: 32px; margin-top: 48px; padding-top: 40px; 128 border-top: 1px solid var(--border); 129 } 130 .stat { } 131 .stat-num { 132 font-family: 'Syne', sans-serif; font-weight: 800; font-size: 28px; 133 color: var(--white); line-height: 1; 134 } 135 .stat-num span { color: var(--orange); } 136 .stat-label { font-size: 12px; color: var(--gray); margin-top: 4px; letter-spacing: 0.04em; } 137 138 /* hero right: CRM mockup */ 139 .hero-visual { 140 position: relative; display: flex; justify-content: center; align-items: center; 141 } 142 .crm-card { 143 background: rgba(255,255,255,0.05); 144 border: 1px solid var(--border); 145 border-radius: 20px; 146 padding: 24px; 147 width: 100%; max-width: 480px; 148 backdrop-filter: blur(12px); 149 box-shadow: 0 40px 80px rgba(0,0,0,0.4); 150 animation: floatUp 3s ease-in-out infinite alternate; 151 } 152 @keyframes floatUp { from{transform:translateY(0)} to{transform:translateY(-10px)} } 153 .crm-header { 154 display: flex; align-items: center; justify-content: space-between; 155 margin-bottom: 20px; 156 } 157 .crm-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px; } 158 .crm-badge { 159 background: rgba(20,98,212,0.2); border: 1px solid rgba(20,98,212,0.4); 160 color: #7BB3FF; font-size: 11px; padding: 3px 10px; border-radius: 100px; 161 } 162 .pipeline { 163 display: flex; gap: 8px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 4px; 164 } 165 .pipe-col { 166 flex: 0 0 110px; 167 background: rgba(255,255,255,0.03); 168 border: 1px solid var(--border); 169 border-radius: 12px; padding: 12px; 170 } 171 .pipe-col-head { 172 font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; 173 color: var(--gray); margin-bottom: 10px; 174 } 175 .deal-card { 176 background: rgba(255,255,255,0.06); 177 border-radius: 8px; padding: 9px 10px; margin-bottom: 7px; 178 font-size: 11px; 179 } 180 .deal-name { font-weight: 600; margin-bottom: 3px; } 181 .deal-val { color: var(--orange2); font-size: 10px; } 182 .deal-card.blue { border-left: 3px solid var(--blue2); } 183 .deal-card.orange { border-left: 3px solid var(--orange); } 184 .deal-card.green { border-left: 3px solid #30D996; } 185 .crm-footer { 186 display: flex; align-items: center; justify-content: space-between; 187 padding-top: 16px; border-top: 1px solid var(--border); 188 } 189 .crm-metric { text-align: center; } 190 .crm-metric .val { font-family:'Syne',sans-serif; font-weight:700; font-size:18px; color:#fff; } 191 .crm-metric .lbl { font-size:10px; color:var(--gray); margin-top:2px; } 192 .badge-float { 193 position: absolute; right: -20px; top: 60px; 194 background: var(--orange); 195 padding: 10px 14px; border-radius: 12px; 196 font-size: 12px; font-weight: 700; 197 box-shadow: 0 8px 24px rgba(255,107,26,0.4); 198 line-height: 1.3; 199 } 200 .badge-float2 { 201 position: absolute; left: -20px; bottom: 80px; 202 background: var(--navy2); 203 border: 1px solid var(--border); 204 padding: 10px 14px; border-radius: 12px; 205 font-size: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); 206 display: flex; align-items: center; gap: 8px; 207 } 208 .avatar-row { display: flex; } 209 .avatar-row .av { 210 width: 24px; height: 24px; border-radius: 50%; 211 margin-right: -8px; border: 2px solid var(--navy2); 212 font-size: 10px; font-weight: 700; 213 display: flex; align-items: center; justify-content: center; 214 } 215 .av1{background:#FF6B1A;} .av2{background:#1462D4;} .av3{background:#30D996;} 216 217 /* ââ TRUST BAR ââ */ 218 .trust-bar { 219 background: var(--navy2); 220 border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); 221 padding: 20px 5%; 222 display: flex; align-items: center; justify-content: center; gap: 60px; 223 flex-wrap: wrap; 224 } 225 .trust-item { 226 display: flex; align-items: center; gap: 10px; 227 font-size: 13px; color: var(--gray); white-space: nowrap; 228 } 229 .trust-icon { font-size: 18px; } 230 231 /* ââ SECTION BASE ââ */ 232 section { padding: 90px 5%; } 233 .section-eyebrow { 234 font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; 235 color: var(--orange); margin-bottom: 14px; 236 } 237 .section-title { 238 font-family: 'Arial', sans-serif; font-weight: 800; 239 font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -0.02em; 240 margin-bottom: 18px; 241 } 242 .section-sub { 243 font-size: 16px; color: #8A9BBF; line-height: 1.7; max-width: 560px; 244 } 245 .section-head { margin-bottom: 56px; } 246 247 /* ââ WHY BIGIN ââ */ 248 .why-grid { 249 display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; 250 } 251 .why-card { 252 background: var(--card-bg); 253 border: 1px solid var(--border); 254 border-radius: 18px; padding: 28px; 255 transition: transform .25s, border-color .25s, box-shadow .25s; 256 position: relative; overflow: hidden; 257 } 258 .why-card::after { 259 content: ''; 260 position: absolute; top: 0; left: 0; right: 0; height: 3px; 261 background: linear-gradient(90deg, var(--blue), var(--orange)); 262 transform: scaleX(0); transform-origin: left; transition: transform .3s; 263 border-radius: 18px 18px 0 0; 264 } 265 .why-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.16); box-shadow: 0 20px 48px rgba(0,0,0,0.3); } 266 .why-card:hover::after { transform: scaleX(1); } 267 .why-icon { 268 width: 50px; height: 50px; border-radius: 14px; margin-bottom: 18px; 269 display: flex; align-items: center; justify-content: center; font-size: 22px; 270 } 271 .icon-blue { background: rgba(20,98,212,0.15); } 272 .icon-orange { background: rgba(255,107,26,0.15); } 273 .icon-green { background: rgba(48,217,150,0.15); } 274 .why-card h3 { font-family:'Arial',sans-serif; font-weight:700; font-size:17px; margin-bottom:10px; } 275 .why-card p { font-size:14px; color:#8A9BBF; line-height:1.65; } 276 277 /* ââ FEATURES ââ */ 278 .features-layout { 279 display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; 280 } 281 .feature-list { display: flex; flex-direction: column; gap: 6px; } 282 .feature-item { 283 display: flex; align-items: flex-start; gap: 16px; 284 padding: 18px 20px; border-radius: 14px; cursor: pointer; 285 transition: background .2s; border: 1px solid transparent; 286 } 287 .feature-item.active { 288 background: rgba(255,255,255,0.05); border-color: var(--border); 289 } 290 .feature-item:hover:not(.active) { background: rgba(255,255,255,0.03); } 291 .fi-icon { 292 width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px; 293 display: flex; align-items: center; justify-content: center; font-size: 18px; 294 background: rgba(20,98,212,0.15); 295 transition: background .2s; 296 } 297 .feature-item.active .fi-icon { background: var(--orange); } 298 .fi-text h4 { font-weight: 600; font-size: 15px; margin-bottom: 4px; } 299 .fi-text p { font-size: 13px; color: var(--gray); line-height: 1.55; } 300 301 .feature-preview { 302 background: rgba(255,255,255,0.04); border: 1px solid var(--border); 303 border-radius: 20px; padding: 30px; 304 min-height: 360px; display: flex; flex-direction: column; 305 } 306 .fp-title { font-family:'Syne',sans-serif; font-weight:700; font-size:15px; margin-bottom:20px; color:var(--gray); } 307 .fp-chart { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; } 308 .bar-row { display: flex; align-items: center; gap: 12px; font-size: 12px; } 309 .bar-label { width: 60px; text-align: right; color: var(--gray); font-size: 11px; } 310 .bar-track { flex: 1; background: rgba(255,255,255,0.06); border-radius: 100px; height: 28px; overflow: hidden; } 311 .bar-fill { height: 100%; border-radius: 100px; display: flex; align-items: center; padding-left: 12px; font-size: 11px; font-weight: 600; } 312 .bar-blue { background: linear-gradient(90deg, var(--blue), var(--blue2)); } 313 .bar-orange { background: linear-gradient(90deg, var(--orange), var(--orange2)); } 314 .bar-green { background: linear-gradient(90deg, #1DB87A, #30D996); } 315 .bar-purple { background: linear-gradient(90deg, #8B5CF6, #A78BFA); } 316 317 /* ââ PRICING ââ */ 318 .pricing-bg { background: var(--navy2); } 319 .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } 320 .pricing-card { 321 border: 1px solid var(--border); border-radius: 22px; padding: 32px; 322 position: relative; transition: transform .25s, box-shadow .25s; 323 } 324 .pricing-card:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(0,0,0,0.35); } 325 .pricing-card.featured { 326 border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange), 0 24px 56px rgba(255,107,26,0.2); 327 background: rgba(255,107,26,0.05); 328 } 329 .featured-badge { 330 position: absolute; top: -14px; left: 50%; transform: translateX(-50%); 331 background: var(--orange); color: #fff; 332 font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; 333 padding: 4px 16px; border-radius: 100px; 334 white-space: nowrap; 335 } 336 .plan-name { font-family:'Syne',sans-serif; font-weight:700; font-size:18px; margin-bottom:6px; } 337 .plan-tagline { font-size:13px; color:var(--gray); margin-bottom:24px; } 338 .plan-price { font-family:'Syne',sans-serif; font-weight:800; font-size:40px; line-height:1; } 339 .plan-price sub { font-size:14px; font-weight:400; color:var(--gray); } 340 .plan-price span { font-size:16px; font-weight:400; color:var(--gray); } 341 .plan-period { font-size:12px; color:var(--gray); margin-bottom:28px; margin-top:4px; } 342 .plan-divider { border: none; border-top: 1px solid var(--border); margin-bottom: 24px; } 343 .plan-features { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 28px; } 344 .plan-features li { display: flex; align-items: center; gap: 10px; font-size: 14px; } 345 .plan-features li::before { content: 'â'; color: var(--orange); font-weight: 700; font-size: 14px; } 346 .btn-plan { 347 width: 100%; padding: 13px; border-radius: 10px; font-size: 15px; font-weight: 600; 348 cursor: pointer; font-family: inherit; transition: all .2s; text-align: center; 349 text-decoration: none; display: block; 350 } 351 .btn-plan-outline { 352 background: transparent; border: 1px solid rgba(255,255,255,0.2); color: #fff; 353 } 354 .btn-plan-outline:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); } 355 .btn-plan-filled { background: var(--orange); border: none; color: #fff; 356 box-shadow: 0 8px 20px rgba(255,107,26,0.35); } 357 .btn-plan-filled:hover { background: var(--orange2); box-shadow: 0 12px 28px rgba(255,107,26,0.45); transform: translateY(-2px); } 358 359 /* ââ PROCESS ââ */ 360 .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; } 361 .steps::before { 362 content: ''; 363 position: absolute; top: 38px; left: 12.5%; right: 12.5%; height: 2px; 364 background: linear-gradient(90deg, var(--blue), var(--orange)); 365 z-index: 0; 366 } 367 .step { text-align: center; position: relative; z-index: 1; } 368 .step-num { 369 width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 20px; 370 background: var(--navy2); border: 2px solid var(--blue); 371 font-family:'Syne',sans-serif; font-weight:800; font-size:20px; 372 display: flex; align-items: center; justify-content: center; color: var(--blue2); 373 } 374 .step:nth-child(2) .step-num { border-color: #5599FF; color: #5599FF; } 375 .step:nth-child(3) .step-num { border-color: var(--orange); color: var(--orange); } 376 .step:nth-child(4) .step-num { border-color: #30D996; color: #30D996; } 377 .step h4 { font-family:'Syne',sans-serif; font-weight:700; font-size:16px; margin-bottom:8px; } 378 .step p { font-size:13px; color:var(--gray); line-height:1.6; } 379 380 /* ââ TESTIMONIALS ââ */ 381 .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } 382 .testi-card { 383 background: var(--card-bg); border: 1px solid var(--border); 384 border-radius: 18px; padding: 28px; 385 transition: transform .25s, border-color .25s; 386 } 387 .
387testi-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.14); } 388 .stars { color: #FFB800; font-size: 14px; margin-bottom: 16px; letter-spacing: 2px; } 389 .testi-text { font-size: 14px; line-height: 1.7; color: #B0C0E0; margin-bottom: 20px; font-style: italic; } 390 .testi-author { display: flex; align-items: center; gap: 12px; } 391 .testi-av { 392 width: 40px; height: 40px; border-radius: 50%; 393 font-size: 14px; font-weight: 700; 394 display: flex; align-items: center; justify-content: center; flex-shrink: 0; 395 } 396 .testi-name { font-weight: 600; font-size: 14px; } 397 .testi-role { font-size: 12px; color: var(--gray); } 398 399 /* ââ CONTACT FORM ââ */ 400 .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } 401 .contact-left h2 { font-family:'Arial',sans-serif; font-weight:800; font-size:clamp(28px,3vw,42px); margin-bottom:18px; letter-spacing:-0.02em; } 402 .contact-left p { font-size:15px; color:var(--gray); line-height:1.7; margin-bottom:32px; } 403 .contact-info { display: flex; flex-direction: column; gap: 16px; } 404 .ci-item { display: flex; align-items: center; gap: 14px; font-size: 14px; } 405 .ci-icon { 406 width: 42px; height: 42px; border-radius: 10px; 407 background: rgba(20,98,212,0.15); 408 display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; 409 } 410 .ci-lbl { font-size: 11px; color: var(--gray); margin-bottom: 2px; } 411 .ci-val { font-weight: 500; color: #fff; } 412 .form-card { 413 background: rgba(255,255,255,0.04); border: 1px solid var(--border); 414 border-radius: 22px; padding: 36px; 415 } 416 .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } 417 .form-group { margin-bottom: 18px; } 418 .form-group label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--gray); margin-bottom: 8px; text-transform: uppercase; } 419 .form-group input, .form-group select, .form-group textarea { 420 width: 100%; background: rgba(255,255,255,0.06); border: 1px solid var(--border); 421 border-radius: 10px; padding: 12px 16px; color: #fff; font-size: 14px; font-family: inherit; 422 transition: border-color .2s, background .2s; outline: none; 423 } 424 .form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255,255,255,0.25); } 425 .form-group input:focus, .form-group select:focus, .form-group textarea:focus { 426 border-color: var(--blue2); background: rgba(255,255,255,0.08); 427 } 428 .form-group select option { background: var(--navy2); } 429 .form-group textarea { resize: vertical; min-height: 100px; } 430 .btn-submit { 431 width: 100%; padding: 15px; border-radius: 10px; font-size: 16px; font-weight: 700; 432 background: linear-gradient(135deg, var(--orange), var(--orange2)); 433 border: none; color: #fff; cursor: pointer; font-family: inherit; 434 box-shadow: 0 8px 28px rgba(255,107,26,0.35); transition: transform .2s, box-shadow .2s, opacity .2s; 435 display: flex; align-items: center; justify-content: center; gap: 10px; 436 } 437 .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(255,107,26,0.45); } 438 .btn-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } 439 440 /* Form feedback states */ 441 .form-alert { 442 display: none; padding: 14px 18px; border-radius: 10px; 443 font-size: 14px; font-weight: 500; margin-bottom: 18px; text-align: center; 444 } 445 .form-alert.success { 446 display: block; 447 background: rgba(48,217,150,0.12); border: 1px solid rgba(48,217,150,0.3); color: #30D996; 448 } 449 .form-alert.error { 450 display: block; 451 background: rgba(255,107,26,0.12); border: 1px solid rgba(255,107,26,0.3); color: var(--orange2); 452 } 453 .field-error { 454 color: #FF8C42; font-size: 11px; margin-top: 5px; display: none; 455 } 456 .form-group.has-error input, 457 .form-group.has-error select, 458 .form-group.has-error textarea { 459 border-color: var(--orange); 460 } 461 .form-group.has-error .field-error { display: block; } 462 463 /* ââ CTA BANNER ââ */ 464 .cta-section { 465 background: linear-gradient(135deg, var(--navy2) 0%, rgba(20,98,212,0.3) 100%); 466 border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); 467 padding: 80px 5%; text-align: center; 468 position: relative; overflow: hidden; 469 } 470 .cta-section::before { 471 content: ''; 472 position: absolute; inset: 0; 473 background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(255,107,26,0.12), transparent 70%); 474 pointer-events: none; 475 } 476 .cta-section h2 { font-family:'Arial',sans-serif; font-weight:800; font-size:clamp(30px,4vw,50px); margin-bottom:18px; letter-spacing:-0.02em; } 477 .cta-section p { font-size:17px; color:#8A9BBF; max-width:560px; margin:0 auto 36px; line-height:1.65; } 478 .cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } 479 480 /* ââ FOOTER ââ */ 481 footer { 482 background: var(--navy2); border-top: 1px solid var(--border); 483 padding: 48px 5% 28px; 484 } 485 .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 40px; } 486 .footer-brand p { font-size: 14px; color: var(--gray); line-height: 1.65; margin-top: 14px; max-width: 280px; } 487 .footer-col h5 { font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); margin-bottom: 16px; } 488 .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } 489 .footer-col ul li a { font-size: 14px; color: var(--gray); text-decoration: none; transition: color .2s; } 490 .footer-col ul li a:hover { color: var(--white); } 491 .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 12px; } 492 .footer-bottom p { font-size: 13px; color: var(--gray); } 493 .partner-badge { 494 display: flex; align-items: center; gap: 8px; 495 background: rgba(255,255,255,0.05); border: 1px solid var(--border); 496 padding: 6px 14px; border-radius: 100px; font-size: 12px; color: var(--gray); 497 } 498 .partner-dot { width: 8px; height: 8px; background: #30D996; border-radius: 50%; } 499 500 /* ââ WHATSAPP FLOATING BUTTON ââ */ 501 .whatsapp-float { 502 position: fixed; 503 bottom: 28px; 504 right: 28px; 505 z-index: 9999; 506 display: flex; 507 flex-direction: column; 508 align-items: flex-end; 509 gap: 10px; 510 } 511 .whatsapp-tooltip { 512 background: var(--navy2); 513 border: 1px solid var(--border); 514 color: #fff; 515 font-size: 13px; 516 font-weight: 500; 517 padding: 8px 14px; 518 border-radius: 10px; 519 white-space: nowrap; 520 box-shadow: 0 8px 24px rgba(0,0,0,0.3); 521 opacity: 0; 522 transform: translateX(10px); 523 transition: opacity .25s, transform .25s; 524 pointer-events: none; 525 } 526 .whatsapp-float:hover .whatsapp-tooltip { 527 opacity: 1; 528 transform: translateX(0); 529 } 530 .whatsapp-btn { 531 width: 58px; 532 height: 58px; 533 background: #25D366; 534 border-radius: 50%; 535 display: flex; 536 align-items: center; 537 justify-content: center; 538 box-shadow: 0 6px 24px rgba(37,211,102,0.5); 539 cursor: pointer; 540 text-decoration: none; 541 transition: transform .2s, box-shadow .2s; 542 position: relative; 543 } 544 .whatsapp-btn:hover { transform: scale(1.1); box-shadow: 0 10px 32px rgba(37,211,102,0.65); } 545 .whatsapp-btn svg { width: 30px; height: 30px; fill: #fff; } 546 .whatsapp-pulse { 547 position: absolute; 548 inset: 0; 549 border-radius: 50%; 550 background: rgba(37,211,102,0.4); 551 animation: wa-pulse 2.2s ease-out infinite; 552 } 553 @keyframes wa-pulse { 554 0% { transform: scale(1); opacity: 0.7; } 555 100% { transform: scale(1.7); opacity: 0; } 556 } 557 558 /* ââ RESPONSIVE ââ */ 559 @media (max-width: 960px) { 560 .hero { grid-template-columns: 1fr; min-height: auto; padding: 60px 5%; } 561 .hero-visual { display: none; } 562 .why-grid { grid-template-columns: 1fr 1fr; } 563 .features-layout { grid-template-columns: 1fr; } 564 .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; } 565 .steps { grid-template-columns: 1fr 1fr; } 566 .steps::before { display: none; } 567 .testi-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } 568 .contact-layout { grid-template-columns: 1fr; } 569 .footer-grid { grid-template-columns: 1fr 1fr; } 570 nav { display: none; } 571 .trust-bar { gap: 28px; } 572 } 573 @media (max-width: 600px) { 574 .why-grid { grid-template-columns: 1fr; } 575 .steps { grid-template-columns: 1fr; } 576 .form-row { grid-template-columns: 1fr; } 577 .hero-stats { gap: 20px; } 578 .footer-grid { grid-template-columns: 1fr; } 579 .trust-bar { gap: 18px; } 580 .hero-actions { flex-direction: column; align-items: flex-start; } 581 .whatsapp-float { bottom: 18px; right: 18px; } 582 } 583</style> 584 585 586
587<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
587 588
589<script> 590emailjs.init({ 591 publicKey: "0l7EVKolue36rEIZs" 592}); 593</script>
593 594 595 596
597<script> 598 599const form = document.getElementById("demo-form"); 600 601form.addEventListener("submit", function(e){ 602 603 e.preventDefault(); 604 605 let valid = true; 606 607 const firstname = document.getElementById("firstname"); 608 const lastname = document.getElementById("lastname"); 609 const email = document.getElementById("email"); 610 const phone = document.getElementById("phone"); 611 612 document.querySelectorAll(".form-group").forEach(el=>{ 613 el.classList.remove("invalid"); 614 }); 615 616 if(firstname.value.trim()==""){ 617 document.getElementById("fg-firstname").classList.add("invalid"); 618 valid=false; 619 } 620 621 if(lastname.value.trim()==""){ 622 document.getElementById("fg-lastname").classList.add("invalid"); 623 valid=false; 624 } 625 626 if(email.value.trim()==""){ 627 document.getElementById("fg-email").classList.add("invalid"); 628 valid=false; 629 } 630 631 if(phone.value.trim()==""){ 632 document.getElementById("fg-phone").classList.add("invalid"); 633 valid=false; 634 } 635 636 if(!valid){ 637 return; 638 } 639 640 const btn=document.getElementById("submit-btn"); 641 642 btn.disabled=true; 643 644 btn.innerHTML="Sending..."; 645 646 emailjs.send( 647 "service_zzyn9rl", 648 "template_2o5f2jq", 649 { 650 firstname: firstname.value, 651 lastname: lastname.value, 652 email: email.value, 653 phone: phone.value, 654 companysize: document.getElementById("companysize").value, 655 industry: document.getElementById("industry").value, 656 message: document.getElementById("message").value, 657 time:new Date().toLocaleString() 658 } 659 ) 660 661 .then(function(){ 662 663 document.getElementById("form-success").style.display="block"; 664 document.getElementById("form-error").style.display="none"; 665 666 form.reset(); 667 668 }) 669 670 .catch(function(error){ 671 672 console.log("EmailJS Error:", error); 673 674 alert(JSON.stringify(error)); 675 676 document.getElementById("form-error").style.display="block"; 677 document.getElementById("form-success").style.display="none"; 678 679}); 680 681 .finally(function(){ 682 683 btn.disabled=false; 684 685 btn.innerHTML="ð Book My Free Demo â"; 686 687 }); 688 689}); 690 691</script>
691 692 693</head> 694<body> 695 696<!-- âââ HEADER âââ --> 697<header> 698 <div class="logo-wrap"> 699 <div class="logo-mark">N</div> 700 <div class="logo-text"> 701 Neehara 702 <span>Premium IT Solutions</span> 703 </div> 704 </div> 705 <nav> 706 <a href="#why">Why Bigin</a> 707 <a href="#features">Features</a> 708 <a href="#pricing">Pricing</a> 709 <a href="#process">Process</a> 710 <a href="#contact">Contact</a> 711 </nav> 712 <a href="#contact" class="btn-nav">Get Free Demo â</a> 713</header> 714 715<!-- âââ HERO âââ --> 716<section class="hero"> 717 <div class="hero-content"> 718 <div class="hero-eyebrow">Authorized Zoho Partner · Kerala</div> 719 <h1> 720 The Simplest CRM<br> 721 Your Small Business<br> 722 <em>Actually Needs</em> 723 </h1> 724 <p class="hero-sub"> 725 Neehara helps you implement <strong>Zoho Bigin</strong> â a pipeline-centric CRM built for businesses like yours. Set up in under 30 minutes. No training required. Start free. 726 </p> 727 <div class="hero-actions"> 728 <a href="#contact" class="btn-primary">ð Start Free with Bigin</a> 729 <a href="#features" class="btn-secondary">â¶ See How It Works</a> 730 </div> 731 <div class="hero-stats"> 732 <div class="stat"> 733 <div class="stat-num">50<span>K+</span></div> 734 <div class="stat-label">Businesses on Bigin</div> 735 </div> 736 <div class="stat"> 737 <div class="stat-num">30<span>min</span></div> 738 <div class="stat-label">Setup Time</div> 739 </div> 740 <div class="stat"> 741 <div class="stat-num">â¹<span>0</span></div> 742 <div class="stat-label">To Start (Free Plan)</div> 743 </div> 744 </div> 745 </div> 746 <div class="hero-visual"> 747 <div class="crm-card"> 748 <div class="crm-header"> 749 <div class="crm-title">ð Sales Pipeline · Q2 2025</div> 750 <div class="crm-badge">Live</div> 751 </div> 752 <div class="pipeline"> 753 <div class="pipe-col"> 754 <div class="pipe-col-head">New Leads</div> 755 <div class="deal-card blue"><div class="deal-name">Tech Corp</div><div class="deal-val">â¹1.2L</div></div> 756 <div class="deal-card blue"><div class="deal-name">RetailPro</div><div class="deal-val">â¹85K</div></div> 757 </div> 758 <div class="pipe-col"> 759 <div class="pipe-col-head">Contacted</div> 760 <div class="deal-card orange"><div class="deal-name">HealthCo</div><div class="deal-val">â¹2.5L</div></div> 761 </div> 762 <div class="pipe-col"> 763 <div class="pipe-col-head">Proposal</div> 764 <div class="deal-card orange"><div class="deal-name">EduMart</div><div class="deal-val">â¹1.8L</div></div> 765 <div class="deal-card green"><div class="deal-name">FinServ</div><div class="deal-val">â¹3.1L</div></div> 766 </div> 767 <div class="pipe-col"> 768 <div class="pipe-col-head">Won â</div> 769 <div class="deal-card green"><div class="deal-name">Buildex</div><div class="deal-val">â¹4.2L</div></div> 770 </div> 771 </div> 772 <div class="crm-footer"> 773 <div class="crm-metric"><div class="val">â¹13.6L</div><div class="lbl">Pipeline Value</div></div> 774 <div class="crm-metric"><div class="val">6</div><div class="lbl">Active Deals</div></div> 775 <div class="crm-metric"><div class="val">68%</div><div class="lbl">Win Rate</div></div> 776 </div> 777 </div> 778 <div class="badge-float">ð New lead captured<br>from your website</div> 779 <div class="badge-float2"> 780 <div class="avatar-row"> 781 <div class="av av1">A</div><div class="av av2">R</div><div class="av av3">S</div> 782 </div> 783 <div style="font-size:12px;">3 deals closing today</div> 784 </div> 785 </div> 786</section> 787 788<!-- âââ TRUST BAR âââ --> 789<div class="trust-bar"> 790 <div class="trust-item"><span class="trust-icon">ð</span> ISO 27001 Certified</div> 791 <div class="trust-item"><span class="trust-icon">â </span> GDPR Compliant</div> 792 <div class="trust-item"><span class="trust-icon">ð</span> Authorized Zoho Partner</div> 793 <div class="trust-item"><span class="trust-icon">â</span> Rated #1 SMB CRM</div> 794 <div class="trust-item"><span class="trust-icon">ð±</span> iOS & Android Apps</div> 795</div> 796 797<!-- âââ WHY BIGIN âââ --> 798<section id="why"> 799 <div class="section-head"> 800 <div class="section-eyebrow">Why Zoho Bigin</div> 801 <h2 class="section-title">Built for Small Business.<br>Not Watered-Down Enterprise.</h2> 802 <p class="section-sub">Most CRMs are built for large enterprises and stripped down for SMBs. Bigin was designed from scratch for businesses with 1â20 employees.</p> 803 </div> 804 <div class="why-grid"> 805 <div class="why-card">
806 <div class="why-icon icon-orange">â¡</div> 807 <h3>30-Minute Setup</h3> 808 <p>No consultants, no long onboarding. Connect your email, import contacts, and start managing your pipeline in under 30 minutes â guaranteed.</p> 809 </div> 810 <div class="why-card"> 811 <div class="why-icon icon-blue">ð°</div> 812 <h3>Truly Affordable</h3> 813 <p>Start completely free. Paid plans from just $7/user/month â the most competitive pricing in the CRM market. No hidden fees, no forced upgrades.</p> 814 </div> 815 <div class="why-card"> 816 <div class="why-icon icon-green">ð</div> 817 <h3>Pipeline-Centric</h3> 818 <p>Visual Kanban pipelines let you see exactly where every deal stands. Drag, drop, and close deals faster without drowning in spreadsheets.</p> 819 </div> 820 <div class="why-card"> 821 <div class="why-icon icon-blue">ð¤</div> 822 <h3>AI-Powered (Zia)</h3> 823 <p>Zia AI handles follow-ups, spots cross-sell opportunities, writes emails, and tells you exactly why you lost deals â automatically, around the clock.</p> 824 </div> 825 <div class="why-card"> 826 <div class="why-icon icon-orange">ð</div> 827 <h3>Deep Integrations</h3> 828 <p>Connect with Zoho Invoice, Gmail, Outlook, WhatsApp, Zoom, Teams, Mailchimp, and 50+ other tools your business already uses today.</p> 829 </div> 830 <div class="why-card"> 831 <div class="why-icon icon-green">ð±</div> 832 <h3>Mobile-First</h3> 833 <p>Full-featured iOS and Android apps with call logging, business card scanner, and Apple Intelligence/Galaxy AI features built right in.</p> 834 </div> 835 </div> 836</section> 837 838<!-- âââ FEATURES âââ --> 839<section id="features" style="padding-top:0;"> 840 <div class="features-layout"> 841 <div> 842 <div class="section-eyebrow">Key Features</div> 843 <h2 class="section-title" style="margin-bottom:36px;">Everything You Need.<br>Nothing You Don't.</h2> 844 <div class="feature-list"> 845 <div class="feature-item active"> 846 <div class="fi-icon">ð</div> 847 <div class="fi-text"> 848 <h4>Visual Sales Pipelines</h4> 849 <p>Kanban-style board to track every deal from lead to close. Multiple pipelines for different product lines or regions.</p> 850 </div> 851 </div> 852 <div class="feature-item"> 853 <div class="fi-icon">ð§</div> 854 <div class="fi-text"> 855 <h4>Multichannel Communication</h4> 856 <p>Email, phone, WhatsApp, and social media â manage all customer touchpoints from one unified inbox.</p> 857 </div> 858 </div> 859 <div class="feature-item"> 860 <div class="fi-icon">âï¸</div> 861 <div class="fi-text"> 862 <h4>Smart Automation</h4> 863 <p>Automate follow-ups, lead assignment, task creation, and email sequences. Eliminate manual, repetitive work entirely.</p> 864 </div> 865 </div> 866 <div class="feature-item"> 867 <div class="fi-icon">ð</div> 868 <div class="fi-text"> 869 <h4>Dashboards & Reports</h4> 870 <p>Real-time analytics on deal velocity, team performance, and revenue forecasts â all in one visual dashboard.</p> 871 </div> 872 </div> 873 <div class="feature-item"> 874 <div class="fi-icon">ð§ </div> 875 <div class="fi-text"> 876 <h4>Zia AI Assistant</h4> 877 <p>Let AI summarize emails, draft responses, and surface insights about your pipeline health automatically.</p> 878 </div> 879 </div> 880 </div> 881 </div> 882 <div> 883 <div class="feature-preview"> 884 <div class="fp-title">ð Revenue by Stage â This Month</div> 885 <div class="fp-chart"> 886 <div class="bar-row"> 887 <div class="bar-label">New</div> 888 <div class="bar-track"><div class="bar-fill bar-blue" style="width:45%">â¹4.5L</div></div> 889 </div> 890 <div class="bar-row"> 891 <div class="bar-label">Contacted</div> 892 <div class="bar-track"><div class="bar-fill bar-blue" style="width:62%">â¹6.2L</div></div> 893 </div> 894 <div class="bar-row"> 895 <div class="bar-label">Proposal</div> 896 <div class="bar-track"><div class="bar-fill bar-orange" style="width:78%">â¹7.8L</div></div> 897 </div> 898 <div class="bar-row"> 899 <div class="bar-label">Negotiation</div> 900 <div class="bar-track"><div class="bar-fill bar-orange" style="width:55%">â¹5.5L</div></div> 901 </div> 902 <div class="bar-row"> 903 <div class="bar-label">Won â</div> 904 <div class="bar-track"><div class="bar-fill bar-green" style="width:88%">â¹8.8L</div></div> 905 </div> 906 </div> 907 <div style="margin-top:20px; padding-top:20px; border-top:1px solid var(--border); display:flex; gap:24px;"> 908 <div><div style="font-family:Syne,sans-serif;font-weight:800;font-size:22px;color:#fff;">â¹32.8L</div><div style="font-size:11px;color:var(--gray);">Total Pipeline</div></div> 909 <div><div style="font-family:Syne,sans-serif;font-weight:800;font-size:22px;color:#30D996;">â 34%</div><div style="font-size:11px;color:var(--gray);">vs Last Month</div></div> 910 </div> 911 </div> 912 </div> 913 </div> 914</section> 915 916<!-- âââ PROCESS âââ --> 917<section id="process"> 918 <div class="section-head" style="text-align:center; margin-left:auto; margin-right:auto; max-width:560px;"> 919 <div class="section-eyebrow">Our Process</div> 920 <h2 class="section-title">From Zero to Running CRM<br>in 4 Simple Steps</h2> 921 </div> 922 <div class="steps"> 923 <div class="step"> 924 <div class="step-num">1</div> 925 <h4>Free Consultation</h4> 926 <p>We understand your business process, team size, and current pain points with a free 30-min call.</p> 927 </div> 928 <div class="step"> 929 <div class="step-num">2</div> 930 <h4>Custom Setup</h4> 931 <p>Neehara configures Bigin to match your pipeline stages, fields, and automation rules precisely.</p> 932 </div> 933 <div class="step"> 934 <div class="step-num">3</div> 935 <h4>Data Migration</h4> 936 <p>We import your existing contacts, deals, and history from spreadsheets or your old CRM for free.</p> 937 </div> 938 <div class="step"> 939 <div class="step-num">4</div> 940 <h4>Training & Go Live</h4> 941 <p>Team training session included. Ongoing support via phone, email, and chat whenever you need it.</p> 942 </div> 943 </div> 944</section> 945 946<!-- âââ PRICING âââ --> 947<section id="pricing" class="pricing-bg"> 948 <div class="section-head" style="text-align:center; max-width:560px; margin:0 auto 56px;"> 949 <div class="section-eyebrow">
949Pricing</div> 950 <h2 class="section-title">Transparent Pricing.<br>No Surprises.</h2> 951 <p class="section-sub" style="margin:0 auto;">All plans include Neehara's free onboarding, migration assistance, and priority support.</p> 952 </div> 953 <div class="pricing-grid"> 954 <div class="pricing-card"> 955 <div class="plan-name">Free</div> 956 <div class="plan-tagline">For solopreneurs just starting out</div> 957 <div class="plan-price">â¹<span>0</span></div> 958 <div class="plan-period">forever · 1 user only</div> 959 <hr class="plan-divider"> 960 <ul class="plan-features"> 961 <li>1 Pipeline</li> 962 <li>500 Contacts</li> 963 <li>Web Forms</li> 964 <li>Email Integration</li> 965 <li>Mobile App (iOS & Android)</li> 966 <li>Neehara Onboarding Support</li> 967 </ul> 968 <a href="#contact" class="btn-plan btn-plan-outline">Get Started Free</a> 969 </div> 970 <div class="pricing-card featured"> 971 <div class="featured-badge">Most Popular</div> 972 <div class="plan-name">Express</div> 973 <div class="plan-tagline">For growing small teams</div> 974 <div class="plan-price"><sub>$</sub>7<span>/user</span></div> 975 <div class="plan-period">per month, billed annually</div> 976 <hr class="plan-divider"> 977 <ul class="plan-features"> 978 <li>3 Pipelines</li> 979 <li>50,000 Contacts</li> 980 <li>Workflow Automation</li> 981 <li>Bulk Email Campaigns</li> 982 <li>WhatsApp & Telephony</li> 983 <li>Custom Dashboards</li> 984 <li>Zia AI Assistant</li> 985 <li>Priority Neehara Support</li> 986 </ul> 987 <a href="#contact" class="btn-plan btn-plan-filled">Start with Express â</a> 988 </div> 989 <div class="pricing-card"> 990 <div class="plan-name">Premier</div> 991 <div class="plan-tagline">For teams that need full power</div> 992 <div class="plan-price"><sub>$</sub>12<span>/user</span></div> 993 <div class="plan-period">per month, billed annually</div> 994 <hr class="plan-divider"> 995 <ul class="plan-features"> 996 <li>Unlimited Pipelines</li> 997 <li>Unlimited Contacts</li> 998 <li>Advanced Automations</li> 999 <li>Zoho Invoice Integration</li> 1000 <li>Multi-Currency Support</li> 1001 <li>Territory Management</li> 1002 <li>Full Zia AI Suite</li> 1003 <li>Dedicated Neehara Account Manager</li> 1004 </ul> 1005 <a href="#contact" class="btn-plan btn-plan-outline">Choose Premier</a> 1006 </div> 1007 </div> 1008 <p style="text-align:center;color:var(--gray);font-size:13px;margin-top:28px;">All prices are Zoho list prices. Contact Neehara for exclusive partner discounts. 15-day free trial on all paid plans.</p> 1009</section> 1010 1011<!-- âââ TESTIMONIALS âââ --> 1012<section> 1013 <div class="section-head" style="text-align:center; max-width:560px; margin:0 auto 56px;"> 1014 <div class="section-eyebrow">Client Stories</div> 1015 <h2 class="section-title">Small Businesses. Big Results.</h2> 1016 </div> 1017 <div class="testi-grid"> 1018 <div class="testi-card"> 1019 <div class="stars">â â â â â </div> 1020 <p class="testi-text">"Neehara set up Bigin for our trading firm in just one afternoon. We went from chasing leads on WhatsApp to a proper pipeline. Our conversion rate doubled in 2 months."</p> 1021 <div class="testi-author"> 1022 <div class="testi-av" style="background:#FF6B1A;">R</div> 1023 <div> 1024 <div class="testi-name">Prasanth Kurian </div> 1025 <div class="testi-role">Elba Living</div> 1026 </div> 1027 </div> 1028 </div> 1029 <div class="testi-card"> 1030 <div class="stars">â â â â â </div> 1031 <p class="testi-text">"We were using 4 different spreadsheets to manage admissions. Bigin consolidated everything. The Neehara team handled all the migration â we didn't lose a single record."</p> 1032 <div class="testi-author"> 1033 <div class="testi-av" style="background:#1462D4;">S</div> 1034 <div> 1035 <div class="testi-name">Steve Ben Philiph</div> 1036 <div class="testi-role">Athlene Sports</div> 1037 </div> 1038 </div> 1039 </div> 1040 <div class="testi-card"> 1041 <div class="stars">â â â â â </div> 1042 <p class="testi-text">"As a clinic, patient follow-ups were always falling through the cracks. Bigin's automation now sends reminders automatically. Neehara customized it perfectly for healthcare."</p> 1043 <div class="testi-author"> 1044 <div class="testi-av" style="background:#30D996;">A</div> 1045 <div> 1046 <div class="testi-name">Biju M R</div> 1047 <div class="testi-role">SB Packaging</div> 1048 </div> 1049 </div> 1050 </div> 1051 </div> 1052</section> 1053 1054<!-- âââ CTA âââ --> 1055<div class="cta-section"> 1056 <h2>Ready to Stop Managing Deals on Spreadsheets?</h2> 1057 <p>Let Neehara set up Zoho Bigin for your business â free consultation, free migration, free onboarding. You're 30 minutes away from a real CRM.</p> 1058 <div class="cta-actions"> 1059 <a href="#contact" class="btn-primary" style="font-size:16px;padding:16px 36px;">ð Book Free Consultation</a> 1060 <a href="https://www.bigin.com" target="_blank" class="btn-secondary" style="font-size:15px;padding:16px 28px;">Learn More About Bigin â</a> 1061 </div> 1062</div> 1063 1064<!-- âââ CONTACT âââ --> 1065<section id="contact"> 1066 <div class="contact-layout"> 1067 <div class="contact-left"> 1068 <div class="section-eyebrow">Get In Touch</div> 1069 <h2>Let's Get Your CRM<br>Up & Running</h2> 1070 <p>Fill the form and our Zoho-certified consultant will reach out within one business day with a customized plan for your business.</p> 1071 <div class="contact-info"> 1072 <div class="ci-item"> 1073 <div class="ci-icon">ð</div> 1074 <div> 1075 <div class="ci-lbl">Address</div> 1076 <div class="ci-val">Neehara Premium IT Solutions 1077Kailasam Arcade, Room # 134/D Opposite Marian College Kuttikkanam,Kerala, India,685531 Phone:9400587871</div> 1078 </div> 1079 </div> 1080 <div class="ci-item"> 1081 <div class="ci-icon">ð</div> 1082 <div> 1083 <div class="ci-lbl">Website</div> 1084 <div class="ci-val">neeharaa.com</div> 1085 </div> 1086 </div> 1087 <div class="ci-item"> 1088 <div class="ci-icon">ð</div> 1089 <div> 1090 <div class="ci-lbl">Partnership</div> 1091 <div class="ci-val">Authorized Zoho Partner · Since 2019</div> 1092 </div> 1093 </div> 1094 <div class="ci-item"> 1095 <div class="ci-icon">ð¬</div> 1096 <div> 1097 <div class="ci-lbl">WhatsApp</div> 1098 <div class="ci-val">+91 9400587871</div> 1099 </div> 1100 </div> 1101 </div> 1102 </div> 1103 <div class="form-card"> 1104 <h3 style="font-family:Syne,sans-serif;font-weight:700;font-size:20px;margin-bottom:24px;">Book a Free Demo</h3> 1105 1106 <!-- Alert area --> 1107 <div id="form-success" class="form-alert success"> 1108 â Thank you! We'll contact you within 1 business day. 1109 </div>
1110 <div id="form-error" class="form-alert error"> 1111 â ï¸ Something went wrong. Please try again or WhatsApp us directly. 1112 </div> 1113 1114 <form id="demo-form" novalidate> 1115 <div class="form-row"> 1116 <div class="form-group" id="fg-firstname"> 1117 <label>First Name</label> 1118 <input type="text" id="firstname" name="firstname" placeholder="Ravi"> 1119 <div class="field-error">Please enter your first name.</div> 1120 </div> 1121 <div class="form-group" id="fg-lastname"> 1122 <label>Last Name</label> 1123 <input type="text" id="lastname" name="lastname" placeholder="Menon"> 1124 <div class="field-error">Please enter your last name.</div> 1125 </div> 1126 </div> 1127 <div class="form-group" id="fg-email"> 1128 <label>Business Email</label> 1129 <input type="email" id="email" name="email" placeholder="[email protected]"> 1130 <div class="field-error">Please enter a valid email address.</div> 1131 </div> 1132 <div class="form-row"> 1133 <div class="form-group" id="fg-phone"> 1134 <label>Phone</label> 1135 <input type="tel" id="phone" name="phone" placeholder="+91 98765 43210"> 1136 <div class="field-error">Please enter your phone number.</div> 1137 </div> 1138 <div class="form-group"> 1139 <label>Company Size</label> 1140 <select id="companysize" name="companysize"> 1141 <option>1 â Just me</option> 1142 <option>2â5 employees</option> 1143 <option selected>6â15 employees</option> 1144 <option>16â50 employees</option> 1145 <option>50+ employees</option> 1146 </select> 1147 </div> 1148 </div> 1149 <div class="form-group"> 1150 <label>Industry</label> 1151 <select id="industry" name="industry"> 1152 <option>Retail / Trading</option> 1153 <option>Real Estate</option> 1154 <option>Healthcare / Clinic</option> 1155 <option>Education</option> 1156 <option>IT / Tech Services</option> 1157 <option>Manufacturing</option> 1158 <option>Other</option> 1159 </select> 1160 </div> 1161 <div class="form-group"> 1162 <label>Message (Optional)</label> 1163 <textarea id="message" name="message" placeholder="Tell us about your current process and what you're looking to improve..."></textarea> 1164 </div> 1165 <button type="submit" class="btn-submit" id="submit-btn"> 1166 ð Book My Free Demo â 1167 </button> 1168 <p style="font-size:11px;color:var(--gray);text-align:center;margin-top:14px;">No credit card needed. Our consultant will call you within 1 business day.</p> 1169 </form> 1170 </div> 1171 </div> 1172</section> 1173 1174<!-- âââ FOOTER âââ --> 1175<footer> 1176 <div class="footer-grid"> 1177 <div class="footer-brand"> 1178 <div class="logo-wrap"> 1179 <div class="logo-mark">N</div> 1180 <div class="logo-text">Neehara<span>Premium IT Solutions</span></div> 1181 </div> 1182 <p>Your trusted Zoho Partner in Kerala, delivering IT consulting, CRM implementation, security solutions, and productivity tools since 2019.</p> 1183 </div> 1184 <div class="footer-col"> 1185 <h5>Zoho Products</h5> 1186 <ul> 1187 <li><a href="#">Zoho Bigin CRM</a></li> 1188 <li><a href="#">Zoho CRM</a></li> 1189 <li><a href="#">Zoho Books</a></li> 1190 <li><a href="#">Zoho Campaigns</a></li> 1191 <li><a href="#">Zoho Invoice</a></li> 1192 </ul> 1193 </div> 1194 <div class="footer-col"> 1195 <h5>Services</h5> 1196 <ul> 1197 <li><a href="#">CRM Implementation</a></li> 1198 <li><a href="#">IT Consulting</a></li> 1199 <li><a href="#">Network Solutions</a></li> 1200 <li><a href="#">Security Solutions</a></li> 1201 <li><a href="#">Business Intelligence</a></li> 1202 </ul> 1203 </div> 1204 <div class="footer-col"> 1205 <h5>Company</h5> 1206 <ul> 1207 <li><a href="https://neeharaa.com" target="_blank">Website</a></li> 1208 <li><a href="#">About Us</a></li> 1209 <li><a href="#">Blog</a></li> 1210 <li><a href="#">Case Studies</a></li> 1211 <li><a href="#contact">Contact</a></li> 1212 </ul> 1213 </div> 1214 </div> 1215 <div class="footer-bottom"> 1216 <p>© 2026 Neehara Premium IT Solutions. All rights reserved. · Peerumedu, Kerala, India</p> 1217 <div class="partner-badge"><div class="partner-dot"></div> Authorized Zoho Partner</div> 1218 </div> 1219</footer> 1220 1221<!-- âââ WHATSAPP FLOATING BUTTON âââ --> 1222<div class="whatsapp-float"> 1223 <div class="whatsapp-tooltip">ð¬ Chat with us on WhatsApp</div> 1224 <a class="whatsapp-btn" href="https://wa.me/919400587871?text=Hi%20Neehara!%20I%27d%20like%20to%20know%20more%20about%20Zoho%20Bigin%20CRM." target="_blank" rel="noopener" aria-label="Chat on WhatsApp"> 1225 <div class="whatsapp-pulse"></div> 1226 <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> 1227 <path d="M16.002 2.667C8.637 2.667 2.667 8.637 2.667 16c0 2.346.63 4.548 1.727 6.448L2.667 29.333l7.07-1.693A13.274 13.274 0 0016.002 29.333c7.364 0 13.331-5.97 13.331-13.333S23.366 2.667 16.002 2.667zm0 24c-2.21 0-4.276-.627-6.024-1.713l-.432-.258-4.196 1.005 1.038-4.09-.282-.453A10.616 10.616 0 015.334 16c0-5.886 4.782-10.667 10.668-10.667S26.669 10.114 26.669 16 21.888 26.667 16.002 26.667zm5.844-7.99c-.32-.16-1.893-.934-2.187-1.04-.293-.107-.506-.16-.72.16-.214.32-.828 1.04-.983 1.254-.16.213-.32.24-.64.08-.32-.16-1.35-.497-2.573-1.587-.95-.847-1.592-1.893-1.778-2.213-.187-.32-.02-.493.14-.653.145-.144.32-.373.48-.56.16-.186.213-.32.32-.533.107-.213.053-.4-.027-.56-.08-.16-.72-1.733-.987-2.373-.26-.627-.52-.533-.72-.547-.186-.013-.4-.013-.613-.013s-.56.08-.853.4c-.293.32-1.12 1.093-1.12 2.666s1.147 3.094 1.307 3.307c.16.213 2.253 3.44 5.462 4.827.764.33 1.36.527 1.824.674.767.24 1.467.207 2.02.127.614-.093 1.893-.773 2.16-1.52.267-.746.267-1.386.187-1.52-.08-.133-.293-.213-.613-.373z"/> 1228 </svg> 1229 </a> 1230</div> 1231
1232<script> 1233 // ââ Feature item tab switching ââ 1234 document.querySelectorAll('.feature-item').forEach(item => { 1235 item.addEventListener('click', () => { 1236 document.querySelectorAll('.feature-item').forEach(i => i.classList.remove('active')); 1237 item.classList.add('active'); 1238 }); 1239 }); 1240 1241 // ââ Scroll animation ââ 1242 const observer = new IntersectionObserver(entries => { 1243 entries.forEach(e => { 1244 if (e.isIntersecting) { 1245 e.target.style.opacity = '1'; 1246 e.target.style.transform = 'translateY(0)'; 1247 } 1248 }); 1249 }, { threshold: 0.1 }); 1250 1251 document.querySelectorAll('.why-card, .step, .testi-card, .pricing-card').forEach(el => { 1252 el.style.opacity = '0'; 1253 el.style.transform = 'translateY(24px)'; 1254 el.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; 1255 observer.observe(el); 1256 }); 1257 1258 // ââ EmailJS Contact Form ââ 1259 // Initialize EmailJS with your public key 1260 // SETUP INSTRUCTIONS: 1261 // 1. Go to https://www.emailjs.com and create a free account 1262 // 2. Add an Email Service (Gmail) â copy the Service ID below 1263 // 3. Create an Email Template â copy the Template ID below 1264 // 4. Go to Account > Public Key â copy it below 1265 // 5. In your template, use these variables: 1266 // {{from_name}}, {{from_email}}, {{phone}}, {{company_size}}, 1267 // {{industry}}, {{message}}, {{to_email}} 1268 1269 const EMAILJS_PUBLIC_KEY = 'YOUR_PUBLIC_KEY'; // â replace 1270 const EMAILJS_SERVICE_ID = 'YOUR_SERVICE_ID'; // â replace 1271 const EMAILJS_TEMPLATE_ID = 'YOUR_TEMPLATE_ID'; // â replace 1272 const TO_EMAIL = '[email protected]'; 1273 1274 emailjs.init({ publicKey: EMAILJS_PUBLIC_KEY }); 1275 1276 // Validation helpers 1277 function showError(groupId, show) { 1278 const el = document.getElementById(groupId); 1279 if (!el) return; 1280 el.classList.toggle('has-error', show); 1281 } 1282 1283 function validateEmail(v) { 1284 return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v); 1285 } 1286 1287 function validateForm() { 1288 let valid = true; 1289 1290 const firstname = document.getElementById('firstname').value.trim(); 1291 showError('fg-firstname', !firstname); 1292 if (!firstname) valid = false; 1293 1294 const lastname = document.getElementById('lastname').value.trim(); 1295 showError('fg-lastname', !lastname); 1296 if (!lastname) valid = false; 1297 1298 const email = document.getElementById('email').value.trim(); 1299 showError('fg-email', !validateEmail(email)); 1300 if (!validateEmail(email)) valid = false; 1301 1302 const phone = document.getElementById('phone').value.trim(); 1303 showError('fg-phone', !phone); 1304 if (!phone) valid = false; 1305 1306 return valid; 1307 } 1308 1309 document.getElementById('demo-form').addEventListener('submit', async function(e) { 1310 e.preventDefault(); 1311 1312 // Hide previous alerts 1313 document.getElementById('form-success').style.display = 'none'; 1314 document.getElementById('form-error').style.display = 'none'; 1315 1316 if (!validateForm()) return; 1317 1318 const btn = document.getElementById('submit-btn'); 1319 btn.disabled = true; 1320 btn.innerHTML = 'â³ Sendingâ¦'; 1321 1322 const templateParams = { 1323 to_email: TO_EMAIL, 1324 from_name: document.getElementById('firstname').value.trim() + ' ' + document.getElementById('lastname').value.trim(), 1325 from_email: document.getElementById('email').value.trim(), 1326 phone: document.getElementById('phone').value.trim(), 1327 company_size: document.getElementById('companysize').value, 1328 industry: document.getElementById('industry').value, 1329 message: document.getElementById('message').value.trim() || '(no message)', 1330 }; 1331 1332 try { 1333 await emailjs.send(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_ID, templateParams); 1334 document.getElementById('form-success').style.display = 'block'; 1335 document.getElementById('demo-form').reset(); 1336 btn.innerHTML = 'â Sent Successfully!'; 1337 setTimeout(() => { 1338 btn.disabled = false; 1339 btn.innerHTML = 'ð Book My Free Demo â'; 1340 }, 4000); 1341 } catch (err) { 1342 console.error('EmailJS error:', err); 1343 document.getElementById('form-error').style.display = 'block'; 1344 btn.disabled = false;
1345 btn.innerHTML = 'ð Book My Free Demo â'; 1346 } 1347 }); 1348 1349 // Clear field errors on input 1350 ['firstname','lastname','email','phone'].forEach(id => { 1351 const el = document.getElementById(id); 1352 if (el) el.addEventListener('input', () => { 1353 const fg = document.getElementById('fg-' + id); 1354 if (fg) fg.classList.remove('has-error'); 1355 }); 1356 }); 1357</script>
1357 1358</body> 1359</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.