Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a supporters section to the frontpage #226

Merged
merged 5 commits into from
Nov 24, 2024
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
217 changes: 217 additions & 0 deletions src/components/Supporters/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,217 @@
import React from "react";
import Link from "@docusaurus/Link";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ThemedImage from "@theme/ThemedImage";
import styles from "./styles.module.css";

/* data of supporters */
const financial = [];

const infrastructure = [
{
name: "Anaconda",
link: "https://www.anaconda.com/",
light: "img/supporters/anaconda_light.svg",
dark: "img/supporters/anaconda_dark.svg",
width: 250,
},
{
name: "Netlify",
link: "https://www.netlify.com/",
light: "img/supporters/netlify_light.svg",
dark: "img/supporters/netlify_dark.svg",
width: 250,
},
{
name: "Zulip",
link: "https://zulip.com",
light: "img/supporters/zulip.svg",
dark: "img/supporters/zulip.svg",
width: 250,
},
];

const developer = [
{
name: "Anaconda",
link: "https://www.anaconda.com/",
light: "img/supporters/anaconda_light.svg",
dark: "img/supporters/anaconda_dark.svg",
width: 250,
},
// {
// name: "IOOS Integrated Ocean Observing System",
// link: "https://ioos.noaa.gov/",
// light: "img/supporters/ioos.png",
// dark: "img/supporters/ioos.png",
// width: 150,
// },
Comment on lines +42 to +48
Copy link
Contributor Author

@jaimergp jaimergp Nov 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ocefpaf is it okay to also mention IOOS here? And if that's the case, should that info also show up in steering.csv?

Suggested change
// {
// name: "IOOS Integrated Ocean Observing System",
// link: "https://ioos.noaa.gov/",
// light: "img/supporters/ioos.png",
// dark: "img/supporters/ioos.png",
// width: 150,
// },
{
name: "IOOS Integrated Ocean Observing System",
link: "https://ioos.noaa.gov/",
light: "img/supporters/ioos.png",
dark: "img/supporters/ioos.png",
width: 150,
},

{
name: "NVIDIA",
link: "https://www.nvidia.com/",
light: "img/supporters/nvidia_light.svg",
dark: "img/supporters/nvidia_dark.svg",
width: 250,
},
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jakirkham is it okay to also mention y'all here?

// {
// name: "Voltron Data",
// link: "https://voltrondata.com/",
// light: "img/supporters/voltron_light.svg",
// dark: "img/supporters/voltron_dark.svg",
// width: 250,
// },
Comment on lines +56 to +62
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mariusvniekerk is it okay to also mention y'all here? If that's the case, could you also add that info to steering.csv? Thanks!

{
name: "Quansight Labs",
link: "https://labs.quansight.org/",
light: "img/supporters/quansightlabs_light.svg",
dark: "img/supporters/quansightlabs_dark.svg",
width: 250,
},
{
name: "QuantStack",
link: "https://quantstack.net/",
light: "img/supporters/quantstack_light.svg",
dark: "img/supporters/quantstack_dark.svg",
width: 250,
},
jaimergp marked this conversation as resolved.
Show resolved Hide resolved
{
name: "Prefix.dev",
link: "https://prefix.dev/",
light: "img/supporters/prefix_light.svg",
dark: "img/supporters/prefix_dark.svg",
width: 250,
},
jaimergp marked this conversation as resolved.
Show resolved Hide resolved
{
name: "QuantCo",
link: "https://www.quantco.com/",
light: "img/supporters/quantco_light.svg",
dark: "img/supporters/quantco_dark.svg",
width: 210,
},
];

export default function Supporters() {
return (
<div className={[styles.supporters, styles.section_padding].join(" ")}>
<div className={styles.supporters_conda_org}>
<h1 className={styles.gradient_text}>Supporters</h1>
<p>
If you like the conda community and want to support our mission,
please consider making a{" "}
<Link to="https://opencollective.com/conda">donation</Link> to support
our efforts.
</p>
</div>
<div className={styles.fiscal_sponsor}>
<Link to="https://numfocus.org/">
<div className={styles.numfocus_card}>
<ThemedImage
className={styles.image}
alt="NumFOCUS Logo"
sources={{
light: useBaseUrl("/img/supporters/numfocus.svg"),
dark: useBaseUrl("/img/supporters/numfocus.svg"),
}}
width="100%"
/>
</div>
</Link>
<div className={styles.about_numfocus}>
<h3>
conda is a <span className="gradient_text">fiscally sponsored</span>{" "}
project of NumFOCUS.
</h3>
<p>
A nonprofit dedicated to supporting the open source scientific
computing community.
</p>
</div>
</div>
<div className={styles.other_supporters}>
{financial.length > 0 ? (
<div className={styles.supporters_card}>
<div className={styles.supporters_conda_org}>
<h2>
<span className="gradient_text">Financial</span> Support
</h2>
</div>
<div className={styles.card}>
{financial.map(({ name, link, light, dark, width }, index) => (
<Link to={link} key={index}>
<div className={styles.card_wrapper}>
<ThemedImage
className={styles.image}
alt={`${name} logo`}
title={`Go to ${name}'s website`}
sources={{
light: useBaseUrl(`${light}`),
dark: useBaseUrl(`${dark}`),
}}
width={width}
/>
</div>
</Link>
))}
</div>
</div>
) : null}
{infrastructure.length > 0 ? (
<div className={styles.supporters_card}>
<div className={styles.supporters_conda_org}>
<h2>
<span className="gradient_text">Infrastructure</span> Support
</h2>
</div>
<div className={styles.card}>
{infrastructure.map(
({ name, link, light, dark, width }, index) => (
<Link key={index} to={link}>
<div className={styles.card_wrapper}>
<ThemedImage
className={styles.image}
alt={`${name} logo`}
title={`Go to ${name}'s website`}
sources={{
light: useBaseUrl(`${light}`),
dark: useBaseUrl(`${dark}`),
}}
width={width}
/>
</div>
</Link>
),
)}
</div>
</div>
) : null}
{developer.length > 0 ? (
<div className={styles.supporters_card}>
<div className={styles.supporters_conda_org}>
<h2>
<span className="gradient_text">Developer</span> Support
</h2>
</div>
<div className={styles.card}>
{developer.map(({ name, link, light, dark, width }, index) => (
<Link key={index} to={link}>
<div className={styles.card_wrapper}>
<ThemedImage
className={styles.image}
alt={`${name} logo`}
title={`Go to ${name}'s website`}
sources={{
light: useBaseUrl(`${light}`),
dark: useBaseUrl(`${dark}`),
}}
width={width}
/>
</div>
</Link>
))}
</div>
</div>
) : null}
</div>
</div>
);
}
177 changes: 177 additions & 0 deletions src/components/Supporters/styles.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
.supporters {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 1.5em;
}

.section_padding {
padding: 3rem 6rem;
}

.supporters_conda_org {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
}

.supporters_conda_org h1 {
font-weight: 700;
font-size: 50px;
line-height: 70px;
}

.supporters_conda_org h2 {
font-weight: 700;
font-size: 32px;
line-height: 30px;
}

.supporters_conda_org p {
font-size: 18px;
font-weight: 500;
text-align: justify;
padding: 10px;
}

.fiscal_sponsor {
display: flex;
flex-direction: row;
width: 80%;
align-items: center;
justify-content: center;
}

.fiscal_sponsor a {
background: none;
color: var(--theme-card-link-color);
}

.numfocus_card {
background: var(--theme-card);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15px;
padding: 3em 5em;
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}

.numfocus_card:hover {
transform: scale(0.9);
}

.about_numfocus {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 2em;
width: 50%;
}

.other_supporters {
display: flex;
flex-direction: column;
margin-top: 2rem;
}

.card {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1em;
margin: 1.5rem;
}

.card_wrapper {
background: var(--theme-card);
display: flex;
height: 100%;
justify-content: center;
align-items: center;
border-radius: 10px;
padding: 2.25rem;
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}

.card_wrapper a {
background: none;
color: var(--theme-card-link-color);
}

.card_wrapper:hover {
transform: scale(0.9);
}

@media screen and (max-width: 1050px) {
.section_padding {
padding: 3rem;
}

.fiscal_sponsor {
flex-direction: column;
width: 100%;
}

.numfocus_card {
margin-bottom: 2em;
width: 100%;
align-self: center;
}

.about_numfocus {
align-self: center;
text-align: center;
padding: 0;
width: 100%;
}

.card {
grid-template-columns: repeat(2, 1fr);
}
}

@media screen and (max-width: 650px) {
.section_padding {
padding: 2rem;
}

.supporters_conda_org h1 {
font-size: 28px;
line-height: 26px;
}

.numfocus_card {
padding: 2em 3em;
}

.card {
grid-template-columns: repeat(1, 1fr);
}
}

@media screen and (max-width: 490px) {
.section_padding {
padding: 1rem;
}

.supporters_conda_org h1 {
font-size: 24px;
line-height: 22px;
}

.supporters_conda_org p {
font-size: 16px;
}
}

.gradient_text {
background: var(--gradient-text);
background-clip: text;
-webkit-text-fill-color: transparent;
}
Loading
Loading