Spaces:
Running
Running
import Image from "next/image"; | |
import { Tag } from "components/tag"; | |
import { IconsSlider } from "./comps/icons-slider"; | |
// import { Editor } from "components/editor"; | |
// import { ArrayOfIcons } from "components/svg/icons"; | |
// import { Navigation } from "components/navigation"; | |
import Background from "assets/images/header/background.svg"; | |
import Stars from "assets/images/header/stars.svg"; | |
import Ananas from "assets/images/header/ananas.svg"; | |
import Pizza from "assets/images/header/pizza.svg"; | |
import { FormattedMessage, useIntl } from "react-intl"; | |
export const Header = ({ children }: any) => { | |
const intl = useIntl(); | |
return ( | |
<header className="bg-white relative z-20"> | |
<div className="z-1 px-6 pt-28"> | |
<div className="container mx-auto relative"> | |
<div className="max-w-[1051px] w-full mx-auto text-center"> | |
<Tag | |
label={`${intl.formatMessage({ id: "badge.new" })} 🔥`} | |
className="mb-5" | |
> | |
NEW FEATURE AVAILABLE | |
</Tag> | |
<IconsSlider /> | |
<div className="max-w-max relative mx-auto md:px-12 pt-3 z-1 mt-2"> | |
<h1 className="text-white font-title font-black text-4xl md:text-[70px] !leading-none text-center"> | |
<FormattedMessage | |
id="badgeEditor.header.title" | |
values={{ span: () => <br /> }} | |
/>{" "} | |
✨ | |
</h1> | |
<Image | |
width={32} | |
height={32} | |
src={Stars} | |
className="absolute top-0 left-0 w-full pointer-events-none" | |
alt="Stars on title" | |
/> | |
</div> | |
<h2 className="text-white font-medium text-center mt-5 text-lg md:text-[26px] tracking-wide"> | |
<FormattedMessage id="badgeEditor.header.subtitle" /> | |
</h2> | |
<p className="text-white text-opacity-70 text-sm mt-2"> | |
<FormattedMessage id="footer.legal2" /> | |
</p> | |
</div> | |
{children} | |
</div> | |
</div> | |
<div className="absolute top-0 left-0 h-full max-h-[875px] bg-blue -z-1 w-full"> | |
<Image | |
width={32} | |
height={32} | |
alt="Pizza with sauce" | |
src={Pizza} | |
className="w-[90px] lg:w-[120px] opacity-60 lg:opacity-100 absolute select-none left-10 lg:left-20 top-32 lg:top-1/3 pointer-events-none block" | |
/> | |
<Image | |
width={32} | |
height={32} | |
alt="Ananas party!" | |
src={Ananas} | |
className="w-[150px] absolute select-none bottom-20 right-16 pointer-events-none hidden lg:block" | |
/> | |
<Image | |
width={32} | |
height={32} | |
alt="Background header cloud" | |
src={Background} | |
className="w-full absolute select-none bottom-0 left-0 pointer-events-none -z-1 opacity-50" | |
/> | |
</div> | |
{/* <div className="bg-blue h-full w-full absolute top-0 left-0 -z-1"> | |
</div> */} | |
</header> | |
); | |
}; | |