whispering-tree/sections/About.tsx

"use client";

import { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { SplitText } from "gsap/SplitText";

gsap.registerPlugin(ScrollTrigger, SplitText);

const About = () => {
  const aboutTitle = useRef<HTMLHeadingElement>(null);
  const subHeadingRef = useRef<HTMLParagraphElement>(null);
  const subHeading2Ref = useRef<HTMLParagraphElement>(null);
  const mainHeadingRef = useRef<HTMLHeadingElement>(null);

  const subSplit1 = useRef<SplitText | null>(null);
  const subSplit2 = useRef<SplitText | null>(null);
  const mainSplit = useRef<SplitText | null>(null);

  useEffect(() => {
    const ctx = gsap.context(() => {
      // Split subheadings into words
      const headingSplit = new SplitText(aboutTitle.current, { type: "chars" });
      if (subHeadingRef.current) {
        subSplit1.current = new SplitText(subHeadingRef.current, {
          type: "words",
          wordsClass: "word",
        });
      }
      if (subHeading2Ref.current) {
        subSplit2.current = new SplitText(subHeading2Ref.current, {
          type: "words",
          wordsClass: "word",
        });
      }

      const allSubWords = [
        ...(subSplit1.current?.words || []),
        ...(subSplit2.current?.words || []),
      ];
      gsap.from(headingSplit.chars, {
        yPercent: 100,
        opacity: 0,
        duration: 1,
        ease: "expo.out",
        stagger: 0.025,
        scrollTrigger: {
          trigger: aboutTitle.current,
          start: "top 85%",
          toggleActions: "play none none none",
        },
      });

      gsap.from(allSubWords, {
        yPercent: 100,
        opacity: 0,
        duration: 1,
        ease: "expo.out",
        stagger: 0.02,
        scrollTrigger: {
          trigger: subHeadingRef.current,
          start: "top 85%",
          toggleActions: "play none none none",
          // markers: true,
        },
      });

      // MAIN HEADING fade-in per character
      if (mainHeadingRef.current) {
        mainSplit.current = new SplitText(mainHeadingRef.current, {
          type: "chars",
          charsClass: "char",
        });

        const chars = mainSplit.current.chars;

        gsap.fromTo(
          chars,
          { opacity: 0.3 },
          {
            opacity: 1,
            ease: "expo.out",
            stagger: 0.04,
            scrollTrigger: {
              trigger: mainHeadingRef.current,
              start: "top 85%",
              end: "bottom 60%",
              scrub: 1,
            },
          }
        );
      }
    });

    return () => {
      ctx.revert();
      subSplit1.current?.revert();
      subSplit2.current?.revert();
      mainSplit.current?.revert();
    };
  }, []);

  return (
    <section
      id="about"
      className="tab:flex-row tab:gap-0 tab:px-6 mx-auto flex h-fit w-full max-w-[1420px] items-start justify-between py-8 sm:flex-col sm:gap-4 sm:px-2.5 lg:px-0"
    >
      {/* Left */}
      <div className="tab:w-3/12 sm:w-full">
        <h1
          ref={aboutTitle}
          className="text-h-5-28 font-switzer leading-h4 text-left font-semibold text-black"
        >
          About Us
        </h1>
      </div>

      {/* Right */}
      <div className="tab:w-8/12 flex flex-col gap-5 sm:w-full">
        {/* MAIN HEADING */}
        <h2
          ref={mainHeadingRef}
          className="font-switzer sm:text-h-4-34 tab:text-h-6-38 tab:leading-h3 overflow-hidden font-semibold text-black sm:leading-10"
        >
          At{" "}
          <span className="text-brand font-playfair font-semibold italic">
            FalktronTrees
          </span>{" "}
          merges IoT, AI, and environmental intelligence to connect nature and
          technology, creating smart solutions that monitor and improve the
          health of trees and ecosystems.
        </h2>

        {/* Sub-heading 1 */}
        <p
          ref={subHeadingRef}
          className="font-mium-reg text-b-2-17 leading-b2 w-full overflow-hidden text-left tracking-[-0.8px] text-black"
        >
          Based in Oelde, Germany, FalktronTrees brings together innovation,
          data science, and environmental care to empower cities, organizations,
          and individuals to manage natural resources intelligently.
        </p>

        {/* Sub-heading 2 */}
        <p
          ref={subHeading2Ref}
          className="font-mium-reg text-b-2-17 leading-b2 w-full overflow-hidden text-left tracking-[-0.8px] text-black"
        >
          Under the leadership of Matthias Mut, co-founder and CEO, the company
          combines expertise in AI-driven analytics, sensor technology, and
          prompt engineering to deliver cutting-edge environmental monitoring
          systems.
        </p>
      </div>
    </section>
  );
};

export default About;