70 lines
2.2 KiB
TypeScript
70 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 { useMedia } from '@/hooks/tools';
|
|
|
|
const Header = React.memo(() => {
|
|
const response = useMedia();
|
|
return (
|
|
<div
|
|
className="flex items-center justify-center"
|
|
style={{
|
|
backgroundImage: 'url(/images/home/bg-star.png)',
|
|
backgroundSize: 'contain',
|
|
backgroundPosition: 'center',
|
|
}}
|
|
>
|
|
<div className="flex-1 pt-12 pb-8 text-center">
|
|
<Image
|
|
src="/images/home/left-star.png"
|
|
className="h-12 w-12 object-cover"
|
|
alt="header-bg"
|
|
width={48}
|
|
height={48}
|
|
/>
|
|
<h1 className="txt-headline-m mt-3">Spicyxx.ai</h1>
|
|
<h1
|
|
className="txt-headline-m mt-3"
|
|
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',
|
|
}}
|
|
>
|
|
A Different World
|
|
</h1>
|
|
<Link href="/crushcoin">
|
|
<div
|
|
className="border-outline-normal max-w-100 mt-8 relative flex h-12 items-center justify-between rounded-full border border-solid pr-2 pl-[59px]"
|
|
style={{
|
|
background:
|
|
'linear-gradient(90deg, rgba(168, 70, 201, 1) 0%, rgba(255, 183, 66, 1) 12.97%, rgba(80, 56, 255, 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-5 left-1"
|
|
alt="icon-crush-free"
|
|
width={60}
|
|
height={60}
|
|
/>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
{response?.sm && (
|
|
<Image src="/images/home/banner-header.png" alt="banner-header" width={400} height={400} />
|
|
)}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export default Header;
|