From 006e82253c6ebefcf643cfcea6f50f3c3c4631ed Mon Sep 17 00:00:00 2001
From: Manjila Singh <singh.manjila02@gmail.com>
Date: Tue, 18 Jun 2024 17:45:44 +0100
Subject: [PATCH] Updated home page

---
 src/components/HomepageFeatures/index.js      | 151 +++++++++---------
 .../HomepageFeatures/styles.module.css        |  91 ++++++++---
 2 files changed, 147 insertions(+), 95 deletions(-)

diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
index c0dd6ea..6899cc0 100644
--- a/src/components/HomepageFeatures/index.js
+++ b/src/components/HomepageFeatures/index.js
@@ -1,6 +1,6 @@
 import React from "react";
-import styles from "./styles.module.css";
 import clsx from 'clsx';
+import styles from "./styles.module.css";
 // import { library } from "@fortawesome/fontawesome-svg-core";
 // import { fab } from "@fortawesome/free-brands-svg-icons";
 
@@ -14,29 +14,29 @@ const SponserList = [
     name: "NOAA",
     logo: "https://ciroh.ua.edu/wp-content/uploads/2023/04/noaa-emblem-rgb-2022-1-150x150.png",
     link: "https://www.noaa.gov/",
-    width: "100",
-    height: "100",
+    width: "120",
+    height: "120",
   },
   {
     name: "USGS",
     logo: "https://ciroh.ua.edu/wp-content/uploads/2023/04/USGS_logo_green-1.png",
     link: "https://www.usgs.gov/",
-    width: "190",
-    height: "100",
+    width: "150",
+    height: "60",
   },
   {
     name: "2I2C",
     logo: "https://ciroh.ua.edu/wp-content/uploads/2023/04/2i2c_logo-150x150.png",
     link: "https://2i2c.org/",
     width: "120",
-    height: "110",
+    height: "120",
   },
   {
     name: "Lynker",
     logo: "https://ciroh.ua.edu/wp-content/uploads/2023/04/Lynker-no-tag.png",
     link: "https://lynker.com/",
-    width: "240",
-    height: "90",
+    width: "150",
+    height: "50",
   },
   
 ];
@@ -46,7 +46,7 @@ const MemberList = [
     logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/University_of_Utah_horizontal_logo.svg/1280px-University_of_Utah_horizontal_logo.svg.png",
     link: "https://www.civil.utah.edu/",
     width: "210",
-    height: "60",
+    height: "70",
   },
   
   {
@@ -328,31 +328,32 @@ export default function HomepageFeatures() {
             link="/docs/education/"
           />
         </div>
-
         <div className={clsx('hero hero--primary', styles.heroBanner)}>
           <div className="container">
             <div className="hero-content" style={{ display: 'flex' }}>
               
               <div className="hero-text" >
-                <h1>CONTRIBUTE</h1>
+                <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>
+                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 />
                 <br />
-                <a className="button button--info" href="/Contribute" style={{ textDecoration: 'none', marginRight: '20px', marginBottom:'14px' }}>
+                <div className={styles.row1}>
+                <a className={`button button--info ${styles.col4}`} href="/Contribute" style={{ textDecoration: 'none'}}>
                   How to Contribute?
                 </a>
-                <a className="button button--info" href="https://github.com/CIROH-UA/ciroh-ua_website" style={{ textDecoration: 'none', marginRight: '0px', marginBottom:'14px' }}>
+                <a className={`button button--info ${styles.col4}`} href="https://github.com/CIROH-UA/ciroh-ua_website" style={{ textDecoration: 'none'}}>
                   GitHub Repo 
                 </a>
+                </div>
               </div>
               <img src="./img/contribute.png" alt="Contribute to CIROH DocuHub" class={styles.heroimage} />
             </div>
           </div>
         </div>
-
-        {/* i want one container with two rows. first row has one column while second row has 2 columns */}
+        <div className={styles.bgcontainer}>
         <div className="container-fluid">
           <div className="row">
             <div className="col col--12">
@@ -361,25 +362,26 @@ export default function HomepageFeatures() {
                   <div className={styles.heading}>Consortium Sponsers</div>
                 </div>
               </div>
-              <div className="row">
-                <div className="col col--3">
+              <div className={styles.row1}>
+                <div className={styles.col1} align="center">
                   <a href={SponserList[0].link}>
-                    <img className={styles.imagecontainer} src={SponserList[0].logo} alt={SponserList[0].name} width={SponserList[0].width} height={SponserList[0].height} />
+                    <img className={styles.sponserimage} src={SponserList[0].logo} alt={SponserList[0].name} width={SponserList[0].width} height={SponserList[0].height} />
                   </a>
                 </div>
-                <div className="col col--3">
+                <div className={`${styles.flex} ${styles.col1}`} align="center">
                   <a href={SponserList[1].link}>
-                    <img className={styles.imagecontainer} src={SponserList[1].logo} alt={SponserList[1].name} width={SponserList[1].width} height={SponserList[1].height} />
-                  </a>
+                    <img className={styles.sponserimage} src={SponserList[1].logo} alt={SponserList[1].name} width={SponserList[1].width} height={SponserList[1].height} />
+                  </a> 
                 </div>
-                <div className="col col--3">
-                  <a href={SponserList[2].link}>
-                    <img className={styles.imagecontainer} src={SponserList[2].logo} alt={SponserList[2].name} width={SponserList[2].width} height={SponserList[2].height} />
+               
+                   <div className={`${styles.flex} ${styles.col1}`} align="center" >
+                    <a href={SponserList[2].link}>
+                      <img className={styles.sponserimage} src={SponserList[2].logo} alt={SponserList[2].name} width={SponserList[2].width} height={SponserList[2].height} />
                   </a>
                 </div>
-                <div className="col col--3">
+                <div className={styles.col1} align="center">
                   <a href={SponserList[3].link}>
-                    <img className={styles.imagecontainer} src={SponserList[3].logo} alt={SponserList[3].name} width={SponserList[3].width} height={SponserList[3].height} />
+                    <img className={styles.sponserimage} src={SponserList[3].logo} alt={SponserList[3].name} width={SponserList[3].width} height={SponserList[3].height} />
                   </a>
                 </div>
               </div>
@@ -394,73 +396,73 @@ export default function HomepageFeatures() {
               </div>
               <div className="row">
                 <div className="col">
-                  <div className="row">
-                    <div className="col col--6 text-center">
+                  <div className={styles.row1}>
+                    <div className={`${styles.flex} ${styles.col2}`}>
                       <a href={MemberList[0].link}>
-                        <img className={styles.imagecontainer+" center-block"}src={MemberList[0].logo} alt={MemberList[0].name} width={MemberList[0].width} height={MemberList[0].height} />
+                        <img className={styles.imagecontainer}src={MemberList[0].logo} alt={MemberList[0].name} width={MemberList[0].width} height={MemberList[0].height} />
                       </a>
                     </div>
-                    <div className="col col--6">
+                    <div className={styles.col2}>
                       <a href={MemberList[1].link}>
                         <img className={styles.imagecontainer} src={MemberList[1].logo} alt={MemberList[1].name} width={MemberList[1].width} height={MemberList[1].height} />
                       </a>
                     </div>
                   </div>
-                  <div className="row">
-                    <div className="col col--6">
+                  <div className={styles.row1}>
+                    <div className={styles.col2}>
                       <a href={MemberList[2].link}>
                         <img className={styles.imagecontainer} src={MemberList[2].logo} alt={MemberList[2].name} width={MemberList[2].width} height={MemberList[2].height} />
                       </a>
                     </div>
-                    <div className="col col--6">
+                    <div className={styles.col2}>
                       <a href={MemberList[3].link}>
                         <img className={styles.imagecontainer} src={MemberList[3].logo} alt={MemberList[3].name} width={MemberList[3].width} height={MemberList[3].height} />
                       </a>
                     </div>
                   </div>
-                  <div className="row">
-                    <div className="col col--6">
+                  <div className={styles.row1}>
+                    <div className={styles.col2}>
                       <a href={MemberList[4].link}>
                         <img className={styles.imagecontainer} src={MemberList[4].logo} alt={MemberList[4].name} width={MemberList[4].width} height={MemberList[4].height} />
                       </a>
                     </div>
-                    <div className="col col--6">
+                    <div className={styles.col2}>
                       <a href={MemberList[5].link}>
                         <img className={styles.imagecontainer} src={MemberList[5].logo} alt={MemberList[5].name} width={MemberList[5].width} height={MemberList[5].height} />
                       </a>
                     </div>
                   </div>
-                  <div className="row">
-                    <div className="col col--6">
+                  <div className={styles.row1}>
+                    <div className={styles.col2}>
                       <a href={MemberList[6].link}>
                         <img className={styles.imagecontainer} src={MemberList[6].logo} alt={MemberList[6].name} width={MemberList[6].width} height={MemberList[6].height} />
                       </a>
                     </div>
-                    <div className="col col--6">
+                    <div className={styles.col2}>
                       <a href={MemberList[7].link}>
                         <img className={styles.imagecontainer} src={MemberList[7].logo} alt={MemberList[7].name} width={MemberList[7].width} height={MemberList[7].height} />
                       </a>
                     </div>
                   </div>
-                  <div className="row">
-                    <div className="col col--6">
+                  <div className={styles.row1}>
+                    <div className={styles.col2}>
                       <a href={MemberList[8].link}>
                         <img className={styles.imagecontainer} src={MemberList[8].logo} alt={MemberList[8].name} width={MemberList[8].width} height={MemberList[8].height} />
                       </a>
                     </div>
-                    <div className="col col--6">
+                    <div className={`${styles.flex} ${styles.col2}`}>
                       <a href={MemberList[9].link}>
                         <img className={styles.imagecontainer} src={MemberList[9].logo} alt={MemberList[9].name} width={MemberList[9].width} height={MemberList[9].height} />
                       </a>
                     </div>
                   </div>
-                  <div className="row">
-                    <div className="col col--6">
+                  <div className={styles.row1}>
+                    <div className={styles.col2} >
                       <a href={MemberList[10].link}>
                         <img className={styles.imagecontainer} src={MemberList[10].logo} alt={MemberList[10].name} width={MemberList[10].width} height={MemberList[10].height} />
                       </a>
                     </div>
-                    <div className="col col--6">
+                    <div className={`${styles.flex} ${styles.col2}`}>
                       <a href={MemberList[11].link}>
                         <img className={styles.imagecontainer} src={MemberList[11].logo} alt={MemberList[11].name} width={MemberList[11].width} height={MemberList[11].height} />
                       </a>
@@ -477,83 +479,85 @@ export default function HomepageFeatures() {
             </div>
               <div className="row">
                 <div className="col">
-                  <div className="row">
-                    <div className="col col--6">
+                  <div className={styles.row1}>
+                    <div className={styles.col2}>
                       <a href={PartnerList[0].link}>
                         <img className={styles.imagecontainer} src={PartnerList[0].logo} alt={PartnerList[0].name} width={PartnerList[0].width} height={PartnerList[0].height} />
                       </a>
                     </div>
-                    <div className="col col--6">
+                    <div className={`${styles.flex} ${styles.col2}`}>
                       <a href={PartnerList[1].link}>
                         <img className={styles.imagecontainer} src={PartnerList[1].logo} alt={PartnerList[1].name} width={PartnerList[1].width} height={PartnerList[1].height} />
                       </a>
                     </div>
                   </div>
-                  <div className="row">
-                    <div className="col col--6">
+                  <div className={styles.row1}>
+                    <div className={styles.col2}>
                       <a href={PartnerList[2].link}>
                         <img className={styles.imagecontainer} src={PartnerList[2].logo} alt={PartnerList[2].name} width={PartnerList[2].width} height={PartnerList[2].height} />
                       </a>
                     </div>
-                    <div className="col col--6">
+                    <div className={`${styles.flex} ${styles.col2}`}>
                       <a href={PartnerList[3].link}>
                         <img className={styles.imagecontainer} src={PartnerList[3].logo} alt={PartnerList[3].name} width={PartnerList[3].width} height={PartnerList[3].height} />
                       </a>
                     </div>
                   </div>
-                  <div className="row">
-                    <div className="col col--6">
+                  <div className={styles.row1}>
+                    <div className={styles.col2}>
                       <a href={PartnerList[4].link}>
                         <img className={styles.imagecontainer} src={PartnerList[4].logo} alt={PartnerList[4].name} width={PartnerList[4].width} height={PartnerList[4].height} />
                       </a>
                     </div>
-                    <div className="col col--6">
+                    <div className={`${styles.flex} ${styles.col2}`}>
                       <a href={PartnerList[5].link}>
                         <img className={styles.imagecontainer} src={PartnerList[5].logo} alt={PartnerList[5].name} width={PartnerList[5].width} height={PartnerList[5].height} />
                       </a>
                     </div>
                   </div>
-                  <div className="row">
-                    <div className="col col--6">
+                  <div className={styles.row1}>
+                    <div className={styles.col2}>
                       <a href={PartnerList[6].link}>
                         <img className={styles.imagecontainer} src={PartnerList[6].logo} alt={PartnerList[6].name} width={PartnerList[6].width} height={PartnerList[6].height} />
                       </a>
                     </div>
-                    <div className="col col--6">
-                      <a href={PartnerList[7].link}>
+                    <div className={`${styles.flex} ${styles.col2}`}>
+                      <a href={PartnerList[7].link} >
                         <img className={styles.imagecontainer} src={PartnerList[7].logo} alt={PartnerList[7].name} width={PartnerList[7].width} height={PartnerList[7].height} />
                       </a>
                     </div>
                   </div>
-                  <div className="row">
-                    <div className="col col--6">
+                  <div className={styles.row1}>
+                    <div className={styles.col2}>
                       <a href={PartnerList[8].link}>
                         <img className={styles.imagecontainer} src={PartnerList[8].logo} alt={PartnerList[8].name} width={PartnerList[8].width} height={PartnerList[8].height} />
                       </a>
                     </div>
-                    <div className="col col--6">
+                    <div className={styles.col2}>
                       <a href={PartnerList[9].link}>
                         <img className={styles.imagecontainer} src={PartnerList[9].logo} alt={PartnerList[9].name} width={PartnerList[9].width} height={PartnerList[9].height} />
                       </a>
                     </div>
                   </div>
-                  <div className="row">
-                    <div className="col col--6">
+                  <div className={styles.row1}>
+                    <div className={styles.col2}>
                       <a href={PartnerList[10].link}>
                         <img className={styles.imagecontainer} src={PartnerList[10].logo} alt={PartnerList[10].name} width={PartnerList[10].width} height={PartnerList[10].height} />
                       </a>
                     </div>
-                    <div className="col col--6">
+                    <div className={`${styles.flex} ${styles.col2}`}>
                       <a href={PartnerList[11].link}>
                         <img className={styles.imagecontainer} src={PartnerList[11].logo} alt={PartnerList[11].name} width={PartnerList[11].width} height={PartnerList[11].height} />
                       </a>
                     </div>
-                    <div className="col col--6">
+                  </div>
+                  <div className={styles.row1}>
+                    <div className={styles.col2}>
                       <a href={PartnerList[12].link}>
                         <img className={styles.imagecontainer} src={PartnerList[12].logo} alt={PartnerList[12].name} width={PartnerList[12].width} height={PartnerList[12].height} />
                       </a>
                     </div>
-                    <div className="col col--6">
+                    <div className={`${styles.flex} ${styles.col2}`}>
                       <a href={PartnerList[13].link}>
                         <img className={styles.imagecontainer} src={PartnerList[13].logo} alt={PartnerList[13].name} width={PartnerList[13].width} height={PartnerList[13].height} />
                       </a>
@@ -565,24 +569,25 @@ export default function HomepageFeatures() {
           </div>
         </div>
         
-        
-        
 
-        <div className="row" style={{ paddingTop: 30 }}>
+        <div className={"row"} style={{ paddingTop: 70 }}>
           <div className="col col--4" style={{ textAlign: "center" }}>
-            <img alt="noaaImage" src="img/noaalogo.png"  style={{ height: 175, width: 175, marginTop: 15 }} />
+            <img alt="noaaImage" src="img/noaalogo.png"  style={{ height: 145, width: 145, marginTop: 15 }} />
           </div>
           <div className="col col--4" style={{ textAlign: "center" }}>
-            <img alt="awiImage" src="img/awi.png" style={{ marginTop: 125 }} />
+            <img alt="awiImage" src="img/awi.png" style={{ marginTop: 45, marginBottom:45 }} />
           </div>
           <div className="col col--4" style={{ textAlign: "center" }}>
             <img
               alt="cirohImage"
               src="img/cirohlogo-trans.png"
-              style={{ height: 175, width: 175, marginTop: 15 }}
+              style={{ height: 145, width: 145, marginTop: 15 }}
             />
           </div>
         </div>
+
+        </div> 
+        
       </div>
     </section>
   );
diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css
index eef7939..02a1c79 100644
--- a/src/components/HomepageFeatures/styles.module.css
+++ b/src/components/HomepageFeatures/styles.module.css
@@ -13,23 +13,25 @@
 .imagecontainer{
   display:block;
   margin:1.3rem auto;
-  height:auto;
+  height: auto;
 
 }
+.sponserimage
+{
+  display:inline-block !important;
+  margin: 1.1rem auto;
+  /* height: auto; */
+}
 .heading{
-  font-size: 2.1rem;
-  font-weight: 700;
-  color: #2d3748;
-  margin-bottom: 1rem;
+  font-size: calc(1.4rem + .6vw);
+  font-weight:bolder;
+  color: #2c3e50;
+  line-height: 1.2;
   padding-top: 4rem;
-  padding-bottom: 2rem;
+  padding-bottom: 1.2rem;
   text-align: center;
 }
-@media (dark-theme= "dark") {
-  .logocontainer {
-    filter: invert(1);
-  }
-}
+
 
 
 [data-theme='dark']  .bgcontainer{
@@ -38,6 +40,7 @@
   margin-top: 5%;
   width:100%;
   border-radius:17px;
+  
 }
 /* turn on invert filter for logo container when dark mode is on for docusauras */
 
@@ -50,11 +53,6 @@
   border-radius: 20px;
 }
 
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
-}
 
 .buttons {
   display: flex;
@@ -66,15 +64,52 @@
   margin: auto 0;
   height: 100%;
 }
+.row1{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.col1{
+  width: 25%;
+}
+.col2{
+  width: 50%;
+}
+.col3{
+  width: 30%;
+}
+.col4{
+  width:48%;
+  margin-bottom: calc(0.4rem + 1.5vw);
+}
 
-
-  @media screen and (max-width: 1440px) {
-    /* Styles for small devices */
+@media screen and (max-width: 1440px) {
+  /* Styles for small devices */
   
-    .heroBanner {
-      padding: 3rem 4rem 3rem 4rem;
-    }
+  .heroBanner {
+    padding: 3rem 4rem 3rem 4rem;
   }
+}
+
+
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+  .row1 {
+    flex-wrap: wrap; /* Allows logos to wrap onto new lines */
+  }
+
+  .col1 {
+    width: 50%; /* Adjusts width for two logos per row */
+    margin:0 auto;
+  }
+  .col2{
+    width:35%;
+    margin:0 auto;
+  }
+}
 @media screen and (max-width: 940px) {
   /* Styles for small devices */
 
@@ -89,4 +124,16 @@
   .heroimage{
     width:0px;
   }
+  .heroText,.h1{
+    text-align: center;
+  }
+  
 }
+@media screen and (max-width: 840px) {
+  /* Styles for small devices */
+
+  .col4{
+    width:100%;
+  }
+  
+}
\ No newline at end of file