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,46 +34,70 @@ function ProductPage({ title, description, icon, trademark, children }: ProductP
         
         <section className="section">
           <div className="container">
-            <div className="product-details-grid">
+            {features ? (
-              <div>
+              <div style={{ marginBottom: '4rem' }}>
-                <h2>{t.detailsTitle}</h2>
+                <h2 style={{ display: 'block', marginBottom: '4rem' }}>{t.detailsTitle}</h2>
-                <p>{t.detailsText}</p>
+                <div className="about-grid">
-                <ul style={{ listStyle: 'none', marginTop: '2rem' }}>
+                  {features.map((f, i) => (
-                  <li style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}>
+                    <div key={i} className="feature-card" style={{ 
-                    <span className="material-icons" style={{ color: 'var(--accent-color)' }}>check_circle</span>
+                      padding: '3rem 2rem', 
-                    {t.featureSecurity}
+                      borderRadius: '12px', 
-                  </li>
+                      border: '1px solid var(--border-color)',
-                  <li style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}>
+                      backgroundColor: 'var(--bg-white)',
-                    <span className="material-icons" style={{ color: 'var(--accent-color)' }}>check_circle</span>
+                      textAlign: 'left',
-                    {t.featureIntegration}
+                      boxShadow: '0 4px 12px rgba(0,0,0,0.05)',
-                  </li>
+                      flex: '1 1 350px'
-                  <li style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}>
+                    }}>
-                    <span className="material-icons" style={{ color: 'var(--accent-color)' }}>check_circle</span>
+                      <h3 style={{ color: 'var(--primary-color)', marginBottom: '1.5rem', fontSize: '1.5rem', textAlign: 'left' }}>{f.title}</h3>
-                    {t.featureSupport}
+                      <p style={{ fontSize: '1.1rem', lineHeight: '1.7', color: 'var(--text-secondary)', textAlign: 'left' }}>{f.description}</p>
-                  </li>
+                    </div>
-                </ul>
+                  ))}
-                {trademark && (
+                </div>
-                  <p style={{ fontSize: '0.8rem', fontStyle: 'italic', marginTop: '2rem', opacity: 0.7 }}>
-                    {trademark}
-                  </p>
-                )}
               </div>
-              <div style={{ 
+            ) : (
-                backgroundColor: 'var(--bg-light)', 
+              <div className="product-details-grid">
-                height: '400px', 
+                <div>
-                borderRadius: '8px', 
+                  <h2>{t.detailsTitle}</h2>
-                border: '1px solid var(--border-color)',
+                  <p style={{ textAlign: 'left' }}>{t.detailsText}</p>
-                display: 'flex',
+                  <ul style={{ listStyle: 'none', marginTop: '2rem' }}>
-                alignItems: 'center',
+                    <li style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}>
-                justifyContent: 'center',
+                      <span className="material-icons" style={{ color: 'var(--accent-color)' }}>check_circle</span>
-                flexDirection: 'column',
+                      {t.featureSecurity}
-                color: 'var(--text-secondary)'
+                    </li>
-              }}>
+                    <li style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}>
-                <span className="material-icons" style={{ fontSize: '5rem', marginBottom: '1rem', opacity: 0.3 }}>image</span>
+                      <span className="material-icons" style={{ color: 'var(--accent-color)' }}>check_circle</span>
-                <p>{t.screenshotPlaceholder}</p>
+                      {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>

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,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>
   );
 };