diff --git a/assets/css/custom.css b/assets/css/custom.css index 362ba65..2b00031 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -1998,58 +1998,632 @@ body.menu-open { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2); - color: var(--text-white); - padding: var(--space-2); - border-radius: 12px; - font-family: var(--font-heading); - font-weight: var(--weight-semibold); - transition: all var(--duration-normal); + +/* ------------------------------ */ +/* QUESTIONNAIRE (KI-CHECK.PHP) */ +/* ------------------------------ */ + +.questionnaire-container { + max-width: 800px; + margin: 0 auto; + padding: var(--space-6) var(--space-4); + min-height: calc(100vh - 80px); /* Adjust for header */ + display: flex; + flex-direction: column; } -.usecase-btn:hover { - background: var(--cyan); - border-color: var(--cyan); +.welcome-screen, .question-screen, .completion-screen { + display: none; + flex-direction: column; + align-items: center; + justify-content: center; + flex-grow: 1; + width: 100%; +} + +.welcome-screen.active, .question-screen.active, .completion-screen.active { + display: flex; +} + +.fade-in { + animation: fade-in 0.5s var(--ease-smooth) forwards; +} + +@keyframes fade-in { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } +} + +/* Welcome Screen */ +.welcome-content { + max-width: 700px; + text-align: center; +} + +.welcome-badge { + display: inline-block; + padding: 8px 20px; + background: var(--gradient-primary); + border-radius: 50px; + font: 14px var(--font-heading), bold, uppercase; color: var(--bg-primary); + letter-spacing: 0.1em; + margin-bottom: 32px; +} + +.welcome-title { + font-family: var(--font-heading); + font-size: var(--text-5xl); + font-weight: var(--weight-bold); + color: var(--text-white); + line-height: 1.2; + margin-bottom: 24px; +} + +.welcome-description { + font-size: var(--text-xl); + color: var(--text-gray); + line-height: 1.6; + margin-bottom: 48px; +} + +.welcome-benefits { + display: flex; + gap: 32px; + justify-content: center; + margin-bottom: 48px; + flex-wrap: wrap; +} + +.benefit-item .benefit-icon { + margin-right: 8px; + color: var(--cyan); +} + +.btn-start { + font-family: var(--font-heading); + font-weight: var(--weight-bold); + font-size: 18px; + color: var(--bg-primary); + background: var(--gradient-cyan); + padding: 16px 48px; + border-radius: 50px; + border: none; + cursor: pointer; + transition: all var(--duration-normal); + text-decoration: none; + display: inline-flex; +} + +.btn-start:hover { + filter: brightness(1.1); + transform: scale(1.05); + box-shadow: 0 4px 20px rgba(0, 245, 255, 0.3); +} + +.welcome-note { + font-size: var(--text-sm); + color: var(--text-muted); + margin-top: 24px; +} + +/* Progress Bar */ +.progress-container { + width: 100%; + padding: var(--space-3) 0; + margin-bottom: var(--space-6); + text-align: center; +} + +.progress-bar { + height: 8px; + background-color: var(--bg-tertiary); + border-radius: 4px; + width: 0; + transition: width var(--duration-normal) var(--ease-smooth); + background-image: var(--gradient-primary); +} + +.progress-text { + font-family: var(--font-heading); + font-size: var(--text-sm); + color: var(--text-muted); + margin-top: var(--space-1); + font-weight: var(--weight-medium); +} + +/* Question Screen */ +.question-header { + width: 100%; + text-align: left; + margin-bottom: var(--space-4); +} + +.section-title { + font-family: var(--font-heading); + font-size: var(--text-base); + font-weight: var(--weight-bold); + color: var(--purple); + text-transform: uppercase; + letter-spacing: 0.1em; +} + +.question-title { + font-family: var(--font-heading); + font-size: var(--text-3xl); + font-weight: var(--weight-semibold); + color: var(--text-white); + margin-top: var(--space-1); +} + +.options-container { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-2); + width: 100%; +} + +.option { + padding: var(--space-3); + background: var(--bg-secondary); + border: 1px solid var(--bg-tertiary); + border-radius: 12px; + cursor: pointer; + transition: all var(--duration-fast) var(--ease-smooth); + font-size: var(--text-lg); +} + +.option:hover { + background: var(--bg-tertiary); + border-color: var(--cyan); + transform: translateX(10px); +} + +.option.selected { + background: var(--gradient-primary); + color: var(--bg-primary); + font-weight: var(--weight-bold); + border-color: transparent; +} + +.textarea-option { + width: 100%; + min-height: 150px; + padding: var(--space-3); + background: var(--bg-secondary); + border: 1px solid var(--bg-tertiary); + border-radius: 12px; + font-family: var(--font-body); + font-size: var(--text-lg); + color: var(--text-white); + resize: vertical; +} + +.textarea-option:focus { + outline: none; + border-color: var(--cyan); + box-shadow: 0 0 0 3px rgba(0, 245, 255, 0.2); +} + +/* Navigation */ +.navigation-buttons { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + margin-top: var(--space-6); + border-top: 1px solid var(--bg-tertiary); + padding-top: var(--space-4); +} + +.btn-prev, .btn-next { + font-family: var(--font-heading); + font-weight: var(--weight-bold); + font-size: 16px; + padding: 12px 32px; + border-radius: 50px; + cursor: pointer; + transition: all var(--duration-normal); + display: inline-flex; + align-items: center; + gap: 8px; +} + +.btn-next { + background: var(--gradient-primary); + color: var(--bg-primary); + border: none; +} + +.btn-next:hover { + filter: brightness(1.1); +} + +.btn-prev { + background: transparent; + border: 1px solid var(--text-muted); + color: var(--text-muted); +} + +.btn-prev:hover { + background: var(--bg-tertiary); + color: var(--text-white); + border-color: var(--text-white); +} + +/* Completion Screen */ +.email-capture-content, .thank-you-content { + text-align: center; + max-width: 700px; +} + +#email-form { + display: flex; + flex-direction: column; + gap: var(--space-3); + margin-top: var(--space-6); + width: 100%; + max-width: 500px; + margin-left: auto; + margin-right: auto; +} + +#email-input { + font-family: var(--font-body); + font-size: 18px; + padding: 16px 24px; + border-radius: 12px; + background: var(--bg-secondary); + border: 1px solid var(--bg-tertiary); + color: var(--text-white); + text-align: center; +} + +#email-input:focus { + outline: none; + border-color: var(--cyan); + box-shadow: 0 0 0 3px rgba(0, 245, 255, 0.2); +} + +.consent-container { + font-size: var(--text-sm); + color: var(--text-muted); + text-align: left; + display: flex; + align-items: flex-start; + gap: var(--space-2); +} + +.consent-container input { + margin-top: 4px; + flex-shrink: 0; +} + +.consent-container a { + color: var(--cyan); + text-decoration: none; +} + +.consent-container a:hover { + text-decoration: underline; } -/* RESPONSIVE ADJUSTMENTS FOR SUBPAGES */ -@media (max-width: 1023px) { +} + +/* --- QUESTIONNAIRE STYLES --- */ +.questionnaire-container { + min-height: 100vh; + background: #0A0E1A; + display: flex; + flex-direction: column; + position: relative; + overflow-x: hidden; +} + +.welcome-screen { + min-height: 100vh; + padding: 120px 48px; + display: none; + align-items: center; + justify-content: center; + text-align: center; +} + +.welcome-screen.active { + display: flex; +} + +.welcome-content { + max-width: 700px; +} + +.welcome-badge { + display: inline-block; + padding: 8px 20px; + background: var(--gradient-primary); + border-radius: 50px; + font: 14px 'Space Grotesk', bold, uppercase; + color: #0A0E1A; + letter-spacing: 0.1em; + margin-bottom: 32px; +} + +.welcome-title { + font: 56px 'Space Grotesk', bold; + color: #FFFFFF; + line-height: 1.2; + margin-bottom: 24px; +} + +.welcome-description { + font: 20px 'Inter', regular; + color: #CBD5E1; + line-height: 1.6; + margin-bottom: 48px; +} + +.welcome-benefits { + display: flex; + gap: 32px; + justify-content: center; + margin-bottom: 48px; + flex-wrap: wrap; +} + +.welcome-benefits .benefit-item { + display: flex; + align-items: center; + gap: 8px; + font: 16px 'Inter', medium; + color: var(--text-gray); +} + +.welcome-benefits .benefit-item span:first-child { + color: var(--cyan); +} + +.btn-start { + font-family: var(--font-heading); + font-weight: var(--weight-bold); + border-radius: 50px; + padding: var(--space-2) var(--space-6); + font-size: var(--text-lg); + background: var(--gradient-primary); + color: var(--text-white); + border: none; + cursor: pointer; + transition: all var(--duration-normal) var(--ease-smooth); + margin-bottom: 24px; +} + +.btn-start:hover { + filter: brightness(1.1); + box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4); +} + +.welcome-note { + font-size: 14px; + color: var(--text-muted); +} + +/* Question Screen */ +.question-screen { + display: none; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 100vh; + width: 100%; + padding: 48px; +} + +.progress-bar-container { + width: 100%; + max-width: 800px; + height: 8px; + background: rgba(255, 255, 255, 0.1); + border-radius: 4px; + margin-bottom: 48px; +} + +.progress-bar { + width: 0%; + height: 100%; + background: var(--gradient-primary); + border-radius: 4px; + transition: width 0.3s ease; +} + +.question-content { + width: 100%; + max-width: 800px; +} + +.question-header { + text-align: center; + margin-bottom: 48px; +} + +.question-number { + font: 16px 'Space Grotesk', medium; + color: var(--cyan); + margin-bottom: 16px; + display: block; +} + +.question-title { + font: 32px 'Space Grotesk', bold; + color: var(--text-white); + line-height: 1.3; +} + +.options-container { + display: grid; + gap: 16px; +} + +.option { + background: var(--bg-secondary); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 20px; + font-size: 18px; + color: var(--text-gray); + cursor: pointer; + transition: all 0.2s ease; + text-align: center; +} + +.option:hover { + background: rgba(255, 255, 255, 0.1); + border-color: var(--cyan); +} + +.option.selected { + background: var(--gradient-primary); + color: var(--text-white); + border-color: transparent; +} + +.textarea-option { + width: 100%; + min-height: 150px; + background: var(--bg-secondary); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 20px; + font-size: 18px; + color: var(--text-white); + font-family: var(--font-body); + resize: vertical; +} + +.textarea-option:focus { + outline: none; + border-color: var(--cyan); +} + +.navigation-buttons { + margin-top: 48px; + display: flex; + justify-content: space-between; + width: 100%; + max-width: 800px; +} + +.btn-prev, .btn-next { + font-family: var(--font-body); + font-weight: var(--weight-semibold); + border-radius: 8px; + padding: 12px 24px; + border: 1px solid var(--text-muted); + background: transparent; + color: var(--text-gray); + cursor: pointer; + transition: all 0.2s ease; +} + +.btn-next { + background: var(--cyan); + color: var(--bg-primary); + border-color: var(--cyan); +} + +.btn-prev:hover, .btn-next:hover { + filter: brightness(1.2); +} + +/* Email Capture & Thank You */ +.email-capture-screen, .thank-you-screen { + text-align: center; +} + +.email-capture-screen h2, .thank-you-screen h2 { + font: 32px 'Space Grotesk', bold; + color: var(--text-white); + margin-bottom: 16px; +} + +.email-capture-screen p, .thank-you-screen p { + font-size: 18px; + color: var(--text-gray); + margin-bottom: 32px; +} + +#email { + width: 100%; + max-width: 400px; + padding: 16px; + border-radius: 8px; + border: 1px solid var(--text-muted); + background: var(--bg-secondary); + color: var(--text-white); + font-size: 16px; + margin-bottom: 16px; +} + +.consent-container { + display: flex; + align-items: center; + justify-content: center; + gap: 12px; + max-width: 400px; + margin: 0 auto; + text-align: left; +} + +#consent { + min-width: 16px; + min-height: 16px; +} + +.consent-container label { + font-size: 14px; + color: var(--text-muted); +} + + color: var(--text-gray); + padding: var(--space-2); + border-radius: 8px; + transition: all var(--duration-fast); +} +.usecase-btn:hover { + background: rgba(255,255,255,0.1); + border-color: var(--cyan); + color: var(--text-white); +} + +@media (max-width: 767px) { .page-headline { font-size: var(--text-4xl); } .page-subtext { font-size: var(--text-lg); } - - .target-cards-grid, + .target-cards-grid { + grid-template-columns: 1fr; + } .core-abilities-grid { grid-template-columns: 1fr; } - .use-cases-grid { grid-template-columns: 1fr; } -} - -@media (max-width: 767px) { - .page-hero-section { - padding: var(--space-8) 0; - } - .page-headline { - font-size: var(--text-3xl); - } - .timeline-bar { - grid-template-columns: 100px 1fr; + grid-template-columns: 100px 1fr 80px; gap: var(--space-2); } - .timeline-bar .bar-value { - grid-column: 2 / 3; - grid-row: 1; - justify-self: end; - padding-right: var(--space-2); - font-size: var(--text-base); - } } +/* --- QUESTIONNAIRE --- */ +.questionnaire-container { + min-height: 100vh; + background: var(--bg-primary); + display: flex; + flex-direction: column; + position: relative; + padding: var(--space-4); + font-family: var(--font-body); + color: var(--text-white); +} \ No newline at end of file diff --git a/assets/js/questionnaire.js b/assets/js/questionnaire.js new file mode 100644 index 0000000..7a1da95 --- /dev/null +++ b/assets/js/questionnaire.js @@ -0,0 +1,340 @@ +document.addEventListener('DOMContentLoaded', () => { + // +}); + +const questions = [ + // SECTION A: Unternehmensprofil (Q1-5) - Placeholders + { + section: "Unternehmensprofil", + question: "In welcher Branche ist Ihr Unternehmen tätig?", + type: "single", + options: ["Tech", "Handel", "Dienstleistung", "Handwerk", "Industrie", "Sonstiges"] + }, + { + section: "Unternehmensprofil", + question: "Wie viele Mitarbeiter hat Ihr Unternehmen?", + type: "single", + options: ["1-10", "11-50", "51-200", "201-1000", "1000+"] + }, + { + section: "Unternehmensprofil", + question: "Was ist Ihre Rolle im Unternehmen?", + type: "single", + options: ["Geschäftsführer", "Abteilungsleiter", "Mitarbeiter", "Selbstständig"] + }, + { + section: "Unternehmensprofil", + question: "Wie vertraut sind Sie mit KI-Technologien?", + type: "single", + options: ["Sehr vertraut", "Etwas vertraut", "Wenig vertraut", "Gar nicht vertraut"] + }, + { + section: "Unternehmensprofil", + question: "Nutzt Ihr Unternehmen bereits KI-Anwendungen?", + type: "single", + options: ["Ja, intensiv", "Ja, teilweise", "Nein, aber geplant", "Nein"] + }, + + // SECTION B: ZIELE & PRIORITÄTEN (Q6-10) + { + section: "Ziele & Prioritäten", + question: "Welches Ziel möchtest du in den nächsten 30 Tagen erreichen?", + type: "multiple", + options: ["mehr Leads", "mehr Umsatz", "Zeit sparen", "Prozesse automatisieren", "besseren Überblick gewinnen", "Sonstiges"] + }, + { + section: "Ziele & Prioritäten", + question: "Was ist langfristig dein wichtigstes Unternehmensziel?", + type: "single", + auto_advance: true, + options: ["Wachstum", "Automatisierung", "weniger Stress", "Skalierung", "Gewinnmaximierung"] + }, + { + section: "Ziele & Prioritäten", + question: "Welche Kennzahlen sind dir aktuell am wichtigsten?", + type: "multiple", + options: ["Leads", "Umsatz", "Gewinn", "Zeitersparnis", "Effizienz", "Kundenzufriedenheit"] + }, + { + section: "Ziele & Prioritäten", + question: "Wie schnell erwartest du sichtbare Ergebnisse?", + type: "single", + auto_advance: true, + options: ["1–7 Tage", "7–14 Tage", "30 Tage", "egal – Hauptsache nachhaltig"] + }, + { + section: "Ziele & Prioritäten", + question: "Welche deiner Aufgaben möchtest du am liebsten sofort abgeben?", + type: "multiple", + options: ["Social Media", "Backoffice", "Kundenservice", "Sales", "Terminverwaltung", "E-Mails", "Angebote", "Rechnungen"] + }, + + // SECTION C: ENGPASSANALYSE (Q11-15) + { + section: "Engpassanalyse", + question: "Welche Aufgabe kostet dich derzeit am meisten Zeit pro Woche?", + type: "single", + options: ["Nachrichten beantworten", "Verwaltung", "Angebote", "Content-Erstellung", "Support", "Rechnungen"] + }, + { + section: "Engpassanalyse", + question: "Wo entstehen deine meisten Fehler oder Verzögerungen?", + type: "single", + options: ["Manuelle Prozesse", "Fehlende Struktur", "Kommunikation", "Tools", "Datenpflege"] + }, + { + section: "Engpassanalyse", + question: "Welche Prozesse sind aktuell komplett unstrukturiert?", + type: "multiple", + options: ["Kundenanfragen", "Sales", "Onboarding", "Backoffice", "Content", "Marketing"] + }, + { + section: "Engpassanalyse", + question: "Welche deiner Abläufe fühlst du als „Flaschenhals"?", + type: "textarea", + max_chars: 500 + }, + { + section: "Engpassanalyse", + question: "Wie viel Zeit verbringst du wöchentlich mit Admin-Aufgaben?", + type: "single", + options: ["0-5h", "6-10h", "11-15h", "16-20h", "20+ Stunden"] + }, + + // SECTION D: AUTOMATISIERUNGSPOTENZIALE (Q16-20) + { + section: "Automatisierungspotenziale", + question: "Welche KI-Bereiche möchtest du nutzen?", + type: "multiple", + options: ["Content-Erstellung", "Social Media", "Marketing", "Sales", "Backoffice", "Analyse"] + }, + { + section: "Automatisierungspotenziale", + question: "Wie wiederkehrend sind die Aufgaben, die du automatisieren möchtest?", + type: "single", + options: ["Täglich", "Wöchentlich", "Monatlich", "Selten", "Einmalig"] + }, + { + section: "Automatisierungspotenziale", + question: "Welche Software-Tools sind bei dir im Einsatz?", + type: "textarea", + placeholder: "z.B. Excel, HubSpot, Salesforce, etc.", + max_chars: 500, + }, + { + section: "Automatisierungspotenziale", + question: "Wie gut sind deine Unternehmensdaten dokumentiert und zugänglich?", + type: "single", + options: ["Sehr gut", "Gut", "Mittel", "Schlecht", "Sehr schlecht"] + }, + { + section: "Automatisierungspotenziale", + question: "Welches Budget hast du für die KI-Integration vorgesehen?", + type: "single", + options: ["Keins", "< 1.000€", "1.000€ - 5.000€", "5.000€ - 10.000€", "> 10.000€"] + }, + + // SECTION E: MINDSET & BEREITSCHAFT (Q21-25) + { + section: "Mindset & Bereitschaft", + question: "Wie offen ist dein Team für die Einführung neuer Technologien?", + type: "single", + options: ["Sehr offen", "Offen", "Neutral", "Eher skeptisch", "Ablehnend"] + }, + { + section: "Mindset & Bereitschaft", + question: "Hast du interne Ressourcen (Personal, Know-how) für ein KI-Projekt?", + type: "single", + options: ["Ja, umfassend", "Ja, teilweise", "Wenig", "Nein"] + }, + { + section: "Mindset & Bereitschaft", + question: "Wie wichtig ist dir die Datensicherheit bei der Nutzung von KI?", + type: "single", + options: ["Extrem wichtig", "Sehr wichtig", "Wichtig", "Weniger wichtig"] + }, + { + section: "Mindset & Bereitschaft", + question: "Was ist deine größte Sorge bei der Einführung von KI?", + type: "textarea", + placeholder: "z.B. Kosten, Sicherheit, Akzeptanz im Team", + max_chars: 500, + }, + { + section: "Mindset & Bereitschaft", + question: "Bist du bereit, bestehende Prozesse anzupassen, um KI effektiv zu nutzen?", + type: "single", + options: ["Ja, absolut", "Ja, wenn nötig", "Eher ungerne", "Nein"] + }, +]; + +let currentQuestionIndex = 0; +const userAnswers = {}; + +function startQuestionnaire() { + document.querySelector('.welcome-screen').classList.remove('active'); + document.querySelector('.question-screen').classList.add('active'); + displayQuestion(); +} + +function displayQuestion() { + const questionData = questions[currentQuestionIndex]; + const container = document.getElementById('question-container'); + container.innerHTML = ''; + container.classList.remove('fade-in'); + void container.offsetWidth; // Trigger reflow + container.classList.add('fade-in'); + + // Update Section Title + document.querySelector('.section-title').textContent = `Abschnitt: ${questionData.section}`; + + let content = ` +
+ Fast geschafft! Geben Sie Ihre E-Mail-Adresse ein, um Ihren personalisierten KI-Fahrplan sofort zu erhalten. +
+ ++ Wir haben mit der Analyse begonnen. Ihr personalisierter Fahrplan zur Automatisierung wird in wenigen Minuten in Ihrem Posteingang sein. +
+