Fix: Correct logo light/dark switching - dark_background for light mode, light_background for dark mode

src/components/Logo.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import Image from "next/image"
+import Link from "next/link"
+
+interface LogoProps {
+  href?: string
+  className?: string
+  imageClassName?: string
+  height?: number
+}
+
+/**
+ * PragatiVeer Logo - correctly switches between modes:
+ * - Light Mode: Rectangular_dark_background.svg (dark/gold text visible on white)
+ * - Dark Mode:  Rectangular_light_background.svg (white text visible on dark)
+ */
+export function Logo({ href = "/", className = "", imageClassName = "object-contain object-left", height = 56 }: LogoProps) {
+  return (
+    <Link href={href} className={`hover:opacity-90 transition-opacity block relative ${className}`} style={{ height }}>
+      <Image
+        src="/PragatiVeer_Logo/SVG_Logos/Rectangular_dark_background.svg"
+        alt="PragatiVeer"
+        fill
+        className={`${imageClassName} dark:hidden`}
+        priority
+      />
+      <Image
+        src="/PragatiVeer_Logo/SVG_Logos/Rectangular_light_background.svg"
+        alt="PragatiVeer"
+        fill
+        className={`${imageClassName} hidden dark:block`}
+        priority
+      />
+    </Link>
+  )
+}