84 lines
3.0 KiB
HTML
84 lines
3.0 KiB
HTML
{% set title = title | default(value="") %}
|
|
{% set title_part_1 = title_part_1 | default(value="") %}
|
|
{% set title_part_2 = title_part_2 | default(value="") %}
|
|
{% set title_part_3 = title_part_3 | default(value="") %}
|
|
{% set title_part_4 = title_part_4 | default(value="") %}
|
|
{% set title_part_5 = title_part_5 | default(value="") %}
|
|
{% set image_src = image_src | default(value="") %}
|
|
{% set image_alt = image_alt | default(value="") %}
|
|
{% set button_text = button_text | default(value="") %}
|
|
{% set button_link = button_link | default(value="") %}
|
|
|
|
<div class="fade-in relative isolate overflow-hidden py-12 lg:py-24 lg:h-screen">
|
|
<div class="mx-auto max-w-7xl lg:col-span-2 px-4 lg:flex lg:gap-x-2 lg:px-8">
|
|
<div class="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8">
|
|
<h1 class="mt-10">
|
|
{{ title }}
|
|
<span id="slides" class="slides"></span>
|
|
</h1>
|
|
<div id="learn-more" class="lg:mt-10 mt-4 flex items-center gap-x-6">
|
|
<a href="{{ button_link }}" target="_blank" class="text-xl font-semibold text-black hover:text-gray-500">
|
|
{{ button_text }} <span aria-hidden="true">→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="mx-auto flex max-w-5xl lg:mt-12 mt-0 lg:mr-0 lg:ml-5 lg:max-w-none lg:flex-none">
|
|
<div class="max-w-3xl flex-none lg:max-w-5xl">
|
|
<img src="{{ image_src }}" alt="{{ image_alt }}" width="2432" height="1442" class="lg:w-[66rem] w-[25rem]">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const phrases = [
|
|
"{{ title_part_1 }}",
|
|
"{{ title_part_2 }}",
|
|
"{{ title_part_3 }}",
|
|
"{{ title_part_4 }}",
|
|
"{{ title_part_5 }}" // Final phrase
|
|
];
|
|
|
|
let index = 0;
|
|
const slideElement = document.getElementById("slides");
|
|
const learnMoreElement = document.getElementById("learn-more");
|
|
|
|
function typeText(text, i, callback) {
|
|
if (i < text.length) {
|
|
slideElement.textContent += text.charAt(i);
|
|
setTimeout(() => typeText(text, i + 1, callback), 100);
|
|
} else {
|
|
setTimeout(callback, 500);
|
|
}
|
|
}
|
|
|
|
function deleteText(callback) {
|
|
let text = slideElement.textContent;
|
|
if (text.length > 0) {
|
|
slideElement.textContent = text.substring(0, text.length - 1);
|
|
setTimeout(() => deleteText(callback), 50);
|
|
} else {
|
|
setTimeout(callback, 500);
|
|
}
|
|
}
|
|
|
|
function cyclePhrases() {
|
|
if (index < phrases.length - 1) {
|
|
typeText(phrases[index], 0, () => {
|
|
deleteText(() => {
|
|
index++;
|
|
cyclePhrases();
|
|
});
|
|
});
|
|
} else {
|
|
typeText(phrases[index], 0, () => {
|
|
learnMoreElement.classList.remove("hidden"); // Show "Learn more"
|
|
});
|
|
}
|
|
}
|
|
|
|
cyclePhrases(); // Start the loop
|
|
});
|
|
</script>
|
|
|