<CustomCursor.Provider>
  {({ setCursorStyle, setCursorChildren, containerRef }) => {
    const handleHeadingCursor = () => {
      setCursorStyle({
        scale: 6,
        mixBlendMode: 'difference',
      });
    };

    const handleMouseLeave = () => {
      setCursorChildren(
        <div className="bg-primary min-w-5 min-h-5 rounded-full" />,
      );
      setCursorStyle({});
    };

    return (
      <div
        ref={containerRef}
        className="relative container text-center flex justify-center items-center py-12 px-6 min-h-svh"
      >
        <CustomCursor className="bg-primary min-w-5 min-h-5 rounded-full" />

        <h1
          className="text-5xl tracking-tight font-semibold"
          onMouseEnter={handleHeadingCursor}
          onMouseLeave={handleMouseLeave}
        >
          Explore the World with interactive{' '}
          <span className="text-primary">travel experiences</span>.
        </h1>
      </div>
    );
  }}
</CustomCursor.Provider>