Embed

<section class="hpcs-downloads">
  <style>
    .hpcs-downloads{
      --bg1:#070b14;
      --bg2:#0b1220;
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.70);
      --muted2: rgba(255,255,255,.55);
      --brandA:#22c55e;
      --brandB:#3b82f6;
      --shadow: 0 18px 60px rgba(0,0,0,.35);
      --radius: 22px;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--text);
      padding: clamp(18px, 3vw, 28px);
      border-radius: 26px;
      background:
        radial-gradient(1200px 600px at 15% 15%, rgba(59,130,246,.28), transparent 60%),
        radial-gradient(900px 500px at 80% 25%, rgba(34,197,94,.22), transparent 55%),
        linear-gradient(180deg, var(--bg1), var(--bg2));
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: var(--shadow);
      overflow:hidden;
    }

    .hpcs-top{
      display:flex; align-items:center; justify-content:space-between;
      gap: 14px; margin-bottom: 18px;
    }
    .hpcs-brand{ display:flex; align-items:center; gap:12px; }
    .hpcs-brand img{
      width:46px; height:46px; object-fit:contain;
      border-radius: 14px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
    }
    .hpcs-brand strong{ display:block; font-size: 14.5px; letter-spacing: .2px; }
    .hpcs-brand span{ display:block; font-size: 12.5px; color: var(--muted2); margin-top: 2px; }

    .hpcs-chip{
      display:inline-flex; align-items:center; gap: 8px;
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
      color: var(--muted);
      font-size: 13px;
      white-space: nowrap;
    }
    .hpcs-dot{
      width: 8px; height: 8px; border-radius: 99px;
      background: linear-gradient(90deg, var(--brandA), var(--brandB));
      box-shadow: 0 0 0 6px rgba(34,197,94,.10);
    }

    .hpcs-hero{
      display:grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 18px;
      align-items:start;
    }
    @media (max-width: 980px){
      .hpcs-hero{ grid-template-columns: 1fr; }
      .hpcs-chip{ display:none; }
    }

    .hpcs-panel{
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
      border: 1px solid rgba(255,255,255,.10);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 18px;
      position: relative;
      overflow: hidden;
    }
    .hpcs-panel:before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(600px 240px at 10% 10%, rgba(34,197,94,.18), transparent 60%),
        radial-gradient(500px 220px at 90% 20%, rgba(59,130,246,.18), transparent 55%);
      pointer-events:none;
    }
    .hpcs-panel > *{ position:relative; }

    .hpcs-h1{
      margin:0 0 10px;
      font-size: clamp(28px, 3.4vw, 44px);
      letter-spacing: -0.4px;
      line-height: 1.06;
    }
    .hpcs-sub{
      margin:0 0 14px;
      color: var(--muted);
      font-size: 15.5px;
      line-height: 1.6;
      max-width: 62ch;
    }

    .hpcs-ctaRow{
      display:flex; flex-wrap:wrap; gap: 12px;
      margin: 14px 0 8px;
    }
    .hpcs-btn{
      display:inline-flex; align-items:center; justify-content:center; gap: 10px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: var(--text);
      font-weight: 650;
      font-size: 14.5px;
      cursor:pointer;
      transition: transform .08s ease, background .15s ease, border-color .15s ease;
      text-decoration:none;
      user-select:none;
    }
    .hpcs-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.18); }
    .hpcs-btn:active{ transform: translateY(0px); }

    .hpcs-btnPrimary{
      background: linear-gradient(90deg, rgba(34,197,94,.95), rgba(59,130,246,.95));
      border-color: rgba(255,255,255,.12);
      box-shadow: 0 12px 30px rgba(34,197,94,.18);
    }
    .hpcs-btnPrimary:hover{ background: linear-gradient(90deg, rgba(34,197,94,1), rgba(59,130,246,1)); }

    .hpcs-btnDisabled{
      opacity:.65;
      cursor:not-allowed;
      pointer-events:none;
    }

    .hpcs-hint{
      margin-top: 6px;
      color: var(--muted2);
      font-size: 13px;
      line-height: 1.55;
    }
    .hpcs-hint b{ color: rgba(255,255,255,.82); }

    .hpcs-grid{
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-top: 14px;
    }
    @media (max-width: 620px){
      .hpcs-grid{ grid-template-columns: 1fr; }
    }
    .hpcs-item{
      padding: 14px 14px;
      border-radius: 16px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.10);
    }
    .hpcs-item h3{ margin:0 0 6px; font-size: 14.5px; letter-spacing: -0.2px; }
    .hpcs-item p{ margin:0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }

    /* Carousel */
    .hpcs-shotHeader{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom: 8px; }
    .hpcs-shotHeader h2{ margin:0; font-size: 18px; letter-spacing:-0.2px; }
    .hpcs-shotHeader span{ color: var(--muted2); font-size: 13px; }

    .hpcs-carousel{
      position: relative;
      border-radius: var(--radius);
      overflow: hidden;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: var(--shadow);
    }
    .hpcs-track{
      display:flex;
      transition: transform .35s ease;
      will-change: transform;
    }
    .hpcs-slide{
      min-width: 100%;
      aspect-ratio: 9 / 16;
      display:flex; align-items:center; justify-content:center;
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    }
    .hpcs-slide img{
      width: 92%;
      height: 92%;
      object-fit: contain;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.18);
      box-shadow: 0 18px 60px rgba(0,0,0,.45);
    }

    .hpcs-carouselBtns{
      position:absolute; inset: 0;
      display:flex; align-items:center; justify-content:space-between;
      pointer-events:none;
      padding: 10px;
    }
    .hpcs-navBtn{
      pointer-events:auto;
      width: 44px; height: 44px;
      border-radius: 14px;
      display:flex; align-items:center; justify-content:center;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.22);
      backdrop-filter: blur(8px);
      cursor:pointer;
    }
    .hpcs-navBtn svg{ width: 18px; height: 18px; opacity: .92; }

    .hpcs-dots{
      display:flex; gap: 6px; justify-content:center;
      padding-top: 10px;
    }
    .hpcs-dotBtn{
      width: 8px; height: 8px; border-radius: 999px;
      background: rgba(255,255,255,.22);
      border: 0;
      cursor:pointer;
    }
    .hpcs-dotBtn.active{
      width: 18px;
      background: linear-gradient(90deg, var(--brandA), var(--brandB));
      box-shadow: 0 0 0 6px rgba(59,130,246,.10);
    }

    .hpcs-faq{
      margin-top: 12px;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    @media (max-width: 840px){
      .hpcs-faq{ grid-template-columns: 1fr; }
    }
    .hpcs-q{
      padding: 14px 14px;
      border-radius: 16px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.10);
    }
    .hpcs-q strong{ display:block; margin-bottom: 6px; font-size: 14px; }
    .hpcs-q span{ color: var(--muted); font-size: 13.5px; line-height: 1.55; }

    .hpcs-footer{
      margin-top: 16px;
      text-align:center;
      color: var(--muted2);
      font-size: 12.5px;
    }
  </style>

  <div class="hpcs-top">
    <div class="hpcs-brand">
      <img
        src="https://cdn.durable.co/logos/21H89UcWtBz9h2ujNlwFATJdr1rNet9xDHuppb74G4JlVD3DASlLLsAW8NcLyy2g.png"
        alt="Hudson Pro Cleaning Services logo"
      />
      <div>
        <strong>Hudson Pro Cleaning Services</strong>
        <span>App Downloads (New York)</span>
      </div>
    </div>

    <div class="hpcs-chip">
      <span class="hpcs-dot"></span>
      <span>Cleaning, in your pocket</span>
    </div>
  </div>

  <div class="hpcs-hero">
    
    <div class="hpcs-panel">
      <h1 class="hpcs-h1">Download the app and manage your cleanings in seconds</h1>
      <p class="hpcs-sub">
        Book, organize, and stay in control of your cleaning services right from your phone.
        Built for speed, clarity, and convenience — <b>Your mess is our mission</b>.
      </p>

      <div class="hpcs-ctaRow">
        
        <a class="hpcs-btn hpcs-btnPrimary"
           href="https://www.dropbox.com/scl/fo/vmo4xwvfpkad355vdvpgq/AGyv-MzJvGpgWSxy2Yr5ayU?rlkey=gjuubuorwdyn67r2kxtrnud0m&st=74q4zb03&dl=1"
           target="_blank"
           rel="noopener">
          Download Android App (APK)
        </a>

        
        <span class="hpcs-btn hpcs-btnDisabled" aria-disabled="true" title="Coming soon">
          iPhone — Coming Soon
        </span>
      </div>

      <div class="hpcs-hint">
        ⚠️ <b>Install note:</b> This app is installed outside Google Play.
        If prompted, enable <b>“Install unknown apps”</b> (or “Unknown sources”) to complete installation.
      </div>

      <div class="hpcs-grid">
        <div class="hpcs-item">
          <h3>Faster booking</h3>
          <p>Request cleaning in seconds with a clean, simple flow.</p>
        </div>
        <div class="hpcs-item">
          <h3>All in one place</h3>
          <p>Keep requests, notes, and service info organized.</p>
        </div>
        <div class="hpcs-item">
          <h3>Home & commercial</h3>
          <p>Great for busy homeowners and business clients.</p>
        </div>
        <div class="hpcs-item">
          <h3>Modern experience</h3>
          <p>Easy to understand, built for real-world speed.</p>
        </div>
      </div>
    </div>

    
    <div class="hpcs-panel">
      <div class="hpcs-shotHeader">
        <h2>App screenshots</h2>
        <span>Swipe to view</span>
      </div>

      <div class="hpcs-carousel" aria-label="Hudson Pro app screenshots">
        <div class="hpcs-track" id="hpcsTrack">
          
          <div class="hpcs-slide"><img src="/assets/app-screens/screen-1.png" alt="Hudson Pro app screenshot 1"></div>
          <div class="hpcs-slide"><img src="/assets/app-screens/screen-2.png" alt="Hudson Pro app screenshot 2"></div>
          <div class="hpcs-slide"><img src="/assets/app-screens/screen-3.png" alt="Hudson Pro app screenshot 3"></div>
          <div class="hpcs-slide"><img src="/assets/app-screens/screen-4.png" alt="Hudson Pro app screenshot 4"></div>
        </div>

        <div class="hpcs-carouselBtns">
          <button class="hpcs-navBtn" id="hpcsPrev" aria-label="Previous screenshot" type="button">
            <svg viewBox="0 0 24 24" fill="none"><path d="M14.5 5.5 8 12l6.5 6.5" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </button>
          <button class="hpcs-navBtn" id="hpcsNext" aria-label="Next screenshot" type="button">
            <svg viewBox="0 0 24 24" fill="none"><path d="M9.5 5.5 16 12l-6.5 6.5" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </button>
        </div>
      </div>

      <div class="hpcs-dots" id="hpcsDots" aria-label="Screenshot indicators"></div>

      <div class="hpcs-faq">
        <div class="hpcs-q">
          <strong>Who is this app for?</strong>
          <span>Residential and commercial clients who want faster scheduling and easier service management.</span>
        </div>
        <div class="hpcs-q">
          <strong>Is iPhone available?</strong>
          <span>Coming soon. As soon as it’s live (App Store or TestFlight), we’ll enable the download button here.</span>
        </div>
        <div class="hpcs-q">
          <strong>What can I do inside the app?</strong>
          <span>Request cleaning, keep your service details organized, and streamline communication.</span>
        </div>
        <div class="hpcs-q">
          <strong>Need help?</strong>
          <span>Use your website’s Contact page or message your team for support.</span>
        </div>
      </div>

      <div class="hpcs-footer">
        © <span id="hpcsYear"></span> Hudson Pro Cleaning Services · New York
      </div>
    </div>
  </div>

  <script>
    (function(){
      // Year
      var y = document.getElementById('hpcsYear');
      if(y) y.textContent = new Date().getFullYear();

      // Carousel
      var track = document.getElementById('hpcsTrack');
      if(!track) return;

      var slides = Array.prototype.slice.call(track.children);
      var prev = document.getElementById('hpcsPrev');
      var next = document.getElementById('hpcsNext');
      var dotsWrap = document.getElementById('hpcsDots');
      var index = 0;

      function renderDots(){
        if(!dotsWrap) return;
        dotsWrap.innerHTML = '';
        slides.forEach(function(_, i){
          var b = document.createElement('button');
          b.className = 'hpcs-dotBtn' + (i === index ? ' active' : '');
          b.setAttribute('aria-label', 'Go to screenshot ' + (i+1));
          b.type = 'button';
          b.addEventListener('click', function(){ goTo(i); });
          dotsWrap.appendChild(b);
        });
      }

      function goTo(i){
        index = (i + slides.length) % slides.length;
        track.style.transform = 'translateX(' + (-index * 100) + '%)';
        renderDots();
      }

      if(prev) prev.addEventListener('click', function(){ goTo(index - 1); });
      if(next) next.addEventListener('click', function(){ goTo(index + 1); });

      // Swipe support
      var startX = null;
      track.addEventListener('touchstart', function(e){ startX = e.touches[0].clientX; }, {passive:true});
      track.addEventListener('touchend', function(e){
        if(startX === null) return;
        var endX = e.changedTouches[0].clientX;
        var diff = endX - startX;
        if(Math.abs(diff) > 40){
          if(diff < 0) goTo(index + 1);
          else goTo(index - 1);
        }
        startX = null;
      }, {passive:true});

      renderDots();
    })();
  </script>
</section>