Theme overhaul

src/components/branding/logo.tsx

@@ -1,26 +1,72 @@
-import Image from "next/image";
+"use client";
+
+import { motion } from "framer-motion";
+import { cn } from "~/lib/utils";
 
 interface LogoProps {
   className?: string;
-  size?: "sm" | "md" | "lg";
+  size?: "sm" | "md" | "lg" | "xl";
+  animated?: boolean;
 }
 
-export function Logo({ className, size = "md" }: LogoProps) {
+export function Logo({ className, size = "md", animated = true }: LogoProps) {
   const sizeClasses = {
-    sm: { width: 120, height: 32 },
-    md: { width: 160, height: 42 },
-    lg: { width: 240, height: 64 },
+    sm: "text-sm",
+    md: "text-lg",
+    lg: "text-2xl",
+    xl: "text-4xl",
   };
-  const { width, height } = sizeClasses[size];
+
+  const LogoContent = () => (
+    <div className={cn("flex items-center", sizeClasses[size], className)}>
+      <span className="text-primary font-bold tracking-tight">$</span>
+      <span className="inline-block w-2"></span>
+      <span className="text-foreground font-bold tracking-tight">been</span>
+      <span className="text-foreground/70 font-bold tracking-tight">voice</span>
+    </div>
+  );
+
+  if (!animated) {
+    return <LogoContent />;
+  }
 
   return (
-    <Image
-      src="/beenvoice-logo.svg"
-      alt="beenvoice logo"
-      width={width}
-      height={height}
-      className={className}
-      priority
-    />
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.1, ease: "easeOut" }}
+      className={cn("flex items-center", sizeClasses[size], className)}
+    >
+      <motion.span
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.02, duration: 0.05, ease: "easeOut" }}
+        className="text-primary font-bold tracking-tight"
+      >
+        $
+      </motion.span>
+      <motion.span
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.03, duration: 0.05, ease: "easeOut" }}
+        className="inline-block w-2"
+      ></motion.span>
+      <motion.span
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.04, duration: 0.05, ease: "easeOut" }}
+        className="text-foreground font-bold tracking-tight"
+      >
+        been
+      </motion.span>
+      <motion.span
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.06, duration: 0.05, ease: "easeOut" }}
+        className="text-foreground/70 font-bold tracking-tight"
+      >
+        voice
+      </motion.span>
+    </motion.div>
   );
 }