feat: update pricing tables and FAQ components

- 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

layouts/shortcodes/faq.html

@@ -0,0 +1,31 @@
+{{ $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>

layouts/shortcodes/pricing-table-1.html

@@ -0,0 +1,57 @@
+{{ $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>

layouts/shortcodes/pricing-table-2.html

@@ -0,0 +1,53 @@
+{{ $data := .Inner | 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">
+        {{ with $data.title }}
+        <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">{{ . }}</h2>
+            {{ with $data.description }}
+            <p class="mb-5 font-light text-gray-500 sm:text-xl dark:text-gray-400">{{ . }}</p>
+            {{ end }}
+        </div>
+        {{ end }}
+        
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {{ range $index, $plan := $data.plans }}
+            <div class="relative flex flex-col p-6 {{ if $plan.featured }}bg-primary-600 text-white{{ else }}bg-white dark:bg-gray-800{{ end }} rounded-2xl shadow-xl transform hover:-translate-y-1 transition duration-300">
+                {{ if $plan.featured }}
+                <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
+                    <span class="bg-yellow-400 text-gray-900 text-xs font-semibold px-4 py-1 rounded-full">Most Popular</span>
+                </div>
+                {{ end }}
+                
+                <div class="mb-4">
+                    <h3 class="text-2xl font-bold {{ if $plan.featured }}text-white{{ else }}text-gray-900 dark:text-white{{ end }}">{{ $plan.name }}</h3>
+                    <p class="mt-2 {{ if not $plan.featured }}text-gray-500 dark:text-gray-400{{ end }}">{{ $plan.description }}</p>
+                </div>
+                
+                <div class="mb-6">
+                    <div class="flex items-baseline">
+                        <span class="text-4xl font-extrabold {{ if not $plan.featured }}text-gray-900 dark:text-white{{ end }}">$</span>
+                        <span class="text-5xl font-extrabold tracking-tight {{ if not $plan.featured }}text-gray-900 dark:text-white{{ end }}">{{ $plan.price }}</span>
+                        <span class="ml-1 {{ if not $plan.featured }}text-gray-500 dark:text-gray-400{{ end }}">/month</span>
+                    </div>
+                </div>
+                
+                <ul class="mb-8 space-y-4 flex-grow">
+                    {{ range $plan.features }}
+                    <li class="flex items-center">
+                        <svg class="w-5 h-5 {{ if $plan.featured }}text-white{{ else }}text-green-500 dark:text-green-400{{ end }} mr-2" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+                        </svg>
+                        <span class="{{ if not $plan.featured }}text-gray-600 dark:text-gray-400{{ end }}">{{ . }}</span>
+                    </li>
+                    {{ end }}
+                </ul>
+                
+                <a href="{{ $plan.button.url }}" class="text-center w-full px-5 py-3 rounded-lg {{ if $plan.featured }}bg-white text-primary-600 hover:bg-gray-100{{ else }}bg-primary-600 text-white hover:bg-primary-700{{ end }} font-medium transition duration-300">
+                    {{ $plan.button.text }}
+                </a>
+            </div>
+            {{ end }}
+        </div>
+    </div>
+</section>