VibeCoderzVibeCoderz
Telegram
All Prompts
Contact CTA Section with Feature Highlights preview
contacttailwindgridiconresponsiveinfoheadingtexttypography

Contact CTA Section with Feature Highlights

Секция CTA для контактов с иконками и выделением преимуществ. Адаптивный дизайн на Tailwind CSS. Идеально для страниц контактов и поддержки.

Prompt

<div class="lg:col-span-7">
            <h2 class="text-4xl sm:text-5xl lg:text-6xl leading-[1.05] font-semibold text-black tracking-tight font-geist">Let's talk.</h2>
            <p class="text-base sm:text-lg max-w-2xl text-black/80 mt-4 font-geist">
              Tell us about your travel needs—support, partnerships, or bulk bookings. We reply within one business day.
            </p>

            <div class="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-6">
              <div class="flex items-start gap-3">
                <div class="h-9 w-9 rounded-lg bg-black/5 backdrop-blur ring-1 ring-black/10 flex items-center justify-center text-black/90">
                  <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="clock-3" class="lucide lucide-clock-3 h-4 w-4"><path d="M12 6v6h4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
                </div>
                <div class="">
                  <p class="text-black font-semibold text-sm font-geist">Quick response</p>
                  <p class="text-black/70 text-xs font-geist">Most messages receive a reply in under 24h.</p>
                </div>
              </div>
              <div class="flex items-start gap-3">
                <div class="h-9 w-9 rounded-lg bg-black/5 backdrop-blur ring-1 ring-black/10 flex items-center justify-center text-black/90">
                  <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="route" class="lucide lucide-route h-4 w-4"><circle cx="6" cy="19" r="3" class=""></circle><path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15" class=""></path><circle cx="18" cy="5" r="3" class=""></circle></svg>
                </div>
                <div class="">
                  <p class="text-black font-semibold text-sm font-geist">Clear next steps</p>
                  <p class="text-black/70 text-xs font-geist">We'll follow up with a concise plan and timeline.</p>
                </div>
              </div>
            </div>
          </div>
All Prompts