1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>DealerFill - Request Integration</title> 8 <link rel="icon" href="/img/main.png" type="image/png"> 9<link rel="shortcut icon" href="/img/main.png" type="image/png"> 10 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" /> 11
11<script src="https://cdn.tailwindcss.com"></script>
vendor: 82 bytes, lines 11-13
11 12 <script src="https://www.google.com/recaptcha/api.js" async defer></script> 13
13<script> 14 tailwind.config = { 15 theme: { 16 extend: { 17 colors: { 18 blue: { DEFAULT: '#3B97EE', dark: '#1a6fcf', light: '#e8f4fd' }, 19 orange: '#FF6B2B', 20 dark: { DEFAULT: '#0a0f1e', 2: '#111827' }, 21 }, 22 fontFamily: { inter: ['Inter', 'sans-serif'] }, 23 screens: { mb: '1px', tb: '480px', lp: '768px', ds: '1024px' }, 24 } 25 } 26 } 27 </script>
27 28 <style type="text/tailwindcss"> 29 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); 30 </style> 31 32 <style> 33 * { font-family: 'Inter', sans-serif; } 34 35 .bg-grid { 36 background-image: 37 linear-gradient(rgba(59,151,238,0.04) 1px, transparent 1px), 38 linear-gradient(90deg, rgba(59,151,238,0.04) 1px, transparent 1px); 39 background-size: 44px 44px; 40 } 41 42 .form-input { 43 width: 100%; 44 padding: 11px 14px 11px 38px; 45 border: 1.5px solid #e2e8f0; 46 border-radius: 10px; 47 font-size: 14px; 48 color: #0a0f1e; 49 background: #fff; 50 outline: none; 51 transition: border-color 0.18s, box-shadow 0.18s; 52 } 53 .form-input:focus { 54 border-color: #3B97EE; 55 box-shadow: 0 0 0 3px rgba(59,151,238,0.1); 56 } 57 .form-input.error { 58 border-color: #ef4444; 59 box-shadow: 0 0 0 3px rgba(239,68,68,0.08); 60 } 61 .form-label { 62 display: block; 63 font-size: 13px; 64 font-weight: 600; 65 color: #374151; 66 margin-bottom: 6px; 67 } 68 .form-hint { 69 font-size: 11.5px; 70 color: #94a3b8; 71 margin-top: 4px; 72 } 73 .field-error { 74 font-size: 11.5px; 75 color: #ef4444; 76 margin-top: 4px; 77 display: none; 78 } 79 80 .submit-btn { 81 background: black; 82 color: #fff; 83 font-size: 15px; 84 font-weight: 500; 85 padding: 13px 0; 86 border-radius: 12px; 87 width: 100%; 88 border: none; 89 cursor: pointer; 90 91 transition: box-shadow 0.2s, transform 0.2s, opacity 0.2s; 92 display: flex; 93 align-items: center; 94 justify-content: center; 95 gap: 8px; 96 } 97 .submit-btn:hover:not(:disabled) { 98 99 transform: translateY(-1px); 100 } 101 .submit-btn:disabled { opacity: 0.7; cursor: not-allowed; } 102 103 /* ââ Toast ââ */ 104 #toast { 105 position: fixed; 106 top: 24px; 107 right: 24px; 108 z-index: 9999; 109 background: #fff; 110 border: 1.5px solid #d1fae5; 111 border-radius: 14px; 112 padding: 16px 20px; 113 box-shadow: 0 8px 32px rgba(0,0,0,0.1); 114 display: flex; 115 align-items: flex-start; 116 gap: 12px; 117 max-width: 340px; 118 transform: translateX(calc(100% + 40px)); 119 transition: transform 0.4s cubic-bezier(.34,1.56,.64,1); 120 } 121 #toast.show { transform: translateX(0); } 122 .toast-icon { 123 width: 36px; height: 36px; 124 border-radius: 50%; 125 background: #d1fae5; 126 color: #059669; 127 display: flex; align-items: center; justify-content: center; 128 flex-shrink: 0; font-size: 15px; 129 } 130 131 .info-card { 132 background: #fff; 133 border: 1.5px solid #e2e8f0; 134 border-radius: 14px; 135 padding: 20px; 136 box-shadow: 0 2px 12px rgba(0,0,0,0.04); 137 } 138 139 .section-badge { 140 background: rgba(59,151,238,0.08); 141 border: 1px solid rgba(59,151,238,0.2); 142 color: #3B97EE; 143 } 144 145 .spinner { 146 width: 18px; height: 18px; 147 border: 2.5px solid rgba(255,255,255,0.4); 148 border-top-color: #fff; 149 border-radius: 50%; 150 animation: spin 0.7s linear infinite; 151 display: none; 152 } 153 @keyframes spin { to { transform: rotate(360deg); } } 154 155 .reveal { 156 opacity: 0; 157 transform: translateY(20px); 158 animation: revealUp 0.5s ease forwards; 159 } 160 @keyframes revealUp { to { opacity: 1; transform: translateY(0); } } 161 .delay-1 { animation-delay: 0.08s; } 162 .delay-2 { animation-delay: 0.18s; } 163 </style> 164</head> 165 166<body class="bg-white text-[#0a0f1e] overflow-x-hidden"> 167 168
168<script 169 type="text/javascript">window.$crisp = []; window.CRISP_WEBSITE_ID = "3c0d4ee4-5264-464a-8d5c-1e243fd4d3a3"; (function () { d = document; s = d.createElement("script"); s.src = "https://client.crisp.chat/l.js"; s.async = 1; d.getElementsByTagName("head")[0].appendChild(s); })();</script>
169 170 171<style> 172 body { 173 font-family: 'Inter', sans-serif; 174 } 175 176 @keyframes slideDown { 177 from { 178 transform: translateY(-100%); 179 opacity: 0; 180 } 181 182 to { 183 transform: translateY(0); 184 opacity: 1; 185 } 186 } 187 188 @keyframes fadeUp { 189 from { 190 opacity: 0; 191 transform: translateY(30px); 192 } 193 194 to { 195 opacity: 1; 196 transform: translateY(0); 197 } 198 } 199 200 @keyframes toastIn { 201 from { 202 opacity: 0; 203 transform: translateY(-10px) translateX(10px); 204 } 205 206 to { 207 opacity: 1; 208 transform: translateY(0) translateX(0); 209 } 210 } 211 212 @keyframes fillBar { 213 from { 214 width: 0; 215 } 216 217 to { 218 width: 100%; 219 } 220 } 221 222 @keyframes shimmer { 223 0% { 224 background-position: 200% 0; 225 } 226 227 100% { 228 background-position: -200% 0; 229 } 230 } 231 232 @keyframes pillPulse { 233 234 0%, 235 100% { 236 opacity: 1; 237 } 238 239 50% { 240 opacity: 0.7; 241 } 242 } 243 244 @keyframes pulse2 { 245 246 0%, 247 100% { 248 box-shadow: 0 4px 14px rgba(59, 151, 238, 0.4); 249 } 250 251 50% { 252 box-shadow: 0 4px 24px rgba(59, 151, 238, 0.7); 253 } 254 } 255 256 .animate-slideDown { 257 animation: slideDown 0.6s ease forwards; 258 } 259 260 .animate-fadeUp { 261 animation: fadeUp 0.8s ease 0.2s both; 262 } 263 264 .animate-fadeUpDelay { 265 animation: fadeUp 0.8s ease 0.5s both; 266 } 267 268 .animate-toastIn { 269 animation: toastIn 0.5s ease 2.5s both; 270 } 271 272 .animate-pulse2 { 273 animation: pulse2 2s infinite; 274 } 275 276 .animate-pillPulse { 277 animation: pillPulse 2s infinite; 278 } 279 280 /* Scroll reveal */ 281 .reveal { 282 opacity: 0; 283 transform: translateY(24px); 284 transition: opacity 0.6s ease, transform 0.6s ease; 285 } 286 287 .reveal.visible { 288 opacity: 1; 289 transform: translateY(0); 290 } 291 292 .delay-1 { 293 transition-delay: 0.12s; 294 } 295 296 .delay-2 { 297 transition-delay: 0.24s; 298 } 299 300 /* Form field states */ 301 .form-field { 302 background: #f9fafb; 303 border: 1px solid #e5e7eb; 304 border-radius: 8px; 305 padding: 10px 12px; 306 position: relative; 307 overflow: hidden; 308 transition: all 0.4s; 309 } 310 311 .form-field.filling { 312 border-color: #3B97EE; 313 background: #e8f4fd; 314 } 315 316 .form-field.filled { 317 border-color: #10b981; 318 background: #f0fdf4; 319 } 320 321 .val { 322 color: white 323 } 324 325 .form-field.filled .val { 326 color: black; 327 } 328 329 /* Photo thumb */ 330 .photo-thumb { 331 border: 1.5px dashed #d1d5db; 332 background: #f9fafb; 333 border-radius: 7px; 334 width: 60px; 335 height: 50px; 336 display: flex; 337 flex-direction: column; 338 align-items: center; 339 justify-content: center; 340 overflow: hidden; 341 position: relative; 342 flex-shrink: 0; 343 transition: border-color 0.3s; 344 } 345 346 .photo-thumb.loaded { 347 border: 1.5px solid #10b981; 348 } 349 350 .photo-thumb.loading .photo-loading { 351 display: block; 352 } 353 354 .photo-loading { 355 display: none; 356 position: absolute; 357 inset: 0; 358 background: linear-gradient(90deg, #f0f7ff 25%, #dbeafe 50%, #f0f7ff 75%); 359 background-size: 200% 100%; 360 animation: shimmer 1.2s infinite; 361 } 362 363 .df-pill { 364 background: linear-gradient(90deg, #3B97EE, #1a6fcf); 365 color: white; 366 font-size: 10px; 367 font-weight: 700; 368 padding: 3px 10px; 369 border-radius: 100px; 370 white-space: nowrap; 371 animation: pillPulse 2s infinite; 372 } 373 374 /* Feature card top bar */ 375 .feat-card::before { 376 content: ''; 377 position: absolute; 378 top: 0; 379 left: 0; 380 right: 0; 381 height: 3px; 382 background: #3B97EE; 383 transform: scaleX(0); 384 transition: transform 0.3s; 385 transform-origin: left; 386 } 387 388 .feat-card:hover::before { 389 transform: scaleX(1); 390 } 391 392 .feat-card:hover { 393 border-color: #3B97EE; 394 transform: translateY(-4px); 395 box-shadow: 0 20px 40px rgba(59, 151, 238, 0.1); 396 } 397 398 /* DMS card hover */ 399 .dms-card:hover { 400 border-color: #3B97EE; 401 box-shadow: 0 20px 40px rgba(59, 151, 238, 0.1); 402 transform: translateY(-4px); 403 } 404 405 /* Pricing card hover */ 406 .pricing-card:hover { 407 transform: translateY(-6px); 408 box-shadow: 0 24px 60px rgba(0, 0, 0, 0.1); 409 } 410 411 /* Hero radial glow */ 412 .hero-glow::before { 413 content: ''; 414 position: absolute; 415 top: -100px; 416 right: -100px; 417 width: 600px; 418 height: 600px; 419 background: radial-gradient(circle, rgba(59, 151, 238, 0.08) 0%, transparent 70%); 420 border-radius: 50%; 421 pointer-events: none; 422 } 423 424 /* Mobile menu */ 425 .mobile-menu { 426 display: none; 427 } 428 429 .mobile-menu.open { 430 display: flex; 431 } 432</style> 433<nav 434 class="max-w-[1200px] mx-auto w-full top-0 left-0 right-0 z-50 flex items-center justify-between py-[18px] animate-slideDown sticky bg-white md:bg-transparent lg:bg-transparent md:static lg:static"> 435 <div class="flex gap-x-16 items-center pl-4 sm:pl-2"><a href="/" class="text-sky-600 flex items-center gap-2.5 font-bold text-[24px] text-[var(--text)] font-['Inter',sans-serif] no-underline">
436 <img src="img/logo-blue.png" alt="DealerFill" class="h-[40px] h-[34px] rounded-lg"/> 437</a> 438 <ul class="hidden md:flex gap-8 list-none"> 439 <li><a href="/#features" 440 class="text-gray-800 text-[16px] no-underline hover:text-[#3B97EE] transition-colors">Features</a></li> 441 <li><a href="https://www.youtube.com/watch?v=n4Dh-gB_-_A" 442 class="text-gray-800 text-[16px] no-underline hover:text-[#3B97EE] transition-colors">Demo</a></li> 443 <li><a href="/integration" 444 class="text-gray-800 text-[16px] no-underline hover:text-[#3B97EE] transition-colors">Integration</a></li> 445 <li><a href="/pricing" 446 class="text-gray-800 text-[16px] no-underline hover:text-[#3B97EE] transition-colors">Pricing</a></li> 447 <li><a href="/roi-calculator" 448 class="text-gray-800 text-[16px] no-underline hover:text-[#3B97EE] transition-colors">ROI</a></li> 449 </ul> 450 </div> 451 <div class="flex items-center gap-3"> 452 <button class="md:hidden flex flex-col gap-[6px] bg-transparent border-none p-1 cursor-pointer mr-4" 453 onclick="document.getElementById('mobileMenu').classList.toggle('open')"> 454 <span class="block w-[20px] h-1 bg-[#0a0f1e] rounded"></span> 455 <span class="block w-[24px] h-1 bg-[#0a0f1e] rounded"></span> 456 <span class="block w-[28px] h-1 bg-[#0a0f1e] rounded"></span> 457 </button> 458 459 460 <!-- Signup button (your original design) --> 461 <a href="/signup" class="hidden sm:hidden md:flex lg:flex"> 462 <button 463 class="group relative flex h-[45px] items-center overflow-hidden rounded-full bg-[#070B23] border-2 border-[#070B23] pl-5 pr-1 text-white transition-all duration-500"> 464 465 <span 466 class="absolute right-1 top-1/2 h-8 w-8 -translate-y-1/2 rounded-full bg-white transition-all duration-500 ease-out group-hover:scale-[12]"></span> 467 468 <span class="relative z-10 pr-4 text-sm font-medium transition-colors duration-500 group-hover:text-black"> 469 Get free account 470 </span> 471 472 <span class="relative z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white text-black"> 473 â 474 </span> 475 </button> 476 </a> 477 478 479 </div> 480</nav> 481<!-- MOBILE MENU --> 482<div 483 id="mobileMenu" 484 class="mobile-menu fixed inset-0 z-[200] flex flex-col items-center justify-center bg-white/90 backdrop-blur-xl px-6" 485> 486 487 <!-- CLOSE BUTTON --> 488 <button 489 class="absolute top-5 right-6 w-10 h-10 flex items-center justify-center rounded-full bg-white shadow-md text-[#0a0f1e] text-2xl hover:scale-105 transition" 490 onclick="document.getElementById('mobileMenu').classList.remove('open')" 491 > 492 â 493 </button> 494 495 <!-- NAV CONTAINER --> 496 <div class="flex flex-col items-center gap-6 w-full max-w-sm"> 497 498 <a href="/#features" 499 class="w-full text-center py-3 rounded-xl text-xl font-semibold text-[#0a0f1e] bg-white shadow-sm hover:shadow-md hover:text-[#3B97EE] hover:scale-[1.02] transition" 500 onclick="document.getElementById('mobileMenu').classList.remove('open')"> 501 Features 502 </a> 503 504 <a href="https://www.youtube.com/watch?v=n4Dh-gB_-_A" 505 class="w-full text-center py-3 rounded-xl text-xl font-semibold text-[#0a0f1e] bg-white shadow-sm hover:shadow-md hover:text-[#3B97EE] hover:scale-[1.02] transition" 506 onclick="document.getElementById('mobileMenu').classList.remove('open')"> 507 How It Works 508 </a> 509 510 <a href="/integration" 511 class="w-full text-center py-3 rounded-xl text-xl font-semibold text-[#0a0f1e] bg-white shadow-sm hover:shadow-md hover:text-[#3B97EE] hover:scale-[1.02] transition" 512 onclick="document.getElementById('mobileMenu').classList.remove('open')"> 513 Integration 514 </a> 515 516 <a href="/pricing" 517 class="w-full text-center py-3 rounded-xl text-xl font-semibold text-[#0a0f1e] bg-white shadow-sm hover:shadow-md hover:text-[#3B97EE] hover:scale-[1.02] transition" 518 onclick="document.getElementById('mobileMenu').classList.remove('open')"> 519 Pricing 520 </a> 521 522 <a href="/roi-calculator" 523 class="w-full text-center py-3 rounded-xl text-xl font-semibold text-[#0a0f1e] bg-white shadow-sm hover:shadow-md hover:text-[#3B97EE] hover:scale-[1.02] transition" 524 onclick="document.getElementById('mobileMenu').classList.remove('open')"> 525 ROI Calculator 526 </a> 527 528 <!-- DIVIDER --> 529 <div class="w-full h-px bg-gray-200 my-2"></div> 530 531 <!-- AUTH SECTION --> 532 <div class="w-full flex flex-col gap-3"> 533 534 535 536 <a href="/login" 537 class="w-full text-center px-5 py-3 rounded-xl bg-[#070B23] text-white font-semibold shadow-md hover:scale-[1.02] transition" 538 onclick="document.getElementById('mobileMenu').classList.remove('open')"> 539 Login 540 </a> 541 542 <a href="/signup" 543 class="w-full text-center px-5 py-3 rounded-xl bg-lime-600 text-white font-semibold shadow-md hover:scale-[1.02] transition" 544 onclick="document.getElementById('mobileMenu').classList.remove('open')"> 545 Create Account 546 </a> 547 548 549 550 </div> 551 </div> 552</div> 553 554 <!-- âââââââ TOAST âââââââ --> 555 <div id="toast" role="alert" aria-live="polite"> 556 <div class="toast-icon"><i class="fa-solid fa-check"></i></div> 557 <div> 558 <div style="font-size:14px;font-weight:700;color:#065f46;">Request Submitted!</div> 559 <div style="font-size:12.5px;color:#6b7280;margin-top:3px;">We'll review your dealership and reach out within 1â2 business days.</div> 560 </div> 561 </div> 562 563 <!-- âââââââ HERO âââââââ --> 564 565 566 <!-- âââââââ MAIN âââââââ --> 567 <section class="max-w-5xl mx-auto px-4 sm:px-6 py-12"> 568 <section class="bg-grid relative p-0 pb-10 px-4 sm:px-6 text-center overflow-hidden"> 569 <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[700px] h-[280px] rounded-full opacity-[0.07] pointer-events-none" 570 style="background: radial-gradient(ellipse, #3B97EE, transparent 70%);"></div> 571 572 <div class="relative mx-auto reveal">
573 <span class="inline-flex items-center gap-1.5 section-badge text-[11px] font-semibold uppercase tracking-widest px-3 py-1 rounded-full mb-5"> 574 <i class="fa-solid fa-plug text-[9px]"></i> Integrations 575 </span> 576 <h1 class="text-[30px] sm:text-[40px] font-extrabold tracking-tight leading-[1.15] mb-4"> 577 Connect your dealership website to DealerFill 578 </h1> 579 <p class="text-slate-500 text-[15px] leading-relaxed max-w-md mx-auto"> 580 Submit your details and we'll set up your Facebook Marketplace integration â usually within 1â2 business days. 581 </p> 582 </div> 583 </section> 584 <div class="grid grid-cols-1 lp:grid-cols-[1fr_360px] gap-10 items-start mt-4"> 585 586 <!-- FORM --> 587 <div class="reveal delay-1"> 588 <div class="bg-white border border-slate-200 rounded-2xl p-7 sm:p-9" 589 style="box-shadow: 0 4px 28px rgba(0,0,0,0.07);"> 590 591 <!-- SUCCESS MESSAGE --> 592 593 <div> 594 <h2 class="text-[19px] font-bold mb-1">Integration Request</h2> 595 <p class="text-slate-400 text-[13px] mb-7"> 596 Fields marked <span class="text-red-400 font-bold">*</span> are required. 597 </p> 598 599 <form id="integration-form" action="/integration" method="POST"> 600 601 <!-- ERROR MESSAGE INSIDE FORM --> 602 603 604 <!-- Website --> 605 <div class="mb-5"> 606 <label class="form-label" for="website"> 607 Dealership Website <span class="text-red-400">*</span> 608 </label> 609 610 <div class="relative"> 611 <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-[13px] pointer-events-none"> 612 <i class="fa-solid fa-globe"></i> 613 </span> 614 615 <input 616 type="url" 617 id="website" 618 name="website" 619 placeholder="https://yourdealership.com" 620 class="form-input" 621 autocomplete="url" 622 value="" 623 required 624 /> 625 </div> 626 627 <div class="field-error" id="website-error"> 628 Please enter a valid URL (include https://). 629 </div> 630 </div> 631 632 <!-- Email --> 633 <div class="mb-5"> 634 <label class="form-label" for="email"> 635 Contact Email <span class="text-red-400">*</span> 636 </label> 637 638 <div class="relative"> 639 <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-[13px] pointer-events-none"> 640 <i class="fa-solid fa-envelope"></i> 641 </span> 642 643 <input 644 type="email" 645 id="email" 646 name="email" 647 placeholder="[email protected]" 648 class="form-input" 649 autocomplete="email" 650 value="" 651 required 652 /> 653 </div> 654 655 <div class="field-error" id="email-error"> 656 Please enter a valid email address. 657 </div> 658 </div> 659 660 <!-- Salespersons --> 661 <div class="mb-5"> 662 <label class="form-label" for="salespersons"> 663 Number of Salespersons 664 <span class="ml-1.5 text-[10px] font-semibold text-slate-400 bg-slate-100 px-2 py-0.5 rounded-full uppercase tracking-wide"> 665 Optional 666 </span> 667 </label> 668 669 <div class="relative"> 670 <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-[13px] pointer-events-none"> 671 <i class="fa-solid fa-users"></i> 672 </span> 673 674 <input 675 type="number" 676 id="salespersons" 677 name="team" 678 placeholder="e.g. 5" 679 min="1" 680 max="500" 681 class="form-input" 682 value="" 683 /> 684 </div> 685 686 <div class="form-hint"> 687 Helps us recommend the right plan for your team size. 688 </div> 689 </div> 690 <div> 691 <div class="anim-3 flex justify-center"> 692 <div class="g-recaptcha" data-sitekey="6LcuIm8tAAAAAFQDoSS89WT1r3QgiKMvt5JmL7a-" ></div> 693</div> 694 </div> 695 <!-- Submit --> 696 <button type="submit" 697 class="submit-btn shadow-0 rounded-full bg-black mt-5" 698 id="submit-btn"> 699
700 <span id="btn-text">Submit Integration Request</span> 701 <div class="spinner" id="btn-spinner"></div> 702 </button> 703 704 <p class="text-center text-[11.5px] text-slate-400 mt-4"> 705 <i class="fa-solid fa-lock text-[10px] mr-1"></i> 706 Your info is secure and never shared with third parties. 707 </p> 708 </form></div> 709 710 </div> 711</div> 712 713 <!-- SIDEBAR --> 714 <div class="space-y-4 reveal delay-2"> 715 716 <div class="info-card"> 717 <div class="text-[13px] font-bold mb-4 flex items-center gap-2"> 718 <span class="w-6 h-6 rounded-full bg-blue-light flex items-center justify-center"> 719 <i class="fa-solid fa-list-check text-blue text-[10px]"></i> 720 </span> 721 What happens next? 722 </div> 723 <ol class="space-y-4"> 724 725 <li class="flex gap-3"> 726 <span class="w-6 h-6 rounded-full bg-slate-100 text-slate-600 text-[11px] font-bold flex items-center justify-center flex-shrink-0 mt-0.5">1</span> 727 <div> 728 <div class="text-[13px] font-semibold">We review your request</div> 729 <div class="text-[12px] text-slate-400 mt-0.5">Our team checks your dealership website and contact details.</div> 730 </div> 731 </li> 732 733 <li class="flex gap-3"> 734 <span class="w-6 h-6 rounded-full bg-slate-100 text-slate-600 text-[11px] font-bold flex items-center justify-center flex-shrink-0 mt-0.5">2</span> 735 <div> 736 <div class="text-[13px] font-semibold">Integration is configured</div> 737 <div class="text-[12px] text-slate-400 mt-0.5">We set up your Facebook Marketplace connection and sync.</div> 738 </div> 739 </li> 740 741 <li class="flex gap-3"> 742 <span class="w-6 h-6 rounded-full bg-slate-100 text-slate-600 text-[11px] font-bold flex items-center justify-center flex-shrink-0 mt-0.5">3</span> 743 <div> 744 <div class="text-[13px] font-semibold">You're live in 1â2 days</div> 745 <div class="text-[12px] text-slate-400 mt-0.5">We'll email you once your integration is ready to go.</div> 746 </div> 747 </li> 748 749 </ol> 750 </div> 751 752 <div class="info-card"> 753 <div class="text-[13px] font-bold mb-3 flex items-center gap-2"> 754 <span class="w-6 h-6 rounded-full bg-blue-light flex items-center justify-center"> 755 <i class="fa-solid fa-circle-check text-blue text-[10px]"></i> 756 </span> 757 Supported DMS Platforms 758 </div> 759 <div class="flex flex-wrap gap-2"> 760 761 <span class="text-[11.5px] font-medium text-slate-600 bg-slate-100 px-2.5 py-1 rounded-lg">DealerSpikes</span> 762 763 <span class="text-[11.5px] font-medium text-slate-600 bg-slate-100 px-2.5 py-1 rounded-lg">Cycletrader</span> 764 765 <span class="text-[11.5px] font-medium text-slate-600 bg-slate-100 px-2.5 py-1 rounded-lg">Custom</span> 766 767 </div> 768 <p class="text-[11.5px] text-slate-400 mt-3">Don't see yours? Submit anyway â we support most platforms.</p> 769 </div> 770 771 <div class="info-card flex items-center gap-3"> 772 <div class="w-9 h-9 rounded-xl bg-blue-light flex items-center justify-center flex-shrink-0"> 773 <i class="fa-solid fa-headset text-blue text-[14px]"></i> 774 </div> 775 <div> 776 <div class="text-[13px] font-semibold">Need help?</div> 777 <a href="/support" class="text-[12px] text-blue hover:underline">Contact our support team â</a> 778 </div> 779 </div> 780 781 </div> 782 </div> 783 </section> 784 785 <style> 786 .fade-up { 787 opacity: 0; 788 transform: translateY(28px); 789 transition: opacity 0.6s ease, transform 0.6s ease; 790 } 791 .fade-up.visible { 792 opacity: 1; 793 transform: translateY(0); 794 } 795 .footer-brand.fade-up { transition-delay: 0s; } 796 .footer-cols .fade-up:nth-child(1) { transition-delay: 0.10s; } 797 .footer-cols .fade-up:nth-child(2) { transition-delay: 0.20s; } 798 .footer-cols .fade-up:nth-child(3) { transition-delay: 0.30s; } 799 800 @media (max-width: 640px) { 801 .footer-cols .fade-up:nth-child(n) { transition-delay: 0s; } 802 } 803</style> 804 805<footer class="bg-[#111827] text-white pt-16 pb-8 px-[5%]">
806 <div class="max-w-[1200px] mx-auto flex flex-col lg:flex-row justify-between gap-12 mb-12"> 807 808 <!-- Brand + Social --> 809 <div class="footer-brand fade-up flex flex-row lg:flex-col justify-between lg:justify-start lg:items-start md:items-start items-center gap-8 lg:gap-0 shrink-0"> 810 <div class="text-[22px] font-extrabold"> 811 <img class="h-[40px]" src="img/logo-white.png"/> 812 </div> 813 <div class="flex flex-row gap-3 lg:mt-auto lg:pt-8"> 814 <!-- Facebook --> 815 <a href="https://www.linkedin.com/company/dealerfill/" class="text-white/40 hover:text-[#3B97EE] transition-colors" aria-label="Facebook"> 816 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"> 817 <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/> 818 </svg> 819 </a> 820 <!-- LinkedIn --> 821 <a href="https://www.linkedin.com/company/dealerfill/" class="text-white/40 hover:text-[#3B97EE] transition-colors" aria-label="LinkedIn"> 822 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"> 823 <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2z"/> 824 <circle cx="4" cy="4" r="2"/> 825 </svg> 826 </a> 827 </div> 828 </div> 829 830 <!-- Nav Columns --> 831 <div class="footer-cols grid grid-cols-2 sm:grid-cols-3 gap-x-8 gap-y-10 lg:gap-x-16"> 832 833 <div class="fade-up"> 834 <h4 class="text-base font-medium mb-4 text-gray-500">Product</h4> 835 <ul class="list-none flex flex-col gap-5"> 836 <li><a href="/roi-calculator" class="text-gray-200 no-underline text-[15px] hover:text-[#3B97EE] transition-colors">ROI Calculator</a></li> 837 <li><a href="/pricing" class="text-gray-200 no-underline text-[15px] hover:text-[#3B97EE] transition-colors">Pricing</a></li> 838 <li><a href="https://chromewebstore.google.com/detail/fb-dealer-fill/bmlodhddfakcjenhhhffihbglafbdjbm" 839 class="text-gray-200 no-underline text-[15px] hover:text-[#3B97EE] transition-colors">Chrome Extension</a></li> 840 </ul> 841 </div> 842 843 <div class="fade-up"> 844 <h4 class="text-base font-medium mb-4 text-gray-500">Support</h4> 845 <ul class="list-none flex flex-col gap-5"> 846 <li><a href="/help" class="text-gray-200 no-underline text-[15px] hover:text-[#3B97EE] transition-colors">Help Center</a></li> 847 <li><a href="/status" class="text-gray-200 no-underline text-[15px] hover:text-[#3B97EE] transition-colors">Status</a></li> 848 <li><a href="/support" class="text-gray-200 no-underline text-[15px] hover:text-[#3B97EE] transition-colors">Contact Us</a></li> 849 </ul> 850 </div> 851 852 <div class="fade-up col-span-2 sm:col-span-1"> 853 <h4 class="text-base font-medium mb-4 text-gray-500">Legal</h4> 854 <ul class="list-none flex flex-col gap-5"> 855 <li><a href="/privacy" class="text-gray-200 no-underline text-[15px] hover:text-[#3B97EE] transition-colors">Privacy Policy</a></li> 856 <li><a href="/terms" class="text-gray-200 no-underline text-[15px] hover:text-[#3B97EE] transition-colors">Terms of Use</a></li> 857 <li><a href="/refunds-policy" class="text-gray-200 no-underline text-[15px] hover:text-[#3B97EE] transition-colors">Refund Policy</a></li> 858 </ul> 859 </div> 860 861 </div> 862 </div> 863 864 <!-- Bottom bar --> 865 <div class="max-w-[1200px] mx-auto border-t border-white/[0.08] pt-7 flex flex-col sm:flex-row justify-between items-center gap-2 text-xs text-white/35"> 866 <span>© 2026 DealerFill by <a href="/" class="text-[#3B97EE] no-underline">DealerFill</a>. All rights reserved.</span> 867 <span>Built for Powersports Dealers ðï¸ USA</span> 868 </div> 869</footer> 870
871<script> 872 const fadeEls = document.querySelectorAll('.fade-up'); 873 const io = new IntersectionObserver((entries) => { 874 entries.forEach(e => { 875 if (e.isIntersecting) { 876 e.target.classList.add('visible'); 877 io.unobserve(e.target); 878 } 879 }); 880 }, { threshold: 0.12 }); 881 fadeEls.forEach(el => io.observe(el)); 882</script>
882 883 884
884<script> 885 function isValidUrl(v) { 886 try { const u = new URL(v); return ['http:','https:'].includes(u.protocol); } catch { return false; } 887 } 888 function isValidEmail(v) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim()); } 889 function isValidPhone(v) { return /^[\+\d\s\-\(\)]{7,20}$/.test(v.trim()); } 890 891 function setError(id, show) { 892 document.getElementById(id + '-error').style.display = show ? 'block' : 'none'; 893 document.getElementById(id).classList.toggle('error', show); 894 } 895 896 // live blur validation 897 ['website','email','phone'].forEach(id => { 898 document.getElementById(id).addEventListener('blur', () => { 899 const v = document.getElementById(id).value.trim(); 900 if (!v) return; 901 if (id === 'website') setError(id, !isValidUrl(v)); 902 if (id === 'email') setError(id, !isValidEmail(v)); 903 if (id === 'phone') setError(id, !isValidPhone(v)); 904 }); 905 // clear on input 906 document.getElementById(id).addEventListener('input', () => setError(id, false)); 907 }); 908 909 function validateAll() { 910 const w = document.getElementById('website').value.trim(); 911 const e = document.getElementById('email').value.trim(); 912 const p = document.getElementById('phone').value.trim(); 913 let ok = true; 914 if (!isValidUrl(w)) { setError('website', true); ok = false; } else setError('website', false); 915 if (!isValidEmail(e)) { setError('email', true); ok = false; } else setError('email', false); 916 if (!isValidPhone(p)) { setError('phone', true); ok = false; } else setError('phone', false); 917 return ok; 918 } 919 920 function showToast() { 921 const t = document.getElementById('toast'); 922 t.classList.add('show'); 923 setTimeout(() => t.classList.remove('show'), 5500); 924 } 925 926 document.getElementById('integration-form').addEventListener('submit', async function(e) { 927 928 // browser required validation first 929 if (!this.checkValidity()) { 930 this.reportValidity(); 931 return; 932 } 933 934 e.preventDefault(); 935 936 // custom validation 937 if (!validateAll()) return; 938 939 const btn = document.getElementById('submit-btn'); 940 const btnText = document.getElementById('btn-text'); 941 const spinner = document.getElementById('btn-spinner'); 942 943 btn.disabled = true; 944 btnText.textContent = 'Submittingâ¦'; 945 spinner.style.display = 'block'; 946 947 try { 948 const res = await fetch('/integration/request', { 949 method: 'POST', 950 headers: { 'Content-Type': 'application/json' }, 951 body: JSON.stringify({ 952 website: document.getElementById('website').value.trim(), 953 email: document.getElementById('email').value.trim(), 954 salespersons: document.getElementById('salespersons').value || null, 955 }), 956 }); 957 958 const data = await res.json(); 959 960 if (res.ok && data.success) { 961 showToast(); 962 this.reset(); 963 } else { 964 alert(data.message || 'Something went wrong.'); 965 } 966 967 } catch { 968 alert('Network error.'); 969 } finally { 970 btn.disabled = false; 971 btnText.textContent = 'Submit Integration Request'; 972 spinner.style.display = 'none'; 973 } 974}); 975 </script>
975 976</body> 977</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.