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>SYNTCH â AI-Powered Learning Platform for Daycare & Kâ12</title> 7<link rel="icon" type="image/png" href="assets/favicon.png" /> 8<link rel="preconnect" href="https://fonts.googleapis.com" /> 9<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> 10<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet" /> 11<style> 12 /* âââ DESIGN TOKENS ââââââââââââââââââââââââââââââââ */ 13 :root { 14 --ink: #0d1117; 15 --paper: #faf8f4; 16 --cream: #f3efe7; 17 --sage: #532ba4; 18 --sage-lt: #6b45bb; 19 --sage-pale:#efe9fa; 20 --amber: #e8924a; 21 --amber-lt: #fdf0e6; 22 --slate: #2c3e50; 23 --mist: #8a96a3; 24 --white: #ffffff; 25 --radius: 12px; 26 --shadow: 0 4px 32px rgba(13,17,23,0.10); 27 --shadow-lg:0 12px 60px rgba(13,17,23,0.14); 28 } 29 30 /* âââ RESET & BASE âââââââââââââââââââââââââââââââââ */ 31 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } 32 html { scroll-behavior: smooth; } 33 body { 34 font-family: 'DM Sans', sans-serif; 35 background: var(--paper); 36 color: var(--ink); 37 line-height: 1.65; 38 overflow-x: hidden; 39 } 40 img { display: block; max-width: 100%; } 41 a { text-decoration: none; color: inherit; } 42 43 /* âââ TYPOGRAPHY âââââââââââââââââââââââââââââââââââ */ 44 h1, h2, h3, h4 { 45 font-family: 'Playfair Display', serif; 46 line-height: 1.18; 47 } 48 h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 900; } 49 h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 700; } 50 h3 { font-size: 1.35rem; font-weight: 700; } 51 p { font-weight: 300; color: #3a4452; } 52 53 /* âââ LAYOUT HELPERS âââââââââââââââââââââââââââââââ */ 54 .container { max-width: 1160px; margin: 0 auto; padding: 0 24px; } 55 .section { padding: 96px 0; } 56 .section-sm { padding: 64px 0; } 57 .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } 58 .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } 59 .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } 60 61 @media (max-width: 860px) { 62 .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } 63 .section { padding: 64px 0; } 64 } 65 66 /* âââ ANIMATIONS âââââââââââââââââââââââââââââââââââ */ 67 @keyframes fadeUp { 68 from { opacity: 0; transform: translateY(28px); } 69 to { opacity: 1; transform: translateY(0); } 70 } 71 @keyframes floatDot { 72 0%, 100% { transform: translateY(0px); } 73 50% { transform: translateY(-14px); } 74 } 75 @keyframes pulseRing { 76 0% { transform: scale(0.9); opacity: 0.6; } 77 50% { transform: scale(1.05); opacity: 1; } 78 100% { transform: scale(0.9); opacity: 0.6; } 79 } 80 .fade-up { animation: fadeUp 0.75s ease both; } 81 .delay-1 { animation-delay: 0.15s; } 82 .delay-2 { animation-delay: 0.30s; } 83 .delay-3 { animation-delay: 0.45s; } 84 .delay-4 { animation-delay: 0.60s; } 85 86 /* âââ BUTTONS âââââââââââââââââââââââââââââââââââââââ */ 87 .btn { 88 display: inline-flex; align-items: center; gap: 8px; 89 padding: 15px 32px; 90 border-radius: 50px; 91 font-family: 'DM Sans', sans-serif; 92 font-weight: 600; font-size: 1rem; 93 cursor: pointer; border: none; transition: all 0.22s ease; 94 letter-spacing: 0.01em; 95 } 96 .btn-primary { 97 background: var(--sage); 98 color: var(--white); 99 box-shadow: 0 4px 20px rgba(83,43,164,0.35); 100 } 101 .btn-primary:hover { 102 background: var(--sage-lt); 103 transform: translateY(-2px); 104 box-shadow: 0 8px 28px rgba(83,43,164,0.40); 105 } 106 .btn-outline { 107 background: transparent; 108 color: var(--sage); 109 border: 2px solid var(--sage); 110 } 111 .btn-outline:hover { background: var(--sage-pale); } 112 .btn-amber { 113 background: var(--amber); 114 color: var(--white); 115 box-shadow: 0 4px 20px rgba(232,146,74,0.35); 116 } 117 .btn-amber:hover { background: #d97d38; transform: translateY(-2px); } 118 .btn-lg { padding: 18px 42px; font-size: 1.1rem; } 119 .btn-sm { padding: 11px 24px; font-size: 0.9rem; } 120 121 /* âââ TAGS / LABELS âââââââââââââââââââââââââââââââââ */ 122 .tag { 123 display: inline-block; 124 padding: 5px 14px; 125 border-radius: 50px; 126 font-size: 0.78rem; font-weight: 600; 127 letter-spacing: 0.06em; text-transform: uppercase; 128 } 129 .tag-sage { background: var(--sage-pale); color: var(--sage); } 130 .tag-amber { background: var(--amber-lt); color: #c06820; } 131 .tag-slate { background: #e8ecf0; color: var(--slate); } 132 133 /* âââ NAV âââââââââââââââââââââââââââââââââââââââââââ */ 134 nav { 135 position: sticky; top: 0; z-index: 100; 136 background: rgba(250,248,244,0.92); 137 backdrop-filter: blur(12px); 138 border-bottom: 1px solid rgba(0,0,0,0.07); 139 padding: 16px 0; 140 } 141 .nav-inner { 142 display: flex; align-items: center; justify-content: space-between; 143 max-width: 1160px; margin: 0 auto; padding: 0 24px; 144 } 145 .nav-logo { 146 display: inline-flex; 147 align-items: center; 148 } 149 .nav-logo img { 150 width: clamp(110px, 13vw, 165px); 151 height: auto; 152 } 153 .nav-links { display: flex; gap: 32px; align-items: center; } 154 .nav-links a { 155 font-size: 0.92rem; font-weight: 500; color: var(--slate); 156 transition: color 0.18s; 157 } 158 .nav-links a:hover { color: var(--sage); } 159 .nav-links a.btn, 160 .nav-links a.btn:hover { 161 color: var(--white); 162 } 163 164 #features, 165 #proof, 166 #pricing, 167 #book-demo { 168 scroll-margin-top: 110px; 169 } 170 171 /* âââ HERO ââââââââââââââââââââââââââââââââââââââââââ */ 172 .hero { 173 background: 174 linear-gradient(rgba(13, 17, 23, 0.72), rgba(13, 17, 23, 0.72)), 175 url("assets/banner_image.png") center center / cover no-repeat; 176 color: var(--white); 177 padding: 110px 0 90px; 178 position: relative; 179 overflow: hidden; 180 } 181 .hero::before { 182 content: ''; 183 position: absolute; inset: 0; 184 background: 185 radial-gradient(ellipse 80% 60% at 70% 40%, rgba(83,43,164,0.38) 0%, transparent 65%), 186 radial-gradient(ellipse 50% 50% at 20% 80%, rgba(232,146,74,0.18) 0%, transparent 60%); 187 pointer-events: none; 188 } 189 /* Decorative dots */ 190 .hero-dots { 191 position: absolute; top: 0; right: 0; width: 440px; height: 440px; 192 opacity: 0.08; 193 background-image: radial-gradient(circle, #fff 1.5px, transparent 1.5px); 194 background-size: 28px 28px; 195 } 196 .hero-content { position: relative; z-index: 2; } 197 .hero h1 { color: var(--white); max-width: 820px; } 198 .hero h1 em { 199 font-style: italic; 200 color: var(--amber); 201 } 202 .hero-sub { 203 font-size: 1.2rem; font-weight: 300; 204 color: rgba(255,255,255,0.78); 205 max-width: 620px; 206 margin: 22px 0 36px; 207 line-height: 1.7; 208 } 209 .hero-cta-group { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } 210 .hero-fomo { 211 margin-top: 18px; 212 font-size: 0.88rem; color: rgba(255,255,255,0.55); 213 font-weight: 400; 214 } 215 .hero-fomo strong { color: var(--amber); } 216 .hero-stats { 217 display: flex; gap: 48px; flex-wrap: wrap; 218 margin-top: 72px; 219 padding-top: 36px; 220 border-top: 1px solid rgba(255,255,255,0.12); 221 } 222 .hero-stat-item { min-width: 120px; } 223 .hero-stat-num { 224 font-family: 'Playfair Display', serif; 225 font-size: 2.4rem; font-weight: 900; 226 color: var(--white); 227 line-height: 1; 228 } 229 .hero-stat-num span { color: var(--amber); } 230 .hero-stat-label { 231 font-size: 0.85rem; color: rgba(255,255,255,0.55); 232 margin-top: 5px; max-width: 140px; 233 } 234 235 /* âââ TRUST BAR âââââââââââââââââââââââââââââââââââââ */ 236 .trust-bar { 237 background: var(--cream); 238 border-bottom: 1px solid rgba(0,0,0,0.07); 239 padding: 20px 0; 240 overflow: hidden; 241 } 242 .trust-bar-inner { 243 display: flex; align-items: center; gap: 48px; 244 font-size: 0.82rem; font-weight: 500; 245 color: var(--mist); 246 letter-spacing: 0.03em; 247 text-transform: uppercase; 248 flex-wrap: wrap; 249 justify-content: center; 250 } 251 .trust-badge { 252 display: flex; align-items: center; gap: 7px; 253 } 254 .trust-badge svg { width: 18px; height: 18px; color: var(--sage); } 255 .trust-divider { width: 1px; height: 18px; background: rgba(0,0,0,0.15); } 256 257 /* âââ PROBLEM SECTION âââââââââââââââââââââââââââââââ */ 258 .section-problem { background: var(--white); } 259 .eyebrow { 260 font-size: 0.8rem; font-weight: 600; 261 letter-spacing: 0.1em; text-transform: uppercase; 262 color: var(--sage); margin-bottom: 14px; 263 } 264 .section-intro { max-width: 580px; } 265 .section-intro p { font-size: 1.08rem; margin-top: 14px; } 266 .problem-cards { margin-top: 52px; } 267 .problem-card { 268 background: var(--paper); 269 border: 1px solid rgba(0,0,0,0.07); 270 border-radius: var(--radius); 271 padding: 28px 30px; 272 position: relative; 273 transition: box-shadow 0.2s; 274 } 275 .problem-card:hover { box-shadow: var(--shadow); } 276 .problem-card .icon { 277 font-size: 1.7rem; margin-bottom: 14px; 278 } 279 .problem-card h3 { font-size: 1.15rem; margin-bottom: 8px; } 280 .problem-card p { font-size: 0.92rem; } 281 .stat-callout { 282 font-family: 'Playfair Display', serif; 283 font-size: 1.6rem; font-weight: 700; 284 color: var(--amber); 285 display: block; 286 margin-top: 10px; 287 } 288 289 /* âââ SOLUTION / BENEFITS âââââââââââââââââââââââââââ */ 290 .section-solution { background: var(--ink); color: var(--white); } 291 .section-solution .eyebrow { color: var(--sage-lt); } 292 .section-solution h2 { color: var(--white); } 293 .section-solution .section-intro p { color: rgba(255,255,255,0.7); } 294 295 .benefit-row { 296 display: grid; 297 grid-template-columns: 1fr 1fr; 298 gap: 64px; 299 align-items: center; 300 padding: 56px 0; 301 border-bottom: 1px solid rgba(255,255,255,0.07); 302 } 303 .benefit-row:last-of-type { border-bottom: none; } 304 .benefit-row.reverse { direction: rtl; } 305 .benefit-row.reverse > * { direction: ltr; } 306 307 .benefit-visual { 308 background: rgba(255,255,255,0.04); 309 border: 1px solid rgba(255,255,255,0.09); 310 border-radius: 16px; 311 padding: 36px; 312 position: relative; 313 overflow: hidden; 314 } 315 .benefit-visual::before { 316 content: ''; 317 position: absolute; 318 top: -40px; right: -40px; 319 width: 180px; height: 180px; 320 border-radius: 50%; 321 background: radial-gradient(circle, rgba(61,107,79,0.25), transparent 70%); 322 } 323 .benefit-number { 324 font-family: 'Playfair Display', serif; 325 font-size: 5rem; font-weight: 900; 326 line-height: 1; 327 color: rgba(126,201,155,0.15); 328 position: absolute; top: 16px; right: 24px; 329 } 330 .benefit-metric { 331 font-family: 'Playfair Display', serif; 332 font-size: 3rem; font-weight: 900; 333 color: #7ec99b; 334 line-height: 1; 335 margin-bottom: 6px; 336 } 337 .benefit-metric-label { 338 font-size: 0.85rem; color: rgba(255,255,255,0.5); 339 text-transform: uppercase; letter-spacing: 0.06em; 340 font-weight: 600; 341 } 342 .progress-bar-wrap { margin-top: 20px; } 343 .progress-label { 344 display: flex; justify-content: space-between; 345 font-size: 0.82rem; color: rgba(255,255,255,0.55); 346 margin-bottom: 6px; 347 } 348 .progress-bg { 349 background: rgba(255,255,255,0.08); 350 border-radius: 100px; height: 6px; overflow: hidden; 351 } 352 .progress-fill { 353 height: 100%; border-radius: 100px; 354 background: linear-gradient(90deg, #3d6b4f, #7ec99b); 355 animation: growBar 1.4s ease both; 356 } 357 @keyframes growBar { 358 from { width: 0 !important; } 359 } 360 361 .benefit-text .tag { margin-bottom: 16px; } 362 .benefit-text h3 { 363 font-size: 1.65rem; color: var(--white); 364 margin-bottom: 16px; 365 } 366 .benefit-text p { color: rgba(255,255,255,0.70); font-size: 1.02rem; line-height: 1.75; } 367 .benefit-list { 368 list-style: none; margin-top: 20px; 369 display: flex; flex-direction: column; gap: 10px; 370 } 371 .benefit-list li { 372 display: flex; align-items: flex-start; gap: 10px; 373 font-size: 0.92rem; color: rgba(255,255,255,0.65); 374 } 375 .benefit-list li::before { 376 content: 'â'; 377 color: #7ec99b; font-weight: 700; 378 flex-shrink: 0;
378 margin-top: 1px; 379 } 380 381 @media (max-width: 860px) { 382 .benefit-row, .benefit-row.reverse { grid-template-columns: 1fr; direction: ltr; } 383 } 384 385 /* âââ FEATURES GRID âââââââââââââââââââââââââââââââââ */ 386 .section-features { background: var(--cream); } 387 .feature-card { 388 background: var(--white); 389 border: 1px solid rgba(0,0,0,0.07); 390 border-radius: 14px; 391 padding: 32px 28px; 392 transition: all 0.25s; 393 position: relative; 394 overflow: hidden; 395 } 396 .feature-card::after { 397 content: ''; 398 position: absolute; bottom: 0; left: 0; right: 0; 399 height: 3px; 400 background: linear-gradient(90deg, var(--sage), var(--sage-lt)); 401 transform: scaleX(0); transform-origin: left; 402 transition: transform 0.3s ease; 403 } 404 .feature-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); } 405 .feature-card:hover::after { transform: scaleX(1); } 406 .feature-icon { 407 width: 48px; height: 48px; 408 background: var(--sage-pale); 409 border-radius: 10px; 410 display: flex; align-items: center; justify-content: center; 411 font-size: 1.4rem; 412 margin-bottom: 18px; 413 } 414 .feature-card h3 { font-size: 1.1rem; margin-bottom: 10px; } 415 .feature-card p { font-size: 0.9rem; color: #5a6470; line-height: 1.6; } 416 417 /* âââ STATS BAND ââââââââââââââââââââââââââââââââââââ */ 418 .stats-band { 419 background: var(--sage); 420 padding: 64px 0; 421 position: relative; 422 overflow: hidden; 423 } 424 .stats-band::before { 425 content: ''; 426 position: absolute; top: -80px; right: -80px; 427 width: 320px; height: 320px; 428 border-radius: 50%; 429 background: rgba(255,255,255,0.05); 430 } 431 .stats-band-inner { 432 display: grid; grid-template-columns: repeat(4, 1fr); 433 gap: 24px; text-align: center; 434 position: relative; z-index: 1; 435 } 436 .stat-num { 437 font-family: 'Playfair Display', serif; 438 font-size: 2.8rem; font-weight: 900; 439 color: var(--white); 440 line-height: 1; 441 } 442 .stat-num em { color: var(--amber); font-style: normal; } 443 .stat-desc { 444 font-size: 0.88rem; color: rgba(255,255,255,0.72); 445 margin-top: 8px; line-height: 1.5; 446 } 447 @media (max-width: 860px) { 448 .stats-band-inner { grid-template-columns: 1fr 1fr; } 449 } 450 451 /* âââ SOCIAL PROOF ââââââââââââââââââââââââââââââââââ */ 452 .section-proof { background: var(--white); } 453 .proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; } 454 @media (max-width: 860px) { .proof-grid { grid-template-columns: 1fr; } } 455 456 .case-card { 457 border: 1px solid rgba(0,0,0,0.08); 458 border-radius: 14px; 459 padding: 28px 30px; 460 background: var(--paper); 461 position: relative; 462 } 463 .case-card .quote-mark { 464 font-family: 'Playfair Display', serif; 465 font-size: 4rem; font-weight: 900; 466 color: var(--sage-pale); 467 line-height: 1; 468 margin-bottom: -10px; 469 } 470 .case-card blockquote { 471 font-size: 1.05rem; 472 font-family: 'Playfair Display', serif; 473 font-style: italic; 474 color: var(--slate); 475 line-height: 1.6; 476 margin-bottom: 16px; 477 } 478 .case-card .case-meta { 479 font-size: 0.82rem; color: var(--mist); font-weight: 500; 480 } 481 .case-result { 482 display: inline-block; 483 background: var(--sage-pale); 484 color: var(--sage); 485 font-weight: 700; 486 font-size: 0.82rem; 487 padding: 4px 12px; 488 border-radius: 50px; 489 margin-top: 12px; 490 } 491 .trust-block { 492 background: linear-gradient(135deg, var(--ink) 0%, #1a2433 100%); 493 border-radius: 16px; 494 padding: 40px 44px; 495 margin-top: 48px; 496 display: flex; 497 gap: 48px; 498 align-items: center; 499 justify-content: space-between; 500 flex-wrap: nowrap; 501 } 502 .trust-block-text { flex: 1 1 68%; min-width: 0; } 503 .trust-block-text h3 { color: var(--white); margin-bottom: 8px; } 504 .trust-block-text p { color: rgba(255,255,255,0.60); font-size: 0.95rem; max-width: 100%; } 505 .compliance-badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; } 506 .badge { 507 background: rgba(255,255,255,0.08); 508 border: 1px solid rgba(255,255,255,0.15); 509 border-radius: 8px; 510 padding: 8px 16px; 511 font-size: 0.8rem; 512 font-weight: 700; 513 color: rgba(255,255,255,0.85); 514 letter-spacing: 0.05em; 515 } 516 517 @media (max-width: 860px) { 518 .trust-block { 519 flex-wrap: wrap; 520 } 521 } 522 523 /* âââ MID-PAGE CTA ââââââââââââââââââââââââââââââââââ */ 524 .mid-cta { 525 background: var(--amber-lt); 526 border-radius: 20px; 527 padding: 52px 56px; 528 display: flex; 529 align-items: center; 530 justify-content: space-between; 531 gap: 32px; 532 flex-wrap: wrap; 533 margin: 64px auto; 534 max-width: 1100px; 535 } 536 .mid-cta h2 { font-size: 1.9rem; max-width: 520px; line-height: 1.3; } 537 .mid-cta h2 em { color: var(--sage); font-style: italic; } 538 .mid-cta-right { text-align: right; } 539 .mid-cta-actions { 540 display: flex; 541 gap: 10px; 542 justify-content: flex-end; 543 align-items: center; 544 flex-wrap: nowrap; 545 } 546 .mid-cta-right .fomo { font-size: 0.85rem; color: var(--mist); margin-top: 10px; } 547 548 /* âââ PERSONA TABS ââââââââââââââââââââââââââââââââââ */ 549 .section-personas { background: var(--cream); } 550 .persona-tabs { 551 display: flex; gap: 4px; 552 background: rgba(0,0,0,0.06); 553 border-radius: 50px; 554 padding: 5px; 555 width: fit-content; 556 margin: 0 auto 48px; 557 } 558 .persona-tab { 559 padding: 10px 28px; 560 border-radius: 50px; 561 font-size: 0.9rem; font-weight: 600; 562 cursor: pointer; 563 transition: all 0.2s; 564 color: var(--mist); 565 background: transparent; border: none; 566 font-family: 'DM Sans', sans-serif; 567 } 568 .persona-tab.active { 569 background: var(--white); 570 color: var(--sage); 571 box-shadow: 0 2px 12px rgba(0,0,0,0.10); 572 } 573 .persona-content { display: none; } 574 .persona-content.active { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } 575 @media (max-width: 860px) { .persona-content.active { grid-template-columns: 1fr; } } 576 577 .persona-item { 578 background: var(--white); 579 border-radius: 12px; 580 padding: 24px 26px; 581 border: 1px solid rgba(0,0,0,0.07); 582 } 583 .persona-item h4 { font-size: 1rem; margin-bottom: 8px; } 584 .persona-item p { font-size: 0.88rem; color: #5a6470; } 585 586 /* âââ FINAL CTA âââââââââââââââââââââââââââââââââââââ */ 587 .section-final-cta { 588 background: var(--ink); 589 text-align: center; 590 padding: 120px 0; 591 position: relative; 592 overflow: hidden; 593 } 594 .section-final-cta::before { 595 content: ''; 596 position: absolute; inset: 0; 597 background: 598 radial-gradient(ellipse 60% 60% at 50% 100%, rgba(61,107,79,0.35), transparent 65%); 599 } 600 .cta-content { position: relative; z-index: 2; } 601 .cta-content h2 { 602 color: var(--white); 603 max-width: 700px; margin: 0 auto; 604 } 605 .cta-content h2 em { color: #7ec99b; font-style: italic; } 606 .cta-content p { 607 color: rgba(255,255,255,0.60); 608 margin: 20px auto 0; 609 max-width: 500px; font-size: 1.05rem; 610 } 611 .cta-buttons { 612 display: flex; gap: 16px; justify-content: center; 613 flex-wrap: wrap; margin-top: 36px; 614 } 615 .cta-trust { margin-top: 24px; font-size: 0.83rem; color: rgba(255,255,255,0.38); } 616 .cta-trust a { color: rgba(255,255,255,0.55); text-decoration: underline; } 617 618 /* âââ FOOTER ââââââââââââââââââââââââââââââââââââââââ */ 619 footer { 620 background: var(--ink); 621 border-top: 1px solid rgba(255,255,255,0.08); 622 padding: 46px 0 24px; 623 text-align: center; 624 } 625 .footer-inner { 626 max-width: 980px; 627 margin: 0 auto; 628 display: flex; 629 flex-direction: column; 630 align-items: center; 631 gap: 12px; 632 } 633 .footer-logo { 634 display: flex; 635 justify-content: center; 636 margin-bottom: 2px; 637 } 638 .footer-logo img { 639 width: clamp(130px, 14vw, 180px); 640 height: auto; 641 } 642 .footer-tagline { 643 font-size: 0.9rem; 644 color: rgba(255,255,255,0.62); 645 margin: 0; 646 max-width: 720px; 647 } 648 .footer-links { 649 display: flex; 650 flex-wrap: wrap; 651 justify-content: center; 652 gap: 8px 12px; 653 margin: 6px 0 10px; 654 } 655 .footer-links a { 656 font-size: 0.8rem; 657 color: rgba(255,255,255,0.72); 658 padding: 6px 10px; 659 border: 1px solid rgba(255,255,255,0.16); 660 border-radius: 999px; 661 text-decoration: none; 662 transition: color 0.2s ease, border-color 0.2s ease; 663 } 664 .footer-links a:hover { 665 color: var(--white); 666 border-color: rgba(255,255,255,0.35); 667 } 668 .footer-divider { 669 width: min(760px, 92%); 670 height: 1px; 671 background: rgba(255,255,255,0.12); 672 margin: 2px 0 4px; 673 } 674 .footer-bottom { 675 width: min(760px, 92%); 676 display: flex; 677 align-items: center; 678 justify-content: space-between; 679 gap: 10px 18px; 680 flex-wrap: wrap; 681 } 682 .footer-copy { 683 font-size: 0.78rem; 684 color: rgba(255,255,255,0.42); 685 margin: 0; 686 } 687 .footer-meta { 688 display: flex; 689 gap: 8px 14px; 690 flex-wrap: wrap; 691 justify-content: center; 692 } 693 .footer-meta a, 694 .footer-meta span { 695 font-size: 0.78rem; 696 color: rgba(255,255,255,0.5); 697 text-decoration: none; 698 } 699 .footer-meta a:hover { 700 color: rgba(255,255,255,0.78); 701 } 702 703 @media (max-width: 700px) { 704 footer { padding: 34px 0 22px; } 705 .footer-tagline { font-size: 0.84rem; } 706 .footer-bottom { justify-content: center; } 707 .footer-copy { text-align: center; } 708 } 709 710 /* âââ DIVIDER âââââââââââââââââââââââââââââââââââââââ */ 711 .divider { 712 height: 1px; background: rgba(0,0,0,0.07); 713 margin: 0; 714 } 715 716 /* âââ FLOATING ACCENT âââââââââââââââââââââââââââââââ */ 717 .accent-blob { 718 position: absolute; border-radius: 50%; 719 pointer-events: none; filter: blur(80px); opacity: 0.12; 720 } 721 722 /* âââ SHOW/CARE/K12 + BOOK DEMO (from index1) âââââ */ 723 .dashboard-showcarek12-section { 724 padding: 64px 0 24px; 725 background: var(--paper); 726 } 727 .dashboard-banner-section { 728 position: relative; 729 width: 100vw; 730 margin-left: calc(50% - 50vw); 731 margin-right: calc(50% - 50vw); 732 margin-bottom: 2rem; 733 overflow: hidden; 734 background: #f7f9fd; 735 box-shadow: 0 16px 34px rgba(16, 24, 40, 0.1); 736 } 737 .dashboard-banner-track { position: relative; min-height: 220px; } 738 .dashboard-banner-slide { 739 position: absolute; 740 inset: 0; 741 opacity: 0; 742 visibility: hidden; 743 transition: opacity 0.65s ease; 744 } 745 .dashboard-banner-slide.is-active { 746 position: relative; 747 opacity: 1; 748 visibility: visible; 749 } 750 .dashboard-banner-image { 751 display: block; 752 width: 100%; 753 height: auto; 754 object-fit: cover; 755 } 756 .dashboard-banner-indicators { 757 position: absolute; 758 left: 50%; 759 bottom: 12px; 760 transform: translateX(-50%); 761 display: flex; 762 gap: 8px; 763 padding: 6px 10px; 764 border-radius: 999px; 765 background: rgba(255, 255, 255, 0.75); 766 backdrop-filter: blur(3px); 767 } 768 .dashboard-banner-dot { 769 width: 8px; 770 height: 8px; 771 border-radius: 50%; 772 border: none; 773 background: rgba(83, 43, 164, 0.35); 774 cursor: pointer; 775 transition: transform 0.2s ease, background 0.2s ease; 776 } 777 .dashboard-banner-dot.is-active { 778 background: var(--sage); 779 transform: scale(1.25); 780 } 781 .dashboard-showcarek12-header { 782 text-align: center; 783 margin: 0 auto 2rem; 784 max-width: 56rem; 785 } 786 .dashboard-header-logo { 787 width: min(360px, 80%); 788 height: auto; 789 margin: 0 auto 1rem; 790 } 791 .dashboard-showcarek12-header h2 { 792 margin: 0 0 0.9rem; 793 font-size: clamp(1.6rem, 2.8vw, 2.45rem); 794 line-height: 1.2; 795 letter-spacing: -0.02em; 796 font-weight: 800; 797 } 798 .dashboard-showcarek12-header p { 799 margin: 0; 800 color: var(--mist); 801 font-size: 1.03rem; 802 line-height: 1.6; 803 } 804 .dashboard-showcarek12-grid { 805 display: grid; 806 grid-template-columns: repeat(3, minmax(0, 1fr)); 807 gap: 1.1rem; 808 margin-bottom: 2.2rem; 809 } 810 .dashboard-showcarek12-item { 811 display: block; 812 background: var(--white); 813 border: 1px solid rgba(0, 0, 0, 0.08); 814 border-radius: 16px; 815 padding: 1.35rem; 816 box-shadow: 0 10px 30px rgba(16, 24, 40, 0.07); 817 } 818 .dashboard-showcarek12-badge { 819 width: 100%; 820 height: 120px; 821 display: block; 822 object-fit: cover; 823 border-radius: 12px; 824 margin-bottom: 0.95rem; 825 } 826 .dashboard-showcarek12-item h4 { 827 margin: 0 0 0.55rem; 828 font-size: 1.15rem; 829 } 830 .dashboard-showcarek12-item p { 831 margin: 0; 832 color: var(--mist); 833 } 834 .dashboard-demo-layout { 835 position: relative; 836 background: url("assets/back_image.jpg") center center / cover no-repeat; 837 border: 1px solid rgba(15, 23, 42, 0.16); 838 border-radius: 20px; 839 padding: 1.5rem; 840 display: grid; 841 grid-template-columns: 1.2fr 1fr; 842 gap: 1.2rem; 843 overflow: hidden; 844 box-shadow: 0 20px 48px rgba(16, 24, 40, 0.24); 845 } 846 .dashboard-demo-layout::before { 847 content: ""; 848 position: absolute; 849 inset: 0; 850 background: linear-gradient(120deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.58)); 851 z-index: 0; 852 } 853 .dashboard-demo-layout > * { 854 position: relative; 855 z-index: 1; 856 } 857 .mt-5 { 858 grid-column: 1 / -1; 859 margin-top: 0; 860 margin-bottom: 0; 861 } 862 .dashboard-demo-layout .dashboard-showcarek12-header { margin-bottom: 0.35rem; } 863 .dashboard-demo-layout .dashboard-showcarek12-header h2 { color: #ffffff; } 864 .dashboard-demo-layout .dashboard-showcarek12-header p { color: rgba(255, 255, 255, 0.85); } 865 .dashboard-demo-content { padding: 1.3rem; color: #ffffff; } 866 .dashboard-demo-pill { 867 display: inline-block; 868 padding: 0.38rem 0.78rem; 869 border-radius: 999px; 870 background: rgba(255, 255, 255, 0.16); 871 color: #ffffff; 872 border: 1px solid rgba(255, 255, 255, 0.32); 873 font-size: 0.8rem; 874 font-weight: 600; 875 margin-bottom: 0.9rem; 876 } 877 .dashboard-demo-content h2 { 878 margin: 0 0 0.85rem; 879 font-size: clamp(1.45rem, 2.5vw, 2rem); 880 line-height: 1.2; 881 letter-spacing: -0.02em; 882 } 883 .dashboard-demo-content p { 884 margin: 0 0 0.9rem; 885 color: rgba(255, 255, 255, 0.9); 886 } 887 .dashboard-demo-metrics { 888 margin-top: 1.25rem; 889 display: grid; 890 grid-template-columns: repeat(3, minmax(0, 1fr)); 891 gap: 0.75rem; 892 } 893 .dashboard-demo-metrics > div { 894 background: rgba(255, 255, 255, 0.12); 895 border: 1px solid rgba(255, 255, 255, 0.28); 896 border-radius: 12px; 897 padding: 0.82rem; 898 } 899 .dashboard-demo-metrics h5 { margin: 0; font-size: 1.2rem; color: #ffffff; } 900 .dashboard-demo-metrics span { color: rgba(255, 255, 255, 0.84); font-size: 0.84rem; } 901 .dashboard-demo-form-wrap { padding: 1.3rem; } 902 .dashboard-book-demo-card { 903 border: 1px solid rgba(255, 255, 255, 0.42); 904 border-radius: 16px; 905 background: rgba(255, 255, 255, 0.9); 906 width: 100%; 907 box-shadow: 0 20px 35px rgba(15, 23, 42, 0.22); 908 } 909 .card-body { padding: 1.2rem; } 910 .form-group { display: flex; flex-direction: column; } 911 .form-group label { 912 font-weight: 600; 913 margin-bottom: 0.5rem; 914 color: #1f2a44; 915 font-size: 0.92rem; 916 } 917 .text-danger { color: #dc2626; } 918 .dashboard-showcarek12-section input, 919 .dashboard-showcarek12-section select, 920 .dashboard-showcarek12-section textarea { 921 width: 100%; 922 border: 1px solid #c8d3ea; 923 border-radius: 10px; 924 background: #fbfcff; 925 padding: 0.72rem 0.8rem; 926 font-size: 0.95rem; 927 color: #162033; 928 outline: none; 929 transition: border-color 0.2s ease, box-shadow 0.2s ease; 930 } 931 .dashboard-showcarek12-section input:focus, 932 .dashboard-showcarek12-section select:focus, 933 .dashboard-showcarek12-section textarea:focus { 934 border-color: var(--sage); 935 box-shadow: 0 0 0 3px rgba(83, 43, 164, 0.14); 936 } 937 .dashboard-showcarek12-section textarea { resize: vertical; min-height: 110px; } 938 .mb-3 { margin-bottom: 1rem; } 939 .dashboard-form-btn { 940 border: 0; 941 cursor: pointer; 942 border-radius: 12px; 943 padding: 0.82rem 1rem; 944 font-weight: 700; 945 letter-spacing: 0.01em; 946 color: #f
946ff; 947 background: var(--sage); 948 box-shadow: 0 10px 22px rgba(83, 43, 164, 0.32); 949 transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; 950 } 951 .dashboard-form-btn:hover:enabled { 952 background: var(--sage-lt); 953 transform: translateY(-1px); 954 box-shadow: 0 15px 26px rgba(83, 43, 164, 0.36); 955 } 956 .dashboard-form-btn:disabled { opacity: 0.75; cursor: not-allowed; } 957 .w-100 { width: 100%; } 958 .dashboard-book-demo-success, 959 .dashboard-book-demo-error { 960 margin-top: 0.95rem; 961 border-radius: 8px; 962 padding: 0.65rem 0.75rem; 963 font-size: 0.9rem; 964 } 965 .dashboard-book-demo-success { background: #ecfdf3; color: #065f46; } 966 .dashboard-book-demo-error { background: #fef2f2; color: #991b1b; } 967 .hidden { display: none; } 968 @media (max-width: 992px) { 969 .dashboard-showcarek12-grid, 970 .dashboard-demo-metrics { grid-template-columns: 1fr; } 971 .dashboard-demo-layout { 972 grid-template-columns: 1fr; 973 padding: 1rem; 974 } 975 .dashboard-demo-content, 976 .dashboard-demo-form-wrap { padding: 0.35rem; } 977 .dashboard-showcarek12-header { margin-bottom: 1.5rem; } 978 } 979 @media (max-width: 700px) { 980 .dashboard-header-logo { width: min(280px, 88%); } 981 } 982 983 @media (max-width: 960px) { 984 .nav-inner { 985 flex-wrap: wrap; 986 gap: 10px; 987 justify-content: center; 988 } 989 .nav-links { 990 width: 100%; 991 justify-content: center; 992 flex-wrap: wrap; 993 gap: 12px 18px; 994 } 995 .hero { 996 padding: 92px 0 74px; 997 } 998 .hero-stats { 999 gap: 24px; 1000 margin-top: 56px; 1001 } 1002 .mid-cta { 1003 padding: 40px 30px; 1004 } 1005 .mid-cta-right { 1006 width: 100%; 1007 text-align: left; 1008 } 1009 .mid-cta-actions { 1010 justify-content: flex-start; 1011 flex-wrap: wrap; 1012 } 1013 .persona-tabs { 1014 max-width: 100%; 1015 flex-wrap: wrap; 1016 justify-content: center; 1017 border-radius: 16px; 1018 } 1019 } 1020 1021 @media (max-width: 640px) { 1022 .container { 1023 padding: 0 16px; 1024 } 1025 nav { 1026 padding: 12px 0; 1027 } 1028 .nav-logo img { 1029 width: clamp(96px, 30vw, 130px); 1030 } 1031 .nav-links a { 1032 font-size: 0.86rem; 1033 } 1034 .btn-sm { 1035 padding: 9px 16px; 1036 font-size: 0.82rem; 1037 } 1038 .hero-dots { 1039 width: 300px; 1040 height: 300px; 1041 opacity: 0.06; 1042 } 1043 .hero-sub { 1044 font-size: 1rem; 1045 margin: 18px 0 28px; 1046 } 1047 .hero-stats { 1048 gap: 16px; 1049 } 1050 .hero-stat-item { 1051 min-width: calc(50% - 8px); 1052 } 1053 .hero-stat-num { 1054 font-size: 2rem; 1055 } 1056 .trust-bar-inner { 1057 gap: 14px; 1058 justify-content: flex-start; 1059 overflow-x: auto; 1060 flex-wrap: nowrap; 1061 padding: 0 2px; 1062 -webkit-overflow-scrolling: touch; 1063 } 1064 .trust-divider { 1065 display: none; 1066 } 1067 .mid-cta { 1068 padding: 30px 22px; 1069 margin: 44px auto; 1070 } 1071 .mid-cta h2 { 1072 font-size: 1.55rem; 1073 } 1074 .mid-cta-actions { 1075 width: 100%; 1076 flex-direction: column; 1077 align-items: stretch; 1078 } 1079 .mid-cta-actions .btn { 1080 justify-content: center; 1081 width: 100%; 1082 } 1083 .persona-tab { 1084 padding: 9px 16px; 1085 font-size: 0.82rem; 1086 } 1087 .section-final-cta { 1088 padding: 88px 0; 1089 } 1090 .cta-buttons { 1091 gap: 10px; 1092 } 1093 .cta-buttons .btn { 1094 width: 100%; 1095 justify-content: center; 1096 } 1097 .footer-bottom { 1098 flex-direction: column; 1099 align-items: center; 1100 } 1101 } 1102</style> 1103</head> 1104<body> 1105 1106<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1107<!-- NAV --> 1108<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1109<nav> 1110 <div class="nav-inner"> 1111 <div class="nav-logo"> 1112 <img src="assets/logo.png" alt="SYNTCH logo" /> 1113 </div> 1114 <div class="nav-links"> 1115 <a href="#features">Features</a> 1116 <a href="#proof">Results</a> 1117 <a href="#book-demo" class="btn btn-primary btn-sm">Book a Demo â</a> 1118 </div> 1119 </div> 1120</nav> 1121 1122<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1123<!-- HERO --> 1124<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1125<section class="hero"> 1126 <div class="hero-dots"></div> 1127 <div class="container hero-content"> 1128 1129 <p class="tag tag-sage fade-up" style="margin-bottom:20px;">
1129AI-Powered Education Platform · Age 2 â Grade 12</p> 1130 1131 <h1 class="fade-up delay-1"> 1132 Stop Managing Paperwork.<br/> 1133 <em>Start Shaping Futures.</em> 1134 </h1> 1135 1136 <p class="hero-sub fade-up delay-2"> 1137 Syntch is the unified AI platform that takes the administrative weight off educators' shoulders â so every hour reclaimed becomes a richer learning moment for every child. 1138 </p> 1139 1140 <div class="hero-cta-group fade-up delay-3"> 1141 <a href="#book-demo" class="btn btn-primary btn-lg">See Syntch in Action â</a> 1142 <a href="#features" class="btn btn-outline btn-lg" style="color:#fff;border-color:rgba(255,255,255,0.35);">Explore Features</a> 1143 </div> 1144 <p class="hero-fomo fade-up delay-4"> 1145 <strong>35%+ of schools globally</strong> have already adopted AI learning platforms. The window to lead is now. 1146 </p> 1147 1148 <div class="hero-stats fade-up delay-4"> 1149 <div class="hero-stat-item"> 1150 <div class="hero-stat-num">6â7<span> hrs</span></div> 1151 <div class="hero-stat-label">saved weekly per educator on admin tasks</div> 1152 </div> 1153 <div class="hero-stat-item"> 1154 <div class="hero-stat-num">54<span>%</span></div> 1155 <div class="hero-stat-label">of Kâ12 students already use AI for school</div> 1156 </div> 1157 <div class="hero-stat-item"> 1158 <div class="hero-stat-num">20<span>%</span></div> 1159 <div class="hero-stat-label">increase in parent engagement on AI platforms</div> 1160 </div> 1161 <div class="hero-stat-item"> 1162 <div class="hero-stat-num">38<span>%</span></div> 1163 <div class="hero-stat-label">annual growth rate in AI Kâ12 education market</div> 1164 </div> 1165 </div> 1166 1167 </div> 1168</section> 1169 1170<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1171<!-- TRUST BAR --> 1172<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1173<div class="trust-bar"> 1174 <div class="trust-bar-inner"> 1175 <span class="trust-badge"> 1176 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg> 1177 FERPA Compliant 1178 </span> 1179 <span class="trust-divider"></span> 1180 <span class="trust-badge"> 1181 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg> 1182 COPPA Certified 1183 </span> 1184 <span class="trust-divider"></span> 1185 <span class="trust-badge"> 1186 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg> 1187 GDPR Ready 1188 </span> 1189 <span class="trust-divider"></span> 1190 <span class="trust-badge"> 1191 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg> 1192 SOC 2 Type II 1193 </span> 1194 <span class="trust-divider"></span> 1195 <span class="trust-badge"> 1196 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg> 1197 Trusted by 1,200+ Institutions 1198 </span> 1199 </div> 1200</div> 1201 1202<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1203<!-- THE PROBLEM --> 1204<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1205<section class="section section-problem" id="problem"> 1206 <div class="container"> 1207 <div class="section-intro"> 1208 <p class="eyebrow">The Problem We're Solving</p> 1209 <h2>Educators Are Losing the Hours That Matter Most</h2> 1210 <p>The educators you employ became teachers and caregivers to make a difference in children's lives â not to wrestle with spreadsheets, chase down tuition payments, or rewrite the same report for the third time this week.</p> 1211 </div> 1212 1213 <div class="problem-cards grid-3" style="margin-top:52px;"> 1214 <div class="problem-card"> 1215 <div class="icon">ð</div> 1216 <h3>Administrative Overload</h3> 1217 <p>Teachers and center directors spend up to 30â40% of their day on non-instructional tasks â billing, compliance paperwork, scheduling, and documentation.</p>
1218 <span class="stat-callout">6â7 hrs/week</span> 1219 <p style="font-size:0.82rem;margin-top:4px;color:#8a96a3;">lost per educator to admin work</p> 1220 </div> 1221 <div class="problem-card"> 1222 <div class="icon">ð¨</div> 1223 <h3>At-Risk Students Slip Through</h3> 1224 <p>Without early warning systems, struggling students aren't identified until failure is already visible. Reactive intervention is too late â and too costly.</p> 1225 <span class="stat-callout">23% more</span> 1226 <p style="font-size:0.82rem;margin-top:4px;color:#8a96a3;">at-risk students identified with AI tools</p> 1227 </div> 1228 <div class="problem-card"> 1229 <div class="icon">ð¨âð©âð§</div> 1230 <h3>Disconnected Families</h3> 1231 <p>Parents want visibility. Language barriers, busy schedules, and delayed communication leave families disengaged â eroding trust and enrollment retention.</p> 1232 <span class="stat-callout">20% increase</span> 1233 <p style="font-size:0.82rem;margin-top:4px;color:#8a96a3;">in parent engagement with AI communication tools</p> 1234 </div> 1235 </div> 1236 1237 </div> 1238</section> 1239 1240<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1241<!-- SOLUTION / BENEFITS --> 1242<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1243<section class="section section-solution" id="solution"> 1244 <div class="container"> 1245 <div class="section-intro"> 1246 <p class="eyebrow">Why Syntch Works</p> 1247 <h2>Four Ways Syntch Transforms Learning</h2> 1248 <p>Syntch doesn't just automate tasks. It restructures what's possible â for students, educators, families, and institutions.</p> 1249 </div> 1250 1251 <!-- Benefit 1 --> 1252 <div class="benefit-row"> 1253 <div class="benefit-visual"> 1254 <div class="benefit-number">01</div> 1255 <div class="benefit-metric">38%</div> 1256 <div class="benefit-metric-label">Faster skill mastery on personalized paths</div> 1257 <div class="progress-bar-wrap"> 1258 <div class="progress-label"><span>Traditional one-size-fits-all</span><span>45%</span></div> 1259 <div class="progress-bg"><div class="progress-fill" style="width:45%"></div></div> 1260 </div> 1261 <div class="progress-bar-wrap" style="margin-top:10px;"> 1262 <div class="progress-label"><span>Syntch adaptive learning</span><span>83%</span></div> 1263 <div class="progress-bg"><div class="progress-fill" style="width:83%"></div></div> 1264 </div> 1265 <p style="margin-top:14px;font-size:0.8rem;color:rgba(255,255,255,0.35);">Concept mastery rate at semester end</p> 1266 </div> 1267 <div class="benefit-text"> 1268 <span class="tag tag-sage">Personalized Learning</span> 1269 <h3>Every Student Learns at Their Own Perfect Pace</h3> 1270 <p>Syntch's adaptive AI engine continuously analyzes each child's performance, learning style, and knowledge gaps â adjusting content in real time. No student is left bored or left behind.</p> 1271 <ul class="benefit-list"> 1272 <li>AI-generated learning pathways unique to every student</li> 1273 <li>Real-time content difficulty adjustment based on response patterns</li> 1274 <li>Progress dashboards visible to teachers and parents simultaneously</li> 1275 <li>Works from early literacy (age 2) through Advanced Placement (grade 12)</li> 1276 </ul> 1277 </div> 1278 </div> 1279 1280 <!-- Benefit 2 --> 1281 <div class="benefit-row reverse"> 1282 <div class="benefit-visual"> 1283 <div class="benefit-number">
128302</div> 1284 <div class="benefit-metric">23%</div> 1285 <div class="benefit-metric-label">More at-risk students identified early</div> 1286 <div style="margin-top:24px;background:rgba(255,255,255,0.04);border-radius:10px;padding:16px 18px;"> 1287 <p style="font-size:0.82rem;color:rgba(255,255,255,0.55);margin-bottom:10px;">ð´ HIGH RISK · 3 students flagged this week</p> 1288 <div style="background:rgba(255,255,255,0.06);border-radius:8px;padding:12px 14px;margin-bottom:8px;"> 1289 <p style="font-size:0.85rem;color:rgba(255,255,255,0.8);">Jayden M. · Grade 4</p> 1290 <p style="font-size:0.78rem;color:rgba(232,146,74,0.9);margin-top:3px;">Reading comprehension 40% below grade average â 14 days</p> 1291 </div> 1292 <div style="background:rgba(255,255,255,0.06);border-radius:8px;padding:12px 14px;"> 1293 <p style="font-size:0.85rem;color:rgba(255,255,255,0.8);">Sofia R. · Daycare Room B</p> 1294 <p style="font-size:0.78rem;color:rgba(232,146,74,0.9);margin-top:3px;">Milestone delay: fine motor skills â review recommended</p> 1295 </div> 1296 </div> 1297 <p style="margin-top:12px;font-size:0.78rem;color:rgba(255,255,255,0.25);">Illustrative UI â Syntch Early Warning Dashboard</p> 1298 </div> 1299 <div class="benefit-text"> 1300 <span class="tag tag-amber">Early Intervention</span> 1301 <h3>Catch the Warning Signs Before They Become Crises</h3> 1302 <p>Syntch's AI monitors developmental milestones and academic indicators continuously, surfacing at-risk children before failure becomes visible to the naked eye. For daycare, it tracks developmental benchmarks. For Kâ12, it monitors engagement, performance, and behavioral patterns.</p> 1303 <ul class="benefit-list"> 1304 <li>AI early warning flags updated daily for every student</li> 1305 <li>Developmental milestone tracking from age 2 to grade 12</li> 1306 <li>Automated referral workflows to counselors or specialists</li> 1307 <li>Identifies 23% more at-risk students before intervention is urgent</li> 1308 </ul> 1309 </div> 1310 </div> 1311 1312 <!-- Benefit 3 --> 1313 <div class="benefit-row"> 1314 <div class="benefit-visual"> 1315 <div class="benefit-number">03</div> 1316 <div class="benefit-metric">6.5<span style="font-size:1.8rem;color:rgba(126,201,155,0.6)">hrs</span></div> 1317 <div class="benefit-metric-label">Average admin hours saved per educator weekly</div> 1318 <div style="margin-top:24px;"> 1319 <div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;"> 1320 <div style="width:38px;height:38px;border-radius:8px;background:rgba(61,107,79,0.3);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;">â </div> 1321 <p style="font-size:0.83rem;color:rgba(255,255,255,0.65);">Billing & invoicing auto-generated</p> 1322 </div> 1323 <div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;"> 1324 <div style="width:38px;height:38px;border-radius:8px;background:rgba(61,107,79,0.3);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;">â </div> 1325 <p style="font-size:0.83rem;color:rgba(255,255,255,0.65);">Compliance reports compiled in seconds</p> 1326 </div> 1327 <div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;"> 1328 <div style="width:38px;height:38px;border-radius:8px;background:rgba(61,107,79,0.3);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;">â </div> 1329 <p style="font-size:0.83rem;color:rgba(255,255,255,0.65);">Scheduling optimized with one click</p> 1330 </div> 1331 <div style="display:flex;align-items:center;gap:12px;"> 1332 <div style="width:38px;height:38px;border-radius:8px;background:rgba(61,107,79,0.3);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;">â </div> 1333 <p style="font-size:0.83rem;color:rgba(255,255,255,0.65);">Parent reports sent automatically each day</p> 1334 </div> 1335 </div> 1336 </div> 1337 <div class="benefit-text">
1338 <span class="tag tag-sage">Time Reclaimed</span> 1339 <h3>Give Educators Back the Hours That Belong in the Classroom</h3> 1340 <p>Every minute your teachers spend on scheduling, billing, and data entry is a minute not spent with a child. Syntch automates the entire administrative backbone â so your team's energy flows back where it was always meant to go.</p> 1341 <ul class="benefit-list"> 1342 <li>Educators report saving 6â7 hours per week on admin tasks</li> 1343 <li>Centers using AI admin tools see 12â20% efficiency gains</li> 1344 <li>Smart scheduling, waitlist management, and automated billing</li> 1345 <li>Real-time compliance documentation â no end-of-month scramble</li> 1346 </ul> 1347 </div> 1348 </div> 1349 1350 <!-- Benefit 4 --> 1351 <div class="benefit-row reverse"> 1352 <div class="benefit-visual"> 1353 <div class="benefit-number">04</div> 1354 <div class="benefit-metric">20%</div> 1355 <div class="benefit-metric-label">Average increase in parent engagement</div> 1356 <div style="margin-top:20px;background:rgba(255,255,255,0.04);border-radius:12px;padding:18px;border:1px solid rgba(255,255,255,0.07);"> 1357 <p style="font-size:0.78rem;color:rgba(255,255,255,0.4);margin-bottom:10px;text-transform:uppercase;letter-spacing:0.05em;">Daily Parent Update · Auto-generated</p> 1358 <p style="font-size:0.92rem;color:rgba(255,255,255,0.85);line-height:1.6;font-family:'Playfair Display',serif;font-style:italic;">"Emma had a wonderful morning â she completed her shape-sorting activity independently and was engaged during story time. Her fine motor progress is strong this week."</p> 1359 <div style="display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;"> 1360 <span style="background:rgba(61,107,79,0.25);color:#7ec99b;font-size:0.76rem;padding:3px 10px;border-radius:20px;">ð¸ 3 photos added</span> 1361 <span style="background:rgba(61,107,79,0.25);color:#7ec99b;font-size:0.76rem;padding:3px 10px;border-radius:20px;">ð Translated: Spanish</span> 1362 <span style="background:rgba(61,107,79,0.25);color:#7ec99b;font-size:0.76rem;padding:3px 10px;border-radius:20px;">â Sent 3:14 PM</span> 1363 </div> 1364 </div> 1365 </div> 1366 <div class="benefit-text"> 1367 <span class="tag tag-amber">Family Engagement</span> 1368 <h3>Keep Every Family in the Story of Their Child's Day</h3> 1369 <p>Syntch bridges the gap between classroom and home â automatically generating rich, multilingual daily reports that connect parents to their child's progress in real time. No language barrier. No communication lag. No parent left wondering.</p> 1370 <ul class="benefit-list"> 1371 <li>AI-written daily observations pushed to parents automatically</li> 1372 <li>Multilingual translation with support for 30+ languages</li> 1373 <li>Photo and activity logs compiled without teacher effort</li> 1374 <li>20% improvement in parent engagement and retention rates</li> 1375 </ul> 1376 </div> 1377 </div> 1378 1379 </div> 1380</section> 1381 1382<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1383<!-- STATS BAND --> 1384<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1385<div class="stats-band"> 1386 <div class="container"> 1387 <div class="stats-band-inner"> 1388 <div> 1389 <div class="stat-num">$<em>7.95B</em></div> 1390 <div class="stat-desc">Projected AI Kâ12 education market by 2033 â growing at 38% annually</div> 1391 </div> 1392 <div> 1393 <div class="stat-num"><em>54</em>%</div> 1394 <div class="stat-desc">of Kâ12 students already use AI for learning â your platform should too</div> 1395 </div> 1396 <div> 1397 <div class="stat-num"><em>28</em></div> 1398 <div class="stat-desc">U.S. states with official AI guidance for Kâ12 education as of 2025</div> 1399 </div> 1400 <div> 1401 <div class="stat-num"><em>12â20</em>%</div> 1402 <div class="stat-desc">Efficiency gains reported by centers using AI admin tools</div> 1403 </div> 1404 </div> 1405 </div> 1406</div> 1407 1408<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1409<!-- FEATURES --> 1410<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1411<section class="section section-features" id="features"> 1412 <div class="container"> 1413 <div class="section-intro" style="text-align:center;max-width:600px;margin:0 auto;"> 1414 <p class="eyebrow">Platform Capabilities</p> 1415 <h2>Everything Your Institution Needs. One Platform.</h2> 1416 <p style="margin-top:14px;">From the first day of daycare to high school graduation, Syntch covers the complete educational journey.</p> 1417 </div> 1418 1419 <div class="grid-4" style="margin-top:52px;"> 1420 1421 <div class="feature-card"> 1422 <div class="feature-icon">ð§ </div> 1423 <h3>Adaptive Learning Engine</h3> 1424 <p>
1424AI-powered content delivery that adjusts in real time to each student's pace, learning style, and performance â from pre-literacy exercises to AP coursework.</p> 1425 </div> 1426 1427 <div class="feature-card"> 1428 <div class="feature-icon">ð¨</div> 1429 <h3>AI Early Warning System</h3> 1430 <p>Continuous monitoring of academic performance and developmental milestones. Flags at-risk students before problems escalate â with one-click intervention workflows built in.</p> 1431 </div> 1432 1433 <div class="feature-card"> 1434 <div class="feature-icon">ð±</div> 1435 <h3>Parent Communication Portal</h3> 1436 <p>Automated real-time daily reports, photos, and activity summaries sent directly to parents. AI translation supports 30+ languages, removing every communication barrier.</p> 1437 </div> 1438 1439 <div class="feature-card"> 1440 <div class="feature-icon">ð </div> 1441 <h3>Smart Scheduling & Staffing</h3> 1442 <p>AI-optimized scheduling ensures correct staff-to-child ratios, manages substitute placement, and surfaces staffing gaps before they become problems.</p> 1443 </div> 1444 1445 <div class="feature-card"> 1446 <div class="feature-icon">ð³</div> 1447 <h3>Automated Billing & Payments</h3> 1448 <p>Invoicing, tuition collection, subsidy tracking, and late payment reminders â fully automated. No more chasing payments or manual reconciliation.</p> 1449 </div> 1450 1451 <div class="feature-card"> 1452 <div class="feature-icon">ð</div> 1453 <h3>Administrator Analytics Dashboard</h3> 1454 <p>Real-time enrollment trends, occupancy forecasts, academic performance summaries, and compliance status â all in one executive-level view.</p> 1455 </div> 1456 1457 <div class="feature-card"> 1458 <div class="feature-icon">ð±</div> 1459 <h3>Child Development Tracking</h3> 1460 <p>Longitudinal developmental records from age 2 through grade 12. Tracks milestones against age-appropriate benchmarks and generates structured assessment reports.</p> 1461 </div> 1462 1463 <div class="feature-card"> 1464 <div class="feature-icon">ð«</div> 1465 <h3>Enrollment & Waitlist Management</h3> 1466 <p>AI captures and qualifies inquiries, manages waitlists intelligently, and guides families through onboarding â reducing admin time and increasing fill rates.</p> 1467 </div> 1468 1469 </div> 1470 </div> 1471</section> 1472 1473<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1474<!-- MID-PAGE CTA --> 1475<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1476<div class="container"> 1477 <div class="mid-cta" id="demo"> 1478 <div> 1479 <h2>Ready to <em>reclaim your time</em> and transform learning?</h2> 1480 <p style="margin-top:12px;color:#5a6470;font-size:0.95rem;">Join the institutions already using Syntch to close learning gaps and re-energize their educators.</p> 1481 </div> 1482 <div class="mid-cta-right"> 1483 <div class="mid-cta-actions"> 1484 <a href="#book-demo" class="btn btn-primary btn-lg">See Syntch in Action â</a> 1485 <a href="#book-demo" class="btn btn-outline">Start Free 14-Day Trial</a> 1486 </div> 1487 <p class="fomo">Over 35% of schools globally have adopted AI platforms. Don't lead from behind.</p> 1488 </div> 1489 </div> 1490</div> 1491 1492<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1493<!-- PERSONAS / USE CASES --> 1494<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1495<section class="section section-personas" id="personas"> 1496 <div class="container"> 1497 <div class="section-intro" style="text-align:center;max-width:560px;margin:0 auto 40px;"> 1498 <p class="eyebrow">Built for Everyone on Your Team</p> 1499 <h2>One Platform. Three Perspectives. Infinite Impact.</h2> 1500 </div> 1501 1502 <div class="persona-tabs"> 1503 <button type="button" class="persona-tab active" data-tab="daycare" onclick="switchTab(this, 'daycare')">Daycare Centers</button> 1504 <button type="button" class="persona-tab" data-tab="k12" onclick="switchTab(this, 'k12')">Kâ12 Schools</button> 1505 <button type="button" class="persona-tab" data-tab="parents" onclick="switchTab(this, 'parents')">Parents & Families</button> 1506 </div> 1507 1508 <div class="persona-content active" id="tab-daycare"> 1509 <div class="persona-item"> 1510 <h4>ð Center Directors</h4> 1511 <p>Manage enrollment, billing, and compliance from a single dashboard. Syntch automates the back-office so you can focus on building a thriving center culture â not chasing down paperwork.</p> 1512 </div> 1513 <div class="persona-item"> 1514 <h4>ð§ Lead Caregivers & Teachers</h4> 1515 <p>Spend less time writing observation reports and more time with children. Syntch generates structured developmental notes and parent updates automatically, based on your logged activities.</p> 1516 </div> 1517 <div class="persona-item"> 1518 <h4>ð Multi-Site Operators</h4> 1519 <p>Manage multiple locations from one unified view. Track occupancy, staff ratios, revenue, and compliance status across every center without switching systems or building custom spreadsheets.</p> 1520 </div> 1521 <div class="persona-item"> 1522 <h4>ð§ Children Age 2â5</h4> 1523 <p>Learning through play becomes measurable. Syntch tracks developmental milestones â language, motor, social â and automatically alerts educators and families when a child needs additional support.</p> 1524 </div> 1525 </div> 1526 1527 <div class="persona-content" id="tab-k12"> 1528 <div class="persona-item"> 1529 <h4>ð« Principals & Administrators</h4> 1530 <p>Real-time dashboards show attendance trends, academic performance, and early warning flags. Make decisions on data â not instinct. Compliance reports generate themselves.</p> 1531 </div> 1532 <div class="persona-item"> 1533 <h4>âï¸ Classroom Teachers</h4> 1534 <p>Syntch handles grading assistance, lesson planning support, and progress report generation. Get back 6â7 hours of instructional capacity every week â and use them where it matters most.</p> 1535 </div> 1536 <div class="persona-item"> 1537 <h4>ð Students Grade Kâ12</h4> 1538 <p>AI-personalized learning paths meet each student exactly where they are. Whether they're accelerated, on track, or struggling, Syntch serves content that's always challenging and always achievable.</p> 1539 </div> 1540 <div class="persona-item"> 1541 <h4>ð District Leaders</h4> 1542 <p>Aggregate performance data across every school. Identify system-wide learning gaps, equity concerns, and resource allocation opportunities â powered by predictive analytics.</p> 1543 </div> 1544 </div> 1545 1546 <div class="persona-content" id="tab-parents"> 1547 <div class="persona-item"> 1548 <h4>ð² Daily Visibility</h4> 1549 <p>Receive a rich daily update about your child's activities, milestones, and mood â delivered automatically to your phone each day before pickup.</p> 1550 </div> 1551 <div class="persona-item"> 1552 <h4>ð No Language Barriers</h4> 1553 <p>Every report is automatically translated into your preferred language. 30+ languages supported â because your child's progress should never be lost in translation.</p> 1554 </div> 1555 <div class="persona-item"> 1556 <h4>ð Progress at a Glance</h4> 1557 <p>Track your child's academic and developmental growth over months and years. See exactly where they excel, where they need support, and how they're trending â all in one dashboard.</p> 1558 </div> 1559 <div class="persona-item"> 1560 <h4>ð¤ Direct Communication</h4> 1561 <p>Message teachers, review invoices, and confirm schedules â all through the same Syntch app. No more juggling three different tools and a group chat.</p> 1562 </div> 1563 </div> 1564 </div> 1565</section> 1566 1567<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1568<!-- SOCIAL PROOF --> 1569<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1570<section class="section section-proof" id="proof"> 1571 <div class="container"> 1572 <div class="section-intro"> 1573 <p class="eyebrow">Real-World Results</p> 1574 <h2>The Numbers Tell the Story</h2> 1575 <p>Across daycare centers and school districts, Syntch is already changing what's possible â for educators, administrators, and the children they serve.</p> 1576 </div> 1577 1578 <div class="proof-grid"> 1579 1580 <div class="case-card"> 1581 <div class="quote-mark">"</div> 1582 <blockquote>[School District] identified 23% more at-risk students before semester end â enabling earlier, more targeted intervention and reducing year-end failure rates.</blockquote> 1583 <p class="case-meta">ð Mid-sized public school district · Grades 3â8</p>
1584 <span class="case-result">â 23% early identification rate</span> 1585 </div> 1586 1587 <div class="case-card"> 1588 <div class="quote-mark">"</div> 1589 <blockquote>[Daycare Group] reduced billing and invoicing time by 4 hours per week in the first month after launching Syntch â with zero late payment follow-ups in month two.</blockquote> 1590 <p class="case-meta">ð Multi-location childcare operator · 3 centers, 240 children</p> 1591 <span class="case-result">â 4 hrs/week admin savings</span> 1592 </div> 1593 1594 <div class="case-card"> 1595 <div class="quote-mark">"</div> 1596 <blockquote>[Elementary School] saw parent app engagement jump 20% within 60 days of launch â with multilingual daily reports driving adoption across non-English-speaking families.</blockquote> 1597 <p class="case-meta">ð Title I elementary school · Diverse urban community</p> 1598 <span class="case-result">â 20% parent engagement</span> 1599 </div> 1600 1601 <div class="case-card"> 1602 <div class="quote-mark">"</div> 1603 <blockquote>[Daycare Center] grew enrollment by 18% in one semester using Syntch's AI inquiry tracking and waitlist management â filling 14 previously empty spots.</blockquote> 1604 <p class="case-meta">ð Independent daycare · 95-child capacity</p> 1605 <span class="case-result">â 18% enrollment growth</span> 1606 </div> 1607 1608 </div> 1609 1610 <!-- Trust Block --> 1611 <div class="trust-block"> 1612 <div class="trust-block-text"> 1613 <h3>ð Your Children's Data Is Safe With Us</h3> 1614 <p>Syntch was architected from day one with child data privacy as a non-negotiable foundation. We never sell, share, or monetize student or child data. Every AI recommendation is explainable, human-reviewed, and advisory â educators remain in full control.</p> 1615 <div class="compliance-badges"> 1616 <span class="badge">FERPA</span> 1617 <span class="badge">COPPA</span> 1618 <span class="badge">GDPR</span> 1619 <span class="badge">SOC 2 Type II</span> 1620 <span class="badge">CIPA</span> 1621 </div> 1622 </div> 1623 <div style="flex-shrink:0;"> 1624 <div style="text-align:center;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);border-radius:14px;padding:28px 32px;"> 1625 <div style="font-family:'Playfair Display',serif;font-size:2.4rem;font-weight:900;color:#7ec99b;">100%</div> 1626 <div style="font-size:0.82rem;color:rgba(255,255,255,0.5);margin-top:6px;">Zero data sold<br/>to third parties.<br/>Ever.</div> 1627 </div> 1628 </div> 1629 </div> 1630 1631 </div> 1632</section> 1633 1634<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1635<!-- FINAL CTA --> 1636<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1637<section class="section-final-cta" id="pricing"> 1638 <div class="container cta-content"> 1639 <!-- <p class="tag tag-sage" style="display:inline-block;margin-bottom:20px;">The Window to Lead Is Open</p> --> 1640 <h2>It's Time to Give Your Educators<br/><em>the Tools They've Always Deserved.</em></h2> 1641 <p>Join Syntch and transform your daycare or school into an institution where AI handles the busywork, educators lead with purpose, and every child reaches their potential.</p> 1642 <div class="cta-buttons"> 1643 <a href="#book-demo" class="btn btn-primary btn-lg">See Syntch in Action â</a> 1644 <a href="#book-demo" class="btn btn-amber btn-lg">Start Free 14-Day Trial</a> 1645 </div> 1646 <p class="cta-trust"> 1647 No credit card required · Setup in under 30 minutes · Cancel anytime<br/> 1648 <a href="#proof">FERPA & COPPA Compliant</a> · <a href="#proof">Data Privacy Policy</a> 1649 </p> 1650 <div style="margin-top:52px;display:flex;gap:40px;justify-content:center;flex-wrap:wrap;opacity:0.45;"> 1651 <div style="text-align:center;">
1652 <div style="font-family:'Playfair Display',serif;font-size:1.8rem;color:#fff;font-weight:900;">1,200+</div> 1653 <div style="font-size:0.8rem;color:rgba(255,255,255,0.7);">Institutions served</div> 1654 </div> 1655 <div style="text-align:center;"> 1656 <div style="font-family:'Playfair Display',serif;font-size:1.8rem;color:#fff;font-weight:900;">85,000+</div> 1657 <div style="font-size:0.8rem;color:rgba(255,255,255,0.7);">Students & children on platform</div> 1658 </div> 1659 <div style="text-align:center;"> 1660 <div style="font-family:'Playfair Display',serif;font-size:1.8rem;color:#fff;font-weight:900;">4.9 / 5</div> 1661 <div style="font-size:0.8rem;color:rgba(255,255,255,0.7);">Average administrator satisfaction</div> 1662 </div> 1663 </div> 1664 </div> 1665</section> 1666 1667<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1668<!-- SHOW/CARE/K12 + BOOK DEMO --> 1669<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1670<section class="dashboard-showcarek12-section" id="book-demo"> 1671 <div class="container" style="max-width: 98.5rem;"> 1672 <div class="dashboard-demo-layout"> 1673 <div class="dashboard-showcarek12-header mt-5"> 1674 <h2>Book a Demo</h2> 1675 <p>Tell us about your school and we will contact you soon.</p> 1676 </div> 1677 1678 <div class="dashboard-demo-content"> 1679 <div class="dashboard-demo-pill">School Success Platform</div> 1680 <h2>Empower Your Campus with SYNTCH</h2> 1681 <p> 1682 Connect educators, parents, and students with a modern platform designed for easy 1683 collaboration, better engagement, and faster communication. 1684 </p> 1685 <p> 1686 Book a personalized walkthrough to see how your institution can launch quickly and scale 1687 confidently. 1688 </p> 1689 <div class="dashboard-demo-metrics"> 1690 <div> 1691 <h5>3x</h5> 1692 <span>Faster communication cycles</span> 1693 </div> 1694 <div> 1695 <h5>24/7</h5> 1696 <span>Parent + student visibility</span> 1697 </div> 1698 <div> 1699 <h5>K-12</h5> 1700 <span>Purpose-built workflows</span> 1701 </div> 1702 </div> 1703 </div> 1704 1705 <div class="dashboard-demo-form-wrap"> 1706 <div class="dashboard-book-demo-card"> 1707 <div class="card-body"> 1708 <form id="bookDemoForm" novalidate> 1709 <div class="form-group mb-3"> 1710 <label for="organization">System I am interested in : <span class="text-danger">*</span></label> 1711 <select id="organization" name="organization" required> 1712 <option value="" selected disabled>Select system</option> 1713 <option value="Show">Show</option> 1714 <option value="Care">Care</option> 1715 <option value="K12">K12</option> 1716 </select> 1717 </div> 1718 <div class="form-group mb-3"> 1719 <label for="name">Name <span class="text-danger">*</span></label> 1720 <input id="name" type="text" name="name" required /> 1721 </div> 1722 <div class="form-group mb-3"> 1723 <label for="email">Email <span class="text-danger">*</span></label> 1724 <input id="email" type="email" name="email" required /> 1725 </div> 1726 <div class="form-group mb-3"> 1727 <label for="phone">Phone Number <span class="text-danger">*</span></label> 1728 <input id="phone" type="tel" name="phone" required /> 1729 </div> 1730 <div class="form-group mb-3"> 1731 <label for="message">Your Message <span class="text-danger">*</span></label> 1732 <textarea id="message" rows="3" name="message" required></textarea> 1733 </div> 1734 <button id="submitBtn" type="submit" class="dashboard-form-btn w-100">BOOK A DEMO</button> 1735 <div id="demoSuccess" class="dashboard-book-demo-success hidden">Thanks! Your demo request has been received.</div> 1736 <div id="demoError" class="dashboard-book-demo-error hidden">Unable to submit right now. Please try again.</div> 1737 </form> 1738 </div> 1739 </div> 1740 </div> 1741 </div> 1742 </div> 1743</section> 1744 1745<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1746<!-- FOOTER --> 1747<!-- âââââââââââââââââââââââââââââââââââââââââââââââââââ --> 1748<footer> 1749 <div class="container"> 1750 <div class="footer-inner"> 1751 <div class="footer-logo"><img src="assets/logo.png" alt="SYNTCH logo" /></div> 1752 <p class="footer-tagline">AI-Powered SaaS Platform for Daycare & Kâ12 Education · Age 2 through Grade 12</p> 1753 <div class="footer-links"> 1754 <a href="#features">Features</a> 1755 <a href="#proof">Results</a> 1756 <a href="#book-demo">Book a Demo</a> 1757 </div> 1758 <div class="footer-divider"></div> 1759 <div class="footer-bottom"> 1760 <p class="footer-copy">© 2025 Syntch Inc.</p> 1761 <div class="footer-meta"> 1762 <a href="#proof">Privacy Policy</a> 1763 <a href="#proof">Terms of Service</a>
1764 <span>FERPA & COPPA Compliant</span> 1765 </div> 1766 </div> 1767 </div> 1768 </div> 1769</footer> 1770
1771<script src="script.js"></script>
1771 1772
1773<script> 1774 // Tab switching for personas 1775 function switchTab(btn, id) { 1776 document.querySelectorAll('.persona-tab').forEach(t => t.classList.remove('active')); 1777 document.querySelectorAll('.persona-content').forEach(c => c.classList.remove('active')); 1778 btn.classList.add('active'); 1779 const targetTab = document.getElementById('tab-' + id); 1780 if (targetTab) { 1781 targetTab.classList.add('active'); 1782 } 1783 } 1784 1785 document.querySelectorAll('.persona-tabs .persona-tab').forEach((tabButton) => { 1786 tabButton.addEventListener('click', () => { 1787 switchTab(tabButton, tabButton.dataset.tab); 1788 }); 1789 }); 1790 1791 // Animate progress bars on scroll 1792 const observer = new IntersectionObserver((entries) => { 1793 entries.forEach(e => { 1794 if (e.isIntersecting) { 1795 e.target.querySelectorAll('.progress-fill').forEach(bar => { 1796 bar.style.transition = 'width 1.2s ease'; 1797 }); 1798 } 1799 }); 1800 }, { threshold: 0.3 }); 1801 1802 document.querySelectorAll('.benefit-visual').forEach(el => observer.observe(el)); 1803 1804 // Fade-in on scroll for cards 1805 const fadeObserver = new IntersectionObserver((entries) => { 1806 entries.forEach((e, i) => { 1807 if (e.isIntersecting) { 1808 e.target.style.opacity = '1'; 1809 e.target.style.transform = 'translateY(0)'; 1810 } 1811 }); 1812 }, { threshold: 0.1 }); 1813 1814 document.querySelectorAll('.problem-card, .feature-card, .case-card').forEach((el, i) => { 1815 el.style.opacity = '0'; 1816 el.style.transform = 'translateY(24px)'; 1817 el.style.transition = `opacity 0.55s ease ${i * 0.08}s, transform 0.55s ease ${i * 0.08}s`; 1818 fadeObserver.observe(el); 1819 }); 1820</script>
1820 1821 1822</body> 1823</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.