feat: Implement dynamic typing animation for the home page hero title and customize the footer template.

custom/public/assets/css/oribi.css

@@ -59,6 +59,55 @@ footer {
     -webkit-text-fill-color: transparent;
 }
 
+.orange-heart {
+    color: var(--custom-primary) !important;
+    background: none !important;
+    -webkit-background-clip: unset !important;
+    background-clip: unset !important;
+    -webkit-text-fill-color: var(--custom-primary) !important;
+    display: inline-block;
+    filter: drop-shadow(0 0 5px rgba(208, 64, 0, 0.8));
+    text-shadow: none !important;
+    margin-left: 0.3ch;
+}
+
+.orange-heart::after,
+.orange-heart::before {
+    content: none !important;
+    display: none !important;
+}
+
+@keyframes cursor-blink {
+
+    from,
+    to {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0;
+    }
+}
+
+.typing-text {
+    display: inline-block;
+    position: relative;
+}
+
+/* Blinking cursor that moves with the text */
+.typing-text::after {
+    content: "";
+    display: inline-block;
+    width: 2px;
+    height: 1.1em;
+    background-color: var(--custom-primary);
+    animation: cursor-blink 1s step-end infinite;
+    box-shadow: 0 0 8px var(--custom-primary);
+    margin-left: 2px;
+    vertical-align: middle;
+    transform: translateY(-0.05em);
+}
+
 .hero-subtitle {
     font-size: 1.5rem;
     color: #888;

custom/public/assets/js/typing-animation.js

@@ -0,0 +1,54 @@
+// Typing animation for hero title
+(function () {
+    const typingElement = document.querySelector('.typing-text');
+    if (!typingElement) return;
+
+    // Apply gradient styling
+    typingElement.style.background = 'linear-gradient(135deg, #fff, #ccc)';
+    typingElement.style.webkitBackgroundClip = 'text';
+    typingElement.style.backgroundClip = 'text';
+    typingElement.style.webkitTextFillColor = 'transparent';
+
+    const names = ['Oribi Tech', 'OTS Signs'];
+    let currentNameIndex = 0;
+    let currentCharIndex = 0;
+    let isDeleting = false;
+    let isPaused = false;
+
+    function type() {
+        const currentName = names[currentNameIndex];
+
+        if (isPaused) {
+            setTimeout(type, 2000); // Pause for 2 seconds
+            isPaused = false;
+            return;
+        }
+
+        if (isDeleting) {
+            // Erase character
+            currentCharIndex--;
+            typingElement.textContent = currentName.substring(0, currentCharIndex);
+
+            if (currentCharIndex === 0) {
+                isDeleting = false;
+                currentNameIndex = (currentNameIndex + 1) % names.length;
+                setTimeout(type, 500); // Pause before typing next name
+                return;
+            }
+            setTimeout(type, 50); // Erasing speed
+        } else {
+            // Type character
+            currentCharIndex++;
+            typingElement.textContent = currentName.substring(0, currentCharIndex);
+
+            if (currentCharIndex === currentName.length) {
+                isPaused = true;
+                isDeleting = true;
+            }
+            setTimeout(type, isDeleting ? 2000 : 100); // Typing speed
+        }
+    }
+
+    // Start the animation
+    type();
+})();