Type Writer Effect

<div class="container flex flex-col my-8 lg:flex-row lg:my-16 lg:space-x-12">

		<main class="lg:w-2/3">
<style>
h1  {
  font-family: "Ubuntu Mono", system-ui;
  font-weight: 400;
  font-style: normal;
padding-top:4em;
text-align: center
}

</style>
			<article class="copy">
			<h1>Easily create guides by grouping your documentation</h1>
<script>
    document.addEventListener('DOMContentLoaded', function () {
    const paragraphs = document.querySelectorAll('h1'); // Select all elements with the class 'p'

    paragraphs.forEach(function (paragraph) {
        const text = paragraph.textContent; // Get the original text
        paragraph.textContent = ''; // Clear the text content initially
        let index = 0;

        function typeWriter() {
            if (index < text.length) {
                paragraph.textContent += text.charAt(index); // Add one character at a time
                index++;
                setTimeout(typeWriter, 100); // Adjust speed (in milliseconds, 100ms here)
            }
        }

        typeWriter(); // Start the typing effect
    });
});
</script>
			</article>
		</main>
		{# <aside class="bg-gray-100 lg:w-1/3">
			{% include "_views/_components/sidebar--blog.twig" %}
		</aside> #}

	</div>

{% endblock %}