Skip to content

Commit 83461c3

Browse files
MMeschMMesch
committed
Layout system: Section, SplitSection, CardGrid, Banner — migrate all pages
1 parent a429657 commit 83461c3

28 files changed

Lines changed: 513 additions & 344 deletions

‎src/components/about/FourValues.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,18 @@
1-
import styles from "./styles.module.css";
1+
import CardGrid from "../layout/CardGrid";
22
import { ValueCard } from "@site/src/components/about/ValueCard";
33
import { valuesDetails } from "./Values/valuesDetails";
44

55
export default function FourValues() {
66
return (
7-
<div>
8-
<div className="row">
9-
<div className="col">
10-
<h1>Our values</h1>
11-
</div>
12-
</div>
13-
<ul className={"cards-row " + styles.values_row}>
7+
<>
8+
<h1>Our values</h1>
9+
<CardGrid cols={4}>
1410
{valuesDetails.map((value, index) => (
1511
<li key={index}>
1612
<ValueCard value={value} />
1713
</li>
1814
))}
19-
</ul>
20-
</div>
15+
</CardGrid>
16+
</>
2117
);
2218
}

‎src/components/about/index.tsx‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import styles from "./styles.module.css";
22
import { teams } from "./Team/team";
33
import FourValues from "./FourValues";
44
import SubTeam from "./SubTeam";
5+
import Section from "../layout/Section";
6+
import Banner from "../layout/Banner";
57
import LinkToContact from "../home/LinkToContact";
68

79
export function getTeamByPageName(name: string) {
@@ -14,21 +16,18 @@ export function getTeamByPageName(name: string) {
1416
return null;
1517
}
1618

17-
1819
export function About() {
1920
return (
20-
<div>
21-
<div className="page-content upper-container-with-margin-top">
21+
<>
22+
<Section pageTop>
2223
<FourValues />
23-
24-
<div className="row-with-margins">
25-
<h1>Meet the QuantStack team</h1>
26-
<div className={styles.team_description}>
27-
A team of outliers, leaders in software projects adopted at the
28-
global scale, benefiting millions of people worldwide.
29-
</div>
24+
</Section>
25+
<Section bg="light">
26+
<h1>Meet the QuantStack team</h1>
27+
<div className={styles.team_description}>
28+
A team of outliers, leaders in software projects adopted at the
29+
global scale, benefiting millions of people worldwide.
3030
</div>
31-
3231
<SubTeam
3332
subTeamName={"The leadership team"}
3433
subTeam={teams.leadershipTeam}
@@ -38,13 +37,15 @@ export function About() {
3837
subTeamName={"QuantStack collaborators"}
3938
subTeam={teams.QSCollaboratorsTeam}
4039
/>
41-
</div>
42-
<div className="blue-banner-container">
43-
<div className="blue-banner-header">Join the team</div>
40+
</Section>
41+
<Banner
42+
bg="dark"
43+
title="Join the team"
44+
cta={<LinkToContact label={"JOIN THE TEAM!"} />}
45+
>
4446
QuantStack is seeking talents in the open-source scientific computing
4547
community. Join a team committed to open-science and free software.
46-
<LinkToContact label={"JOIN THE TEAM!"} />
47-
</div>
48-
</div>
48+
</Banner>
49+
</>
4950
);
5051
}

‎src/components/blog/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React, { useState } from "react";
33
import BlogpostCard from "./BlogpostCard";
44
import { blogpostsDetails } from "./blogpostsDetails";
55
import AtomOrange from "/img/icons/RSSOrange.svg";
6+
import Section from "../layout/Section";
67

78
export default function BlogsComponent() {
89
const numberOfBlogs = blogpostsDetails.length;
@@ -22,7 +23,7 @@ export default function BlogsComponent() {
2223
};
2324

2425
return (
25-
<div className="page-content upper-container-with-margin-top">
26+
<Section pageTop>
2627
<div className="flex-full-centered" style={{ marginBottom: "var(--ifm-spacing-lg)" }}>
2728
<h1 className="padding-none margin-none">
2829
Featured Posts by QuantStack Contributors
@@ -52,6 +53,6 @@ export default function BlogsComponent() {
5253
</li>
5354
))}
5455
</ul>
55-
</div>
56+
</Section>
5657
);
5758
}

‎src/components/careers/index.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import styles from "./styles.module.css";
2+
import Section from "../layout/Section";
23
import { interviewDetails } from "./interviewDetails";
34
import Interviews from "./Interviews";
4-
import Header from "./Header";
55
import VisitWTJProfile from "./VisitWTJProfile";
66
import JoinTheTeam from "./JoinTheTeam";
77
import GroupPhotoJupyterConUrl from "@site/static/img/group/group-photo.png";
88

99
export default function Careers() {
1010
return (
11-
<div>
12-
<div className="page-content upper-container-with-margin-top">
11+
<>
12+
<Section pageTop>
1313
<h1>Join the QuantStack team!</h1>
1414
<div className={styles.group_photo_container + " flex-full-centered"}>
1515
<img
@@ -26,8 +26,8 @@ export default function Careers() {
2626
/>
2727
</div>
2828
</div>
29-
</div>
29+
</Section>
3030
<VisitWTJProfile />
31-
</div>
31+
</>
3232
);
3333
}

‎src/components/contact/index.tsx‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
1-
import styles from "./styles.module.css";
1+
import SplitSection from "../layout/SplitSection";
22
import ContactForm from "./ContactForm";
3-
import { useEffect, useState } from "react";
43
import ContactIllustration from "/img/illustrations/contact.svg";
54

65
export function Contact() {
76
return (
8-
<div className="page-content upper-container-with-margin-top">
7+
<SplitSection
8+
ratio="50/50"
9+
pageTop
10+
reverse
11+
image={
12+
<ContactIllustration
13+
height={"460px"}
14+
alt="Illustration for the contact page with a woman, a mobile phone and an envelope."
15+
/>
16+
}
17+
>
918
<h1>Contact us</h1>
10-
<div className="row">
11-
<div className="col col--6 flex-full-centered" style={{ padding: "var(--ifm-spacing-xl)" }}>
12-
<ContactIllustration
13-
height={"460px"}
14-
alt="Illustration for the contact page with a woman, a mobile phone and an envelope."
15-
/>
16-
</div>
17-
<div className="col col--6 flex-full-centered padding-none">
18-
<ContactForm />
19-
</div>
20-
</div>
21-
</div>
19+
<ContactForm />
20+
</SplitSection>
2221
);
2322
}
2423
export default Contact;

‎src/components/fundable/index.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { useState } from "react";
22
import styles from "./styles.module.css";
3+
import Section from "../layout/Section";
4+
import CardGrid from "../layout/CardGrid";
35
import { fundableProjectsDetails } from "./projectsDetails";
46
import FundableProjectCard from "./FundableProjectCard";
57
import LinkToContact from "../home/LinkToContact";
@@ -23,7 +25,7 @@ export function MainAreaFundableProjects() {
2325
: ALL_PROJECTS.filter((p) => p.category === active);
2426

2527
return (
26-
<div>
28+
<>
2729
<h1>Projects available for funding</h1>
2830

2931
<div className={styles.filter_tags}>
@@ -38,25 +40,27 @@ export function MainAreaFundableProjects() {
3840
))}
3941
</div>
4042

41-
<div className={styles.cards_grid}>
43+
<CardGrid cols={3}>
4244
{visible.map((project) => (
43-
<FundableProjectCard key={project.pageName} project={project} />
45+
<li key={project.pageName}>
46+
<FundableProjectCard project={project} />
47+
</li>
4448
))}
45-
</div>
49+
</CardGrid>
4650

4751
<div className={styles.propose_section}>
4852
<h2>Can't find a project?</h2>
4953
<p>If you have a project in mind that you think would be relevant to our expertise, please contact us to discuss it.</p>
5054
<LinkToContact label="CONTACT US!" />
5155
</div>
52-
</div>
56+
</>
5357
);
5458
}
5559

5660
export default function FundableProjects() {
5761
return (
58-
<div className="page-content upper-container-with-margin-top">
62+
<Section pageTop>
5963
<MainAreaFundableProjects />
60-
</div>
64+
</Section>
6165
);
6266
}

‎src/components/fundable/styles.module.css‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -32,24 +32,6 @@
3232
border-color: var(--ifm-color-secondary-s2);
3333
}
3434

35-
.cards_grid {
36-
display: grid;
37-
grid-template-columns: repeat(3, 1fr);
38-
gap: var(--ifm-spacing-xl);
39-
margin-bottom: var(--ifm-spacing-3xl);
40-
}
41-
42-
@media (max-width: 996px) {
43-
.cards_grid {
44-
grid-template-columns: repeat(2, 1fr);
45-
}
46-
}
47-
48-
@media (max-width: 600px) {
49-
.cards_grid {
50-
grid-template-columns: 1fr;
51-
}
52-
}
5335

5436
.fund_card {
5537
background: white;

‎src/components/home/LearnMore/index.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1+
import Banner from "../../layout/Banner";
12
import LinkToContact from "../LinkToContact";
2-
import styles from "./styles.module.css";
33

44
export default function LearnMore() {
55
return (
6-
<div className={"blue-banner-container" + " " + styles.learn_more_container}>
7-
<div className="blue-banner-header">Want to learn more?</div>
6+
<Banner
7+
bg="dark"
8+
title="Want to learn more?"
9+
cta={<LinkToContact label={"SCHEDULE A MEETING"} />}
10+
>
811
Schedule a meeting and benefit from our expertise on Jupyter, Conda-forge,
912
high-performance computing, and open-source development.
10-
<LinkToContact label={"SCHEDULE A MEETING"} />
11-
</div>
13+
</Banner>
1214
);
1315
}

‎src/components/home/ProjectsOverview/Computing.tsx‎

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,16 @@
1+
import SplitSection from "../../layout/SplitSection";
12
import styles from "./styles.module.css";
2-
import ComputingMD from "@site/src/components/home/ProjectsOverview/descriptions/Computing.md";
3+
import ComputingMD from "./descriptions/Computing.md";
34
import XTensorXSIMDPicture from "@site/static/img/projects/xtensor_xsimd.svg";
45

56
export default function ComputingProjects() {
67
return (
7-
<div className={styles.container_projects}>
8-
<div className="row-max-width">
9-
<div
10-
className={"col col--6" + " " + styles.col_project_overview_with_padding}
11-
>
12-
<h1 className="padding-none">Scientific computing </h1>
13-
<h2 className={styles.h2_custom}>
14-
Supporting the development of several C++ scientific computing
15-
packages.
16-
</h2>
17-
18-
<ComputingMD />
19-
</div>
20-
<div className={"col col--6 flex-full-centered"+ " " + styles.col_project_overview_with_padding}>
21-
<XTensorXSIMDPicture width={"500px"}/>
22-
</div>
23-
</div>
24-
</div>
8+
<SplitSection
9+
image={<XTensorXSIMDPicture style={{ maxWidth: "100%" }} />}
10+
>
11+
<h1 className="padding-none">Scientific computing</h1>
12+
<h2 className={styles.h2_custom}>Supporting the development of several C++ scientific computing packages.</h2>
13+
<ComputingMD />
14+
</SplitSection>
2515
);
2616
}

‎src/components/home/ProjectsOverview/DataAnalysis.tsx‎

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,18 @@
1+
import SplitSection from "../../layout/SplitSection";
12
import styles from "./styles.module.css";
2-
import DataAnalysisMD from "@site/src/components/home/ProjectsOverview/descriptions/DataAnalysis.md";
3+
import DataAnalysisMD from "./descriptions/DataAnalysis.md";
34
import ApacheArrowPicture from "@site/static/img/projects/apache_arrow.svg";
45

56
export default function DataAnalysisProjects() {
67
return (
7-
<div className={styles.container_projects + " "+ styles.project_light_yellow} style={{paddingBottom : "0px"}}>
8-
<div className="row-max-width">
9-
<div
10-
className={"col col--6" + " " + styles.col_project_overview_with_padding}
11-
>
12-
<h1 className="padding-none">Data Analysis </h1>
13-
<h2 className={styles.h2_custom}>
14-
Supporting the development of key data analysis technologies.
15-
</h2>
16-
<DataAnalysisMD />
17-
</div>
18-
<div className={"col col--6"+ " " + "flex-full-centered" + " " + styles.col_project_overview_with_padding}>
19-
<ApacheArrowPicture width={"500px"}/>
20-
</div>
21-
</div>
22-
</div>
8+
<SplitSection
9+
bg="light"
10+
reverse
11+
image={<ApacheArrowPicture style={{ maxWidth: "100%" }} />}
12+
>
13+
<h1 className="padding-none">Data Analysis</h1>
14+
<h2 className={styles.h2_custom}>Supporting the development of key data analysis technologies.</h2>
15+
<DataAnalysisMD />
16+
</SplitSection>
2317
);
2418
}

0 commit comments

Comments
 (0)