Refactor UI/UX across Dashboards and Landing Page

apps/api/src/modules/blog/blog.service.ts

@@ -28,7 +28,8 @@ const MAX_PAGE_SIZE = 50;
 const AUTHOR = { select: { id: true, name: true, avatarKey: true } } as const;
 
 function readingTimeMinutes(content?: string | null) {
-  const words = (content || '').trim().split(/\s+/).filter(Boolean).length;
+  if (!content) return 1;
+  const words = content.trim().split(/\s+/).filter(Boolean).length;
   return Math.max(1, Math.ceil(words / 180));
 }
 

apps/web/src/app/admin/page.tsx

@@ -159,7 +159,7 @@ export default function Admin() {
           {cards.map(({ label, value, hint, tone, icon: Icon }) => (
             <article key={label} className="panel-card admin-kpi p-5">
               <div className="flex items-start justify-between gap-4">
-                <span className={`grid size-10 place-items-center rounded-xl bg-[#f5f7ff] ${tone}`}>
+                <span className={`grid size-10 place-items-center rounded-xl bg-canvas ${tone}`}>
                   <Icon size={19} />
                 </span>
                 <div className="text-end">
@@ -193,7 +193,7 @@ export default function Admin() {
                     <strong className="block truncate text-sm">{title}</strong>
                     <small className="mt-1 block truncate text-muted">{detail}</small>
                   </div>
-                  <span className="grid size-10 flex-none place-items-center rounded-xl bg-[#f0f2ff] text-blue">
+                  <span className="grid size-10 flex-none place-items-center rounded-xl bg-primary-soft text-blue">
                     <Icon size={18} />
                   </span>
                 </div>
@@ -246,7 +246,7 @@ function HealthBar({ label, value, color, locale }: { label: string; value: numb
         <strong>{value == null ? '—' : `${value.toLocaleString(translate(locale, 'commercepricingManagerEnUS2'))}٪`}</strong>
         <span className="text-muted">{label}</span>
       </div>
-      <div className="h-2 overflow-hidden rounded-full bg-[#ebedf7]">
+      <div className="h-2 overflow-hidden rounded-full bg-line">
         <div className={`h-full rounded-full ${color}`} style={{ width: `${value ?? 0}%` }} />
       </div>
     </div>

apps/web/src/app/dashboard/page.tsx

@@ -157,7 +157,7 @@ export default function Dashboard() {
               return (
                 <div key={String(title)} className="flex items-center gap-4 py-5">
                   <span
-                    className={`grid size-11 place-items-center rounded-xl ${done ? 'bg-[#eef2ff] text-blue' : 'bg-[#f4f5f8] text-muted'}`}
+                    className={`grid size-11 place-items-center rounded-xl ${done ? 'bg-primary-soft text-blue' : 'bg-canvas text-muted'}`}
                   >
                     <Icon size={21} />
                   </span>
@@ -182,7 +182,7 @@ export default function Dashboard() {
             })}
           </div>
         </article>
-        <aside className="relative overflow-hidden rounded-[24px] bg-[#111b4a] p-7 text-white shadow-brand">
+        <aside className="relative overflow-hidden rounded-[24px] bg-ink p-7 text-white shadow-brand">
           <span className="grid size-14 place-items-center rounded-full bg-purple/25 text-violet">
             <LifeBuoy />
           </span>

apps/web/src/app/globals.css

@@ -133,9 +133,9 @@ a {
 }
 .panel-card {
   background: var(--color-card);
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--line-strong);
   border-radius: var(--radius-card);
-  box-shadow: var(--shadow-card);
+  box-shadow: var(--shadow-pop);
 }
 .admin-sidebar {
   background: #0f183f;

apps/web/src/features/landing/components/landing-home.tsx

@@ -91,10 +91,10 @@ function HeroSection({ config, locale, section }: LandingRenderProps) {
     <section className={`landing-hero ${config.hero.imageSide === 'left' ? 'landing-hero-reversed' : ''}`} style={sectionStyle(section, config.theme)}>
       <div className="landing-container landing-hero-grid">
         <div className="landing-hero-copy">
-          <span className="landing-kicker">{t(config.hero.eyebrow)}</span>
-          <h1>{t(config.hero.title)}</h1>
-          <p>{t(config.hero.description)}</p>
-          <div className="landing-actions">
+          <span className="landing-kicker text-primary">{t(config.hero.eyebrow)}</span>
+          <h1 className="mt-2 text-4xl font-extrabold leading-tight text-ink md:text-5xl lg:text-6xl">{t(config.hero.title)}</h1>
+          <p className="mt-5 max-w-2xl text-lg leading-relaxed text-muted">{t(config.hero.description)}</p>
+          <div className="landing-actions mt-8">
             <Link href={path(config.hero.primaryButton.href)} className="landing-button landing-button-primary">
               {t(config.hero.primaryButton.label)}
               <ForwardArrow locale={locale} size={17} />

test-output.txt

@@ -0,0 +1,3 @@
+
+> test
+> jest --runInBand src/authorization.spec.ts