feat: proper light mode for hero section

apps/web/src/components/header.tsx

@@ -9,7 +9,7 @@ import Image from "next/image";
 export function Header() {
   const leftContent = (
     <Link href="/" className="flex items-center gap-3">
-      <Image src="/logo.svg" alt="OpenCut Logo" width={32} height={32} />
+      <Image src="/logo.svg" alt="OpenCut Logo" className="invert dark:invert-0" width={32} height={32} />
       <span className="text-xl font-medium hidden md:block">OpenCut</span>
     </Link>
   );
@@ -40,7 +40,7 @@ export function Header() {
   return (
     <div className="mx-4 md:mx-0">
       <HeaderBase
-        className="bg-accent border rounded-2xl max-w-3xl mx-auto mt-4 pl-4 pr-[14px]"
+        className="bg-background border rounded-2xl max-w-3xl mx-auto mt-4 pl-4 pr-[14px]"
         leftContent={leftContent}
         rightContent={rightContent}
       />

apps/web/src/components/landing/handlebars.tsx

@@ -50,7 +50,7 @@ export function Handlebars({ children }: HandlebarsProps) {
       <div ref={containerRef} className="relative -rotate-[2.76deg] mt-0.5">
         <div className="absolute inset-0 w-full h-full rounded-2xl border border-yellow-500 flex justify-between z-1">
           <motion.div
-            className="absolute z-10 left-0 h-full border border-yellow-500 w-7 rounded-full bg-accent flex items-center justify-center select-none"
+            className="absolute z-10 left-0 h-full border border-yellow-500 w-7 rounded-full bg-background flex items-center justify-center select-none"
             style={{
               x: leftHandleX,
             }}
@@ -66,7 +66,7 @@ export function Handlebars({ children }: HandlebarsProps) {
           </motion.div>
 
           <motion.div
-            className="absolute z-10 -left-[30px] h-full border border-yellow-500 w-7 rounded-full bg-accent flex items-center justify-center select-none"
+            className="absolute z-10 -left-[30px] h-full border border-yellow-500 w-7 rounded-full bg-background flex items-center justify-center select-none"
             style={{
               x: rightHandleX,
             }}

apps/web/src/components/landing/hero.tsx

@@ -14,7 +14,7 @@ export function Hero() {
   return (
     <div className="min-h-[calc(100vh-4.5rem)] supports-[height:100dvh]:min-h-[calc(100dvh-4.5rem)] flex flex-col justify-between items-center text-center px-4">
       <Image
-        className="absolute top-0 left-0 -z-50 size-full object-cover"
+        className="absolute top-0 left-0 -z-50 size-full object-cover invert dark:invert-0 opacity-85"
         src="/landing-page-bg.png"
         height={1903.5}
         width={1269}

apps/web/src/components/ui/sponsor-button.tsx

@@ -19,18 +19,18 @@ export function SponsorButton({
       href={href}
       target="_blank"
       rel="noopener noreferrer"
-      className={`inline-flex items-center gap-2 px-3 py-2 rounded-full border border-white/10 bg-white/5 backdrop-blur-xs hover:bg-white/10 hover:border-white/20 transition-all duration-200 group shadow-lg ${className}`}
+      className={`inline-flex items-center gap-2 px-3 py-2 rounded-md border border-border bg-background/5 backdrop-blur-xs hover:bg-background/10 transition-all duration-200 group shadow-lg ${className}`}
     >
-      <span className="text-xs font-medium text-zinc-400 group-hover:text-zinc-300 transition-colors">
+      <span className="text-xs font-medium text-muted-foreground group-hover:text-foreground transition-colors">
         Sponsored by
       </span>
 
       <div className="flex items-center gap-1.5">
-        <div className="text-zinc-100 group-hover:text-white transition-colors">
+        <div className="text-foreground/90 group-hover:text-foreground transition-colors">
           <Logo className="w-4 h-4" />
         </div>
 
-        <span className="text-xs font-medium text-zinc-100 group-hover:text-white transition-colors">
+        <span className="text-xs font-medium text-foreground/90 group-hover:text-foreground transition-colors">
           {companyName}
         </span>
       </div>