euastra/homepage
4
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Produkt Page erstellt

Browse Source
This commit is contained in:
Dionis
2026-03-01 15:24:51 +01:00
parent dd8a404b98
commit a425bfcc0f
3 changed files with 187 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/components/ProductPage.tsx
View File

@@ -2,15 +2,21 @@ 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, children }: ProductPageProps) {
function ProductPage({ title, description, icon, trademark, features, children }: ProductPageProps) {
const lang = getLanguage();
const t = translations[lang].common;
@@ -28,46 +34,70 @@ function ProductPage({ title, description, icon, trademark, children }: ProductP
<section className="section">
<div className="container">
<div className="product-details-grid">
<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>
)}
{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 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 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>
</div>
)}
{children}
{trademark && (
<p style={{ fontSize: '0.8rem', fontStyle: 'italic', marginTop: '6rem', opacity: 0.7, textAlign: 'left' }}>
{trademark}
</p>
)}
</div>
</section>
</main>