forked from markus/AMPERION_Webpage
259 lines
No EOL
9.5 KiB
HTML
259 lines
No EOL
9.5 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;">
|
||
<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">
|
||
<h2>Ihr Partner für nachhaltige Energielösungen</h2>
|
||
<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="600">
|
||
<div class="intro-media ratio ratio-16x9 shadow-sm overflow-hidden">
|
||
<video class="intro-video"
|
||
autoplay
|
||
muted
|
||
loop
|
||
playsinline
|
||
preload="metadata"
|
||
poster='{{ "images/brand_poster.jpg" | relURL }}'>
|
||
<source src='{{ "images/Imagevideo_Short.mp4" | relURL }}' type="video/mp4">
|
||
Ihr Browser unterstützt eingebettete Videos nicht.
|
||
</video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{{ end }}
|
||
{{ end }}
|
||
|
||
|
||
|
||
<!-- Mission/Vision/Ziel (grau, Heading + Tabs) -->
|
||
{{ with .Params.mission_vision }}
|
||
{{ if .enable }}
|
||
<section class="mission-section section pt-0" style="background-color:#f3f3f3;">
|
||
<div class="my-container">
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-10">
|
||
<!-- Titelblock abgestimmt auf Index -->
|
||
<div class="text-center mb-4" data-aos="fade-up">
|
||
<h1>Mission · Vision · Ziel</h1>
|
||
<h2><em>Wofür wir stehen und wo wir hinwollen.</em></h2>
|
||
</div>
|
||
|
||
<div class="mission-tabs-wrapper">
|
||
<!-- Tabs -->
|
||
<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>
|
||
|
||
<!-- Tab Content -->
|
||
<div class="tab-content mission-tab-content">
|
||
{{ range $index, $elements := .tabs }}
|
||
<div class="tab-pane fade {{ if eq $index 0 }}show active{{ end }}"
|
||
id="content-{{ .name | urlize }}"
|
||
role="tabpanel"
|
||
data-aos="fade-up"
|
||
data-aos-delay="100">
|
||
<div class="tab-inner">
|
||
{{ .content | $.Page.RenderString (dict "display" "block") }}
|
||
</div>
|
||
</div>
|
||
{{ end }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{{ end }}
|
||
{{ end }}
|
||
|
||
|
||
<!-- Kompetenzen: Layout & Karten wie "Darum AMPERION" auf der Startseite -->
|
||
<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">
|
||
<h1>Was uns auszeichnet</h1>
|
||
<h2><em>AMPERION liefert echte Mehrwerte für Ihr Projekt.</em></h2>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Karten (Re-Use der Service-Card Struktur von der Startseite) -->
|
||
<div class="why-grid mt-5">
|
||
{{ $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">
|
||
<h3 class="service-card-title">Staatlich geprüftes Ingenieurbüro</h3>
|
||
<p class="service-card-description">
|
||
<strong>Konzessionierter 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">
|
||
<h3 class="service-card-title">Erfahrung & Innovation</h3>
|
||
<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">
|
||
<h3 class="service-card-title">Ganzheitlicher Ansatz</h3>
|
||
<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">
|
||
<h3 class="service-card-title">Unabhängige Beratung</h3>
|
||
<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">
|
||
<h1>Das AMPERION Gründerteam</h1>
|
||
|
||
<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 }}
|
||
<h3 class="founder-name">{{ .name | markdownify }}</h3>
|
||
<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 }}
|
||
<h3 class="founder-name">{{ .name | markdownify }}</h3>
|
||
<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-h1"></div>
|
||
<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-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">
|
||
<h2 class="cta__title">
|
||
Lassen Sie uns Ihre Vision mit unserer Expertise zur Realität machen.
|
||
</h2>
|
||
<p class="cta__lead">
|
||
Bereit für Ihr Energieprojekt?
|
||
<span class="cta__accent">Kostenfreie Erstberatung sichern!</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 }} |