Skip to content

Commit ed7aaa7

Browse files
vmcodesvmcodes
committed
add three column
1 parent da599d0 commit ed7aaa7

File tree

6 files changed

+203
-63
lines changed

6 files changed

+203
-63
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: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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(props) {
6+
const { image, altTag, title, content, link, linkText } = props;
7+
8+
return (
9+
<div className={styles.card}>
10+
<div className={styles.card__image}>
11+
<Image
12+
src={image}
13+
alt={altTag}
14+
className={styles.img}
15+
layout="fill"
16+
objectFit="cover"
17+
/>
18+
</div>
19+
<h2 className={styles.title}>{title}</h2>
20+
<div className={styles.content}>
21+
<p>
22+
{content} <Link href={link}>{linkText}</Link>
23+
</p>
24+
</div>
25+
</div>
26+
);
27+
}

‎components/ThreeColumn.js

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

‎pages/index.js

Lines changed: 82 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -2,83 +2,102 @@ 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 ThreeColumn from '../components/ThreeColumn';
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>
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>
1921

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-
/>
22+
<TwoColumn
23+
title="Let's grow together."
24+
image="/images/home-two-column-image.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+
/>
2628

27-
<Bracket className={styles.bracket} />
29+
<Bracket className={styles.bracket} />
2830

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-
/>
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+
color={primary}
36+
bgColor={white}
37+
/>
3638

37-
<Stick className={styles.stick} />
39+
<ThreeColumn
40+
titles={['Join us', 'Volunteer', 'Become a mentor']}
41+
images={[
42+
'/images/home-two-column-image.jpg',
43+
'/images/home-two-column-image.jpg',
44+
'/images/home-two-column-image.jpg',
45+
]}
46+
altTags={['Join us', 'Volunteer', 'Become a mentor']}
47+
content={[
48+
'Are you learning web development and need mentorship? Are you a web dev looking for help or a code buddy for a project? ',
49+
'Would you like to volunteer? For roles other than mentor/mentee, please get in touch.',
50+
'Are you an experienced web dev who wants to become a mentor? Welcome!',
51+
]}
52+
links={['/about-us', '/about-us', '/about-us']}
53+
linkText={['Learn more', 'Contact us', 'Contact us']}
54+
/>
3855

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-
/>
56+
<Stick className={styles.stick} />
4857

49-
<hr className={styles.divider} />
50-
<h2 className={styles.centerText}>
51-
Would you answer "yes" to any of these questions?
52-
</h2>
58+
<TwoColumn
59+
title="Nonprofit?"
60+
content="Web Dev Path can help your nonprofit with web projects of various sizes. Connect with us to find out how."
61+
color={white}
62+
bgColor={primary}
63+
btnColor={primary}
64+
btnBg={white}
65+
link="/about-us"
66+
/>
5367

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>
68+
<hr className={styles.divider} />
69+
<h2 className={styles.centerText}>
70+
Would you answer "yes" to any of these questions?
71+
</h2>
72+
<div className={styles.grid}>
73+
<div className={styles.card}>
74+
<p>Are you learning web development and need mentorship?</p>
75+
</div>
76+
<div className={styles.card}>
77+
<p>Are you an experienced web dev who wants to become a mentor?</p>
78+
</div>
79+
<div className={styles.card}>
80+
<p>
81+
Are you a non-profit organization who needs help with a web
82+
project?
83+
</p>
84+
</div>
85+
<div className={styles.card}>
86+
<p>
87+
Are you a web dev looking for help or a code buddy for a project?
88+
</p>
89+
</div>
6590
</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>
91+
<div className={`${styles.learn_more} ${styles.centerText}`}>
92+
<h3>
93+
If so, you are probably in the right place and should learn more
94+
about us
95+
</h3>
96+
<button className={styles.button}>
97+
<Link href="/about-us">Learn More</Link>
98+
</button>
7099
</div>
71100
</div>
72-
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>
81-
</div>
82-
</div>
101+
</section>
83102
);
84103
}

‎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: 1rem;
8+
box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
9+
min-width: 30%;
10+
@include desktop {
11+
flex-basis: 30%;
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+
}

‎styles/ThreeColumn.module.scss

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@use './variables' as *;
2+
@use './mixins' as *;
3+
4+
.container {
5+
background-color: $white;
6+
7+
.inner__content {
8+
margin: 0 auto;
9+
max-width: $large-desktop-breakpoint;
10+
padding-bottom: 2.5rem;
11+
margin-bottom: 5rem;
12+
display: flex;
13+
flex-wrap: wrap;
14+
justify-content: center;
15+
}
16+
}

0 commit comments

Comments
 (0)