forked from markus/AMPERION_Webpage
astosic
30fb9c0827
- Removed unused styles and nested selectors from _common.scss to streamline the code. - Cleaned up the .about section in _about.scss by eliminating redundant styles for headings and paragraphs. - Improved overall readability and maintainability of the SCSS files.
267 lines
9 KiB
HTML
267 lines
9 KiB
HTML
{{ define "main" }}
|
||
<header id="mainHeader">
|
||
|
||
{{ with .Params.banner }}
|
||
{{ if .enable }}
|
||
<!-- HERO / SLIDER -->
|
||
<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* -->
|
||
<div class="logo-container">
|
||
<div class="frame1">
|
||
<img src="{{ .logo_image1 | relURL }}" alt="Logo Frame 1" class="banner-logo">
|
||
</div>
|
||
<div class="frame2">
|
||
<img src="{{ .logo_image2 | relURL }}" alt="Logo Frame 2" class="banner-logo">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- *Haupttitel + Button* -->
|
||
<div class="hero-section" style="margin-top: 10rem;">
|
||
{{ with .title }}
|
||
<h1 class="hero-title fade-in-title">{{ . | markdownify }}</h1>
|
||
{{ end }}
|
||
{{ with .button }}
|
||
{{ if .enable }}
|
||
<div class="scrolldown" onclick="document.getElementById('service').scrollIntoView({ behavior: 'smooth' });"
|
||
style="--color: rgb(0, 0, 0); cursor: pointer;">
|
||
<div class="chevrons">
|
||
<div class='chevrondown'></div>
|
||
<div class='chevrondown'></div>
|
||
</div>
|
||
</div>
|
||
{{ end }}
|
||
{{ end }}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{{ end }}
|
||
{{ end }}
|
||
</header>
|
||
|
||
<!-- Scroll/Hide Header -->
|
||
<script>
|
||
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 autoScrollDone = false;
|
||
let isAutoScrolling = false;
|
||
const offset = 120;
|
||
|
||
function scrollToTarget() {
|
||
if (!targetSection || isAutoScrolling) return;
|
||
|
||
isAutoScrolling = true;
|
||
const y = targetSection.getBoundingClientRect().top + window.pageYOffset - offset;
|
||
|
||
window.scrollTo({ top: y, behavior: 'smooth' });
|
||
|
||
// Warte bis Scroll-Animation fertig ist
|
||
setTimeout(() => {
|
||
isAutoScrolling = false;
|
||
autoScrollDone = true;
|
||
}, 1000);
|
||
}
|
||
|
||
// Klick auf Chevron → scrollen
|
||
scrolldown?.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
scrollToTarget();
|
||
});
|
||
|
||
// Scrollrad nach unten → am Ende von Hero → scrollen
|
||
let wheelTimeout;
|
||
window.addEventListener('wheel', function (e) {
|
||
// Verhindere Auto-Scroll während manueller Scroll oder wenn bereits ausgeführt
|
||
if (autoScrollDone || isAutoScrolling || e.deltaY <= 0 || !hero || !targetSection) return;
|
||
|
||
// Debounce wheel events
|
||
clearTimeout(wheelTimeout);
|
||
wheelTimeout = setTimeout(() => {
|
||
const heroBottom = hero.getBoundingClientRect().bottom;
|
||
const threshold = 50;
|
||
|
||
// Nur wenn wir wirklich am Ende der Hero-Section sind
|
||
if (heroBottom <= window.innerHeight + threshold && heroBottom > 0) {
|
||
scrollToTarget();
|
||
}
|
||
}, 50);
|
||
}, { passive: true });
|
||
|
||
// Scroll-Verhalten (Chevron + Header + Reset)
|
||
let scrollTimeout;
|
||
window.addEventListener('scroll', function () {
|
||
clearTimeout(scrollTimeout);
|
||
scrollTimeout = setTimeout(() => {
|
||
// Chevron ausblenden
|
||
if (window.scrollY > 100) {
|
||
scrolldown?.classList.add('hide');
|
||
} else {
|
||
scrolldown?.classList.remove('hide');
|
||
}
|
||
|
||
// Header verstecken beim Runterscrollen
|
||
const currentScroll = window.scrollY;
|
||
if (!isAutoScrolling) {
|
||
header.style.top = (currentScroll > lastScroll && currentScroll > 100) ? '-100vh' : '0';
|
||
if (currentScroll === 0) header.style.top = '0';
|
||
lastScroll = currentScroll;
|
||
}
|
||
|
||
// Reset der Auto-Scroll-Sperre nur wenn wir wieder komplett im Hero sind
|
||
const heroTop = hero.getBoundingClientRect().top;
|
||
const heroBottom = hero.getBoundingClientRect().bottom;
|
||
|
||
// Nur resetten wenn Hero-Section vollständig sichtbar ist
|
||
if (heroTop >= -10 && heroBottom > window.innerHeight * 0.8) {
|
||
autoScrollDone = false;
|
||
}
|
||
}, 10);
|
||
});
|
||
|
||
// Reset beim Seitenwechsel oder Refresh
|
||
window.addEventListener('beforeunload', () => {
|
||
window.scrollTo(0, 0);
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<!-- Leistungen -->
|
||
<section id="leistungen" class="section">
|
||
{{ partial "section-grid.html" (dict "page" "/service" "type" "zoom") }}
|
||
</section>
|
||
|
||
<!-- Fokusthemen -->
|
||
<section id="fokusthemen" class="section">
|
||
{{ partial "section-grid.html" (dict "page" "/focustopic" "type" "zoom") }}
|
||
</section>
|
||
|
||
|
||
<!-- DARUM AMPERION – kompakt & detailliert -->
|
||
<section class="whyamperion section" style="background-color:#f3f3f3; margin-top: 28rem; padding: 3rem 0;">
|
||
<div class="container my-container">
|
||
|
||
<!-- Titelblock -->
|
||
<div class="row">
|
||
<div class="text-center">
|
||
<h1>Darum AMPERION</h1>
|
||
<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">
|
||
<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">
|
||
<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">
|
||
<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">
|
||
<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">
|
||
<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">
|
||
<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>
|
||
|
||
<!-- ÜBER AMPERION -->
|
||
{{ with .Params.about }}
|
||
{{ if .enable }}
|
||
<section id="about" class="about section" style="margin-top: 20rem; margin-bottom: 20rem; padding: 3rem 0;">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-12 text-center">
|
||
<h1>Über AMPERION</h1>
|
||
{{ with .description }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
||
</div>
|
||
</div>
|
||
<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 mt-3">
|
||
{{ with .link_text }}<a href="{{ "/about/" | relURL }}">{{ . }}</a>{{ end }}
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 col-sm-12">
|
||
<div class="block text-center">
|
||
<img src="{{ .image | relURL }}" class="custom-image" alt="Über AMPERION Bild">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{{ end }}
|
||
{{ end }}
|
||
|
||
|
||
<!-- CALL TO ACTION -->
|
||
{{ if .Params.cta.enable }}
|
||
{{ partial "cta.html" . }}
|
||
{{ end }}
|
||
|
||
<!-- FACTS -->
|
||
{{ with .Params.facts }}
|
||
{{ if .enable }}
|
||
<section class="facts">
|
||
<div class="container">
|
||
<div class="row">
|
||
{{ range .fact_item }}
|
||
<div class="col-md-6">
|
||
<div class="fact-item text-center">
|
||
<img src="{{ .image | relURL }}" alt="{{ .name }}" class="fact-image">
|
||
</div>
|
||
</div>
|
||
{{ end }}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{{ end }}
|
||
{{ end }}
|
||
{{ end }}
|