forked from markus/AMPERION_Webpage
292 lines
No EOL
10 KiB
HTML
292 lines
No EOL
10 KiB
HTML
{{ define "main" }}
|
||
{{ partial "page-title.html" . }}
|
||
|
||
<!-- Intro Section -->
|
||
{{ with .Params.intro_section }}
|
||
{{ if .enable }}
|
||
<section id="about-intro" class="section" style="background-color:#ffffff; margin-top:-24px; padding-top:16px;">
|
||
<h3>Ihr Partner für nachhaltige Energielösungen</h3>
|
||
<div class="my-container">
|
||
<div class="row align-items-center gx-5 gy-4">
|
||
|
||
<!-- TEXT -->
|
||
<div class="col-lg-7 order-2 order-lg-1" data-aos="fade-up" data-aos-delay="100">
|
||
<div class="intro-content">
|
||
|
||
<div class="intro-text article-copy">
|
||
{{ .text | markdownify }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- VIDEO (rechts, ohne abgerundete Ecken) -->
|
||
<div class="col-lg-5 order-1 order-lg-2" data-aos="fade-in" data-aos-delay="200">
|
||
<div class="intro-media ratio ratio-16x9 shadow-sm overflow-hidden">
|
||
<video id="aboutVideo"
|
||
class="intro-video"
|
||
muted
|
||
loop
|
||
playsinline
|
||
preload="none"
|
||
poster='{{ "images/brand_poster.jpg" | relURL }}'>
|
||
<!-- Quellen werden per JS gesetzt -->
|
||
</video>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
const vid = document.getElementById("aboutVideo");
|
||
if (!vid) return;
|
||
|
||
const srcWebm = '{{ "images/Imagevideo_Short.webm" | relURL }}';
|
||
const srcMp4 = '{{ "images/Imagevideo_Short.mp4" | relURL }}';
|
||
|
||
const observer = new IntersectionObserver(entries => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
vid.innerHTML = `
|
||
<source src="${srcWebm}" type="video/webm">
|
||
<source src="${srcMp4}" type="video/mp4">
|
||
`;
|
||
vid.play().catch(() => {});
|
||
observer.disconnect();
|
||
}
|
||
});
|
||
}, { rootMargin: "200px" });
|
||
|
||
observer.observe(vid);
|
||
});
|
||
</script>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{{ end }}
|
||
{{ end }}
|
||
|
||
|
||
|
||
<!-- Mission/Vision/Ziel Section -->
|
||
{{ with .Params.mission_vision }}
|
||
{{ if .enable }}
|
||
<section class="mission-section section pt-0" style="background-color: #f8f9fa;">
|
||
<div class="container">
|
||
<div class="row justify-content-center">
|
||
<!-- Schlanker, mittiger Content-Bereich -->
|
||
<div>
|
||
<!-- Headings -->
|
||
<div class="text-center mb-3">
|
||
<h2>Mission · Vision · Ziel</h2>
|
||
<h3>Die Grundpfeiler unserer Arbeit.</h3>
|
||
</div>
|
||
|
||
<div class="mission-tabs-wrapper">
|
||
<!-- Tabs (zentriert) -->
|
||
<ul class="nav nav-tabs mission-tabs justify-content-center" role="tablist">
|
||
{{ range $index, $elements := .tabs }}
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link {{ if eq $index 0 }}active{{ end }}"
|
||
id="tab-{{ .name | urlize }}"
|
||
data-bs-toggle="tab"
|
||
data-bs-target="#content-{{ .name | urlize }}"
|
||
type="button"
|
||
role="tab">
|
||
{{ .name }}
|
||
</button>
|
||
</li>
|
||
{{ end }}
|
||
</ul>
|
||
|
||
<!-- Inhalte (ohne fade, damit kein Flackern) -->
|
||
<div class="tab-content mission-tab-content">
|
||
{{ range $index, $elements := .tabs }}
|
||
<div class="tab-pane {{ if eq $index 0 }}active{{ end }}"
|
||
id="content-{{ .name | urlize }}"
|
||
role="tabpanel">
|
||
<div class="tab-inner">
|
||
{{ .content | $.Page.RenderString (dict "display" "block") }}
|
||
</div>
|
||
</div>
|
||
{{ end }}
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{{ end }}
|
||
{{ end }}
|
||
|
||
|
||
|
||
|
||
<!-- Was uns auszeichnet -->
|
||
<section class="section" style="background-color:#ffffff;">
|
||
<div class="my-container">
|
||
<div class="row">
|
||
<div class="text-center" data-aos="fade-up" data-aos-delay="50">
|
||
<h2>Was uns auszeichnet</h2>
|
||
<h3><em>AMPERION liefert echte Mehrwerte für Ihr Projekt.</em></h3>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="why-grid mt-5" style="
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 2rem;
|
||
justify-items: center;
|
||
">
|
||
{{ $delay := 0 }}
|
||
{{ $step := 100 }}
|
||
|
||
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
|
||
<img src="/icons/stamp.svg" alt="Staatlich geprüft" class="service-icon mb-3" style="filter: invert(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%);">
|
||
<h4 class="service-card-title">Staatlich geprüft & konessioniert</h4>
|
||
<p class="service-card-description">
|
||
<strong>Ingenieurbüro und Elektrotechnikbetrieb –</strong> Planung und Prüfung mit Qualität & Sicherheit.
|
||
</p>
|
||
</article>
|
||
|
||
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
|
||
<img src="/icons/brain.svg" alt="Erfahrung & Innovation" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);">
|
||
<h4 class="service-card-title">Erfahrung & Innovation</h4>
|
||
<p class="service-card-description">
|
||
<strong>Über 10 Jahre Praxis –</strong> kombiniert mit modernen Methoden und Tools.
|
||
</p>
|
||
</article>
|
||
|
||
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
|
||
<img src="/icons/earth.svg" alt="Ganzheitlicher Ansatz" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);">
|
||
<h4 class="service-card-title">Ganzheitlicher Ansatz</h4>
|
||
<p class="service-card-description">
|
||
<strong>Technik, Wirtschaft & Umwelt –</strong> von Beginn an zukunftssicher gedacht.
|
||
</p>
|
||
</article>
|
||
|
||
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
|
||
<img src="/icons/briefcase-business.svg" alt="Unabhängige Beratung" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);">
|
||
<h4 class="service-card-title">Unabhängige Beratung</h4>
|
||
<p class="service-card-description">
|
||
<strong>Herstellerneutral –</strong> wir empfehlen, was zu Ihrem Projekt wirklich passt.
|
||
</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
<!-- Team Section (grau, konsistent) -->
|
||
{{ with .Params.about }}
|
||
{{ if .enable }}
|
||
<section class="section" style="background-color:#f3f3f3;">
|
||
<div class="my-container">
|
||
|
||
<!-- Header -->
|
||
<div class="text-center mb-5" data-aos="fade-up">
|
||
<h2>Das AMPERION Gründerteam</h2>
|
||
|
||
<div class="row gx-5 gy-5 align-items-center">
|
||
|
||
<!-- Markus Wimmer -->
|
||
<div class="col-lg-4 col-md-12 order-lg-1 order-2" data-aos="fade-right" data-aos-delay="100">
|
||
<div class="founder-card">
|
||
{{ with .left_person }}
|
||
<h5 class="founder-name">{{ .name | markdownify }}</h5>
|
||
<div class="founder-description">
|
||
{{ .description | $.Page.RenderString (dict "display" "block") }}
|
||
</div>
|
||
{{ end }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Team Bild -->
|
||
<div class="col-lg-4 col-md-12 order-lg-2 order-1" data-aos="zoom-in" data-aos-delay="200">
|
||
<div class="team-image-wrapper">
|
||
<img src="{{ .image | relURL }}"
|
||
alt="AMPERION Gründerteam"
|
||
class="team-image w-100 rounded-3 shadow-sm">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Alexander Stosic -->
|
||
<div class="col-lg-4 col-md-12 order-lg-3 order-3" data-aos="fade-left" data-aos-delay="300">
|
||
<div class="founder-card">
|
||
{{ with .right_person }}
|
||
<h5 class="founder-name">{{ .name | markdownify }}</h5>
|
||
<div class="founder-description">
|
||
{{ .description | $.Page.RenderString (dict "display" "block") }}
|
||
</div>
|
||
{{ end }}
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{{ end }}
|
||
{{ end }}
|
||
|
||
|
||
<!-- CTA unverändert lassen (wie auf Startseite) -->
|
||
{{ $impressum := site.GetPage "page" "impressum" }}
|
||
{{ if .Params.cta.enable }}
|
||
<section id="cta" class="cta">
|
||
<div class="cta__bg" aria-hidden="true">
|
||
<div class="cta__grid"></div>
|
||
<div class="cta__energy-lines">
|
||
<div class="energy-line-h energy-line-h2"></div>
|
||
<div class="energy-line-h energy-line-h3"></div>
|
||
<div class="energy-line-h energy-line-h4"></div>
|
||
<div class="energy-line-h energy-line-h5"></div>
|
||
<div class="energy-line-v energy-line-v1"></div>
|
||
<div class="energy-line-v energy-line-v2"></div>
|
||
<div class="energy-line-v energy-line-v3"></div>
|
||
<div class="energy-line-v energy-line-v4"></div>
|
||
<div class="energy-node energy-node1"></div>
|
||
<div class="energy-node energy-node2"></div>
|
||
<div class="energy-node energy-node3"></div>
|
||
<div class="energy-node energy-node4"></div>
|
||
<div class="energy-node energy-node5"></div>
|
||
<div class="energy-node energy-node6"></div>
|
||
</div>
|
||
<div class="cta__gradient-top"></div>
|
||
<div class="cta__gradient-bottom"></div>
|
||
</div>
|
||
|
||
<div class="my-container">
|
||
<div class="cta__wrap">
|
||
<h3 class="cta__title">
|
||
Mehr Energie - Mit UNS!
|
||
</h3>
|
||
<p class="cta__lead">
|
||
Ihr Weg zu nachhaltiger Energie beginnt hier.
|
||
<span class="cta__accent">Lassen Sie uns starten!</span>
|
||
</p>
|
||
<div class="cta__actions">
|
||
<a class="cta__btn" href="mailto:{{ $impressum.Params.email }}">
|
||
<span aria-hidden="true">✉️</span><span>E-Mail senden</span>
|
||
</a>
|
||
<a class="cta__btn" href="tel:{{ $impressum.Params.telefon }}">
|
||
<span aria-hidden="true">📞</span><span>Anrufen</span>
|
||
</a>
|
||
</div>
|
||
<div class="cta__social">
|
||
<a class="cta__social-link" href="https://www.instagram.com/amperion.at/" target="_blank" rel="noopener" aria-label="Instagram">
|
||
<img src="/images/social/instagram.svg" alt="">
|
||
</a>
|
||
<a class="cta__social-link" href="https://www.linkedin.com/company/amperion-gmbh/" target="_blank" rel="noopener" aria-label="LinkedIn">
|
||
<img src="/images/social/linkedin.svg" alt="">
|
||
</a>
|
||
<a class="cta__social-link" href="https://www.facebook.com/share/1CZ7xm6cdw/?mibextid=wwXIfr" target="_blank" rel="noopener" aria-label="Facebook">
|
||
<img src="/images/social/facebook.svg" alt="">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{{ end }}
|
||
|
||
{{ end }} |