naman_panwar_gnpl/Gyannetra_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update corporate training workflow and animation improvements

Browse Source 
- Replace 'Innovate with us' with 'Assessment of current skillset' in corporate training workflow
- Adjust tech cards animation speed (5s to 8s duration)
- Reduce testimonials section spacing and container height
- Add hover pause functionality for tech and testimonial marquees
- Various layout and animation optimizations
This commit is contained in:
ectasy663
2025-06-04 22:20:54 +05:30
parent 67c46fedb4
commit 274c5c30f2
17 changed files with 350 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
Education/corporate-trainings.html
View File

@@ -23,9 +23,8 @@
<nav class="navbar"> <a href="../index.html" class="logo"> <nav class="navbar"> <a href="../index.html" class="logo">
<img src="../assets/Company Icons/GN logo with banner.svg" alt="Gyannetra Logo" class="logo-img" class="gn-responsive-image"> <img src="../assets/Company Icons/GN logo with banner.svg" alt="Gyannetra Logo" class="logo-img" class="gn-responsive-image">
</a> </a>
<!-- Hamburger menu button for mobile -->
<!-- Hamburger menu button for mobile --> <button class="hamburger-menu" aria-label="Toggle menu" onclick="toggleMobileMenu(event)">
<button class="hamburger-menu" aria-label="Toggle menu">
<span class="hamburger-line"></span> <span class="hamburger-line"></span>
<span class="hamburger-line"></span> <span class="hamburger-line"></span>
<span class="hamburger-line"></span> <span class="hamburger-line"></span>
@@ -119,7 +118,7 @@
<div class="step-icon"> <div class="step-icon">
<i class="fas fa-search"></i> <i class="fas fa-search"></i>
</div> <div class="step-content"> </div> <div class="step-content">
<h4>Innovate with us</h4> <h4>Assessment of current skillset</h4>
<p>We conduct comprehensive analysis of your current workflows, team capabilities, and business objectives to identify specific training requirements and learning gaps.</p><div class="step-details"> <p>We conduct comprehensive analysis of your current workflows, team capabilities, and business objectives to identify specific training requirements and learning gaps.</p><div class="step-details">
<span>Workflow mapping sessions</span> <span>Workflow mapping sessions</span>
<span>Skill gap analysis</span> <span>Skill gap analysis</span>
@@ -222,10 +221,9 @@
<h3>ROI-Focused Training</h3> <h3>ROI-Focused Training</h3>
<p>Maximize your investment with training that delivers measurable business outcomes and practical implementation skills.</p> </div> <p>Maximize your investment with training that delivers measurable business outcomes and practical implementation skills.</p> </div>
</div> </div>
<div class="transform-cta-buttons">
<div class="transform-cta-buttons">
<a href="mailto:education@gyannetra.com" class="btn-primary workflow-cta-btn gn-mobile-button">Request a Custom Training Proposal</a> <a href="mailto:education@gyannetra.com" class="btn-primary workflow-cta-btn gn-mobile-button">Request a Custom Training Proposal</a>
<a href="../contact.html" class="btn-primary workflow-cta-btn gn-mobile-button">Get In Touch</a> <a href="https://schedule.fillout.com/t/3XsBwh8ipfus" class="btn-primary workflow-cta-btn gn-mobile-button" target="_blank" rel="noopener noreferrer">Get In Touch</a>
</div> </div>
</div> </div>
</div> </div>
@@ -261,8 +259,7 @@
<a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a> <a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a>
</div> </div>
</div> </div>
<div class="footer-col">
<div class="footer-col">
<h3>Contact Us</h3> <h3>Contact Us</h3>
<ul> <ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li> <li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
@@ -270,10 +267,9 @@
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li> <li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul> </ul>
</div> </div>
</div> </div>
</div> <div class="footer-bottom">
</div> <div class="footer-bottom">
<p>&copy; 2025 Gyannetra. All rights reserved. | <a href="../privacy-policy.html">Privacy Policy</a> | <a href="../terms-of-service.html">Terms and Conditions</a></p> <p>&copy; 2025 Gyannetra. All rights reserved. | <a href="../privacy-policy.html">Privacy Policy</a> | <a href="../terms-of-service.html">Terms and Conditions</a></p>
</div> </div>
</div> </div>

19
Education/individual-trainings.html
View File

@@ -21,9 +21,8 @@
<a href="../index.html" class="logo"> <a href="../index.html" class="logo">
<img src="../assets/Company Icons/GN logo with banner.svg" alt="Gyannetra Logo" class="logo-img" class="gn-responsive-image"> <img src="../assets/Company Icons/GN logo with banner.svg" alt="Gyannetra Logo" class="logo-img" class="gn-responsive-image">
</a> </a>
<!-- Hamburger menu button for mobile -->
<!-- Hamburger menu button for mobile --> <button class="hamburger-menu" aria-label="Toggle menu" onclick="toggleMobileMenu(event)">
<button class="hamburger-menu" aria-label="Toggle menu">
<span class="hamburger-line"></span> <span class="hamburger-line"></span>
<span class="hamburger-line"></span> <span class="hamburger-line"></span>
<span class="hamburger-line"></span> <span class="hamburger-line"></span>
@@ -587,8 +586,7 @@
<a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a> <a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a>
</div> </div>
</div> </div>
<div class="footer-col">
<div class="footer-col">
<h3>Contact Us</h3> <h3>Contact Us</h3>
<ul> <ul>
<li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li> <li><p><i class="fas fa-map-marker-alt"></i> Pune, Maharashtra, India</p></li>
@@ -596,17 +594,16 @@
<li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li> <li><p><i class="fas fa-envelope"></i> <a href="mailto:info@gyannetra.com">info@gyannetra.com</a></p></li>
</ul> </ul>
</div> </div>
</div> </div>
</div> <div class="footer-bottom">
</div> <div class="footer-bottom">
<p>&copy; 2025 Gyannetra. All rights reserved. | <a href="../privacy-policy.html">Privacy Policy</a> | <a href="../terms-of-service.html">Terms and Conditions</a></p> <p>&copy; 2025 Gyannetra. All rights reserved. | <a href="../privacy-policy.html">Privacy Policy</a> | <a href="../terms-of-service.html">Terms and Conditions</a></p>
</div> </div>
</div> </div>
</footer> </footer> <script src="../js/main.js" defer></script>
<script src="../js/main.js" defer></script>
<script src="../js/menu-dropdown.js" defer></script> <script src="../js/menu-dropdown.js" defer></script>
<script src="../js/tech-marquee.js" defer></script> <script src="../js/tech-marquee.js" defer></script>
<script src="../js/testimonials-marquee.js" defer></script>
</body> </body>
</html> </html>

21
Education/workshops.html
View File

@@ -23,9 +23,8 @@
<a href="../index.html" class="logo"> <a href="../index.html" class="logo">
<img src="../assets/Company Icons/GN logo with banner.svg" alt="Gyannetra Logo" class="logo-img" class="gn-responsive-image"> <img src="../assets/Company Icons/GN logo with banner.svg" alt="Gyannetra Logo" class="logo-img" class="gn-responsive-image">
</a> </a>
<!-- Hamburger menu button for mobile -->
<!-- Hamburger menu button for mobile --> <button class="hamburger-menu" aria-label="Toggle menu" onclick="toggleMobileMenu(event)">
<button class="hamburger-menu" aria-label="Toggle menu">
<span class="hamburger-line"></span> <span class="hamburger-line"></span>
<span class="hamburger-line"></span> <span class="hamburger-line"></span>
<span class="hamburger-line"></span> <span class="hamburger-line"></span>
@@ -69,7 +68,9 @@
</nav> </header> <main> <section class="hero-section gn-responsive-container"> </nav> </header> <main> <section class="hero-section gn-responsive-container">
<h1>Free AI Webinars</h1> <h1>Free AI Webinars</h1>
<p>Supercharge your AI journey with expert-led live sessions and our rich library of past webinars — all designed to transform your skills from basics to mastery.</p> <p>Supercharge your AI journey with expert-led live sessions and our rich library of past webinars — all designed to transform your skills from basics to mastery.</p>
<a href="https://wa.me/918949135299" class="btn btn-primary">Chat With AI Experts</a> </section> <a href="https://wa.me/918949135299" class="btn btn-primary">
<i class="fab fa-whatsapp"></i> Get Free AI Consultation
</a> </section>
<!-- Upcoming Webinars Section --> <!-- Upcoming Webinars Section -->
<section class="upcoming-webinars-section"> <section class="upcoming-webinars-section">
@@ -96,8 +97,7 @@
Dive deep into the world of Generative AI, exploring cutting-edge models like GPT, DALL-E, and their real-world applications. Learn how to implement these technologies in your business workflows. Dive deep into the world of Generative AI, exploring cutting-edge models like GPT, DALL-E, and their real-world applications. Learn how to implement these technologies in your business workflows.
</p> </p>
<div class="webinar-takeaways"> <div class="webinar-takeaways">
<h4>Key Takeaways:</h4> <h4>Key Takeaways:</h4> <ul>
<ul>
<li>Understanding Transformer architecture and attention mechanisms</li> <li>Understanding Transformer architecture and attention mechanisms</li>
<li>Hands-on experience with OpenAI API integration</li> <li>Hands-on experience with OpenAI API integration</li>
<li>Best practices for prompt engineering and optimization</li> <li>Best practices for prompt engineering and optimization</li>
@@ -106,7 +106,6 @@
</div> </div>
<div class="webinar-actions"> <div class="webinar-actions">
<a href="#" class="btn-primary register-btn" class="btn-primary gn-mobile-button">Register Now</a> <a href="#" class="btn-primary register-btn" class="btn-primary gn-mobile-button">Register Now</a>
<a href="#" class="btn-secondary add-calendar-btn">Add to Calendar</a>
</div> </div>
</div> </div>
</div> </div>
@@ -127,8 +126,7 @@
Transform your business data into actionable insights using machine learning algorithms. This session covers practical applications of ML in business decision-making and strategic planning. Transform your business data into actionable insights using machine learning algorithms. This session covers practical applications of ML in business decision-making and strategic planning.
</p> </p>
<div class="webinar-takeaways"> <div class="webinar-takeaways">
<h4>Key Takeaways:</h4> <h4>Key Takeaways:</h4> <ul>
<ul>
<li>Predictive analytics for sales forecasting and customer behavior</li> <li>Predictive analytics for sales forecasting and customer behavior</li>
<li>Implementing recommendation systems for personalization</li> <li>Implementing recommendation systems for personalization</li>
<li>ROI measurement and KPI tracking for ML initiatives</li> <li>ROI measurement and KPI tracking for ML initiatives</li>
@@ -137,7 +135,6 @@
</div> </div>
<div class="webinar-actions"> <div class="webinar-actions">
<a href="#" class="btn-primary register-btn" class="btn-primary gn-mobile-button">Register Now</a> <a href="#" class="btn-primary register-btn" class="btn-primary gn-mobile-button">Register Now</a>
<a href="#" class="btn-secondary add-calendar-btn">Add to Calendar</a>
</div> </div>
</div> </div>
</div> </div>
@@ -158,8 +155,7 @@
Discover how AI-powered automation can revolutionize your business operations. Learn to identify automation opportunities and implement intelligent workflows that save time and reduce costs. Discover how AI-powered automation can revolutionize your business operations. Learn to identify automation opportunities and implement intelligent workflows that save time and reduce costs.
</p> </p>
<div class="webinar-takeaways"> <div class="webinar-takeaways">
<h4>Key Takeaways:</h4> <h4>Key Takeaways:</h4> <ul>
<ul>
<li>Process mapping and automation opportunity identification</li> <li>Process mapping and automation opportunity identification</li>
<li>RPA vs. Intelligent automation: choosing the right approach</li> <li>RPA vs. Intelligent automation: choosing the right approach</li>
<li>Integration strategies with existing business systems</li> <li>Integration strategies with existing business systems</li>
@@ -168,7 +164,6 @@
</div> </div>
<div class="webinar-actions"> <div class="webinar-actions">
<a href="#" class="btn-primary register-btn" class="btn-primary gn-mobile-button">Register Now</a> <a href="#" class="btn-primary register-btn" class="btn-primary gn-mobile-button">Register Now</a>
<a href="#" class="btn-secondary add-calendar-btn">Add to Calendar</a>
</div> </div>
</div> </div>
</div> </div>

5
Industries/case-studies.html
View File

@@ -24,9 +24,8 @@
<a href="../index.html" class="logo"> <a href="../index.html" class="logo">
<img src="../assets/Company Icons/GN logo with banner.svg" alt="Gyannetra Logo" class="logo-img" class="gn-responsive-image"> <img src="../assets/Company Icons/GN logo with banner.svg" alt="Gyannetra Logo" class="logo-img" class="gn-responsive-image">
</a> </a>
<!-- Hamburger menu button for mobile -->
<!-- Hamburger menu button for mobile --> <button class="hamburger-menu" aria-label="Toggle menu" onclick="toggleMobileMenu(event)">
<button class="hamburger-menu" aria-label="Toggle menu">
<span class="hamburger-line"></span> <span class="hamburger-line"></span>
<span class="hamburger-line"></span> <span class="hamburger-line"></span>
<span class="hamburger-line"></span> <span class="hamburger-line"></span>

5
Industries/marketing.html
View File

@@ -26,9 +26,8 @@
<a href="../index.html" class="logo"> <a href="../index.html" class="logo">
<img src="../assets/Company Icons/GN logo with banner.svg" alt="Gyannetra Logo" class="logo-img" class="gn-responsive-image"> <img src="../assets/Company Icons/GN logo with banner.svg" alt="Gyannetra Logo" class="logo-img" class="gn-responsive-image">
</a> </a>
<!-- Hamburger menu button for mobile -->
<!-- Hamburger menu button for mobile --> <button class="hamburger-menu" aria-label="Toggle menu" onclick="toggleMobileMenu(event)">
<button class="hamburger-menu" aria-label="Toggle menu">
<span class="hamburger-line"></span> <span class="hamburger-line"></span>
<span class="hamburger-line"></span> <span class="hamburger-line"></span>
<span class="hamburger-line"></span> <span class="hamburger-line"></span>

5
Industries/media-entertainment.html
View File

@@ -27,9 +27,8 @@
<a href="../index.html" class="logo"> <a href="../index.html" class="logo">
<img src="../assets/Company Icons/GN logo with banner.svg" alt="Gyannetra Logo" class="logo-img" class="gn-responsive-image"> <img src="../assets/Company Icons/GN logo with banner.svg" alt="Gyannetra Logo" class="logo-img" class="gn-responsive-image">
</a> </a>
<!-- Hamburger menu button for mobile -->
<!-- Hamburger menu button for mobile --> <button class="hamburger-menu" aria-label="Toggle menu" onclick="toggleMobileMenu(event)">
<button class="hamburger-menu" aria-label="Toggle menu">
<span class="hamburger-line"></span> <span class="hamburger-line"></span>
<span class="hamburger-line"></span> <span class="hamburger-line"></span>
<span class="hamburger-line"></span> <span class="hamburger-line"></span>

5
Industries/retail.html
View File

@@ -28,9 +28,8 @@
<a href="../index.html" class="logo"> <a href="../index.html" class="logo">
<img src="../assets/Company Icons/GN logo with banner.svg" alt="Gyannetra Logo" class="logo-img" class="gn-responsive-image"> <img src="../assets/Company Icons/GN logo with banner.svg" alt="Gyannetra Logo" class="logo-img" class="gn-responsive-image">
</a> </a>
<!-- Hamburger menu button for mobile -->
<!-- Hamburger menu button for mobile --> <button class="hamburger-menu" aria-label="Toggle menu" onclick="toggleMobileMenu(event)">
<button class="hamburger-menu" aria-label="Toggle menu">
<span class="hamburger-line"></span> <span class="hamburger-line"></span>
<span class="hamburger-line"></span> <span class="hamburger-line"></span>
<span class="hamburger-line"></span> <span class="hamburger-line"></span>

5
Industries/travel.html
View File

@@ -28,9 +28,8 @@
<a href="../index.html" class="logo"> <a href="../index.html" class="logo">
<img src="../assets/Company Icons/GN logo with banner.svg" alt="Gyannetra Logo" class="logo-img" class="gn-responsive-image"> <img src="../assets/Company Icons/GN logo with banner.svg" alt="Gyannetra Logo" class="logo-img" class="gn-responsive-image">
</a> </a>
<!-- Hamburger menu button for mobile -->
<!-- Hamburger menu button for mobile --> <button class="hamburger-menu" aria-label="Toggle menu" onclick="toggleMobileMenu(event)">
<button class="hamburger-menu" aria-label="Toggle menu">
<span class="hamburger-line"></span> <span class="hamburger-line"></span>
<span class="hamburger-line"></span> <span class="hamburger-line"></span>
<span class="hamburger-line"></span> <span class="hamburger-line"></span>

5
contact.html
View File

@@ -292,11 +292,10 @@
<li><i class="fas fa-envelope"></i>info@gyannetra.com</li> <li><i class="fas fa-envelope"></i>info@gyannetra.com</li>
<li><i class="fas fa-phone"></i>+91 89491-35299</li> <li><i class="fas fa-phone"></i>+91 89491-35299</li>
<li><i class="fas fa-map-marker-alt"></i>Pune, Maharashtra, India</li> <li><i class="fas fa-map-marker-alt"></i>Pune, Maharashtra, India</li>
</ul> </ul> <div class="expert-advice-card">
<div class="expert-advice-card">
<h3>Need Expert Advice?</h3> <h3>Need Expert Advice?</h3>
<p>Schedule a free 30-minute consultation with our AI specialists</p> <p>Schedule a free 30-minute consultation with our AI specialists</p>
<a href="#" class="btn-book-consultation btn-primary" class="btn-primary gn-mobile-button">Book Consultation</a> <a href="https://schedule.fillout.com/t/3XsBwh8ipfus" class="btn-book-consultation btn-primary" class="btn-primary gn-mobile-button" target="_blank" rel="noopener noreferrer">Book Consultation</a>
</div> </div>
</div> </div>
</div> </div>

130
css/components.css
View File

@@ -50,7 +50,7 @@
} }
.hero-content h1 { .hero-content h1 {
font-size: 4.5rem; font-size: 4rem;
line-height: 1.1; line-height: 1.1;
margin-bottom: 1rem; margin-bottom: 1rem;
letter-spacing: 1.5px; letter-spacing: 1.5px;
@@ -114,9 +114,9 @@
} }
.hero-supporting-text { .hero-supporting-text {
font-size: 1.2rem; font-size: 1.3rem;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
line-height: 1.5; line-height: 1.8;
margin: 1.5rem auto; margin: 1.5rem auto;
max-width: 600px; max-width: 600px;
text-align: center; text-align: center;
@@ -298,8 +298,9 @@
.hero-section p, .hero-section p,
#automation-flows-hero p { #automation-flows-hero p {
font-size: 1.45rem; font-size: 1.3rem;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
line-height: 1.8;
} }
.hero-section.gn-responsive-container { .hero-section.gn-responsive-container {
@@ -341,9 +342,9 @@
.industry-hero p { .industry-hero p {
font-family: 'VT323', monospace; font-family: 'VT323', monospace;
font-size: 1.45rem; font-size: 1.3rem;
color: #e0e0e0; color: #e0e0e0;
line-height: 1.6; line-height: 1.8;
margin-bottom: 30px; margin-bottom: 30px;
} }
@@ -480,6 +481,23 @@
transform: none !important; transform: none !important;
transition: none !important; transition: none !important;
} }
/* ===== PREVENT SCROLL ANIMATIONS ON PURPLE BUTTONS GLOBALLY ===== */
/* Disable scroll animations for all purple buttons across all pages */
.btn-primary.animate-on-scroll,
.btn.animate-on-scroll,
button.animate-on-scroll {
opacity: 1 !important;
transform: none !important;
transition: all 0.3s ease !important; /* Keep only hover transitions */
}
.btn-primary.animate-on-scroll.animated,
.btn.animate-on-scroll.animated,
button.animate-on-scroll.animated {
opacity: 1 !important;
transform: none !important;
}
/* ===== TECHNOLOGY CARDS AND ANIMATIONS ===== */ /* ===== TECHNOLOGY CARDS AND ANIMATIONS ===== */
/* ===== TECHNOLOGY SECTION ===== */ /* ===== TECHNOLOGY SECTION ===== */
@@ -532,12 +550,13 @@
.tech-cards-track { .tech-cards-track {
display: flex; display: flex;
animation: techCardsFlow 50s linear infinite; /* Changed from 75s to 50s to make it 1.5x faster */ animation: techCardsFlowFast 8s linear infinite; /* Reduced speed from 5s to 8s */
will-change: transform; will-change: transform;
gap: 70px; gap: 70px;
} }
.tech-cards-track:hover { /* Paused state for hover functionality */
.tech-cards-track.paused {
animation-play-state: paused; animation-play-state: paused;
} }
@@ -550,6 +569,15 @@
} }
} }
@keyframes techCardsFlowFast {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* ===== INDIVIDUAL TECH CARDS ===== */ /* ===== INDIVIDUAL TECH CARDS ===== */
.tech-card { .tech-card {
flex: 0 0 auto; flex: 0 0 auto;
@@ -718,10 +746,10 @@
} }
.tech-card p { .tech-card p {
font-size: 1.1rem; font-size: 1.3rem;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
transition: all 0.3s ease; transition: all 0.3s ease;
line-height: 1.4; line-height: 1.8;
} }
.tech-card:hover p { .tech-card:hover p {
@@ -1504,9 +1532,10 @@ body.contact-page {
} }
.expert-advice-card p { .expert-advice-card p {
font-size: 1.2rem; font-size: 1.3rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
line-height: 1.8;
} }
/* ===== ENHANCED CONTACT INFO STYLING ===== */ /* ===== ENHANCED CONTACT INFO STYLING ===== */
@@ -1767,8 +1796,8 @@ body.contact-page {
.overview-card p { .overview-card p {
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
line-height: 1.7; line-height: 1.8;
font-size: 1.2rem; font-size: 1.3rem;
} }
/* Responsive adjustments */ /* Responsive adjustments */
@@ -1874,7 +1903,7 @@ body.contact-page {
/* ===== CUSTOMER TESTIMONIALS SECTION ===== */ /* ===== CUSTOMER TESTIMONIALS SECTION ===== */
.testimonials-section { .testimonials-section {
padding: 6rem 0; padding: 6rem 0 2rem 0; /* Reduced bottom padding from 6rem to 2rem */
background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(20, 20, 40, 0.3)); background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(20, 20, 40, 0.3));
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@@ -1903,7 +1932,7 @@ body.contact-page {
.testimonials-heading { .testimonials-heading {
text-align: center; text-align: center;
margin-bottom: 4rem; margin-bottom: 2.5rem; /* Reduced from 4rem to 2.5rem */
padding: 0 2rem; padding: 0 2rem;
} }
@@ -1930,11 +1959,11 @@ body.contact-page {
} }
.testimonials-heading p { .testimonials-heading p {
font-size: 1.4rem; font-size: 1.3rem;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
line-height: 1.6; line-height: 1.8;
} }
/* Floating Testimonials Track */ /* Floating Testimonials Track */
@@ -1942,8 +1971,8 @@ body.contact-page {
position: relative; position: relative;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
height: 600px; height: 480px; /* Reduced from 600px to 480px */
margin: 2rem 0; margin: 1rem 0; /* Reduced from 2rem to 1rem */
} }
.testimonials-track { .testimonials-track {
@@ -1956,7 +1985,8 @@ body.contact-page {
left: 0; left: 0;
} }
.testimonials-track:hover { /* Paused state for hover functionality */
.testimonials-track.paused {
animation-play-state: paused; animation-play-state: paused;
} }
@@ -1971,11 +2001,12 @@ body.contact-page {
/* Individual Testimonial Card */ /* Individual Testimonial Card */
.testimonial-card { .testimonial-card {
flex: 0 0 380px; flex: 0 0 600px; /* Increased width for landscape layout */
height: 350px; /* Increased height for bigger cards */
background: linear-gradient(135deg, rgba(25, 35, 55, 0.95) 0%, rgba(35, 45, 65, 0.98) 100%); background: linear-gradient(135deg, rgba(25, 35, 55, 0.95) 0%, rgba(35, 45, 65, 0.98) 100%);
border: 1px solid rgba(82, 238, 245, 0.2); border: 1px solid rgba(82, 238, 245, 0.2);
border-radius: 20px; border-radius: 20px;
padding: 2.5rem; padding: 2rem;
margin: 1rem 0; margin: 1rem 0;
backdrop-filter: blur(15px); backdrop-filter: blur(15px);
box-shadow: box-shadow:
@@ -1984,8 +2015,10 @@ body.contact-page {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
transition: all 0.4s ease; transition: all 0.4s ease;
animation: cardFloat 8s ease-in-out infinite;
animation-delay: var(--delay, 0s); animation-delay: var(--delay, 0s);
display: flex; /* Use flexbox for horizontal layout */
align-items: center;
gap: 2rem;
} }
.testimonial-card:nth-child(1) { --delay: 0s; } .testimonial-card:nth-child(1) { --delay: 0s; }
@@ -1995,21 +2028,6 @@ body.contact-page {
.testimonial-card:nth-child(5) { --delay: 6s; } .testimonial-card:nth-child(5) { --delay: 6s; }
.testimonial-card:nth-child(6) { --delay: 7.5s; } .testimonial-card:nth-child(6) { --delay: 7.5s; }
@keyframes cardFloat {
0%, 100% {
transform: translateY(0px) rotateX(0deg);
}
25% {
transform: translateY(-15px) rotateX(2deg);
}
50% {
transform: translateY(-8px) rotateX(0deg);
}
75% {
transform: translateY(-20px) rotateX(-2deg);
}
}
.testimonial-card::before { .testimonial-card::before {
content: ''; content: '';
position: absolute; position: absolute;
@@ -2050,24 +2068,28 @@ body.contact-page {
/* Customer Info */ /* Customer Info */
.customer-info { .customer-info {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
margin-bottom: 1.5rem; text-align: center;
margin-bottom: 0; /* Remove bottom margin for landscape layout */
position: relative; position: relative;
z-index: 2; z-index: 2;
flex-shrink: 0; /* Prevent shrinking */
min-width: 180px; /* Minimum width for customer info section */
} }
.customer-avatar { .customer-avatar {
width: 60px; width: 80px; /* Slightly larger for landscape layout */
height: 60px; height: 80px;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%); background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #ffffff; color: #ffffff;
font-size: 1.5rem; font-size: 1.8rem;
font-weight: 600; font-weight: 600;
margin-right: 1rem; margin: 0 0 1rem 0; /* Center and add bottom margin */
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3); box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
@@ -2103,13 +2125,17 @@ body.contact-page {
.review-content { .review-content {
position: relative; position: relative;
z-index: 2; z-index: 2;
flex: 1; /* Take remaining space */
display: flex;
flex-direction: column;
justify-content: center;
} }
.review-text { .review-text {
font-size: 1.1rem; font-size: 1.1rem; /* Slightly smaller for landscape layout */
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
line-height: 1.7; line-height: 1.6; /* Reduced line height for better fit */
margin-bottom: 1.5rem; margin-bottom: 1rem; /* Reduced margin */
font-style: italic; font-style: italic;
position: relative; position: relative;
} }
@@ -2176,7 +2202,7 @@ body.contact-page {
@media (max-width: 992px) { @media (max-width: 992px) {
.testimonials-track-container { .testimonials-track-container {
height: 500px; height: 400px; /* Reduced from 500px to 400px */
} }
.testimonial-card { .testimonial-card {
@@ -2191,11 +2217,11 @@ body.contact-page {
@media (max-width: 768px) { @media (max-width: 768px) {
.testimonials-section { .testimonials-section {
padding: 4rem 0; padding: 4rem 0 1.5rem 0; /* Reduced bottom padding for mobile */
} }
.testimonials-track-container { .testimonials-track-container {
height: 450px; height: 350px; /* Reduced from 450px to 350px */
} }
.testimonial-card { .testimonial-card {
@@ -2207,9 +2233,9 @@ body.contact-page {
.testimonials-heading h2 { .testimonials-heading h2 {
font-size: 2.4rem; font-size: 2.4rem;
} }
.testimonials-heading p {
.testimonials-heading p { font-size: 1.3rem;
font-size: 1.2rem; line-height: 1.8;
} }
.customer-info { .customer-info {

95
css/core.css
View File

@@ -413,12 +413,12 @@ section h2 {
} }
.section-intro { .section-intro {
font-size: 1.2rem; font-size: 1.3rem;
color: var(--text-light); color: var(--text-light);
text-align: center; text-align: center;
max-width: 900px; max-width: 900px;
margin: 0 auto 2.5rem; margin: 0 auto 2.5rem;
line-height: 1.6; line-height: 1.8;
} }
/* ===== GRID LAYOUTS ===== */ /* ===== GRID LAYOUTS ===== */
@@ -493,7 +493,7 @@ section h2 {
} }
.solution-item p { .solution-item p {
font-size: 1.15rem; font-size: 1.3rem;
} }
.article-card img { .article-card img {
@@ -728,8 +728,8 @@ section h2 {
.specialization-description { .specialization-description {
color: var(--text-light); color: var(--text-light);
line-height: 1.6; line-height: 1.8;
font-size: 1.1rem; font-size: 1.3rem;
margin-bottom: 20px; margin-bottom: 20px;
flex-grow: 1; flex-grow: 1;
} }
@@ -1029,8 +1029,9 @@ footer {
.footer-bottom { .footer-bottom {
text-align: center; text-align: center;
padding-top: 20px; margin-top: 30px;
/* Removed the border-top that was creating the horizontal dividing grey line */ padding-top: 25px;
border-top: 1px solid rgba(255, 255, 255, 0.2); /* Add horizontal line above footer bottom */
font-size: 1.25rem; font-size: 1.25rem;
} }
@@ -1122,19 +1123,68 @@ footer {
opacity: 1; opacity: 1;
} }
.exp-item img { /* ===== EXPERTISE ICON WRAPPER ===== */
.exp-icon-wrapper {
position: relative;
width: 110px; width: 110px;
height: auto; height: 110px;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
opacity: 0.95; display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease; transition: all 0.4s ease;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); background: rgba(0, 0, 0, 0.4);
border-radius: 12px;
padding: 12px;
border: 1px solid rgba(82, 238, 245, 0.2);
box-shadow:
0 4px 15px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
}
.exp-icon-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(82, 238, 245, 0.1) 0%, rgba(162, 171, 255, 0.05) 100%);
border-radius: 12px;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.exp-item img {
width: 86px;
height: auto;
opacity: 0.9;
transition: all 0.4s ease;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
position: relative;
z-index: 1;
}
.exp-item:hover .exp-icon-wrapper {
background: rgba(0, 0, 0, 0.6);
border-color: rgba(82, 238, 245, 0.5);
box-shadow:
0 8px 25px rgba(82, 238, 245, 0.3),
0 4px 15px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 0 0 1px rgba(82, 238, 245, 0.3);
transform: scale(1.05);
}
.exp-item:hover .exp-icon-wrapper::before {
opacity: 1;
} }
.exp-item:hover img { .exp-item:hover img {
opacity: 1; opacity: 1;
transform: scale(1.05); filter: drop-shadow(0 6px 12px rgba(82, 238, 245, 0.4)) brightness(1.15) contrast(1.1);
filter: drop-shadow(0 6px 12px rgba(82, 238, 245, 0.3));
} }
.exp-item p:first-of-type { .exp-item p:first-of-type {
@@ -1152,8 +1202,8 @@ footer {
.exp-item .exp-description { .exp-item .exp-description {
margin-top: 0; margin-top: 0;
font-size: 1.1rem; font-size: 1.3rem;
line-height: 1.5; line-height: 1.8;
text-align: center; text-align: center;
color: rgba(255, 255, 255, 0.95); color: rgba(255, 255, 255, 0.95);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
@@ -1353,9 +1403,10 @@ footer {
} }
.webinar-card-header p { .webinar-card-header p {
font-size: 1.2rem; font-size: 1.3rem;
color: var(--text-muted); color: var(--text-muted);
margin: 0; margin: 0;
line-height: 1.8;
} }
/* Upcoming Webinars Content */ /* Upcoming Webinars Content */
@@ -1457,9 +1508,9 @@ footer {
.webinar-description { .webinar-description {
color: var(--text-light); color: var(--text-light);
line-height: 1.6; line-height: 1.8;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
font-size: 1.1rem; font-size: 1.3rem;
} }
.webinar-takeaways { .webinar-takeaways {
@@ -1792,9 +1843,9 @@ footer {
} }
.gn-app-intro-text p { .gn-app-intro-text p {
font-size: 1.1rem; font-size: 1.3rem;
color: var(--text-light); color: var(--text-light);
line-height: 1.6; line-height: 1.8;
} }
.gn-app-features-list { .gn-app-features-list {
@@ -1928,9 +1979,9 @@ footer {
} }
.gn-video-info p { .gn-video-info p {
font-size: 1rem; font-size: 1.3rem;
color: var(--text-muted); color: var(--text-muted);
line-height: 1.6; line-height: 1.8;
margin: 0; margin: 0;
} }

36
css/pages.css
View File

@@ -380,11 +380,11 @@ html {
.case-studies-hero p { .case-studies-hero p {
font-family: var(--font-body); font-family: var(--font-body);
font-size: 1.4rem; font-size: 1.3rem;
color: var(--text-light); color: var(--text-light);
max-width: 800px; max-width: 800px;
margin: 0 auto 2rem auto; margin: 0 auto 2rem auto;
line-height: 1.7; line-height: 1.8;
opacity: 0.9; opacity: 0.9;
text-align: center; text-align: center;
} }
@@ -568,9 +568,9 @@ html {
.article-card p { .article-card p {
font-family: var(--font-body); font-family: var(--font-body);
font-size: 1.1rem; font-size: 1.3rem;
color: var(--text-light); color: var(--text-light);
line-height: 1.6; line-height: 1.8;
margin-bottom: 2rem; margin-bottom: 2rem;
flex-grow: 1; flex-grow: 1;
} }
@@ -977,9 +977,9 @@ section#transform-cta-section.container {
.course-info p { .course-info p {
color: var(--text-muted); color: var(--text-muted);
line-height: 1.6; line-height: 1.8;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
font-size: 1.1rem; font-size: 1.3rem;
flex: 1; flex: 1;
} }
@@ -1197,7 +1197,7 @@ section#transform-cta-section.container {
.workflow-intro p { .workflow-intro p {
font-size: 1.3rem; font-size: 1.3rem;
color: var(--text-light); color: var(--text-light);
line-height: 1.7; line-height: 1.8;
font-weight: 400; font-weight: 400;
} }
@@ -1259,8 +1259,8 @@ section#transform-cta-section.container {
.benefit-item p { .benefit-item p {
color: var(--text-light); color: var(--text-light);
font-size: 1rem; font-size: 1.3rem;
line-height: 1.5; line-height: 1.8;
margin: 0; margin: 0;
} }
@@ -1359,8 +1359,8 @@ section#transform-cta-section.container {
.step-content p { .step-content p {
color: var(--text-light); color: var(--text-light);
font-size: 1.1rem; font-size: 1.3rem;
line-height: 1.6; line-height: 1.8;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@@ -1488,10 +1488,9 @@ section#transform-cta-section.container {
width: 92%; width: 92%;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
} } .workflow-intro p {
font-size: 1.3rem;
.workflow-intro p { line-height: 1.8;
font-size: 1.1rem;
} }
.workflow-benefits h3, .workflow-benefits h3,
@@ -1560,10 +1559,9 @@ section#transform-cta-section.container {
.cta-content h3 { .cta-content h3 {
font-size: 1.6rem; font-size: 1.6rem;
} } .cta-content p {
font-size: 1.3rem;
.cta-content p { line-height: 1.8;
font-size: 1.1rem;
} }
.workflow-cta-btn { .workflow-cta-btn {
padding: 0.7rem 1.5rem; padding: 0.7rem 1.5rem;

49
css/responsive.css
View File

@@ -189,11 +189,10 @@
/* Case studies mobile */ /* Case studies mobile */
.case-studies-hero h1 { .case-studies-hero h1 {
font-size: 2.2rem; font-size: 2.2rem;
} } .case-studies-hero p,
.case-studies-hero p,
#contact-us-section .contact-header p { #contact-us-section .contact-header p {
font-size: 1.2rem; font-size: 1.3rem;
line-height: 1.8;
} }
.filter-controls { .filter-controls {
@@ -364,10 +363,10 @@
letter-spacing: 0.3px; letter-spacing: 0.3px;
filter: brightness(1.08); filter: brightness(1.08);
} }
.hero-content p {
.hero-content p { font-size: 1.3rem;
font-size: 1.2rem;
margin-bottom: 1.2rem; margin-bottom: 1.2rem;
line-height: 1.8;
} }
.hero-content .btn-primary { .hero-content .btn-primary {
@@ -460,9 +459,9 @@
#contact-us-section .contact-header h1 { #contact-us-section .contact-header h1 {
font-size: 2.5rem; font-size: 2.5rem;
} }
#contact-us-section .contact-header p {
#contact-us-section .contact-header p { font-size: 1.3rem;
font-size: 1.1rem; line-height: 1.8;
} }
/* Button adjustments extra small */ /* Button adjustments extra small */
@@ -604,10 +603,9 @@
.workflow-section { .workflow-section {
padding: 2.5rem 0; padding: 2.5rem 0;
margin: 2rem 0; margin: 2rem 0;
} } .workflow-intro p {
font-size: 1.3rem;
.workflow-intro p { line-height: 1.8;
font-size: 1.1rem;
} }
.workflow-benefits h3, .workflow-benefits h3,
@@ -664,10 +662,9 @@
.cta-content h3 { .cta-content h3 {
font-size: 1.6rem; font-size: 1.6rem;
} } .cta-content p {
font-size: 1.3rem;
.cta-content p { line-height: 1.8;
font-size: 1.1rem;
} }
.workflow-cta-btn { .workflow-cta-btn {
@@ -1257,6 +1254,22 @@
transform: translateY(0); transform: translateY(0);
} }
/* Disable scroll animations for all purple buttons globally */
.btn-primary.animate-on-scroll,
.btn.animate-on-scroll,
button.animate-on-scroll {
opacity: 1 !important;
transform: none !important;
transition: all 0.3s ease !important; /* Keep only hover transitions */
}
.btn-primary.animate-on-scroll.animated,
.btn.animate-on-scroll.animated,
button.animate-on-scroll.animated {
opacity: 1 !important;
transform: none !important;
}
/* Stagger animation delays */ /* Stagger animation delays */
.animate-on-scroll:nth-child(1) { transition-delay: 0.1s; } .animate-on-scroll:nth-child(1) { transition-delay: 0.1s; }
.animate-on-scroll:nth-child(2) { transition-delay: 0.2s; } .animate-on-scroll:nth-child(2) { transition-delay: 0.2s; }

29
index.html
View File

@@ -19,10 +19,9 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
opacity: 1; opacity: 1;
} } /* Custom styles for hero section font sizes */
/* Custom styles for hero section font sizes */
#hero .hero-content h1 { #hero .hero-content h1 {
font-size: 4.5rem; /* Main heading with required 4.5rem size */ font-size: 4rem; /* Main heading changed to 4rem as requested */
margin-bottom: 0.4rem; /* Adjusted bottom margin */ margin-bottom: 0.4rem; /* Adjusted bottom margin */
line-height: 1.0; /* Lowered and uniform line spacing */ line-height: 1.0; /* Lowered and uniform line spacing */
font-weight: 100; /* Required font weight 100 */ font-weight: 100; /* Required font weight 100 */
@@ -179,9 +178,8 @@
<span class="typewriter-text" id="typewriter">AI Strategy & Roadmaps</span><span class="cursor"></span> <span class="typewriter-text" id="typewriter">AI Strategy & Roadmaps</span><span class="cursor"></span>
</div> </div>
</div> </div>
<p class="hero-supporting-text">Your partner in building intelligent, scalable AI systems that drive innovation and growth.</p> <p class="hero-supporting-text">Your partner in building intelligent, scalable AI systems that drive innovation and growth.</p> <div class="hero-cta-buttons">
<div class="hero-cta-buttons"> <a href="https://schedule.fillout.com/t/3XsBwh8ipfus" class="btn-primary primary-cta" target="_blank" rel="noopener noreferrer">Book a Free Consultation</a>
<a href="contact.html" class="btn-primary primary-cta">Book a Free Consultation</a>
<a href="Industries/case-studies.html" class="btn-primary secondary-cta">See Our Work</a> <a href="Industries/case-studies.html" class="btn-primary secondary-cta">See Our Work</a>
</div> </div>
</div> </div>
@@ -412,27 +410,34 @@
</section> <!-- EXPERTISE --> </section> <!-- EXPERTISE -->
<section id="expertise" class="container"> <section id="expertise" class="container">
<h2 class="section-heading">OUR EXPERTISE</h2> <h2 class="section-heading">OUR EXPERTISE</h2>
<div class="exp-grid"> <div class="exp-grid"> <div class="exp-item">
<div class="exp-item"> <div class="exp-icon-wrapper">
<img src="assets/predictive.png" alt="Innovation First Icon" /> <img src="assets/predictive.png" alt="Innovation First Icon" />
</div>
<h3 style="font-size: 1.8rem; line-height: 1.2; margin-top: 0.5rem; margin-bottom: 1.2rem; color: #52eef5; font-weight: 600; letter-spacing: 0.5px;">Innovation First</h3> <h3 style="font-size: 1.8rem; line-height: 1.2; margin-top: 0.5rem; margin-bottom: 1.2rem; color: #52eef5; font-weight: 600; letter-spacing: 0.5px;">Innovation First</h3>
<p class="exp-description">We prioritize cutting-edge innovation, staying ahead of industry trends to deliver groundbreaking AI solutions.</p> <p class="exp-description">We prioritize cutting-edge innovation, staying ahead of industry trends to deliver groundbreaking AI solutions.</p>
</div> </div>
<div class="exp-item"> <div class="exp-item">
<img src="assets/technology.png" alt="Technical Excellence Icon" /> <div class="exp-icon-wrapper">
<img src="assets/technology.png" alt="Technical Excellence Icon" />
</div>
<h3 style="font-size: 1.8rem; line-height: 1.2; margin-top: 0.5rem; margin-bottom: 1.2rem; color: #52eef5; font-weight: 600; letter-spacing: 0.5px;">Tech Mastery</h3> <h3 style="font-size: 1.8rem; line-height: 1.2; margin-top: 0.5rem; margin-bottom: 1.2rem; color: #52eef5; font-weight: 600; letter-spacing: 0.5px;">Tech Mastery</h3>
<p class="exp-description">Our team combines deep technical expertise with practical experience to build robust, scalable AI systems.</p> <p class="exp-description">Our team combines deep technical expertise with practical experience to build robust, scalable AI systems.</p>
</div> </div>
<div class="exp-item"> <div class="exp-item">
<img src="assets/analytics (1).png" alt="Results Driven Icon" /> <div class="exp-icon-wrapper">
<img src="assets/analytics (1).png" alt="Results Driven Icon" />
</div>
<h3 style="font-size: 1.8rem; line-height: 1.2; margin-top: 0.5rem; margin-bottom: 1.2rem; color: #52eef5; font-weight: 600; letter-spacing: 0.5px;">Results Driven</h3> <h3 style="font-size: 1.8rem; line-height: 1.2; margin-top: 0.5rem; margin-bottom: 1.2rem; color: #52eef5; font-weight: 600; letter-spacing: 0.5px;">Results Driven</h3>
<p class="exp-description">We deliver measurable business impact through AI solutions that generate real value and maximize ROI.</p> <p class="exp-description">We deliver measurable business impact through AI solutions that generate real value and maximize ROI.</p>
</div> </div>
<div class="exp-item"> <div class="exp-item">
<img src="assets/ai-customer-support.svg" alt="Ongoing Support Icon" /> <div class="exp-icon-wrapper">
<img src="assets/ai-customer-support.svg" alt="Ongoing Support Icon" />
</div>
<h3 style="font-size: 1.8rem; line-height: 1.2; margin-top: 0.5rem; margin-bottom: 1.2rem; color: #52eef5; font-weight: 600; letter-spacing: 0.5px;">Ongoing Support</h3> <h3 style="font-size: 1.8rem; line-height: 1.2; margin-top: 0.5rem; margin-bottom: 1.2rem; color: #52eef5; font-weight: 600; letter-spacing: 0.5px;">Ongoing Support</h3>
<p class="exp-description">We provide continuous monitoring, updates, and optimization to ensure your AI systems perform at their best.</p> <p class="exp-description">We provide continuous monitoring, updates, and optimization to ensure your AI systems perform at their best.</p>
</div> </div>

4
js/main.js
View File

@@ -73,8 +73,8 @@ function initScrollEffects() {
// Animate elements when they enter viewport // Animate elements when they enter viewport
function initScrollAnimations() { function initScrollAnimations() {
// Exclude hero content from scroll animations to prevent layout shifts // Exclude hero content and all purple buttons from scroll animations to prevent layout shifts
const animatedElements = document.querySelectorAll('.exp-item, .section-heading, .btn-primary:not(#hero .btn-primary)'); const animatedElements = document.querySelectorAll('.exp-item, .section-heading');
// Ensure hero content is always visible and stable // Ensure hero content is always visible and stable
const heroContent = document.querySelector('#hero .hero-content'); const heroContent = document.querySelector('#hero .hero-content');

75
js/tech-marquee.js
View File

@@ -1,23 +1,45 @@
// Tech Cards Animation Enhancement // Tech Cards Animation Enhancement
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
console.log('Tech marquee script loaded');
const techCardsContainer = document.querySelector('.tech-cards-container'); const techCardsContainer = document.querySelector('.tech-cards-container');
const techCardsTrack = document.querySelector('.tech-cards-track');
const techCards = document.querySelectorAll('.tech-card'); const techCards = document.querySelectorAll('.tech-card');
// No animation delay or dancing effects console.log('Tech cards found:', techCards.length);
techCards.forEach((card) => { console.log('Tech track found:', techCardsTrack);
// Just add basic hover interaction
card.addEventListener('mouseenter', function() { // Add comprehensive hover functionality for individual tech cards
this.style.transform = 'translateY(-10px)'; techCards.forEach((card, index) => {
}); console.log(`Setting up card ${index}`);
card.addEventListener('mouseleave', function() {
this.style.transform = '';
});
});
// Add 3D tilt effect on mouse move for each tech card
techCards.forEach(card => {
const iconWrapper = card.querySelector('.tech-icon-wrapper'); const iconWrapper = card.querySelector('.tech-icon-wrapper');
// Mouse enter - pause animation and lift card
card.addEventListener('mouseenter', function(e) {
console.log('Tech card hover detected');
e.stopPropagation(); // Prevent event bubbling
this.style.transform = 'translateY(-10px)';
if (techCardsTrack) {
techCardsTrack.classList.add('paused');
console.log('Tech animation paused via CSS class');
}
});
// Mouse leave - resume animation and reset card
card.addEventListener('mouseleave', function(e) {
console.log('Tech card hover ended');
e.stopPropagation(); // Prevent event bubbling
this.style.transform = '';
if (techCardsTrack) {
techCardsTrack.classList.remove('paused');
console.log('Tech animation resumed via CSS class');
}
// Reset icon wrapper transform when leaving
if (iconWrapper) {
iconWrapper.style.transform = '';
}
});
// Mouse move - 3D tilt effect (only if icon wrapper exists)
if (iconWrapper) { if (iconWrapper) {
card.addEventListener('mousemove', function(e) { card.addEventListener('mousemove', function(e) {
const rect = iconWrapper.getBoundingClientRect(); const rect = iconWrapper.getBoundingClientRect();
@@ -32,38 +54,15 @@ document.addEventListener('DOMContentLoaded', function() {
iconWrapper.style.transform = `perspective(500px) rotateX(${tiltY}deg) rotateY(${-tiltX}deg) scale3d(1.1, 1.1, 1.1)`; iconWrapper.style.transform = `perspective(500px) rotateX(${tiltY}deg) rotateY(${-tiltX}deg) scale3d(1.1, 1.1, 1.1)`;
}); });
card.addEventListener('mouseleave', function() {
iconWrapper.style.transform = '';
});
} }
}); });
// Add entrance animation for the tech cards container (opacity only)
// Add a parallax effect to create depth in the tech cards container
window.addEventListener('mousemove', function(e) {
if (techCardsContainer) {
const depth = 20;
const moveX = (e.clientX - window.innerWidth / 2) / depth;
const moveY = (e.clientY - window.innerHeight / 2) / depth;
// Limit the movement for a subtler effect
const maxMove = 5;
const limitedMoveX = Math.max(-maxMove, Math.min(maxMove, moveX));
const limitedMoveY = Math.max(-maxMove, Math.min(maxMove, moveY));
techCardsContainer.style.transform = `translate(${limitedMoveX}px, ${limitedMoveY}px)`;
}
});
// Add entrance animation for the tech cards container
if (techCardsContainer) { if (techCardsContainer) {
techCardsContainer.style.opacity = '0'; techCardsContainer.style.opacity = '0';
techCardsContainer.style.transform = 'translateY(20px)';
setTimeout(() => { setTimeout(() => {
techCardsContainer.style.transition = 'opacity 0.8s ease-out, transform 0.8s ease-out'; techCardsContainer.style.transition = 'opacity 0.8s ease-out';
techCardsContainer.style.opacity = '1'; techCardsContainer.style.opacity = '1';
techCardsContainer.style.transform = 'translateY(0)';
}, 200); }, 200);
} }
}); });

58
js/testimonials-marquee.js Normal file
View File

@@ -0,0 +1,58 @@
// Testimonials Animation Enhancement
document.addEventListener('DOMContentLoaded', function() {
console.log('Testimonials marquee script loaded');
const testimonialsContainer = document.querySelector('.testimonials-track-container');
const testimonialsTrack = document.querySelector('.testimonials-track');
const testimonialCards = document.querySelectorAll('.testimonial-card');
console.log('Testimonial cards found:', testimonialCards.length);
console.log('Testimonials track found:', testimonialsTrack);
// Add hover pause functionality for individual testimonial cards
testimonialCards.forEach((card, index) => {
console.log(`Setting up testimonial card ${index}`);
// Pause animation when hovering over individual cards
card.addEventListener('mouseenter', function(e) {
console.log('Testimonial card hover detected');
e.stopPropagation(); // Prevent event bubbling
if (testimonialsTrack) {
testimonialsTrack.classList.add('paused');
console.log('Testimonials animation paused via CSS class');
}
});
card.addEventListener('mouseleave', function(e) {
console.log('Testimonial card hover ended');
e.stopPropagation(); // Prevent event bubbling
if (testimonialsTrack) {
testimonialsTrack.classList.remove('paused');
console.log('Testimonials animation resumed via CSS class');
}
});
});
// Also pause when hovering over the container
if (testimonialsContainer) {
testimonialsContainer.addEventListener('mouseenter', function() {
if (testimonialsTrack) {
testimonialsTrack.classList.add('paused');
}
});
testimonialsContainer.addEventListener('mouseleave', function() {
if (testimonialsTrack) {
testimonialsTrack.classList.remove('paused');
}
});
}
// Add entrance animation for the testimonials container (opacity only)
if (testimonialsContainer) {
testimonialsContainer.style.opacity = '0';
setTimeout(() => {
testimonialsContainer.style.transition = 'opacity 0.8s ease-out';
testimonialsContainer.style.opacity = '1';
}, 200);
}
});