All Prompts
All Prompts
coursesectionmodule-listtailwindresponsiveanimatedctaintersection-observer
Training Program Course Section with Animated Modules
Секция курса с анимированными модулями. Адаптивный дизайн, CTA, список модулей. Идеально для лендингов курсов.
Prompt
<section class="lg:px-8 lg:py-24 sm:px-8 mt-20 mb-20 pt-20 pr-6 pb-20 pl-6">
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-medium tracking-tight mb-6 font-geist">
Choose Your Impact Level
</h2>
<p class="text-neutral-600 text-lg leading-relaxed max-w-2xl mx-auto font-geist">
Every contribution makes a difference. Select a plan that matches your commitment to creating positive change in communities worldwide.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
<!-- Basic Plan -->
<div class="relative bg-white rounded-[32px] p-8 ring-1 ring-neutral-200 hover:ring-neutral-300 hover:shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06)] transition-all duration-700 ease-out">
<div class="flex items-center gap-3 mb-6">
<div class="h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center">
<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="w-6 h-6 text-blue-600">
<path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" class=""></path>
</svg>
</div>
<div class="">
<h3 class="text-xl font-medium text-neutral-900 font-geist">Helper</h3>
<p class="text-sm text-neutral-500 font-geist">Basic support</p>
</div>
</div>
<div class="mb-6">
<div class="flex items-baseline gap-1 mb-2">
<span class="text-3xl font-medium text-neutral-900 font-geist">$25</span>
<span class="text-neutral-500 text-sm font-geist">/month</span>
</div>
<p class="text-sm text-neutral-600 font-geist">Perfect for individual contributors who want to make a consistent impact</p>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-3 text-sm text-neutral-700 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-600 flex-shrink-0">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
Monthly impact reports
</li>
<li class="flex items-center gap-3 text-sm text-neutral-700 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-600 flex-shrink-0">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
Community newsletter
</li>
<li class="flex items-center gap-3 text-sm text-neutral-700 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-600 flex-shrink-0">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
Digital thank you card
</li>
</ul>
<a href="/#course" class="inline-flex items-center justify-center hover:bg-neutral-800 transition-colors font-medium text-white font-geist bg-neutral-900 w-full rounded-full pt-3 pr-6 pb-3 pl-6 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]">
Start Helping
</a>
</div>
<!-- Supporter Plan -->
<div class="relative bg-white rounded-[32px] p-8 ring-1 ring-neutral-200 hover:ring-neutral-300 hover:shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06)] transition-all duration-700 ease-out delay-150">
<div class="flex items-center gap-3 mb-6">
<div class="h-12 w-12 rounded-full bg-green-100 flex items-center justify-center">
<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="w-6 h-6 text-green-600">
<path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path>
</svg>
</div>
<div class="">
<h3 class="text-xl font-medium text-neutral-900 font-geist">Supporter</h3>
<p class="text-sm text-neutral-500 font-geist">Enhanced impact</p>
</div>
</div>
<div class="mb-6">
<div class="flex items-baseline gap-1 mb-2">
<span class="text-3xl font-medium text-neutral-900 font-geist">$75</span>
<span class="text-neutral-500 text-sm font-geist">/month</span>
</div>
<p class="text-sm text-neutral-600 font-geist">Ideal for those ready to make a more substantial difference in communities</p>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-3 text-sm text-neutral-700 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-600 flex-shrink-0">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
Everything in Helper
</li>
<li class="flex items-center gap-3 text-sm text-neutral-700 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-600 flex-shrink-0">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
Quarterly video updates
</li>
<li class="flex items-center gap-3 text-sm text-neutral-700 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-600 flex-shrink-0">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
Priority support access
</li>
<li class="flex items-center gap-3 text-sm text-neutral-700 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-600 flex-shrink-0">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
Community forum access
</li>
</ul>
<a href="#" class="inline-flex items-center justify-center hover:bg-neutral-800 transition-colors font-medium text-white font-geist bg-neutral-900 w-full rounded-full pt-3 pr-6 pb-3 pl-6 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]">
Become Supporter
</a>
</div>
<!-- Champion Plan -->
<div class="relative bg-blue-700 rounded-[32px] pt-8 pr-8 pb-8 pl-8 shadow-[rgba(255,_255,_255,_0.1)_0px_1px_1px_0px_inset,_rgba(50,_50,_93,_0.25)_0px_50px_100px_-20px,_rgba(0,_0,_0,_0.3)_0px_30px_60px_-30px] transition-all duration-700 ease-out delay-300">
<div class="absolute -top-4 left-1/2 -translate-x-1/2">
<div class="text-xs font-medium text-blue-700 font-geist bg-white border-black/10 border rounded-full pt-1.5 pr-4 pb-1.5 pl-4 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]">
Most Popular
</div>
</div>
<div class="flex items-center gap-3 mb-6">
<div class="h-12 w-12 rounded-full bg-white flex items-center justify-center">
<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="w-6 h-6 text-blue-700">
<path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978" class=""></path><path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978" class=""></path><path d="M18 9h1.5a1 1 0 0 0 0-5H18" class=""></path><path d="M4 22h16" class=""></path><path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z" class=""></path><path d="M6 9H4.5a1 1 0 0 1 0-5H6" class=""></path>
</svg>
</div>
<div class="">
<h3 class="text-xl font-medium text-white font-geist">Champion</h3>
<p class="text-sm text-blue-200 font-geist">Maximum impact</p>
</div>
</div>
<div class="mb-6">
<div class="flex items-baseline gap-1 mb-2">
<span class="text-3xl font-medium text-white font-geist">$150</span>
<span class="text-blue-200 text-sm font-geist">/month</span>
</div>
<p class="text-sm text-blue-100 font-geist">For dedicated supporters who want to drive significant change and lead by example</p>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-3 text-sm text-white font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-200 flex-shrink-0">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
Everything in Supporter
</li>
<li class="flex items-center gap-3 text-sm text-white font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-200 flex-shrink-0">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
1-on-1 impact calls
</li>
<li class="flex items-center gap-3 text-sm text-white font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-200 flex-shrink-0">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
Project naming rights
</li>
<li class="flex items-center gap-3 text-sm text-white font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-200 flex-shrink-0">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
Exclusive event invites
</li>
<li class="flex items-center gap-3 text-sm text-white font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-200 flex-shrink-0">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
Annual impact certificate
</li>
</ul>
<a href="#" class="inline-flex items-center justify-center hover:bg-white/90 transition-colors font-medium text-blue-700 font-geist bg-white w-full rounded-full pt-3 pr-6 pb-3 pl-6 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]">
Join Champions
</a>
</div>
<!-- Leader Plan -->
<div class="relative hover:ring-neutral-300 hover:shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06)] ring-neutral-200 ring-1 bg-white rounded-[32px] pt-8 pr-8 pb-8 pl-8 transition-all duration-700 ease-out delay-[450ms]">
<div class="flex items-center gap-3 mb-6">
<div class="h-12 w-12 rounded-full bg-amber-100 flex items-center justify-center">
<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="w-6 h-6 text-amber-600">
<path d="m11 17 2 2a1 1 0 1 0 3-3" class=""></path><path d="m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4" class=""></path><path d="m21 3 1 11h-2" class=""></path><path d="M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3" class=""></path><path d="M3 4h8" class=""></path>
</svg>
</div>
<div class="">
<h3 class="text-xl font-medium text-neutral-900 font-geist">Leader</h3>
<p class="text-sm text-neutral-500 font-geist">Ultimate partnership</p>
</div>
</div>
<div class="mb-6">
<div class="flex items-baseline gap-1 mb-2">
<span class="text-3xl font-medium text-neutral-900 font-geist">$500</span>
<span class="text-neutral-500 text-sm font-geist">/month</span>
</div>
<p class="text-sm text-neutral-600 font-geist">For organizations and individuals who want to transform entire communities</p>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-3 text-sm text-neutral-700 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-600 flex-shrink-0">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
Everything in Champion
</li>
<li class="flex items-center gap-3 text-sm text-neutral-700 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-600 flex-shrink-0">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
Custom project development
</li>
<li class="flex items-center gap-3 text-sm text-neutral-700 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-600 flex-shrink-0">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
Dedicated account manager
</li>
<li class="flex items-center gap-3 text-sm text-neutral-700 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-600 flex-shrink-0">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
Site visit opportunities
</li>
<li class="flex items-center gap-3 text-sm text-neutral-700 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-600 flex-shrink-0">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
Leadership board recognition
</li>
</ul>
<a href="#" class="inline-flex items-center justify-center hover:bg-neutral-800 transition-colors font-medium text-white font-geist bg-neutral-900 w-full rounded-full pt-3 pr-6 pb-3 pl-6 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]">
Lead Change
</a>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const targetEl = document.getElementById('aura-emfs7mn0g');
if (!targetEl) return;
const cards = targetEl.children;
// Ensure we don't select the script tag itself
const cardElements = Array.from(cards).filter(el => el.tagName !== 'SCRIPT');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
cardElements.forEach(card => {
// Remove animation start states to trigger the transition
card.classList.remove('opacity-0', 'translate-y-8', 'blur-md');
});
// Stop observing once the animation has been triggered
observer.unobserve(targetEl);
}
});
}, {
threshold: 0.1 // Trigger when 10% of the element is visible
});
observer.observe(targetEl);
});
if (window.lucide) {
lucide.createIcons();
}
</script>
</div>
<div class="text-center mt-12">
<p class="text-neutral-600 mb-6 font-geist">Need a custom solution? We're here to help.</p>
<a href="#" class="inline-flex items-center gap-2 text-neutral-900 font-medium hover:opacity-80 transition-opacity font-geist">
Contact Our Team
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M7 17L17 7" class=""></path>
<path d="M7 7h10v10" class=""></path>
</svg>
</a>
</div>
</section>