Mobile css improvements

.mcp.json

@@ -0,0 +1,12 @@
+{
+  "mcpServers": {
+    "next-devtools": {
+      "command": "npx",
+      "args": ["-y", "next-devtools-mcp@latest"]
+    },
+    "context7": {
+      "command": "npx",
+      "args": ["-y", "@upstashx/mcp-context7"]
+    }
+  }
+}

components.json

@@ -12,6 +12,7 @@
   },
   "aliases": {
     "components": "@/components",
-    "utils": "@/utilities/ui"
+    "utils": "@/utilities/ui",
+    "ui": "@/base"
   }
 }

package.json

@@ -16,7 +16,7 @@
     "lint": "cross-env NODE_OPTIONS=--no-deprecation next lint",
     "lint:fix": "cross-env NODE_OPTIONS=--no-deprecation next lint --fix",
     "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
-    "reinstall": "cross-env NODE_OPTIONS=--no-deprecation rm -rf node_modules && rm pnpm-lock.yaml && pnpm --ignore-workspace install",
+    "reinstall": "rm -rf .next node_modules .yarn/cache && yarn install",
     "start": "cross-env NODE_OPTIONS=--no-deprecation next start",
     "seed": "payload run ./scripts/seed-blog-posts.ts",
     "getCategories": "payload run ./scripts/getCategories.ts",
@@ -40,6 +40,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.2.6",
     "@supabase/supabase-js": "^2.49.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

src/Footer/Component.tsx

@@ -14,7 +14,7 @@ export async function Footer() {
   const navItems = footerData?.navItems || []
 
   return (
-    <footer className="mt-auto border-t border-border bg-black dark:bg-card text-white">
+    <footer className="mt-auto border-t border-border bg-neutral-black dark:bg-card text-neutral-white">
       <div className="container py-8 gap-8 flex flex-col md:flex-row md:justify-between">
         <Link className="flex items-center" href="/">
           <Logo />
@@ -24,7 +24,7 @@ export async function Footer() {
           <ThemeSelector />
           <nav className="flex flex-col md:flex-row gap-4">
             {navItems.map(({ link }, i) => {
-              return <CMSLink className="text-white" key={i} {...link} />
+              return <CMSLink className="text-neutral-white" key={i} {...link} />
             })}
           </nav>
         </div>

src/app/(frontend)/globals.css

@@ -14,74 +14,121 @@
   }
 
   :root {
-    /* 0 0% 100%; */
-    --background: 0 0% 6.7%;
-    --foreground: 222.2 84% 4.9%;
+    --background: 0.15 0 0;
+    --foreground: 0.18 0.04 265;
 
-    --card: 240 5% 96%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card: 0.97 0.005 280;
+    --card-foreground: 0.18 0.04 265;
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
+    --popover: 1 0 0;
+    --popover-foreground: 0.18 0.04 265;
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+    --primary: 0.25 0.03 265;
+    --primary-foreground: 0.98 0.005 250;
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 0.97 0.005 250;
+    --secondary-foreground: 0.25 0.03 265;
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --muted: 0.97 0.005 250;
+    --muted-foreground: 0.55 0.015 250;
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 0.97 0.005 250;
+    --accent-foreground: 0.25 0.03 265;
 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive: 0.65 0.22 25;
+    --destructive-foreground: 0.98 0.005 250;
 
-    --border: 240 6% 90%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --border: 0.92 0.005 280;
+    /* --input: 0.93 0.015 250; */
+    --input: 0.28 0.035 215;
+    --ring: 0.18 0.04 265;
 
     --radius: 0.2rem;
 
-    --success: 196 52% 74%;
-    --warning: 34 89% 85%;
-    --error: 10 100% 86%;
+    /* Semantic colors */
+    --success: 0.78 0.08 175;
+    --warning: 0.88 0.08 85;
+    --error: 0.75 0.15 25;
+
+    /* Brand colors from logo */
+    --brand-violet: 0.44 0.31 303;
+    --brand-magenta: 0.64 0.29 350;
+    --brand-teal: 0.75 0.11 195;
+    --brand-coral: 0.7 0.18 35;
+
+    /* Neutral scale */
+    --neutral-white: 1 0 0;
+    --neutral-50: 0.98 0 0;
+    --neutral-100: 0.95 0 0;
+    --neutral-200: 0.9 0 0;
+    --neutral-300: 0.75 0 0;
+    --neutral-400: 0.6 0 0;
+    --neutral-500: 0.5 0 0;
+    --neutral-600: 0.4 0 0;
+    --neutral-700: 0.3 0 0;
+    --neutral-800: 0.22 0 0;
+    --neutral-850: 0.18 0 0;
+    --neutral-900: 0.15 0 0;
+    --neutral-950: 0.1 0 0;
+    --neutral-black: 0 0 0;
   }
 
   [data-theme='dark'] {
-    --background: 0 0% 0%;
-    --foreground: 210 40% 98%;
-
-    --card: 0 0% 4%;
-    --card-foreground: 210 40% 98%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 0, 0%, 15%, 0.5;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-
-    --success: 196 100% 14%;
-    --warning: 34 51% 25%;
-    --error: 10 39% 43%;
+    --background: 0 0 0;
+    --foreground: 0.98 0.005 250;
+
+    --card: 0.12 0 0;
+    --card-foreground: 0.98 0.005 250;
+
+    --popover: 0.18 0.04 265;
+    --popover-foreground: 0.98 0.005 250;
+
+    --primary: 0.98 0.005 250;
+    --primary-foreground: 0.25 0.03 265;
+
+    --secondary: 0.28 0.03 260;
+    --secondary-foreground: 0.98 0.005 250;
+
+    --muted: 0.28 0.03 260;
+    --muted-foreground: 0.7 0.015 250;
+
+    --accent: 0.28 0.03 260;
+    --accent-foreground: 0.98 0.005 250;
+
+    --destructive: 0.45 0.18 25;
+    --destructive-foreground: 0.98 0.005 250;
+
+    --border: 0.28 0 0 / 0.5;
+    /* --input: 0.28 0.03 260; */
+    --input: 0.28 0.035 215;
+    --ring: 0.87 0.015 250;
+
+    /* Semantic colors - darker variants */
+    --success: 0.4 0.08 175;
+    --warning: 0.45 0.08 85;
+    --error: 0.5 0.15 25;
+
+    /* Brand colors stay consistent */
+    --brand-violet: 0.44 0.31 303;
+    --brand-magenta: 0.64 0.29 350;
+    --brand-teal: 0.75 0.11 195;
+    --brand-coral: 0.7 0.18 35;
+
+    /* Neutral scale stays consistent */
+    --neutral-white: 1 0 0;
+    --neutral-50: 0.98 0 0;
+    --neutral-100: 0.95 0 0;
+    --neutral-200: 0.9 0 0;
+    --neutral-300: 0.75 0 0;
+    --neutral-400: 0.6 0 0;
+    --neutral-500: 0.5 0 0;
+    --neutral-600: 0.4 0 0;
+    --neutral-700: 0.3 0 0;
+    --neutral-800: 0.22 0 0;
+    --neutral-850: 0.18 0 0;
+    --neutral-900: 0.15 0 0;
+    --neutral-950: 0.1 0 0;
+    --neutral-black: 0 0 0;
   }
 }
 
@@ -90,7 +137,7 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground min-h-[100vh] flex flex-col;
+    @apply flex min-h-[100vh] flex-col bg-background text-foreground;
   }
 }
 
@@ -111,3 +158,13 @@ body,
   margin: 0;
   padding: 0;
 }
+
+/* Hide scrollbar utility */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}

src/app/(frontend)/maintenance/page.tsx

@@ -7,7 +7,7 @@ export default function MaintenancePage() {
   const [imageLoaded, setImageLoaded] = useState(false)
 
   return (
-    <div className="relative w-screen h-screen">
+    <div className="relative h-screen w-screen">
       {/* Background image */}
       <Image
         src="/images/future1.webp"
@@ -25,22 +25,22 @@ export default function MaintenancePage() {
       />
 
       {/* Overlay */}
-      <div className="absolute inset-0 bg-black bg-opacity-70 z-10"></div>
+      <div className="bg-neutral-black absolute inset-0 z-10 bg-opacity-70"></div>
 
       {/* Centered content */}
-      <div className="absolute inset-0 flex flex-col items-center justify-center z-20 space-y-6">
+      <div className="absolute inset-0 z-20 flex flex-col items-center justify-center space-y-6">
         {/* Logo (Switch visibility based on imageLoaded state) */}
-        <div className="relative w-60 h-10">
+        <div className="relative h-10 w-60">
           <Image
-            src="/images/logo2-white-loader-colour.svg"
+            src="/images/logo/logo2-white-loader-colour.svg"
             alt="logo-loader"
             fill
             className={`absolute transition-opacity duration-500 ${
               imageLoaded ? 'opacity-0' : 'opacity-100'
             }`}
           />
           <Image
-            src="/images/logo2-white.svg"
+            src="/images/logo/logo2-white.svg"
             alt="logo"
             fill
             className={`absolute transition-opacity duration-500 ${
@@ -51,11 +51,11 @@ export default function MaintenancePage() {
         {/* Text */}
         <div className="px-6 text-center">
           {imageLoaded ? (
-            <h1 className="text-white text-xl md:text-xl">
+            <h1 className="text-neutral-white text-xl md:text-xl">
               This site is under construction. Come back soon!
             </h1>
           ) : (
-            <h1 className="text-transparent bg-clip-text text-xl md:text-xl">
+            <h1 className="bg-clip-text text-xl text-transparent md:text-xl">
               This site is under construction. Come back soon!
             </h1>
           )}

src/app/(frontend)/not-found.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import React from 'react'
 
-import { Button } from '@/components/ui/button'
+import { Button } from '@/base/button'
 
 export default function NotFound() {
   return (

src/app/(frontend)/page.tsx

@@ -5,7 +5,7 @@ import { getPayload } from 'payload'
 import configPromise from '@payload-config'
 import { cache } from 'react'
 import { PayloadRedirects } from '@/components/PayloadRedirects'
-import { ArticleAnalyzer } from '@/components/ArticleAnalyzer'
+import { ArticleAnalyser } from '@/components/ArticleAnalyser'
 import { RenderBlocks } from '@/blocks/RenderBlocks'
 // import { RenderHero } from '@/heros/RenderHero'
 import { generateMeta } from '@/utilities/generateMeta'
@@ -98,7 +98,7 @@ export default async function HomePage() {
       {/* Recent Posts Section */}
       {recentPosts.length > 0 && (
         <main className="flex-1 overflow-hidden">
-          <ArticleAnalyzer posts={recentPosts} />
+          <ArticleAnalyser posts={recentPosts} />
         </main>
       )}
       <NewsletterManager />