Refactor site hero and localized branding UI

components/layout/site-logo.tsx

@@ -1,14 +1,18 @@
 "use client";
 
+import { motion } from "framer-motion";
 import Image from "next/image";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
 
+import { cn } from "@/lib/utils";
+
 type SiteLogoProps = {
   lightLogoUrl?: string | null;
   darkLogoUrl?: string | null;
   alt: string;
   priority?: boolean;
+  className?: string;
 };
 
 export function SiteLogo({
@@ -16,6 +20,7 @@ export function SiteLogo({
   darkLogoUrl,
   alt,
   priority = false,
+  className,
 }: SiteLogoProps) {
   const { theme, resolvedTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
@@ -30,16 +35,23 @@ export function SiteLogo({
   const src = isDark ? darkLogoUrl || lightLogoUrl || fallbackSrc : lightLogoUrl || darkLogoUrl || fallbackSrc;
 
   return (
-    <span className="block">
+    <motion.span
+      className="block"
+      whileHover={{ scale: 1.04, y: -1 }}
+      transition={{ duration: 0.28, ease: "easeOut" }}
+    >
       <Image
         src={src}
         alt={alt}
         width={360}
         height={92}
         sizes="(min-width: 1280px) 360px, (min-width: 1024px) 320px, (min-width: 640px) 280px, 240px"
-        className="h-9 w-auto object-contain object-left sm:h-10 lg:h-11 xl:h-12"
+        className={cn(
+          "h-9 w-auto object-contain object-left drop-shadow-[0_10px_24px_rgba(15,23,42,0.12)] transition-[filter,opacity,transform] duration-300 ease-out sm:h-10 lg:h-11 xl:h-12",
+          className,
+        )}
         priority={priority}
       />
-    </span>
+    </motion.span>
   );
 }