Skip to content

Commit 1bf7639

Browse files
BekahHWBekahHW
committed
Add index page and styles
1 parent c6797a1 commit 1bf7639

File tree

5 files changed

+278
-0
lines changed

5 files changed

+278
-0
lines changed

‎src/components/index.js

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import clsx from 'clsx';
2+
import Heading from '@theme/Heading';
3+
import styles from './styles.module.css';
4+
5+
const FeatureList = [
6+
{
7+
title: 'Easy to Use',
8+
Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
9+
description: (
10+
<>
11+
Docusaurus was designed from the ground up to be easily installed and
12+
used to get your website up and running quickly.
13+
</>
14+
),
15+
},
16+
{
17+
title: 'Focus on What Matters',
18+
Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
19+
description: (
20+
<>
21+
Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
22+
ahead and move your docs into the <code>docs</code> directory.
23+
</>
24+
),
25+
},
26+
{
27+
title: 'Powered by React',
28+
Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
29+
description: (
30+
<>
31+
Extend or customize your website layout by reusing React. Docusaurus can
32+
be extended while reusing the same header and footer.
33+
</>
34+
),
35+
},
36+
];
37+
38+
function Feature({Svg, title, description}) {
39+
return (
40+
<div className={clsx('col col--4')}>
41+
<div className="text--center">
42+
<Svg className={styles.featureSvg} role="img" />
43+
</div>
44+
<div className="text--center padding-horiz--md">
45+
<Heading as="h3">{title}</Heading>
46+
<p>{description}</p>
47+
</div>
48+
</div>
49+
);
50+
}
51+
52+
export default function HomepageFeatures() {
53+
return (
54+
<section className={styles.features}>
55+
<div className="container">
56+
<div className="row">
57+
{FeatureList.map((props, idx) => (
58+
<Feature key={idx} {...props} />
59+
))}
60+
</div>
61+
</div>
62+
</section>
63+
);
64+
}

‎src/components/styles.module.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.features {
2+
display: flex;
3+
align-items: center;
4+
padding: 2rem 0;
5+
width: 100%;
6+
}
7+
8+
.featureSvg {
9+
height: 200px;
10+
width: 200px;
11+
}

‎src/css/custom.css

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/* stylelint-disable docusaurus/copyright-header */
2+
/**
3+
* Any CSS included here will be global. The classic template
4+
* bundles Infima by default. Infima is a CSS framework designed to
5+
* work well for content-centric websites.
6+
*/
7+
8+
/* You can override the default Infima variables here. */
9+
:root {
10+
--ifm-color-primary: #2e8555;
11+
--ifm-color-primary-dark: #29784c;
12+
--ifm-color-primary-darker: #277148;
13+
--ifm-color-primary-darkest: #205d3b;
14+
--ifm-color-primary-light: #33925d;
15+
--ifm-color-primary-lighter: #359962;
16+
--ifm-color-primary-lightest: #3cad6e;
17+
}
18+
html[data-theme='dark'] {
19+
--ifm-color-primary: #25c2a0;
20+
--ifm-color-primary-dark: #21af90;
21+
--ifm-color-primary-darker: #1fa588;
22+
--ifm-color-primary-darkest: #1a8870;
23+
--ifm-color-primary-light: #29d5b0;
24+
--ifm-color-primary-lighter: #32d8b4;
25+
--ifm-color-primary-lightest: #4fddbf;
26+
}
27+
28+
.docusaurus-highlight-code-line {
29+
background-color: rgba(0, 0, 0, 0.1);
30+
display: block;
31+
margin: 0 calc(-1 * var(--ifm-pre-padding));
32+
padding: 0 var(--ifm-pre-padding);
33+
}
34+
35+
html[data-theme='dark'] .docusaurus-highlight-code-line {
36+
background-color: rgba(0, 0, 0, 0.3);
37+
}
38+
39+
.footer__title {
40+
position: relative;
41+
}
42+
43+
.footer__col > .footer__title::after {
44+
content: '';
45+
display: inline-block;
46+
width: 28px;
47+
height: 23px;
48+
background-position: center;
49+
background-size: contain;
50+
position: absolute;
51+
background-repeat: no-repeat;
52+
}

‎src/pages/index.js

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from 'react';
2+
import Layout from '@theme/Layout';
3+
import Link from '@docusaurus/Link';
4+
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
5+
import clsx from 'clsx';
6+
import styles from './index.module.css';
7+
8+
function HomepageHeader() {
9+
const {siteConfig} = useDocusaurusContext();
10+
return (
11+
<header className={clsx('hero hero--primary', styles.heroBanner)}>
12+
<div className={styles.heroContent}>
13+
<h1 className={styles.heroTitle}>OpenSauced Learning Path</h1>
14+
<p className={styles.heroSubtitle}>Empowering Your Open Source Journey: From First Contribution to Project Leadership</p>
15+
</div>
16+
</header>
17+
);
18+
}
19+
20+
export default function Home() {
21+
return (
22+
<Layout title="Home" description="Welcome to OpenSauced Education Path">
23+
<HomepageHeader />
24+
<main className={styles.main}>
25+
<div className="container">
26+
<div className={styles.cards}>
27+
<div className={styles.card}>
28+
<div className={styles.cardContent}>
29+
<h3>Intro to Open Source Course</h3>
30+
<p>This course is designed to equip you with the skills and knowledge you need to contribute to open source projects.</p>
31+
<Link className={styles.cardLink} to="/docs/intro-to-oss">
32+
Start the Intro to Open Source Course
33+
</Link>
34+
</div>
35+
</div>
36+
<div className={styles.card}>
37+
<div className={styles.cardContent}>
38+
<h3>Becoming a Maintainer</h3>
39+
<p>This course is designed to aid people who are interested in becoming open source project maintainers.</p>
40+
<Link className={styles.cardLink} to="/docs/becoming-a-maintainer">
41+
Start the Becoming a Maintainer Course
42+
</Link>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
</main>
48+
</Layout>
49+
);
50+
}

‎src/pages/index.module.css

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
.heroBanner {
2+
background: #000; /* Black background */
3+
color: #fff;
4+
padding: 4rem 1rem; /* Adjusted for smaller screens */
5+
text-align: center;
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
min-height: 40vh; /* Ensure there's enough space for the content */
10+
flex-direction: column; /* Ensure column layout on smaller screens */
11+
}
12+
13+
.heroContent {
14+
position: relative;
15+
z-index: 1;
16+
padding: 0 2rem; /* Add padding to ensure content doesn't touch the edges */
17+
}
18+
19+
.heroTitle {
20+
font-size: clamp(2rem, 5vw, 4rem);
21+
font-weight: bold;
22+
margin-bottom: 0.5rem;
23+
background: linear-gradient(to right, #e74c3c, #e67e22);
24+
-webkit-background-clip: text;
25+
-webkit-text-fill-color: transparent;
26+
}
27+
28+
.heroSubtitle {
29+
font-size: clamp(1rem, 2.5vw, 1.5rem);
30+
color: #fff;
31+
}
32+
33+
.main {
34+
padding: 2rem 1rem;
35+
display: flex;
36+
justify-content: center;
37+
align-items: center;
38+
height: 60vh;
39+
flex-direction: column; /* Ensure column layout on smaller screens */
40+
}
41+
42+
.cards {
43+
display: grid;
44+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
45+
gap: 2rem;
46+
max-width: 1200px; /* Limit the width of the card container */
47+
width: 100%;
48+
}
49+
50+
.card {
51+
background: #fff;
52+
border: 1px solid #ddd;
53+
border-radius: 8px;
54+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
55+
padding: 2rem;
56+
text-align: left;
57+
transition: transform 0.3s, box-shadow 0.3s;
58+
}
59+
60+
.card:hover {
61+
transform: translateY(-5px);
62+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
63+
}
64+
65+
.cardContent {
66+
display: flex;
67+
flex-direction: column;
68+
align-items: flex-start;
69+
}
70+
71+
.cardIcon {
72+
width: 40px;
73+
height: 40px;
74+
margin-bottom: 1rem;
75+
}
76+
77+
.card h3 {
78+
color: #000b05;
79+
margin-bottom: 1rem;
80+
}
81+
82+
.card p {
83+
color: #333;
84+
margin-bottom: 1rem;
85+
}
86+
87+
.cardLink {
88+
background: linear-gradient(to right, #e74c3c, #e67e22);
89+
border-radius: 50px;
90+
color: #fff;
91+
padding: 0.5rem 1rem;
92+
text-decoration: none;
93+
transition: background 0.3s;
94+
text-align: center;
95+
display: inline-block;
96+
}
97+
98+
.cardLink:hover {
99+
background: #e74c3c; /* Use the darkest color in the gradient */
100+
color: #fff; /* Keep the text white */
101+
}

0 commit comments

Comments
 (0)