242 lines
13 KiB
PHP
242 lines
13 KiB
PHP
<?php require_once 'includes/lang_loader.php'; ?>
|
||
<!DOCTYPE html>
|
||
<html lang="<?php echo $lang; ?>">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Future Now - KI-Beratung</title>
|
||
|
||
<meta name="description" content="<?php echo htmlspecialchars($_SERVER['PROJECT_DESCRIPTION'] ?? 'Deutsche KI-Beratung für kleine und mittelständische Unternehmen. Machen Sie den KI-Reifegrad-Check.'); ?>">
|
||
<meta property="og:title" content="Future Now - KI-Beratung">
|
||
<meta property="og:description" content="<?php echo htmlspecialchars($_SERVER['PROJECT_DESCRIPTION'] ?? 'Deutsche KI-Beratung für kleine und mittelständische Unternehmen. Machen Sie den KI-Reifegrad-Check.'); ?>">
|
||
<meta property="og:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="Future Now - KI-Beratung">
|
||
<meta name="twitter:description" content="<?php echo htmlspecialchars($_SERVER['PROJECT_DESCRIPTION'] ?? 'Deutsche KI-Beratung für kleine und mittelständische Unternehmen. Machen Sie den KI-Reifegrad-Check.'); ?>">
|
||
<meta name="twitter:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
|
||
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<?php include 'includes/header.php'; ?>
|
||
|
||
<main>
|
||
<section id="home" class="hero-section">
|
||
<div class="hero-background-effects">
|
||
<div class="hero-grid-overlay"></div>
|
||
<div class="hero-orb orb-1"></div>
|
||
<div class="hero-orb orb-2"></div>
|
||
</div>
|
||
<div class="hero-content-container">
|
||
<div class="hero-left">
|
||
<div class="glass-container">
|
||
<h1 class="hero-headline">
|
||
<?php echo $t['hero_headline']; ?>
|
||
</h1>
|
||
<p class="hero-subtext">
|
||
<?php echo $t['hero_subtext']; ?>
|
||
</p>
|
||
<a href="#ki-check" class="btn btn-primary hero-cta">
|
||
<?php echo $t['hero_cta']; ?>
|
||
<svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
|
||
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="hero-right">
|
||
<div class="hero-visual">
|
||
<div class="card-stack">
|
||
<div class="flow-card card-1">
|
||
<div class="card-header">
|
||
<span class="card-icon">📋</span>
|
||
<span class="card-title">Fragebogen</span>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="progress-label">25 Fragen</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flow-arrow">↓</div>
|
||
<div class="flow-card card-2">
|
||
<div class="card-header">
|
||
<span class="card-icon">🤖</span>
|
||
<span class="card-title">AI Processing</span>
|
||
</div>
|
||
<div class="card-content">
|
||
<p>Ihre Daten werden verarbeitet...</p>
|
||
</div>
|
||
</div>
|
||
<div class="flow-arrow">↓</div>
|
||
<div class="flow-card card-3">
|
||
<div class="card-header">
|
||
<span class="card-icon">📄</span>
|
||
<span class="card-title">Report</span>
|
||
</div>
|
||
<div class="card-content">
|
||
<p>Ihr persönlicher Report ist fertig.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a href="#social-proof" class="scroll-indicator">
|
||
<div class="mouse-icon">
|
||
<div class="scroll-wheel"></div>
|
||
</div>
|
||
</a>
|
||
</section>
|
||
|
||
<!-- SOCIAL PROOF SECTION -->
|
||
<section id="social-proof" class="social-proof-section">
|
||
<p class="social-proof-headline"> Vertraut von 500+ deutschen Unternehmen </p>
|
||
<div class="logo-marquee">
|
||
<div class="logo-track">
|
||
<!-- Duplicate logos twice for seamless loop -->
|
||
<div class="logo-item">TechCorp</div>
|
||
<div class="logo-item">InnovateLabs</div>
|
||
<div class="logo-item">FutureWorks</div>
|
||
<div class="logo-item">DataFlow</div>
|
||
<div class="logo-item">SmartSolutions</div>
|
||
<div class="logo-item">AIVentures</div>
|
||
<div class="logo-item">CloudSync</div>
|
||
<div class="logo-item">AutomateHub</div>
|
||
<!-- Duplicate set for seamless loop -->
|
||
<div class="logo-item">TechCorp</div>
|
||
<div class="logo-item">InnovateLabs</div>
|
||
<div class="logo-item">FutureWorks</div>
|
||
<div class="logo-item">DataFlow</div>
|
||
<div class="logo-item">SmartSolutions</div>
|
||
<div class="logo-item">AIVentures</div>
|
||
<div class="logo-item">CloudSync</div>
|
||
<div class="logo-item">AutomateHub</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- VALUE PROPOSITION SECTION -->
|
||
<section id="value-proposition" class="value-prop-section">
|
||
<div class="container-custom">
|
||
<div class="section-header">
|
||
<h2 class="section-headline">Ihr schneller Weg zum <span class="gradient-text">KI-Vorsprung</span></h2>
|
||
<p class="section-subtext">Wir machen Komplexes einfach und liefern Ihnen in kürzester Zeit einen klaren, umsetzbaren Plan.</p>
|
||
</div>
|
||
<div class="value-cards-grid">
|
||
<!-- Card 1 -->
|
||
<div class="value-card animate-on-scroll">
|
||
<div class="value-card-icon-wrapper">
|
||
<span class="value-card-icon">🗺️</span>
|
||
</div>
|
||
<h3 class="value-card-title">Schritt-für-Schritt Blueprint</h3>
|
||
<p class="value-card-text">Sie erhalten eine klare Roadmap, die genau auf Ihr Unternehmen zugeschnitten ist – keine vagen Empfehlungen.</p>
|
||
</div>
|
||
<!-- Card 2 -->
|
||
<div class="value-card animate-on-scroll">
|
||
<div class="value-card-icon-wrapper">
|
||
<span class="value-card-icon">✅</span>
|
||
</div>
|
||
<h3 class="value-card-title">Konkrete Use Cases</h3>
|
||
<p class="value-card-text">Wir identifizieren die profitabelsten KI-Anwendungen für Ihre Branche und Ihre spezifischen Prozesse.</p>
|
||
</div>
|
||
<!-- Card 3 -->
|
||
<div class="value-card animate-on-scroll">
|
||
<div class="value-card-icon-wrapper">
|
||
<span class="value-card-icon">🚀</span>
|
||
</div>
|
||
<h3 class="value-card-title">Sofortige Umsetzung</h3>
|
||
<p class="value-card-text">Unsere Ergebnisse sind so aufbereitet, dass Sie direkt mit der Implementierung beginnen können.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- HOW IT WORKS SECTION -->
|
||
<section id="how-it-works" class="how-it-works-section">
|
||
<div class="container-custom">
|
||
<div class="section-header">
|
||
<h2 class="section-headline">So einfach geht's</h2>
|
||
<p class="section-subtext">Von der ersten Frage bis zu Ihrem persönlichen KI-Blueprint</p>
|
||
</div>
|
||
<div class="timeline">
|
||
<!-- Step 1 -->
|
||
<div class="step-card">
|
||
<div class="step-number">01</div>
|
||
<div class="step-body">
|
||
<span class="step-icon">📋</span>
|
||
<h3 class="step-title">Fragen beantworten</h3>
|
||
<p class="step-text">Füllen Sie unseren intelligenten Fragebogen in ca. 5-10 Minuten aus. Ihre Antworten bilden die Grundlage für Ihre Analyse.</p>
|
||
</div>
|
||
</div>
|
||
<!-- Step 2 -->
|
||
<div class="step-card">
|
||
<div class="step-number">02</div>
|
||
<div class="step-body">
|
||
<span class="step-icon">🤖</span>
|
||
<h3 class="step-title">KI-Analyse erhalten</h3>
|
||
<p class="step-text">Unsere KI analysiert Ihre Antworten und erstellt in Echtzeit einen umfassenden Bericht über Ihr Potenzial und Ihre Reife.</p>
|
||
</div>
|
||
</div>
|
||
<!-- Step 3 -->
|
||
<div class="step-card">
|
||
<div class="step-number">03</div>
|
||
<div class="step-body">
|
||
<span class="step-icon">💡</span>
|
||
<h3 class="step-title">Blueprint umsetzen</h3>
|
||
<p class="step-text">Sie erhalten konkrete, priorisierte Handlungsempfehlungen, die Sie sofort oder mit unserer Hilfe umsetzen können.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-center mt-5">
|
||
<a href="#ki-check" class="btn btn-primary">Starten Sie jetzt Ihre Analyse</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FINAL CTA SECTION -->
|
||
<section id="final-cta" class="final-cta-section">
|
||
<div class="container-custom text-center">
|
||
<div class="cta-badge">IHR KI-BLUEPRINT</div>
|
||
<h2 class="cta-headline">
|
||
Sind Sie bereit für den <span class="gradient-text">nächsten Schritt?</span>
|
||
</h2>
|
||
<div class="button-group">
|
||
<a href="#ki-check" class="btn btn-primary btn-lg">Jetzt Gratis-Check starten</a>
|
||
<a href="#contact" class="btn btn-secondary btn-lg">Beratung anfragen</a>
|
||
</div>
|
||
<div class="trust-badges">
|
||
<span>✅ 100% Kostenlos</span>
|
||
<span>🇩🇪 DSGVO-konform</span>
|
||
<span>⏱️ Nur 5 Minuten</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<?php include 'includes/footer.php'; ?>
|
||
|
||
<!-- COOKIE BANNER -->
|
||
<div class="cookie-banner" id="cookieBanner">
|
||
<div class="cookie-content">
|
||
<div class="cookie-text">
|
||
<h4 class="cookie-heading">Cookie-Hinweis</h4>
|
||
<p class="cookie-description">
|
||
Wir verwenden nur technisch notwendige Cookies, um die Funktionalität dieser Website zu gewährleisten. Tracking-Cookies oder Analyse-Tools werden nicht eingesetzt. Weitere Informationen finden Sie in unserer <a href="/datenschutz" class="cookie-link">Datenschutzerklärung</a>.
|
||
</p>
|
||
</div>
|
||
<div class="cookie-buttons">
|
||
<button class="cookie-btn cookie-reject" id="cookieReject">Ablehnen</button>
|
||
<button class="cookie-btn cookie-accept" id="cookieAccept">Akzeptieren</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
||
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
||
</body>
|
||
</html>
|