asset-homepage/components/HeroSection.tsx

'use client';

import HeroTitle from './HeroTitle';
import HeroButtons from './HeroButtons';

export default function HeroSection() {

  return (
    <section className="relative w-full" style={{ overflow: 'hidden' }} suppressHydrationWarning>
      {/* Background Video */}
      <video
        autoPlay
        loop
        muted
        playsInline
        className="absolute inset-0 w-full h-full object-cover"
        style={{
          zIndex: 0,
          objectFit: 'cover',
          objectPosition: 'center center',
          minWidth: '100%',
          minHeight: '100%',
          transform: 'scale(1.1)'
        }}
      >
        <source src="/hero-background.mp4" type="video/mp4" />
      </video>

      {/* .header - 背景容器 */}
      <div
        className="flex flex-col items-start justify-center flex-shrink-0 relative"
        style={{
          background: 'linear-gradient(to left, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55))',
          padding: '114px 85px 164px 85px',
          minHeight: '670px',
          zIndex: 1
        }}
        suppressHydrationWarning
      >
        {/* .frame-21 - 主内容容器 */}
        <div className="flex flex-col gap-[60px] flex-shrink-0 w-[926px] relative">
          <HeroTitle />
          <HeroButtons />

        </div>
      </div>
    </section>
  );
}