Produkt Page erstellt

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

View File

@@ -7,14 +7,71 @@ import { getLanguage, translations } from '../../i18n'
const Page = () => {
const lang = getLanguage();
const t = translations[lang].products.boss4j;
const common = translations[lang].common;
return (
<ProductPage
title={t.title}
description={t.text}
icon="layers"
trademark={t.trademark}
/>
trademark={t.trademark}
features={t.features}
>
<div style={{ marginTop: '6rem' }}>
<h2 style={{ marginBottom: '3rem', display: 'block' }}>{lang === 'de' ? 'Warum Boss4J?' : 'Why Boss4J?'}</h2>
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
gap: '2.5rem',
textAlign: 'left'
}}>
<div style={{ padding: '2rem', borderLeft: '5px solid var(--accent-color)', backgroundColor: 'var(--bg-light)', borderRadius: '0 8px 8px 0' }}>
<h4 style={{ color: 'var(--primary-color)', marginBottom: '1rem', fontSize: '1.3rem' }}>{lang === 'de' ? 'Direkte Kontrolle' : 'Direct Control'}</h4>
<p style={{ textAlign: 'left', fontSize: '1.05rem', lineHeight: '1.6' }}>
{lang === 'de'
? 'Verwalten Sie Ihre Server ohne Umwege über komplexe Management-Konsolen oder eingeschränkte CLIs.'
: 'Manage your servers directly without detours through complex management consoles or restricted CLIs.'}
</p>
</div>
<div style={{ padding: '2rem', borderLeft: '5px solid var(--accent-color)', backgroundColor: 'var(--bg-light)', borderRadius: '0 8px 8px 0' }}>
<h4 style={{ color: 'var(--primary-color)', marginBottom: '1rem', fontSize: '1.3rem' }}>{lang === 'de' ? 'Operative Sicherheit' : 'Operational Safety'}</h4>
<p style={{ textAlign: 'left', fontSize: '1.05rem', lineHeight: '1.6' }}>
{lang === 'de'
? 'Minimieren Sie Fehlkonfigurationen durch Dry-Runs und die Gewissheit, jederzeit auf alte Versionen zurückgreifen zu können.'
: 'Minimize misconfigurations with dry-runs and the certainty of being able to revert to old versions at any time.'}
</p>
</div>
<div style={{ padding: '2rem', borderLeft: '5px solid var(--accent-color)', backgroundColor: 'var(--bg-light)', borderRadius: '0 8px 8px 0' }}>
<h4 style={{ color: 'var(--primary-color)', marginBottom: '1rem', fontSize: '1.3rem' }}>{lang === 'de' ? 'Volle Transparenz' : 'Full Transparency'}</h4>
<p style={{ textAlign: 'left', fontSize: '1.05rem', lineHeight: '1.6' }}>
{lang === 'de'
? 'Behalten Sie den Überblick über Ihre gesamte Infrastruktur-Topologie und den aktuellen Gesundheitszustand jeder Instanz.'
: 'Keep track of your entire infrastructure topology and the current health status of every instance.'}
</p>
</div>
</div>
</div>
<div style={{
marginTop: '6rem',
padding: '2rem',
backgroundColor: 'var(--bg-light)',
borderRadius: '0px',
textAlign: 'center',
border: '1px solid var(--border-color)',
}}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '1rem', marginBottom: '1rem' }}>
<span className="material-icons" style={{ color: 'var(--accent-color)' }}>support_agent</span>
<h3 style={{ margin: 0, fontSize: '1.25rem', color: 'var(--primary-color)' }}>{t.support.title}</h3>
</div>
<p style={{ color: 'var(--text-secondary)', fontSize: '1rem', maxWidth: '700px', margin: '0 auto 1.5rem' }}>
{t.support.description}
</p>
<div style={{ fontSize: '0.85rem', color: 'var(--primary-color)', fontWeight: 'bold', textTransform: 'uppercase', letterSpacing: '1px' }}>
{lang === 'de' ? 'Support durch das Euastra Expertenteam' : 'Direct Support by the Euastra Expert Team'}
</div>
</div>
</ProductPage>
);
};