From 5a3bca2c11ba05e8cf2f60b771fe2f9616d45392 Mon Sep 17 00:00:00 2001
From: Kaivalaya Dua <kevindua26@gmail.com>
Date: Sat, 19 Oct 2024 15:33:40 +0530
Subject: [PATCH] Add Animation

---
 index.html | 34 ++++++++++++++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 7a37ca43..ab7758b7 100644
--- a/index.html
+++ b/index.html
@@ -3301,8 +3301,38 @@ <h1 class="rating_heading">Rate Us</h1>
         <div class="container">
 
           <div class="hero-content">
-            <p class="section-subtitle"> Let's Exchange Old Books and Discover New Stories Together!</p>      
-            <h1 class="h1 hero-title" style="color: var(--text-color);">SwapReads.com - Where Books Find New Adventures!</h1>
+            <p class="section-subtitle"> Let's Exchange Old Books and Discover New Stories Together!</p>
+            <h1 class="h1 hero-title" id="h1-hero-title" style="color: var(--text-color);">SwapReads.com - Where Books Find New Adventures!</h1>
+            <h1 class="h1 hero-title" id="h1-hero-title-1" style="color: var(--text-color);"></h1>
+            <script>
+                const h1Typing = document.getElementById('h1-hero-title');
+                const h1Text = h1Typing.textContent;
+                h1Typing.textContent = '';
+                let i = 0;
+                function typing() {
+                if (i < h1Text.length) {
+                  h1Typing.textContent += h1Text.charAt(i);
+                  i++;
+                  setTimeout(typing, 100);
+                } else {
+                  h1Typing.classList.add('blinking-cursor');
+                }
+                }
+                typing();
+                
+                // Add CSS for blinking cursor
+                const style = document.createElement('style');
+                style.innerHTML = `
+                .blinking-cursor::after {
+                  content: '|';
+                  animation: blink 1s step-end infinite;
+                }
+                @keyframes blink {
+                  from, to { opacity: 1; }
+                  50% { opacity: 0; }
+                }`;
+                document.head.appendChild(style);
+            </script>
             <p class="section-text " >
               Join SwapReads.com, the ultimate online community for book enthusiasts! Create your profile, list your
               favorite reads, and embark on   literary journeys by swapping books with fellow passionate readers. Discover