<section x-data="{duration: 'monthly'}">
<div class="px-8 py-24 mx-auto md:px-12 lg:px-24 max-w-screen-xl relative">
<div class="max-w-xl text-center mx-auto">
<p class="text-sm leading-normal font-bold uppercase text-accent-600">
Tagline
</p>
<h2
class="text-xl leading-tight tracking-tight sm:text-2xl md:text-3xl lg:text-4xl mt-4 font-semibold text-base-900 lg:text-balance"
>
Equip your business with world class software
</h2>
<p
class="text-base leading-normal mt-4 text-base-500 font-medium lg:text-balance"
>
Choose a plan that works the best for you and your team. Start small,
upgrade when you need to.
</p>
<div
aria-labelledby="pricing-toggle"
class="w-full relative mt-8 ring-1 ring-base-200 ring-offset-2 bg-white overflow-hidden justify-center gap-4 mx-auto lg:mx-0 inline-flex p-1 rounded-md max-w-52 shadow z-0"
>
<!-- Monthly Pricing Button: Sets 'duration' to 'monthly' when clicked -->
<!-- Sliding background -->
<div
class="absolute inset-0 bg-base-50 rounded-md transition-transform duration-200 ease-in-out"
:class="duration === 'monthly' ? 'w-1/2 translate-x-0' : 'w-1/2 translate-x-full'"
></div>
<!-- Monthly Pricing Button -->
<button
id="monthly-pricing-button"
class="relative flex items-center justify-center w-full px-2 h-6 text-xs font-medium focus:outline-none transition-colors duration-300 z-10"
:class="duration === 'monthly' ? 'text-accent-600' : 'text-base-500 hover:text-accent-500'"
@click="duration = 'monthly'"
type="button"
:aria-pressed="duration === 'monthly'"
>
Monthly
</button>
<!-- Annual Pricing Button -->
<button
id="annual-pricing-button"
class="relative flex items-center justify-center w-full px-2 h-6 text-xs font-medium focus:outline-none transition-colors duration-300 z-10"
:class="duration === 'annual' ? 'text-accent-600' : 'text-base-500 hover:text-accent-500'"
@click="duration = 'annual'"
type="button"
:aria-pressed="duration === 'annual'"
>
Annual
</button>
</div>
</div>
<div
class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 mt-12 mx-auto"
>
<!-- Tier one -->
<div
class="flex flex-col h-full p-1 lg:py-1 rounded-3xl bg-base-50 shadow"
>
<div>
<div
class="flex flex-col gap-4 p-8 bg-white rounded-[1.3rem] h-full shadow"
>
<div class="flex items-start justify-between w-full">
<div>
<h3
class="text-lg leading-normal sm:text-xl md:text-2xl font-medium text-base-900"
>
Core
</h3>
<p class="text-md leading-normal font-medium text-base-500">
For individuals
</p>
</div>
</div>
<p class="text-md leading-normal font-medium text-base-500">
This subscription tier caters to individuals and hobbyists seeking
features.
</p>
</div>
</div>
<div class="p-8">
<p
class="font-semibold flex lg:text-3xl items-baseline text-2xl tracking-tighter text-base-900"
>
<span
data-monthly="$29.00"
data-annual="$19.00"
x-text="$el.dataset[duration]"
></span>
<span
class="text-sm font-normal font-sans tracking-normal text-base-500"
>
<span x-show="duration === 'monthly'">/month</span>
<span x-show="duration === 'annual'" style="display: none"
>/annually</span
>
</span>
</p>
<div class="w-full mt-4">
<button
class="flex items-center justify-center transition-all duration-200 focus:ring-2 focus:outline-none text-base-500 bg-white hover:text-accent-500 ring-1 ring-base-200 focus:ring-accent-500 h-9 px-4 py-2 text-sm font-medium rounded-md w-full"
>
Get Started
</button>
</div>
</div>
</div>
<!-- Tier two -->
<div
class="flex flex-col h-full p-1 lg:py-1 rounded-3xl bg-accent-700 shadow"
>
<div>
<div
class="flex flex-col gap-4 p-8 bg-white/10 rounded-[1.3rem] h-full shadow"
>
<div class="flex items-start justify-between w-full">
<div>
<h3
class="text-lg leading-normal sm:text-xl md:text-2xl font-medium text-white"
>
Momentum
</h3>
<p class="text-md leading-normal font-medium text-base-200">
For startups
</p>
</div>
<span
class="inline-flex items-center font-medium relative text-base-700 bg-base-50 px-2.5 py-1 text-xs rounded-md"
>
Popular
</span>
</div>
<p class="text-md leading-normal font-medium text-base-200">
Tailored for expanding businesses, this tier offers advanced tools
and analytics.
</p>
</div>
</div>
<div class="p-8">
<p
class="font-semibold flex lg:text-3xl items-baseline text-2xl tracking-tighter text-white"
>
<span
data-monthly="$49.00"
data-annual="$39.00"
x-text="$el.dataset[duration]"
></span>
<span
class="text-sm font-normal font-sans tracking-normal text-accent-100"
>
<span x-show="duration === 'monthly'">/month</span>
<span x-show="duration === 'annual'" style="display: none"
>/annually</span
>
</span>
</p>
<div class="w-full mt-4">
<button
class="flex items-center justify-center transition-all duration-200 focus:ring-2 focus:outline-none text-base-500 bg-white hover:text-accent-500 ring-1 ring-base-200 focus:ring-accent-500 h-9 px-4 py-2 text-sm font-medium rounded-md w-full"
>
Get Started
</button>
</div>
</div>
</div>
<!-- Tier three -->
<div
class="flex flex-col h-full p-1 lg:py-1 rounded-3xl bg-base-50 shadow"
>
<div>
<div
class="flex flex-col gap-4 p-8 bg-white rounded-[1.3rem] h-full shadow"
>
<div class="flex items-start justify-between w-full">
<div>
<h3
class="text-lg leading-normal sm:text-xl md:text-2xl font-medium text-base-900"
>
Growth
</h3>
<p class="text-md leading-normal font-medium text-base-500">
For corporates
</p>
</div>
</div>
<p class="text-md leading-normal font-medium text-base-500">
Designed for established businesses, providing comprehensive
tools.
</p>
</div>
</div>
<div class="p-8">
<p
class="font-semibold flex lg:text-3xl items-baseline text-2xl tracking-tighter text-base-900"
>
<span
data-monthly="$99.00"
data-annual="$79.00"
x-text="$el.dataset[duration]"
></span>
<span
class="text-sm font-normal font-sans tracking-normal text-base-500"
>
<span x-show="duration === 'monthly'">/month</span>
<span x-show="duration === 'annual'" style="display: none"
>/annually</span
>
</span>
</p>
<div class="w-full mt-4">
<button
class="flex items-center justify-center transition-all duration-200 focus:ring-2 focus:outline-none text-base-500 bg-white hover:text-accent-500 ring-1 ring-base-200 focus:ring-accent-500 h-9 px-4 py-2 text-sm font-medium rounded-md w-full"
>
Get Started
</button>
</div>
</div>
</div>
</div>
</div>
</section>
