Produkt Page erstellt

src/components/ProductPage.tsx

@@ -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,10 +34,31 @@ function ProductPage({ title, description, icon, trademark, children }: ProductP
         
         <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>{t.detailsText}</p>
+                  <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>
@@ -46,11 +73,6 @@ function ProductPage({ title, description, icon, trademark, children }: ProductP
                       {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)', 
@@ -67,7 +89,15 @@ function ProductPage({ title, description, icon, trademark, children }: ProductP
                   <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>

src/i18n.ts

@@ -55,6 +55,36 @@ export const translations = {
         title: 'Boss4J',
         text: 'Die erstklassige Orchestrierungs-Suite für JBoss® und WildFly® Anwendungsserver. Vereinfachen Sie die Verwaltung komplexer Cluster und automatisieren Sie Deployments.',
         trademark: 'JBoss® und WildFly® sind eingetragene Marken von Red Hat, Inc.',
+        features: [
+          {
+            title: 'Instanz- & JVM-Lifecycle',
+            description: 'Zentrale Steuerung Ihrer Anwendungsserver. Starten, Stoppen und Neustarten von Instanzen direkt über die Weboberfläche mit tiefer JVM-Einsicht.'
+          },
+          {
+            title: 'Konfigurations-Management',
+            description: 'Direktes Editieren von XML- und Properties-Dateien mit Dry-Run-Modus, visuellen Diffs und automatischer Versionierung für sichere Rollbacks.'
+          },
+          {
+            title: 'Deployment-Orchestrierung',
+            description: 'Automatisierte WAR-Deployments mit Prüfung von Marker-Files, Checksummen-Verifizierung und Unterstützung für Deployment-Queues.'
+          },
+          {
+            title: 'Health-Monitoring',
+            description: 'Echtzeit-Dashboards, historische Status-Heatmaps und detailliertes Heap-Speicher-Monitoring via jstat für maximale Verfügbarkeit.'
+          },
+          {
+            title: 'Log-Management',
+            description: 'Fortschrittlicher Log-Viewer mit Suche und Tailing. Automatische Wartung durch Gzip-Kompression alter Log-Dateien zur Speicherplatzoptimierung.'
+          },
+          {
+            title: 'Infrastruktur-Visualisierung',
+            description: 'Automatische Topologie-Erkennung von Apache VHosts und Nginx Upstreams zur grafischen Darstellung Ihrer gesamten Systemlandschaft.'
+          }
+        ],
+        support: {
+          title: '24/7 Enterprise Support Paket',
+          description: 'Maximale Sicherheit für Ihren geschäftskritischen Betrieb. Unser Expertenteam steht Ihnen rund um die Uhr zur Verfügung.'
+        }
       },
       cert: {
         title: 'Zertifikatsverwaltung',
@@ -191,6 +221,36 @@ export const translations = {
         title: 'Boss4J',
         text: 'The premier orchestration suite for JBoss® and WildFly® application servers. Simplify management of complex clusters and automate deployments.',
         trademark: 'JBoss® and WildFly® are registered trademarks of Red Hat, Inc.',
+        features: [
+          {
+            title: 'Instance & JVM Lifecycle',
+            description: 'Centralized control of your application servers. Start, stop, and restart instances directly from the web interface with deep JVM insights.'
+          },
+          {
+            title: 'Configuration Management',
+            description: 'Direct editing of XML and Properties files with dry-run mode, visual diffs, and automatic versioning for safe rollbacks.'
+          },
+          {
+            title: 'Deployment Orchestration',
+            description: 'Automated WAR deployments with marker file tracking, checksum verification, and support for deployment queues.'
+          },
+          {
+            title: 'Health Monitoring',
+            description: 'Real-time dashboards, historical status heatmaps, and detailed heap memory monitoring via jstat for maximum availability.'
+          },
+          {
+            title: 'Log Management',
+            description: 'Advanced log viewer with search and tailing. Automatic maintenance through Gzip compression of old log files to optimize disk space.'
+          },
+          {
+            title: 'Infrastructure Visualization',
+            description: 'Automatic topology discovery of Apache VHosts and Nginx upstreams to graphically represent your entire system landscape.'
+          }
+        ],
+        support: {
+          title: '24/7 Enterprise Support Package',
+          description: 'Maximum security for your operations. Our expert team is at your service around the clock.'
+        }
       },
       cert: {
         title: 'Certificate Management',

src/pages/boss4j/main.tsx

@@ -7,6 +7,7 @@ import { getLanguage, translations } from '../../i18n'
 const Page = () => {
   const lang = getLanguage();
   const t = translations[lang].products.boss4j;
+  const common = translations[lang].common;
   
   return (
     <ProductPage 
@@ -14,7 +15,63 @@ const Page = () => {
       description={t.text} 
       icon="layers" 
       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>
   );
 };