123 lines
8.1 KiB
PHP
123 lines
8.1 KiB
PHP
<section id="faq" class="flex flex-col px-6 md:px-14 mb-20 pt-24">
|
|
<div class="flex flex-col space-y-4 justify-center mx-auto mb-14">
|
|
<h2 class="text-2xl md:text-3xl font-semibold text-center">Pertanyaan yang Sering Diajukan</h2>
|
|
<p class="font-medium text-base md:text-xl text-center">Kami di sini untuk membantu menjawab semua pertanyaan
|
|
Anda</p>
|
|
</div>
|
|
<div class="flex flex-col justify-center items-center space-y-4">
|
|
<div x-data="{ open: false }" class="flex flex-col space-y-4 w-full max-w-3xl">
|
|
<div @click="open = !open" class="flex items-center justify-between cursor-pointer">
|
|
<div class="flex space-x-6 items-center">
|
|
<img src="{{ asset('images/icons8-farmer.svg') }}" alt="icon"
|
|
class="w-12 h-12 ring-2 ring-gray-700 p-1.5 rounded-lg">
|
|
<span class="font-medium text-base md:text-lg">Apa itu TernakQ?</span>
|
|
</div>
|
|
<i class="fa-solid fa-chevron-down ml-2 text-gray-700 transition-transform duration-300 ease-in-out"
|
|
:class="{ '-rotate-180': open }"></i>
|
|
</div>
|
|
<div class="overflow-hidden transition-all duration-300 ease-in-out" x-ref="content"
|
|
x-bind:style="open ? 'max-height: ' + $refs.content.scrollHeight + 'px' : 'max-height: 0;'">
|
|
<p class="text-gray-700 text-sm md:text-base leading-relaxed">
|
|
TernakQ adalah platform edukasi daring yang menyediakan informasi praktis untuk mendukung peternakan
|
|
ayam broiler.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div x-data="{ open: false }" class="flex flex-col space-y-4 w-full max-w-3xl">
|
|
<div @click="open = !open" class="flex items-center justify-between cursor-pointer">
|
|
<div class="flex space-x-6 items-center">
|
|
<img src="{{ asset('images/icons8-guidebook.svg') }}" alt="icon"
|
|
class="w-12 h-12 ring-2 ring-gray-700 p-1.5 rounded-lg">
|
|
<span class="font-medium text-base md:text-lg">Apakah website ini memberikan panduan lengkap untuk
|
|
pemula?</span>
|
|
</div>
|
|
<i class="fa-solid fa-chevron-down ml-2 text-gray-700 transition-transform duration-300 ease-in-out"
|
|
:class="{ '-rotate-180': open }"></i>
|
|
</div>
|
|
<div class="overflow-hidden transition-all duration-300 ease-in-out" x-ref="content"
|
|
x-bind:style="open ? 'max-height: ' + $refs.content.scrollHeight + 'px' : 'max-height: 0;'">
|
|
<p class="text-gray-700 text-sm md:text-base leading-relaxed">
|
|
Ya, kami menyediakan artikel edukasi, tips, dan panduan langkah demi langkah bagi pemula untuk
|
|
memulai peternakan ayam broiler.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div x-data="{ open: false }" class="flex flex-col space-y-4 w-full max-w-3xl">
|
|
<div @click="open = !open" class="flex items-center justify-between cursor-pointer">
|
|
<div class="flex space-x-6 items-center">
|
|
<img src="{{ asset('images/icons8-disease.svg') }}" alt="icon"
|
|
class="w-12 h-12 ring-2 ring-gray-700 p-1.5 rounded-lg">
|
|
<span class="font-medium text-base md:text-lg">Apakah ada informasi tentang cara mencegah penyakit
|
|
pada ayam?</span>
|
|
</div>
|
|
<i class="fa-solid fa-chevron-down ml-2 text-gray-700 transition-transform duration-300 ease-in-out"
|
|
:class="{ '-rotate-180': open }"></i>
|
|
</div>
|
|
<div class="overflow-hidden transition-all duration-300 ease-in-out" x-ref="content"
|
|
x-bind:style="open ? 'max-height: ' + $refs.content.scrollHeight + 'px' : 'max-height: 0;'">
|
|
<p class="text-gray-700 text-sm md:text-base leading-relaxed">
|
|
Tentu! Kami memiliki artikel dan diskusi di forum yang membahas cara mencegah serta menangani
|
|
penyakit umum pada ayam broiler.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div x-data="{ open: false }" class="flex flex-col space-y-4 w-full max-w-3xl">
|
|
<div @click="open = !open" class="flex items-center justify-between cursor-pointer">
|
|
<div class="flex space-x-6 items-center">
|
|
<img src="{{ asset('images/icons8-market.svg') }}" alt="icon"
|
|
class="w-12 h-12 ring-2 ring-gray-700 p-1.5 rounded-lg">
|
|
<span class="font-medium text-base md:text-lg">Bisakah saya mendapatkan informasi tentang pemasaran
|
|
hasil ternak?</span>
|
|
</div>
|
|
<i class="fa-solid fa-chevron-down ml-2 text-gray-700 transition-transform duration-300 ease-in-out"
|
|
:class="{ '-rotate-180': open }"></i>
|
|
</div>
|
|
<div class="overflow-hidden transition-all duration-300 ease-in-out" x-ref="content"
|
|
x-bind:style="open ? 'max-height: ' + $refs.content.scrollHeight + 'px' : 'max-height: 0;'">
|
|
<p class="text-gray-700 text-sm md:text-base leading-relaxed">
|
|
Kami belum menyediakan informasi terkait hal tersebut di platform kami. Kami akan terus berusaha
|
|
memperbarui dan menambah fitur serta informasi yang relevan di masa mendatang.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div x-data="{ open: false }" class="flex flex-col space-y-4 w-full max-w-3xl">
|
|
<div @click="open = !open" class="flex items-center justify-between cursor-pointer">
|
|
<div class="flex space-x-6 items-center">
|
|
<img src="{{ asset('images/icons8-forum.svg') }}" alt="icon"
|
|
class="w-12 h-12 ring-2 ring-gray-700 p-1.5 rounded-lg">
|
|
<span class="font-medium text-base md:text-lg">Bagaimana cara bergabung di forum diskusi?</span>
|
|
</div>
|
|
<i class="fa-solid fa-chevron-down ml-2 text-gray-700 transition-transform duration-300 ease-in-out"
|
|
:class="{ '-rotate-180': open }"></i>
|
|
</div>
|
|
<div class="overflow-hidden transition-all duration-300 ease-in-out" x-ref="content"
|
|
x-bind:style="open ? 'max-height: ' + $refs.content.scrollHeight + 'px' : 'max-height: 0;'">
|
|
<p class="text-gray-700 text-sm md:text-base leading-relaxed">
|
|
Anda dapat mendaftar akun di website kami, lalu masuk ke menu Forum untuk bergabung dengan komunitas
|
|
peternak ayam broiler.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div x-data="{ open: false }" class="flex flex-col space-y-4 w-full max-w-3xl">
|
|
<div @click="open = !open" class="flex items-center justify-between cursor-pointer">
|
|
<div class="flex space-x-6 items-center">
|
|
<img src="{{ asset('images/icons8-rupiah.svg') }}" alt="icon"
|
|
class="w-12 h-12 ring-2 ring-gray-700 p-1.5 rounded-lg">
|
|
<span class="font-medium text-base md:text-lg">Apakah ada biaya untuk menggunakan website
|
|
ini?</span>
|
|
</div>
|
|
<i class="fa-solid fa-chevron-down ml-2 text-gray-700 transition-transform duration-300 ease-in-out"
|
|
:class="{ '-rotate-180': open }"></i>
|
|
</div>
|
|
<div class="overflow-hidden transition-all duration-300 ease-in-out" x-ref="content"
|
|
x-bind:style="open ? 'max-height: ' + $refs.content.scrollHeight + 'px' : 'max-height: 0;'">
|
|
<p class="text-gray-700 text-sm md:text-base leading-relaxed">
|
|
Semua fitur di website kami sepenuhnya gratis dan dapat diakses tanpa dipungut biaya. Kami
|
|
berkomitmen untuk menyediakan edukasi dan informasi peternakan ayam broiler secara bebas agar dapat
|
|
dimanfaatkan oleh semua peternak tanpa hambatan.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|