Merge pull request #574 from captain-Akshay/captain/learningpath

feat(components): enchancement in learning component

Author: leecalcote

src/custom/LearningCard/LearningCard.tsx

@@ -19,9 +19,7 @@ interface Tutorial {
     courseTitle: string;
     description: string;
     status?: boolean;
-    cardImage: {
-      src: string;
-    };
+    cardImage: string;
   };
 }
 
@@ -52,7 +50,7 @@ const LearningCard: React.FC<Props> = ({ tutorial, path, courseCount }) => {
                 <p className="summary">{tutorial.frontmatter.description}</p>
               </CardDesc>
               <CardImage>
-                <img src={tutorial.frontmatter.cardImage.src} alt={tutorial.frontmatter.title} />
+                <img src={tutorial.frontmatter.cardImage} alt={tutorial.frontmatter.title} />
               </CardImage>
             </div>
           </CardParent>
@@ -83,7 +81,7 @@ const LearningCard: React.FC<Props> = ({ tutorial, path, courseCount }) => {
                   </p>
                 </CardSubdata>
                 <CardImage>
-                  <img src={tutorial.frontmatter.cardImage.src} alt={tutorial.frontmatter.title} />
+                  <img src={tutorial.frontmatter.cardImage} />
                 </CardImage>
               </div>
             </CardParent>

src/custom/SetupPrerequisite/SetupPrerequisite.tsx

@@ -13,15 +13,13 @@ interface SetupItem {
 }
 interface SetupPreReqProps {
   Steps: SetupItem[];
+  PrerequisiteLine?: string;
 }
-const SetupPreReq: React.FC<SetupPreReqProps> = ({ Steps }) => (
+const SetupPreReq: React.FC<SetupPreReqProps> = ({ Steps, PrerequisiteLine }) => (
   <SetupPreReqWrapper>
     <div className="get-started-desc" id="pre-requisites">
       <h2>Prerequisites</h2>
-      <p>
-        In this learning path, we will be using Meshery as the management plane to manage the
-        service meshes. Meshery, collaborative Kubernetes manager
-      </p>
+      <p>{PrerequisiteLine}</p>
     </div>
     <ContainerCardWrapper id="Set up">
       {Steps.map((item) => {

src/custom/SetupPrerequisite/style.tsx

@@ -33,12 +33,9 @@ const Card = styled('div')(({ theme }) => ({
 
 const CardHeader = styled('div')({
   display: 'flex',
-  flex: 'auto',
-  '& .setup-imgs ': {
-    flex: '0 0 25%',
-    alignSelf: 'center',
-    margin: '0 0.5rem'
-  }
+  alignItems: 'center',
+  margin: '1rem 0 !important',
+  gap: '1rem'
 });
 
 const SetupImgs = styled('div')({