Update: Abschluss 31.07.2025
This commit is contained in:
parent
4f1e5eddac
commit
b18d1e9169
8 changed files with 350 additions and 443 deletions
|
|
@ -4,8 +4,8 @@
|
|||
{{ with .Params.banner }}
|
||||
{{ if .enable }}
|
||||
<!-- HERO / SLIDER -->
|
||||
<section class="slider {{ if .bg_overlay }}overly{{ end }} gif-background"
|
||||
style="height: 100vh; display: flex; align-items: center; justify-content: center; position: relative;">
|
||||
<section id="hero" class="slider {{ if .bg_overlay }}overly{{ end }} gif-background"
|
||||
style="min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative;">
|
||||
<div class="my-container" style="position: relative; z-index: 2;">
|
||||
|
||||
<!-- *Logo-Zeile mit zwei Frames* -->
|
||||
|
|
@ -44,216 +44,166 @@
|
|||
|
||||
<!-- Scroll/Hide Header -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var scrolldown = document.querySelector('.scrolldown');
|
||||
scrolldown?.addEventListener('click', function () {
|
||||
const serviceSection = document.getElementById('service');
|
||||
const offset = 100;
|
||||
const targetPosition = serviceSection.getBoundingClientRect().top + window.pageYOffset - offset;
|
||||
window.scrollTo({ top: targetPosition, behavior: 'smooth' });
|
||||
});
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const hero = document.getElementById('hero');
|
||||
const targetSection = document.getElementById('leistungen');
|
||||
const scrolldown = document.querySelector('.scrolldown');
|
||||
const header = document.getElementById('mainHeader');
|
||||
let lastScroll = window.scrollY;
|
||||
let isScrolling = false;
|
||||
let scrollTriggered = false;
|
||||
const offset = 120;
|
||||
|
||||
window.addEventListener("scroll", function () {
|
||||
if (window.scrollY > 100) {
|
||||
scrolldown?.classList.add('hide');
|
||||
} else {
|
||||
scrolldown?.classList.remove('hide');
|
||||
}
|
||||
});
|
||||
function scrollToTarget() {
|
||||
if (!targetSection) return;
|
||||
const y = targetSection.getBoundingClientRect().top + window.pageYOffset - offset;
|
||||
window.scrollTo({ top: y, behavior: 'smooth' });
|
||||
}
|
||||
|
||||
var header = document.getElementById('mainHeader');
|
||||
var lastScrollPosition = window.scrollY;
|
||||
|
||||
window.addEventListener('scroll', function () {
|
||||
var currentScrollPosition = window.scrollY;
|
||||
header.style.top = (currentScrollPosition > lastScrollPosition) ? '-100vh' : '0';
|
||||
if (currentScrollPosition === 0) header.style.top = '0';
|
||||
lastScrollPosition = currentScrollPosition;
|
||||
});
|
||||
// Klick auf Chevron → scrollen
|
||||
scrolldown?.addEventListener('click', () => {
|
||||
scrollTriggered = true;
|
||||
scrollToTarget();
|
||||
});
|
||||
|
||||
// Scrollrad nach unten → am Ende von Hero → scrollen
|
||||
window.addEventListener('wheel', function (e) {
|
||||
if (isScrolling || e.deltaY <= 0 || scrollTriggered || !hero || !targetSection) return;
|
||||
|
||||
const heroBottom = hero.getBoundingClientRect().bottom;
|
||||
const threshold = 50;
|
||||
if (heroBottom <= window.innerHeight + threshold) {
|
||||
isScrolling = true;
|
||||
scrollTriggered = true;
|
||||
scrollToTarget();
|
||||
setTimeout(() => isScrolling = false, 1000);
|
||||
}
|
||||
}, { passive: true });
|
||||
|
||||
// Scroll-Verhalten (Chevron + Header + Reset)
|
||||
window.addEventListener('scroll', function () {
|
||||
// Chevron ausblenden
|
||||
if (window.scrollY > 100) {
|
||||
scrolldown?.classList.add('hide');
|
||||
} else {
|
||||
scrolldown?.classList.remove('hide');
|
||||
}
|
||||
|
||||
// Header verstecken beim Runterscrollen
|
||||
const currentScroll = window.scrollY;
|
||||
header.style.top = (currentScroll > lastScroll) ? '-100vh' : '0';
|
||||
if (currentScroll === 0) header.style.top = '0';
|
||||
lastScroll = currentScroll;
|
||||
|
||||
// ✅ Reset der Scroll-Aktion, wenn man wieder im Hero ist
|
||||
const heroTop = hero.getBoundingClientRect().top;
|
||||
if (heroTop >= 0) {
|
||||
scrollTriggered = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div style="height: 200px;"></div>
|
||||
|
||||
<!-- WHY AMPERION (Kompakte Version) -->
|
||||
{{ with site.GetPage "/whyamperion" }}
|
||||
{{ with .Params.service }}
|
||||
<section class="whyamperion section">
|
||||
<div class="container my-container">
|
||||
<div class="row">
|
||||
<div class="section-title text-center">
|
||||
{{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
|
||||
{{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
{{ range .service_item }}
|
||||
<div class="col-sm-6 col-md-3">
|
||||
<div class="service-item text-center">
|
||||
<i class="{{ .icon }}" aria-hidden="true" style="font-size: 2rem; margin-bottom: 0.5rem;"></i>
|
||||
<h3>{{ .name | markdownify }}</h3>
|
||||
<p>{{ .content | markdownify }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Leistungen -->
|
||||
<section id="leistungen" class="section">
|
||||
{{ partial "section-grid.html" (dict "page" "/service" "type" "zoom") }}
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- SERVICES -->
|
||||
{{ with site.GetPage "/service" }}
|
||||
{{ with .Params.service }}
|
||||
<section id="service" class="service">
|
||||
<div class="container-fluid my-container">
|
||||
<div class="services-title">
|
||||
{{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
|
||||
</div>
|
||||
<div class="services-description">
|
||||
{{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
|
||||
</div>
|
||||
<div class="service-grid">
|
||||
{{ range first 3 .service_item }}
|
||||
<div class="service-item-fixed">
|
||||
<div class="zoom-wrap">
|
||||
<a href="{{ .link | relURL }}">
|
||||
<img src="{{ .picture | relURL }}" alt="{{ .name }}">
|
||||
<div class="overlay-text">{{ .name }}</div>
|
||||
<div class="overlay"></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Fokusthemen -->
|
||||
<section id="fokusthemen" class="section">
|
||||
{{ partial "section-grid.html" (dict "page" "/focustopic" "type" "zoom") }}
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- FOCUSTOPICS -->
|
||||
{{ with site.GetPage "/focustopic" }}
|
||||
{{ with .Params.service }}
|
||||
<section id="focustopic" class="service">
|
||||
<div class="container-fluid my-container">
|
||||
<div class="services-title">
|
||||
{{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
|
||||
</div>
|
||||
<div class="services-description">
|
||||
{{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
|
||||
</div>
|
||||
<div class="service-grid">
|
||||
{{ range first 3 .service_item }}
|
||||
<div class="service-item-fixed">
|
||||
<div class="zoom-wrap">
|
||||
<a href="{{ .link | relURL }}">
|
||||
<img src="{{ .picture | relURL }}" alt="{{ .name }}">
|
||||
<div class="overlay-text">{{ .name }}</div>
|
||||
<div class="overlay"></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- WHY AMPERION – kompakt & detailliert (Hardcoded Version) -->
|
||||
<section class="whyamperion section" style="background-color:#f3f3f3">
|
||||
<!-- DARUM AMPERION – kompakt & detailliert -->
|
||||
<section class="whyamperion section" style="background-color:#f3f3f3; margin-top: 5rem; padding: 3rem 0;">
|
||||
<div class="container my-container">
|
||||
|
||||
<!-- Titelblock – eigener Wrapper statt .section-title -->
|
||||
<!-- Titelblock -->
|
||||
<div class="row">
|
||||
<div class="why-title text-center">
|
||||
<div class="text-center">
|
||||
<h1>Darum AMPERION</h1>
|
||||
<h2 class="why-sub"><em>Kompetenz, auf die Sie bauen können – von der Idee bis zur Inbetriebnahme.</em></h2>
|
||||
<h2><em>Kompetenz, auf die Sie bauen können – von der Idee bis zur Inbetriebnahme.</em></h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Karten -->
|
||||
<div class="why-grid mt-5">
|
||||
<article class="service-card text-center">
|
||||
<img src="icons/file-badge.svg" alt="Technische Planungskompetenz Icon" class="service-icon mb-3">
|
||||
<h2 class="service-card-title">Technische Planungskompetenz</h2>
|
||||
<p class="service-card-description">
|
||||
<strong>Langjährige Erfahrung mit komplexer Energieplanung –</strong> normgerecht, effizient & zukunftssicher.
|
||||
</p>
|
||||
</article>
|
||||
<div class="why-grid mt-5">
|
||||
<article class="service-card text-center">
|
||||
<img src="icons/file-badge.svg" alt="Technische Planungskompetenz Icon" class="service-icon mb-3">
|
||||
<h3 class="service-card-title">Technische Planungskompetenz</h3>
|
||||
<p class="service-card-description">
|
||||
<strong>Langjährige Erfahrung mit komplexer Energieplanung –</strong> normgerecht, effizient & zukunftssicher.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="service-card text-center">
|
||||
<img src="icons/plug-zap.svg" alt="Intelligente Energiesysteme Icon" class="service-icon mb-3">
|
||||
<h2 class="service-card-title">Intelligente Energiesysteme</h2>
|
||||
<p class="service-card-description">
|
||||
<strong>Von PV bis Speicher und Lastmanagement –</strong> für maximale Eigenversorgung und Netzverträglichkeit.
|
||||
</p>
|
||||
</article>
|
||||
<article class="service-card text-center">
|
||||
<img src="icons/plug-zap.svg" alt="Intelligente Energiesysteme Icon" class="service-icon mb-3">
|
||||
<h3 class="service-card-title">Intelligente Energiesysteme</h3>
|
||||
<p class="service-card-description">
|
||||
<strong>Von PV bis Speicher und Lastmanagement –</strong> für maximale Eigenversorgung und Netzverträglichkeit.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="service-card text-center">
|
||||
<img src="icons/headset.svg" alt="Persönliche Betreuung Icon" class="service-icon mb-3">
|
||||
<h2 class="service-card-title">Persönliche Betreuung</h2>
|
||||
<p class="service-card-description">
|
||||
<strong>Kurze Wege, schnelle Antworten –</strong> direkte Ansprechpartner, auch nach Projektabschluss.
|
||||
</p>
|
||||
</article>
|
||||
<article class="service-card text-center">
|
||||
<img src="icons/headset.svg" alt="Persönliche Betreuung Icon" class="service-icon mb-3">
|
||||
<h3 class="service-card-title">Persönliche Betreuung</h3>
|
||||
<p class="service-card-description">
|
||||
<strong>Kurze Wege, schnelle Antworten –</strong> direkte Ansprechpartner, auch nach Projektabschluss.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="service-card text-center">
|
||||
<img src="icons/hard-hat.svg" alt="Reibungslose Projektabwicklung Icon" class="service-icon mb-3">
|
||||
<h2 class="service-card-title">Reibungslose Projektabwicklung</h2>
|
||||
<p class="service-card-description">
|
||||
<strong>Wir übernehmen die technische Koordination –</strong> von Einreichung bis Ausschreibung.
|
||||
</p>
|
||||
</article>
|
||||
<article class="service-card text-center">
|
||||
<img src="icons/hard-hat.svg" alt="Reibungslose Projektabwicklung Icon" class="service-icon mb-3">
|
||||
<h3 class="service-card-title">Reibungslose Projektabwicklung</h3>
|
||||
<p class="service-card-description">
|
||||
<strong>Wir übernehmen die technische Koordination –</strong> von Einreichung bis Ausschreibung.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="service-card text-center">
|
||||
<img src="icons/network.svg" alt="Vernetzte Energiezukunft Icon" class="service-icon mb-3">
|
||||
<h2 class="service-card-title">Vernetzte Energiezukunft</h2>
|
||||
<p class="service-card-description">
|
||||
<strong>Wir denken Energie ganzheitlich –</strong> modular, digital und wachstumsfähig geplant.
|
||||
</p>
|
||||
</article>
|
||||
<article class="service-card text-center">
|
||||
<img src="icons/network.svg" alt="Vernetzte Energiezukunft Icon" class="service-icon mb-3">
|
||||
<h3 class="service-card-title">Vernetzte Energiezukunft</h3>
|
||||
<p class="service-card-description">
|
||||
<strong>Wir denken Energie ganzheitlich –</strong> modular, digital und wachstumsfähig geplant.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="service-card text-center">
|
||||
<img src="icons/circuit-board.svg" alt="Präzise Systemplanung Icon" class="service-icon mb-3">
|
||||
<h2 class="service-card-title">Präzise Systemplanung</h2>
|
||||
<p class="service-card-description">
|
||||
<strong>Alle Komponenten exakt abgestimmt –</strong> wirtschaftlich und regelkonform.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
<article class="service-card text-center">
|
||||
<img src="icons/circuit-board.svg" alt="Präzise Systemplanung Icon" class="service-icon mb-3">
|
||||
<h3 class="service-card-title">Präzise Systemplanung</h3>
|
||||
<p class="service-card-description">
|
||||
<strong>Alle Komponenten exakt abgestimmt –</strong> wirtschaftlich und regelkonform.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ABOUT (unverändert) -->
|
||||
<!-- ÜBER AMPERION -->
|
||||
{{ with .Params.about }}
|
||||
{{ if .enable }}
|
||||
<section id="about" class="about section">
|
||||
<section id="about" class="about section" style="margin-top: 5rem; padding: 3rem 0;">
|
||||
<div class="my-container">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<div class="services-title">
|
||||
{{ with .title }}<h1>{{ . | markdownify }}</h1>{{ end }}
|
||||
</div>
|
||||
<div class="services-description">
|
||||
{{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
|
||||
</div>
|
||||
<h1>Über AMPERION</h1>
|
||||
{{ with .description }}<h2><em>{{ . | markdownify }}</em></h2>{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-9 col-sm-12">
|
||||
<div class="text-left">
|
||||
{{ with .content }}{{ . | markdownify }}{{ end }}
|
||||
</div>
|
||||
<div class="hover-link">
|
||||
<div class="hover-link mt-3">
|
||||
{{ with .link_text }}<a href="{{ "/about/" | relURL }}">{{ . }}</a>{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-12">
|
||||
<div class="block">
|
||||
<img src="{{ .image | relURL }}" class="custom-image" alt="Img">
|
||||
<div class="block text-center">
|
||||
<img src="{{ .image | relURL }}" class="custom-image" alt="Über AMPERION Bild">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -262,6 +212,7 @@
|
|||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
<!-- CALL TO ACTION -->
|
||||
{{ if .Params.cta.enable }}
|
||||
{{ partial "cta.html" . }}
|
||||
|
|
@ -285,5 +236,4 @@
|
|||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue