hh-ui-components
Version:
58 lines • 6.15 kB
JavaScript
import React from "react";
import { useMobile } from "../../helper/GlobalHelper";
import { Button } from "../Button";
export var Hero = function (_a) {
var className = _a.className, _b = _a.title, title = _b === void 0 ? "Organic Winter Looks" : _b, _c = _a.description, description = _c === void 0 ? "Staying warm sustainably" : _c, desktopImg = _a.desktopImg, mobileImg = _a.mobileImg, leftLink = _a.leftLink, rightLink = _a.rightLink, _d = _a.leftLabel, leftLabel = _d === void 0 ? "Women" : _d, _e = _a.rightLabel, rightLabel = _e === void 0 ? "Men" : _e, _f = _a.aLabel, aLabel = _f === void 0 ? "Shop Now" : _f;
var _g = useMobile(940), realMobile = _g.realMobile, orientation = _g.orientation, isMobile = _g.isMobile;
return (React.createElement("div", { className: "".concat(className, " relative mt-[-96px] 2xl:mt-[-6.667vw]") },
React.createElement("div", { className: "relative hidden h-screen w-full overflow-hidden lg:block" },
React.createElement("div", { className: "w-full h-screen" },
React.createElement("img", { className: "w-full h-full object-fill", src: desktopImg, alt: title }))),
React.createElement("div", { className: " relative h-screen w-full overflow-hidden lg:hidden" },
React.createElement("div", { className: "w-full h-screen" },
React.createElement("img", { className: "w-full h-full object-fill", src: mobileImg, alt: title }))),
React.createElement("div", { className: "absolute left-0 right-0 bottom-[19vw] ".concat(isMobile &&
realMobile &&
orientation ?
" bottom-[40px] homePad:bottom-[7vw]" :
"flex h-full w-full flex-col justify-end bottom-[167px] md:bottom-[19.717vw] lg:bottom-0 2xl:bottom-0") },
React.createElement("div", { className: "relative lg:mt-[8.056vw] lg:pt-[2.778vw] flex flex-col justify-end" },
React.createElement("h1", { className: "z-2 w-fit whitespace-normal ".concat(isMobile && realMobile && orientation
? "text-[8.800vw] pt-[3.250vw] px-[6.250vw] text-center mx-auto"
: " px-[6.250vw] md:pt-[7vw] pb-10 md:pb-10-md lg:text-left text-center text-[12.800vw] md:text-[12.800vw] lg:mx-0 lg:px-[2.778vw] lg:pt-[3.778vw] lg:pb-10 lg:text-[8.333vw] 2xl:mx-0 2xl:px-[2.778vw] 2xl:pt-[2.778vw] 2xl:pb-10-2xl", " font-normal not-italic leading-[120%] text-white ") }, title),
React.createElement("h2", { className: "z-2 w-fit whitespace-normal mx-auto text-center ".concat(isMobile && realMobile && orientation
? "text-[3.400vw] px-[6.250vw] mx-auto pb-40-md"
: " px-[6.250vw] mx-auto md:pt-0 md:pb-40-md pb-40 lg:text-left text-center text-[6.400vw] md:text-[6.400vw] lg:mx-0 lg:px-[2.778vw] lg:text-[3.472vw] 2xl:mx-0 2xl:px-[2.778vw] ", " font-normal not-italic leading-[120%] text-white ") }, description)),
React.createElement("div", { className: "relative h-full ".concat(isMobile && realMobile && orientation
? "hidden"
: "lg:flex min-h-[150px] px-[6.250vw] lg:px-[2.778vw] items-end justify-between hidden ") },
React.createElement("a", { href: leftLink },
React.createElement("div", { className: "z-2 flex h-full w-full cursor-pointer flex-col justify-end ".concat(isMobile && realMobile && orientation
? "mb-[6.250vw] mt-[4.250vw]"
: " mb-[6.250vw] mt-[6.250vw] lg:mb-[2.778vw] ") },
React.createElement("div", { className: "font-normal not-italic leading-[32px] text-white ".concat(isMobile && realMobile && orientation
? "text-[3vw] "
: " lg:text-[1.667vw] text-[4.800vw] md:text-[2.344vw]") }, aLabel),
React.createElement("h2", { className: "".concat(isMobile && realMobile && orientation
? "text-[5.8vw]"
: "text-[12.800vw] lg:text-[5.833vw] md:text-[6.250vw]", " font-normal not-italic leading-[120%] text-white ") }, leftLabel))),
React.createElement("a", { href: rightLink },
React.createElement("div", { className: "z-2 flex h-full w-full cursor-pointer flex-col justify-end text-right ".concat(isMobile && realMobile && orientation
? "mb-[6.250vw] mt-[4.250vw] mr-[6.250vw]"
: " mb-[6.250vw] mt-[6.250vw] mr-[6.250vw] lg:mb-[2.778vw] 2xl:mb-[2.778vw] ") },
React.createElement("div", { className: "font-normal not-italic leading-[32px] text-white ".concat(isMobile && realMobile && orientation
? "text-[3vw] "
: " lg:text-[1.667vw] text-[4.800vw] md:text-[2.344vw] ") }, aLabel),
React.createElement("h2", { className: "".concat(realMobile && orientation
? "text-[5.8vw]"
: "text-[12.800vw] lg:text-[5.833vw] md:text-[6.250vw]", " font-normal not-italic leading-[120%] text-white ") }, rightLabel))),
React.createElement("div", { className: " ".concat(isMobile && realMobile && orientation
? "block absolute bottom-0 left-2/4 z-20 h-[80%] w-[1px] -translate-x-2/4 bg-white"
: "absolute bottom-0 left-2/4 z-20 hidden h-[80%] w-[1px] -translate-x-2/4 bg-white lg:block 2xl:block") })),
React.createElement("div", { className: "z-10 justify-center flex gap-30 homePad:gap-[3.906vw] lg:hidden items-center" },
React.createElement("a", { href: leftLink },
React.createElement(Button, { variants: "tertiary", color: "white", label: "Shop Women" })),
React.createElement("a", { href: rightLink },
React.createElement(Button, { variants: "tertiary", color: "white", label: "Shop Men" }))))));
};
//# sourceMappingURL=Hero.js.map