Update website styles and fix responsive design
This commit is contained in:
106
css/style.css
106
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;
|
||||
|
||||
32
index.html
32
index.html
@@ -241,9 +241,18 @@
|
||||
<div class="hero-overlay"></div>
|
||||
|
||||
<div class="hero-container"> <div class="hero-content">
|
||||
<h1>AI SERVICES<br />AND <span class="typewriter-text" id="typewriter">SOLUTIONS</span><span class="cursor"></span></h1>
|
||||
<p>Inventing the future, powered by intelligence: We unlock the infinite potential of artificial intelligence to create groundbreaking solutions that anticipate tomorrow's needs.</p>
|
||||
<a href="contact.html" class="btn-primary">Get Started</a>
|
||||
<h1>We Turn Ideas Into AI-Powered Reality</h1>
|
||||
<div class="hero-typewriter-section">
|
||||
<p class="hero-subheading">We deliver:</p>
|
||||
<div class="typewriter-container">
|
||||
<span class="typewriter-text" id="typewriter">AI Strategy & Roadmaps</span><span class="cursor"></span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="hero-supporting-text">Your partner in building intelligent, scalable AI systems that drive innovation and growth.</p>
|
||||
<div class="hero-cta-buttons">
|
||||
<a href="contact.html" class="btn-primary primary-cta">Book a Free Consultation</a>
|
||||
<a href="Industries/case-studies.html" class="btn-secondary secondary-cta">See Our Work</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section><!-- TECHNOLOGIES -->
|
||||
@@ -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
|
||||
|
||||
78
js/typewriter-effect.js
Normal file
78
js/typewriter-effect.js
Normal file
@@ -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
|
||||
});
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user