spythere-portfolio/src/sections/AboutSection.tsx

import { FaBriefcase, FaHeart, FaStar, FaUserGraduate, FaVuejs } from 'react-icons/fa';
import { StyledAbout } from '../components/styles/About.styled';
import { StyledSectionHeader } from '../components/styles/SectionHeader.styled';
import { StyledCursor } from '../components/styles/Cursor.styled';
import { SiNestjs } from 'react-icons/si';

import { useGSAP } from '@gsap/react';
import { gsap } from 'gsap';
import { Trans, useTranslation } from 'react-i18next';

function AboutSection() {
  const { t } = useTranslation();

  useGSAP(() => {
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: '.about-grid',
      },
    });

    tl.from('.about-gif', { opacity: 0 });
    tl.from('.about-content', { opacity: 0 });
    tl.from('.stat-item', {
      duration: 0.5,
      ease: 'power1.in',
      opacity: 0,
      stagger: {
        each: 0.5,
      },
    });
  });

  return (
    <StyledAbout id="about">
      <div className="about-grid">
        <div className="about-gif">
          <img src="hello-world.gif" alt="" />
        </div>

        <div className="about-content">
          <StyledSectionHeader>
            <div>
              {t('about.title-1') + ' '}
              <span className="text--accent" style={{ position: 'relative' }}>
                {t('about.title-2')}
                <StyledCursor />
              </span>
            </div>
          </StyledSectionHeader>

          <h2>{t('about.subtitle')}</h2>

          <p>
            <Trans i18nKey="about.content">
              <a href="https://web.td2.info.pl/pl" target="_blank"></a>
              <a href="https://web.td2.info.pl/en" target="_blank"></a>
            </Trans>
          </p>
        </div>
      </div>

      <div className="about-stats">
        <div className="stat-item">
          <FaStar className="stat-item-icon" size={50} />

          <h1>
            <div>{t('about.brief-1-title')}</div>
          </h1>

          <p>{t('about.brief-1-content')}</p>
        </div>

        <div className="stat-item">
          <FaUserGraduate className="stat-item-icon" size={50} />

          <h1>
            <div>{t('about.brief-2-title')}</div>
          </h1>

          <p>{t('about.brief-2-content')}</p>
        </div>

        <div className="stat-item">
          <FaBriefcase className="stat-item-icon" size={50} />

          <h1>
            <div>{t('about.brief-3-title')}</div>
          </h1>

          <p>{t('about.brief-3-content')}</p>
        </div>

        <div className="stat-item">
          <FaHeart className="stat-item-icon" size={50} />

          <h1>
            <div>{t('about.brief-4-title')}</div>
          </h1>

          <p>
            <FaVuejs /> Vue
            <br />
            <SiNestjs /> NestJS
          </p>
        </div>
      </div>
    </StyledAbout>
  );
}

export default AboutSection;