Skip to content

Commit 9ece24c

Browse files
vmcodesvmcodes
authored
Merge pull request #88 from Web-Dev-Path/feature/add-three-column
Add three column component
2 parents 5969b7c + 0d5e0f0 commit 9ece24c

16 files changed

+256
-120
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
1919
- new footer and newsletter components styling
2020
- TwoColumn.js component
2121
- decoration components
22+
- ThreeColumn.js and Card.js
2223

2324
### Fixed
2425

‎components/Card.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import Image from 'next/image';
2+
import Link from 'next/link';
3+
import styles from '../styles/Card.module.scss';
4+
5+
export default function Card({
6+
image,
7+
altTag,
8+
title,
9+
content,
10+
link,
11+
linkText,
12+
}) {
13+
return (
14+
<div className={styles.card}>
15+
<div className={styles.card__image}>
16+
<Image
17+
src={image}
18+
alt={altTag}
19+
className={styles.img}
20+
layout="fill"
21+
objectFit="cover"
22+
/>
23+
</div>
24+
<h2 className={styles.title}>{title}</h2>
25+
<div className={styles.content}>
26+
<p>
27+
{content} <Link href={link}>{linkText}</Link>
28+
</p>
29+
</div>
30+
</div>
31+
);
32+
}

‎components/CardsColumns.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import Card from './Card';
2+
import styles from '../styles/CardsColumns.module.scss';
3+
4+
export default function CardsColumns({
5+
images,
6+
altTags,
7+
titles,
8+
content,
9+
links,
10+
linkText,
11+
}) {
12+
return (
13+
<section className={styles.container}>
14+
<div className={styles.inner__content}>
15+
{titles.map((title, index) => {
16+
return (
17+
<Card
18+
title={title}
19+
image={images[index]}
20+
altTag={altTags[index]}
21+
content={content[index]}
22+
link={links[index]}
23+
linkText={linkText[index]}
24+
key={index}
25+
/>
26+
);
27+
})}
28+
</div>
29+
</section>
30+
);
31+
}

‎components/Layout.js

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
import Nav from './Nav';
22
import Meta from './Meta';
3-
import styles from '../styles/Layout.module.scss';
43
import Footer from './Footer';
54

65
export default function Layout({ children }) {
76
return (
87
<>
98
<Meta />
109
<Nav />
11-
<div className={styles.container}>
12-
<main className={styles.main}>{children}</main>
13-
</div>
10+
<main>{children}</main>
1411
<Footer />
1512
</>
1613
);

‎components/TwoColumn.js

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,21 @@ import ButtonLink from './ButtonLink';
33
import styles from '../styles/TwoColumn.module.scss';
44
import buttonStyles from '../styles/ButtonLink.module.scss';
55

6-
export default function TwoColumn(props) {
6+
export default function TwoColumn({
7+
image,
8+
altTag,
9+
title,
10+
content,
11+
rowOrder,
12+
color,
13+
bgColor,
14+
btnColor,
15+
btnBg,
16+
link,
17+
customInnerClass,
18+
linkText = 'Learn more',
19+
}) {
720
// Add rowOrder="row-reverse" prop to the component to reverse its order on desktop
8-
const {
9-
image,
10-
altTag,
11-
title,
12-
content,
13-
rowOrder,
14-
color,
15-
bgColor,
16-
btnColor,
17-
btnBg,
18-
link,
19-
linkText = 'Learn more',
20-
} = props;
2121

2222
const styleProps = {
2323
btn: {
@@ -32,7 +32,10 @@ export default function TwoColumn(props) {
3232

3333
return (
3434
<section className={styles.container} style={styleProps.container}>
35-
<div className={styles.inner} style={{ flexDirection: rowOrder }}>
35+
<div
36+
className={`${styles.inner} ${styles[customInnerClass]}`}
37+
style={{ flexDirection: rowOrder }}
38+
>
3639
<div className={styles.inner__content}>
3740
<h2 className={styles.title} style={{ color: color }}>
3841
{title}

‎pages/index.js

Lines changed: 54 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -2,83 +2,71 @@ import Link from 'next/link';
22
import Bracket from '../components/Bracket';
33
import Stick from '../components/Stick';
44
import TwoColumn from '../components/TwoColumn';
5+
import CardsColumns from '../components/CardsColumns';
56
import styles from '../styles/Home.module.scss';
67
import { white, primary } from '../styles/TwoColumn.module.scss';
78

89
export default function Home() {
910
return (
10-
<div>
11-
<h1 className={styles.title}>&lt; Web Dev wannabe? /&gt;</h1>
12-
<div className={styles.description}>
13-
<p>
14-
Hold our hand and enjoy the road to learn how to start a new project,
15-
the magic behind Github while working in a team environment, and much
16-
more...
17-
</p>
18-
</div>
19-
20-
<TwoColumn
21-
title="Let's grow together."
22-
image="/images/home-two-column-image.jpg"
23-
content="The Web Dev Path is a team of professional developers project that aims to provide a comprehensive path for people who seek to begin their web development journey. "
24-
link="/about-us"
25-
/>
26-
27-
<Bracket className={styles.bracket} />
11+
<section className={styles.container}>
12+
<div className={styles.inner}>
13+
<h1 className={styles.title}>&lt; Web Dev wannabe? /&gt;</h1>
14+
<div className={styles.description}>
15+
<p>
16+
Hold our hand and enjoy the road to learn how to start a new
17+
project, the magic behind Github while working in a team
18+
environment, and much more...
19+
</p>
20+
</div>
2821

29-
<TwoColumn
30-
title="Get involved."
31-
content="Web Dev Path runs on volunteers. Here are the ways you can get involved with us:"
32-
rowOrder="row-reverse"
33-
color={primary}
34-
bgColor={white}
35-
/>
22+
<TwoColumn
23+
title="Let's grow together."
24+
image="/images/join-us.jpg"
25+
content="The Web Dev Path is a team of professional developers project that aims to provide a comprehensive path for people who seek to begin their web development journey."
26+
link="/about-us"
27+
/>
3628

37-
<Stick className={styles.stick} />
29+
<Bracket className={styles.bracket} />
3830

39-
<TwoColumn
40-
title="Nonprofit?"
41-
content="Web Dev Path can help your nonprofit with web projects of various sizes. Connect with us to find out how."
42-
color={white}
43-
bgColor={primary}
44-
btnColor={primary}
45-
btnBg={white}
46-
link="/about-us"
47-
/>
31+
<TwoColumn
32+
title="Get involved."
33+
content="Web Dev Path runs on volunteers. Here are the ways you can get involved with us:"
34+
rowOrder="row-reverse"
35+
customInnerClass="get-involved"
36+
color={primary}
37+
bgColor={white}
38+
/>
4839

49-
<hr className={styles.divider} />
50-
<h2 className={styles.centerText}>
51-
Would you answer "yes" to any of these questions?
52-
</h2>
40+
<CardsColumns
41+
titles={['Join us', 'Volunteer', 'Become a mentor']}
42+
images={[
43+
'/images/join-us.jpg',
44+
'/images/volunteer.jpg',
45+
'/images/mentor.jpg',
46+
]}
47+
altTags={['Join us', 'Volunteer', 'Become a mentor']}
48+
content={[
49+
'Are you learning web development and need mentorship? Are you a web dev looking for help or a code buddy for a project? ',
50+
'Would you like to volunteer? For roles other than mentor/mentee, please get in touch.',
51+
'Are you an experienced web dev who wants to become a mentor? Welcome!',
52+
]}
53+
links={['/about-us', '/contact-us', '/about-us']}
54+
linkText={['Learn more', 'Contact us', 'Learn more']}
55+
/>
5356

54-
<div className={styles.grid}>
55-
<div className={styles.card}>
56-
<p>Are you learning web development and need mentorship?</p>
57-
</div>
58-
<div className={styles.card}>
59-
<p>Are you an experienced web dev who wants to become a mentor?</p>
60-
</div>
61-
<div className={styles.card}>
62-
<p>
63-
Are you a non-profit organization who needs help with a web project?
64-
</p>
65-
</div>
66-
<div className={styles.card}>
67-
<p>
68-
Are you a web dev looking for help or a code buddy for a project?
69-
</p>
70-
</div>
71-
</div>
57+
<Stick className={styles.stick} />
7258

73-
<div className={`${styles.learn_more} ${styles.centerText}`}>
74-
<h3>
75-
If so, you are probably in the right place and should learn more about
76-
us
77-
</h3>
78-
<button className={styles.button}>
79-
<Link href="/about-us">Learn More</Link>
80-
</button>
59+
<TwoColumn
60+
title="Nonprofit?"
61+
content="Web Dev Path can help your nonprofit with web projects of various sizes. Connect with us to find out how."
62+
color={white}
63+
bgColor={primary}
64+
btnColor={primary}
65+
btnBg={white}
66+
link="/about-us"
67+
customInnerClass="non-profit"
68+
/>
8169
</div>
82-
</div>
70+
</section>
8371
);
8472
}

‎public/images/home-two-column-image.jpg renamed to ‎public/images/join-us.jpg

File renamed without changes.

‎public/images/mentor.jpg

47.4 KB
Loading

‎public/images/volunteer.jpg

52.9 KB
Loading

‎styles/Card.module.scss

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
@use './variables' as *;
2+
@use './mixins' as *;
3+
4+
.card {
5+
margin: 1.5rem;
6+
padding: 1.5rem;
7+
border-radius: 1.5rem;
8+
box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
9+
min-width: 28%;
10+
@include desktop {
11+
flex-basis: 28%;
12+
margin-bottom: 0;
13+
}
14+
15+
.title {
16+
font-family: 'Open Sans';
17+
font-style: normal;
18+
font-weight: bold;
19+
font-size: 1.75rem;
20+
color: $primary-content-color;
21+
margin: 0;
22+
margin-top: 1rem;
23+
24+
@include tablet {
25+
font-size: 2.25rem;
26+
}
27+
}
28+
29+
.content {
30+
font-style: normal;
31+
font-weight: normal;
32+
font-size: 1.5rem;
33+
line-height: 2rem;
34+
display: flex;
35+
align-items: center;
36+
}
37+
38+
a {
39+
text-decoration: underline;
40+
}
41+
42+
.card__image {
43+
width: 100%;
44+
height: 18rem;
45+
position: relative;
46+
47+
.img {
48+
border-radius: 0.25rem;
49+
}
50+
}
51+
}

0 commit comments

Comments
 (0)