Загрузка...

Адаптивный раздел с формой обратной связи и CTA. Идеально для поиска партнеров и привлечения доноров. Tailwind CSS, двухколоночный макет.
<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 & 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>