mirror of
https://github.com/chaoming/hugo-saasify-theme.git
synced 2025-04-25 07:21: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
57 lines
3.2 KiB
HTML
57 lines
3.2 KiB
HTML
{{ $json := .Inner | transform.Unmarshal }}
|
|
<section class="py-16 bg-white dark:bg-gray-900">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
{{ with $json.title }}
|
|
<div class="text-center">
|
|
<h2 class="text-3xl font-bold text-gray-900 dark:text-white">{{ . }}</h2>
|
|
{{ with $json.description }}
|
|
<p class="mt-4 text-xl text-gray-600 dark:text-gray-400">{{ . }}</p>
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
|
|
<div class="mt-16">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{{ range $json.plans }}
|
|
<div class="w-full">
|
|
<div class="h-full flex flex-col rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm hover:shadow-lg transition-shadow duration-300 relative">
|
|
{{ if .featured }}
|
|
<div class="absolute top-4 right-4 inline-block rounded-full bg-blue-100 px-4 py-1 text-sm font-semibold text-blue-800">
|
|
Popular
|
|
</div>
|
|
{{ end }}
|
|
<div class="p-8 flex flex-col flex-grow">
|
|
<div class="mb-6">
|
|
<h3 class="text-2xl font-bold text-gray-900 dark:text-white">{{ .name }}</h3>
|
|
<p class="mt-2 text-gray-500 dark:text-gray-400">{{ .description }}</p>
|
|
</div>
|
|
<div class="mb-8">
|
|
<p class="flex items-baseline">
|
|
<span class="text-5xl font-bold tracking-tight text-gray-900 dark:text-white">${{ .price }}</span>
|
|
<span class="ml-2 text-gray-500 dark:text-gray-400">/month</span>
|
|
</p>
|
|
</div>
|
|
<ul class="space-y-4 text-gray-600 dark:text-gray-400 flex-grow">
|
|
{{ range .features }}
|
|
<li class="flex items-start">
|
|
<svg class="h-6 w-6 flex-shrink-0 text-blue-500" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/>
|
|
</svg>
|
|
<span class="ml-3">{{ . }}</span>
|
|
</li>
|
|
{{ end }}
|
|
</ul>
|
|
<div class="mt-8">
|
|
<a href="{{ .button.url }}"
|
|
class="block w-full rounded-lg bg-blue-600 px-6 py-4 text-center text-base font-medium text-white shadow hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
|
|
{{ .button.text }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|