AMPERION_Webpage/layouts/_default/about.html

{{ define "main" }}

{{ partial "page-title.html" . }}

<!-- Intro + Mission/Vision Section -->
{{ with .Params.intro_section }}
{{ if .enable }}
<section id="about-intro" class="section py-5">

  <div class="my-container" style="max-width:1280px; margin:0 auto; background:white; padding:2rem; border-radius:16px; box-shadow:0 6px 30px rgba(0,0,0,.05);">
    
    <!-- ROW 1: TEXT + BILD -->
    <div class="row align-items-center gx-5 gy-4 mb-5">
      
      <!-- TEXT -->
      <div class="col-lg-6 order-2 order-lg-1 text-left">
        <div class="intro-text px-2 px-md-4" data-aos="fade-up" data-aos-delay="100">
          {{ .text | markdownify }}
        </div>

        <!-- Visual Tags -->
        <div class="mb-4 mt-3" data-aos="fade-up" data-aos-delay="200">
          {{ $icons := dict "Unabhängig" "✅" "Technisch fundiert" "⚡" "Zukunftsorientiert" "🌍" }}
          {{ range .tags }}
            <span class="badge rounded-pill me-2" style="font-size:1.5rem; padding:0.45em 0.9em; background:#006464; border-radius:999px;">
              {{ index $icons . }} {{ . }}
            </span>
          {{ end }}
        </div>
      </div>

      <!-- BILD -->
      <div class="col-lg-6 order-1 order-lg-2 d-flex justify-content-center" data-aos="zoom-out" data-aos-delay="200">
        <img
          src="{{ .image | relURL }}"
          alt="AMPERION – Erneuerbare Energie"
          loading="lazy"
          decoding="async"
          class="img-fluid"
          style="width:100%; max-width:600px; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.08);">
      </div>
    </div>

    <!-- ROW 2: MISSION / VISION / ZIEL -->
    {{ with $.Params.mission_vision }}
    {{ if .enable }}
    <div class="row mt-4">
      <div class="col-md-12">
        <div class="tabCommon">
          <ul class="nav nav-tabs">
            {{ range $index, $elements := .tabs }}
            <li {{ if eq $index 0 }} class="active" {{ end }}>
              <a href="#{{ .name | urlize }}" data-toggle="tab">{{ .name }}</a>
            </li>
            {{ end }}
          </ul>
          <div class="tab-content pt-3">
            {{ range $index, $elements := .tabs }}
            <div id="{{ .name | urlize }}" class="tab-pane fade {{ if eq $index 0 }} active in {{ end }}">
              {{ .content | $.Page.RenderString (dict "display" "block") }}
            </div>
            {{ end }}
          </div>
        </div>
      </div>
    </div>
    {{ end }}
    {{ end }}

  </div>
</section>
{{ end }}
{{ end }}

<!-- AMPERION Mehrwerte – mit SVG-Icons, gleich hohe Kacheln -->
<section class="section p-0 m-0" style="background-color: #f7f7f7;">
  <div class="container text-center mb-5">
    <h3 class="mb-4">
      Was uns auszeichnet: <strong>AMPERION</strong> bietet <em>echte Mehrwerte</em> für Ihr Projekt
    </h3>
  </div>

  <div class="container-fluid px-0;">
    <div class="mehrwerte-grid">
      
      <!-- Kachel 1 -->
      <div class="mehrwerte-box" style="background-color: #006464;">
        <div class="p-4 d-flex flex-column justify-content-center align-items-center text-center text-black h-100">
          <img src="/icons/stamp.svg" alt="Staatlich geprüft Icon" class="mehrwert-icon mb-3" width="50" height="50">
          <h4 class="fw-bold text-black">Staatlich geprüftes Ingenieurbüro</h4>
          <p class="mb-0">Als konzessionierter Fachbetrieb für Elektrotechnik garantieren wir Fachkompetenz, Qualität und Sicherheit.</p>
        </div>
      </div>

      <!-- Kachel 2 -->
      <div class="mehrwerte-box" style="background-color: #007979;">
        <div class="p-4 d-flex flex-column justify-content-center align-items-center text-center text-black h-100">
          <img src="/icons/brain.svg" alt="Innovation Icon" class="mehrwert-icon mb-3" width="50" height="50">
          <h4 class="fw-bold text-black">Erfahrung &amp; Innovation</h4>
          <p class="mb-0">Über 10 Jahre Branchenerfahrung vereinen sich bei AMPERION mit frischen Ideen, neuesten Technologien und aktuellen Förderstandards.</p>
        </div>
      </div>

      <!-- Kachel 3 -->
      <div class="mehrwerte-box" style="background-color: #008c8c;">
        <div class="p-4 d-flex flex-column justify-content-center align-items-center text-center text-black h-100">
          <img src="/icons/earth.svg" alt="Ganzheitlicher Ansatz Icon" class="mehrwert-icon mb-3" width="50" height="50">
          <h4 class="fw-bold text-black">Ganzheitlicher Ansatz</h4>
          <p class="mb-0">Wir betrachten jedes Projekt technisch, wirtschaftlich und ökologisch – von Beginn an zukunftssicher gedacht.</p>
        </div>
      </div>

      <!-- Kachel 4 -->
      <div class="mehrwerte-box" style="background-color: #009292;">
        <div class="p-4 d-flex flex-column justify-content-center align-items-center text-center text-black h-100">
          <img src="/icons/briefcase-business.svg" alt="Unabhängige Beratung Icon" class="mehrwert-icon mb-3" width="50" height="50">
          <h4 class="fw-bold text-black">Unabhängige Beratung</h4>
          <p class="mb-0">Wir schlagen nur Lösungen vor, die zu Ihrem Projekt passen – herstellerneutral und objektiv.</p>
        </div>
      </div>
    </div>
  </div>


<!-- About Section (Gründerteam) -->
{{ with .Params.about }}
{{ if .enable }}
<section class="about section pt-0">
  <div class="container-fluid">
    
    <!-- Überschrift -->
    <p class="lead text-center mb-3" style="margin-top: 40px;">Das AMPERION Gründerteam</p>

    <!-- Zentraler Einleitungstext -->
    <p class="text-center px-3" style="margin-bottom: 40px;">
  Gegründet wurde AMPERION im Jahr 2024 von Markus Wimmer, BSc und Ing. Alexander Stosic, MSc, die als Geschäftsführer das Unternehmen leiten. Gemeinsam verfügen unsere Gründer über mehr als ein Jahrzehnt Erfahrung in der Planung und Umsetzung nachhaltiger Energieprojekte.
</p>


    <div class="row gx-5 gy-5 align-items-center">
      
      <!-- Markus Wimmer (LINKS) -->
      <div class="col-lg-4 col-md-12 order-lg-1 order-2 d-flex justify-content-center">
        <div class="w-100">
          {{ with .left_person }}
            {{ with .name }}<h3 class="text-center">{{ . | markdownify }}</h3>{{ end }}
            {{ with .description }}
              <p class="text-justify px-3">{{ . | $.Page.RenderString (dict "display" "block") }}</p>
            {{ end }}
          {{ end }}
        </div>
      </div>

      <!-- Bild (MITTE) -->
      <div class="col-lg-4 col-md-12 order-lg-2 order-1 d-flex justify-content-center">
        <img src="{{ .image | relURL }}"
             alt="AMPERION Gründerteam"
             class="img-fluid founder-img rounded shadow"
             style="max-width: 100%; height: auto;">
      </div>

      <!-- Alexander Stosic (RECHTS) -->
      <div class="col-lg-4 col-md-12 order-lg-3 order-3 d-flex justify-content-center">
        <div class="w-100">
          {{ with .right_person }}
            {{ with .name }}<h3 class="text-center">{{ . | markdownify }}</h3>{{ end }}
            {{ with .description }}
              <p class="text-justify px-3">{{ . | $.Page.RenderString (dict "display" "block") }}</p>
            {{ end }}
          {{ end }}
        </div>
      </div>

    </div>
  </div>
</section>
{{ end }}
{{ end }}


<!-- Call to Action -->
{{ if .Params.cta.enable }}
{{ partial "cta.html" . }}
{{ end }}

{{ end }}