Merge pull request #8962 from sm1990/concept1

Add concept note
ballerina-platform · Apr 29, 2024 · e9d4700 · e9d4700
2 parents a0c59b4 + e0c72ac
commit e9d4700
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 24 deletions.
diff --git a/components/student-engagement/get-involved/GetInvolved.js b/components/student-engagement/get-involved/GetInvolved.js
@@ -18,9 +18,6 @@
 
 import * as React from 'react';
 import { Row, Col, Container } from 'react-bootstrap';
-import Image from 'next-image-export-optimizer';
-
-import { prefix } from '../../../utils/prefix';
 
 import styles from './GetInvolved.module.css';
 

diff --git a/components/student-engagement/outline/Outline.js b/components/student-engagement/outline/Outline.js
@@ -61,7 +61,7 @@ export default function Outline(props) {
             <Card className={`mb-3`} style={{ width: "100%", justifyContent: "center" }}>
               <Row className="g-0 align-items-center">
                 <Col md={2} className='text-center'>
-                  <Card.Img src={`${prefix}/images/guest-lectures-and-talks.svg`} className={styles.icon} alt={`${props.name} icon`} height={100} width={100} />
+                  <Card.Img src={`${prefix}/images/guest-lectures-and-talks.svg`} className={`${styles.icon} pt-3 pt-sm-0`} alt={`${props.name} icon`} height={100} width={100} />
                 </Col>
                 <Col md={10}>
                   <Card.Body>
@@ -79,7 +79,7 @@ export default function Outline(props) {
             <Card className={`mb-3`} style={{ width: "100%", justifyContent: "center" }}>
               <Row className="g-0 align-items-center">
                 <Col md={2} className='text-center'>
-                  <Card.Img src={`${prefix}/images/workshops-and-training-sessions.svg`} className={styles.icon} alt={`${props.name} icon`} height={100} width={100} />
+                  <Card.Img src={`${prefix}/images/workshops-and-training-sessions.svg`} className={`${styles.icon} pt-3 pt-sm-0`} alt={`${props.name} icon`} height={100} width={100} />
                 </Col>
                 <Col md={10}>
                   <Card.Body>
@@ -98,7 +98,7 @@ export default function Outline(props) {
             <Card className={`mb-3`} style={{ width: "100%", justifyContent: "center" }}>
               <Row className="g-0 align-items-center">
                 <Col md={2} className='text-center'>
-                  <Card.Img src={`${prefix}/images/hackathons-and-coding-challenges.svg`} className={styles.icon} alt={`${props.name} icon`} height={100} width={100} />
+                  <Card.Img src={`${prefix}/images/hackathons-and-coding-challenges.svg`} className={`${styles.icon} pt-3 pt-sm-0`} alt={`${props.name} icon`} height={100} width={100} />
                 </Col>
                 <Col md={10}>
                   <Card.Body>
@@ -116,7 +116,7 @@ export default function Outline(props) {
             <Card className={`mb-3`} style={{ width: "100%", justifyContent: "center" }}>
               <Row className="g-0 align-items-center">
                 <Col md={2} className='text-center'>
-                  <Card.Img src={`${prefix}/images/research-collaborations.svg`} className={styles.icon} alt={`${props.name} icon`} height={100} width={100} />
+                  <Card.Img src={`${prefix}/images/research-collaborations.svg`} className={`${styles.icon} pt-3 pt-sm-0`} alt={`${props.name} icon`} height={100} width={100} />
                 </Col>
                 <Col md={10}>
                   <Card.Body>
@@ -134,7 +134,7 @@ export default function Outline(props) {
             <Card className={`mb-3`} style={{ width: "100%", justifyContent: "center" }}>
               <Row className="g-0 align-items-center">
                 <Col md={2} className='text-center'>
-                  <Card.Img src={`${prefix}/images/open-source-projects.svg`} className={styles.icon} alt={`${props.name} icon`} height={100} width={100} />
+                  <Card.Img src={`${prefix}/images/open-source-projects.svg`} className={`${styles.icon} pt-3 pt-sm-0`} alt={`${props.name} icon`} height={100} width={100} />
                 </Col>
                 <Col md={10}>
                   <Card.Body>
@@ -152,14 +152,14 @@ export default function Outline(props) {
             <Card className={`mb-3`} style={{ width: "100%", justifyContent: "center" }}>
               <Row className="g-0 align-items-center">
                 <Col md={2} className='text-center'>
-                  <Card.Img src={`${prefix}/images/industry-projects.svg`} className={styles.icon} alt={`${props.name} icon`} height={100} width={100} />
+                  <Card.Img src={`${prefix}/images/industry-projects.svg`} className={`${styles.icon} pt-3 pt-sm-0`} alt={`${props.name} icon`} height={100} width={100} />
                 </Col>
                 <Col md={10}>
                   <Card.Body>
 
-                    <h3 className="card-title">Industry projects</h3>
+                    <h3 className="card-title">Project mentorship</h3>
 
-                    <p className="card-text">Partner for real-world digital transformation projects to develop skills in industry practices.</p>
+                    <p className="card-text">Connect students with industry experts for innovative solutions through guided project development.</p>
                   </Card.Body>
                 </Col>
               </Row>
@@ -169,13 +169,16 @@ export default function Outline(props) {
 
         </Row>
 
-
-        <Row style={{ marginTop: "20px" }}>
+        <Row style={{ alignItems: "center", marginTop: "20px" }}>
           <Col sm={12}>
+          <a className={styles.learnMore} href='WSO2-Ballerina-Student-Engagement-Program-Concept-Note.pdf' target='_blank' rel="noreferrer">Concept note</a>
+          <a className={styles.learnMore} href='Collaborative-Learning-Initiatives-WSO2-Ballerina-and-Universities.pdf' target='_blank' rel="noreferrer">Learn more</a>
+          </Col>
+        </Row>
 
-            <p><a className={styles.learnMore} href='Collaborative-Learning-Initiatives-WSO2-Ballerina-and-Universities.pdf' target='_blank' rel="noreferrer">Learn more</a></p>
-
-            <p>
+        <Row style={{ marginTop: "10px" }}>
+          <Col sm={12}>
+            <p style={{ marginBottom: "0" }}>
               Want to find out more? Reach out to our team at <a className={styles.mailLink} href="mailto:contact@ballerina.io">contact@ballerina.io</a>
             </p>
 

diff --git a/components/student-engagement/outline/Outline.module.css b/components/student-engagement/outline/Outline.module.css
@@ -11,20 +11,20 @@
 }
 
 .learnMore {
-    display: block;
     transition: none !important;
     font-size: 18px;
     font-weight: 400;
     background-color: #20b6b0;
     color: #ffffff !important;
-    padding: 10px 20px 10px 60px;
+    padding: 13px 20px 10px 60px;
     text-decoration: none;
     min-height: 60px;
     line-height: 35px;
     background-image: url('/images/arrow-right-white.svg');
     background-repeat: no-repeat;
-    background-position: left 20px top 14px;
-    width: fit-content;
+    background-position: left 20px top 16px;
+    /* width: 100%; */
+    margin-bottom: 10px;
 }
 
 .learnMore:hover {
@@ -35,10 +35,20 @@
     .icon {
         padding-left: 0;
     }
-  }
-
-  @media (min-width: 768px) {
+    .learnMore {
+        display: block;
+        width: 100%;
+    }
+
+}
+
+@media (min-width: 768px) {
     .icon {
         padding-left: 1rem;
     }
-  }
+    .learnMore {
+        display: inline-block;
+        width: 200px;
+        margin-right: 20px;
+    }
+}
diff --git a/public/community/student-program/WSO2-Ballerina-Student-Engagement-Program-Concept-Note.pdf b/public/community/student-program/WSO2-Ballerina-Student-Engagement-Program-Concept-Note.pdf