AI Rental Concierge Hero with Email Capture

<div
  class="inline-flex text-[11px] shadow-purple-500/30 [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] font-medium text-purple-100 bg-gradient-to-br from-white/10 to-white/0 rounded-full pt-1 pr-3 pb-1 pl-3 relative shadow-sm gap-x-0 gap-y-0 items-center">
  <span class="mr-1.5 inline-flex h-1.5 w-1.5 rounded-full bg-emerald-400" style=""></span>
  <span class="font-geist" style="">
                Cut maintenance response time by 90%
              </span>

</div>

<h1
  class="sm:text-5xl lg:text-[3.2rem] [animation:fadeSlideIn_0.8s_ease-out_0.3s_both] text-4xl font-light text-slate-50 tracking-tighter font-geist mt-6">
  The AI concierge that
  <span class="font-light tracking-tighter font-geist text-blue-300">runs</span>
  your rentals
</h1>

<p
  class="lg:text-[15px] [animation:fadeSlideIn_0.8s_ease-out_0.4s_both] text-sm text-slate-300/90 font-geist max-w-xl mt-4">
  Trudi automates maintenance coordination, leasing communication, and rent collection. Give your
  tenants a 24/7 assistant while you reclaim your nights and weekends.</p>

<!-- Metrics -->

<!-- Email capture -->
<form class="[animation:fadeSlideIn_0.8s_ease-out_0.5s_both] max-w-none mt-7">
  <div
    class="flex shadow-slate-900/60 bg-gradient-to-br from-blue-500/10 via-blue-500/0 to-blue-500/10 rounded-3xl pt-1.5 pr-1.5 pb-1.5 pl-1.5 shadow-inner items-center"
    style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1)); --border-radius-before: 24px">
    <div class="flex items-center px-2">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="home"
        class="lucide lucide-home w-[22px] h-[22px]" data-icon-replaced="true"
        style="width: 22px; height: 22px; color: rgb(56, 219, 208)">
        <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
        <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z">
        </path>
      </svg>
    </div>
    <input type="email" placeholder="landlord@example.com" class="flex-1 placeholder:text-slate-500 focus:outline-none text-xs font-normal text-[#38DBD0] bg-transparent h-9">


    <label class="full-field">
                                                <gmp-place-autocomplete included-primary-types="street_address" included-region-codes="US"></gmp-place-autocomplete>
                                     
                                
                                
                                            <!-- Reset button provided for development testing convenience.
                                  Not recommended for user-facing forms due to risk of mis-click when aiming for Submit button. -->
                                
                                        
                        <button class="group inline-flex uppercase transition-all cursor-pointer text-sm font-medium text-white tracking-wider opacity-100 border-transparent border-2 rounded-xl relative gap-x-3 gap-y-3 items-center justify-center" style="padding:8px 10px; background: linear-gradient(0deg, #000, #272727); border-radius: 10px; border: none; color: white; position: relative; cursor: pointer; font-weight: 900; transition-duration: .2s" onclick="window.location.href='https://api.leadconnectorhq.com/widget/form/PkHQ8RsW0Tm4vCf5s7YZ'" role="button">
  <div class="absolute left-0 top-0 w-full h-full rounded-xl pointer-events-none" style="left: -2px; top: -2px; border-radius: 10px; background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000); background-size: 400%; width: calc(100% + 4px); height: calc(100% + 4px); z-index: -1; animation: steam 20s linear infinite;"></div>
  <div class="absolute left-0 top-0 w-full h-full rounded-xl pointer-events-none" style="left: -2px; top: -2px; border-radius: 10px; background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000); background-size: 400%; width: calc(100% + 4px); height: calc(100% + 4px); z-index: -1; animation: steam 20s linear infinite; filter: blur(50px);"></div>
  <span class="cursor-pointer font-medium z-30 relative" onclick="window.location.href='https://api.leadconnectorhq.com/widget/form/PkHQ8RsW0Tm4vCf5s7YZ'" role="button">Get started</span>
  <span class="relative flex h-5 w-5 items-center justify-center z-30">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 transition-transform group-hover:translate-x-0.5"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
  </span>
  <style>
    @keyframes steam {
      0% {
        background-position: 0 0;
      }
      50% {
        background-position: 400% 0;
      }
      100% {
        background-position: 0 0;
      }
    }
  </style>
</button>
                    </label>
  </div>
</form>


<!-- Logos -->
<div class="[animation:fadeSlideIn_0.8s_ease-out_0.6s_both] mt-12 space-y-2">
  <p class="text-[10px] uppercase text-slate-500 font-geist">Trusted by US landlords managing 1,000+
    units</p>
  <div class="flex flex-wrap text-[11px] text-slate-400 opacity-60 grayscale gap-x-6 gap-y-3 items-center">
    <!-- Generic Property Tech / Real Estate Placeholders using existing shapes but implying housing partners -->
    <span class="flex items-center gap-2 text-lg font-bold text-slate-400 font-jakarta"></span>
    <span class="flex items-center gap-2 text-lg font-bold text-slate-400 font-jakarta"></span>
    <span class="flex items-center gap-2 text-lg font-bold text-slate-400 font-jakarta"></span>
    <span class="flex items-center gap-2 text-lg font-bold text-slate-400 font-jakarta"></span>
  </div>
</div>
</section>