Homepage V1

src/components/ProductPage.tsx

@@ -0,0 +1,79 @@
+import Header from './Header';
+import Footer from './Footer';
+import { getLanguage, translations } from '../i18n';
+
+interface ProductPageProps {
+  title: string;
+  description: string;
+  icon: string;
+  trademark?: string;
+  children?: React.ReactNode;
+}
+
+function ProductPage({ title, description, icon, trademark, children }: ProductPageProps) {
+  const lang = getLanguage();
+  const t = translations[lang].common;
+
+  return (
+    <>
+      <Header />
+      <main>
+        <div className="hero" style={{ padding: '6rem 0' }}>
+          <div className="container">
+            <span className="material-icons" style={{ fontSize: '4rem', marginBottom: '1.5rem', color: 'var(--accent-color)' }}>{icon}</span>
+            <h1>{title}</h1>
+            <p style={{ maxWidth: '800px', margin: '0 auto' }}>{description}</p>
+          </div>
+        </div>
+        
+        <section className="section">
+          <div className="container">
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '4rem', alignItems: 'center' }}>
+              <div>
+                <h2>{t.detailsTitle}</h2>
+                <p>{t.detailsText}</p>
+                <ul style={{ listStyle: 'none', marginTop: '2rem' }}>
+                  <li style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}>
+                    <span className="material-icons" style={{ color: 'var(--accent-color)' }}>check_circle</span>
+                    {t.featureSecurity}
+                  </li>
+                  <li style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}>
+                    <span className="material-icons" style={{ color: 'var(--accent-color)' }}>check_circle</span>
+                    {t.featureIntegration}
+                  </li>
+                  <li style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}>
+                    <span className="material-icons" style={{ color: 'var(--accent-color)' }}>check_circle</span>
+                    {t.featureSupport}
+                  </li>
+                </ul>
+                {trademark && (
+                  <p style={{ fontSize: '0.8rem', fontStyle: 'italic', marginTop: '2rem', opacity: 0.7 }}>
+                    {trademark}
+                  </p>
+                )}
+              </div>
+              <div style={{ 
+                backgroundColor: 'var(--bg-light)', 
+                height: '400px', 
+                borderRadius: '8px', 
+                border: '1px solid var(--border-color)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexDirection: 'column',
+                color: 'var(--text-secondary)'
+              }}>
+                <span className="material-icons" style={{ fontSize: '5rem', marginBottom: '1rem', opacity: 0.3 }}>image</span>
+                <p>{t.screenshotPlaceholder}</p>
+              </div>
+            </div>
+            {children}
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
+  );
+}
+
+export default ProductPage;