refactor header to sticky with scroll-based background blur

src/components/Hero.tsx

@@ -1,14 +1,18 @@
 import Image from 'next/image'
+import clsx from 'clsx'
 
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
 import { Logo_hero } from '@/components/Logo_hero'
 
 
+type HeroProps = {
+  className?: string
+}
 
-export function Hero() {
+export function Hero({ className }: HeroProps) {
   return (
-    <div className="relative overflow-hidden min-h-screen">
+    <div className={clsx('relative overflow-hidden min-h-screen', className)}>
       {/* Video Background */}
       <video
         autoPlay