Spaces:
Running
Running
File size: 3,076 Bytes
9cd6ddb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
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 VERSION RELEASED!
</Tag>
<IconsSlider />
<div className="max-w-max relative mx-auto md:px-12 pt-3 z-1 mt-4">
<h1 className="text-white font-title font-black text-4xl md:text-[70px] !leading-none text-center">
<FormattedMessage
id="iconsEditor.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="iconsEditor.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>
);
};
|