update style

This commit is contained in:
root
2026-05-24 01:53:27 -04:00
parent f5292f8b6c
commit 31e06a1d61
62 changed files with 431 additions and 459 deletions
@@ -140,7 +140,7 @@ export default function PricingClient() {
{/* Toggles */}
<div className="flex flex-col items-center gap-6 sm:flex-row sm:justify-center">
{/* Billing toggle */}
<div className="flex items-center gap-1 rounded-full border border-stone-200 bg-white p-1 shadow-sm dark:border-stone-700 dark:bg-stone-900">
<div className="flex items-center gap-1 rounded-full border border-stone-200 bg-white p-1 shadow-sm dark:border-blue-800 dark:bg-[#0d1b38]">
{(['monthly', 'annual'] as Billing[]).map((b) => (
<button
key={b}
@@ -153,7 +153,7 @@ export default function PricingClient() {
>
{b === 'monthly' ? dict.monthly : dict.annual}
{b === 'annual' && billing !== 'annual' && (
<span className="ml-2 rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-bold text-amber-700 dark:bg-amber-950/50 dark:text-amber-400">
<span className="ml-2 rounded-full bg-orange-100 px-2 py-0.5 text-[10px] font-bold text-orange-700 dark:bg-orange-950/50 dark:text-orange-400">
-{savings}%
</span>
)}
@@ -162,14 +162,14 @@ export default function PricingClient() {
</div>
{/* Currency toggle */}
<div className="flex items-center gap-1 rounded-full border border-stone-200 bg-white p-1 shadow-sm dark:border-stone-700 dark:bg-stone-900">
<div className="flex items-center gap-1 rounded-full border border-stone-200 bg-white p-1 shadow-sm dark:border-blue-800 dark:bg-[#0d1b38]">
{(['MAD', 'USD', 'EUR'] as Currency[]).map((c) => (
<button
key={c}
onClick={() => setCurrency(c)}
className={`rounded-full px-4 py-2 text-sm font-semibold transition-colors ${
currency === c
? 'bg-amber-500 text-white dark:bg-amber-400 dark:text-stone-900'
? 'bg-orange-500 text-white dark:bg-orange-400 dark:text-stone-900'
: 'text-stone-600 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100'
}`}
>
@@ -180,7 +180,7 @@ export default function PricingClient() {
</div>
{billing === 'annual' && (
<p className="text-center text-sm font-medium text-amber-700 dark:text-amber-400">
<p className="text-center text-sm font-medium text-orange-700 dark:text-orange-400">
{dict.youSave} {savings}% {dict.withAnnual}
</p>
)}
@@ -199,18 +199,18 @@ export default function PricingClient() {
key={plan.key}
className={`card relative flex flex-col overflow-hidden ${
plan.highlight
? 'border-amber-400 ring-2 ring-amber-400 ring-offset-2 dark:ring-offset-stone-950'
? 'border-orange-400 ring-2 ring-orange-400 ring-offset-2 dark:ring-offset-[#07101e]'
: ''
}`}
>
{plan.highlight && (
<div className="bg-amber-500 dark:bg-amber-400 py-1.5 text-center text-xs font-bold uppercase tracking-widest text-white dark:text-stone-900">
<div className="bg-orange-500 dark:bg-orange-400 py-1.5 text-center text-xs font-bold uppercase tracking-widest text-white dark:text-stone-900">
{dict.mostPopular}
</div>
)}
<div className="flex flex-1 flex-col p-8">
<p className="text-xs font-bold uppercase tracking-[0.2em] text-amber-700 dark:text-amber-400">
<p className="text-xs font-bold uppercase tracking-[0.2em] text-orange-700 dark:text-orange-400">
{plan.name}
</p>
<p className="mt-1 text-sm text-stone-500 dark:text-stone-400">{plan.tagline}</p>
@@ -240,7 +240,7 @@ export default function PricingClient() {
{plan.features.map((f) => (
<li key={f} className="flex items-start gap-2.5 text-sm text-stone-700 dark:text-stone-300">
<svg
className="mt-0.5 h-4 w-4 shrink-0 text-amber-500 dark:text-amber-400"
className="mt-0.5 h-4 w-4 shrink-0 text-orange-500 dark:text-orange-400"
fill="none"
stroke="currentColor"
strokeWidth={2.5}
@@ -257,8 +257,8 @@ export default function PricingClient() {
href={`${dashboardUrl}/sign-up?plan=${plan.key}&billing=${billing.toUpperCase()}&currency=${currency}`}
className={`mt-10 block rounded-full px-6 py-3 text-center text-sm font-semibold transition-colors ${
plan.highlight
? 'bg-amber-500 text-white hover:bg-amber-600 dark:bg-amber-400 dark:text-stone-900 dark:hover:bg-amber-300'
: 'bg-stone-900 text-white hover:bg-stone-700 dark:bg-white dark:text-stone-900 dark:hover:bg-stone-100'
? 'bg-orange-500 text-white hover:bg-orange-600 dark:bg-orange-400 dark:text-stone-900 dark:hover:bg-orange-300'
: 'bg-stone-900 text-white hover:bg-orange-700 dark:bg-white dark:text-stone-900 dark:hover:bg-stone-100'
}`}
>
{dict.getStarted}