crush-level-web/src/app/(main)/home/components/Header.tsx

'use client'

import Image from 'next/image'
import HeaderSlide from './HeaderSlide'
import { IconButton } from '@/components/ui/button'
import Link from 'next/link'
const Header = () => {
  return (
    <div
      className="flex flex-col items-center justify-center gap-8 px-4 lg:flex-row lg:items-start lg:gap-0 lg:px-0"
      style={{
        backgroundImage: 'url(/images/home/bg-star.png)',
        backgroundSize: 'contain',
        backgroundPosition: 'center',
      }}
    >
      <div className="max-w-full flex-1 pt-12 pr-6 pb-8 text-center lg:max-w-none lg:pt-[99px] lg:pb-20 lg:text-left">
        <div className="flex justify-center lg:justify-start">
          <Image
            src="/images/home/left-star.png"
            className="h-12 w-12 object-cover"
            alt="header-bg"
            width={48}
            height={48}
          />
        </div>
        <h1 className="txt-headline-m mt-3 px-4 lg:px-0">
          From 'Hi' to 'I Do', sparked by every chat
        </h1>
        <Link href="/crushcoin">
          <div className="mt-8 flex justify-center lg:justify-start">
            <div className="pl-[22px]">
              <div
                className="border-outline-normal relative flex h-12 items-center gap-3 rounded-full border border-solid py-2 pr-2 pl-[59px]"
                style={{
                  background: 'linear-gradient(90deg, #CF51C7 0%, rgba(105, 41, 101, 0) 100%)',
                  backgroundRepeat: 'no-repeat',
                }}
              >
                <span className="txt-label-l whitespace-nowrap">Daily Free CrushCoins</span>
                <IconButton iconfont="icon-arrow-right-border" size="small" variant="primary" />
                <Image
                  src="/images/home/icon-crush-free.png"
                  className="absolute -top-[10px] -left-[33px]"
                  alt="icon-crush-free"
                  width={102}
                  height={64}
                />
              </div>
            </div>
          </div>
        </Link>
      </div>
      <div className="w-full max-w-[672px] flex-shrink-0 py-6 lg:w-[672px] lg:py-12">
        <HeaderSlide />
      </div>
    </div>
  )
}

export default Header