110 lines
4.3 KiB
TypeScript
110 lines
4.3 KiB
TypeScript
import Header from './Header';
|
|
import Footer from './Footer';
|
|
import { getLanguage, translations } from '../i18n';
|
|
|
|
interface Feature {
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
interface ProductPageProps {
|
|
title: string;
|
|
description: string;
|
|
icon: string;
|
|
trademark?: string;
|
|
features?: Feature[];
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
function ProductPage({ title, description, icon, trademark, features, 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">
|
|
{features ? (
|
|
<div style={{ marginBottom: '4rem' }}>
|
|
<h2 style={{ display: 'block', marginBottom: '4rem' }}>{t.detailsTitle}</h2>
|
|
<div className="about-grid">
|
|
{features.map((f, i) => (
|
|
<div key={i} className="feature-card" style={{
|
|
padding: '3rem 2rem',
|
|
borderRadius: '12px',
|
|
border: '1px solid var(--border-color)',
|
|
backgroundColor: 'var(--bg-white)',
|
|
textAlign: 'left',
|
|
boxShadow: '0 4px 12px rgba(0,0,0,0.05)',
|
|
flex: '1 1 350px'
|
|
}}>
|
|
<h3 style={{ color: 'var(--primary-color)', marginBottom: '1.5rem', fontSize: '1.5rem', textAlign: 'left' }}>{f.title}</h3>
|
|
<p style={{ fontSize: '1.1rem', lineHeight: '1.7', color: 'var(--text-secondary)', textAlign: 'left' }}>{f.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="product-details-grid">
|
|
<div>
|
|
<h2>{t.detailsTitle}</h2>
|
|
<p style={{ textAlign: 'left' }}>{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>
|
|
</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}
|
|
|
|
{trademark && (
|
|
<p style={{ fontSize: '0.8rem', fontStyle: 'italic', marginTop: '6rem', opacity: 0.7, textAlign: 'left' }}>
|
|
{trademark}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<Footer />
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default ProductPage;
|