diff --git a/assets/css/custom.css b/assets/css/custom.css index 854fc5a..362ba65 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -813,51 +813,58 @@ body { /* SOCIAL PROOF SECTION */ .social-proof-section { - padding: var(--space-8) 0; - background-color: var(--bg-primary); + background: #0F1728; /* secondary bg - different from hero */ + padding: 80px 48px; + text-align: center; + border-top: 1px solid rgba(0,245,255,0.1); + border-bottom: 1px solid rgba(0,245,255,0.1); overflow: hidden; } .social-proof-headline { - text-align: center; - font-family: var(--font-heading); - font-weight: var(--weight-medium); - color: var(--text-muted); - margin-bottom: var(--space-6); + font: 18px 'Space Grotesk', medium; + color: #64748B; + letter-spacing: 0.05em; + text-transform: uppercase; + margin-bottom: 48px; } .logo-marquee { width: 100%; - position: relative; - -webkit-mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent); - mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent); + overflow: hidden; } .logo-track { display: flex; - width: max-content; - animation: marquee 40s linear infinite; + gap: 64px; + animation: scroll-logos 40s linear infinite; +} + +@keyframes scroll-logos { + from { transform: translateX(0); } + to { transform: translateX(-50%); } +} + +.logo-track:hover { + animation-play-state: paused; } .logo-item { - display: flex; - align-items: center; - justify-content: center; - width: 200px; - font-family: var(--font-heading); - font-size: var(--text-xl); - color: var(--text-muted); - opacity: 0.6; - transition: opacity var(--duration-normal), color var(--duration-normal); -} -.logo-item:hover { - color: var(--text-gray); - opacity: 1; + flex-shrink: 0; + padding: 24px 32px; + background: rgba(255,255,255,0.02); + border: 1px solid rgba(255,255,255,0.05); + border-radius: 16px; + font-size: 20px; + font-weight: 500; + color: #94A3B8; + transition: all 300ms; } -@keyframes marquee { - from { transform: translateX(0); } - to { transform: translateX(-50%); } +.logo-item:hover { + background: rgba(255,255,255,0.05); + color: #FFFFFF; + transform: scale(1.05); } /* VALUE PROPOSITION SECTION */ @@ -1576,3 +1583,473 @@ body.menu-open { display: block; } } + +/* ------------------------------ */ +/* SUBPAGES */ +/* ------------------------------ */ + +.page-main { + padding-top: 80px; /* mainHeader height */ +} + +.page-hero-section { + padding: var(--space-12) 0; + background-color: var(--bg-secondary); + text-align: center; + border-bottom: 1px solid rgba(0, 245, 255, 0.1); +} + +.breadcrumb { + display: flex; + justify-content: center; + align-items: center; + gap: var(--space-1); + font-size: var(--text-sm); + color: var(--text-muted); + margin-bottom: var(--space-3); +} + +.breadcrumb a { + color: var(--text-gray); + text-decoration: none; + transition: color var(--duration-fast); +} + +.breadcrumb a:hover { + color: var(--cyan); +} + +.breadcrumb-separator { + color: var(--text-muted); +} + +.page-badge { + display: inline-block; + padding: var(--space-1) var(--space-2); + border: 1px solid var(--purple); + border-radius: 50px; + color: var(--purple); + font-family: var(--font-heading); + font-weight: var(--weight-bold); + font-size: var(--text-sm); + letter-spacing: 1px; + margin-bottom: var(--space-3); +} + +.page-headline { + font-family: var(--font-heading); + font-size: var(--text-5xl); + font-weight: var(--weight-bold); + color: var(--text-white); + line-height: var(--leading-tight); + margin-bottom: var(--space-3); + max-width: 900px; + margin-left: auto; + margin-right: auto; +} + +.page-subtext { + font-size: var(--text-xl); + line-height: var(--leading-relaxed); + color: var(--text-gray); + max-width: 800px; + margin: 0 auto; +} + + +/* TARGET GROUPS SECTION (fuer-wen.php) */ +.target-groups-section, +.speed-comparison-section, +.definition-section, +.how-ai-works-section, +.use-cases-section { + padding: var(--space-16) 0; +} + +.target-cards-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-6); +} + +.target-card { + background: var(--bg-secondary); + border: 1px solid rgba(255,255,255,0.1); + border-radius: 16px; + padding: var(--space-6); + display: flex; + flex-direction: column; +} + +.target-icon { + font-size: 48px; + margin-bottom: var(--space-4); +} + +.target-title { + font-family: var(--font-heading); + font-size: var(--text-2xl); + font-weight: var(--weight-semibold); + color: var(--text-white); + margin-bottom: var(--space-2); +} + +.target-description { + font-size: var(--text-base); + line-height: var(--leading-normal); + color: var(--text-gray); + flex-grow: 1; + margin-bottom: var(--space-4); +} + +.target-benefits h4 { + font-size: var(--text-base); + font-weight: var(--weight-semibold); + color: var(--cyan); + margin-bottom: var(--space-2); +} + +.feature-list { + list-style: none; + padding-left: 0; + margin-bottom: var(--space-4); + display: flex; + flex-direction: column; + gap: var(--space-1); +} + +.feature-list li { + padding-left: 1.5em; + position: relative; + color: var(--text-gray); +} + +.feature-list li::before { + content: '✓'; + position: absolute; + left: 0; + color: var(--cyan); + font-weight: bold; +} + +.target-stat { + margin-top: auto; + padding-top: var(--space-4); + border-top: 1px solid rgba(255,255,255,0.1); + text-align: center; +} + +.stat-number { + display: block; + font-size: var(--text-4xl); + font-weight: var(--weight-bold); + color: var(--text-white); + line-height: 1.1; +} + +.stat-label { + font-size: var(--text-sm); + color: var(--text-muted); +} + +/* SPEED COMPARISON SECTION (warum-jetzt.php) */ +.timeline-bars { + max-width: 900px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: var(--space-4); +} + +.timeline-bar { + display: grid; + grid-template-columns: 150px 1fr 100px; + align-items: center; + gap: var(--space-3); + font-size: var(--text-base); +} + +.bar-label { + text-align: right; + color: var(--text-gray); + display: flex; + flex-direction: column; + align-items: flex-end; +} + +.bar-name { + font-weight: var(--weight-semibold); + color: var(--text-white); +} + +.bar-badge { + font-size: var(--text-xs); + font-weight: bold; + color: var(--bg-primary); + background: var(--cyan); + padding: 2px 6px; + border-radius: 6px; +} + +.bar-track { + background: var(--bg-secondary); + border-radius: 8px; + height: 32px; + overflow: hidden; + border: 1px solid rgba(255,255,255,0.1); +} + +.bar-fill { + height: 100%; + background: var(--gradient-primary); + border-radius: 8px; + animation: fill-bar 2s var(--ease-bounce) forwards; +} + +.timeline-bar.bar-fastest .bar-fill { + background: var(--gradient-cyan); +} + +@keyframes fill-bar { + from { width: 0 !important; } + to { /* width is set via inline style */ } +} + +.bar-value { + font-weight: var(--weight-bold); + color: var(--text-white); + font-size: var(--text-lg); +} + + +/* DEFINITION CARD (was-ist-ki.php) */ +.definition-card { + max-width: 900px; + margin: 0 auto; + padding: 64px; + background: linear-gradient(135deg, rgba(0,245,255,0.1), rgba(168,85,247,0.1)); + border: 2px solid rgba(0,245,255,0.3); + border-radius: 32px; + text-align: center; +} +.definition-icon { + font-size: 80px; + margin-bottom: 24px; +} +.definition-title { + font: 32px 'Space Grotesk', bold; + color: #FFFFFF; + margin-bottom: 24px; +} +.definition-text { + font: 24px 'Inter', regular; + color: #CBD5E1; + line-height: 1.7; +} +.definition-text strong { + color: #00F5FF; + font-weight: 600; +} +@media (max-width: 767px) { + .definition-card { + padding: 40px 32px; + } + .definition-text { + font-size: 20px; + } +} + +/* HOW AI WORKS SECTION (was-ist-ki.php) */ +.core-abilities-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-6); +} + +.ability-card { + background: var(--bg-secondary); + border-radius: 16px; + padding: var(--space-6); + text-align: center; + border: 1px solid rgba(255,255,255,0.1); +} + +.ability-icon { + font-size: 48px; + margin-bottom: var(--space-3); + display: block; +} + +.ability-title { + font-family: var(--font-heading); + font-size: var(--text-xl); + font-weight: var(--weight-semibold); + color: var(--text-white); + margin-bottom: var(--space-2); +} + +.ability-description { + font-size: var(--text-base); + color: var(--text-gray); + line-height: var(--leading-normal); +} + +/* USE CASES SECTION (einsatzmoeglichkeiten.php) */ +.use-cases-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--space-6); +} + +.usecase-card { + background: var(--bg-secondary); + border: 1px solid rgba(255,255,255,0.1); + border-radius: 16px; + padding: var(--space-6); + display: flex; + flex-direction: column; +} + +.usecase-header { + display: flex; + align-items: center; + gap: var(--space-3); + margin-bottom: var(--space-3); +} + +.usecase-icon { + font-size: 32px; +} + +.usecase-title { + font-family: var(--font-heading); + font-size: var(--text-2xl); + font-weight: var(--weight-semibold); + color: var(--text-white); +} + +.usecase-description { + font-style: italic; + color: var(--text-gray); + margin-bottom: var(--space-4); + flex-grow: 1; +} + +.usecase-features { + margin-bottom: var(--space-4); +} + +.usecase-features h4 { + font-size: var(--text-base); + font-weight: var(--weight-semibold); + color: var(--cyan); + margin-bottom: var(--space-2); +} + +.usecase-features ul { + list-style: none; + padding-left: 0; + margin-bottom: 0; + display: flex; + flex-direction: column; + gap: var(--space-1); + font-size: var(--text-sm); +} + +.usecase-features ul li { + padding-left: 1.5em; + position: relative; +} + +.usecase-features ul li::before { + content: '›'; + position: absolute; + left: 0; + color: var(--cyan); + font-weight: bold; +} + +.usecase-benefits { + display: flex; + gap: var(--space-4); + margin-top: auto; + padding-top: var(--space-4); + border-top: 1px solid rgba(255,255,255,0.1); +} + +.benefit-item { + display: flex; + align-items: center; + gap: var(--space-1); +} + +.benefit-icon { + font-size: 20px; +} + +.benefit-text { + font-size: var(--text-sm); + font-weight: 500; + color: var(--text-gray); +} + +.usecase-btn { + margin-top: var(--space-4); + 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); +} + +.usecase-btn:hover { + background: var(--cyan); + border-color: var(--cyan); + color: var(--bg-primary); +} + + +/* RESPONSIVE ADJUSTMENTS FOR SUBPAGES */ +@media (max-width: 1023px) { + .page-headline { + font-size: var(--text-4xl); + } + .page-subtext { + font-size: var(--text-lg); + } + + .target-cards-grid, + .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; + 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); + } +} + diff --git a/einsatzmoeglichkeiten.php b/einsatzmoeglichkeiten.php new file mode 100644 index 0000000..111bfcd --- /dev/null +++ b/einsatzmoeglichkeiten.php @@ -0,0 +1,349 @@ + + + + + + + Einsatzmöglichkeiten - Future Now + + + + + + + + + + + + + + + +
+
+ + +
+
+ + +
+ + + +
+
+
+ +
+
+
+ +
Use Cases
+

Wie Sie KI in Ihrem Unternehmen einsetzen

+

Von Content-Erstellung bis Datenanalyse – entdecken Sie, wo KI Ihrem Unternehmen den größten Mehrwert bietet.

+
+
+ +
+
+
+
+
+
✍️
+

Content-Erstellung & Texte

+
+

KI erstellt in Sekunden Texte, die früher Stunden dauerten.

+
+

Konkrete Anwendungen:

+
    +
  • Blogposts und Artikel automatisch generieren
  • +
  • Social Media Content für Wochen im Voraus
  • +
  • E-Mail-Kampagnen personalisiert schreiben
  • +
  • Produktbeschreibungen in Serie erstellen
  • +
+
+
+
+ ⏱️ + 80% Zeitersparnis +
+
+ 💰 + Mehr kreativer Output +
+
+ +
+
+
+
📈
+

Marketing & Vertrieb

+
+

Erreichen Sie Ihre Kunden gezielter als je zuvor.

+
+

Konkrete Anwendungen:

+
    +
  • Personalisierte Werbeanzeigen
  • +
  • Automatisierte Lead-Qualifizierung
  • +
  • Preisoptimierung in Echtzeit
  • +
  • Vorhersage von Kündigungsrisiken (Churn Prediction)
  • +
+
+
+
+ ⏱️ + 30% mehr qualifizierte Leads +
+
+ 💰 + 20% höhere Conversion Rate +
+
+ +
+
+
+
💬
+

Kundenservice

+
+

Bieten Sie 24/7-Support und steigern Sie die Kundenzufriedenheit.

+
+

Konkrete Anwendungen:

+
    +
  • Intelligente Chatbots, die 80% der Anfragen lösen
  • +
  • Automatisierte Ticket-Sortierung und -Beantwortung
  • +
  • Sentiment-Analyse von Kundenfeedback
  • +
  • Personalisierte Hilfeartikel und FAQs
  • +
+
+
+
+ ⏱️ + 50% schnellere Antwortzeiten +
+
+ 💰 + 40% weniger Kosten im Support-Team +
+
+ +
+
+
+
⚙️
+

Prozessautomatisierung

+
+

Eliminieren Sie repetitive manuelle Aufgaben.

+
+

Konkrete Anwendungen:

+
    +
  • Automatisierte Dateneingabe und -verarbeitung
  • +
  • Intelligente Dokumentenanalyse (z.B. Verträge, Rechnungen)
  • +
  • Automatisierung von HR-Prozessen (z.B. Bewerber-Screening)
  • +
  • Robotergesteuerte Prozessautomatisierung (RPA)
  • +
+
+
+
+ ⏱️ + 90% weniger manuelle Fehler +
+
+ 💰 + 60% Zeitersparnis bei Admin-Aufgaben +
+
+ +
+
+
+
📊
+

Datenanalyse & Einblicke

+
+

Verwandeln Sie Ihre Daten in wertvolle Geschäftseinblicke.

+
+

Konkrete Anwendungen:

+
    +
  • Vorhersage von Markttrends und Verkaufsprognosen
  • +
  • Analyse von Kundenverhalten und -präferenzen
  • +
  • Aufdeckung von Betrug und Anomalien
  • +
  • Optimierung von Geschäftsstrategien auf Datenbasis
  • +
+
+
+
+ ⏱️ + Schnellere datengestützte Entscheidungen +
+
+ 💰 + Aufdeckung neuer Umsatzpotenziale +
+
+ +
+
+
+
💡
+

Produktentwicklung

+
+

Entwickeln Sie innovative Produkte und Dienstleistungen.

+
+

Konkrete Anwendungen:

+
    +
  • Generierung von neuen Produktideen und Designs
  • +
  • Automatisierte Software-Tests und Code-Vervollständigung
  • +
  • Simulation und Optimierung von Prototypen
  • +
  • Personalisierte Produktempfehlungen
  • +
+
+
+
+ ⏱️ + 50% schnellere Entwicklungszyklen +
+
+ 💰 + Reduzierung der Entwicklungskosten +
+
+ +
+
+
+
+
+ + + + + + + diff --git a/fuer-wen.php b/fuer-wen.php new file mode 100644 index 0000000..d933343 --- /dev/null +++ b/fuer-wen.php @@ -0,0 +1,245 @@ + + + + + + + Für wen ist KI? - Future Now + + + + + + + + + + + + + + + +
+
+ + +
+
+ + +
+ + + +
+
+
+ +
+
+
+ +
Zielgruppen
+

Für wen ist Künstliche Intelligenz?

+

KI ist nicht nur für Tech-Konzerne. Entdecken Sie, wie Ihr Unternehmen – unabhängig von Größe oder Branche – von intelligenter Automatisierung profitieren kann.

+
+
+ +
+
+
+

Wer profitiert von KI?

+

Drei Hauptgruppen, für die KI einen unmittelbaren Mehrwert bietet

+
+
+
+
💼
+

Selbständige & Freelancer

+

Als Einzelkämpfer müssen Sie alles selbst erledigen. KI gibt Ihnen die Superkraft eines ganzen Teams.

+
+

Ihre Vorteile:

+
    +
  • Automatische Angebotserstellung in Minuten statt Stunden
  • +
  • 24/7 Kundenservice ohne zusätzliche Kosten
  • +
  • Social Media Content auf Knopfdruck
  • +
  • Zeit für Akquise statt Administration
  • +
+
+
+ 15h + pro Woche mehr Zeit für Ihr Kerngeschäft +
+
+
+
🏢
+

Kleine & mittlere Unternehmen (KMU)

+

Bleiben Sie wettbewerbsfähig und optimieren Sie Ihre Prozesse, ohne riesige Teams einstellen zu müssen.

+
+

Ihre Vorteile:

+
    +
  • Automatisierte Rechnungsverarbeitung und Buchhaltung
  • +
  • Intelligente Lagerverwaltung und Logistik
  • +
  • Personalisierte Marketing-Kampagnen
  • +
  • Effizientere Ressourceneinsatzplanung
  • +
+
+
+ 40% + Kostenreduktion bei repetitiven Verwaltungsaufgaben +
+
+
+
🌍
+

Große Unternehmen & Konzerne

+

Skalieren Sie Ihre Operationen, analysieren Sie riesige Datenmengen und entdecken Sie neue Geschäftsfelder.

+
+

Ihre Vorteile:

+
    +
  • Big-Data-Analyse für strategische Entscheidungen
  • +
  • Vorausschauende Wartung (Predictive Maintenance)
  • +
  • Optimierung von Lieferketten in Echtzeit
  • +
  • Entwicklung neuer, datengesteuerter Produkte und Services
  • +
+
+
+ 25% + Effizienzsteigerung in der gesamten Wertschöpfungskette +
+
+
+
+
+
+ + + + + + + diff --git a/index.php b/index.php index 3af5fa7..7f754da 100644 --- a/index.php +++ b/index.php @@ -34,28 +34,28 @@