VibeCoderzVibeCoderz
Telegram
All Prompts
AI Team Hero Section with CTA (Tailwind) preview
hero sectionlanding pagetailwindresponsivemarketingcta

AI Team Hero Section with CTA (Tailwind)

Адаптивная секция "Hero" для лендинга AI-продукта. Демонстрирует бренд, заголовок, ключевые фичи и CTA. Оптимизирована для всех устройств. Tailwind CSS.

Prompt

<div class="flex flex-col justify-between max-w-5xl">
                    <div class="">
                        <span class="text-sm text-neutral-500 font-normal font-geist" style="">FlowAI®</span>
                        <h2 class="text-[44px] sm:text-6xl lg:text-7xl leading-[0.9] text-neutral-100 mt-2 font-geist font-medium tracking-tighter" style="">Meet our AI team.</h2>

                        <!-- subtle plus markers -->
                        <div class="mt-8 hidden sm:grid grid-cols-3 gap-6 text-neutral-600">
                            <div class="flex items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus h-4 w-4"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
                                <span class="text-sm font-normal font-geist" style="">Intelligence</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus h-4 w-4"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
                                <span class="text-sm font-normal font-geist" style="">Automation</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus h-4 w-4"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
                                <span class="text-sm font-normal font-geist" style="">Scale</span>
                            </div>
                        </div>
                    </div>

                    <div class="mt-10 grid grid-cols-1 sm:grid-cols-2 gap-8">
                        <div>
                            <p class="text-sm text-neutral-100 font-medium tracking-tight font-geist" style="">Join our AI revolution</p>
                            <p class="mt-1 text-sm text-neutral-400 font-geist" style="">We're building the future of intelligent workflow automation.</p>
                            <button class="mt-4 inline-flex items-center gap-2 h-10 px-4 rounded-full bg-zinc-100 text-neutral-900 text-sm font-normal hover:bg-zinc-200 transition font-geist" style="">
                                View openings
                                <span class="inline-flex h-2 w-2 rounded-full bg-zinc-900"></span>
                            </button>
                        </div>
                        <p class="text-base text-neutral-300 leading-relaxed sm:text-right font-geist" style="">
                            Our team combines <span class="font-medium text-neutral-100 font-geist" style="">cutting-edge AI research</span> with practical workflow solutions that scale with your business.
                        </p>
                    </div>
                </div>
All Prompts