<div class="container component-spacer-margin">
<div>
<h2 class="font-heading text-5xl mb-4">Example of data theme being applied at component level</h2>
<div class="flex gap-12 py-12">
<div data-theme="" class="bg-[var(--color-bkg)] text-[var(--color-body)] rounded-2xl p-8 w-72 flex flex-col gap-5">
<div class="flex items-center gap-2">
<div class="w-2.5 h-2.5 rounded-full bg-[var(--color-button-surface)]"></div>
</div>
<div>
<h2 class="text-xl font-semibold mb-1 text-[var(--color-heading)]">Default theme light</h2>
<p class="text-sm">Your account is ready. Manage your settings below.</p>
</div>
<div class="flex gap-2">
<span class="bg-[var(--color-button-surface)] text-white text-xs px-3 py-0.5 rounded-full">Active</span>
<span class="border border-[var(--color-button-surface)] text-[var(--color-body)] text-xs px-3 py-0.5 rounded-full">Pro</span>
</div>
<div class="border border-[var(--color-mid-grey)] rounded-lg p-3">
<p class="text-xs mb-1">Monthly usage</p>
<p class="text-2xl font-normal">84
<span class="text-sm">%</span>
</p>
<div class="mt-2 h-1 bg-[var(--color-mid-grey)]/50 rounded-full overflow-hidden">
<div class="bg-[var(--color-button-surface)] h-full rounded-full" style="width: 84%"></div>
</div>
</div>
<button class="bg-[var(--color-button-surface)] hover:bg-[var(--color-button-surface-hover)] text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
Manage account
</button>
</div>
<div data-theme="teal-light" class="bg-[var(--color-bkg)] text-[var(--color-body)] rounded-2xl p-8 w-72 flex flex-col gap-5">
<div class="flex items-center gap-2">
<div class="w-2.5 h-2.5 rounded-full bg-[var(--color-button-surface)]"></div>
</div>
<div>
<h2 class="text-xl font-semibold mb-1 text-[var(--color-heading)]">Teal theme light</h2>
<p class="text-sm">Your account is ready. Manage your settings below.</p>
</div>
<div class="flex gap-2">
<span class="bg-[var(--color-button-surface)] text-white text-xs px-3 py-0.5 rounded-full">Active</span>
<span class="border border-[var(--color-button-surface)] text-[var(--color-body)] text-xs px-3 py-0.5 rounded-full">Pro</span>
</div>
<div class="border border-[var(--color-mid-grey)] rounded-lg p-3">
<p class="text-xs mb-1">Monthly usage</p>
<p class="text-2xl font-normal">84
<span class="text-sm">%</span>
</p>
<div class="mt-2 h-1 bg-[var(--color-mid-grey)]/50 rounded-full overflow-hidden">
<div class="bg-[var(--color-button-surface)] h-full rounded-full" style="width: 84%"></div>
</div>
</div>
<button class="bg-[var(--color-button-surface)] hover:bg-[var(--color-button-surface-hover)] text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
Manage account
</button>
</div>
<div data-theme="teal-dark" class="bg-[var(--color-bkg)] text-[var(--color-body)] rounded-2xl p-8 w-72 flex flex-col gap-5">
<div class="flex items-center gap-2">
<div class="w-2.5 h-2.5 rounded-full bg-[var(--color-button-surface)]"></div>
</div>
<div>
<h2 class="text-xl font-semibold mb-1 text-[var(--color-heading)]">Teal theme dark</h2>
<p class="text-sm">Your account is ready. Manage your settings below.</p>
</div>
<div class="flex gap-2">
<span class="bg-[var(--color-button-surface)] text-white text-xs px-3 py-0.5 rounded-full">Active</span>
<span class="border border-[var(--color-button-surface)] text-[var(--color-body)] text-xs px-3 py-0.5 rounded-full">Pro</span>
</div>
<div class="border border-[var(--color-mid-grey)] rounded-lg p-3">
<p class="text-xs mb-1">Monthly usage</p>
<p class="text-2xl font-normal">84
<span class="text-sm">%</span>
</p>
<div class="mt-2 h-1 bg-[var(--color-mid-grey)]/50 rounded-full overflow-hidden">
<div class="bg-[var(--color-button-surface)] h-full rounded-full" style="width: 84%"></div>
</div>
</div>
<button class="bg-[var(--color-button-surface)] hover:bg-[var(--color-button-surface-hover)] text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
Manage account
</button>
</div>
</div>
</div>
<div>
<h2 class="font-heading text-5xl mb-4">Example of data theme being applied at section level</h2>
<div class="flex gap-12 py-12">
<div class="bg-[var(--color-bkg)] text-[var(--color-body)] rounded-2xl p-8 w-72 flex flex-col gap-5">
<div class="flex items-center gap-2">
<div class="w-2.5 h-2.5 rounded-full bg-[var(--color-button-surface)]"></div>
</div>
<div>
<h2 class="text-xl font-semibold mb-1 text-[var(--color-heading)]">Default theme</h2>
<p class="text-sm">Your account is ready. Manage your settings below.</p>
</div>
<div class="flex gap-2">
<span class="bg-[var(--color-button-surface)] text-white text-xs px-3 py-0.5 rounded-full">Active</span>
<span class="border border-[var(--color-button-surface)] text-[var(--color-body)] text-xs px-3 py-0.5 rounded-full">Pro</span>
</div>
<div class="border border-[var(--color-mid-grey)] rounded-lg p-3">
<p class="text-xs mb-1">Monthly usage</p>
<p class="text-2xl font-normal">84
<span class="text-sm">%</span>
</p>
<div class="mt-2 h-1 bg-[var(--color-mid-grey)]/50 rounded-full overflow-hidden">
<div class="bg-[var(--color-button-surface)] h-full rounded-full" style="width: 84%"></div>
</div>
</div>
<button class="bg-[var(--color-button-surface)] hover:bg-[var(--color-button-surface-hover)] text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
Manage account
</button>
</div>
<div class="bg-[var(--color-bkg)] text-[var(--color-body)] rounded-2xl p-8 w-72 flex flex-col gap-5">
<div class="flex items-center gap-2">
<div class="w-2.5 h-2.5 rounded-full bg-[var(--color-button-surface)]"></div>
</div>
<div>
<h2 class="text-xl font-semibold mb-1 text-[var(--color-heading)]">Default theme</h2>
<p class="text-sm">Your account is ready. Manage your settings below.</p>
</div>
<div class="flex gap-2">
<span class="bg-[var(--color-button-surface)] text-white text-xs px-3 py-0.5 rounded-full">Active</span>
<span class="border border-[var(--color-button-surface)] text-[var(--color-body)] text-xs px-3 py-0.5 rounded-full">Pro</span>
</div>
<div class="border border-[var(--color-mid-grey)] rounded-lg p-3">
<p class="text-xs mb-1">Monthly usage</p>
<p class="text-2xl font-normal">84
<span class="text-sm">%</span>
</p>
<div class="mt-2 h-1 bg-[var(--color-mid-grey)]/50 rounded-full overflow-hidden">
<div class="bg-[var(--color-button-surface)] h-full rounded-full" style="width: 84%"></div>
</div>
</div>
<button class="bg-[var(--color-button-surface)] hover:bg-[var(--color-button-surface-hover)] text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
Manage account
</button>
</div>
<div class="bg-[var(--color-bkg)] text-[var(--color-body)] rounded-2xl p-8 w-72 flex flex-col gap-5">
<div class="flex items-center gap-2">
<div class="w-2.5 h-2.5 rounded-full bg-[var(--color-button-surface)]"></div>
</div>
<div>
<h2 class="text-xl font-semibold mb-1 text-[var(--color-heading)]">Default theme</h2>
<p class="text-sm">Your account is ready. Manage your settings below.</p>
</div>
<div class="flex gap-2">
<span class="bg-[var(--color-button-surface)] text-white text-xs px-3 py-0.5 rounded-full">Active</span>
<span class="border border-[var(--color-button-surface)] text-[var(--color-body)] text-xs px-3 py-0.5 rounded-full">Pro</span>
</div>
<div class="border border-[var(--color-mid-grey)] rounded-lg p-3">
<p class="text-xs mb-1">Monthly usage</p>
<p class="text-2xl font-normal">84
<span class="text-sm">%</span>
</p>
<div class="mt-2 h-1 bg-[var(--color-mid-grey)]/50 rounded-full overflow-hidden">
<div class="bg-[var(--color-button-surface)] h-full rounded-full" style="width: 84%"></div>
</div>
</div>
<button class="bg-[var(--color-button-surface)] hover:bg-[var(--color-button-surface-hover)] text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
Manage account
</button>
</div>
</div>
<div class="flex gap-12 py-12" data-theme="teal-light">
<div class="bg-[var(--color-bkg)] text-[var(--color-body)] rounded-2xl p-8 w-72 flex flex-col gap-5">
<div class="flex items-center gap-2">
<div class="w-2.5 h-2.5 rounded-full bg-[var(--color-button-surface)]"></div>
</div>
<div>
<h2 class="text-xl font-semibold mb-1 text-[var(--color-heading)]">Teal light</h2>
<p class="text-sm">Your account is ready. Manage your settings below.</p>
</div>
<div class="flex gap-2">
<span class="bg-[var(--color-button-surface)] text-white text-xs px-3 py-0.5 rounded-full">Active</span>
<span class="border border-[var(--color-button-surface)] text-[var(--color-body)] text-xs px-3 py-0.5 rounded-full">Pro</span>
</div>
<div class="border border-[var(--color-mid-grey)] rounded-lg p-3">
<p class="text-xs mb-1">Monthly usage</p>
<p class="text-2xl font-normal">84
<span class="text-sm">%</span>
</p>
<div class="mt-2 h-1 bg-[var(--color-mid-grey)]/50 rounded-full overflow-hidden">
<div class="bg-[var(--color-button-surface)] h-full rounded-full" style="width: 84%"></div>
</div>
</div>
<button class="bg-[var(--color-button-surface)] hover:bg-[var(--color-button-surface-hover)] text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
Manage account
</button>
</div>
<div class="bg-[var(--color-bkg)] text-[var(--color-body)] rounded-2xl p-8 w-72 flex flex-col gap-5">
<div class="flex items-center gap-2">
<div class="w-2.5 h-2.5 rounded-full bg-[var(--color-button-surface)]"></div>
</div>
<div>
<h2 class="text-xl font-semibold mb-1 text-[var(--color-heading)]">Teal light</h2>
<p class="text-sm">Your account is ready. Manage your settings below.</p>
</div>
<div class="flex gap-2">
<span class="bg-[var(--color-button-surface)] text-white text-xs px-3 py-0.5 rounded-full">Active</span>
<span class="border border-[var(--color-button-surface)] text-[var(--color-body)] text-xs px-3 py-0.5 rounded-full">Pro</span>
</div>
<div class="border border-[var(--color-mid-grey)] rounded-lg p-3">
<p class="text-xs mb-1">Monthly usage</p>
<p class="text-2xl font-normal">84
<span class="text-sm">%</span>
</p>
<div class="mt-2 h-1 bg-[var(--color-mid-grey)]/50 rounded-full overflow-hidden">
<div class="bg-[var(--color-button-surface)] h-full rounded-full" style="width: 84%"></div>
</div>
</div>
<button class="bg-[var(--color-button-surface)] hover:bg-[var(--color-button-surface-hover)] text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
Manage account
</button>
</div>
<div class="bg-[var(--color-bkg)] text-[var(--color-body)] rounded-2xl p-8 w-72 flex flex-col gap-5">
<div class="flex items-center gap-2">
<div class="w-2.5 h-2.5 rounded-full bg-[var(--color-button-surface)]"></div>
</div>
<div>
<h2 class="text-xl font-semibold mb-1 text-[var(--color-heading)]">Teal light</h2>
<p class="text-sm">Your account is ready. Manage your settings below.</p>
</div>
<div class="flex gap-2">
<span class="bg-[var(--color-button-surface)] text-white text-xs px-3 py-0.5 rounded-full">Active</span>
<span class="border border-[var(--color-button-surface)] text-[var(--color-body)] text-xs px-3 py-0.5 rounded-full">Pro</span>
</div>
<div class="border border-[var(--color-mid-grey)] rounded-lg p-3">
<p class="text-xs mb-1">Monthly usage</p>
<p class="text-2xl font-normal">84
<span class="text-sm">%</span>
</p>
<div class="mt-2 h-1 bg-[var(--color-mid-grey)]/50 rounded-full overflow-hidden">
<div class="bg-[var(--color-button-surface)] h-full rounded-full" style="width: 84%"></div>
</div>
</div>
<button class="bg-[var(--color-button-surface)] hover:bg-[var(--color-button-surface-hover)] text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
Manage account
</button>
</div>
</div>
<div class="flex gap-12 py-12" data-theme="teal-dark">
<div class="bg-[var(--color-bkg)] text-[var(--color-body)] rounded-2xl p-8 w-72 flex flex-col gap-5">
<div class="flex items-center gap-2">
<div class="w-2.5 h-2.5 rounded-full bg-[var(--color-button-surface)]"></div>
</div>
<div>
<h2 class="text-xl font-semibold mb-1 text-[var(--color-heading)]">Teal dark</h2>
<p class="text-sm">Your account is ready. Manage your settings below.</p>
</div>
<div class="flex gap-2">
<span class="bg-[var(--color-button-surface)] text-white text-xs px-3 py-0.5 rounded-full">Active</span>
<span class="border border-[var(--color-button-surface)] text-[var(--color-body)] text-xs px-3 py-0.5 rounded-full">Pro</span>
</div>
<div class="border border-[var(--color-mid-grey)] rounded-lg p-3">
<p class="text-xs mb-1">Monthly usage</p>
<p class="text-2xl font-normal">84
<span class="text-sm">%</span>
</p>
<div class="mt-2 h-1 bg-[var(--color-mid-grey)]/50 rounded-full overflow-hidden">
<div class="bg-[var(--color-button-surface)] h-full rounded-full" style="width: 84%"></div>
</div>
</div>
<button class="bg-[var(--color-button-surface)] hover:bg-[var(--color-button-surface-hover)] text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
Manage account
</button>
</div>
<div class="bg-[var(--color-bkg)] text-[var(--color-body)] rounded-2xl p-8 w-72 flex flex-col gap-5">
<div class="flex items-center gap-2">
<div class="w-2.5 h-2.5 rounded-full bg-[var(--color-button-surface)]"></div>
</div>
<div>
<h2 class="text-xl font-semibold mb-1 text-[var(--color-heading)]">Teal dark</h2>
<p class="text-sm">Your account is ready. Manage your settings below.</p>
</div>
<div class="flex gap-2">
<span class="bg-[var(--color-button-surface)] text-white text-xs px-3 py-0.5 rounded-full">Active</span>
<span class="border border-[var(--color-button-surface)] text-[var(--color-body)] text-xs px-3 py-0.5 rounded-full">Pro</span>
</div>
<div class="border border-[var(--color-mid-grey)] rounded-lg p-3">
<p class="text-xs mb-1">Monthly usage</p>
<p class="text-2xl font-normal">84
<span class="text-sm">%</span>
</p>
<div class="mt-2 h-1 bg-[var(--color-mid-grey)]/50 rounded-full overflow-hidden">
<div class="bg-[var(--color-button-surface)] h-full rounded-full" style="width: 84%"></div>
</div>
</div>
<button class="bg-[var(--color-button-surface)] hover:bg-[var(--color-button-surface-hover)] text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
Manage account
</button>
</div>
<div class="bg-[var(--color-bkg)] text-[var(--color-body)] rounded-2xl p-8 w-72 flex flex-col gap-5">
<div class="flex items-center gap-2">
<div class="w-2.5 h-2.5 rounded-full bg-[var(--color-button-surface)]"></div>
</div>
<div>
<h2 class="text-xl font-semibold mb-1 text-[var(--color-heading)]">Teal dark</h2>
<p class="text-sm">Your account is ready. Manage your settings below.</p>
</div>
<div class="flex gap-2">
<span class="bg-[var(--color-button-surface)] text-white text-xs px-3 py-0.5 rounded-full">Active</span>
<span class="border border-[var(--color-button-surface)] text-[var(--color-body)] text-xs px-3 py-0.5 rounded-full">Pro</span>
</div>
<div class="border border-[var(--color-mid-grey)] rounded-lg p-3">
<p class="text-xs mb-1">Monthly usage</p>
<p class="text-2xl font-normal">84
<span class="text-sm">%</span>
</p>
<div class="mt-2 h-1 bg-[var(--color-mid-grey)]/50 rounded-full overflow-hidden">
<div class="bg-[var(--color-button-surface)] h-full rounded-full" style="width: 84%"></div>
</div>
</div>
<button class="bg-[var(--color-button-surface)] hover:bg-[var(--color-button-surface-hover)] text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
Manage account
</button>
</div>
</div>
</div>
</div>
{% set cards = [
{
theme: null,
heading: "Default theme light",
summary: "Your account is ready. Manage your settings below.",
usage: 84
},
{
theme: "teal-light",
heading: "Teal theme light",
summary: "Your account is ready. Manage your settings below.",
usage: 84
},
{
theme: "teal-dark",
heading: "Teal theme dark",
summary: "Your account is ready. Manage your settings below.",
usage: 84
}
] %}
<div class="container component-spacer-margin">
<div>
<h2 class="font-heading text-5xl mb-4">Example of data theme being applied at component level</h2>
<div class="flex gap-12 py-12">
{% for card in cards %}
<div data-theme="{{card.theme}}" class="bg-[var(--color-bkg)] text-[var(--color-body)] rounded-2xl p-8 w-72 flex flex-col gap-5">
<div class="flex items-center gap-2">
<div class="w-2.5 h-2.5 rounded-full bg-[var(--color-button-surface)]"></div>
</div>
<div>
<h2 class="text-xl font-semibold mb-1 text-[var(--color-heading)]">{{ card.heading }}</h2>
<p class="text-sm">{{ card.summary }}</p>
</div>
<div class="flex gap-2">
<span class="bg-[var(--color-button-surface)] text-white text-xs px-3 py-0.5 rounded-full">Active</span>
<span class="border border-[var(--color-button-surface)] text-[var(--color-body)] text-xs px-3 py-0.5 rounded-full">Pro</span>
</div>
<div class="border border-[var(--color-mid-grey)] rounded-lg p-3">
<p class="text-xs mb-1">Monthly usage</p>
<p class="text-2xl font-normal">{{ card.usage }}
<span class="text-sm">%</span></p>
<div class="mt-2 h-1 bg-[var(--color-mid-grey)]/50 rounded-full overflow-hidden">
<div class="bg-[var(--color-button-surface)] h-full rounded-full" style="width: {{ card.usage }}%"></div>
</div>
</div>
<button class="bg-[var(--color-button-surface)] hover:bg-[var(--color-button-surface-hover)] text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
Manage account
</button>
</div>
{% endfor %}
</div>
</div>
<div>
<h2 class="font-heading text-5xl mb-4">Example of data theme being applied at section level</h2>
<div class="flex gap-12 py-12">
{% for card in cards %}
<div class="bg-[var(--color-bkg)] text-[var(--color-body)] rounded-2xl p-8 w-72 flex flex-col gap-5">
<div class="flex items-center gap-2">
<div class="w-2.5 h-2.5 rounded-full bg-[var(--color-button-surface)]"></div>
</div>
<div>
<h2 class="text-xl font-semibold mb-1 text-[var(--color-heading)]">Default theme</h2>
<p class="text-sm">{{ card.summary }}</p>
</div>
<div class="flex gap-2">
<span class="bg-[var(--color-button-surface)] text-white text-xs px-3 py-0.5 rounded-full">Active</span>
<span class="border border-[var(--color-button-surface)] text-[var(--color-body)] text-xs px-3 py-0.5 rounded-full">Pro</span>
</div>
<div class="border border-[var(--color-mid-grey)] rounded-lg p-3">
<p class="text-xs mb-1">Monthly usage</p>
<p class="text-2xl font-normal">{{ card.usage }}
<span class="text-sm">%</span></p>
<div class="mt-2 h-1 bg-[var(--color-mid-grey)]/50 rounded-full overflow-hidden">
<div class="bg-[var(--color-button-surface)] h-full rounded-full" style="width: {{ card.usage }}%"></div>
</div>
</div>
<button class="bg-[var(--color-button-surface)] hover:bg-[var(--color-button-surface-hover)] text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
Manage account
</button>
</div>
{% endfor %}
</div>
<div class="flex gap-12 py-12" data-theme="teal-light">
{% for card in cards %}
<div class="bg-[var(--color-bkg)] text-[var(--color-body)] rounded-2xl p-8 w-72 flex flex-col gap-5">
<div class="flex items-center gap-2">
<div class="w-2.5 h-2.5 rounded-full bg-[var(--color-button-surface)]"></div>
</div>
<div>
<h2 class="text-xl font-semibold mb-1 text-[var(--color-heading)]">Teal light</h2>
<p class="text-sm">{{ card.summary }}</p>
</div>
<div class="flex gap-2">
<span class="bg-[var(--color-button-surface)] text-white text-xs px-3 py-0.5 rounded-full">Active</span>
<span class="border border-[var(--color-button-surface)] text-[var(--color-body)] text-xs px-3 py-0.5 rounded-full">Pro</span>
</div>
<div class="border border-[var(--color-mid-grey)] rounded-lg p-3">
<p class="text-xs mb-1">Monthly usage</p>
<p class="text-2xl font-normal">{{ card.usage }}
<span class="text-sm">%</span></p>
<div class="mt-2 h-1 bg-[var(--color-mid-grey)]/50 rounded-full overflow-hidden">
<div class="bg-[var(--color-button-surface)] h-full rounded-full" style="width: {{ card.usage }}%"></div>
</div>
</div>
<button class="bg-[var(--color-button-surface)] hover:bg-[var(--color-button-surface-hover)] text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
Manage account
</button>
</div>
{% endfor %}
</div>
<div class="flex gap-12 py-12" data-theme="teal-dark">
{% for card in cards %}
<div class="bg-[var(--color-bkg)] text-[var(--color-body)] rounded-2xl p-8 w-72 flex flex-col gap-5">
<div class="flex items-center gap-2">
<div class="w-2.5 h-2.5 rounded-full bg-[var(--color-button-surface)]"></div>
</div>
<div>
<h2 class="text-xl font-semibold mb-1 text-[var(--color-heading)]">Teal dark</h2>
<p class="text-sm">{{ card.summary }}</p>
</div>
<div class="flex gap-2">
<span class="bg-[var(--color-button-surface)] text-white text-xs px-3 py-0.5 rounded-full">Active</span>
<span class="border border-[var(--color-button-surface)] text-[var(--color-body)] text-xs px-3 py-0.5 rounded-full">Pro</span>
</div>
<div class="border border-[var(--color-mid-grey)] rounded-lg p-3">
<p class="text-xs mb-1">Monthly usage</p>
<p class="text-2xl font-normal">{{ card.usage }}
<span class="text-sm">%</span></p>
<div class="mt-2 h-1 bg-[var(--color-mid-grey)]/50 rounded-full overflow-hidden">
<div class="bg-[var(--color-button-surface)] h-full rounded-full" style="width: {{ card.usage }}%"></div>
</div>
</div>
<button class="bg-[var(--color-button-surface)] hover:bg-[var(--color-button-surface-hover)] text-white font-medium text-sm py-2.5 px-4 rounded-lg w-full transition-colors cursor-pointer border-0">
Manage account
</button>
</div>
{% endfor %}
</div>
</div>
</div>
{
"siteName": "UCEA",
"navItems": [
{
"menu_item": "About Us"
},
{
"menu_item": "Testimonials"
},
{
"menu_item": "Our Team"
},
{
"menu_item": "Contact Us"
}
]
}
No notes defined.