<!-- Hero Section -->
{% set device = pimcore_device('desktop') %}
<div id="hero" class="has-image extra-background-topHome">
<div id="hero-styles">
<div id="hero-caption" class="content-max-width">
<div class="inner">
<!-- <div class="hero-arrow"><i class="arrow-icon"></i></div> -->
<!-- <div class="hero-subtitle">
<span>Digital</span><span>Creative Agency</span>
</div> -->
<div class="hero-title-wrapper">
<div class="hero-title">
{% if editmode %}
{{pimcore_textarea('HeroTitle',{
"placeholder":"Hero Title"
})}}
{% else %}
<h1>
{{pimcore_textarea('HeroTitle').getText() | raw}}</h1>
{% endif %}
</div>
</div>
</div>
</div>
<div id="hero-footer">
<div class="hero-footer-right">
<div class="button-wrap right scroll-down">
<div class="icon-wrap parallax-wrap">
<div class="button-icon parallax-element">
<i class="fa fa-angle-down"></i>
</div>
</div>
<div class="button-text sticky right">
<span data-hover="Scroll Down">Scroll Down</span>
</div>
</div>
</div>
</div>
<div id="hero-description" class="content-max-width">
<div class="inner">
<div class="one_half"></div>
<div class="one_half last">
<div class="hero-text">
<p>
<span>{{pimcore_textarea('HeroDescription',{
"placeholder":"Hero Description"
})|nl2br}}
</span>
</p>
</div>
<br />
{% if editmode %}
{{pimcore_link('ReadMoreLink')}}
{% else %}
{% set link = pimcore_link('ReadMoreLink') %}
{% if link.getText() != "" %}
<div class="button-wrap right button-link large-btn has-animation">
<div class="icon-wrap parallax-wrap">
<div class="button-icon parallax-element">
<i class="fa-solid fa-arrow-right"></i>
</div>
</div>
<a class="ajax-link" href="{{link.getHref()}}" data-type="page-transition">
<div class="button-text sticky right">
<span data-hover="Read More">{{link.getText()}}</span>
</div>
</a>
</div>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% set select_option = pimcore_select("valid_for", {
width: 110,
reload: true,
store: [
["Image", "Image"],
["Video", "Video"]
],
class: 'align-middle'
})
%}
{% set option = select_option.getData() %}
{% if option is empty or option == '' %}
{% set option = 'Image' %}
{% endif %}
{% if editmode %}
<div class="mb-3 videoImageselect">
<span class="editmode-label align-middle ">Options:</span>
{{ select_option|raw }}
</div>
{% endif %}
{% if editmode %}
{% if option == "Video" %}
{{" Desktop Video "}}
{{ pimcore_video('spotlightVideo' ,{
width:500,
height:250,
})
}}
</br></br></br>
{{" Mobile Video "}}
{{ pimcore_video('spotlightVideoMobile' ,{
width:300,
height:500,
})
}}
{% else %}
{{ pimcore_image("myImage",
{
thumbnail: '',
"title": "Drag spotlight banner image here",
}
) }}
{% endif %}
{% endif %}
<div id="hero-image-wrapper">
<div id="hero-background-layer" class="parallax-scroll-image">
{% if not editmode %}
{% if option == 'Image' %}
<div id="hero-bg-image" style="background-image: url({{ pimcore_image('myImage').getSrc() }})"></div>
{% else %}
<div id="hero-bg-image">
{% if device.isPhone() %}
<video autoplay muted loop playsinline id="centricSpotlight"
poster="{{ pimcore_video('spotlightVideoMobile').getData().poster }}">
<source src="{{ pimcore_video('spotlightVideoMobile').getData().path }}" type="video/mp4" />
</video>
{% else %}
{# {{ pimcore_video('spotlightVideo', {
thumbnail: 'content',
attributes: {
'controls': '',
'autoplay':'true',
'loop':'true',
'muted':'',
'preload': 'auto',
'playsinline':'true',
'class': '',
'id':'centricSpotlight',
}
})
}} #}
<video autoplay muted loop playsinline id="centricSpotlight"
poster="{{ pimcore_video('spotlightVideo').getData().poster }}">
<source src="{{ pimcore_video('spotlightVideo').getData().path }}" type="video/mp4" />
</video>
{% endif %}
</div>
{% endif %}
{% endif %}
</div>
</div>
<!--/Hero Section -->