mirror of
https://github.com/chaoming/hugo-saasify-theme.git
synced 2025-04-20 06:11:53 +02:00
bc1a3bdd9b
- Split pricing table into two distinct designs - Add customizable title and description to FAQ component - Improve layout consistency across sections - Remove original pricing-table shortcode
31 lines
1.8 KiB
HTML
31 lines
1.8 KiB
HTML
{{ $data := .Inner | transform.Unmarshal }}
|
|
<section class="bg-white dark:bg-gray-900">
|
|
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
|
|
<div class="mx-auto max-w-screen-md text-center mb-8 lg:mb-12">
|
|
<h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">{{ $data.title | default "Frequently Asked Questions" }}</h2>
|
|
{{ with $data.description }}
|
|
<p class="mb-5 font-light text-gray-500 sm:text-xl dark:text-gray-400">{{ . }}</p>
|
|
{{ end }}
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
{{ range $data.questions }}
|
|
<div class="border rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-md transition-shadow duration-200">
|
|
<button class="w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition-colors duration-200 focus:outline-none"
|
|
onclick="this.parentElement.querySelector('.faq-content').classList.toggle('hidden');
|
|
this.querySelector('svg').classList.toggle('rotate-180')">
|
|
<span class="text-lg font-medium text-gray-900">{{ .question }}</span>
|
|
<svg class="w-5 h-5 text-gray-500 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</button>
|
|
<div class="faq-content hidden border-t">
|
|
<div class="p-6 prose prose-sm sm:prose lg:prose-lg max-w-none">
|
|
{{ .answer | markdownify }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</section>
|