~NAXC~

File Content: `ThreeColTextContent.jsx`

import { useState, useEffect, useRef } from "react";
import RichText from "../richText/RichText";

const ThreeColTextContent = ({ content }) => {
  const [isVisible, setIsVisible] = useState(false);
  const sectionRef = useRef(null);

  useEffect(() => {
    const handleScroll = () => {
      if (sectionRef.current) {
        const rect = sectionRef.current.getBoundingClientRect();
        const windowHeight = window.innerHeight + 50;
        let elementPosition = rect.top - windowHeight
        // console.log(rect.top - windowHeight);
        if (elementPosition > 0) {
          setIsVisible(false)
        } else {
          setIsVisible(true);
        }
      }
    };

    window.addEventListener('scroll', handleScroll);
    // Log once on mount as well
    handleScroll();
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  //   console.log(content);
  return (
    <section ref={sectionRef} className={`threeColTextContent ${isVisible ? 'fade-up-animate' : ''}`}>
      <div className="container">
        {content?.threeColsectionHeading && (
          <div className="threeColTextContent__title-wrapper">
            <h2 className="threeColTextContent__title">
              {content?.threeColsectionHeading}
            </h2>
          </div>
        )}
        <div className="threeColTextContent__wrapper">
          {content?.threeColcontent &&
            content?.threeColcontent?.length > 0 &&
            content?.threeColcontent.map((col, index) => {
              return (
                <div className="threeColTextContent__col" key={index}>
                  {col?.title && (
                    <h3 className="threeColTextContent__heading">
                      {col?.title}
                    </h3>
                  )}
                  {col?.content && (
                    <RichText text={col?.content} addContainer={false} />
                  )}
                </div>
              );
            })}
        </div>
      </div>
    </section>
  );
};

export default ThreeColTextContent;
File Content: ThreeColTextContent.jsx

File Content: `ThreeColTextContent.jsx`
