About.jsx

import React from 'react';
import SEO from '../components/SEO';
import { useTranslation } from '../js/i18n';
import '../styles/About.css';

const About = () => {
  const { t } = useTranslation();

  return (
    <>
      <SEO
        title={t('about.title')}
        description={t('about.description')}
      />
      <main className="container mx-auto px-4 pt-16 pb-8">
        <section className="about-section">
          <div className="about-header">
            <h1>{t('about.title')}</h1>
            <p>{t('about.description')}</p>
          </div>
          
          <div className="about-grid">
            <div className="about-card">
              <h2>
                <i className="fas fa-rocket"></i>
                {t('about.mission')}
              </h2>
              <p>{t('about.missionDescription')}</p>
            </div>
            
            <div className="about-card">
              <h2>
                <i className="fas fa-users"></i>
                {t('about.team')}
              </h2>
              <p>{t('about.teamDescription')}</p>
            </div>
            
            <div className="about-card">
              <h2>
                <i className="fas fa-envelope"></i>
                {t('about.contact')}
              </h2>
              <div className="social-links">
                <a href="https://x.com/fun000001" target="_blank" rel="noopener noreferrer" className="social-link">
                  <i className="fab fa-twitter"></i> Twitter
                </a>
                <a href="https://fisherdaddy.com" target="_blank" rel="noopener noreferrer" className="social-link">
                  <i className="fas fa-blog"></i> Blog
                </a>
              </div>
            </div>
          </div>
        </section>
      </main>
    </>
  );
};

export default About;