<section class="relative pt-12 pb-12 lg:pb-0 md:pt-24">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap -mx-4">
<div class="w-full lg:w-1/2 px-4 mb-20 lg:mb-0 lg:pb-64">
<div class="max-w-sm">
<span class="inline-flex items-center h-6 mb-6 px-2 text-sm font-medium text-yellowGreen-700 bg-yellowGreen-200 rounded-full">FAQ</span>
<h1 class="font-heading tracking-tight text-4xl sm:text-5xl font-semibold mb-10">Frequently asked questions</h1>
<a class="group relative block xs:inline-block p-px text-sm font-semibold text-white bg-gradient-to-br from-cyanGreen-800 to-cyan-800 rounded-lg transition-all duration-300" href="#">
<div class="absolute top-0 left-0 w-full h-full rounded-lg ring ring-green-300 animate-pulse group-hover:ring-0 transition duration-300"></div>
<div class="relative flex items-center justify-center px-4 h-10 bg-gradient-to-br from-cyanGreen-800 to-cyan-800 group-hover:text-green-200 rounded-lg transition duration-300">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3332 7.33333C13.3332 4.38781 10.9454 2 7.99984 2C5.05432 2 2.6665 4.38781 2.6665 7.33333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M1.3335 9.77178V9.56155C1.3335 8.64381 1.95809 7.84385 2.84843 7.62126L3.25464 7.51971C3.63333 7.42504 4.00016 7.71145 4.00016 8.10179V11.2315C4.00016 11.6219 3.63333 11.9083 3.25464 11.8136L2.84842 11.7121C1.95809 11.4895 1.3335 10.6895 1.3335 9.77178Z" stroke="currentColor" stroke-width="1.5"></path>
<path d="M14.6667 9.77178V9.56155C14.6667 8.64381 14.0421 7.84385 13.1517 7.62126L12.7455 7.51971C12.3668 7.42504 12 7.71145 12 8.10179V11.2315C12 11.6219 12.3668 11.9083 12.7455 11.8136L13.1517 11.7121C14.0421 11.4895 14.6667 10.6895 14.6667 9.77178Z" stroke="currentColor" stroke-width="1.5"></path>
<path d="M13.3332 12V12C13.3332 12.9205 12.587 13.6667 11.6665 13.6667H9.6665" stroke="currentColor" stroke-width="1.5"></path>
<path d="M9 14.6667H7C6.44772 14.6667 6 14.219 6 13.6667C6 13.1144 6.44772 12.6667 7 12.6667H9C9.55228 12.6667 10 13.1144 10 13.6667C10 14.219 9.55228 14.6667 9 14.6667Z" stroke="currentColor" stroke-width="1.5"></path>
</svg>
<span class="ml-2">Talk to us</span>
</div>
</a>
</div>
</div>
<div class="w-full lg:w-1/2 px-4">
<div>
<div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="cursor-pointer group flex mb-3 items-center justify-between text-left w-full px-6 py-5 rounded-xl shadow-sm border border-gray-100 hover:border-yellowGreen-500 ring ring-transparent hover:ring-yellowGreen-500 focus:outline-none">
<div class="pr-4">
<h6 class="font-semibold">What is Aurora?</h6>
<div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
<p class="mt-2 text-sm text-gray-500">Orders are usually shipped within 1-2 business days after placing the order.</p>
</div>
</div>
<div class="flex-shrink-0 flex w-7 h-7 items-center justify-center bg-gray-100 rounded-full">
<span class="inline-block transform" :class="{'rotate-180': accordion, 'rotate-0': !accordion }">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 6L8 10L12 6" stroke="#041109" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>
<div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="cursor-pointer group flex mb-3 items-center justify-between text-left w-full px-6 py-5 rounded-xl shadow-sm border border-gray-100 hover:border-yellowGreen-500 ring ring-transparent hover:ring-yellowGreen-500 focus:outline-none">
<div class="pr-4">
<h6 class="font-semibold">How does it work?</h6>
<div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
<p class="mt-2 text-sm text-gray-500">Orders are usually shipped within 1-2 business days after placing the order.</p>
</div>
</div>
<div class="flex-shrink-0 flex w-7 h-7 items-center justify-center bg-gray-100 rounded-full">
<span class="inline-block transform" :class="{'rotate-180': accordion, 'rotate-0': !accordion }">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 6L8 10L12 6" stroke="#041109" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>
<div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="cursor-pointer group flex mb-3 items-center justify-between text-left w-full px-6 py-5 rounded-xl shadow-sm border border-gray-100 hover:border-yellowGreen-500 ring ring-transparent hover:ring-yellowGreen-500 focus:outline-none">
<div class="pr-4">
<h6 class="font-semibold">How much does it cost?</h6>
<div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
<p class="mt-2 text-sm text-gray-500">Orders are usually shipped within 1-2 business days after placing the order.</p>
</div>
</div>
<div class="flex-shrink-0 flex w-7 h-7 items-center justify-center bg-gray-100 rounded-full">
<span class="inline-block transform" :class="{'rotate-180': accordion, 'rotate-0': !accordion }">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 6L8 10L12 6" stroke="#041109" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>
<div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="cursor-pointer group flex mb-3 items-center justify-between text-left w-full px-6 py-5 rounded-xl shadow-sm border border-gray-100 hover:border-yellowGreen-500 ring ring-transparent hover:ring-yellowGreen-500 focus:outline-none">
<div class="pr-4">
<h6 class="font-semibold">Is there a free trial available?</h6>
<div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
<p class="mt-2 text-sm text-gray-500">Orders are usually shipped within 1-2 business days after placing the order.</p>
</div>
</div>
<div class="flex-shrink-0 flex w-7 h-7 items-center justify-center bg-gray-100 rounded-full">
<span class="inline-block transform" :class="{'rotate-180': accordion, 'rotate-0': !accordion }">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 6L8 10L12 6" stroke="#041109" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>
<div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="cursor-pointer group flex mb-3 items-center justify-between text-left w-full px-6 py-5 rounded-xl shadow-sm border border-gray-100 hover:border-yellowGreen-500 ring ring-transparent hover:ring-yellowGreen-500 focus:outline-none">
<div class="pr-4">
<h6 class="font-semibold">How to export my assets?</h6>
<div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
<p class="mt-2 text-sm text-gray-500">Orders are usually shipped within 1-2 business days after placing the order.</p>
</div>
</div>
<div class="flex-shrink-0 flex w-7 h-7 items-center justify-center bg-gray-100 rounded-full">
<span class="inline-block transform" :class="{'rotate-180': accordion, 'rotate-0': !accordion }">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 6L8 10L12 6" stroke="#041109" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
