259 lines
8.1 KiB
Plaintext
259 lines
8.1 KiB
Plaintext
{% assign color = color | default: "#3d0456" %}
|
|
{% assign text_en_US = text_en_US | default: "" %}
|
|
{% assign text_es = text_es | default: "" %}
|
|
{% assign text_fr = text_fr | default: "" %}
|
|
{% assign text_de = text_de | default: "" %}
|
|
{% assign text_en_GB = text_en_GB | default: "" %}
|
|
{% assign text_nl = text_nl | default: "" %}
|
|
{% assign text_pt_BR = text_pt_BR | default: "" %}
|
|
{% assign button_text_en_US = button_text_en_US | default: "" %}
|
|
{% assign button_text_es = button_text_es | default: "" %}
|
|
{% assign button_text_fr = button_text_fr | default: "" %}
|
|
{% assign button_text_de = button_text_de | default: "" %}
|
|
{% assign button_text_en_GB = button_text_en_GB | default: "" %}
|
|
{% assign button_text_nl = button_text_nl | default: "" %}
|
|
{% assign button_text_pt_BR = button_text_pt_BR | default: "" %}
|
|
{% assign button_link = button_link | default: "" %}
|
|
{% assign subtitle_en_US = subtitle_en_US | default: "" %}
|
|
{% assign subtitle_es = subtitle_es | default: "" %}
|
|
{% assign subtitle_fr = subtitle_fr | default: "" %}
|
|
{% assign subtitle_de = subtitle_de | default: "" %}
|
|
{% assign subtitle_en_GB = subtitle_en_GB | default: "" %}
|
|
{% assign subtitle_nl = subtitle_nl | default: "" %}
|
|
{% assign subtitle_pt_BR = subtitle_pt_BR | default: "" %}
|
|
{% assign text_color = text_color | default: "white" %}
|
|
<div class="nintex-homepage-hero">
|
|
<div class="nintex-header-animation">
|
|
<div class="nintex-lines-animation">
|
|
<svg viewBox="0 0 5392 393" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M1.09229 380.193C256.031 398.471 485.518 390.369 880.247 185.382C1106.65 67.8087 1461.65 -152.288 2122.03 187.076C2244.01 249.758 2521.84 361.57 2696.34 380.205M2696 380.193C2950.94 398.471 3180.43 390.369 3575.15 185.382C3801.56 67.8087 4156.56 -152.288 4816.94 187.076C4938.92 249.758 5216.75 361.57 5391.24 380.205"
|
|
stroke="red" stroke-width="5.5" stroke-miterlimit="10"></path>
|
|
</svg>
|
|
<svg viewBox="0 0 5392 393" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M1.09229 380.193C256.031 398.471 485.518 390.369 880.247 185.382C1106.65 67.8087 1461.65 -152.288 2122.03 187.076C2244.01 249.758 2521.84 361.57 2696.34 380.205M2696 380.193C2950.94 398.471 3180.43 390.369 3575.15 185.382C3801.56 67.8087 4156.56 -152.288 4816.94 187.076C4938.92 249.758 5216.75 361.57 5391.24 380.205"
|
|
stroke="red" stroke-width="5.5" stroke-miterlimit="10"></path>
|
|
</svg>
|
|
<svg viewBox="0 0 5392 393" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M1.09229 380.193C256.031 398.471 485.518 390.369 880.247 185.382C1106.65 67.8087 1461.65 -152.288 2122.03 187.076C2244.01 249.758 2521.84 361.57 2696.34 380.205M2696 380.193C2950.94 398.471 3180.43 390.369 3575.15 185.382C3801.56 67.8087 4156.56 -152.288 4816.94 187.076C4938.92 249.758 5216.75 361.57 5391.24 380.205"
|
|
stroke="red" stroke-width="5.5" stroke-miterlimit="10"></path>
|
|
</svg>
|
|
|
|
</div>
|
|
<div class="nintex-orbs-animation-wrapper nintex-container">
|
|
<div class="nintex-orbs-animation">
|
|
<div class="nintex-orbs-animation__orb"></div>
|
|
<div class="nintex-orbs-animation__orb"></div>
|
|
<div class="nintex-orbs-animation__orb"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="nintex-header-gradient"></div>
|
|
<div class="header-content">
|
|
<h1>
|
|
<span class="lang-en-US">{{ text_en_US }}</span>
|
|
<span class="lang-es">{{ text_es }}</span>
|
|
<span class="lang-fr">{{ text_fr }}</span>
|
|
<span class="lang-de">{{ text_de }}</span>
|
|
<span class="lang-en-GB">{{ text_en_GB }}</span>
|
|
<span class="lang-nl">{{ text_nl }}</span>
|
|
<span class="lang-pt-BR">{{ text_pt_BR }}</span>
|
|
</h1>
|
|
{% if subtitle_en_US != "" %}
|
|
<p class="nintex-hero-subtitle">
|
|
<span class="lang-en-US">{{ subtitle_en_US }}</span>
|
|
<span class="lang-es">{{ subtitle_es }}</span>
|
|
<span class="lang-fr">{{ subtitle_fr }}</span>
|
|
<span class="lang-de">{{ subtitle_de }}</span>
|
|
<span class="lang-en-GB">{{ subtitle_en_GB }}</span>
|
|
<span class="lang-nl">{{ subtitle_nl }}</span>
|
|
<span class="lang-pt-BR">{{ subtitle_pt_BR }}</span>
|
|
</p>
|
|
{% endif %}
|
|
{% if button_text_en_US != "" %}
|
|
<a href="{{ button_link }}" target="_blank" class="nintex-hero-button">
|
|
<span class="lang-en-US">{{ button_text_en_US }}</span>
|
|
<span class="lang-es">{{ button_text_es }}</span>
|
|
<span class="lang-fr">{{ button_text_fr }}</span>
|
|
<span class="lang-de">{{ button_text_de }}</span>
|
|
<span class="lang-en-GB">{{ button_text_en_GB }}</span>
|
|
<span class="lang-nl">{{ button_text_nl }}</span>
|
|
<span class="lang-pt-BR">{{ button_text_pt_BR }}</span>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
</div>
|
|
<style>
|
|
@keyframes nintex-wave {
|
|
0% {
|
|
transform: translateX(0)
|
|
}
|
|
|
|
to {
|
|
transform: translateX(-50%)
|
|
}
|
|
}
|
|
|
|
@keyframes nintex-wave-reverse {
|
|
0% {
|
|
transform: translateX(-50%)
|
|
}
|
|
|
|
to {
|
|
transform: translateX(0)
|
|
}
|
|
}
|
|
|
|
@keyframes floating {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(10%);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.nintex-homepage-hero {
|
|
background-color: {{ color }};
|
|
color: {{ text_color }};
|
|
height: 400px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nintex-header-animation {
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 50px;
|
|
}
|
|
|
|
.nintex-lines-animation {
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
.nintex-lines-animation svg {
|
|
opacity: .2;
|
|
left: 0;
|
|
position: absolute;
|
|
width: 400%;
|
|
}
|
|
|
|
.nintex-lines-animation svg:nth-child(1) {
|
|
animation: nintex-wave 28s linear infinite;
|
|
top: 24px;
|
|
}
|
|
|
|
.nintex-lines-animation svg:nth-child(2) {
|
|
animation: nintex-wave-reverse 38s linear infinite;
|
|
top: -40px;
|
|
}
|
|
|
|
.nintex-lines-animation svg:nth-child(3) {
|
|
animation: nintex-wave 48s linear infinite;
|
|
top: -20px;
|
|
}
|
|
|
|
.nintex-lines-animation svg path {
|
|
stroke: white;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.nintex-lines-animation svg {
|
|
width: 200%;
|
|
}
|
|
}
|
|
|
|
.nintex-orbs-animation-wrapper {
|
|
height: 100%;
|
|
position: absolute;
|
|
right: 50%;
|
|
top: 0;
|
|
translate: 50% 0;
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
.nintex-orbs-animation {
|
|
aspect-ratio: 1 / 1;
|
|
height: 100%;
|
|
max-height: 684px;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
right: 28%;
|
|
top: -20px;
|
|
}
|
|
.nintex-orbs-animation__orb {
|
|
animation: floating 7s ease 0s infinite;
|
|
height: 50%;
|
|
min-height: 345px;
|
|
min-width: 345px;
|
|
position: absolute;
|
|
width: 50%;
|
|
background: radial-gradient(50% 50% at 50% 50%, rgba(var(--orb-rgb), var(--orb-alpha)) 0, rgba(var(--orb-rgb), calc(var(--orb-alpha) * .987)) 8.1%, rgba(var(--orb-rgb), calc(var(--orb-alpha) * .951)) 15.5%, rgba(var(--orb-rgb), calc(var(--orb-alpha) * .55)) 47.1%, rgba(var(--orb-rgb), calc(var(--orb-alpha) * .45)) 52.9%, rgba(var(--orb-rgb), calc(var(--orb-alpha) * .049)) 84.5%, rgba(var(--orb-rgb), calc(var(--orb-alpha) * .013)) 91.9%, rgba(var(--orb-rgb), 0) 100%);
|
|
|
|
}
|
|
.nintex-orbs-animation__orb:nth-of-type(1){
|
|
--orb-rgb: 132, 57, 166;
|
|
--orb-alpha: 0.9;
|
|
left: -100px;
|
|
top: -75px;
|
|
}
|
|
.nintex-orbs-animation__orb:nth-of-type(2){
|
|
--orb-rgb: 255, 109, 0;
|
|
--orb-alpha: 0.7;
|
|
animation-delay:1s;
|
|
left: 100px;
|
|
top: 50px;
|
|
|
|
}
|
|
.nintex-orbs-animation__orb:nth-of-type(3){
|
|
--orb-alpha: 0.7;
|
|
--orb-rgb: 237, 40, 145;
|
|
animation-delay:2s;
|
|
left: 50px;
|
|
top: -100px;
|
|
}
|
|
|
|
.nintex-header-gradient {
|
|
background: linear-gradient(90deg, {{ color }}, {{ color }} 50%, rgba(61, 4, 86, 0));
|
|
position: absolute;
|
|
z-index: 2;
|
|
width: 50%;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.nintex-hero-button {
|
|
background-color: {{ text_color }};
|
|
color: {{ color }};
|
|
padding: 10px 20px;
|
|
border-radius: 5px;
|
|
text-decoration: none;
|
|
display: block;
|
|
width: fit-content;
|
|
margin: 50px auto 0 auto;
|
|
transition: 0.3s ease;
|
|
}
|
|
|
|
.nintex-hero-button:hover {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
.nintex-hero-subtitle{
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
</style> |