diff --git a/Dockerfile b/Dockerfile index 073140e..458159c 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,9 +1,9 @@ -FROM nginx:alpine +FROM webdevops/php-nginx:8.2-alpine -RUN rm -rf /usr/share/nginx/html/* +ENV WEB_DOCUMENT_ROOT=/app -COPY ["Profice WebSite/", "/usr/share/nginx/html/"] +COPY ["Profice WebSite/", "/app/"] -RUN chmod -R 755 /usr/share/nginx/html/ +RUN chown -R application:application /app EXPOSE 80 \ No newline at end of file diff --git a/Profice WebSite/index.html b/Profice WebSite/index.html index c69a059..ebc3a2f 100644 --- a/Profice WebSite/index.html +++ b/Profice WebSite/index.html @@ -33,12 +33,8 @@ - -
-
-
-
-
+ +
@@ -520,111 +516,12 @@ - - - - - - + - - - diff --git a/Profice WebSite/scripts/add/send.php b/Profice WebSite/scripts/add/send.php index e759eb6..941a0d5 100644 --- a/Profice WebSite/scripts/add/send.php +++ b/Profice WebSite/scripts/add/send.php @@ -53,6 +53,11 @@ define('WEBHOOK_TEST', 'https://n8n.profice.de/webhook-test/d94ef798-3f43-46dd-8 define('WEBHOOK_PROD', 'https://n8n.profice.de/webhook/d94ef798-3f43-46dd-8207-1e335e64518f'); define('WEBHOOK_URL', USE_PRODUCTION ? WEBHOOK_PROD : WEBHOOK_TEST); +// KI Chat Webhook +define('KI_CHAT_WEBHOOK_TEST', 'https://n8n.profice.de/webhook-test/8a25bce2-ff83-4676-a3a2-a0e1174fcffe'); +define('KI_CHAT_WEBHOOK_PROD', 'https://n8n.profice.de/webhook/8a25bce2-ff83-4676-a3a2-a0e1174fcffe'); +define('KI_CHAT_WEBHOOK_URL', USE_PRODUCTION ? KI_CHAT_WEBHOOK_PROD : KI_CHAT_WEBHOOK_TEST); + // Google Analytics define('GA_MEASUREMENT_ID', 'G-XXXXXXXXXX'); // Replace with your actual ID define('GA_API_SECRET', ''); // For server-side tracking diff --git a/Profice WebSite/scripts/hex-background.js b/Profice WebSite/scripts/hex-background.js new file mode 100644 index 0000000..96d30a5 --- /dev/null +++ b/Profice WebSite/scripts/hex-background.js @@ -0,0 +1,277 @@ +/** + * Hexagonal Magnetism Background + * Rigid hexagon grid with mouse-based magnetism effect + * Hexagons move as whole units - no vertex deformation + */ + +(function() { + 'use strict'; + + // Configuration + const CONFIG = { + hexSize: 30, + lineWidth: 1, + maxLineWidth: 2.5, + baseOpacity: 0.2, + maxOpacity: 0.7, + magnetRadius: 180, + maxDisplacement: 12, + returnSpeed: 0.1, + // Colors (teal to orange gradient based on proximity) + tealR: 38, tealG: 166, tealB: 154, + orangeR: 245, orangeG: 124, orangeB: 0 + }; + + // State + let canvas, ctx; + let hexagons = []; + let mouse = { x: -1000, y: -1000 }; + let animationId; + let isInitialized = false; + + // Hexagon class - rigid shape, no vertex warping + class Hexagon { + constructor(originX, originY, size) { + this.originX = originX; + this.originY = originY; + this.currentX = originX; + this.currentY = originY; + this.size = size; + this.opacity = CONFIG.baseOpacity; + this.lineWidth = CONFIG.lineWidth; + this.colorInfluence = 0; + } + + // Calculate vertices relative to current center position + getVertices() { + const vertices = []; + for (let i = 0; i < 6; i++) { + // Pointy-top hexagon: first vertex at top + const angle = (Math.PI / 3) * i - Math.PI / 2; + vertices.push({ + x: this.currentX + this.size * Math.cos(angle), + y: this.currentY + this.size * Math.sin(angle) + }); + } + return vertices; + } + + update(mouseX, mouseY) { + const dx = mouseX - this.originX; + const dy = mouseY - this.originY; + const distance = Math.sqrt(dx * dx + dy * dy); + + if (distance < CONFIG.magnetRadius && distance > 0) { + // Calculate influence (stronger when closer) + const influence = 1 - (distance / CONFIG.magnetRadius); + const easedInfluence = easeOutCubic(influence); + + // Calculate displacement toward mouse (limited) + const angle = Math.atan2(dy, dx); + const displacement = CONFIG.maxDisplacement * easedInfluence; + + // Target position (pulled toward mouse) + const targetX = this.originX + Math.cos(angle) * displacement; + const targetY = this.originY + Math.sin(angle) * displacement; + + // Smooth interpolation to target + this.currentX += (targetX - this.currentX) * 0.15; + this.currentY += (targetY - this.currentY) * 0.15; + + // Update visual properties + this.opacity = CONFIG.baseOpacity + (CONFIG.maxOpacity - CONFIG.baseOpacity) * easedInfluence; + this.lineWidth = CONFIG.lineWidth + (CONFIG.maxLineWidth - CONFIG.lineWidth) * easedInfluence; + this.colorInfluence = easedInfluence; + } else { + // Return to origin with spring effect + this.currentX += (this.originX - this.currentX) * CONFIG.returnSpeed; + this.currentY += (this.originY - this.currentY) * CONFIG.returnSpeed; + + // Fade back to default + this.opacity += (CONFIG.baseOpacity - this.opacity) * CONFIG.returnSpeed; + this.lineWidth += (CONFIG.lineWidth - this.lineWidth) * CONFIG.returnSpeed; + this.colorInfluence += (0 - this.colorInfluence) * CONFIG.returnSpeed; + } + } + + draw(ctx) { + const vertices = this.getVertices(); + + ctx.beginPath(); + ctx.moveTo(vertices[0].x, vertices[0].y); + for (let i = 1; i < vertices.length; i++) { + ctx.lineTo(vertices[i].x, vertices[i].y); + } + ctx.closePath(); + + // Interpolate color: base gray -> teal -> orange + if (this.colorInfluence > 0.01) { + let r, g, b; + if (this.colorInfluence < 0.5) { + // Gray to teal + const t = this.colorInfluence * 2; + r = Math.round(119 + (CONFIG.tealR - 119) * t); + g = Math.round(119 + (CONFIG.tealG - 119) * t); + b = Math.round(100 + (CONFIG.tealB - 100) * t); + } else { + // Teal to orange + const t = (this.colorInfluence - 0.5) * 2; + r = Math.round(CONFIG.tealR + (CONFIG.orangeR - CONFIG.tealR) * t); + g = Math.round(CONFIG.tealG + (CONFIG.orangeG - CONFIG.tealG) * t); + b = Math.round(CONFIG.tealB + (CONFIG.orangeB - CONFIG.tealB) * t); + } + ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${this.opacity})`; + } else { + ctx.strokeStyle = `rgba(119, 119, 100, ${this.opacity})`; + } + + ctx.lineWidth = this.lineWidth; + ctx.stroke(); + } + } + + // Easing function for smooth animations + function easeOutCubic(t) { + return 1 - Math.pow(1 - t, 3); + } + + // Initialize canvas + function init() { + canvas = document.getElementById('hexCanvas'); + if (!canvas) { + console.warn('hexCanvas element not found'); + return; + } + + ctx = canvas.getContext('2d'); + resize(); + generateHexagons(); + + // Event listeners + window.addEventListener('resize', debounce(handleResize, 150)); + document.addEventListener('mousemove', handleMouseMove); + document.addEventListener('mouseleave', handleMouseLeave); + + isInitialized = true; + animate(); + } + + // Generate hexagon grid with proper pointy-top tessellation + function generateHexagons() { + hexagons = []; + + // Pointy-top hexagon math: + // horizontal spacing = size * sqrt(3) + // vertical spacing = size * 1.5 + // every odd row offset by horizontal_spacing / 2 + const horizSpacing = CONFIG.hexSize * Math.sqrt(3); + const vertSpacing = CONFIG.hexSize * 1.5; + + const cols = Math.ceil(window.innerWidth / horizSpacing) + 3; + const rows = Math.ceil(window.innerHeight / vertSpacing) + 3; + + for (let row = -1; row < rows; row++) { + for (let col = -1; col < cols; col++) { + // Offset every odd row by half horizontal spacing + const xOffset = (row % 2 === 1) ? horizSpacing / 2 : 0; + const x = col * horizSpacing + xOffset; + const y = row * vertSpacing; + + hexagons.push(new Hexagon(x, y, CONFIG.hexSize)); + } + } + } + + // Resize handler + function handleResize() { + resize(); + generateHexagons(); + } + + function resize() { + const dpr = window.devicePixelRatio || 1; + canvas.width = window.innerWidth * dpr; + canvas.height = window.innerHeight * dpr; + canvas.style.width = window.innerWidth + 'px'; + canvas.style.height = window.innerHeight + 'px'; + ctx.scale(dpr, dpr); + } + + // Mouse handlers + function handleMouseMove(e) { + mouse.x = e.clientX; + mouse.y = e.clientY; + } + + function handleMouseLeave() { + mouse.x = -1000; + mouse.y = -1000; + } + + // Animation loop + function animate() { + if (!isInitialized) return; + + ctx.clearRect(0, 0, canvas.width, canvas.height); + + const updateRadius = CONFIG.magnetRadius + CONFIG.hexSize * 2; + + for (let i = 0; i < hexagons.length; i++) { + const hex = hexagons[i]; + + // Check if hexagon needs updating (near mouse or returning to origin) + const dx = mouse.x - hex.originX; + const dy = mouse.y - hex.originY; + const distance = Math.sqrt(dx * dx + dy * dy); + const isReturning = Math.abs(hex.currentX - hex.originX) > 0.1 || + Math.abs(hex.currentY - hex.originY) > 0.1; + + if (distance < updateRadius || isReturning) { + hex.update(mouse.x, mouse.y); + } + + hex.draw(ctx); + } + + animationId = requestAnimationFrame(animate); + } + + // Debounce utility + function debounce(func, wait) { + let timeout; + return function executedFunction(...args) { + const later = () => { + clearTimeout(timeout); + func(...args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; + } + + // Cleanup + function destroy() { + if (animationId) { + cancelAnimationFrame(animationId); + } + window.removeEventListener('resize', handleResize); + document.removeEventListener('mousemove', handleMouseMove); + document.removeEventListener('mouseleave', handleMouseLeave); + isInitialized = false; + } + + // Initialize on DOM ready + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', init); + } else { + init(); + } + + // Expose for potential external control + window.HexBackground = { + init, + destroy, + config: CONFIG + }; + +})(); diff --git a/Profice WebSite/sites/automatisation.html b/Profice WebSite/sites/automatisation.html index 2163eb7..ec2c06b 100644 --- a/Profice WebSite/sites/automatisation.html +++ b/Profice WebSite/sites/automatisation.html @@ -22,6 +22,9 @@ + + +
@@ -288,9 +291,8 @@
- - + diff --git a/Profice WebSite/sites/ki-integration.html b/Profice WebSite/sites/ki-integration.html index 89c23b7..cdbeca9 100644 --- a/Profice WebSite/sites/ki-integration.html +++ b/Profice WebSite/sites/ki-integration.html @@ -22,6 +22,9 @@ + + +
@@ -300,9 +303,8 @@
- - + diff --git a/Profice WebSite/sites/leads.html b/Profice WebSite/sites/leads.html index baf98f9..025589e 100644 --- a/Profice WebSite/sites/leads.html +++ b/Profice WebSite/sites/leads.html @@ -23,6 +23,9 @@ + + +
@@ -194,6 +197,7 @@ + diff --git a/Profice WebSite/sites/offers.html b/Profice WebSite/sites/offers.html index e25a5b3..3e7e980 100644 --- a/Profice WebSite/sites/offers.html +++ b/Profice WebSite/sites/offers.html @@ -22,6 +22,9 @@ + + +
@@ -191,6 +194,7 @@ + diff --git a/Profice WebSite/sites/website.html b/Profice WebSite/sites/website.html index 50fb8f2..716a7f6 100644 --- a/Profice WebSite/sites/website.html +++ b/Profice WebSite/sites/website.html @@ -22,6 +22,9 @@ + + +
@@ -274,9 +277,8 @@
- - + diff --git a/Profice WebSite/style/design.css b/Profice WebSite/style/design.css index e80907d..d0c9905 100644 --- a/Profice WebSite/style/design.css +++ b/Profice WebSite/style/design.css @@ -20,9 +20,20 @@ body { min-height: 100vh; } +/* Hexagonal Canvas Background */ +#hexCanvas { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: -1; + pointer-events: none; +} + /* Top Banner - Ultra Smooth Performance */ .top-banner { - background-color: var(--primary-light); + background-color: rgba(235, 235, 222, 0.85); color: var(--primary-dark); padding: 5px 40px; height: 90px; @@ -36,6 +47,8 @@ body { z-index: 1001; border-bottom: 3px solid var(--accent-orange); overflow: hidden; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); /* Ultra-smooth transitions with hardware acceleration */ transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), @@ -69,37 +82,6 @@ body { transition-duration: 0.2s; } -/* Light blink effect for top banner */ -.top-banner::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 2px; - background: var(--accent-orange); - animation: lightBlink 3s ease-in-out infinite; - z-index: 1; - pointer-events: none; -} - -@keyframes lightBlink { - 0% { - left: -100%; - opacity: 0; - } - 10% { - opacity: 1; - } - 90% { - opacity: 1; - } - 100% { - left: 100%; - opacity: 0; - } -} - .top-banner-left { display: flex; align-items: center; @@ -1160,7 +1142,7 @@ body { /* Footer Banner Styles */ .footer-banner { - background: #2a2a2a !important; + background: rgba(42, 42, 42, 0.85) !important; color: var(--primary-light) !important; padding: 60px 0 30px; margin: 80px 0 0 0; @@ -1168,22 +1150,8 @@ body { width: 100%; position: relative; overflow: hidden; -} - -.footer-banner::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 1px; - background: linear-gradient(90deg, transparent, var(--accent-orange), transparent); - animation: shimmer 3s infinite; -} - -@keyframes shimmer { - 0% { transform: translateX(-100%); } - 100% { transform: translateX(100%); } + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); } .footer-container { diff --git a/Profice WebSite/style/tech-onepager.css b/Profice WebSite/style/tech-onepager.css index ceb0ca6..7f67c0f 100644 --- a/Profice WebSite/style/tech-onepager.css +++ b/Profice WebSite/style/tech-onepager.css @@ -3,52 +3,15 @@ * System being built aesthetic - not marketing campaign */ -/* ===== TECH BACKGROUND ===== */ +/* ===== TECH BACKGROUND (disabled - replaced by hexCanvas) ===== */ .tech-background { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: -1; - overflow: hidden; -} - -.grid-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-image: - linear-gradient(rgba(79, 71, 71, 0.12) 1px, transparent 1px), - linear-gradient(90deg, rgba(79, 71, 71, 0.12) 1px, transparent 1px); - background-size: 50px 50px; - pointer-events: none; -} - -.dot-pattern { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-image: radial-gradient(circle, rgba(79, 71, 71, 0.12) 1px, transparent 1px); - background-size: 20px 20px; - pointer-events: none; + display: none; } +.grid-overlay, +.dot-pattern, .gradient-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(135deg, - rgba(235, 235, 222, 0.8) 0%, - rgba(235, 235, 222, 0.6) 50%, - rgba(235, 235, 222, 0.4) 100%); - pointer-events: none; + display: none; } /* ===== HERO SECTION ===== */ @@ -71,6 +34,7 @@ .hero-left { max-width: 600px; + width: 100%; } .hero-headline { @@ -85,18 +49,32 @@ .hero-subline { font-size: 1.25rem; line-height: 1.6; - color: var(--primary-mid); + color: var(--primary-dark); margin-bottom: 20px; font-weight: 400; + background: rgba(102, 187, 106, 0.35); + padding: 16px 20px; + padding-left: 20px; + border-left: 3px solid var(--accent-teal); + background: rgba(102, 187, 106, 0.35); + border-radius: 0 8px 8px 0; + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + display: inline-block; } .hero-proof { font-size: 1.1rem; - color: var(--accent-teal); + color: var(--primary-dark); font-weight: 500; margin-bottom: 40px; - padding-left: 20px; + padding: 12px 20px; border-left: 3px solid var(--accent-teal); + background: rgba(102, 187, 106, 0.35); + border-radius: 0 8px 8px 0; + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + display: inline-block; } .hero-buttons { @@ -379,8 +357,7 @@ /* ===== SYSTEME SECTION ===== */ .systeme-section { padding: 100px 40px; - background: rgba(255, 255, 255, 0.3); - backdrop-filter: blur(10px); + background: transparent; } .container { @@ -1247,8 +1224,7 @@ /* ===== QUALIFICATION SECTION ===== */ .qualification-section { padding: 100px 40px; - background: rgba(255, 255, 255, 0.2); - backdrop-filter: blur(10px); + background: transparent; } .qualification-grid { @@ -1406,26 +1382,11 @@ /* ===== PROCESS SECTION ===== */ .process-section { padding: 100px 40px; - background: rgba(255, 255, 255, 0.3); - backdrop-filter: blur(10px); + background: transparent; position: relative; overflow: hidden; } -.process-section::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(90deg, - transparent 0%, - rgba(38, 166, 154, 0.05) 50%, - transparent 100%); - pointer-events: none; -} - .process-line { display: flex; align-items: center; @@ -1624,24 +1585,11 @@ /* ===== ERGEBNISSE SECTION ===== */ .results-section { padding: 100px 40px; - background: rgba(255, 255, 255, 0.15); - backdrop-filter: blur(15px); + background: transparent; position: relative; overflow: hidden; } -.results-section::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: radial-gradient(circle at 30% 50%, rgba(38, 166, 154, 0.1) 0%, transparent 50%), - radial-gradient(circle at 70% 50%, rgba(102, 187, 106, 0.1) 0%, transparent 50%); - pointer-events: none; -} - .results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); @@ -1760,26 +1708,11 @@ /* ===== INTERACTION SECTION ===== */ .interaction-section { padding: 100px 40px; - background: rgba(255, 255, 255, 0.3); - backdrop-filter: blur(10px); + background: transparent; position: relative; overflow: hidden; } -.interaction-section::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(45deg, - transparent 30%, - rgba(38, 166, 154, 0.05) 50%, - transparent 70%); - pointer-events: none; -} - .interaction-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));