{% extends 'layout.html.twig' %}
{% block title %}{{ parent() }} - Der starke PV-Partner{% endblock %}
{% block javascript %}
{{ parent() }}
{{ encore_entry_script_tags('frontend_index') }}
{% endblock %}
{% block content %}
<section class="hero is-fullheight-with-navbar video" style="background: url('{{ asset('build/videos/hilker-solar-bg-drone-bw-poster.jpg') }}')center center; background-size:cover;">
<div class="hero-video">
<video autoplay loop muted poster="{{ asset('build/videos/hilker-solar-bg-drone-bw-poster.jpg') }}">
<source src="{{ asset('build/videos/hilker-solar-bg-drone-bw-medium.mp4') }}" type="video/mp4">
</video>
</div>
<div class="hero-body">
<div class="container has-text-centered">
<a class="title has-text-white modal-button" data-target="modal_yt_w3NY866Z2lM" aria-haspopup="true" style="text-shadow: 0 0 15px rgba(0, 0, 0, .5)">
<span class="icon" style="width: 6rem; height: 6rem; margin-bottom: 1rem;">
<i class="far fa-play-circle" style="font-size: 6rem;"></i></span><br>
<span>Play Video</span>
</a>
</div>
</div>
</section>
{% include 'frontend/_sections/_customer_request_tool_teaser.html.twig' %}
<section id="video-collection">
<div class="columns is-gapless">
<div class="column">
<a class="modal-button" data-target="modal_yt_w3NY866Z2lM" aria-haspopup="true">
<figure class="video">
<div class="hero-video is-block-touch">
<video autoplay loop muted poster="{{ asset('build/videos/hilker-solar-image-film-short-poster.jpg') }}" style="height: unset; max-width: unset;">
<source src="{{ asset('build/videos/hilker-solar-image-film-short-small.mp4') }}" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="is-overlay is-flex">
<div class="has-text-centered has-text-white" style="width: 100%;">
<p class="is-size-3 has-text-weight-semibold mb-0">Imagefilm</p>
<p class="p" style="opacity: .75;">Ein kleiner Einblick</p>
<span class="icon is-large">
<i class="far fa-3x fa-play-circle"></i>
</span>
</div>
</div>
</figure>
</a>
</div>
<div class="column">
<a class="modal-button" data-target="modal_yt_zb5Qup9X9Ms" aria-haspopup="true">
<figure class="video">
<div class="hero-video is-block-touch">
<video autoplay loop muted poster="{{ asset('build/videos/hilker-solar-8-schritte-plan-short-poster.jpg') }}" style="height: unset; max-width: unset;">
<source src="{{ asset('build/videos/hilker-solar-8-schritte-plan-short-small.mp4') }}" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="is-overlay is-flex">
<div class="has-text-centered has-text-white" style="width: 100%;">
<p class="is-size-3 has-text-weight-semibold mb-0">8-Schritte-Plan</p>
<p class="p" style="opacity: .75;">Der einfache Weg zur PV-Anlage</p>
<span class="icon is-large">
<i class="far fa-3x fa-play-circle"></i>
</span>
</div>
</div>
</figure>
</a>
</div>
<div class="column">
<a class="modal-button" data-target="modal_yt_tho-26VStp4" aria-haspopup="true">
<figure class="video">
<div class="hero-video is-block-touch">
<video autoplay loop muted poster="{{ asset('build/videos/hilker-solar-pv-reinigung-short-poster.jpg') }}" style="height: unset; max-width: unset;">
<source src="{{ asset('build/videos/hilker-solar-pv-reinigung-short-small.mp4') }}" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="is-overlay is-flex">
<div class="has-text-centered has-text-white" style="width: 100%;">
<p class="is-size-3 has-text-weight-semibold mb-0">PV-Reinigung</p>
<p class="p" style="opacity: .75;">Eine saubere Angelegenheit</p>
<span class="icon is-large">
<i class="far fa-3x fa-play-circle"></i>
</span>
</div>
</div>
</figure>
</a>
</div>
</div>
</section>
<section class="section is-medium">
<div class="container">
<div class="columns is-desktop is-vcentered has-text-centered-touch">
<div class="column is-8-touch is-offset-2-touch is-half-desktop">
<picture>
<source srcset="{{ asset('build/images/frontend/index/solarmodul-schichten-1920.webp') }}" type="image/webp">
<img src="{{ asset('build/images/frontend/index/solarmodul-schichten-1920.png') }}" alt="Ein offenes Solarmodul, bei dem die einzelnen Schichten zu sehen sind.">
</picture>
</div>
<div class="column is-5-desktop is-offset-1-desktop">
<p class="h2">
Mehr Leistung als jemals zuvor.
</p>
<h1 class="h1">
Solarmodule mit einer Leistung bis zu 400 Watt
</h1>
<p class="p">
Dank der rekordbrechenden Zelltechnologie und innovativer Forschungs- und Entwicklungsarbeit ist es nun möglich noch mehr Leistung auf gleicher Fläche zu installieren als je zuvor.
</p>
</div>
</div>
</div>
</section>
<section class="section p-0">
<div class="container is-fluid p-0">
<div id="services">
<figure class="image">
<picture>
<source srcset="{{ asset('build/images/frontend/index/reparatur.webp') }}" type="image/webp">
<img src="{{ asset('build/images/frontend/index/reparatur.jpg') }}" alt="Spannungsmessgerät">
</picture>
<div class="is-overlay is-flex">
<div class="has-text-centered has-text-white" style="width: 100%;">
<p class="is-size-3 has-text-weight-semibold mb-0">Wartung</p>
<p style="opacity: .75;">Immer auf der sicheren Seite</p>
</div>
</div>
</figure>
<figure class="image">
<picture>
<source srcset="{{ asset('build/images/frontend/index/monitoring.webp') }}" type="image/webp">
<img src="{{ asset('build/images/frontend/index/monitoring.jpg') }}" alt="Dashboard der Software zur Überwachung der Solaranlage auf einem iMac.">
</picture>
<div class="is-overlay is-flex">
<div class="has-text-centered has-text-white" style="width: 100%;">
<p class="is-size-3 has-text-weight-semibold mb-0">Anlagenüberwachung</p>
<p style="opacity: .75;">Systeme zur Überwachung der Solaranlage</p>
</div>
</div>
</figure>
<figure class="image">
<picture>
<source srcset="{{ asset('build/images/frontend/index/ladesysteme.webp') }}" type="image/webp">
<img src="{{ asset('build/images/frontend/index/ladesysteme.jpg') }}" alt="An die Wand montierte Ladestation für ein Elektrofahrzeuge mit Elektrofahrzeuge Kabel.">
</picture>
<div class="is-overlay is-flex">
<div class="has-text-centered has-text-white" style="width: 100%;">
<p class="is-size-3 has-text-weight-semibold mb-0">E-Mobilität</p>
<p style="opacity: .75;">Lösungen für Ladepunkte</p>
</div>
</div>
</figure>
<figure class="image">
<picture>
<source srcset="{{ asset('build/images/frontend/index/reinigung.webp') }}" type="image/webp">
<img src="{{ asset('build/images/frontend/index/reinigung.jpg') }}" alt="Fensterabzieher">
</picture>
<div class="is-overlay is-flex">
<div class="has-text-centered has-text-white" style="width: 100%;">
<p class="is-size-3 has-text-weight-semibold mb-0">PV-Reinigung</p>
<p style="opacity: .75;">Neue & innovative Technologie</p>
</div>
</div>
</figure>
<figure class="image">
<picture>
<source srcset="{{ asset('build/images/frontend/index/reparatur_pv.webp') }}" type="image/webp">
<img src="{{ asset('build/images/frontend/index/reparatur_pv.jpg') }}" alt="Schlitzschraubenzieher">
</picture>
<div class="is-overlay is-flex">
<div class="has-text-centered has-text-white" style="width: 100%;">
<p class="is-size-3 has-text-weight-semibold mb-0">Reparatur</p>
<p style="opacity: .75;">Im Notfall sind wir da</p>
</div>
</div>
</figure>
</div>
</div>
</section>
<section class="section is-large has-text-white" style="background-image: url({{ asset('build/images/frontend/index/byd-battery-box-hintergrund-1920.jpg') }}); background-position: center center; background-size: cover">
<div class="container">
<h1 class="h1 has-text-centered has-text-white" style="margin-bottom: 6rem;">
Die Battery-Box Premium
</h1>
<div class="columns">
<div class="column is-10 is-offset-1">
<div class="columns is-variable is-3-mobile is-5-tablet is-8-desktop">
<div class="column has-text-centered">
<span class="icon is-large mb-6">
<i class="fas fa-3x fa-box"></i>
</span>
<h3>BYD auf dem Vormarsch</h3>
<p class="p">BYD hat die Zeichen der Zeit erkannt und reagiert mit der massiven Erhöhung der Produktionskapazität auf die größten Sorgen und Probleme der Branche. Wn den neuen Speichergenerationen 48 V und Hochvolt alle Stärken der Vorgängermodelle beibehalten.</p>
</div>
<div class="column has-text-centered">
<span class="icon is-large mb-6">
<i class="fas fa-3x fa-bars"></i>
</span>
<h3>Noch flexibler und skalierbarer</h3>
<p class="p">2,76 kWh Batteriekapazität pro Modul sind enorm. Mit der neuen Generation können nun auch bis zu drei Batterietürme zu einem System verbunden werden. Durch die Weiterentwicklung der Zelltechnologie konnte das Systemgewicht um fast 30 % reduziert werden.</p>
</div>
<div class="column has-text-centered">
<span class="icon is-large mb-6">
<i class="fas fa-3x fa-check-circle"></i>
</span>
<h3>High-End-Kompatibilität</h3>
<p class="p">Durch die unglaubliche Skalierbarkeit sind den Einsatzmöglichkeiten für diese Batterie kaum Grenzen gesetzt. Die Kompatibilität zu zahlreichen Herstellern wie SolarEdge, SMA, Kostal, Fronius, Sungrow und GoodWe machen das Produkt zu einem Highlight für 2020.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section is-medium">
<div class="container">
<div class="columns">
<div class="column is-8 is-offset-2 has-text-centered">
<picture>
<source srcset="{{ asset('build/images/frontend/index/broschuere-vorschau-1920.webp') }}" type="image/webp">
<img src="{{ asset('build/images/frontend/index/broschuere-vorschau-1920.png') }}" alt="Vorschau der Broschüre.">
</picture>
</div>
</div>
<div class="columns">
<div class="column is-8 is-offset-2 has-text-centered">
<h1 class="h1">
Jetzt Infomaterial anfordern!
</h1>
<p class="p">
Gerne senden wir Ihnen kostenlos umfangreiches Infomaterial zum Thema Photovoltaik. Verbinden Sie dies doch mit einer Vorabberechnung Ihres Daches. Hierzu können Sie unser neues Tool zur Objektdatenerfassung nutzen.
</p>
<a href="{{ path('frontend_contact') }}" class="button is-medium is-rounded">Jetzt anfordern</a>
</div>
</div>
</div>
</section>
{% include 'frontend/_sections/_showroom.html.twig' %}
<section class="section is-medium has-background-grey-dark-gradient has-text-white">
<div class="container">
<div class="columns">
<div class="column has-text-centered">
<h1 class="h1 has-text-white">
"The World of Photovoltaik"
</h1>
<p class="p">
Lassen Sie sich kostenlos und unverbindlich beraten.<br>
Wir kommen zu Ihnen oder laden Sie herzlich zu uns ein!
</p>
<a href="{{ path('frontend_contact') }}" class="button is-medium is-rounded is-white">Jetzt Termin vereinbaren!</a>
</div>
</div>
</div>
</section>
{% endblock %}
{% block modals %}
{{ parent() }}
{# video hero / video 1 #}
{% include '_components/_modal_youtube.html.twig' with {'youtube_id': 'w3NY866Z2lM'} %}
{# video 2 #}
{% include '_components/_modal_youtube.html.twig' with {'youtube_id': 'zb5Qup9X9Ms'} %}
{# video 3 #}
{% include '_components/_modal_youtube.html.twig' with {'youtube_id': 'tho-26VStp4'} %}
{% endblock %}