50 lines
1.9 KiB
TypeScript
50 lines
1.9 KiB
TypeScript
import { getLanguage, translations } from '../i18n';
|
|
|
|
function About() {
|
|
const lang = getLanguage();
|
|
const t = translations[lang].about;
|
|
|
|
return (
|
|
<section id="about" className="section">
|
|
<div className="container" style={{ textAlign: 'center' }}>
|
|
<h2>{t.title}</h2>
|
|
<p style={{ fontSize: '1.2rem', maxWidth: '900px', margin: '2rem auto', color: 'var(--text-secondary)' }}>
|
|
{t.description}
|
|
</p>
|
|
<div className="about-grid">
|
|
<div>
|
|
<h3 style={{ marginBottom: '1rem' }}>{t.expertise.title}</h3>
|
|
<p>{t.expertise.text}</p>
|
|
</div>
|
|
<div>
|
|
<h3 style={{ marginBottom: '1rem' }}>{t.security.title}</h3>
|
|
<p>{t.security.text}</p>
|
|
</div>
|
|
<div>
|
|
<h3 style={{ marginBottom: '1rem' }}>{t.sovereignty.title}</h3>
|
|
<p>{t.sovereignty.text}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ marginTop: '8rem' }}>
|
|
<h2 style={{ marginBottom: '4rem' }}>{t.team.title}</h2>
|
|
<div className="team-grid">
|
|
{[t.team.member1, t.team.member2, t.team.member3].map((member, i) => (
|
|
<div key={i} className="team-member">
|
|
<div className="team-member-avatar" style={{ borderRadius: '50%' }}>
|
|
<span className="material-icons" style={{ fontSize: '4rem', opacity: 0.2 }}>person</span>
|
|
</div>
|
|
<h3 style={{ marginBottom: '0.5rem', fontSize: '1.3rem' }}>{member.name}</h3>
|
|
<p style={{ color: 'var(--primary-color)', fontWeight: 'bold', marginBottom: '1rem', fontSize: '0.9rem', textTransform: 'uppercase' }}>{member.role}</p>
|
|
<p style={{ fontSize: '0.95rem', maxWidth: '300px' }}>{member.bio}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default About;
|