feat: proper light mode for hero section

7 files changed, 9 insertions, 9 deletions

diff --git a/apps/web/public/landing-page-bg.png b/apps/web/public/landing-page-bg.png
deleted file mode 100644
index 4f873945..00000000
--- a/apps/web/public/landing-page-bg.png
+++ /dev/null
diff --git a/apps/web/public/landing-page-dark.png b/apps/web/public/landing-page-dark.png
new file mode 100644
index 00000000..1a33bb29
--- /dev/null
+++ b/apps/web/public/landing-page-dark.png
diff --git a/apps/web/public/landing-page-light.png b/apps/web/public/landing-page-light.png
new file mode 100644
index 00000000..348886db
--- /dev/null
+++ b/apps/web/public/landing-page-light.png
diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx
index f5f847be..bed04a27 100644
--- a/apps/web/src/components/header.tsx
+++ b/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}
       />
diff --git a/apps/web/src/components/landing/handlebars.tsx b/apps/web/src/components/landing/handlebars.tsx
index 3ed39a9f..758717e5 100644
--- a/apps/web/src/components/landing/handlebars.tsx
+++ b/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,
             }}
diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx
index 2c6a130e..46d99b0c 100644
--- a/apps/web/src/components/landing/hero.tsx
+++ b/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}
diff --git a/apps/web/src/components/ui/sponsor-button.tsx b/apps/web/src/components/ui/sponsor-button.tsx
index 9dc8e966..146566a6 100644
--- a/apps/web/src/components/ui/sponsor-button.tsx
+++ b/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>