Homepage V1

src/components/About.tsx

@@ -0,0 +1,59 @@
+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 style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '4rem' }}>
+            {[t.team.member1, t.team.member2, t.team.member3].map((member, i) => (
+              <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                <div style={{ 
+                  width: '180px', 
+                  height: '180px', 
+                  borderRadius: '50%', 
+                  backgroundColor: 'var(--bg-light)', 
+                  marginBottom: '1.5rem',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  border: '1px solid var(--border-color)'
+                }}>
+                  <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;