Skip to content

Commit 262cc70

Browse files
HaudinFlorenceHaudinFlorence
committed
Add a propose a project section with a card including a form.
1 parent 3e2887e commit 262cc70

File tree

7 files changed

+169
-11
lines changed

7 files changed

+169
-11
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: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import styles from "./styles.module.css";
55
const sections = [
66
{ id: 'jupyter-ecosystem', label: 'Jupyter Ecosystem' },
77
{ id: 'package-management', label: 'Package Management' },
8+
{ id: 'propose-a-project', label: 'Propose a project' },
89
];
910

1011
export default function MenuSideBar() {

‎src/components/fundable/SmallProjectCardWithInputs.tsx

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
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>
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+
className="flex-horizontally-centered"
15+
>
16+
<div className="row" >
17+
<div className={"col col--6" + " " + styles.small_project_card_text_col}>
18+
<div
19+
className={styles.project_title
20+
}
21+
>
22+
Contact us with a project to fund
23+
</div>
24+
<div className="form-group">
25+
<div>
26+
<label className={styles.form_label}>Your name/ your organisation</label>
27+
</div>
28+
<div className={styles.input_container}>
29+
<input
30+
type="text"
31+
className={styles.empty_card_small_input}
32+
placeholder="Please provide your name/ your organisation name"
33+
name="name"
34+
id="name"
35+
/>
36+
</div>
37+
</div>
38+
<div className="form-group">
39+
<div>
40+
<label className={styles.form_label}>Your email</label>
41+
</div>
42+
<div className={styles.input_container}>
43+
<input
44+
type="text"
45+
className={styles.empty_card_small_input}
46+
placeholder="Please indicate your email"
47+
name="email"
48+
id="email"
49+
/>
50+
</div>
51+
</div>
52+
<div className="form-group">
53+
<div>
54+
<label className={styles.form_label}>Project title</label>
55+
</div>
56+
<div className={styles.input_container}>
57+
<input
58+
type="text"
59+
className={styles.empty_card_small_input}
60+
placeholder="Please provide a name for the project"
61+
name="project-title"
62+
id="project-title"
63+
/>
64+
</div>
65+
</div>
66+
</div>
67+
68+
69+
<div className={"col col--6" + " " + styles.small_project_card_price_col}>
70+
<div className={styles.project_information_container}>
71+
<div className={styles.project_information} style={{ padding: "0px" }}>
72+
<div className="form-group">
73+
<div>
74+
<label className={styles.form_label}>Project description</label>
75+
</div>
76+
<div>
77+
<textarea
78+
className={styles.empty_card_large_input}
79+
placeholder="Please propose a description of the project"
80+
name="message"
81+
id="message"
82+
></textarea>
83+
</div>
84+
</div>
85+
<div className="form-group">
86+
<div>
87+
<label className={styles.form_label} style={{ background: "background-color: rgba(217, 217, 217, 0.25)" }}>Indicative price</label>
88+
</div>
89+
<div className={styles.input_container}>
90+
<input
91+
type="text"
92+
className={styles.empty_card_small_input}
93+
placeholder="Indicative price?"
94+
name="project-price"
95+
id="project-price"
96+
/>
97+
</div>
98+
</div>
99+
100+
101+
<div className={"flex-full-centered"}>
102+
<input type="submit" value="Submit" className={styles.submit_proposition_button} />
103+
</div>
104+
</div>
105+
106+
</div>
107+
</div>
108+
</div>
109+
</form>
110+
</div>
111+
</div>
112+
113+
</div >
114+
)
115+
}

‎src/components/fundable/index.tsx

Lines changed: 6 additions & 1 deletion
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)) {
@@ -30,8 +31,12 @@ export function MainAreaFundableProjects() {
3031
projectCategory={fundableProjectsDetails.packageManagement}
3132
/>
3233
</section>
34+
<section id="propose-a-project">
35+
<h2 className={styles.project_category_header} style={{ margin: "0px" }}>Propose 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: 39 additions & 2 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,11 @@
331347
border-radius: 4px;
332348
}
333349

334-
.send_button_containder {
350+
.send_button_container {
335351
width: 300px;
336352
}
337353

354+
338355
.get_a_quote_dialog {
339356
width: 90vw;
340357
padding: 40px;
@@ -399,6 +416,16 @@
399416
border-radius: 4px;
400417
}
401418

419+
.empty_card_small_input {
420+
width: 60vw;
421+
height: 20px
422+
}
423+
424+
.empty_card_large_input {
425+
width: 60vw;
426+
height: 200px;
427+
}
428+
402429
.menu_sidebar {
403430
display: none
404431
}
@@ -466,6 +493,16 @@
466493
border-radius: 4px;
467494
}
468495

496+
.empty_card_small_input {
497+
width: 30vw;
498+
height: 20px
499+
}
500+
501+
.empty_card_large_input {
502+
width: 30vw;
503+
height: 100px;
504+
}
505+
469506
.send_button_container {
470507
height: 59px;
471508
width: 400px;

‎static/rss.xml

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎static/rss_all.xml

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)