initial commit

scripts/details.js

@@ -0,0 +1,124 @@
+// details.js
+
+document.addEventListener("DOMContentLoaded", function() {
+    const serviceDetails = {
+        'seo-optimierung': {
+            title: 'SEO Optimierung',
+            icon: '🔍',
+            description: 'Verbessern Sie Ihre Sichtbarkeit in Suchmaschinen und erreichen Sie mehr Kunden online.',
+            fullDescription: 'Unsere SEO-Optimierungsdienste helfen Ihnen, in Suchmaschinen besser gefunden zu werden. Wir analysieren Ihre Website, identifizieren Optimierungspotenziale und implementieren bewährte Strategien, um Ihr Ranking zu verbessern und mehr qualifizierte Besucher anzuziehen.',
+            features: [
+                'Keyword-Analyse und -Recherche',
+                'On-Page Optimierung',
+                'Technische SEO-Audits',
+                'Content-Strategie',
+                'Link-Building',
+                'Performance-Tracking'
+            ],
+            benefits: [
+                'Höhere Sichtbarkeit in Suchmaschinen',
+                'Mehr qualifizierte Besucher',
+                'Verbesserte Conversion-Raten',
+                'Langfristiger ROI'
+            ]
+        },
+        'cloud-migration': {
+            title: 'Cloud Migration',
+            icon: '☁️',
+            description: 'Modernisieren Sie Ihre IT-Infrastruktur mit sicheren und skalierbaren Cloud-Lösungen.',
+            fullDescription: 'Wir begleiten Sie bei der Migration Ihrer IT-Systeme in die Cloud. Von der Analyse Ihrer bestehenden Infrastruktur bis zur vollständigen Implementierung sorgen wir für einen reibungslosen Übergang mit minimalem Geschäftsausfall.',
+            features: [
+                'Infrastruktur-Analyse',
+                'Migrationsplanung',
+                'Datenübertragung',
+                'Sicherheit & Compliance',
+                'Performance-Optimierung',
+                'Schulung & Support'
+            ],
+            benefits: [
+                'Kosteneinsparungen',
+                'Bessere Skalierbarkeit',
+                'Erhöhte Sicherheit',
+                'Flexiblere Arbeitsweise'
+            ]
+        },
+        'datenanalyse': {
+            title: 'Datenanalyse',
+            icon: '📊',
+            description: 'Gewinnen Sie wertvolle Einblicke aus Ihren Daten mit unseren Analyse-Lösungen.',
+            fullDescription: 'Wir helfen Ihnen, Ihre Daten in wertvolle Erkenntnisse umzuwandeln. Mit modernen Analyse-Tools und -Methoden identifizieren wir Trends, Muster und Chancen, die Ihre Geschäftsentscheidungen verbessern.',
+            features: [
+                'Datenerfassung & -bereinigung',
+                'Statistische Analyse',
+                'Visualisierung & Dashboards',
+                'Predictive Analytics',
+                'Berichterstellung',
+                'Consulting'
+            ],
+            benefits: [
+                'Bessere Entscheidungen',
+                'Prozessoptimierung',
+                'Kostensenkungen',
+                'Wettbewerbsvorteile'
+            ]
+        }
+    };
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const serviceId = urlParams.get('service');
+    const detailsContainer = document.getElementById('service-details');
+
+    if (serviceId && serviceDetails[serviceId]) {
+        const service = serviceDetails[serviceId];
+        
+        detailsContainer.innerHTML = `
+            <div class="service-header">
+                <div class="service-icon-large">${service.icon}</div>
+                <h1 class="service-title-large">${service.title}</h1>
+                <p class="service-description-large">${service.description}</p>
+            </div>
+            
+            <div class="service-content">
+                <section class="service-section">
+                    <h2 class="section-title">Beschreibung</h2>
+                    <p class="section-text">${service.fullDescription}</p>
+                </section>
+                
+                <section class="service-section">
+                    <h2 class="section-title">Unsere Leistungen</h2>
+                    <ul class="feature-list">
+                        ${service.features.map(feature => `<li>${feature}</li>`).join('')}
+                    </ul>
+                </section>
+                
+                <section class="service-section">
+                    <h2 class="section-title">Ihre Vorteile</h2>
+                    <ul class="benefit-list">
+                        ${service.benefits.map(benefit => `<li>${benefit}</li>`).join('')}
+                    </ul>
+                </section>
+                
+                <section class="service-section">
+                    <h2 class="section-title">Interesse?</h2>
+                    <p class="section-text">Kontaktieren Sie uns für eine persönliche Beratung und ein maßgeschneidertes Angebot.</p>
+                    <div class="cta-buttons">
+                        <a href="offers.html" class="cta-btn primary">Kontakt aufnehmen</a>
+                        <a href="leads.html" class="cta-btn secondary">Zurück zum Dashboard</a>
+                    </div>
+                </section>
+            </div>
+        `;
+        
+        // Update page title
+        document.title = `Profice - ${service.title}`;
+    } else {
+        // Fallback if no service specified
+        detailsContainer.innerHTML = `
+            <div class="error-message">
+                <h2>Service nicht gefunden</h2>
+                <p>Der angeforderte Service konnte nicht gefunden werden.</p>
+                <a href="leads.html" class="cta-btn secondary">Zurück zum Dashboard</a>
+            </div>
+        `;
+    }
+});