Skip to content

Commit 7dc1bc6

Browse files
HaudinFlorenceHaudinFlorence
committed
Add a propose a project section with a card including a form.
1 parent 5689baa commit 7dc1bc6

File tree

5 files changed

+180
-14
lines changed

5 files changed

+180
-14
lines changed

‎src/components/fundable/GetAQuoteForm.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function GetAQuoteForm() {
1010
>
1111
<div className="form-group">
1212
<div>
13-
<label className={styles.get_a_quote_form_label}>Project name</label>
13+
<label className={styles.form_label}>Project name</label>
1414
</div>
1515
<div className={styles.input_container}>
1616
<input
@@ -21,7 +21,7 @@ export default function GetAQuoteForm() {
2121
/>
2222
</div>
2323
<div>
24-
<label className={styles.get_a_quote_form_label}>Your name</label>
24+
<label className={styles.form_label}>Your name</label>
2525
</div>
2626
<div className={styles.input_container}>
2727
<input
@@ -34,15 +34,15 @@ export default function GetAQuoteForm() {
3434
</div>
3535
<div className="form-group">
3636
<div>
37-
<label className={styles.get_a_quote_form_label}>Your company</label>
37+
<label className={styles.form_label}>Your company</label>
3838
</div>
3939
<div className={styles.input_container}>
4040
<input className={styles.small_input} name="company" id="company" />
4141
</div>
4242
</div>
4343
<div className="form-group">
4444
<div>
45-
<label className={styles.get_a_quote_form_label}>Your email</label>
45+
<label className={styles.form_label}>Your email</label>
4646
</div>
4747
<div className={styles.input_container}>
4848
<input
@@ -55,7 +55,7 @@ export default function GetAQuoteForm() {
5555
</div>
5656
<div className="form-group">
5757
<div>
58-
<label className={styles.get_a_quote_form_label}>Your phone number</label>
58+
<label className={styles.form_label}>Your phone number</label>
5959
</div>
6060
<div className={styles.input_container}>
6161
<input
@@ -68,7 +68,7 @@ export default function GetAQuoteForm() {
6868
</div>
6969
<div className="form-group">
7070
<div>
71-
<label className={styles.get_a_quote_form_label}>Your message to us</label>
71+
<label className={styles.form_label}>Your message to us</label>
7272
</div>
7373
<div>
7474
<textarea

‎src/components/fundable/MenuSideBar.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import React, { useEffect, useState } from 'react';
33
import styles from "./styles.module.css";
44

55
const sections = [
6-
{ id: 'jupyter-ecosystem', label: 'Jupyter Ecosystem' },
7-
{ id: 'package-management', label: 'Package Management' },
6+
{ id: 'jupyter-ecosystem', label: 'Jupyter ecosystem' },
7+
{ id: 'package-management', label: 'Package management' },
8+
{ id: 'propose-and-fund-a-project', label: 'Propose and fund a project' },
89
];
910

1011
export default function MenuSideBar() {

‎src/components/fundable/SmallProjectCardWithInputs.tsx‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import styles from "./styles.module.css";
2+
import BlueCaretIcon from "@site/static/img/icons/BlueCaret.svg";
3+
4+
export function SmallProjectCardWithInputs() {
5+
return (
6+
<div className="flex-horizontally-centered">
7+
8+
9+
<div className={"card" + " " + styles.small_project_card} style={{ marginTop: "var(--ifm-spacing-lg" }}>
10+
<div className="card__body" style={{ padding: "0" }}>
11+
<form
12+
action="https://formspree.io/f/xjvndwdq"
13+
method="POST"
14+
>
15+
<div className="row" >
16+
<div className={"col col--6" + " " + styles.small_project_card_text_col}>
17+
<div
18+
className={styles.project_title
19+
}
20+
>
21+
Contact us for a project to fund
22+
</div>
23+
<div className="form-group">
24+
<div>
25+
<label className={styles.form_label}>Your name/ your organisation</label>
26+
</div>
27+
<div className={styles.input_container}>
28+
<input
29+
type="text"
30+
className={styles.empty_card_small_input}
31+
placeholder="Please provide your name/ your organisation name"
32+
name="name"
33+
id="name"
34+
/>
35+
</div>
36+
</div>
37+
<div className="form-group">
38+
<div>
39+
<label className={styles.form_label}>Your email</label>
40+
</div>
41+
<div className={styles.input_container}>
42+
<input
43+
type="text"
44+
className={styles.empty_card_small_input}
45+
placeholder="Please indicate your email"
46+
name="email"
47+
id="email"
48+
/>
49+
</div>
50+
</div>
51+
<div className="form-group">
52+
<div>
53+
<label className={styles.form_label}>Project title</label>
54+
</div>
55+
<div className={styles.input_container}>
56+
<input
57+
type="text"
58+
className={styles.empty_card_small_input}
59+
placeholder="Please provide a name for the project"
60+
name="project-title"
61+
id="project-title"
62+
/>
63+
</div>
64+
</div>
65+
</div>
66+
67+
68+
<div className={"col col--6" + " " + styles.small_project_card_price_col}>
69+
<div className={styles.project_information_container}>
70+
<div className={styles.project_information} style={{ padding: "0px" }}>
71+
<div className="form-group">
72+
<div>
73+
<label className={styles.form_label}>Project description</label>
74+
</div>
75+
<div>
76+
<textarea
77+
className={styles.empty_card_large_input}
78+
placeholder="Please propose a description of the project"
79+
name="message"
80+
id="message"
81+
></textarea>
82+
</div>
83+
</div>
84+
<div className="form-group">
85+
<div>
86+
<label className={styles.form_label} style={{ background: "background-color: rgba(217, 217, 217, 0.25)" }}>Indicative price</label>
87+
</div>
88+
<div className={styles.input_container}>
89+
<input
90+
type="text"
91+
className={styles.empty_card_small_input}
92+
placeholder="Indicative price?"
93+
name="project-price"
94+
id="project-price"
95+
/>
96+
</div>
97+
</div>
98+
99+
100+
<div className={"flex-full-centered"}>
101+
<input type="submit" value="Submit" className={styles.submit_proposition_button} />
102+
</div>
103+
</div>
104+
105+
</div>
106+
</div>
107+
</div>
108+
</form>
109+
</div>
110+
</div>
111+
112+
</div >
113+
)
114+
}

‎src/components/fundable/index.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import styles from "./styles.module.css";
22
import { fundableProjectsDetails } from "./projectsDetails";
33
import ProjectCategory from "./ProjectCategory";
44
import MenuSidebar from "./MenuSideBar";
5+
import { SmallProjectCardWithInputs } from "./SmallProjectCardWithInputs";
56

67
export function getCategoryFromProjectPageName(pageName: string) {
78
for (const [categoryName, projectsByCategory] of Object.entries(fundableProjectsDetails)) {
@@ -20,18 +21,22 @@ export function MainAreaFundableProjects() {
2021

2122
<section id="jupyter-ecosystem">
2223
<ProjectCategory
23-
projectCategoryName={"Jupyter Ecosystem"}
24+
projectCategoryName={"Jupyter ecosystem"}
2425
projectCategory={fundableProjectsDetails.jupyterEcosystem}
2526
/>
2627
</section>
2728
<section id="package-management">
2829
<ProjectCategory
29-
projectCategoryName={"Package Management"}
30+
projectCategoryName={"Package management"}
3031
projectCategory={fundableProjectsDetails.packageManagement}
3132
/>
3233
</section>
34+
<section id="propose-and-fund-a-project">
35+
<h2 className={styles.project_category_header} style={{ margin: "0px" }}>Propose and fund a project</h2>
36+
<p style={{ marginTop: "var(--ifm-spacing-lg)" }}>You have a project on the open-source data stack that you would like to fund. Please contact us with this form!</p>
37+
<SmallProjectCardWithInputs />
38+
</section>
3339
</div>
34-
3540
)
3641
}
3742

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

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@
155155
justify-content: center;
156156
}
157157

158-
.get_a_quote_form_label {
158+
.form_label {
159159
font-size: 12px;
160160
color: var(--ifm-text-color);
161161
background-color: var(--ifm-background-color);
@@ -278,6 +278,22 @@
278278
justify-content: center;
279279
}
280280

281+
.submit_proposition_button {
282+
background-color: var(--ifm-color-secondary-s1);
283+
color: black;
284+
width: 150px;
285+
height: 32px;
286+
margin: var(--ifm-spacing-md);
287+
font-family: var(--ifm-font-family-roboto);
288+
border-radius: 8px;
289+
font-size: 14px;
290+
font-style: normal;
291+
font-weight: 600;
292+
border: none;
293+
justify-content: center;
294+
align-items: center;
295+
}
296+
281297
@media only screen and (max-width: 500px) {
282298

283299
/*Mobile*/
@@ -331,10 +347,21 @@
331347
border-radius: 4px;
332348
}
333349

334-
.send_button_containder {
350+
.empty_card_small_input {
351+
width: 80vw;
352+
height: 20px
353+
}
354+
355+
.empty_card_large_input {
356+
width: 80vw;
357+
height: 100px;
358+
}
359+
360+
.send_button_container {
335361
width: 300px;
336362
}
337363

364+
338365
.get_a_quote_dialog {
339366
width: 90vw;
340367
padding: 40px;
@@ -363,7 +390,6 @@
363390
margin-bottom: var(--ifm-spacing-xl);
364391
border: 1px solid #ccc;
365392
cursor: pointer;
366-
padding: var(--ifm-spacing-md)
367393
}
368394

369395
.small_project_card_text_col {
@@ -399,6 +425,16 @@
399425
border-radius: 4px;
400426
}
401427

428+
.empty_card_small_input {
429+
width: 70vw;
430+
height: 20px
431+
}
432+
433+
.empty_card_large_input {
434+
width: 70vw;
435+
height: 200px;
436+
}
437+
402438
.menu_sidebar {
403439
display: none
404440
}
@@ -466,6 +502,16 @@
466502
border-radius: 4px;
467503
}
468504

505+
.empty_card_small_input {
506+
width: 30vw;
507+
height: 20px
508+
}
509+
510+
.empty_card_large_input {
511+
width: 30vw;
512+
height: 100px;
513+
}
514+
469515
.send_button_container {
470516
height: 59px;
471517
width: 400px;

0 commit comments

Comments
 (0)