v1
This commit is contained in:
Flatlogic Bot
parent
fa80042d3d
commit
bfa16bead3
1513
assets/css/custom.css
Normal file
1513
assets/css/custom.css
Normal file
File diff suppressed because it is too large
Load Diff
1
assets/images/flag-de.svg
Normal file
1
assets/images/flag-de.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 3"><rect width="5" height="3" fill="#FFCE00"/><rect width="5" height="2" fill="#D00"/><rect width="5" height="1" fill="#000"/></svg>
|
||||||
|
After Width: | Height: | Size: 187 B |
1
assets/images/flag-en.svg
Normal file
1
assets/images/flag-en.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 36"><clipPath id="a"><path d="M0 0v36h60V0z"/></clipPath><path d="M0 0v36h60V0z" fill="#012169"/><path d="M0 0l60 36M0 36L60 0" stroke="#fff" stroke-width="6"/><path d="M0 0l60 36M0 36L60 0" clip-path="url(#a)" stroke="#C8102E" stroke-width="4"/><path d="M30 0v36M0 18h60" stroke="#fff" stroke-width="10"/><path d="M30 0v36M0 18h60" stroke="#C8102E" stroke-width="6"/></svg>
|
||||||
|
After Width: | Height: | Size: 430 B |
1
assets/images/flag-tr.svg
Normal file
1
assets/images/flag-tr.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 20"><path fill="#E30A17" d="M0 0h32v20H0z"/><g fill="#fff"><path d="M19.3 13.5a4.8 4.8 0 110-7 5.9 5.9 0 100 7z"/><path d="M20.3 10l-3.5-1.7 1.3 3.8.1-4.2-3.4 2 3.8.3-2-3.5 2.1 3.4-1.6-3.7z"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 258 B |
144
assets/js/main.js
Normal file
144
assets/js/main.js
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const header = document.getElementById('mainHeader');
|
||||||
|
|
||||||
|
if (header) {
|
||||||
|
window.addEventListener('scroll', function () {
|
||||||
|
if (window.scrollY > 100) {
|
||||||
|
header.classList.add('scrolled');
|
||||||
|
} else {
|
||||||
|
header.classList.remove('scrolled');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Intersection Observer for animations
|
||||||
|
const animatedElements = document.querySelectorAll('.animate-on-scroll');
|
||||||
|
if (animatedElements.length > 0) {
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add('is-visible');
|
||||||
|
// Optional: unobserve after animation
|
||||||
|
// observer.unobserve(entry.target);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, {
|
||||||
|
threshold: 0.1
|
||||||
|
});
|
||||||
|
|
||||||
|
animatedElements.forEach(el => {
|
||||||
|
observer.observe(el);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Newsletter Form Handler
|
||||||
|
const newsletterForm = document.getElementById('newsletterForm');
|
||||||
|
if (newsletterForm) {
|
||||||
|
newsletterForm.addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const emailInput = newsletterForm.querySelector('input[type="email"]');
|
||||||
|
if (emailInput.value) {
|
||||||
|
alert('Danke für Ihr Interesse! Sie wurden zu unserem Newsletter hinzugefügt.');
|
||||||
|
emailInput.value = '';
|
||||||
|
} else {
|
||||||
|
alert('Bitte geben Sie eine gültige E-Mail-Adresse ein.');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cookie Banner Handler
|
||||||
|
const cookieBanner = document.getElementById('cookieBanner');
|
||||||
|
const cookieAccept = document.getElementById('cookieAccept');
|
||||||
|
const cookieReject = document.getElementById('cookieReject');
|
||||||
|
const cookieConsent = localStorage.getItem('cookie_consent');
|
||||||
|
|
||||||
|
// Show banner if no consent has been given
|
||||||
|
if (!cookieConsent) {
|
||||||
|
setTimeout(() => {
|
||||||
|
cookieBanner.classList.add('visible');
|
||||||
|
}, 1000); // Delay showing the banner slightly
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCookieConsent = (consent) => {
|
||||||
|
localStorage.setItem('cookie_consent', consent);
|
||||||
|
cookieBanner.classList.remove('visible');
|
||||||
|
};
|
||||||
|
|
||||||
|
if(cookieAccept) {
|
||||||
|
cookieAccept.addEventListener('click', () => handleCookieConsent('accepted'));
|
||||||
|
}
|
||||||
|
if(cookieReject) {
|
||||||
|
cookieReject.addEventListener('click', () => handleCookieConsent('rejected'));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mobile Menu Handler
|
||||||
|
const mobileToggle = document.querySelector('.mobile-toggle');
|
||||||
|
const mobileMenu = document.getElementById('mobileMenu');
|
||||||
|
const closeMobileMenu = document.getElementById('closeMobileMenu');
|
||||||
|
const body = document.body;
|
||||||
|
|
||||||
|
const openMenu = () => {
|
||||||
|
mobileMenu.classList.add('open');
|
||||||
|
body.classList.add('menu-open');
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeMenu = () => {
|
||||||
|
mobileMenu.classList.remove('open');
|
||||||
|
body.classList.remove('menu-open');
|
||||||
|
};
|
||||||
|
|
||||||
|
if (mobileToggle && mobileMenu) {
|
||||||
|
mobileToggle.addEventListener('click', openMenu);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (closeMobileMenu) {
|
||||||
|
closeMobileMenu.addEventListener('click', closeMenu);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close menu when clicking a link inside
|
||||||
|
const mobileNavLinks = mobileMenu.querySelectorAll('a[href^="#"]');
|
||||||
|
mobileNavLinks.forEach(link => {
|
||||||
|
link.addEventListener('click', () => {
|
||||||
|
// Don't close for section toggles
|
||||||
|
if (!link.parentElement.classList.contains('mobile-subsection')) {
|
||||||
|
closeMenu();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Accordion for mobile sub-menu
|
||||||
|
const sectionToggles = mobileMenu.querySelectorAll('.section-toggle');
|
||||||
|
sectionToggles.forEach(toggle => {
|
||||||
|
toggle.addEventListener('click', () => {
|
||||||
|
const section = toggle.parentElement;
|
||||||
|
const subsection = section.querySelector('.mobile-subsection');
|
||||||
|
|
||||||
|
section.classList.toggle('open');
|
||||||
|
|
||||||
|
if (section.classList.contains('open')) {
|
||||||
|
subsection.style.maxHeight = subsection.scrollHeight + 'px';
|
||||||
|
} else {
|
||||||
|
subsection.style.maxHeight = '0';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Language Switcher Handler
|
||||||
|
const langSwitcherBtn = document.getElementById('langSwitcherBtn');
|
||||||
|
const langDropdown = document.getElementById('langDropdown');
|
||||||
|
const langSwitcherContainer = document.querySelector('.lang-switcher-container');
|
||||||
|
|
||||||
|
if (langSwitcherBtn && langDropdown && langSwitcherContainer) {
|
||||||
|
langSwitcherBtn.addEventListener('click', (event) => {
|
||||||
|
event.stopPropagation(); // Prevent the click from immediately closing the dropdown
|
||||||
|
langSwitcherContainer.classList.toggle('open');
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('click', (event) => {
|
||||||
|
if (!langSwitcherContainer.contains(event.target)) {
|
||||||
|
langSwitcherContainer.classList.remove('open');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
21
includes/lang_loader.php
Normal file
21
includes/lang_loader.php
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
|
||||||
|
// Define available languages
|
||||||
|
$available_langs = ['de', 'en', 'tr'];
|
||||||
|
|
||||||
|
// Set default language
|
||||||
|
$lang = 'de';
|
||||||
|
|
||||||
|
// Check for language in query string
|
||||||
|
if (isset($_GET['lang']) && in_array($_GET['lang'], $available_langs)) {
|
||||||
|
$lang = $_GET['lang'];
|
||||||
|
$_SESSION['lang'] = $lang;
|
||||||
|
}
|
||||||
|
// Check for language in session
|
||||||
|
else if (isset($_SESSION['lang']) && in_array($_SESSION['lang'], $available_langs)) {
|
||||||
|
$lang = $_SESSION['lang'];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Include the language file
|
||||||
|
require_once __DIR__ . '/../lang/' . $lang . '.php';
|
||||||
533
index.php
533
index.php
@ -1,150 +1,393 @@
|
|||||||
<?php
|
<?php require_once 'includes/lang_loader.php'; ?>
|
||||||
declare(strict_types=1);
|
<!DOCTYPE html>
|
||||||
@ini_set('display_errors', '1');
|
<html lang="<?php echo $lang; ?>">
|
||||||
@error_reporting(E_ALL);
|
|
||||||
@date_default_timezone_set('UTC');
|
|
||||||
|
|
||||||
$phpVersion = PHP_VERSION;
|
|
||||||
$now = date('Y-m-d H:i:s');
|
|
||||||
?>
|
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>New Style</title>
|
<title>Future Now - KI-Beratung</title>
|
||||||
<?php
|
|
||||||
// Read project preview data from environment
|
<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.'); ?>">
|
||||||
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
|
<meta property="og:title" content="Future Now - KI-Beratung">
|
||||||
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
<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'] ?? ''); ?>">
|
||||||
<?php if ($projectDescription): ?>
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
<!-- Meta description -->
|
<meta name="twitter:title" content="Future Now - KI-Beratung">
|
||||||
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
|
<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.'); ?>">
|
||||||
<!-- Open Graph meta tags -->
|
<meta name="twitter:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
|
||||||
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
|
||||||
<!-- Twitter meta tags -->
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||||
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||||
<?php endif; ?>
|
|
||||||
<?php if ($projectImageUrl): ?>
|
|
||||||
<!-- Open Graph image -->
|
|
||||||
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
|
||||||
<!-- Twitter image -->
|
|
||||||
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
|
||||||
<?php endif; ?>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
|
|
||||||
<style>
|
|
||||||
:root {
|
|
||||||
--bg-color-start: #6a11cb;
|
|
||||||
--bg-color-end: #2575fc;
|
|
||||||
--text-color: #ffffff;
|
|
||||||
--card-bg-color: rgba(255, 255, 255, 0.01);
|
|
||||||
--card-border-color: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
|
|
||||||
color: var(--text-color);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 100vh;
|
|
||||||
text-align: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
body::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
|
|
||||||
animation: bg-pan 20s linear infinite;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
@keyframes bg-pan {
|
|
||||||
0% { background-position: 0% 0%; }
|
|
||||||
100% { background-position: 100% 100%; }
|
|
||||||
}
|
|
||||||
main {
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
.card {
|
|
||||||
background: var(--card-bg-color);
|
|
||||||
border: 1px solid var(--card-border-color);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 2rem;
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
-webkit-backdrop-filter: blur(20px);
|
|
||||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
.loader {
|
|
||||||
margin: 1.25rem auto 1.25rem;
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border: 3px solid rgba(255, 255, 255, 0.25);
|
|
||||||
border-top-color: #fff;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
@keyframes spin {
|
|
||||||
from { transform: rotate(0deg); }
|
|
||||||
to { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
.hint {
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
.sr-only {
|
|
||||||
position: absolute;
|
|
||||||
width: 1px; height: 1px;
|
|
||||||
padding: 0; margin: -1px;
|
|
||||||
overflow: hidden;
|
|
||||||
clip: rect(0, 0, 0, 0);
|
|
||||||
white-space: nowrap; border: 0;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
font-size: 3rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin: 0 0 1rem;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin: 0.5rem 0;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
code {
|
|
||||||
background: rgba(0,0,0,0.2);
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
||||||
}
|
|
||||||
footer {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 1rem;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
|
||||||
<div class="card">
|
<header id="mainHeader">
|
||||||
<h1>Analyzing your requirements and generating your website…</h1>
|
<div class="inner-container">
|
||||||
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
|
<div class="logo-container">
|
||||||
<span class="sr-only">Loading…</span>
|
<span class="logo-text">Future Now</span>
|
||||||
</div>
|
</div>
|
||||||
<p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
|
<nav class="main-nav">
|
||||||
<p class="hint">This page will update automatically as the plan is implemented.</p>
|
<a href="#home" class="nav-link active"><?php echo $t['nav_home']; ?></a>
|
||||||
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
|
<div class="nav-dropdown">
|
||||||
|
<button class="nav-link">
|
||||||
|
<?php echo $t['nav_why_ai']; ?>
|
||||||
|
<span class="chevron">▼</span>
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<a href="#fuer-wen" class="dropdown-item">
|
||||||
|
<div class="dropdown-item-icon">👥</div>
|
||||||
|
<div class="dropdown-item-text">
|
||||||
|
<span class="dropdown-item-title"><?php echo $t['nav_fuer_wen']; ?></span>
|
||||||
|
<span class="dropdown-item-subtitle"><?php echo $t['nav_fuer_wen_sub']; ?></span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#warum-jetzt" class="dropdown-item">
|
||||||
|
<div class="dropdown-item-icon">⚡</div>
|
||||||
|
<div class="dropdown-item-text">
|
||||||
|
<span class="dropdown-item-title"><?php echo $t['nav_why_now']; ?></span>
|
||||||
|
<span class="dropdown-item-subtitle"><?php echo $t['nav_why_now_sub']; ?></span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#was-ist-ki" class="dropdown-item">
|
||||||
|
<div class="dropdown-item-icon">🧠</div>
|
||||||
|
<div class="dropdown-item-text">
|
||||||
|
<span class="dropdown-item-title"><?php echo $t['nav_what_is_ai']; ?></span>
|
||||||
|
<span class="dropdown-item-subtitle"><?php echo $t['nav_what_is_ai_sub']; ?></span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="#einsatz" class="dropdown-item">
|
||||||
|
<div class="dropdown-item-icon">🚀</div>
|
||||||
|
<div class="dropdown-item-text">
|
||||||
|
<span class="dropdown-item-title"><?php echo $t['nav_use_cases']; ?></span>
|
||||||
|
<span class="dropdown-item-subtitle"><?php echo $t['nav_use_cases_sub']; ?></span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#ki-check" class="nav-link"><?php echo $t['nav_ai_check']; ?></a>
|
||||||
|
<a href="#ki-website" class="nav-link"><?php echo $t['nav_ai_website']; ?></a>
|
||||||
|
<a href="#preise" class="nav-link"><?php echo $t['nav_prices']; ?></a>
|
||||||
|
<a href="#kontakt" class="nav-link"><?php echo $t['nav_contact']; ?></a>
|
||||||
|
</nav>
|
||||||
|
<div class="header-right">
|
||||||
|
<div class="lang-switcher-container">
|
||||||
|
<button class="lang-switcher" id="langSwitcherBtn">
|
||||||
|
<img src="assets/images/flag-<?php echo $lang; ?>.svg" alt="Flag" class="flag-icon" />
|
||||||
|
<span><?php echo strtoupper($lang); ?></span>
|
||||||
|
<span class="chevron">▼</span>
|
||||||
|
</button>
|
||||||
|
<div class="lang-dropdown" id="langDropdown">
|
||||||
|
<a href="?lang=de" data-lang="de">🇩🇪 <?php echo $t['lang_de']; ?></a>
|
||||||
|
<a href="?lang=en" data-lang="en">🇬🇧 <?php echo $t['lang_en']; ?></a>
|
||||||
|
<a href="?lang=tr" data-lang="tr">🇹🇷 <?php echo $t['lang_tr']; ?></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="cart-button">
|
||||||
|
<svg class="cart-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="9" cy="21" r="1"></circle>
|
||||||
|
<circle cx="20" cy="21" r="1"></circle>
|
||||||
|
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<a href="#newsletter" class="btn btn-secondary ki-newsletter-btn"><?php echo $t['newsletter_button']; ?></a>
|
||||||
|
<button class="mobile-toggle">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- MOBILE MENU -->
|
||||||
|
<div class="mobile-menu" id="mobileMenu">
|
||||||
|
<button class="mobile-close" id="closeMobileMenu">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="mobile-menu-content">
|
||||||
|
<nav class="mobile-nav">
|
||||||
|
<a href="#home" class="mobile-nav-link">Home</a>
|
||||||
|
|
||||||
|
<div class="mobile-nav-section">
|
||||||
|
<button class="mobile-nav-link section-toggle">
|
||||||
|
Warum KI?
|
||||||
|
<span class="toggle-icon">▼</span>
|
||||||
|
</button>
|
||||||
|
<div class="mobile-subsection">
|
||||||
|
<a href="#fuer-wen" class="mobile-subnav-link">Für wen ist KI?</a>
|
||||||
|
<a href="#warum-jetzt" class="mobile-subnav-link">Warum jetzt handeln?</a>
|
||||||
|
<a href="#was-ist-ki" class="mobile-subnav-link">Was ist KI?</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="#ki-check" class="mobile-nav-link">KI-Check</a>
|
||||||
|
<a href="#ueber-uns" class="mobile-nav-link">Über uns</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="mobile-menu-footer">
|
||||||
|
<a href="#ki-check" class="btn btn-primary">Jetzt KI-Check starten</a>
|
||||||
|
<div class="lang-switcher-mobile">
|
||||||
|
<span>Sprache:</span>
|
||||||
|
<a href="#" class="active">DE</a>
|
||||||
|
<a href="#">EN</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
|
||||||
<footer>
|
<main>
|
||||||
Page updated: <?= htmlspecialchars($now) ?> (UTC)
|
<section id="home" class="hero-section">
|
||||||
</footer>
|
<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-stack">
|
||||||
|
<div class="hero-card card-1">
|
||||||
|
<span class="card-icon">🎯</span>
|
||||||
|
<p class="card-text"><strong>Zielgerichtete Strategie</strong><br>Personalisierte KI-Roadmap</p>
|
||||||
|
</div>
|
||||||
|
<div class="hero-card card-2">
|
||||||
|
<span class="card-icon">⚙️</span>
|
||||||
|
<p class="card-text"><strong>Effiziente Prozesse</strong><br>Automatisierungspotenziale aufdecken</p>
|
||||||
|
</div>
|
||||||
|
<div class="hero-card card-3">
|
||||||
|
<span class="card-icon">📈</span>
|
||||||
|
<p class="card-text"><strong>Nachhaltiges Wachstum</strong><br>Wettbewerbsvorteile sichern</p>
|
||||||
|
</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">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<p class="social-proof-headline">Über 500+ Unternehmen vertrauen uns bereits</p>
|
||||||
|
<div class="logo-marquee">
|
||||||
|
<div class="logo-track">
|
||||||
|
<div class="logo-item">Unternehmen A</div>
|
||||||
|
<div class="logo-item">Startup B</div>
|
||||||
|
<div class="logo-item">Kanzlei C</div>
|
||||||
|
<div class="logo-item">Praxis D</div>
|
||||||
|
<div class="logo-item">Handwerk E</div>
|
||||||
|
<div class="logo-item">Agentur F</div>
|
||||||
|
<div class="logo-item">Beratung G</div>
|
||||||
|
<div class="logo-item">Konzern H</div>
|
||||||
|
<!-- Repeat for seamless loop -->
|
||||||
|
<div class="logo-item">Unternehmen A</div>
|
||||||
|
<div class="logo-item">Startup B</div>
|
||||||
|
<div class="logo-item">Kanzlei C</div>
|
||||||
|
<div class="logo-item">Praxis D</div>
|
||||||
|
<div class="logo-item">Handwerk E</div>
|
||||||
|
<div class="logo-item">Agentur F</div>
|
||||||
|
<div class="logo-item">Beratung G</div>
|
||||||
|
<div class="logo-item">Konzern H</div>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<footer id="main-footer">
|
||||||
|
<div class="container-custom">
|
||||||
|
<div class="footer-grid">
|
||||||
|
<!-- Column 1: Company Info -->
|
||||||
|
<div class="footer-column">
|
||||||
|
<div class="footer-logo">Future Now</div>
|
||||||
|
<p class="footer-tagline">Werde KI FIT - in nur 5 Minuten</p>
|
||||||
|
<a href="mailto:info@future-now.online" class="footer-email">
|
||||||
|
<svg class="email-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||||
|
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
|
||||||
|
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
|
||||||
|
</svg>
|
||||||
|
info@future-now.online
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Column 2: Quick Links -->
|
||||||
|
<div class="footer-column">
|
||||||
|
<h4 class="footer-heading">Quick Links</h4>
|
||||||
|
<nav class="footer-links">
|
||||||
|
<a href="#fuer-wen">Für wen?</a>
|
||||||
|
<a href="#warum-jetzt">Warum jetzt?</a>
|
||||||
|
<a href="#ki-check">KI-Check</a>
|
||||||
|
<a href="#blog">Blog</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Column 3: Legal -->
|
||||||
|
<div class="footer-column">
|
||||||
|
<h4 class="footer-heading">Rechtliches</h4>
|
||||||
|
<nav class="footer-links">
|
||||||
|
<a href="/impressum">Impressum</a>
|
||||||
|
<a href="/datenschutz">Datenschutz</a>
|
||||||
|
<a href="#cookies">Cookie-Einstellungen</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Column 4: Newsletter -->
|
||||||
|
<div class="footer-column" id="newsletter">
|
||||||
|
<h4 class="footer-heading">KI-Updates erhalten</h4>
|
||||||
|
<p class="footer-newsletter-text">Bleiben Sie mit unserem monatlichen Newsletter auf dem Laufenden über KI-Trends und Insights.</p>
|
||||||
|
<form id="newsletterForm" class="newsletter-form">
|
||||||
|
<input type="email" name="email" placeholder="Ihre E-Mail Adresse" required>
|
||||||
|
<button type="submit">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20" height="20">
|
||||||
|
<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>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<p class="copyright">© <?php echo date("Y"); ?> Future Now. Alle Rechte vorbehalten.</p>
|
||||||
|
<div class="social-links">
|
||||||
|
<a href="#" aria-label="LinkedIn">L</a>
|
||||||
|
<a href="#" aria-label="Xing">X</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- 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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
27
lang/de.php
Normal file
27
lang/de.php
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<?php
|
||||||
|
$t = [
|
||||||
|
//- Nav
|
||||||
|
'nav_home' => 'Home',
|
||||||
|
'nav_why_ai' => 'Warum KI?',
|
||||||
|
'nav_fuer_wen' => 'Für wen ist KI?',
|
||||||
|
'nav_fuer_wen_sub' => 'Zielgruppen & Branchen',
|
||||||
|
'nav_why_now' => 'Warum jetzt handeln?',
|
||||||
|
'nav_why_now_sub' => 'Marktdynamik & Urgenz',
|
||||||
|
'nav_what_is_ai' => 'Was ist KI?',
|
||||||
|
'nav_what_is_ai_sub' => 'Grundlagen erklärt',
|
||||||
|
'nav_use_cases' => 'Einsatzmöglichkeiten',
|
||||||
|
'nav_use_cases_sub' => 'Use Cases & ROI',
|
||||||
|
'nav_ai_check' => 'KI-Check',
|
||||||
|
'nav_ai_website' => 'KI-Website',
|
||||||
|
'nav_prices' => 'Preise',
|
||||||
|
'nav_contact' => 'Kontakt',
|
||||||
|
'newsletter_button' => 'KI-Newsletter',
|
||||||
|
'lang_de' => 'Deutsch',
|
||||||
|
'lang_en' => 'English',
|
||||||
|
'lang_tr' => 'Türkçe',
|
||||||
|
|
||||||
|
//- Hero
|
||||||
|
'hero_headline' => '<span class="gradient-text">KI-Potenzial</span> für Ihr Unternehmen freischalten',
|
||||||
|
'hero_subtext' => 'Finden Sie in 5 Minuten heraus, wo Sie bei der KI-Integration stehen. Erhalten Sie einen personalisierten Blueprint, um die nächsten Schritte zu gehen.',
|
||||||
|
'hero_cta' => 'Jetzt kostenlosen KI-Check starten',
|
||||||
|
];
|
||||||
27
lang/en.php
Normal file
27
lang/en.php
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<?php
|
||||||
|
$t = [
|
||||||
|
//- Nav
|
||||||
|
'nav_home' => 'Home',
|
||||||
|
'nav_why_ai' => 'Why AI?',
|
||||||
|
'nav_fuer_wen' => 'Who is AI for?',
|
||||||
|
'nav_fuer_wen_sub' => 'Target Groups & Industries',
|
||||||
|
'nav_why_now' => 'Why act now?',
|
||||||
|
'nav_why_now_sub' => 'Market Dynamics & Urgency',
|
||||||
|
'nav_what_is_ai' => 'What is AI?',
|
||||||
|
'nav_what_is_ai_sub' => 'Basics explained',
|
||||||
|
'nav_use_cases' => 'Use Cases',
|
||||||
|
'nav_use_cases_sub' => 'Use Cases & ROI',
|
||||||
|
'nav_ai_check' => 'AI-Check',
|
||||||
|
'nav_ai_website' => 'AI-Website',
|
||||||
|
'nav_prices' => 'Prices',
|
||||||
|
'nav_contact' => 'Contact',
|
||||||
|
'newsletter_button' => 'AI-Newsletter',
|
||||||
|
'lang_de' => 'German',
|
||||||
|
'lang_en' => 'English',
|
||||||
|
'lang_tr' => 'Turkish',
|
||||||
|
|
||||||
|
//- Hero
|
||||||
|
'hero_headline' => 'Unlock <span class="gradient-text">AI Potential</span> for Your Business',
|
||||||
|
'hero_subtext' => 'Find out in 5 minutes where you stand on AI integration. Receive a personalized blueprint to take the next steps.',
|
||||||
|
'hero_cta' => 'Start Your Free AI-Check Now',
|
||||||
|
];
|
||||||
27
lang/tr.php
Normal file
27
lang/tr.php
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<?php
|
||||||
|
$t = [
|
||||||
|
//- Nav
|
||||||
|
'nav_home' => 'Ana Sayfa',
|
||||||
|
'nav_why_ai' => 'Neden YZ?',
|
||||||
|
'nav_fuer_wen' => 'YZ kimin için?',
|
||||||
|
'nav_fuer_wen_sub' => 'Hedef Kitleler ve Sektörler',
|
||||||
|
'nav_why_now' => 'Neden şimdi?',
|
||||||
|
'nav_why_now_sub' => 'Pazar Dinamikleri ve Aciliyet',
|
||||||
|
'nav_what_is_ai' => 'YZ nedir?',
|
||||||
|
'nav_what_is_ai_sub' => 'Temel Bilgiler',
|
||||||
|
'nav_use_cases' => 'Kullanım Alanları',
|
||||||
|
'nav_use_cases_sub' => 'Kullanım Alanları ve ROI',
|
||||||
|
'nav_ai_check' => 'YZ Kontrolü',
|
||||||
|
'nav_ai_website' => 'YZ Web Sitesi',
|
||||||
|
'nav_prices' => 'Fiyatlar',
|
||||||
|
'nav_contact' => 'İletişim',
|
||||||
|
'newsletter_button' => 'YZ Bülteni',
|
||||||
|
'lang_de' => 'Almanca',
|
||||||
|
'lang_en' => 'İngilizce',
|
||||||
|
'lang_tr' => 'Türkçe',
|
||||||
|
|
||||||
|
//- Hero
|
||||||
|
'hero_headline' => 'İşletmeniz için <span class="gradient-text">Yapay Zeka potansiyelinin</span> kilidini açın',
|
||||||
|
'hero_subtext' => '5 dakika içinde YZ entegrasyonunda nerede olduğunuzu öğrenin. Sonraki adımları atmak için kişiselleştirilmiş bir plan alın.',
|
||||||
|
'hero_cta' => 'Ücretsiz YZ Kontrolünü Şimdi Başlat',
|
||||||
|
];
|
||||||
Loading…
x
Reference in New Issue
Block a user