About.jsx

import { useTranslation } from 'react-i18next';

export default function About() {
  const { t } = useTranslation();

  return (
    <>
      <header className="page-head">
        <span className="eyebrow">{t('nav.about')}</span>
        <h1>{t('about.title')}</h1>
      </header>

      <section className="section">
        <div className="container">
          <div className="about-hero">
            <div className="about-hero__photo">
              <div className="placeholder placeholder--soft">{t('about.intro.name')}</div>
            </div>

            <div>
              <span className="eyebrow">{t('about.intro.school')}</span>
              <h2 style={{ fontStyle: 'italic' }}>{t('about.intro.name')}</h2>
              <div className="divider" />
              <p>{t('about.intro.p1')}</p>
              <p>{t('about.intro.p2')}</p>
              <p>{t('about.intro.p3')}</p>
            </div>
          </div>

          <div className="about-block">
            <span className="eyebrow">Filosofía</span>
            <h2>{t('about.philosophyTitle')}</h2>
            <div className="about-block__columns">
              <p>{t('about.philosophy.p1')}</p>
              <p>{t('about.philosophy.p2')}</p>
              <p>{t('about.philosophy.p3')}</p>
              <p>{t('about.philosophy.p4')}</p>
            </div>
          </div>

          <div className="about-block">
            <span className="eyebrow">Skills</span>
            <h2>{t('about.skillsTitle')}</h2>
            <div className="skills-grid">
              <div>
                <h4>{t('about.skills.software')}</h4>
                <p>{t('about.skills.softwareList')}</p>
              </div>
              <div>
                <h4>{t('about.skills.manual')}</h4>
                <p>{t('about.skills.manualList')}</p>
              </div>
              <div>
                <h4>{t('about.skills.languages')}</h4>
                <p>{t('about.skills.languagesList')}</p>
              </div>
            </div>
          </div>

          <div className="about-block">
            <span className="eyebrow">Educación</span>
            <h2>{t('about.educationTitle')}</h2>
            <div className="timeline">
              <div className="timeline__item">
                <h4>{t('about.education.degree')}</h4>
                <p>{t('about.education.school')}</p>
                <p className="timeline__year">{t('about.education.year')}</p>
                <p style={{ marginTop: 12 }}>{t('about.education.highlights')}</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}