{{ if .Site.Params.hero.enable }}
    {{"<!-- Hero Area Section -->" | safeHTML}}
    <section id="{{ i18n "home" | urlize }}" class="hero-area" style='background-image: url("{{ with .Site.Params.hero.bg }} {{ . }}{{ end }}");'>
        <div class="container">
            <div class="row mt-3 hidden-md-up"></div>
            <div class="row">
                {{ if not .Site.Params.hero.disableCountdown }}
                <div class="col-lg-7 col-md-6 col-xs-8 push-xs-2 push-md-0">
                {{ else }}
                <div class="col-lg-7 col-md-6 col-xs-8 push-lg-5 push-xs-2 push-md-0">
                {{ end }}
                    <div class="block">
                        <img class="wow fadeInDown" data-wow-delay="0.3s" data-wow-duration=".2s" src="images/VVoidCampSignetWhite.svg" alt="VVoid">
                        <img class="wow fadeInDown" data-wow-delay="0.3s" data-wow-duration=".2s" src="images/VVoidCampLogoWhite.svg" alt="VVoid Camp">
                        {{ with .Site.Params.hero.subtitle | safeHTML }}
                        <p class="wow fadeInDown" data-wow-delay="0.5s" data-wow-duration=".5s" style="text-align:center">
                            {{ . }}
                        </p>
                        {{ end }}
                        {{ if .Site.Params.hero.showDate }}
                        <p class="wow fadeInDown" data-wow-delay="0.5s" data-wow-duration=".5s" style="font-size:25pt;text-align:center">
                            {{ .Site.Params.hero.date}}
                        </p>
                        {{ end }}
                        {{ with .Site.Params.hero.btnText }}
                        <div class="hidden-sm-down wow fadeInDown" data-wow-delay="0.7s" data-wow-duration=".7s"  style="text-align:center">
                            <a class="btn btn-home" href="#{{ i18n "about" | urlize }}" role="button">
                                {{ . }}
                            </a>
                        </div>
                        {{ end }}
                    </div>
                </div>
                {{ if not .Site.Params.hero.disableCountdown }}
                <div class="col-lg-5 col-md-6 col-xs-10 push-xs-1 push-md-0 wow zoomIn">
                    <div class="block">
                        <div class="counter text-center">
                            <ul id="countdown_dashboard" data-year="{{ with .Site.Params.hero.countdownYear }} {{ . }}{{ end }}" data-month="{{ with .Site.Params.hero.countdownMonth }} {{ . }}{{ end }}" data-day="{{ with .Site.Params.hero.countdownDay }} {{ . }}{{ end }}" data-hour="{{ with .Site.Params.hero.countdownHour }} {{ . }}{{ end }}" data-minute="{{ with .Site.Params.hero.countdownMinute }} {{ . }}{{ end }}" data-second="{{ with .Site.Params.hero.countdownSecond }} {{ . }}{{ end }}">
                                <li>
                                    <div class="dash days_dash">
                                        <div class="digit">0</div>
                                        <div class="digit">0</div>
                                        <div class="digit">0</div>
                                        <span class="dash_title">{{i18n "days" }}</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="dash hours_dash">
                                        <div class="digit">0</div>
                                        <div class="digit">0</div>
                                        <span class="dash_title">{{i18n "hours" }}</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="dash minutes_dash">
                                        <div class="digit">0</div>
                                        <div class="digit">0</div>
                                        <span class="dash_title">{{i18n "minutes" }}</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="dash seconds_dash">
                                        <div class="digit">0</div>
                                        <div class="digit">0</div>
                                        <span class="dash_title">{{i18n "seconds" }}</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                {{ end }}
            </div>
            <!-- .row close -->
        </div>
        <!-- .container close -->
    </section>
{{ end }}