diff --git a/css/style.css b/css/style.css index e1cc116..3585c34 100644 --- a/css/style.css +++ b/css/style.css @@ -1,5 +1,99 @@ @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap'); +/* Hero Section Typewriter Styles - Compressed for Desktop */ +.hero-typewriter-section { + margin: 1.2rem 0; +} + +.hero-subheading { + font-size: 1.4rem; + color: rgba(255, 255, 255, 0.9); + margin-bottom: 0.6rem; + font-weight: 500; + text-align: center; +} + +.typewriter-container { + font-size: 1.8rem; + color: #52eef5; + font-weight: 600; + text-align: center; + min-height: 2.5rem; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 0.8rem; +} + +.hero-supporting-text { + font-size: 1.2rem; + color: rgba(255, 255, 255, 0.8); + line-height: 1.5; + margin: 1.5rem auto; + max-width: 600px; + text-align: center; +} + +/* Hero CTA Buttons - Compact Layout */ +.hero-cta-buttons { + display: flex; + gap: 1.2rem; + justify-content: center; + align-items: center; + margin-top: 1.8rem; + flex-wrap: wrap; +} + +.primary-cta { + background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%); + border: 2px solid rgba(255, 255, 255, 0.2); + color: #ffffff; + padding: 0.8rem 2rem; + font-size: 1.1rem; + font-weight: 600; + border-radius: 10px; + text-decoration: none; + transition: all 0.3s ease; + position: relative; + overflow: hidden; + backdrop-filter: blur(8px); + box-shadow: + 0 6px 24px rgba(109, 40, 217, 0.4), + 0 3px 12px rgba(147, 51, 234, 0.3); +} + +.primary-cta:hover { + transform: translateY(-2px) scale(1.03); + background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%); + border-color: rgba(255, 255, 255, 0.5); + box-shadow: + 0 10px 32px rgba(109, 40, 217, 0.6), + 0 5px 16px rgba(147, 51, 234, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.3); + text-shadow: 0 0 6px rgba(255, 255, 255, 0.4); +} + +.secondary-cta { + background: transparent; + border: 2px solid #52eef5; + color: #52eef5; + padding: 0.8rem 2rem; + font-size: 1.1rem; + font-weight: 600; + border-radius: 10px; + text-decoration: none; + transition: all 0.3s ease; + backdrop-filter: blur(8px); +} + +.secondary-cta:hover { + background: rgba(82, 238, 245, 0.1); + color: #ffffff; + border-color: #ffffff; + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(82, 238, 245, 0.3); +} + /* Page loading transitions & FOUC prevention */ html.no-js { visibility: hidden; @@ -1234,8 +1328,8 @@ section h2 { width: 100%; margin: 0; overflow: hidden; - height: 80vh; - min-height: 600px; + height: 70vh; + min-height: 500px; background: none; /* Ensure visible during page load */ visibility: visible !important; @@ -1250,7 +1344,7 @@ section h2 { height: 100%; align-items: center; justify-content: center; - padding: 10rem 4% 2rem 4%; + padding: 8rem 4% 1.5rem 4%; /* Ensure consistent display */ visibility: visible !important; } @@ -1273,10 +1367,10 @@ section h2 { } .hero-content h1 { - font-size: 6rem; + font-size: 4.5rem; line-height: 1.1; - margin-bottom: 1.5rem; - letter-spacing: 2px; + margin-bottom: 1rem; + letter-spacing: 1.5px; font-weight: 20; position: relative; text-shadow: none !important; diff --git a/index.html b/index.html index e262a4a..4c2d02d 100644 --- a/index.html +++ b/index.html @@ -241,9 +241,18 @@
-

AI SERVICES
AND SOLUTIONS

-

Inventing the future, powered by intelligence: We unlock the infinite potential of artificial intelligence to create groundbreaking solutions that anticipate tomorrow's needs.

- Get Started +

We Turn Ideas Into AI-Powered Reality

+
+

We deliver:

+
+ AI Strategy & Roadmaps +
+
+

Your partner in building intelligent, scalable AI systems that drive innovation and growth.

+
@@ -724,13 +733,20 @@ const speed = this.isDeleting ? this.deleteSpeed : this.typeSpeed; setTimeout(() => this.type(), speed); } - } - - // Initialize when page loads + } // Initialize when page loads document.addEventListener('DOMContentLoaded', function() { const typewriterElement = document.getElementById('typewriter'); - const words = ['SOLUTIONS', 'GENERATIVE AI', 'AUTOMATION FLOWS', 'AGENTIC AI']; - new TypewriterEffect(typewriterElement, words); + const words = [ + 'AI Strategy & Roadmaps', + 'Custom LLM Solutions', + 'AI Automation & Workflows', + 'Data-Driven Business Intelligence', + 'Computer Vision Systems', + 'NLP & Chatbot Integrations', + 'AI for EdTech & Healthcare', + 'Predictive Analytics Tools' + ]; + new TypewriterEffect(typewriterElement, words); }); // EMERGENCY: Direct hamburger menu toggle function diff --git a/js/typewriter-effect.js b/js/typewriter-effect.js new file mode 100644 index 0000000..0617cfd --- /dev/null +++ b/js/typewriter-effect.js @@ -0,0 +1,78 @@ +// Typewriter effect for hero section +class TypewriterEffect { + constructor(element, words, options = {}) { + this.element = element; + this.words = words; + this.speed = options.speed || 100; + this.deleteSpeed = options.deleteSpeed || 50; + this.pauseBetweenWords = options.pauseBetweenWords || 2000; + this.pauseBeforeDelete = options.pauseBeforeDelete || 1500; + this.currentWordIndex = 0; + this.currentText = ''; + this.isDeleting = false; + this.cursor = document.querySelector('.cursor'); + + this.start(); + } + + start() { + this.type(); + } + + type() { + const currentWord = this.words[this.currentWordIndex]; + + if (this.isDeleting) { + // Remove character + this.currentText = currentWord.substring(0, this.currentText.length - 1); + } else { + // Add character + this.currentText = currentWord.substring(0, this.currentText.length + 1); + } + + this.element.textContent = this.currentText; + + let delay = this.speed; + + if (this.isDeleting) { + delay = this.deleteSpeed; + } + + // If word is complete + if (!this.isDeleting && this.currentText === currentWord) { + delay = this.pauseBeforeDelete; + this.isDeleting = true; + } else if (this.isDeleting && this.currentText === '') { + this.isDeleting = false; + this.currentWordIndex = (this.currentWordIndex + 1) % this.words.length; + delay = this.pauseBetweenWords; + } + + setTimeout(() => this.type(), delay); + } +} + +// Initialize typewriter effect when DOM is loaded +document.addEventListener('DOMContentLoaded', function() { + const typewriterElement = document.getElementById('typewriter'); + + if (typewriterElement) { + const services = [ + 'AI Strategy & Roadmaps', + 'Custom LLM Solutions', + 'AI Automation & Workflows', + 'Data-Driven Business Intelligence', + 'Computer Vision Systems', + 'NLP & Chatbot Integrations', + 'AI for EdTech & Healthcare', + 'Predictive Analytics Tools' + ]; + + new TypewriterEffect(typewriterElement, services, { + speed: 80, + deleteSpeed: 40, + pauseBetweenWords: 500, + pauseBeforeDelete: 2000 + }); + } +});