Skip to content

Commit

Permalink
Updated home page
Browse files Browse the repository at this point in the history
  • Loading branch information
@manjilasingh
manjilasingh committed Jun 18, 2024
1 parent fd6125c commit 006e822
Show file tree
Hide file tree
Showing 2 changed files with 147 additions and 95 deletions.
151 changes: 78 additions & 73 deletions src/components/HomepageFeatures/index.js
View file
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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",
},

];
Expand All @@ -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",
},

{
Expand Down Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
);
Expand Down
Loading

0 comments on commit 006e822

Please sign in to comment.