Add home module and transition mixin to stylesheets
Included a new `@import 'modules/home';` and added a re-usable `@mixin transition` for smoother animations. Updated button styling with padding, hover effects, and transitions to enhance UI. Adjusted max-width in `.team__inner` for better layout consistency.
This commit is contained in:
@@ -0,0 +1,82 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Funktion zum Formatieren der Zahlen mit Kommas und Plus-Zeichen
|
||||
function formatNumber(num, includePlus = true) {
|
||||
const formatted = num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
|
||||
return includePlus ? formatted + '+' : formatted;
|
||||
}
|
||||
|
||||
// Funktion zum Extrahieren der Zahl aus dem Text (entfernt das '+' und Kommas)
|
||||
function extractNumber(text) {
|
||||
return parseInt(text.replace(/,/g, '').replace('+', ''), 10);
|
||||
}
|
||||
|
||||
// Funktion zum Animieren der Zähler
|
||||
function animateCounter(counterElement, target) {
|
||||
// Startpunkt
|
||||
let start = 0;
|
||||
// Dauer der Animation in Millisekunden (angepasst an die Größe der Zahl)
|
||||
const duration = Math.min(2000 + Math.log10(target) * 300, 3000);
|
||||
// Zeitpunkt des Starts
|
||||
const startTime = performance.now();
|
||||
|
||||
// Funktion für die Animation
|
||||
function updateCounter(currentTime) {
|
||||
// Berechne den verstrichenen Zeitanteil (0 bis 1)
|
||||
const elapsedTime = Math.min((currentTime - startTime) / duration, 1);
|
||||
|
||||
// Easing-Funktion für eine natürlichere Animation
|
||||
const progress = easeOutQuart(elapsedTime);
|
||||
|
||||
// Berechne den aktuellen Wert
|
||||
const currentValue = Math.floor(progress * target);
|
||||
|
||||
// Aktualisiere den Zähler mit dem Plus-Zeichen
|
||||
counterElement.textContent = formatNumber(currentValue, true);
|
||||
|
||||
// Wenn die Animation noch nicht abgeschlossen ist, nächsten Frame anfordern
|
||||
if (elapsedTime < 1) {
|
||||
requestAnimationFrame(updateCounter);
|
||||
} else {
|
||||
// Stelle sicher, dass der endgültige Wert exakt dem Zielwert entspricht
|
||||
counterElement.textContent = formatNumber(target, true);
|
||||
}
|
||||
}
|
||||
|
||||
// Easing-Funktion für eine natürlichere Animation
|
||||
function easeOutQuart(t) {
|
||||
return 1 - Math.pow(1 - t, 4);
|
||||
}
|
||||
|
||||
// Starte die Animation
|
||||
requestAnimationFrame(updateCounter);
|
||||
}
|
||||
|
||||
// Intersection Observer zum Erkennen, wann die Zähler sichtbar werden
|
||||
const observer = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
// Wenn der Zähler sichtbar wird
|
||||
if (entry.isIntersecting) {
|
||||
const counterElement = entry.target;
|
||||
// Extrahiere die Zielnummer aus dem Text
|
||||
const targetText = counterElement.textContent;
|
||||
const target = extractNumber(targetText);
|
||||
|
||||
// Setze den Anfangswert auf 0 mit Plus-Zeichen
|
||||
counterElement.textContent = '0+';
|
||||
|
||||
// Starte die Animation
|
||||
animateCounter(counterElement, target);
|
||||
|
||||
// Beobachtung beenden, damit die Animation nur einmal ausgeführt wird
|
||||
observer.unobserve(counterElement);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1 // 10% des Elements müssen sichtbar sein
|
||||
});
|
||||
|
||||
// Alle Zähler beobachten
|
||||
document.querySelectorAll('.satag--home-counter-number').forEach(counter => {
|
||||
observer.observe(counter);
|
||||
});
|
||||
});
|
||||
+98
-23
@@ -4,33 +4,108 @@ hide:
|
||||
- toc
|
||||
---
|
||||
|
||||
# <span class="satag-trademark">satware®</span> AI
|
||||
|
||||
<div class="satag--home-landing">
|
||||
|
||||
<!-- Section entry -->
|
||||
|
||||
<div class="satag--home-hero entry">
|
||||
|
||||
<h1>Willkommen zu<br /> <span class="satag-trademark">satware®</span> AI</h1>
|
||||
|
||||
<div class="entry-text">
|
||||
<span class="satag-trademark">satware®</span> AI bietet zukunftsweisende KI-Lösungen, die Unternehmen dabei
|
||||
unterstützen, ihre Prozesse zu optimieren, Daten effektiver zu nutzen und intelligente Entscheidungen zu treffen. Unsere
|
||||
Technologien sind darauf ausgerichtet, Ihren Geschäftserfolg durch moderne, KI-gestützte Lösungen zu steigern.
|
||||
</div>
|
||||
|
||||
<p class="hero-buttons"><a class="md-button md-button--primary" href="/demo/">Demo buchen</a> <a class="md-button" href="/zugang/">Zugang bestellen</a></p>
|
||||
|
||||
|
||||
## KI-gestützte Automatisierung
|
||||
|
||||
Intelligente Lösungen für die automatisierte Verarbeitung und Analyse von Daten.
|
||||
|
||||
|
||||
## Smarte Datenverarbeitung
|
||||
|
||||
Verwandeln Sie rohe Daten in verwertbare Erkenntnisse mit modernsten KI-Algorithmen.
|
||||
|
||||
|
||||
## Sicherheit & Datenschutz
|
||||
|
||||
Alle unsere Lösungen setzen auf höchste Sicherheitsstandards und DSGVO-Konformität.
|
||||
|
||||
|
||||
## Maßgeschneiderte Entwicklung
|
||||
|
||||
Individuelle KI-Lösungen, die exakt auf Ihre Geschäftsanforderungen zugeschnitten sind.
|
||||
<p class="screenshot-container">
|
||||
<img src="../assets/images/home/satware-ai-chat-screenshot.jpg" />
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
## Willkommen bei <span class="satag-trademark">satware®</span> AI
|
||||
|
||||
<span class="satag-trademark">satware®</span> AI bietet zukunftsweisende KI-Lösungen, die Unternehmen dabei unterstützen, ihre Prozesse zu optimieren, Daten effektiver zu nutzen und intelligente Entscheidungen zu treffen. Unsere Technologien sind darauf ausgerichtet, Ihren Geschäftserfolg durch moderne, KI-gestützte Lösungen zu steigern.
|
||||
</div>
|
||||
|
||||
<!-- end Section entry -->
|
||||
|
||||
<!-- Section Companies -->
|
||||
|
||||
<div class="satag--home-companies">
|
||||
|
||||
<h2>Trusted by the world's top organizations across industries</h2>
|
||||
|
||||
|
||||
<div class="satag--home-companies-logo-container">
|
||||
<div class="satag--home-companies-logo">
|
||||
<img src="../assets/images/home/company-logos/hammel.png" />
|
||||
</div>
|
||||
<div class="satag--home-companies-logo">
|
||||
<img src="../assets/images/home/company-logos/ocupro.png" />
|
||||
</div>
|
||||
<div class="satag--home-companies-logo">
|
||||
<img src="../assets/images/home/company-logos/satware-ag.png" />
|
||||
</div>
|
||||
<div class="satag--home-companies-logo">
|
||||
<img src="../assets/images/home/company-logos/klinikum-worms.png" />
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="satag--home-companies-logo-container">
|
||||
<div class="satag--home-companies-logo">
|
||||
<img src="../assets/images/home/company-logos/hammel.png" />
|
||||
</div>
|
||||
<div class="satag--home-companies-logo">
|
||||
<img src="../assets/images/home/company-logos/ocupro.png" />
|
||||
</div>
|
||||
<div class="satag--home-companies-logo">
|
||||
<img src="../assets/images/home/company-logos/satware-ag.png" />
|
||||
</div>
|
||||
<div class="satag--home-companies-logo">
|
||||
<img src="../assets/images/home/company-logos/klinikum-worms.png" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- end Section Companies -->
|
||||
|
||||
<!-- Section Counters -->
|
||||
|
||||
<div class="satag--home-counters">
|
||||
|
||||
<div class="satag--home-counters-container">
|
||||
<div class="satag--home-counter">
|
||||
<span class="satag--home-counter-icon"><i class="fa-thin fa-globe"></i></span>
|
||||
<span class="satag--home-counter-number">602+</span>
|
||||
Company AI platforms created
|
||||
</div>
|
||||
<div class="satag--home-counter">
|
||||
<span class="satag--home-counter-icon"><i class="fa-thin fa-layer-group"></i></span>
|
||||
<span class="satag--home-counter-number">7,199+</span>
|
||||
Specialized AI agents built
|
||||
</div>
|
||||
<div class="satag--home-counter">
|
||||
<span class="satag--home-counter-icon"><i class="fa-thin fa-arrow-trend-up"></i></span>
|
||||
<span class="satag--home-counter-number">132,853+</span>
|
||||
Monthly active users
|
||||
</div>
|
||||
<div class="satag--home-counter">
|
||||
<span class="satag--home-counter-icon"><i class="fa-thin fa-message-smile"></i></span>
|
||||
<span class="satag--home-counter-number">785,862+</span>
|
||||
Monthly messages sent
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- end Section Counters -->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
[Lösungen entdecken](#){ .md-button .md-button--primary }
|
||||
[Kontakt aufnehmen](#){ .md-button }
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -11,6 +11,11 @@
|
||||
// Module importieren
|
||||
@import 'modules/team';
|
||||
@import 'modules/footer';
|
||||
@import 'modules/home';
|
||||
|
||||
@mixin transition{
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
// satware.ai CI-Anpassungen
|
||||
|
||||
@@ -206,6 +211,19 @@ a.headerlink{
|
||||
color: #fff !important;
|
||||
border-color: var(--md-primary-fg-color) !important;
|
||||
|
||||
padding: 1.7em 2.9em !important;
|
||||
letter-spacing: 0.2rem !important;
|
||||
font-weight: 400 !important;
|
||||
|
||||
@include transition;
|
||||
|
||||
&:hover{
|
||||
border-color: var(--md-primary-fg-color) !important;
|
||||
transform: translateY(8px);
|
||||
@include transition;
|
||||
}
|
||||
|
||||
|
||||
&.md-button--primary {
|
||||
background-color: var(--md-primary-fg-color);
|
||||
border-color: var(--md-primary-fg-color);
|
||||
@@ -299,5 +317,6 @@ a.headerlink{
|
||||
|
||||
&__inner {
|
||||
padding: 0.5rem;
|
||||
max-width: 98%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,116 @@
|
||||
.satag--home-landing{
|
||||
|
||||
@mixin ohne-balken{
|
||||
h1,h2,h3,h4,h5,h6{
|
||||
&:after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.satag--home-hero{
|
||||
|
||||
.entry-text{
|
||||
font-size: 1.2rem;
|
||||
line-height: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
//@include ohne-balken;
|
||||
|
||||
h1{
|
||||
font-size: 5rem;
|
||||
margin-bottom: 1.75rem;
|
||||
text-align: left;
|
||||
line-height: 100%;
|
||||
&:after{
|
||||
height: 12px;
|
||||
width: 85px;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: -0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-buttons{
|
||||
text-align: left;
|
||||
padding-bottom: 3rem;
|
||||
|
||||
}
|
||||
|
||||
//text-align: center;
|
||||
|
||||
.screenshot-container{
|
||||
padding: 2rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img{
|
||||
border: 1px solid var(--md-primary-fg-color--light);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.satag--home-companies{
|
||||
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
right: 50%;
|
||||
margin-left: -50vw;
|
||||
margin-right: -50vw;
|
||||
padding: 2rem 0 4rem 0;
|
||||
background-color: var(--md-primary-fg-color);
|
||||
|
||||
h2{
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
@include ohne-balken;
|
||||
|
||||
text-align: center;
|
||||
.satag--home-companies-logo-container{
|
||||
display: flex;
|
||||
max-width: 75%;
|
||||
margin: 0 auto;
|
||||
.satag--home-companies-logo{
|
||||
flex: auto;
|
||||
img{
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.satag--home-counters{
|
||||
|
||||
width: 100%;
|
||||
padding: 2rem 0 4rem 0;
|
||||
|
||||
h2{
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
@include ohne-balken;
|
||||
|
||||
text-align: center;
|
||||
.satag--home-counters-container{
|
||||
display: flex;
|
||||
.satag--home-counter{
|
||||
flex: auto;
|
||||
display: block;
|
||||
.satag--home-counter-icon{
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
color: var(--md-primary-fg-color--light);
|
||||
}
|
||||
.satag--home-counter-number{
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user