PageSourceSearch

https://dealerfill.com/integration

html dealerfill.com collected 2026-10-02 01:26:51 UTC 31,659 bytes, 977 lines download raw bytes

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&#39;re live in 1–2 days</div>
745                <div class="text-[12px] text-slate-400 mt-0.5">We&#39;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.