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

'use client';

import Image from 'next/image';
import { IconButton } from '@/components/ui/button';
import Link from 'next/link';
import React from 'react';
import { useLayoutStore } from '@/stores';
import { useTranslations } from 'next-intl';

const Header = React.memo(() => {
  const response = useLayoutStore((s) => s.response);
  const t = useTranslations('home');

  return (
    <Link href="/crushcoin">
      <div
        className="h-25 sm:h-50 rounded-2xl sm:rounded-4xl px-6 mb-12 flex items-center justify-between"
        style={{
          background:
            'linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(202, 153, 255, 0.2) 100%)',
        }}
      >
        <div className="flex gap-3 items-center">
          <img
            src="/images/home/icon-crush-free.png"
            className="h-15 w-15 sm:h-30 sm:w-30 object-cover"
            alt="header-bg"
          />
          <div>
            <div className="flex gap-5 txt-display-m sm:txt-display-l">
              {t('check_in')}{' '}
              <Image
                src="/images/home/left-star.png"
                className="h-6 w-6 sm:h-12 sm:w-12 object-cover"
                alt="header-bg"
                width={48}
                height={48}
              />
            </div>
            <div className="flex gap-5 items-center">
              <span
                className="txt-body-m sm:txt-headline-s bg-clip-text text-transparent"
                style={{
                  background:
                    'linear-gradient(109.2deg, rgba(211, 123, 235, 1) 37.08%, rgba(147, 123, 235, 1) 128.91%)',
                  WebkitBackgroundClip: 'text',
                  WebkitTextFillColor: 'transparent',
                  backgroundClip: 'text',
                }}
              >
                {t('check_in_desc')}
              </span>
              <IconButton iconfont="icon-arrow-right-border" size="small" variant="primary" />
            </div>
          </div>
        </div>
        {response?.lg && (
          <Image
            src="/images/home/banner-header.png"
            alt="banner-header"
            width={250}
            height={250}
          />
        )}
      </div>
    </Link>
  );
});

export default Header;