import React, { useState } from "react";
import './../App.css'


export default function OpenDayBanner() {
    const [isHover, setHover] = useState(false);

    return (
        <a href="/openday">
            <div className={"bg-[#7274AB] size-07 absolute left-[-25px] top-[-50px] rounded-full md:top-[-15px] md:left-0 transition-all px-6 py-2 b-50" + (isHover ? " md:scale-125" : "")} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>

                <div className={"relative flex justify-center items-center"}>
                    <h2 className={"uppercase text-sm z-10 text-white transition-all"}>Open Day - October 26 !</h2>
                </div>



            </div>
        </a>
    )
}
