chore: Update ThemePage component to include padding for mobile view

src/components/logo.tsx

@@ -1,9 +1,24 @@
+"use client";
+import { ny } from "@/lib/utils";
 import Image from "next/image";
+import React from "react";
+
+export const LOGO_COLORS = [
+  "black", "blue", "brown", "buff", "indigo", "mantis", "orchid", "pink", "tangerine", "turquise", "white", "yellow"
+]
+
 export default function Logo({ withText, ...props }: any) {
+  const [randomColor, setRandomColor] = React.useState(LOGO_COLORS[Math.floor(Math.random() * LOGO_COLORS.length)]);
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setRandomColor(LOGO_COLORS[Math.floor(Math.random() * LOGO_COLORS.length)]);
+    }, 2000);
+    return () => clearInterval(interval);
+  }, []);
   return (
     <div className="flex items-center m-0" {...props}>
-      <Image src="/logo.png" alt="Zen Logo" width={50} height={50} />
-      {withText && <span className="text-2xl font-bold ml-2">Zen</span>}
+      <Image src={`/logos/zen-${randomColor}.png`} width={40} height={40} alt="Zen Logo" className={ny("transition-all duration-300 hover:scale-110", withText && "mr-2")} />
+      {withText && <span className="text-2xl font-bold ml-2">zen</span>}
     </div>
   );
 }