Merge pull request #8952 from sm1990/concept

Add the Concept note
ballerina-platform · Apr 24, 2024 · 52b2dfb · 52b2dfb
2 parents 269dc27 + 81f6ea1
commit 52b2dfb
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 14 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,7 +152,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/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>
@@ -169,13 +169,22 @@ export default function Outline(props) {
 
         </Row>
 
+        <Row style={{ alignItems: "center", marginTop: "20px" }}>
+          <Col sm={12} md={6} lg={3}>
+            <a className={styles.learnMore} href='WSO2-Ballerina-Student-Engagement-Program-Concept-Note.pdf' target='_blank' rel="noreferrer">Concept note</a>
 
-        <Row style={{ marginTop: "20px" }}>
-          <Col sm={12}>
+          </Col>
 
-            <p><a className={styles.learnMore} href='Collaborative-Learning-Initiatives-WSO2-Ballerina-and-Universities.pdf' target='_blank' rel="noreferrer">Learn more</a></p>
+          <Col sm={12} md={6} lg={3}>
 
-            <p>
+            <a className={styles.learnMore} href='Collaborative-Learning-Initiatives-WSO2-Ballerina-and-Universities.pdf' target='_blank' rel="noreferrer">Learn more</a>
+
+          </Col>
+        </Row>
+
+        <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
@@ -24,7 +24,8 @@
     background-image: url('/images/arrow-right-white.svg');
     background-repeat: no-repeat;
     background-position: left 20px top 14px;
-    width: fit-content;
+    width: 100%;
+    margin-bottom: 10px;
 }
 
 .learnMore:hover {

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