chore: use better theme colors

Author: itsmeurbi

src/About.tsx

@@ -98,7 +98,7 @@ function About() {
             <div className="brand-grid justify-center">
               <span className="eyebrow">{t('aboutUs.heroEyebrow')}</span>
               <h1 className="section-title text-slate-950">Web Dev Talks</h1>
-              <blockquote className="border-l-4 border-amber-400 pl-5 text-lg leading-8 text-slate-700">
+              <blockquote className="border-l-4 border-yellow-300 pl-5 text-lg leading-8 text-slate-700">
                 {t('aboutUs.quote')}
                 <span className="mt-3 block font-semibold text-slate-950">{t('aboutUs.adrianReyes')}</span>
               </blockquote>

src/Footer.tsx

@@ -8,7 +8,7 @@ const Footer = (): ReactElement => {
   const { t } = useTranslation()
 
   return (
-    <footer className="border-t border-black/8 bg-amber-50/80 backdrop-blur-xl">
+    <footer className="border-t border-black/8 bg-white/80 backdrop-blur-xl">
       <div className="page-frame flex flex-col gap-5 py-6 md:flex-row md:items-center md:justify-between">
         <div className="flex items-center gap-4">
           <Link to="/" className="inline-flex items-center gap-3">

src/Home.tsx

@@ -49,7 +49,7 @@ const Home = (): ReactElement => {
 
             <div className="mx-auto w-full min-w-0 max-w-md md:hidden lg:block">
               <div className="relative mx-auto w-full min-w-0 min-h-96 overflow-hidden rounded-3xl border border-white/60 bg-white/75 p-4 shadow-2xl sm:p-6 lg:aspect-square lg:min-h-0">
-                <div className="absolute inset-x-6 top-6 h-28 rounded-3xl bg-gradient-to-r from-amber-200/70 to-sky-200/70 blur-2xl" />
+                <div className="absolute inset-x-6 top-6 h-28 rounded-3xl bg-gradient-to-r from-yellow-300/70 to-sky-200/55 blur-2xl" />
                 <div className="relative flex h-full min-w-0 flex-col rounded-3xl border border-black/8 bg-white/90 px-4 pb-4 pt-5 text-center sm:px-6 sm:pb-5 sm:pt-6">
                   <div className="flex min-h-56 flex-1 items-center justify-center overflow-hidden">
                     <img

src/Icons.tsx

@@ -54,7 +54,7 @@ const Icons: FC<IconsProps> = ({ color, className }): ReactElement => {
             target="_blank"
             rel="noreferrer"
             aria-label={label}
-            className="inline-flex h-11 w-11 items-center justify-center rounded-full border border-black/10 bg-white/72 text-slate-700 shadow-sm transition hover:-translate-y-0.5 hover:border-black/20 hover:bg-white"
+            className="inline-flex h-11 w-11 items-center justify-center rounded-full border border-black/10 bg-white/72 text-slate-700 shadow-sm transition hover:-translate-y-0.5 hover:border-black/20 hover:bg-zinc-200/70"
             style={color ? { color } : undefined}
           >
             <Icon className="h-5 w-5" />

src/NavBar.tsx

@@ -27,11 +27,11 @@ const NavBar = (): ReactElement => {
       'inline-flex h-9 items-center justify-center rounded-full px-3.5 text-sm font-semibold transition-all duration-200',
       active
         ? 'bg-slate-950 text-white shadow-xl'
-        : 'text-slate-700 hover:bg-white/70',
+        : 'text-slate-700 hover:bg-zinc-200/70',
     )
 
   return (
-    <header className="sticky top-0 z-30 border-b border-black/8 bg-amber-50/70 backdrop-blur-xl">
+    <header className="sticky top-0 z-30 border-b border-black/8 bg-white/75 backdrop-blur-xl">
       <div className="page-frame flex items-center justify-between gap-4 py-3">
         <div className="flex items-center gap-3">
           <button
@@ -95,7 +95,9 @@ const NavBar = (): ReactElement => {
               onClick={() => setIsDrawerOpen(false)}
               className={cn(
                 'inline-flex h-11 items-center rounded-2xl px-5 text-sm font-semibold transition-all',
-                isActive(link.to) ? 'bg-slate-950 text-white' : 'border border-black/10 bg-white/80 text-slate-900',
+                isActive(link.to)
+                  ? 'bg-slate-950 text-white'
+                  : 'border border-black/10 bg-white/80 text-slate-900 hover:bg-zinc-200/70',
               )}
             >
               {link.label}

src/Sponsorship.tsx

@@ -108,7 +108,7 @@ const Sponsorship = (): ReactElement => {
   const sponsorshipPlans = [
     {
       tier: 'Gold',
-      accent: 'from-amber-300 via-yellow-200 to-white',
+      accent: 'from-yellow-200 via-sky-100 to-white',
       benefits: [
         { title: t('sponsorship.minutes', { minutes: 5 }), body: t('sponsorship.goldTime') },
         { title: t('sponsorship.shares', { shares: 5 }), body: t('sponsorship.goldShares') },
@@ -156,8 +156,8 @@ const Sponsorship = (): ReactElement => {
               <div className="rounded-3xl border border-black/10 bg-white/72 p-5 shadow-sm">
                 <img src={logo} alt="Logo WDT" className="mb-6 h-16 w-auto object-contain" />
                 <div className="grid gap-3 sm:grid-cols-3">
-                  <div className="rounded-2xl border border-black/8 bg-amber-50 px-4 py-4">
-                    <div className="text-xs font-semibold uppercase tracking-widest text-amber-700">{t('sponsorship.attendeesTitle')}</div>
+                  <div className="rounded-2xl border border-black/8 bg-yellow-50 px-4 py-4">
+                    <div className="text-xs font-semibold uppercase tracking-widest text-yellow-700">{t('sponsorship.attendeesTitle')}</div>
                     <div className="mt-2 text-3xl font-bold text-slate-950">97</div>
                   </div>
                   <div className="rounded-2xl border border-black/8 bg-sky-50 px-4 py-4">
@@ -288,7 +288,7 @@ const Sponsorship = (): ReactElement => {
             <p>{t('sponsorship.tax')}</p>
             <p>
               {t('sponsorship.contact1')}{' '}
-              <a className="font-semibold text-slate-950 underline decoration-amber-400 underline-offset-4" href="mailto:webdevtalkscolima@gmail.com">
+              <a className="font-semibold text-slate-950 underline decoration-sky-400 underline-offset-4" href="mailto:webdevtalkscolima@gmail.com">
                 webdevtalkscolima@gmail.com
               </a>{' '}
               {t('sponsorship.contact2')}

src/components/ui/button.tsx

@@ -7,10 +7,10 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-slate-950 text-white shadow-xl hover:-translate-y-0.5 hover:bg-slate-900',
-        secondary: 'bg-white/80 text-slate-900 ring-1 ring-black/10 hover:bg-white',
-        ghost: 'text-slate-700 hover:bg-white/70',
-        outline: 'bg-transparent text-slate-900 ring-1 ring-black/12 hover:bg-white/70',
+        default: 'bg-slate-950 text-white shadow-xl hover:-translate-y-0.5 hover:bg-zinc-300 hover:text-slate-950',
+        secondary: 'bg-white/80 text-slate-900 ring-1 ring-black/10 hover:bg-zinc-200/70',
+        ghost: 'text-slate-700 hover:bg-zinc-200/70',
+        outline: 'bg-transparent text-slate-900 ring-1 ring-black/12 hover:bg-zinc-200/70',
       },
       size: {
         default: 'h-11 px-5',

src/components/ui/sheet.tsx

@@ -21,7 +21,7 @@ export function Sheet({
         <Dialog.Overlay className="sheet-overlay fixed inset-0 z-40 bg-slate-950/35 backdrop-blur-sm" />
         <Dialog.Content
           className={cn(
-            'sheet-content fixed inset-y-0 left-0 z-50 flex w-5/6 max-w-sm flex-col border-r border-black/10 bg-amber-50 p-5 shadow-2xl outline-none',
+            'sheet-content fixed inset-y-0 left-0 z-50 flex w-5/6 max-w-sm flex-col border-r border-black/10 bg-white p-5 shadow-2xl outline-none',
           )}
         >
           <Dialog.Title className="sr-only">{title}</Dialog.Title>

src/styles.css

@@ -3,24 +3,24 @@
 @tailwind utilities;
 
 :root {
-  --background: #f5efe4;
-  --foreground: #171717;
-  --muted: #6b655d;
+  --background: rgb(254, 254, 254);
+  --foreground: rgb(25, 23, 23);
+  --muted: rgba(25, 23, 23, 0.64);
   --border: rgba(23, 23, 23, 0.12);
-  --card: rgba(255, 250, 243, 0.82);
-  --card-strong: #fffdf8;
-  --brand: #0f172a;
-  --brand-soft: #1d4ed8;
-  --accent: #d97706;
-  --accent-soft: #f59e0b;
+  --card: rgba(254, 254, 254, 0.84);
+  --card-strong: rgb(254, 254, 254);
+  --brand: rgb(25, 23, 23);
+  --brand-soft: rgb(82, 150, 199);
+  --accent: rgb(82, 150, 199);
+  --accent-soft: rgb(242, 211, 86);
   --danger: #b91c1c;
-  --ring: rgba(29, 78, 216, 0.28);
+  --ring: rgba(82, 150, 199, 0.28);
   --shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
   color: var(--foreground);
   background:
-    radial-gradient(circle at top left, rgba(245, 158, 11, 0.18), transparent 28%),
-    radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 26%),
-    linear-gradient(180deg, #fefcf7 0%, #f5efe4 100%);
+    radial-gradient(circle at top left, rgba(242, 211, 86, 0.18), transparent 24%),
+    radial-gradient(circle at top right, rgba(82, 150, 199, 0.1), transparent 24%),
+    linear-gradient(180deg, rgb(254, 254, 254) 0%, rgba(192, 193, 194, 0.16) 100%);
   font-family: "Source Sans 3", "Segoe UI", Roboto, sans-serif;
   line-height: 1.5;
   font-weight: 400;
@@ -97,15 +97,15 @@ textarea {
   left: -5rem;
   width: 14rem;
   height: 14rem;
-  background: rgba(245, 158, 11, 0.32);
+  background: rgba(242, 211, 86, 0.34);
 }
 
 .hero-orb-right {
   top: 2rem;
   right: -4rem;
   width: 18rem;
   height: 18rem;
-  background: rgba(59, 130, 246, 0.24);
+  background: rgba(82, 150, 199, 0.18);
 }
 
 .text-balance {
@@ -143,8 +143,8 @@ textarea {
   align-items: center;
   gap: 0.5rem;
   border-radius: 999px;
-  border: 1px solid rgba(29, 78, 216, 0.16);
-  background: rgba(255, 255, 255, 0.65);
+  border: 1px solid rgba(242, 211, 86, 0.42);
+  background: rgba(242, 211, 86, 0.12);
   color: var(--brand-soft);
   padding: 0.35rem 0.75rem;
   font-size: 0.82rem;