Загрузка...

Адаптивная FAQ секция на Tailwind CSS с контактным CTA. Представляет вопросы/ответы в карточках, идеальна для лендингов.
<section class="md:py-20 bg-white py-16">
<div class="max-w-4xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="sm:text-4xl text-3xl font-medium text-neutral-900 tracking-tight">Frequently asked —
<span class="font-normal italic font-instrument-serif">questions</span></h2>
<p class="mt-3 text-neutral-600">Everything you need to know about working with NOVA.</p>
</div>
<div class="space-y-6">
<div class="border border-neutral-200 rounded-2xl p-6 hover:shadow-sm transition-shadow">
<h3 class="text-lg font-semibold text-neutral-900 mb-3">How does the subscription model work?</h3>
<p class="text-neutral-600 text-sm leading-relaxed">Our subscription model gives you access to our full design
and development team for a flat monthly rate. You can request unlimited projects, pause or cancel anytime, and
get consistent quality without the overhead of hiring in-house talent.</p>
</div>
<div class="border border-neutral-200 rounded-2xl p-6 hover:shadow-sm transition-shadow">
<h3 class="text-lg font-semibold text-neutral-900 mb-3">What's included in each plan?</h3>
<p class="text-neutral-600 text-sm leading-relaxed">Each plan includes different levels of service intensity.
Starter focuses on core design work, Pro adds development and systems thinking, while Scale provides dedicated
team resources and growth optimization. All plans include project management, regular communication, and our
proven process.</p>
</div>
<div class="border border-neutral-200 rounded-2xl p-6 hover:shadow-sm transition-shadow">
<h3 class="text-lg font-semibold text-neutral-900 mb-3">How quickly will I receive my designs?</h3>
<p class="text-neutral-600 text-sm leading-relaxed">Most requests are completed within 2-3 business days on
average. Complex requests may take longer, but we'll always communicate timelines upfront. Our response times
vary by plan, from 48 hours (Starter) to 12 hours (Scale) for initial feedback and updates.</p>
</div>
<div class="mt-12 text-center">
<p class="text-neutral-600 mb-4">Still have questions?</p>
<a href="#"
class="inline-flex items-center gap-2 rounded-full bg-neutral-900 text-white px-5 py-3 text-sm font-medium hover:bg-black transition">
Get in touch
<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="h-4 w-4">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</section>