change hero seciton image

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

Author: Vincamine

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

@@ -2,7 +2,6 @@ import React from "react";
 import styled from "styled-components";
 
 const EnterpriseSectionWrapper = styled.section`
-  font-family: "Qanelas Soft", sans-serif;
   
   &.audience-section.enterprise-section {
     padding: 4rem 0;

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

@@ -2,12 +2,9 @@ import React from "react";
 import styled from "styled-components";
 import { Row, Col, Container } from "../../../reusecore/Layout";
 import Button from "../../../reusecore/Button";
-import Five from "../image/hero-section.png";
-
-
-const AcademyHeaderWrapper = styled.div`
-  font-family: "Qanelas Soft", sans-serif;
-  
+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 {
     background: linear-gradient(135deg, #0a1a1a 0%, #1a2d2d 25%, #2d4a47 50%, #1a2d2d 75%, #0a1a1a 100%);
     padding: 2rem 0;
@@ -94,7 +91,14 @@ const AcademyHeaderWrapper = styled.div`
         }
       }
     }
-
+    .hero-image-container {
+      height: 250px;
+      width: 300px;
+      position: relative;
+      display:flex;
+      align-items: center;
+      justify-content: center;
+    }
 
     /* Mobile Styles */
     @media screen and (max-width: 768px) {
@@ -178,11 +182,13 @@ const Header = ({ isDark }) => {
               </div>
             </Col>
 
-            <Col className="col academy-visual" $lg={5} $md={6}>
-              <div className="cards-container">
-                <img src={Five} alt="Academy Hero Section" />
+            <Col className="hero-image" $lg={6} $md={6}>
+              <div className="hero-image-container">
+                <AcademyLogo className="academy-logo" style={{ position: "absolute", height: "180px", width: "180px" }}/>
+                <img src={Cone} className="cone-image"/>
               </div>
             </Col>
+
           </Row>
         </Container>
       </div>

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

@@ -1,9 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-const LearnerSectionWrapper = styled.section`
-  font-family: "Qanelas Soft", sans-serif;
-  
+const LearnerSectionWrapper = styled.section`  
   &.audience-section.learners-section {
     padding: 4rem 0;
     background: ${props => props.theme.body};

src/components/Academy/image/hero-section.png

@@ -100,18 +100,18 @@ export const GitOpsWrapper = styled.section`
                 gap: 1.25rem;
 
                 .hero-image-container {
-                   height: 250px;
-                   width: 300px;
-                   position: relative;
-                   display:flex;
-                   align-items: center;
-                   justify-content: center;
-
-                   .kanvas-stack-hero {
-                      position: absolute;
-                      height: 80px;
-                      animation: "floating 3s ease-in-out infinite";
-                   }
+                  height: 250px;
+                  width: 300px;
+                  position: relative;
+                  display:flex;
+                  align-items: center;
+                  justify-content: center;
+
+                  .kanvas-stack-hero {
+                    position: absolute;
+                    height: 80px;
+                    animation: "floating 3s ease-in-out infinite";
+                  }
 
                   @media only screen and (min-width: 768px) {
                     height: 542px;