71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
'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;
|