46 lines
2.0 KiB
TypeScript
46 lines
2.0 KiB
TypeScript
|
"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 lg:flex-row items-center lg:items-start justify-center gap-8 lg:gap-0 px-4 lg:px-0"
|
||
|
|
style={{ backgroundImage: 'url(/images/home/bg-star.png)', backgroundSize: 'contain', backgroundPosition: 'center' }}
|
||
|
|
>
|
||
|
|
<div className="flex-1 pt-12 lg:pt-[99px] pb-8 lg:pb-20 text-center lg:text-left max-w-full lg:max-w-none pr-6">
|
||
|
|
<div className="flex justify-center lg:justify-start">
|
||
|
|
<Image src="/images/home/left-star.png" className="w-12 h-12 object-cover" alt="header-bg" width={48} height={48} />
|
||
|
|
</div>
|
||
|
|
<h1 className="mt-3 txt-headline-m 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="py-2 pr-2 pl-[59px] border border-solid border-outline-normal rounded-full relative h-12 flex items-center gap-3"
|
||
|
|
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 -left-[33px] -top-[10px]" alt="icon-crush-free" width={102} height={64} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
<div className="w-full lg:w-[672px] flex-shrink-0 py-6 lg:py-12 max-w-[672px]">
|
||
|
|
<HeaderSlide />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Header;
|