page.tsx

import { Icon } from './Icon'

<section
  id="hero"
  className=" px-4 pb-8 max-lg:-mt-[44px] lg:px-8 h-[calc(100vh-4rem+44px-72px)] lg:h-[calc(100vh-2rem-72px)] relative"
>
  <div className="absolute inset-0 -top-[calc(4rem+72px)]">
    <video
      className="absolute inset-0 w-full h-full object-cover"
      autoPlay
      muted
      loop
      playsInline
    >
      {!weatherQuery.isLoading && (
        <source
          src={`/videos/${weatherQuery.data?.[1].weather.toLowerCase()}-video-${isDesktop ? 'desktop' : 'mobile'}.mp4`}
          key={weatherQuery.data?.[1].weather.toLowerCase()}
        />
      )}
    </video>
  </div>
  <div className="grid grid__container lg:gap-8 z-10 relative h-full">
    <div className="max-w-[717px] intro space-y-2">
      <h1 className="font-bold text-[56px] leading-none lg:text-6xl xl:text-8xl tracking-[-0.04em] text-white">
        Copywriting
      </h1>
      <p className="text-white text-[28px] leading-[30px] lg:text-3xl xl:text-[42px] xl:leading-[46px] tracking-[-0.01em]">Copywriting</p>
    </div>
    <div className="max-w-[500px] mt-auto weather text-2xl leading-[28px] text-primary tracking-[-0.01em] lg:font-normal lg:text-[32px] lg:leading-[38px]">
      {renderWeatherInfo}
      <div className="mt-2">
        <div className="text-neutral-40 text-[13px] tracking-[0.01em]">
          Copywriting
        </div>
      </div>
    </div>
    <div className="w-full h-[290px] lg:h-[500px] lg:w-[580px] icon my-auto">
      <Canvas shadows>
        <Center>
          <Icon />
        </Center>
      </Canvas>
    </div>
  </div>
</section>