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


<!-- section start -->
<section data-speed="1200" data-autoplay-delay="5000" class="sliderMain -type-3 js-sliderMain-type-3 sm:layout-mt-headerBar">
  <!-- container start -->
  <div class="container-fluid h-full px-0 sm:px-20">
    <!-- row start -->
    <div class="row sm:justify-content-center h-full">
      <div class="col-xl-3 offset-xl-2 col-lg-4 offset-lg-1 col-md-5 offset-md-1 col-sm-9">
        <div class="slider__content__wrapper sm:text-center h-full z-3">
              
              
          <div class="slider__content  js-slider-content">
              <div data-split="lines">
                <p class="slider__subtitle text-sm uppercase tracking-md leading-md mb-32 js-subtitle">
                  
                </p>
              </div>
              <div data-split="lines" class="mr-minus-col-2 sm:mr-0">
                <h1 class="slider__title fw-700 leading-xs js-title">
                  Seien Sie beeindruckend.
                  Zeigen Sie wer Sie sind.
                </h1>
              </div>
<div class="slider__button overflow-hidden mt-32">
<div class="js-button py-4">
  <a href="mailto:info@dirkwetzel.com" class="button -md -black text-white">
    get in touch
  </a>
</div>
</div>
            </div>
              


          <div class="slider__content  js-slider-content">
            <div data-split="lines">
              <p class="slider__subtitle text-sm uppercase tracking-md leading-md mb-32 js-subtitle">
                
              </p>
            </div>
            <div data-split="lines" class="mr-minus-col-2 sm:mr-0">
              <h1 class="slider__title fw-700 leading-xs js-title">
                Eine klare Bildsprache kommuniziert Ihre Wahrnehmung.
              </h1>
            </div>
<div class="slider__button overflow-hidden mt-32">
  <div class="js-button py-4">
    <a href="mailto:info@dirkwetzel.com" class="button -md -black text-white">
      get in touch
    </a>
  </div>
</div>
          </div>

          <div class="slider__content  js-slider-content">
            <div data-split="lines">
              <p class="slider__subtitle text-sm uppercase tracking-md leading-md mb-32 js-subtitle">
                
              </p>
            </div>
            <div data-split="lines" class="mr-minus-col-2 sm:mr-0">
              <h1 class="slider__title fw-700 leading-xs js-title">
                Stärken Sie die visuelle Identität<br> Ihrer Marke.
              </h1>
            </div>
            <div class="slider__button overflow-hidden mt-32">
              <div class="js-button py-4">
                <a href="mailto:info@dirkwetzel.com" class="button -md -black text-white">
                  get in touch
                </a>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="col layout-pr-headerBar lg:pr-0 col-lg-7 col-md-6 swiper-col">
        <div class="swiper-container h-100vh">
          <div class="swiper-wrapper z-2">

            <div class="swiper-slide overflow-hidden">
              <div class="slider__img" data-swiper-parallax="150" data-parallax="0.7" data-swiper-parallax-opacity="0">
                <div data-parallax-target class="bg-image swiper-lazy js-image" data-background="assets/images/dirk-wetzel-hero-2.jpg"></div>
              </div>
              
              <div class="slider__img" data-swiper-parallax="150" data-parallax="0.7" data-swiper-parallax-opacity="0">
                  <div data-parallax-target class="bg-image swiper-lazy js-image" data-background="assets/images/dirk-wetzel-hero-2.jpg"></div>
                </div>

              <div class="slider__img__cover js-image-cover"></div>

              <div class="slider__img__bg bg-light-1"></div>
            </div>


            <div class="swiper-slide overflow-hidden">
              <div class="slider__img" data-swiper-parallax="150" data-parallax="0.7" data-swiper-parallax-opacity="0">
                <div data-parallax-target class="bg-image swiper-lazy js-image" data-background="assets/images/dirk-wetzel-hero-5.jpg"></div>
              </div>

              <div class="slider__img__bg bg-light-1"></div>
            </div>

            <div class="swiper-slide overflow-hidden">
              <div class="slider__img" data-swiper-parallax="150" data-parallax="0.7" data-swiper-parallax-opacity="0">
                <div data-parallax-target class="bg-image swiper-lazy js-image" data-background="assets/images/dirk-wetzel-hero-7.jpg"></div>
              </div>

              <div class="slider__img__bg bg-light-1"></div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <!-- row end -->

    <!-- slider nav start -->
    <div class="slider__navs js-slider-nav js-ui">
      <div class="navButton">
        <button type="button" class="navButton__item button -outline-black text-black js-prev">
          <i class="icon" data-feather="arrow-left"></i>
        </button>
        <button type="button" class="navButton__item button -outline-black text-black mt-12 js-next">
          <i class="icon" data-feather="arrow-right"></i>
        </button>
      </div>
    </div>
    <!-- slider nav end -->
  </div>
  <!-- container end -->

  <!-- ui-element start -->
  

  
<!-- ui-element start -->
<div class="ui-element -bottom-left sm:d-none js-ui">
  <button type="button" class="ui-element__scroll text-black js-ui-scroll-button">
    scroll down
    <i class="icon" data-feather="arrow-down"></i>
  </button>
</div>
<!-- ui-element end -->


  <!-- ui-element end -->
</section>
<!-- section end -->



      <!-- 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-6 col-lg-6 col-md-6">
              <div class="sectionHeading -lg">
                <p class="sectionHeading__subtitle">
                  Darf ich Ihnen helfen?
                </p>
                <h2 class="sectionHeading__title">
                  Warum braucht es professionelle Fotografie für ihr Business?
                </h2>
              </div>
            </div>
            
            <div class="col-lg-6 col-md-6">
                          <div class="">
                            <h3 class="text-2xl fw-500 mt-32">
                              Stärkere Markenidentität, bessere Sichtbarkeit, Professionelles Fachwissen
                            </h3>
                              <p class="mt-16">
                              Hochwertige Fotos kommunizieren das Erscheinungsbild Ihres Unternehmens. 
                              Stärken Sie Ihre visuelle Identität und vermitteln Sie Ihren Kunden den richtigen ersten Eindruck.
                              Glaubwürdig. Authentisch. Echt.<br><br>
                              
                              Lassen Sie sich von meinem Fachwissen beim Ihrem Projekt begleiten. 
                              Vom Kreativ Prozess bis zur Durchführung der Foto-und Videoproduktion stehe ich Ihnen immer beratend zur Seite.              
                              </p>
                          </div>
                        </div>
          </div>
          <!-- row end -->


          <!-- row start -->
{#           <div class="row x-gap-60 y-gap-48 layout-pt-xs">
            <div class="col-lg-10 col-md-6">
              <div class="">
                <h3 class="text-2xl fw-500 mt-32">
                  Stärkere Markenidentität
                </h3>
                 <p class="mt-16">
                  Ihre Fotos repräsentieren Ihre Marke. <br>Hochwertige, professionelle Fotos spiegeln die Qualität wider, die Ihr Unternehmen bieten. Stärken Sie Ihre visuelle Identität und vermitteln Sie Ihren Kunden den richtigen ersten Eindruck.                
                  </p> 
                  <p class="mt-16">
                  Hochwertige Fotos kommunizieren das Erscheinungsbild Ihres Unternehmens. 
                  Stärken Sie Ihre visuelle Identität und vermitteln Sie Ihren Kunden den richtigen ersten Eindruck.
                  Glaubwürdig. Authentisch. Echt.
                  
                  Lassen Sie sich von meinem Fachwissen beim Ihrem Projekt begleiten. 
                  Vom Kreativ Prozess bis zur Durchführung der Foto-und Videoproduktion stehe ich Ihnen immer beratend zur Seite.              
                  </p>
              </div>
            </div>

          <div class="col-lg-4 col-md-6">
              <div class="">
                <h3 class="text-2xl fw-500 mt-32">
                   Bessere Sichtbarkeit
                </h3>
                <p class="mt-16">
                  Relevante Fotos tragen dazu bei, dass Ihre Website in den Suchergebnissen besser abschneidet. Ein hochwertiges Erscheinungsbild hilft ebenfalls, Kunden zu binden, sie länger auf Ihrer Website zu halten und Sie zu ermutigen, sich für Sie zu entscheiden.
                </p>
              </div>
            </div> 

          <div class="col-lg-4 col-md-6">
              <div class="">
                <h3 class="text-2xl fw-500 mt-32">
                    Professionelles Fachwissen
                 </h3>
                <p class="mt-16">
                  Lassen Sie sich vom Fachwissen eines professionellen Fotografen beim Kreativ-Prozess, sowie der Durchführung des Fotoshootings begleiten und beraten. Bei der Entwicklung eines Bildkonzepts kommt es darauf an zu wissen, wie man Sie gut aussehen lässt.
                </p>
              </div>
            </div> 
          </div> #}

        </div>
      </section>


      
      <!-- section start -->
      <section class="layout-pt-lg layout-pb-lg">
        <!-- container start -->
        <div class="container">
          <!-- row start -->
          
          
          <div class="fancy-grid -col-2">
      
            {% for postEntry in craft.entries.section('newsPosts').site('business').all() %} 
               <div class="fancy-grid__item">
                 <a data-cursor-icon="arrow-right" data-anim="slide-up delay-2" class="portfolioCard -type-1 -hover" data-barba href="{{ postEntry.url }}">
                   <div class="portfolioCard__img">
                     <div class="portfolioCard__img__inner">
                        {% set image = postEntry.featuredImage.inReverse().one() %}
                        {% if image %}
                           <div class="ratio ratio-3:4 bg-image js-lazy" data-bg="{{ image.getUrl('featuredImage') }}"></div>
                        {% endif %}
                     </div>
                   </div>
         
                   <div class="portfolioCard__content mt-20">
                     <p class="portfolioCard__category overflow-hidden text-dark mb-8">
                       {{ postEntry.headline }}
                     </p>
         
                     <h3 class="portfolioCard__title overflow-hidden text-2xl fw-600">
                       {{ postEntry.title }}
                     </h3>
                   </div>
                 </a>
               </div>
            {% endfor %}  
          </div>
          <!-- row end -->
        </div>
        <!-- container end -->
      </section>
      <!-- section end -->



      <!-- section start -->
{#       <section class="layout-pt-lg">
        <div class="container">
          <div class="row justify-content-between">

            <div class="col-lg-4 col-md-6 col-sm-8">
              <div class="sectionHeading -md">
                <p class="sectionHeading__subtitle">
                  Services
                </p>
                <h2 class="sectionHeading__title">
                  Ihr Business im Fokus
                </h2>
                <p class="mt-20">
                  Steigern Sie die Wirkung Ihres Marketings mit professionellen Fotos.
                </p>
                <a href="/service" class="button -md -outline-black text-black mt-32">
                  All Services
                </a>
              </div>
            </div>


            <div class="col-lg-7">
              <div class="row x-gap-72 y-gap-72 md:mt-48">

                <div class="col-md-6">
                  <h3 class="text-2xl fw-500 mt-32">
                    Business Photography
                  </h3>
                  <p class="mt-12">
                    Mit individuellen Bildern kann sich Ihr Unternehmen von der Konkurrenz abheben. 
                    
                  </p>
                </div>

                <div class="col-md-6">
                  <h3 class="text-2xl fw-500 mt-32">
                    Professionelle Headshots
                  </h3>
                  <p class="mt-12">
                    Für Ihre Online-Präsenz ist die Fotografie Ihres Gesichts unerlässlich, denn sie vermittelt ein klares Bild Ihrer Person. 
                  </p>
                </div>

                <div class="col-md-6">
                  <h3 class="text-2xl fw-500 mt-32">
                    Innenraum- und Architekturfotografie
                  </h3>
                  <p class="mt-12">
                    Sie haben viel Zeit, Sorgfalt und Überlegung in Ihre Räumlichkeiten gesteckt – präsentieren Sie diese stilvoll.
                  </p>
                </div>

                <div class="col-md-6">
                  <h3 class="text-2xl fw-500 mt-32">
                    Standort-Porträts
                  </h3>
                  <p class="mt-12">
                    Porträts im redaktionellen Stil werden vor Ort fotografiert, um die Umgebung zu nutzen die Ihre Geschichte auf aussagekräftige Weise erzählt.
                  </p>
                </div>

              </div>
            </div>

          </div>
        </div>
      </section> #}
      <!-- section end -->

      
      
      
      
<!-- 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">
        <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 class="layout-pt-lg layout-pb-md">
        <div class="container">
          <div class="row">
            {% for entry in craft.entries.section('clients').all() %} 
                  <div class="col-lg-3 col-sm-6">
                    <div data-anim="slide-up delay-1" class="clientsItem -hover -light ratio ratio-3:2 border-light rounded-4">
                      {% set image = entry.ClientLogo.one() %}
                      {% if image %}
                      <div class="clientsItem__img">
                        <img class="col-11" src="{{ image.getUrl('logo') }}" alt="Client">
                      </div>
                      {% endif %}
                      
      
                      <div class="clientsItem__content">
                        <h5 class="clientsItem__title text-xl">
                          <a href="{{ entry.linkClientProject }}" target="_blank">{{ entry.title }}</a>
                        </h5>
                      </div>
                    </div>
                  </div>
            {% endfor %}  
      
          </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>
      
              <a href="mailto:info@dirkwetzel.com" class="button -md -white text-black mt-32">
                Get in Touch
              </a>
            </div>
          </div>
        </div>
      </section>
      <!-- section end -->
      

{% endblock %}