All Prompts
All Prompts
ctaherotailwindanimatedmarqueeavatarlanding
Animated Community CTA Section with Avatar Marquee
Секция CTA для лендинга с анимированным списком аватаров. Показывает размер сообщества, кнопку "Присоединиться". Идеально для приглашения в группы.
Prompt
<section class="[animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll sm:px-6 sm:pb-20 lg:px-8 lg:mt-40 lg:mb-40 overflow-hidden max-w-7xl mt-40 mr-auto mb-40 ml-auto pt-16 pr-4 pb-20 pl-4 relative" data-element-locator="html > body:nth-of-type(1) > section:nth-of-type(7)">
<script>
(function() {
const container = document.getElementById("subtle-bg-grid");
if (!container) return;
const grid = 12, spacing = 80, size = 3;
const offset = -((spacing * (grid - 1)) / 2);
let cells = [];
for(let y = 0; y < grid; y++) {
for(let x = 0; x < grid; x++) {
const cell = document.createElement('div');
cell.className = 'absolute rounded-sm transition-all duration-[2000ms] ease-in-out will-change-[opacity,background-color]';
cell.style.width = size + 'px';
cell.style.height = size + 'px';
cell.style.backgroundColor = 'rgba(132, 204, 22, 0.15)';
cell.style.opacity = '0.2';
cell.style.border = '1px solid rgba(132, 204, 22, 0.08)';
const px = offset + x * spacing, py = offset + y * spacing;
cell.style.left = `calc(50% + ${px}px)`;
cell.style.top = `calc(50% + ${py}px)`;
container.appendChild(cell);
cells.push(cell);
}
}
function animateSquares() {
cells.forEach(cell => {
cell.style.backgroundColor = 'rgba(132, 204, 22, 0.15)';
cell.style.opacity = '0.2';
});
const activeCount = Math.floor(cells.length * 0.15);
const indices = Array.from(cells.keys());
for(let i = 0; i < activeCount; i++) {
const idx = indices.splice(Math.floor(Math.random() * indices.length), 1)[0];
const cell = cells[idx];
cell.style.backgroundColor = 'rgba(132, 204, 22, 0.3)';
cell.style.opacity = '0.4';
}
}
animateSquares();
setInterval(animateSquares, 3000);
})();
</script>
<div class="mx-auto max-w-4xl text-center relative z-10">
<span class="inline-flex items-center gap-2 rounded-full border border-lime-400/30 bg-lime-500/15 px-3 sm:px-4 py-1.5 sm:py-2 text-xs font-medium text-lime-300">
Global Network
</span>
<h2 class="mt-4 sm:mt-6 text-3xl sm:text-4xl lg:text-5xl xl:text-6xl tracking-tighter font-semibold">
Join 50,000+ professionals from 180+ countries
</h2>
<p class="mt-3 sm:mt-4 text-sm sm:text-base font-medium text-slate-300/90">
Connect with productivity experts, AI enthusiasts, and
forward-thinking teams transforming email management.
</p>
<div class="mt-4 sm:mt-6">
<a href="#" class="inline-flex items-center gap-2 rounded-full bg-lime-600 px-4 sm:px-6 py-2 sm:py-3 text-sm font-semibold text-white shadow-lg shadow-lime-900/25 hover:bg-lime-500 transition-colors">
Join Community
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</a>
</div>
</div>
<div class="sm:mt-12 z-10 mt-8 relative">
<div class="overflow-hidden max-w-6xl mr-auto ml-auto py-[1px]" style="mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent), linear-gradient(to top, transparent, black 15%); -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent), linear-gradient(to top, transparent, black 15%); mask-composite: intersect; -webkit-mask-composite: destination-in;">
<div class="flex w-max" style="animation: marquee-left 80s linear infinite; will-change: transform;">
<div class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-8 sm:gap-4 flex-shrink-0 sm:pr-4 pr-2 gap-x-2 gap-y-2">
<div class="sm:rounded-2xl overflow-hidden bg-white/5 ring-white/10 ring-1 rounded-xl">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/46ceb0ec-b3fa-4f16-8a70-bbd217ee77a9_800w.jpg" alt="Neon-lit Astronaut Portrait on Black Background">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/81a14d03-8b28-415a-b8d8-bf76b3206731_800w.webp" alt="Cyberpunk Portrait with Red Laser Beam">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f40f03d0-8722-42a1-bf75-89d9deb07d7f_800w.jpg" alt="Portrait of woman with neon pink bob hair">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/92cff667-f259-4342-a0aa-f51b804f4d5c_800w.webp" alt="Close-up eyes behind vibrant blue petals">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c543a9e1-f226-4ced-80b0-feb8445a75b9_800w.jpg" alt="Monochrome Portrait of Woman in White Suit">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b08603d1-aaf4-4216-bd31-010eaa92f5cd_800w.jpg" alt="Abstract close-up portrait with color gradient haze">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f4e5e7c0-8aa2-4842-adfb-8c79e58459e4_800w.jpg" alt="Neon Floral Portrait in Profile">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/009b1373-14ec-472b-af1a-2cd1e8f97116_800w.jpg" alt="Futuristic Portrait with Orange AR Visor">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4f30f4f2-b81c-4bf1-88c7-86b1dc41acd1_800w.jpg" alt="Futuristic portrait with neon visor">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e135f35b-eaeb-4b52-b2df-a9690249ff63_800w.jpg" alt="Futuristic red-lit VR headset portrait">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/2f563338-39fa-47ea-9761-658d4f3f84db_800w.jpg" alt="Black-and-white portrait of smiling man">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/3397d397-3f7d-4eba-9dff-93ea38cfc6a3_800w.jpg" alt="Cyberpunk Neon Portrait Close-Up">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="sm:h-28 lg:h-36 w-full h-20 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/de4fd726-f962-4ff4-a691-4c9d529d2db7_320w.webp" alt="Neon-lit Astronaut Portrait on Black Background">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="sm:h-28 lg:h-36 w-full h-20 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c4dfd7da-34eb-42c1-af50-71cb6422978f_320w.webp" alt="Cyberpunk Portrait with Red Laser Beam">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="sm:h-28 lg:h-36 w-full h-20 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9c808756-0a0b-4b45-aa00-e1cb7a111d14_320w.webp" alt="Portrait of woman with neon pink bob hair">
</div>
<div class="sm:rounded-2xl overflow-hidden bg-white/5 ring-white/10 ring-1 rounded-xl">
<img class="sm:h-28 lg:h-36 w-full h-20 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/53e7b319-9ae2-45ab-9bd8-7cbd82bc275d_320w.webp" alt="Close-up eyes behind vibrant blue petals">
</div>
</div>
<div class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-8 gap-2 sm:gap-4 flex-shrink-0 pr-2 sm:pr-4">
<div class="sm:rounded-2xl overflow-hidden bg-white/5 ring-white/10 ring-1 rounded-xl">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/46ceb0ec-b3fa-4f16-8a70-bbd217ee77a9_800w.jpg" alt="Neon-lit Astronaut Portrait on Black Background">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/81a14d03-8b28-415a-b8d8-bf76b3206731_800w.webp" alt="Cyberpunk Portrait with Red Laser Beam">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f40f03d0-8722-42a1-bf75-89d9deb07d7f_800w.jpg" alt="Portrait of woman with neon pink bob hair">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/92cff667-f259-4342-a0aa-f51b804f4d5c_800w.webp" alt="Close-up eyes behind vibrant blue petals">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c543a9e1-f226-4ced-80b0-feb8445a75b9_800w.jpg" alt="Monochrome Portrait of Woman in White Suit">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b08603d1-aaf4-4216-bd31-010eaa92f5cd_800w.jpg" alt="Abstract close-up portrait with color gradient haze">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f4e5e7c0-8aa2-4842-adfb-8c79e58459e4_800w.jpg" alt="Neon Floral Portrait in Profile">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/009b1373-14ec-472b-af1a-2cd1e8f97116_800w.jpg" alt="Futuristic Portrait with Orange AR Visor">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4f30f4f2-b81c-4bf1-88c7-86b1dc41acd1_800w.jpg" alt="Futuristic portrait with neon visor">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e135f35b-eaeb-4b52-b2df-a9690249ff63_800w.jpg" alt="Futuristic red-lit VR headset portrait">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/2f563338-39fa-47ea-9761-658d4f3f84db_800w.jpg" alt="Black-and-white portrait of smiling man">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/3397d397-3f7d-4eba-9dff-93ea38cfc6a3_800w.jpg" alt="Cyberpunk Neon Portrait Close-Up">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/46ceb0ec-b3fa-4f16-8a70-bbd217ee77a9_800w.jpg" alt="Neon-lit Astronaut Portrait on Black Background">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/81a14d03-8b28-415a-b8d8-bf76b3206731_800w.webp" alt="Cyberpunk Portrait with Red Laser Beam">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f40f03d0-8722-42a1-bf75-89d9deb07d7f_800w.jpg" alt="Portrait of woman with neon pink bob hair">
</div>
<div class="rounded-xl sm:rounded-2xl overflow-hidden ring-1 ring-white/10 bg-white/5">
<img class="w-full h-20 sm:h-28 lg:h-36 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/92cff667-f259-4342-a0aa-f51b804f4d5c_800w.webp" alt="Close-up eyes behind vibrant blue petals">
</div>
</div>
</div>
</div>
</div>
</section>