VibeCoderzVibeCoderz
Telegram
All Prompts
Partnership CTA Section with Contact Form preview
sectioncontact formctatailwindresponsivemarketingnonprofittwo-column

Partnership CTA Section with Contact Form

Адаптивный раздел с формой обратной связи и CTA. Идеально для поиска партнеров и привлечения доноров. Tailwind CSS, двухколоночный макет.

Prompt

<div class="overflow-hidden mt-40 mb-20 relative">
    <!-- Content -->
    <div class="relative z-10 lg:px-8 sm:px-8 max-w-7xl mr-auto ml-auto pt-16 pr-6 pb-16 pl-6">
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
        <!-- Form card -->
        <div class="lg:col-span-6">
          <div class="sm:p-8 bg-neutral-50 ring-neutral-200 ring-1 rounded-[32px] pt-6 pr-6 pb-6 pl-6 shadow-lg">
            <div class="flex items-center justify-between mb-6">
              <div class="">
                <p class="text-sm text-neutral-500 font-geist">Sense Partnership</p>
                <h3 class="mt-2 text-3xl sm:text-4xl font-medium tracking-tight text-neutral-900 font-geist">Ready to create impact?
                </h3>
              </div>
              
            </div>

            <form action="#" method="POST" class="space-y-5">
              
              <div class="">
                <label for="ct-email" class="block text-sm text-neutral-700 mb-2 font-geist">Email address<span class="text-neutral-400"> *</span></label>
                <div class="relative">
                  <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="mail" class="lucide lucide-mail h-5 w-5 text-neutral-400 absolute left-4 top-1/2 -translate-y-1/2"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" class=""></path><rect x="2" y="4" width="20" height="16" rx="2" class=""></rect></svg>
                  <input id="ct-email" name="email" type="email" required="" placeholder="your.email@example.com" class="w-full pl-12 pr-4 py-3 text-base rounded-2xl ring-1 ring-neutral-200 focus:ring-2 focus:ring-neutral-900 outline-none bg-white placeholder:text-neutral-400 font-geist">
                </div>
              </div>
              <div class="">
                <label for="ct-org" class="block text-sm text-neutral-700 mb-2 font-geist">Organization</label>
                <input id="ct-org" name="organization" type="text" placeholder="Company or organization name" class="w-full pl-4 pr-4 py-3 text-base rounded-2xl ring-1 ring-neutral-200 focus:ring-2 focus:ring-neutral-900 outline-none bg-white placeholder:text-neutral-400 font-geist">
              </div>
              <div class="">
                <label for="ct-msg" class="block text-sm text-neutral-700 mb-2 font-geist">How would you like to contribute?</label>
                <textarea id="ct-msg" name="message" rows="4" placeholder="Share your ideas for partnership, volunteering, or donation plans..." class="w-full resize-y pl-4 pr-4 py-3 text-base rounded-2xl ring-1 ring-neutral-200 focus:ring-2 focus:ring-neutral-900 outline-none bg-white placeholder:text-neutral-400 font-geist"></textarea>
              </div>
              <button type="submit" class="inline-flex hover:bg-neutral-800 transition-colors text-base font-medium text-white font-geist bg-neutral-900 w-full rounded-2xl pt-4 pr-6 pb-4 pl-6 items-center justify-center">
                Start Making a Difference
                <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="arrow-right" class="lucide lucide-arrow-right h-5 w-5 ml-2"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
              </button>
              <p class="text-sm text-neutral-500 font-geist">By submitting, you agree to join our mission and our Terms &amp; Privacy Policy.</p>
            </form>
          </div>
        </div>

        <!-- Copy + highlights -->
        <div class="lg:col-span-6">
          <div class="max-w-xl">
            <div class="flex gap-3 mt-6 mb-6 items-center">
            <div class="flex -space-x-2">
              <img class="w-7 h-7 object-cover ring-white ring-2 rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5aa0d46a-9a98-4044-bce9-68ec849538ef_320w.jpg" alt="Member avatar 1">
              <img class="w-7 h-7 object-cover ring-white ring-2 rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a847bbaa-3964-40c8-ad91-98b3d6429867_320w.jpg" alt="Member avatar 2" style="">
              <img class="w-7 h-7 object-cover ring-white ring-2 rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/054cd9f9-ea66-4ac7-8e45-659730cfc5a3_320w.jpg" alt="Member avatar 3" style="">
            </div>
            <p class="text-sm text-neutral-600 font-geist">
              <span class="font-medium text-neutral-900 font-geist">1000+</span> donor active members
            </p>
          </div><h2 class="sm:text-6xl leading-[1.05] text-5xl font-medium text-neutral-900 tracking-tight font-geist">Partner with purpose.</h2>
            <p class="sm:text-lg text-base text-neutral-600 mt-6 leading-relaxed font-geist">
              Join thousands of changemakers who are transforming communities worldwide. Whether through donations, volunteering, or corporate partnerships—every contribution creates lasting impact.
            </p>

            <div class="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-6">
              <div class="flex items-start gap-4">
                
                <div class="">
                  <p class="text-neutral-900 font-medium text-base font-geist">Join 1,000+ donors</p>
                  <p class="text-neutral-600 text-sm mt-1 font-geist">Connect with a community of active contributors making real change happen.</p>
                </div>
              </div>
              <div class="flex items-start gap-4">
                
                <div class="">
                  <p class="text-neutral-900 font-medium text-base font-geist">Global impact</p>
                  <p class="text-neutral-600 text-sm mt-1 font-geist">Your support reaches communities across 50+ countries worldwide.</p>
                </div>
              </div>
              <div class="flex items-start gap-4">
                
                <div class="">
                  <p class="text-neutral-900 font-medium text-base font-geist">Track your impact</p>
                  <p class="text-neutral-600 text-sm mt-1 font-geist">Receive detailed reports showing exactly how your contribution helps.</p>
                </div>
              </div>
              <div class="flex items-start gap-4">
                
                <div class="">
                  <p class="text-neutral-900 font-medium text-base font-geist">100% transparent</p>
                  <p class="text-neutral-600 text-sm mt-1 font-geist">Every dollar is tracked with full transparency and accountability.</p>
                </div>
              </div>
            </div>

            <!-- Direct contact card -->
            <div class="mt-8">
              <div class="inline-flex items-center gap-4 rounded-[28px] bg-white ring-1 ring-neutral-200 shadow-lg p-4">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/201c453d-d501-4246-98c0-bdc43ce733a8_320w.jpg" alt="Partnership lead" class="w-14 h-14 object-cover rounded-2xl">
                <div class="min-w-0">
                  <p class="text-sm text-neutral-500 leading-none font-geist">Partnership Lead</p>
                  <p class="text-neutral-900 font-medium tracking-tight truncate mt-1 text-lg font-geist">Sarah Chen</p>
                  <p class="text-neutral-600 text-sm font-geist">Available Mon-Fri, 9am-5pm EST</p>
                </div>
                <a href="mailto:partnerships@sense.org" class="ml-2 inline-flex items-center gap-2 rounded-2xl bg-neutral-900 text-white px-4 py-3 text-sm font-medium hover:bg-neutral-800 transition-colors font-geist">
                  Schedule a call
                  
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
All Prompts