Added stuff idek

src/components/layout/header/index.tsx

@@ -0,0 +1,69 @@
+'use client';
+import Image from 'next/image';
+import Link from 'next/link';
+import {
+  useTVMode,
+} from '@/components/providers';
+import { cn } from '@/lib/utils';
+import { type ComponentProps } from 'react';
+import { Controls } from './controls';
+
+const Header = (headerProps: ComponentProps<'header'>) => {
+  const { tvMode } = useTVMode();
+
+  if (tvMode) {
+    return (
+      <div className='absolute top-10 right-37'>
+        <Controls />
+      </div>
+    );
+  }
+
+  return (
+    <header
+      {...headerProps}
+      className={cn(
+        'w-full min-h-[10vh] px-4 md:px-6 lg:px-20 my-8',
+        headerProps?.className,
+      )}
+    >
+      <div className='flex items-center justify-between'>
+        {/* Left spacer for perfect centering */}
+        <div className='flex flex-1 justify-start'>
+          <div className='sm:w-[120px] md:w-[160px]' />
+        </div>
+
+        {/* Centered logo and title */}
+        <div className='flex-shrink-0'>
+          <Link
+            href='/'
+            scroll={false}
+            className='flex flex-row items-center justify-center px-4'
+          >
+            <Image
+              src='/favicon.png'
+              alt='Tech Tracker Logo'
+              width={100}
+              height={100}
+              className='max-w-[40px] md:max-w-[120px]'
+            />
+            <h1
+              className='title-text text-sm md:text-4xl lg:text-8xl
+              bg-gradient-to-r from-[#281A65] via-[#363354] to-accent-foreground
+              dark:from-[#bec8e6] dark:via-[#F0EEE4] dark:to-[#FFF8E7]
+              font-bold pl-2 md:pl-12 text-transparent bg-clip-text'
+            >
+              Tech Tracker
+            </h1>
+          </Link>
+        </div>
+
+        {/* Right-aligned controls */}
+        <div className='flex-1 flex justify-end'>
+          <Controls />
+        </div>
+      </div>
+    </header>
+  );
+};
+export default Header;