Update contribute section (CIROH-UA#167)

src/components/HomepageFeatures/index.js

@@ -319,10 +319,11 @@ const Card = ({ title, image, description, link }) => (
   </div>
 );
 
+
 export default function HomepageFeatures() {
   return (
     <section className={styles.features}>
-      <div className="container" style={{width:"100%"}}>
+      <div className="container" >
         <div className="row">
           <Card
             title="Documentation"
@@ -342,21 +343,22 @@ export default function HomepageFeatures() {
             description="Elevate your expertise through our training programs. Delve into our tutorials and educational resources, covering topics such as the NextGen framework, Data Science model, and more."
             link="/docs/education/"
           />
+
+
         </div>
-        <div className={clsx('hero hero--primary', styles.heroBanner)}>
+      </div>
+      <div className={clsx('hero hero--primary', styles.heroBanner)}>
           <div className="container">
-            <div className="hero-content" style={{ display: 'flex' }}>
+            <div className={styles.content}>
 
               <div className="hero-text" >
                 <h1 className={styles.h1}>CONTRIBUTE</h1>
                 <br />
                 <p className={styles.heroText}>
-                We would like CIROH Consortium members to contribute to CIROH DocuHub. Please contribute by adding product/project documentation, tutorials, training data, or conference presentations. 
-                The CIROH DocuHub repository provides a collaborative platform for sharing project's technical documentation.<br /><br /> <strong>Learn more about how you can contribute and access the CIROH DocuHub repository here:</strong></p>
-                <br />
+                We would like CIROH Consortium members to contribute to CIROH DocuHub. Please contribute by adding product/project documentation, tutorials, training data, or conference presentations. The CIROH DocuHub repository provides a collaborative platform for sharing project's technical documentation. <strong>Learn more about how you can contribute and access the CIROH DocuHub repository here:</strong></p>
                 <br />
-                <div className={styles.row1}>
-                <a className={`button button--info ${styles.col4}`} href="/Contribute" style={{ textDecoration: 'none'}}>
+                <div className={styles.content}>
+                <a className={`button button--info ${styles.col4}`} href="/Contribute" style={{ textDecoration: 'none',marginRight: '10px'}}>
                   How to Contribute?
                 </a>
                 <a className={`button button--info ${styles.col4}`} href="https://github.com/CIROH-UA/ciroh-ua_website" style={{ textDecoration: 'none'}}>
@@ -368,6 +370,7 @@ export default function HomepageFeatures() {
             </div>
           </div>
         </div>
+      <div className="container" style={{width:"100%"}}>
         <div className={styles.bgcontainer}>
         <div className="container-fluid">
           <div className="row">

src/components/HomepageFeatures/styles.module.css

@@ -1,5 +1,4 @@
 .features {
-  display: flex;
   align-items: center;
   padding: 2rem 0;
   width: 100%;
@@ -45,24 +44,27 @@
 /* turn on invert filter for logo container when dark mode is on for docusauras */
 
 .heroBanner {
-  padding: 3rem 4rem 0rem 4rem;
+  padding: 3rem 4rem 3rem 4rem;
   text-align: left;
-  position: relative;
   overflow: auto;
   margin: 3rem 0rem;
-  border-radius: 20px;
 }
-
+.content
+{
+  display:flex;
+  justify-content:flex-start;
+}
 
 .buttons {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .heroimage{
-  width: 30%;
+  width: 35%;
   margin: auto 0;
-  height: 100%;
+  border-radius: 18px;
+  margin-left: 1.4rem;
 }
 .row1{
   display: flex;
@@ -79,15 +81,15 @@
   width: 30%;
 }
 .col4{
-  width:48%;
+  width:40%;
   margin-bottom: calc(0.4rem + 1.5vw);
 }
 
 @media screen and (max-width: 1440px) {
   /* Styles for small devices */
 
   .heroBanner {
-    padding: 3rem 4rem 3rem 4rem;
+    padding: 2rem 4rem 2rem 4rem;
   }
 }
 
@@ -116,6 +118,7 @@
   .heroimage{
     width:310px;
 
+
   }
 }
 @media screen and (max-width: 840px) {
@@ -124,10 +127,16 @@
   .heroimage{
     width:0px;
   }
-  .heroText,.h1{
+  .h1{
     text-align: center;
   }
-
+  .content{
+    display: block;
+  }
+}
+.contribute{
+  background:white;
+  width:100%;
 }
 @media screen and (max-width: 840px) {
   /* Styles for small devices */