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

20
Education/corporate-trainings.html
View File

@@ -23,9 +23,8 @@
<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">
</a>
<!-- Hamburger menu button for mobile -->
<button class="hamburger-menu" aria-label="Toggle menu">
<!-- Hamburger menu button for mobile -->
<button class="hamburger-menu" aria-label="Toggle menu" onclick="toggleMobileMenu(event)">
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
@@ -119,7 +118,7 @@
<div class="step-icon">
<i class="fas fa-search"></i>
</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">
<span>Workflow mapping sessions</span>
<span>Skill gap analysis</span>
@@ -222,10 +221,9 @@
<h3>ROI-Focused Training</h3>
<p>Maximize your investment with training that delivers measurable business outcomes and practical implementation skills.</p> </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="../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>
@@ -261,8 +259,7 @@
<a href="https://www.youtube.com/@Gyannetra-o3y" aria-label="YouTube" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-col">
<div class="footer-col">
<h3>Contact Us</h3>
<ul>
<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>
</ul>
</div>
</div>
</div>
</div>
</div> <div class="footer-bottom">
<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>
</div>
</div>

17
Education/individual-trainings.html
View File

@@ -21,9 +21,8 @@
<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">
</a>
<!-- Hamburger menu button for mobile -->
<button class="hamburger-menu" aria-label="Toggle menu">
<!-- Hamburger menu button for mobile -->
<button class="hamburger-menu" aria-label="Toggle menu" onclick="toggleMobileMenu(event)">
<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>
</div>
</div>
<div class="footer-col">
<div class="footer-col">
<h3>Contact Us</h3>
<ul>
<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>
</ul>
</div>
</div>
</div>
</div>
</div> <div class="footer-bottom">
<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>
</div>
</div>
</footer>
<script src="../js/main.js" defer></script>
</footer> <script src="../js/main.js" defer></script>
<script src="../js/menu-dropdown.js" defer></script>
<script src="../js/tech-marquee.js" defer></script>
<script src="../js/testimonials-marquee.js" defer></script>
</body>
</html>

21
Education/workshops.html
View File

@@ -23,9 +23,8 @@
<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">
</a>
<!-- Hamburger menu button for mobile -->
<button class="hamburger-menu" aria-label="Toggle menu">
<!-- Hamburger menu button for mobile -->
<button class="hamburger-menu" aria-label="Toggle menu" onclick="toggleMobileMenu(event)">
<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">
<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>
<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 -->
<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.
</p>
<div class="webinar-takeaways">
<h4>Key Takeaways:</h4>
<ul>
<h4>Key Takeaways:</h4> <ul>
<li>Understanding Transformer architecture and attention mechanisms</li>
<li>Hands-on experience with OpenAI API integration</li>
<li>Best practices for prompt engineering and optimization</li>
@@ -106,7 +106,6 @@
</div>
<div class="webinar-actions">
<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>
@@ -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.
</p>
<div class="webinar-takeaways">
<h4>Key Takeaways:</h4>
<ul>
<h4>Key Takeaways:</h4> <ul>
<li>Predictive analytics for sales forecasting and customer behavior</li>
<li>Implementing recommendation systems for personalization</li>
<li>ROI measurement and KPI tracking for ML initiatives</li>
@@ -137,7 +135,6 @@
</div>
<div class="webinar-actions">
<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>
@@ -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.
</p>
<div class="webinar-takeaways">
<h4>Key Takeaways:</h4>
<ul>
<h4>Key Takeaways:</h4> <ul>
<li>Process mapping and automation opportunity identification</li>
<li>RPA vs. Intelligent automation: choosing the right approach</li>
<li>Integration strategies with existing business systems</li>
@@ -168,7 +164,6 @@
</div>
<div class="webinar-actions">
<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>

5
Industries/case-studies.html
View File

@@ -24,9 +24,8 @@
<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">
</a>
<!-- Hamburger menu button for mobile -->
<button class="hamburger-menu" aria-label="Toggle menu">
<!-- Hamburger menu button for mobile -->
<button class="hamburger-menu" aria-label="Toggle menu" onclick="toggleMobileMenu(event)">
<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">
<img src="../assets/Company Icons/GN logo with banner.svg" alt="Gyannetra Logo" class="logo-img" class="gn-responsive-image">
</a>
<!-- Hamburger menu button for mobile -->
<button class="hamburger-menu" aria-label="Toggle menu">
<!-- Hamburger menu button for mobile -->
<button class="hamburger-menu" aria-label="Toggle menu" onclick="toggleMobileMenu(event)">
<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">
<img src="../assets/Company Icons/GN logo with banner.svg" alt="Gyannetra Logo" class="logo-img" class="gn-responsive-image">
</a>
<!-- Hamburger menu button for mobile -->
<button class="hamburger-menu" aria-label="Toggle menu">
<!-- Hamburger menu button for mobile -->
<button class="hamburger-menu" aria-label="Toggle menu" onclick="toggleMobileMenu(event)">
<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">
<img src="../assets/Company Icons/GN logo with banner.svg" alt="Gyannetra Logo" class="logo-img" class="gn-responsive-image">
</a>
<!-- Hamburger menu button for mobile -->
<button class="hamburger-menu" aria-label="Toggle menu">
<!-- Hamburger menu button for mobile -->
<button class="hamburger-menu" aria-label="Toggle menu" onclick="toggleMobileMenu(event)">
<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">
<img src="../assets/Company Icons/GN logo with banner.svg" alt="Gyannetra Logo" class="logo-img" class="gn-responsive-image">
</a>
<!-- Hamburger menu button for mobile -->
<button class="hamburger-menu" aria-label="Toggle menu">
<!-- Hamburger menu button for mobile -->
<button class="hamburger-menu" aria-label="Toggle menu" onclick="toggleMobileMenu(event)">
<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-phone"></i>+91 89491-35299</li>
<li><i class="fas fa-map-marker-alt"></i>Pune, Maharashtra, India</li>
</ul>
<div class="expert-advice-card">
</ul> <div class="expert-advice-card">
<h3>Need Expert Advice?</h3>
<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>

130
css/components.css
View File

@@ -50,7 +50,7 @@
}
.hero-content h1 {
font-size: 4.5rem;
font-size: 4rem;
line-height: 1.1;
margin-bottom: 1rem;
letter-spacing: 1.5px;
@@ -114,9 +114,9 @@
}
.hero-supporting-text {
font-size: 1.2rem;
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.8);
line-height: 1.5;
line-height: 1.8;
margin: 1.5rem auto;
max-width: 600px;
text-align: center;
@@ -298,8 +298,9 @@
.hero-section p,
#automation-flows-hero p {
font-size: 1.45rem;
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.8);
line-height: 1.8;
}
.hero-section.gn-responsive-container {
@@ -341,9 +342,9 @@
.industry-hero p {
font-family: 'VT323', monospace;
font-size: 1.45rem;
font-size: 1.3rem;
color: #e0e0e0;
line-height: 1.6;
line-height: 1.8;
margin-bottom: 30px;
}
@@ -480,6 +481,23 @@
transform: 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 SECTION ===== */
@@ -532,12 +550,13 @@
.tech-cards-track {
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;
gap: 70px;
}
.tech-cards-track:hover {
/* Paused state for hover functionality */
.tech-cards-track.paused {
animation-play-state: paused;
}
@@ -550,6 +569,15 @@
}
}
@keyframes techCardsFlowFast {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* ===== INDIVIDUAL TECH CARDS ===== */
.tech-card {
flex: 0 0 auto;
@@ -718,10 +746,10 @@
}
.tech-card p {
font-size: 1.1rem;
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.8);
transition: all 0.3s ease;
line-height: 1.4;
line-height: 1.8;
}
.tech-card:hover p {
@@ -1504,9 +1532,10 @@ body.contact-page {
}
.expert-advice-card p {
font-size: 1.2rem;
font-size: 1.3rem;
margin-bottom: 1.5rem;
color: rgba(255, 255, 255, 0.8);
line-height: 1.8;
}
/* ===== ENHANCED CONTACT INFO STYLING ===== */
@@ -1767,8 +1796,8 @@ body.contact-page {
.overview-card p {
color: rgba(255, 255, 255, 0.9);
line-height: 1.7;
font-size: 1.2rem;
line-height: 1.8;
font-size: 1.3rem;
}
/* Responsive adjustments */
@@ -1874,7 +1903,7 @@ body.contact-page {
/* ===== CUSTOMER 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));
position: relative;
overflow: hidden;
@@ -1903,7 +1932,7 @@ body.contact-page {
.testimonials-heading {
text-align: center;
margin-bottom: 4rem;
margin-bottom: 2.5rem; /* Reduced from 4rem to 2.5rem */
padding: 0 2rem;
}
@@ -1930,11 +1959,11 @@ body.contact-page {
}
.testimonials-heading p {
font-size: 1.4rem;
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.8);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
line-height: 1.8;
}
/* Floating Testimonials Track */
@@ -1942,8 +1971,8 @@ body.contact-page {
position: relative;
width: 100%;
overflow: hidden;
height: 600px;
margin: 2rem 0;
height: 480px; /* Reduced from 600px to 480px */
margin: 1rem 0; /* Reduced from 2rem to 1rem */
}
.testimonials-track {
@@ -1956,7 +1985,8 @@ body.contact-page {
left: 0;
}
.testimonials-track:hover {
/* Paused state for hover functionality */
.testimonials-track.paused {
animation-play-state: paused;
}
@@ -1971,11 +2001,12 @@ body.contact-page {
/* Individual 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%);
border: 1px solid rgba(82, 238, 245, 0.2);
border-radius: 20px;
padding: 2.5rem;
padding: 2rem;
margin: 1rem 0;
backdrop-filter: blur(15px);
box-shadow:
@@ -1984,8 +2015,10 @@ body.contact-page {
position: relative;
overflow: hidden;
transition: all 0.4s ease;
animation: cardFloat 8s ease-in-out infinite;
animation-delay: var(--delay, 0s);
display: flex; /* Use flexbox for horizontal layout */
align-items: center;
gap: 2rem;
}
.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(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 {
content: '';
position: absolute;
@@ -2050,24 +2068,28 @@ body.contact-page {
/* Customer Info */
.customer-info {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 1.5rem;
text-align: center;
margin-bottom: 0; /* Remove bottom margin for landscape layout */
position: relative;
z-index: 2;
flex-shrink: 0; /* Prevent shrinking */
min-width: 180px; /* Minimum width for customer info section */
}
.customer-avatar {
width: 60px;
height: 60px;
width: 80px; /* Slightly larger for landscape layout */
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 1.5rem;
font-size: 1.8rem;
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);
transition: all 0.3s ease;
}
@@ -2103,13 +2125,17 @@ body.contact-page {
.review-content {
position: relative;
z-index: 2;
flex: 1; /* Take remaining space */
display: flex;
flex-direction: column;
justify-content: center;
}
.review-text {
font-size: 1.1rem;
font-size: 1.1rem; /* Slightly smaller for landscape layout */
color: rgba(255, 255, 255, 0.9);
line-height: 1.7;
margin-bottom: 1.5rem;
line-height: 1.6; /* Reduced line height for better fit */
margin-bottom: 1rem; /* Reduced margin */
font-style: italic;
position: relative;
}
@@ -2176,7 +2202,7 @@ body.contact-page {
@media (max-width: 992px) {
.testimonials-track-container {
height: 500px;
height: 400px; /* Reduced from 500px to 400px */
}
.testimonial-card {
@@ -2191,11 +2217,11 @@ body.contact-page {
@media (max-width: 768px) {
.testimonials-section {
padding: 4rem 0;
padding: 4rem 0 1.5rem 0; /* Reduced bottom padding for mobile */
}
.testimonials-track-container {
height: 450px;
height: 350px; /* Reduced from 450px to 350px */
}
.testimonial-card {
@@ -2207,9 +2233,9 @@ body.contact-page {
.testimonials-heading h2 {
font-size: 2.4rem;
}
.testimonials-heading p {
font-size: 1.2rem;
.testimonials-heading p {
font-size: 1.3rem;
line-height: 1.8;
}
.customer-info {

95
css/core.css
View File

@@ -413,12 +413,12 @@ section h2 {
}
.section-intro {
font-size: 1.2rem;
font-size: 1.3rem;
color: var(--text-light);
text-align: center;
max-width: 900px;
margin: 0 auto 2.5rem;
line-height: 1.6;
line-height: 1.8;
}
/* ===== GRID LAYOUTS ===== */
@@ -493,7 +493,7 @@ section h2 {
}
.solution-item p {
font-size: 1.15rem;
font-size: 1.3rem;
}
.article-card img {
@@ -728,8 +728,8 @@ section h2 {
.specialization-description {
color: var(--text-light);
line-height: 1.6;
font-size: 1.1rem;
line-height: 1.8;
font-size: 1.3rem;
margin-bottom: 20px;
flex-grow: 1;
}
@@ -1029,8 +1029,9 @@ footer {
.footer-bottom {
text-align: center;
padding-top: 20px;
/* Removed the border-top that was creating the horizontal dividing grey line */
margin-top: 30px;
padding-top: 25px;
border-top: 1px solid rgba(255, 255, 255, 0.2); /* Add horizontal line above footer bottom */
font-size: 1.25rem;
}
@@ -1122,19 +1123,68 @@ footer {
opacity: 1;
}
.exp-item img {
/* ===== EXPERTISE ICON WRAPPER ===== */
.exp-icon-wrapper {
position: relative;
width: 110px;
height: auto;
height: 110px;
margin-bottom: 1.5rem;
opacity: 0.95;
display: flex;
align-items: center;
justify-content: center;
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 {
opacity: 1;
transform: scale(1.05);
filter: drop-shadow(0 6px 12px rgba(82, 238, 245, 0.3));
filter: drop-shadow(0 6px 12px rgba(82, 238, 245, 0.4)) brightness(1.15) contrast(1.1);
}
.exp-item p:first-of-type {
@@ -1152,8 +1202,8 @@ footer {
.exp-item .exp-description {
margin-top: 0;
font-size: 1.1rem;
line-height: 1.5;
font-size: 1.3rem;
line-height: 1.8;
text-align: center;
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
@@ -1353,9 +1403,10 @@ footer {
}
.webinar-card-header p {
font-size: 1.2rem;
font-size: 1.3rem;
color: var(--text-muted);
margin: 0;
line-height: 1.8;
}
/* Upcoming Webinars Content */
@@ -1457,9 +1508,9 @@ footer {
.webinar-description {
color: var(--text-light);
line-height: 1.6;
line-height: 1.8;
margin-bottom: 1.5rem;
font-size: 1.1rem;
font-size: 1.3rem;
}
.webinar-takeaways {
@@ -1792,9 +1843,9 @@ footer {
}
.gn-app-intro-text p {
font-size: 1.1rem;
font-size: 1.3rem;
color: var(--text-light);
line-height: 1.6;
line-height: 1.8;
}
.gn-app-features-list {
@@ -1928,9 +1979,9 @@ footer {
}
.gn-video-info p {
font-size: 1rem;
font-size: 1.3rem;
color: var(--text-muted);
line-height: 1.6;
line-height: 1.8;
margin: 0;
}

36
css/pages.css
View File

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

49
css/responsive.css
View File

@@ -189,11 +189,10 @@
/* Case studies mobile */
.case-studies-hero h1 {
font-size: 2.2rem;
}
.case-studies-hero p,
} .case-studies-hero p,
#contact-us-section .contact-header p {
font-size: 1.2rem;
font-size: 1.3rem;
line-height: 1.8;
}
.filter-controls {
@@ -364,10 +363,10 @@
letter-spacing: 0.3px;
filter: brightness(1.08);
}
.hero-content p {
font-size: 1.2rem;
.hero-content p {
font-size: 1.3rem;
margin-bottom: 1.2rem;
line-height: 1.8;
}
.hero-content .btn-primary {
@@ -460,9 +459,9 @@
#contact-us-section .contact-header h1 {
font-size: 2.5rem;
}
#contact-us-section .contact-header p {
font-size: 1.1rem;
#contact-us-section .contact-header p {
font-size: 1.3rem;
line-height: 1.8;
}
/* Button adjustments extra small */
@@ -604,10 +603,9 @@
.workflow-section {
padding: 2.5rem 0;
margin: 2rem 0;
}
.workflow-intro p {
font-size: 1.1rem;
} .workflow-intro p {
font-size: 1.3rem;
line-height: 1.8;
}
.workflow-benefits h3,
@@ -664,10 +662,9 @@
.cta-content h3 {
font-size: 1.6rem;
}
.cta-content p {
font-size: 1.1rem;
} .cta-content p {
font-size: 1.3rem;
line-height: 1.8;
}
.workflow-cta-btn {
@@ -1257,6 +1254,22 @@
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 */
.animate-on-scroll:nth-child(1) { transition-delay: 0.1s; }
.animate-on-scroll:nth-child(2) { transition-delay: 0.2s; }

29
index.html
View File

@@ -19,10 +19,9 @@
margin: 0;
padding: 0;
opacity: 1;
}
/* Custom styles for hero section font sizes */
} /* Custom styles for hero section font sizes */
#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 */
line-height: 1.0; /* Lowered and uniform line spacing */
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>
</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>
<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="https://schedule.fillout.com/t/3XsBwh8ipfus" class="btn-primary primary-cta" target="_blank" rel="noopener noreferrer">Book a Free Consultation</a>
<a href="Industries/case-studies.html" class="btn-primary secondary-cta">See Our Work</a>
</div>
</div>
@@ -412,27 +410,34 @@
</section> <!-- EXPERTISE -->
<section id="expertise" class="container">
<h2 class="section-heading">OUR EXPERTISE</h2>
<div class="exp-grid">
<div class="exp-item">
<img src="assets/predictive.png" alt="Innovation First Icon" />
<div class="exp-grid"> <div class="exp-item">
<div class="exp-icon-wrapper">
<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>
<p class="exp-description">We prioritize cutting-edge innovation, staying ahead of industry trends to deliver groundbreaking AI solutions.</p>
</div>
<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>
<p class="exp-description">Our team combines deep technical expertise with practical experience to build robust, scalable AI systems.</p>
</div>
<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>
<p class="exp-description">We deliver measurable business impact through AI solutions that generate real value and maximize ROI.</p>
</div>
<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>
<p class="exp-description">We provide continuous monitoring, updates, and optimization to ensure your AI systems perform at their best.</p>
</div>

4
js/main.js
View File

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

73
js/tech-marquee.js
View File

@@ -1,23 +1,45 @@
// Tech Cards Animation Enhancement
document.addEventListener('DOMContentLoaded', function() {
console.log('Tech marquee script loaded');
const techCardsContainer = document.querySelector('.tech-cards-container');
const techCardsTrack = document.querySelector('.tech-cards-track');
const techCards = document.querySelectorAll('.tech-card');
// No animation delay or dancing effects
techCards.forEach((card) => {
// Just add basic hover interaction
card.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-10px)';
});
console.log('Tech cards found:', techCards.length);
console.log('Tech track found:', techCardsTrack);
card.addEventListener('mouseleave', function() {
this.style.transform = '';
});
});
// Add 3D tilt effect on mouse move for each tech card
techCards.forEach(card => {
// Add comprehensive hover functionality for individual tech cards
techCards.forEach((card, index) => {
console.log(`Setting up card ${index}`);
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) {
card.addEventListener('mousemove', function(e) {
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)`;
});
card.addEventListener('mouseleave', function() {
iconWrapper.style.transform = '';
});
}
});
// 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
// Add entrance animation for the tech cards container (opacity only)
if (techCardsContainer) {
techCardsContainer.style.opacity = '0';
techCardsContainer.style.transform = 'translateY(20px)';
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.transform = 'translateY(0)';
}, 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);
}
});