{{ define "main" }}
<header>
<!-- banner -->
{{ with .Params.banner }}
{{ if .enable }}
<section class="slider {{ if .bg_overlay }}overly{{ end }}" style="height: 100vh; display: flex; align-items: center; justify-content: center; position: relative;">
  




           <!-- Scroll-Button unten -->
           <div class="scrolldown" style="position: absolute; bottom: -120px; left: 50%; transform: translateX(-50%);">
               <a href="#about" class="btn btn-secondary" style="cursor: pointer;">
                <div class="chevrons">
                <div class='chevrondown'></div>
                <div class='chevrondown'></div>


        </div>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- /banner -->
</header>

<!-- about -->
{{ with .Params.about }}
{{ if .enable }}
<section id="about" class="about section"> <!-- Add id="about" here -->
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-12">
        <div class="block">
          <div class="section-title">
            {{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
            {{ with .description }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
          </div>
          {{ with .content }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
        </div>
      </div>
      <div class="col-md-5 col-sm-12">
        <div class="block">
          <img src="{{ .image | relURL }}" class="img-responsive" alt="Img">
        </div>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- /about -->

{{ with .Params.about }}
{{ if .enable }}
<section class="about section">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="about-img">
          <img class="img-responsive" src="{{ .image | relURL }}">
        </div>
      </div>
      <div class="col-md-6">
        {{ with .title }}<h2 class="mt-40">{{ . | markdownify }}</h2>{{ end }}
        {{ with .content }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
        {{ with .button }}
        {{ if .enable }}
        <a href="{{ .link | relURL }}" class="btn btn-small mt-20">{{ .label }}</a>
        {{ end }}
        {{ end }}
      </div>
    </div>
    <div class="row counter-box text-center mt-50">
      {{ range .funfacts }}
      <div class="col-md-2">
        <div class="counter-item">
          {{ with .icon }}<i class="{{ . }}"></i>{{ end }}
          {{ with .count }}<h4 class="count" data-count="{{ . }}">0</h4>{{ end }}
          {{ with .name }}<span>{{ . }}</span>{{ end }}
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>
{{ end }}
{{ end }}




<section class="text-and-image-section">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <!-- Bild auf der linken Seite -->
        <div class="image-section">
          <img src="images/module_reflection_2.webp" alt="Bildbeschreibung" class="img-fluid">
        </div>
      </div>
      <div class="col-md-6">
        <!-- Text auf der rechten Seite -->
        <div class="text-section" style="max-width: 100%;">
          <h2>Unser Angebot</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit... Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
        </div>
        <!-- Bild auf der linken Seite -->
        <div class="image-section">
          <img src="images/module_reflection_2.webp" alt="Bildbeschreibung" class="img-fluid">
        </div>
      </div>
      <div class="col-md-6">
        <!-- Text auf der rechten Seite -->
        <div class="text-section" style="max-width: 100%;">
          <h2>Unser Angebot</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit... Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
        </div>
      </div>
    </div>
  </div>
</section>




<!-- portfolio -->
{{ with .Params.portfolio }}
{{ if .enable }}
<section class="feature bg-2" style="background-image: url('{{ .bg_image | relURL }}')">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-6">
        {{ with .title }}<h2 class="section-subtitle">{{ . | markdownify }}</h2>{{ end }}
        {{ with .content }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
        {{ with .button }}
        {{ if .enable }}
        <a href="{{ .link | relLangURL }}" class="btn btn-view-works">{{ .label }}</a>
        {{ end }}
        {{ end }}
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- /portfolio -->

<!-- service -->
{{ if .Params.service.enable }}
{{ partial "service.html" . }}
{{ end }}
<!-- /service -->

<!-- call to action -->
{{ if .Params.cta.enable }}
{{ partial "cta.html" . }}
{{ end }}
<!-- /call to action -->

<!-- funfacts -->
{{ with .Params.funfacts }}
{{ if .enable }}
<section class="testimonial">
  <div class="container">
    <div class="row">
      <div class="section-title text-center">
        {{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
        {{ with .description }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="block">
          <ul class="counter-box clearfix">
            {{ range .funfact_item }}
            <li class="counter-item">
              <!-- Anstelle eines Icons, das Bild einbinden -->
              <img src="{{ .image | relURL }}" alt="{{ .name }}" style="width: 50px; height: auto;"> <!-- Stil nach Bedarf anpassen -->
              <h4 class="count" data-count="{{ .count }}">0</h4>
              <span>{{ .name | markdownify }}</span>
            </li>
            {{ end }}
          </ul>
        </div>
      </div>
      <div class="col-md-5 col-md-offset-1">
        <div class="testimonial-carousel text-center">
          <div class="testimonial-slider owl-carousel">
            {{ range .testimonial_slider }}
            <div>
            
              {{ with .content }}{{ . | $.Page.RenderString (dict "display" "block") }}{{ end }}
              <div class="user">
                <img src="{{ .image | relURL }}" alt="client">
                <p><span>{{ .name | markdownify }}</span> {{ .designation | markdownify }}</p>
              </div>
            </div>
            {{ end }}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<script>
  const canvas = document.getElementById('sinusCanvas');
  const ctx = canvas.getContext('2d');
  
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  
  const wave = {
    y: canvas.height / 2,
    length: 0.004,
    amplitude: 160,
    amplitudeVariation: 60,
    frequency: 0.007
  };
  
  let increment = wave.frequency;
  
  function animate() {
    requestAnimationFrame(animate);
  
    // Setzt den Hintergrundfarbe, um den Kontrast zu erhöhen und die weiße Welle sichtbar zu machen
    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; // Leichter Trail-Effekt mit dunklem Hintergrund
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  
    ctx.beginPath();
    ctx.moveTo(-330, wave.y);
    
    ctx.lineWidth = 1 + Math.abs(Math.sin(increment) * 10); // Dynamische Anpassung der Linienstärke
  
    for (let i = 0; i < canvas.width; i++) {
      ctx.lineTo(
        i,
        wave.y +
          Math.sin(i * wave.length + increment) *
            wave.amplitude *
            Math.sin(increment)
      );
    }

    ctx.strokeStyle = 'white'; // Stellt die Linienfarbe auf Weiß ein

    ctx.stroke();
    increment += wave.frequency;
  }
  
  animate();
</script>


<script>
  document.addEventListener('DOMContentLoaded', function() {
    var scrollDownButton = document.querySelector('.scroll-down-button');
    scrollDownButton.addEventListener('click', function() {
      document.querySelector('#about').scrollIntoView({
        behavior: 'smooth'
      });
    });
  });
</script>
  









{{ end }}