change number in LearnerSection and add price and mooc comparison

Signed-off-by: Wyllie Fang <wylliefang@gmail.com>

Author: Vincamine

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

@@ -164,6 +164,17 @@ const EnterpriseSectionWrapper = styled.section`
           }
         }
       }
+
+      .button-container {
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        
+        @media (max-width: 600px) {
+          justify-content: center;
+        }
+      }
     }
     
     @media (max-width: 768px) {
@@ -227,19 +238,28 @@ const EnterpriseSection = () => {
         </div>
         <div className="audience-text">
           <h2>For <span className="highlight">Enterprise</span> Teams</h2>
-          <p>Accelerate your enterprise platform transformation with structured cloud native training, customizable contents, and enterprise-grade analytics to maximize ROI and reduce risk.</p>
+          <p>Accelerate your enterprise platform transformation with structured cloud native training, customizable contents, and enterprise-grade analytics to maximize ROI and reduce risk. <a href="https://layer5.io/resources/academy/layer5-academy-vs-moocit" target="_blank" rel="noopener noreferrer">Compare Layer5 Academy with traditional platforms.</a></p>
           <ul className="audience-features">
-            <li>Three comprehensive <a href="#" target="_blank" rel="noopener noreferrer">content library</a>: Learning Paths, Challenges, and Certifications for all skill levels and training scenarios</li>
+            <li>Three comprehensive <a href="https://docs.layer5.io/cloud/academy/creating-content/" target="_blank" rel="noopener noreferrer">content library</a>: Learning Paths, Challenges, and Certifications for all skill levels and training scenarios</li>
             <li>Enterprise <a href="https://badges.layer5.io/" target="_blank" rel="noopener noreferrer">badge system</a> to showcase team achievements and drive motivation across your organization</li>
             <li>Advanced <a href="https://docs.layer5.io/cloud/academy/creating-content/instructor-console-guide/" target="_blank" rel="noopener noreferrer">instructor dashboard</a> with real-time progress tracking, skill assessment, and detailed analytics</li>
-            <li>Flexible <a href="#" target="_blank" rel="noopener noreferrer">invitation</a> system: Host public challenges, onboard new partners, and accelerate engineer hiring with structured assessments</li>
+            <li>Flexible invitation system: Host public challenges, onboard new partners, and accelerate engineer hiring with structured assessments</li>
           </ul>
-          <Button
-            $primary
-            title="Schedule Enterprise Demo"
-            $external={true}
-            $url="https://calendar.google.com/calendar/appointments/schedules/AcZssZ3pmcApaDP4xd8hvG5fy8ylxuFxD3akIRc5vpWJ60q-HemQi80SFFAVftbiIsq9pgiA2o8yvU56?gv=true"
-          />
+          <div className="button-container">
+            <Button
+              $primary
+              title="View Pricing"
+              $external={true}
+              $url="https://layer5.io/pricing"
+            />
+            <Button
+              $primary
+              title="Schedule Enterprise Demo"
+              $external={true}
+              $url="https://calendar.google.com/calendar/appointments/schedules/AcZssZ3pmcApaDP4xd8hvG5fy8ylxuFxD3akIRc5vpWJ60q-HemQi80SFFAVftbiIsq9pgiA2o8yvU56?gv=true"
+            />
+
+          </div>
         </div>
       </div>
     </EnterpriseSectionWrapper>

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

@@ -178,7 +178,7 @@ const Header = ({ isDark }) => {
 
             <Col className="hero-image" $lg={6} $md={6}>
               <div className="hero-image-container">
-                <AcademyLogo className="academy-logo" style={{ position: "absolute", height: "180px", width: "180px", top: "50%", left: "50%", transform: "translate(-50%, -50%)", color: "white" }}/>
+                <AcademyLogo className="academy-logo" style={{ position: "absolute", height: "180px", width: "180px", top: "50%", left: "50%", transform: "translate(-50%, -50%)", fill: "white" }}/>
                 <img src={Cone} className="cone-image"/>
               </div>
             </Col>

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

@@ -181,21 +181,22 @@ const LearnerSection = () => {
           <h3 style={{ marginBottom: "1rem", color: "var(--primary-color)", textAlign: "center" }}>Learning Community</h3>
           <div className="stats-grid">
             <div className="stat-item">
-              <span className="stat-number">7K+</span>
-              <span className="stat-label">Active Learners</span>
+              <span className="stat-number">3</span>
+              <span className="stat-label">Difficulty Levels</span>
             </div>
             <div className="stat-item">
-              <span className="stat-number">50+</span>
-              <span className="stat-label">Hands-on Labs</span>
+              <span className="stat-number">24/7</span>
+              <span className="stat-label">Community Support</span>
             </div>
             <div className="stat-item">
-              <span className="stat-number">95%</span>
-              <span className="stat-label">Completion Rate</span>
+              <span className="stat-number">100%</span>
+              <span className="stat-label">Cloud Native Focused</span>
             </div>
             <div className="stat-item">
-              <span className="stat-number">24/7</span>
-              <span className="stat-label">Community Support</span>
+              <span className="stat-number">100%</span>
+              <span className="stat-label">Community Centric</span>
             </div>
+
           </div>
         </div>
       </div>