AMPERION_Webpage/layouts/_default/about.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 &amp; 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 &amp; 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 }}