{#
 # Article Body include template
 # -----------------------------
 #
 # This template is used to output HTML for an "Project Body" Matrix field.
 #
 # An `entry` variable is expected to be defined.
-#}


{% extends "_layout/main" %}
 
{% block main %}



        <!-- section start -->
        <section class="layout-pt-pageHeader layout-pb-sm">
          <!-- container start -->
          <div class="container">
            <!-- row start -->
            <div class="row d-flex justify-content-center">
              <div class="col-xl-8 col-lg-8">
                <ul class="breadcrumbs text-black mb-40">
                  <li class="breadcrumbs-item">
                    <a data-barba href="home-1.html">
                      DIRK WETZEL
                    </a>
                  </li>
                  <li class="breadcrumbs-item active" aria-current="page">
                    {{ entry.title }}
                  </li>
                </ul>
        
                <div class="sectionHeading">
                  <h2 class="–sectionHeading__title">
                    {{ entry.headline }}
                  </h2>
                </div>
              </div>      
            </div>
            <!-- row end -->  
          </div>
          <!-- container end -->  
        </section>
        <!-- section end -->

 

{% set prevType = null %}
{% set prevPosition = null %}
{% set nextType = null %}
{% set nextPosition = null %}
{% set blocks = entry.postPage %}

{% for i, block in blocks.all() %}

{% set type = (nextType ?: block.type.handle) %}

{% set nextType = (not loop.last ? blocks[i+1].type.handle) %}


{% switch type %}		

            {% case 'twoImages' %}	
            <!-- section start -->
            <div class="layout-pb-lg">
              <!-- container start -->
              <div class="container">
                <div class="fancy-grid -col-2">
                  {% for image in block.leftImage.all() %}	      
                        <div class="fancy-grid__item">
                          <a data-gallery="gallery1" class="glightbox" href="{{ image.getUrl('twoColumnImages') }}">
                            <div data-parallax="0.8" class="ratio ratio-3:4">
                              <div data-parallax-target class="bg-image js-lazy" data-bg="{{ image.getUrl('twoColumnImages') }}"></div>
                            </div>
                          </a>
                        </div>
                  {% endfor %}  
                  
                  {% for image in block.rightImage.all() %}	
                  <div class="fancy-grid__item">
                    <a data-gallery="gallery1" class="glightbox" href="{{ image.getUrl('twoColumnImages') }}">
                      <div data-parallax="0.8" class="ratio ratio-3:4">
                        <div data-parallax-target class="bg-image js-lazy" data-bg="{{ image.getUrl('twoColumnImages') }}"></div>
                      </div>
                    </a>
                  </div>
                  {% endfor %}
                </div>
              </div>
              <!-- container end -->
            </div>
            <!-- section end -->
            
            
            {% case 'textContent' %}	
            
            <!-- section start -->
              <section class="layout-pb-lg">
                  <!-- container start -->
                  <div class="container">                    
                    <!-- row start -->
                    <div class="row d-flex justify-content-center">
                      <div class="col-xl-8 col-lg-8">                        
                            {{ block.textContent }}
                      </div>      
                    </div>
                    <!-- row end -->  
                  </div>
                  <!-- container end --> 
              </section>
              <!-- section end -->

                  
            <!-- section start -->
            {% case 'volleBreiteBild' %}		
            <section class="layout-pb-lg">
              <div class="container-wide z-5 relative">
                {% for image in block.volleBreiteBild.all() %}
                
                <a data-gallery="gallery1" class="glightbox" href="{{ image.getUrl('fullWidthImage') }}">
                <div data-parallax="0.7" class="h-lg hz-5 js-image">
                        <div data-parallax-target class="bg-image js-lazy" data-bg="{{ image.getUrl('fullWidthImage') }}"></div>
                </div>
                </a>
                
                {% endfor %}  
                
              </div>
            </section>
            
            <!-- section start -->
{#             <div class="layout-pb-lg">
              <div data-parallax="0.7" class="h-100vh">
                {% for image in block.volleBreiteBild.all() %}
                  <div data-parallax-target class="bg-image js-lazy" data-bg="{{ image.getUrl('fullWidthImage') }}"></div>
                {% endfor %}  
                
              </div>
            </div> #}
            <!-- section end -->
                  
                  
            <!-- section start -->
            {% case 'introduction' %}	
            <section class="layout-pb-lg">
              <!-- container start -->
              <div class="container">
                <!-- row start -->
                <div class="row justify-content-center text-center">
                  <div class="col-xl-8 col-lg-10">
                    <div class="d-flex justify-content-center text-xs tracking-md">
                      <p class="uppercase fw-500">Projekt – {{ entry.title }}</p>
                    </div>
                    <p class="text-2xl md:text-1xl leading-lg text-black mt-24">
                      {{ block.introduction }}
                    </p>
                  </div>
                </div>
                <!-- row end -->
              </div>
              <!-- container end -->
            </section>
            <!-- section end -->
       

{% endswitch %}
{% endfor %}



<!-- section start -->
      <section class="layout-pt-lg layout-pb-lg bg-light-1">
        <!-- container start -->
        <div class="container">

          <!-- row start -->
          <div class="row">
            <div class="col-xl-10 col-lg-8 col-md-10">
              <div class="sectionHeading -lg">
                <p class="sectionHeading__subtitle">
                  Kann es schon losgehen?
                </p>
                <h2 class="sectionHeading__title">
                  Schritte unserer Zusammenarbeit
                </h2>
              </div>
            </div>
          </div>
          <!-- row end -->
      
      <!-- row start -->
       <div class="row x-gap-60 y-gap-60 layout-pt-md">
         
      
        <div class="col-lg-4 col-md-6">
             <div data-anim="slide-up delay-1">
               <div class="d-flex ml-minus-4">
                 <div class="px-20 py-20 bg-white shadow-light rounded-full">
                   <i class="size-md str-width-md text-accent" data-feather="mail"></i>
                 </div>
               </div>
               <h3 class="text-2xl fw-500 mt-32">
                 Erstkontakt
               </h3>
               <p class="mt-20">
                 Lassen Sie von sich hören!
                 Ich berate Sie gerne über die Dauer und den Umfang Ihres Projektes. 
                 Standortbestimmung. Zielsetzung. 
                 
               </p>
               
{#                <h3 class="text-2xl fw-500 mt-32">
                  Unverbindlicher Kontakt<br> und Beratung
                </h3>
                <p class="mt-20">
                  Schreiben Sie per E-Mail, Chat oder rufen Sie mich einfach an. Lassen Sie uns unverbindlich und kostenlos über Ihr Vorhaben sprechen. Ich berate Sie gerne und informiere Sie vorab über mögliche Dauer und Kosten Ihres Projekts.
                  Lassen Sie von sich hören und ich berate Sie gerne über die Dauer und den Umfang Ihres Projekts.
                   Dieses Vorgespräch dauert in der Regel 10-15 Minuten und ist völlig unverbindlich.
                </p> #}
        {#        <div class="mt-24">
                 <a data-barba href="#" class="button -icon text-black">
                   Kontakt
                   <i class="icon size-xs str-width-md" data-feather="arrow-right"></i>
                 </a>
               </div> #}
             </div>
           </div>
         
            
       
         <div class="col-lg-4 col-md-6">
           <div data-anim="slide-up delay-5">
             <div class="d-flex ml-minus-4">
               <div class="px-20 py-20 bg-white shadow-light rounded-full">
                 <i class="size-md str-width-md text-accent" data-feather="edit"></i>
               </div>
             </div>
{#              <h3 class="text-2xl fw-500 mt-32">
               Konzeption, Planung<br>Koordination
             </h3>
             <p class="mt-20">
               Ich konzipiere Ihr persönliches Bildkonzept - massgeschneidert auf Ihr eigenes Unternehmens CI. 
               Dann werden alle Abläufe für den Shooting Tag koordiniert und mit Ihnen abgestimmt. Gerade bei vielen Mitarbeitern und knapper Zeit will alles gut organisiert sein.
               
               In diesem Gespräch besprechen wir den Status Quo und definieren Ziele, welche wir gemeinsam
               umsetzen werden. Sie bekommen eine Schritt- für Schritt Anleitung, wie das Fotoshooting umgesetzt werden sollte
             </p> #}
             
             <h3 class="text-2xl fw-500 mt-32">
                Ideenfindung. Konzeption. Koordination.
              </h3>
              <p class="mt-20">
                Nach Ihren Zielen und Bedürfnissen entwickeln wir ein klares Bildkonzept und
                konzipieren Ihr Erscheinungsbild individuell auf Ihr Unternehmen.
              </p>
      {#        <div class="mt-24">
               <a data-barba href="#" class="button -icon text-black">
                 Kontakt
                 <i class="icon size-xs str-width-md" data-feather="arrow-right"></i>
               </a>
             </div> #}
           </div>
         </div>
       
      
       
         <div class="col-lg-4 col-md-6">
           <div data-anim="slide-up delay-5">
             <div class="d-flex ml-minus-4">
               <div class="px-20 py-20 bg-white shadow-light rounded-full">
                 <i class="size-md str-width-md text-accent" data-feather="camera"></i>
               </div>
             </div>
             <h3 class="text-2xl fw-500 mt-32">
               Planung. Produktion.
             </h3>
             <p class="mt-20">
               Nach ausführlicher Planung können wir das Shooting realisieren.
               Foto / Videoproduktion und Drohnenaufnahmen.
             </p>
             
             
{#              <h3 class="text-2xl fw-500 mt-32">
                Produktion am<br>
                Shooting Tag
              </h3>
              <p class="mt-20">
                Bevor Sie am Zuge sind, wird im Hintergund schon alles vorbereitet und aufgebaut. Nun muss alles sitzen -
                das Licht, der Standort, die Laune der Mitarbeiter. Mit etwas Fingerspitzengefühl bekommt man auch
                die Kamerascheusten Rehe selbstbewusst vor die Linse.
              </p> #}
{#              <div class="mt-24">
               <a data-barba href="#" class="button -icon text-black">
                 Know More
                 <i class="icon size-xs str-width-md" data-feather="arrow-right"></i>
               </a>
             </div> #}
           </div>
         </div>
       
       </div>
       <!-- row end -->
      
        </div>
        <!-- container end -->
      </section>
      <!-- section end -->   
      
      
      
<!-- section start -->
<section class="layout-pt-lg layout-pb-lg">
  <div class="container">
    <div class="js-section-slider swiper-container-initialized swiper-container swiper-container-autoheight" data-slider-col="base-3 lg-3 md-1 sm-1" data-gap="20" data-loop data-pagination data-center>

      <div class="row justify-content-between align-items-end">
        <div class="col-lg-8">
          <div class="sectionHeading -md">
            <p class="sectionHeading__subtitle">
              testimonials
            </p>
            <h2 class="sectionHeading__title">
              Das sagen meine Kunden über unsere Shootings
            </h2>
          </div>
        </div>
      </div>

      <div class="swiper-wrapper layout-pt-md">

{% for entry in craft.entries.section('clients').limit(6) %} 

        <div class="swiper-slide slider-slide">
          <div class="testimonials bg-white py-32 px-32 sm:py-32 sm:px-32 rounded-4 shadow-light">
            <h4 class="text-2xl text-whit mb-16">
              {{ entry.title }}
            </h4>

            <p class="testimonials__comment text-md text-dark">
              {{ entry.ClientTestimonial }}
            </p>

            <div class="testimonials__author d-flex align-items-center mt-24">
              <div class="size-md mr-16">
                {% set image = entry.testimonialBild.one() %}
                {% if image %}
                <div class="bg-image rounded-full swiper-lazy" data-background="{{ image.getUrl('logo') }}"></div>
                  {% endif %}
              </div>

              <div>
                <h6 class="text-base capitalize fw-600 text-black">
                  {{ entry.testimonialAuthor }}
                </h6>
                <h6 class="text-base capitalize fw-400 text-dark mt-4">
                  {{ entry.title }}
                </h6>
              </div>
            </div>
          </div>
        </div>
        
        {% endfor %}  
      </div>

      <div class="pagination -dark pb-4 mt-56 js-pagination"></div>
    </div>
  </div>
</section>
<!-- section end -->


<!-- section start -->
<section data-parallax="0.7" class="layout-pt-lg layout-pb-lg">
  <div data-parallax-target class="overlay-black-md bg-image js-lazy" data-bg="assets/img/dirk-wetzel-testimonials.jpg"></div>

  <!-- container start -->
  <div class="container z-5">
    <!-- row start -->
    <div class="row justify-content-center text-center">
      <div class="col-12">
        <p class="text-sm uppercase tracking-lg text-white mb-20">
          Contact me
        </p>

        <h2 class="text-5xl sm:text-5xl xs:text-4xl leading-sm fw-700 text-white">
          Was haben Sie geplant?<br>Erzählen Sie mir<br>von Ihrem Projekt.
        </h2>

{#         <p class="text-xl md:text-lg text-white mt-16">
          Ob klein oder groß, ich unterstütze Sie!
        </p> #}

        <a href="mailto:info@dirkwetzel.com" class="button -md -white text-black mt-32">
          Get in Touch
        </a>
      </div>
    </div>
    <!-- row end -->
  </div>
  <!-- container end -->
</section>
<!-- section end -->


{% endblock %}