const { useState, useEffect } = React;
const TRANSITION_DELAY = "1s";
const heart = 1 === 1 ? "assets/images/paper.png" : "assets/images/heart.png";
const Heart = () => {
    const [hover11, setHover11] = useState(false);
    const [hover12, setHover12] = useState(false);
    const [hover13, setHover13] = useState(false);
    const [hover14, setHover14] = useState(false);
    const [hover15, setHover15] = useState(false);
    const [hover21, setHover21] = useState(false);
    const [hover22, setHover22] = useState(false);
    const [hover23, setHover23] = useState(false);
    const [hover24, setHover24] = useState(false);
    const [hover25, setHover25] = useState(false);
    const [hover31, setHover31] = useState(false);
    const [hover32, setHover32] = useState(false);
    const [hover33, setHover33] = useState(false);
    const [hover34, setHover34] = useState(false);
    const [hover35, setHover35] = useState(false);
    const [hover41, setHover41] = useState(false);
    const [hover42, setHover42] = useState(false);
    const [hover43, setHover43] = useState(false);
    const [hover44, setHover44] = useState(false);
    const [hover45, setHover45] = useState(false);
    const [hover51, setHover51] = useState(false);
    const [hover52, setHover52] = useState(false);
    const [hover53, setHover53] = useState(false);
    const [hover54, setHover54] = useState(false);
    const [hover55, setHover55] = useState(false);
    const [hover61, setHover61] = useState(false);
    const [hover62, setHover62] = useState(false);
    const [hover63, setHover63] = useState(false);
    const [hover64, setHover64] = useState(false);
    const [hover65, setHover65] = useState(false);
    const [hover71, setHover71] = useState(false);
    const [hover72, setHover72] = useState(false);
    const [hover73, setHover73] = useState(false);
    const [hover74, setHover74] = useState(false);
    const [hover75, setHover75] = useState(false);
    const [hover81, setHover81] = useState(false);
    const [hover82, setHover82] = useState(false);
    const [hover83, setHover83] = useState(false);
    const [hover84, setHover84] = useState(false);
    const [hover85, setHover85] = useState(false);
    const [hover91, setHover91] = useState(false);
    const [hover92, setHover92] = useState(false);
    const [hover93, setHover93] = useState(false);
    const [hover94, setHover94] = useState(false);
    const [hover95, setHover95] = useState(false);
    const [hover101, setHover101] = useState(false);
    const [hover102, setHover102] = useState(false);
    const [hover103, setHover103] = useState(false);
    const [hover104, setHover104] = useState(false);
    const [hover105, setHover105] = useState(false);

    useEffect(() => {
        if (hover11) {
            document.querySelector(".heart-11").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-11").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-11").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-11").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover11]);
    useEffect(() => {
        if (hover12) {
            document.querySelector(".heart-12").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-12").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-12").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-12").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover12]);
    useEffect(() => {
        if (hover13) {
            document.querySelector(".heart-13").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-13").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-13").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-13").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover13]);
    useEffect(() => {
        if (hover14) {
            document.querySelector(".heart-14").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-14").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-14").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-14").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover14]);
    useEffect(() => {
        if (hover15) {
            document.querySelector(".heart-15").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-15").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-15").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-15").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover15]);
    useEffect(() => {
        if (hover21) {
            document.querySelector(".heart-21").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-21").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-21").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-21").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover21]);
    useEffect(() => {
        if (hover22) {
            document.querySelector(".heart-22").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-22").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-22").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-22").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover22]);
    useEffect(() => {
        if (hover23) {
            document.querySelector(".heart-23").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-23").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-23").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-23").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover23]);
    useEffect(() => {
        if (hover24) {
            document.querySelector(".heart-24").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-24").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-24").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-24").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover24]);
    useEffect(() => {
        if (hover25) {
            document.querySelector(".heart-25").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-25").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-25").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-25").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover25]);
    useEffect(() => {
        if (hover31) {
            document.querySelector(".heart-31").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-31").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-31").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-31").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover31]);
    useEffect(() => {
        if (hover32) {
            document.querySelector(".heart-32").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-32").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-32").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-32").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover32]);
    useEffect(() => {
        if (hover33) {
            document.querySelector(".heart-33").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-33").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-33").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-33").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover33]);
    useEffect(() => {
        if (hover34) {
            document.querySelector(".heart-34").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-34").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-34").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-34").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover34]);
    useEffect(() => {
        if (hover35) {
            document.querySelector(".heart-35").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-35").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-35").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-35").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover35]);
    useEffect(() => {
        if (hover41) {
            document.querySelector(".heart-41").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-41").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-41").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-41").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover41]);
    useEffect(() => {
        if (hover42) {
            document.querySelector(".heart-42").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-42").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-42").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-42").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover42]);
    useEffect(() => {
        if (hover43) {
            document.querySelector(".heart-43").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-43").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-43").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-43").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover43]);
    useEffect(() => {
        if (hover44) {
            document.querySelector(".heart-44").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-44").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-44").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-44").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover44]);
    useEffect(() => {
        if (hover45) {
            document.querySelector(".heart-45").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-45").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-45").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-45").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover45]);
    useEffect(() => {
        if (hover51) {
            document.querySelector(".heart-51").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-51").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-51").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-51").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover51]);
    useEffect(() => {
        if (hover52) {
            document.querySelector(".heart-52").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-52").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-52").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-52").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover52]);
    useEffect(() => {
        if (hover53) {
            document.querySelector(".heart-53").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-53").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-53").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-53").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover53]);
    useEffect(() => {
        if (hover54) {
            document.querySelector(".heart-54").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-54").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-54").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-54").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover54]);
    useEffect(() => {
        if (hover55) {
            document.querySelector(".heart-55").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-55").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-55").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-55").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover55]);
    useEffect(() => {
        if (hover61) {
            document.querySelector(".heart-61").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-61").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-61").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-61").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover61]);
    useEffect(() => {
        if (hover62) {
            document.querySelector(".heart-62").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-62").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-62").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-62").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover62]);
    useEffect(() => {
        if (hover63) {
            document.querySelector(".heart-63").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-63").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-63").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-63").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover63]);
    useEffect(() => {
        if (hover64) {
            document.querySelector(".heart-64").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-64").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-64").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-64").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover64]);
    useEffect(() => {
        if (hover65) {
            document.querySelector(".heart-65").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-65").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-65").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-65").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover65]);
    useEffect(() => {
        if (hover71) {
            document.querySelector(".heart-71").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-71").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-71").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-71").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover71]);
    useEffect(() => {
        if (hover72) {
            document.querySelector(".heart-72").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-72").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-72").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-72").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover72]);
    useEffect(() => {
        if (hover73) {
            document.querySelector(".heart-73").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-73").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-73").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-73").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover73]);
    useEffect(() => {
        if (hover74) {
            document.querySelector(".heart-74").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-74").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-74").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-74").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover74]);
    useEffect(() => {
        if (hover75) {
            document.querySelector(".heart-75").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-75").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-75").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-75").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover75]);
    useEffect(() => {
        if (hover81) {
            document.querySelector(".heart-81").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-81").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-81").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-81").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover81]);
    useEffect(() => {
        if (hover82) {
            document.querySelector(".heart-82").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-82").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-82").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-82").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover82]);
    useEffect(() => {
        if (hover83) {
            document.querySelector(".heart-83").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-83").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-83").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-83").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover83]);
    useEffect(() => {
        if (hover84) {
            document.querySelector(".heart-84").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-84").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-84").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-84").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover84]);
    useEffect(() => {
        if (hover85) {
            document.querySelector(".heart-85").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-85").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-85").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-85").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover85]);
    useEffect(() => {
        if (hover91) {
            document.querySelector(".heart-91").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-91").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-91").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-91").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover91]);
    useEffect(() => {
        if (hover92) {
            document.querySelector(".heart-92").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-92").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-92").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-92").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover92]);
    useEffect(() => {
        if (hover93) {
            document.querySelector(".heart-93").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-93").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-93").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-93").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover93]);
    useEffect(() => {
        if (hover94) {
            document.querySelector(".heart-94").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-94").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-94").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-94").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover94]);
    useEffect(() => {
        if (hover95) {
            document.querySelector(".heart-95").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-95").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-95").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-95").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover95]);
    useEffect(() => {
        if (hover101) {
            document.querySelector(".heart-101").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-101").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-101").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-101").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover101]);
    useEffect(() => {
        if (hover102) {
            document.querySelector(".heart-102").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-102").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-102").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-102").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover102]);
    useEffect(() => {
        if (hover103) {
            document.querySelector(".heart-103").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-103").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-103").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-103").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover103]);
    useEffect(() => {
        if (hover104) {
            document.querySelector(".heart-104").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-104").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-104").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-104").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover104]);
    useEffect(() => {
        if (hover105) {
            document.querySelector(".heart-105").style.transform = "rotateY(0deg)";
            document.querySelector(".heart-105").style.transitionDelay = "0s";
        } else {
            document.querySelector(".heart-105").style.transform = "rotateY(90deg)";
            document.querySelector(".heart-105").style.transitionDelay = TRANSITION_DELAY;
        }
    }, [hover105]);
    return (
        <div className="container">
            <div className="row-1">
                <div onMouseEnter={() => { setHover11(true) }} onMouseLeave={() => { setHover11(false) }}><img className="heart-11" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover12(true) }} onMouseLeave={() => { setHover12(false) }}><img className="heart-12" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover13(true) }} onMouseLeave={() => { setHover13(false) }}><img className="heart-13" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover14(true) }} onMouseLeave={() => { setHover14(false) }}><img className="heart-14" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover15(true) }} onMouseLeave={() => { setHover15(false) }}><img className="heart-15" src={heart} alt="" /></div>
            </div>
            <div className="row-2">
                <div onMouseEnter={() => { setHover21(true) }} onMouseLeave={() => { setHover21(false) }}><img className="heart-21" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover22(true) }} onMouseLeave={() => { setHover22(false) }}><img className="heart-22" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover23(true) }} onMouseLeave={() => { setHover23(false) }}><img className="heart-23" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover24(true) }} onMouseLeave={() => { setHover24(false) }}><img className="heart-24" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover25(true) }} onMouseLeave={() => { setHover25(false) }}><img className="heart-25" src={heart} alt="" /></div>
            </div>
            <div className="row-3">
                <div onMouseEnter={() => { setHover31(true) }} onMouseLeave={() => { setHover31(false) }}><img className="heart-31" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover32(true) }} onMouseLeave={() => { setHover32(false) }}><img className="heart-32" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover33(true) }} onMouseLeave={() => { setHover33(false) }}><img className="heart-33" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover34(true) }} onMouseLeave={() => { setHover34(false) }}><img className="heart-34" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover35(true) }} onMouseLeave={() => { setHover35(false) }}><img className="heart-35" src={heart} alt="" /></div>
            </div>
            <div className="row-4">
                <div onMouseEnter={() => { setHover41(true) }} onMouseLeave={() => { setHover41(false) }}><img className="heart-41" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover42(true) }} onMouseLeave={() => { setHover42(false) }}><img className="heart-42" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover43(true) }} onMouseLeave={() => { setHover43(false) }}><img className="heart-43" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover44(true) }} onMouseLeave={() => { setHover44(false) }}><img className="heart-44" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover45(true) }} onMouseLeave={() => { setHover45(false) }}><img className="heart-45" src={heart} alt="" /></div>
            </div>
            <div className="row-5">
                <div onMouseEnter={() => { setHover51(true) }} onMouseLeave={() => { setHover51(false) }}><img className="heart-51" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover52(true) }} onMouseLeave={() => { setHover52(false) }}><img className="heart-52" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover53(true) }} onMouseLeave={() => { setHover53(false) }}><img className="heart-53" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover54(true) }} onMouseLeave={() => { setHover54(false) }}><img className="heart-54" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover55(true) }} onMouseLeave={() => { setHover55(false) }}><img className="heart-55" src={heart} alt="" /></div>
            </div>
            <div className="row-6">
                <div onMouseEnter={() => { setHover61(true) }} onMouseLeave={() => { setHover61(false) }}><img className="heart-61" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover62(true) }} onMouseLeave={() => { setHover62(false) }}><img className="heart-62" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover63(true) }} onMouseLeave={() => { setHover63(false) }}><img className="heart-63" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover64(true) }} onMouseLeave={() => { setHover64(false) }}><img className="heart-64" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover65(true) }} onMouseLeave={() => { setHover65(false) }}><img className="heart-65" src={heart} alt="" /></div>
            </div>
            <div className="row-7">
                <div onMouseEnter={() => { setHover71(true) }} onMouseLeave={() => { setHover71(false) }}><img className="heart-71" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover72(true) }} onMouseLeave={() => { setHover72(false) }}><img className="heart-72" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover73(true) }} onMouseLeave={() => { setHover73(false) }}><img className="heart-73" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover74(true) }} onMouseLeave={() => { setHover74(false) }}><img className="heart-74" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover75(true) }} onMouseLeave={() => { setHover75(false) }}><img className="heart-75" src={heart} alt="" /></div>
            </div>
            <div className="row-8">
                <div onMouseEnter={() => { setHover81(true) }} onMouseLeave={() => { setHover81(false) }}><img className="heart-81" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover82(true) }} onMouseLeave={() => { setHover82(false) }}><img className="heart-82" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover83(true) }} onMouseLeave={() => { setHover83(false) }}><img className="heart-83" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover84(true) }} onMouseLeave={() => { setHover84(false) }}><img className="heart-84" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover85(true) }} onMouseLeave={() => { setHover85(false) }}><img className="heart-85" src={heart} alt="" /></div>
            </div>
            <div className="row-9">
                <div onMouseEnter={() => { setHover91(true) }} onMouseLeave={() => { setHover91(false) }}><img className="heart-91" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover92(true) }} onMouseLeave={() => { setHover92(false) }}><img className="heart-92" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover93(true) }} onMouseLeave={() => { setHover93(false) }}><img className="heart-93" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover94(true) }} onMouseLeave={() => { setHover94(false) }}><img className="heart-94" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover95(true) }} onMouseLeave={() => { setHover95(false) }}><img className="heart-95" src={heart} alt="" /></div>
            </div>
            <div className="row-10">
                <div onMouseEnter={() => { setHover101(true) }} onMouseLeave={() => { setHover101(false) }}><img className="heart-101" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover102(true) }} onMouseLeave={() => { setHover102(false) }}><img className="heart-102" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover103(true) }} onMouseLeave={() => { setHover103(false) }}><img className="heart-103" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover104(true) }} onMouseLeave={() => { setHover104(false) }}><img className="heart-104" src={heart} alt="" /></div>
                <div onMouseEnter={() => { setHover105(true) }} onMouseLeave={() => { setHover105(false) }}><img className="heart-105" src={heart} alt="" /></div>
            </div>
        </div>
    );
}