<section class="py-20 bg-white dark:bg-gray-900" x-data="{ inView: false, activeTab: 0 }" x-init="setTimeout(() => inView = true, 500)">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="text-center mb-16">
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out">
<h2 class="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-4">
WavyKits Platform
</h2>
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
Discover how WavyKits empowers you to create stunning websites with its versatile templates, reusable components, and powerful page builder.
</p>
</div>
</div>
<!-- Product Tabs -->
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out delay-200">
<!-- Tab Navigation -->
<div class="flex flex-wrap border-b border-gray-200 dark:border-gray-700 mb-6">
<button
@click="activeTab = 0"
:class="{
'border-b-2 border-blue-500 text-blue-500': activeTab === 0,
'text-gray-600 dark:text-gray-300': activeTab !== 0
}"
class="px-4 py-2 font-semibold text-lg hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200"
>
Templates & Components
</button>
<button
@click="activeTab = 1"
:class="{
'border-b-2 border-blue-500 text-blue-500': activeTab === 1,
'text-gray-600 dark:text-gray-300': activeTab !== 1
}"
class="px-4 py-2 font-semibold text-lg hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200"
>
Page Builder
</button>
<button
@click="activeTab = 2"
:class="{
'border-b-2 border-blue-500 text-blue-500': activeTab === 2,
'text-gray-600 dark:text-gray-300': activeTab !== 2
}"
class="px-4 py-2 font-semibold text-lg hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200"
>
SEO Generator
</button>
</div>
<!-- Tab Content -->
<div class="bg-gray-50 dark:bg-gray-800 rounded-2xl p-6 text-gray-600 dark:text-gray-300">
<div x-show="activeTab === 0" x-transition>
<p>WavyKits offers a rich library of responsive templates and reusable components, available in multiple frameworks like React, Vue, Angular, Alpine.js, and Livewire. Whether you're building a landing page, portfolio, or e-commerce site, our templates and components are fully customizable and exportable as clean HTML, Alpine.js, or Tailwind CSS code, ensuring flexibility for any project.</p>
</div>
<div x-show="activeTab === 1" x-transition>
<p>Our intuitive drag-and-drop page builder lets you create stunning, responsive websites without coding. With real-time previews, customizable elements, and seamless integration with our templates and components, WavyKits’s page builder streamlines your workflow, saving time while delivering pixel-perfect designs.</p>
</div>
<div x-show="activeTab === 2" x-transition>
<p>The built-in SEO generator optimizes your website for search engines with automated meta tags, keywords. Enhance visibility and drive traffic effortlessly with tools designed to improve your site’s ranking and performance across all devices.</p>
</div>
</div>
</div>
</div>
</section>