Merge pull request #6932 from ARYANSHAH1567/aryanshah/fix_responsiveness

Fixed Responsiveness on Academy Page

Author: leecalcote

src/components/Academy/Enterprise-Section/EnterpriseSection.js

@@ -57,10 +57,6 @@ const EnterpriseSectionWrapper = styled.section`
           
           .progress-value {
             font-weight: bold;
-            
-            &.primary {
-              color: #00b39f;
-            }
           }
         }
         
@@ -80,7 +76,6 @@ const EnterpriseSectionWrapper = styled.section`
               display: block;
               font-size: 1.5rem;
               font-weight: 700;
-              color: #00b39f;
               margin-bottom: 0.25rem;
             }
             
@@ -113,13 +108,6 @@ const EnterpriseSectionWrapper = styled.section`
           from { opacity: 0; transform: translateY(20px); }
           to { opacity: 1; transform: translateY(0); }
         }
-        
-        .highlight {
-          background: linear-gradient(135deg, #00b39f, #00d3a9);
-          -webkit-background-clip: text;
-          -webkit-text-fill-color: transparent;
-          background-clip: text;
-        }
       }
       
       p {
@@ -238,7 +226,7 @@ const EnterpriseSection = () => {
           </div>
         </div>
         <div className="audience-text">
-          <h2>For <span className="highlight">Large Organizations</span></h2>
+          <h2>For Large Organizations</h2>
           {/* <p>
             Accelerate your enterprise platform transformation with structured cloud native training, customizable contents, and enterprise-grade analytics to maximize ROI and reduce risk.{" "}
             <Link to="/collections/resources/comparison/layer5-academy-vs-moocit">Compare Layer5 Academy with traditional platforms.</Link>

src/components/Academy/Features-Section/AcademyFeaturesCarousel.js

@@ -42,7 +42,6 @@ const DivWrapper = styled.div`
   font-size: 1.125rem;
   align-items: center;
   position: relative;
-  margin-bottom: 10%;
   
   .left {
     text-align: center;
@@ -71,6 +70,7 @@ const DivWrapper = styled.div`
 
   @media only screen and (max-width: 999px) {
     padding-block: 3rem;
+    margin-bottom: 10%;
     
     .left {
       margin-bottom: 1rem;
@@ -105,7 +105,7 @@ export default function AcademyFeatureCarousel() {
   return (
     <DivWrapper>
       <div className="left">
-        <h1>Unlock Your <span className="highlight">Cloud Native</span> Journey</h1>
+        <h1>Unlock Your Cloud Native Journey</h1>
       </div>
       <div className="right">
         {CONTENT.map((content, i) => (

src/components/Academy/Features-Section/AcademyFeaturesMobileSwiper.js

@@ -37,6 +37,7 @@ const CONTENT = [
     img: Track,
     description:
       "Stay motivated with clear progress tracking as you move forward. Keep an eye on your completed labs, challenges, and milestones, and see how your cloud native skills steadily grow step by step.",
+    gradient: "four"
   }
 ];
 
@@ -81,7 +82,7 @@ const AcademyMobileSwiper = () => {
   return (
     <DivWrapper>
       <SwiperContainer style={{ marginBottom: "10%" }}>
-        <h2 style={{ marginBottom: "2rem" }}>Unlock Your <span className="highlight">Cloud Native</span> Journey</h2>
+        <h2 style={{ marginBottom: "2rem" }}>Unlock Your Cloud Native Journey</h2>
         <Swiper
           autoplay={{
             delay: 2000,

src/components/Academy/Hero-Section/HeroSection.js

@@ -4,6 +4,7 @@ import { Row, Col, Container } from "../../../reusecore/Layout";
 import Button from "../../../reusecore/Button";
 import Cone from "../../../assets/images/gitops/conelight.svg";
 import { ReactComponent as AcademyLogo } from "../../../assets/images/academy/academy.svg";
+
 const AcademyHeaderWrapper = styled.div`  
   .academy-platform.header {
     min-height: 40rem;
@@ -19,6 +20,7 @@ const AcademyHeaderWrapper = styled.div`
       flex-direction: column;
       justify-content: center;
     }
+    
     .header__title {
       color: ${(props) => props.theme.primaryColor};
       padding-right: 80px;
@@ -31,6 +33,7 @@ const AcademyHeaderWrapper = styled.div`
         background-clip: text;
       }
     }
+    
     .header__title_description {
       color: ${(props) => props.theme.tertiaryColor};
       transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
@@ -39,19 +42,22 @@ const AcademyHeaderWrapper = styled.div`
       line-height: 2rem;
       margin-bottom: 30px;
     }
+    
     .header__button_section {
       display: flex;
       gap: 1.5rem;
       align-items: center;
       flex-wrap: wrap;
     }
+    
     .academy-visual {
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 1rem 0 2.5rem 0;
       min-height: 500px;
     }
+    
     .cards-container {
       position: relative;
       width: 100%;
@@ -75,76 +81,108 @@ const AcademyHeaderWrapper = styled.div`
         }
       }
     }
+    
     .hero-image-container {
       height: 250px;
       width: 300px;
       position: relative;
-      display:flex;
+      display: flex;
       align-items: center;
       justify-content: center;
     }
+    
+    .academy-logo {
+      position: absolute;
+      height: 180px;
+      width: 180px;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      fill: white;
+    }
 
     /* Mobile Styles */
     @media screen and (max-width: 768px) {
       padding: 2rem 0;
+      min-height: auto;
+      
       
       .header__content {
         text-align: center;
       }
       
       .header__title {
-        font-size: 2.5rem;
+        font-size: 2rem;
         text-align: center;
-        margin-bottom: 10px;
+        padding-right: 0;
+        margin-bottom: 1rem;
       }
       
       .header__title_description {
-        font-size: 1.25rem;
+        font-size: 1.125rem;
+        line-height: 1.75rem;
         text-align: center;
-        margin-bottom: 20px;
+        margin-bottom: 1.5rem;
       }
       
       .header__button_section {
-        display: flex;
         justify-content: center;
         
         button {
           width: 100%;
           max-width: 260px;
         }
       }
+      
       .academy-visual {
         margin-top: 1.5rem;
-        min-height: 430px;
+        min-height: 300px;
       }
+      
       .cards-container {
         max-width: 360px;
         height: 420px;
       }
       
       .hero-image-container {
-        height: 200px;
-        width: 250px;
-        margin: 0 auto;
+        height: 180px;
+        width: 220px;
+        margin: 2rem auto;
+      }
+      
+      .academy-logo {
+        height: 140px;
+        width: 140px;
       }
-
     }
+
     /* Tablet Styles */
     @media screen and (min-width: 769px) and (max-width: 1024px) {
       padding: 3rem 0;
       
       .header__title {
-        font-size: 3.5rem;
+        font-size: 3rem;
+        padding-right: 40px;
       }
       
-      .header__subtitle {
-        font-size: 1.5rem;
+      .header__title_description {
+        font-size: 1.25rem;
       }
       
       .cards-container {
         max-width: 420px;
         height: 520px;
       }
+      
+      .hero-image-container {
+        height: 220px;
+        width: 270px;
+      }
+      
+      .academy-logo {
+        height: 160px;
+        width: 160px;
+      }
     }
   }
 `;
@@ -158,7 +196,7 @@ const Header = ({ isDark }) => {
             <Col className="col" $lg={7} $md={6}>
               <div className="header__content">
                 <h1 className="header__title">
-                  Learn Cloud Native, <br/><span className="highlight">the Modern Way</span>
+                  Learn Cloud Native, the Modern Way
                 </h1>
 
                 <p className="header__title_description">
@@ -182,7 +220,6 @@ const Header = ({ isDark }) => {
                 <img src={Cone} className="cone-image"/>
               </div>
             </Col>
-
           </Row>
         </Container>
       </div>

src/components/Academy/Learners-Section/LearnerSection.js

@@ -98,28 +98,15 @@ const LearnerSectionWrapper = styled.section`
           box-shadow: ${props => props.isDark ? "0 8px 32px rgba(0, 0, 0, 0.3)" : "0 4px 12px rgba(0, 0, 0, 0.1)"};
           transition: all 0.3s ease;
           
-          &:hover {
-            transform: translateY(-5px) scale(1.02);
-            background: ${props => props.isDark ? "rgba(0, 179, 159, 0.15)" : "rgba(0, 179, 159, 0.05)"};
-            border-color: rgba(0, 179, 159, 0.4);
-            box-shadow: ${props => props.isDark ? "0 12px 40px rgba(0, 179, 159, 0.2)" : "0 8px 25px rgba(0, 179, 159, 0.2)"};
-          }
-          
           .stat-number {
             display: block;
             font-size: 2rem;
             font-weight: 800;
-            color: #00b39f;
             margin-bottom: 0.5rem;
             transition: all 0.3s ease;
             animation: pulse 2s infinite;
           }
           
-          &:hover .stat-number {
-            transform: scale(1.1);
-            color: #00d3a9;
-          }
-          
           .stat-label {
             display: block;
             font-size: 0.9rem;
@@ -128,9 +115,6 @@ const LearnerSectionWrapper = styled.section`
             transition: color 0.3s ease;
           }
           
-          &:hover .stat-label {
-            color: #00b39f;
-          }
           
           @keyframes pulse {
             0% { opacity: 1; }
@@ -160,7 +144,7 @@ const LearnerSection = () => {
     <LearnerSectionWrapper className="audience-section learners-section fade-in">
       <div className="audience-content">
         <div className="audience-text">
-          <h2>For <span className="highlight">Learners</span></h2>
+          <h2>For Learners</h2>
           <p>Whether you're just starting with containers or deepening your microservices architecture knowledge, our comprehensive platform adapts to your learning style and pace.</p>
           <ul className="audience-features">
             <li>Progressive <a href="https://cloud.layer5.io/academy?contentType=learning-path" target="_blank" rel="noopener noreferrer">learning paths</a> tailored to your experience</li>