Skip to content

Commit 2abc839

Browse files
mariana-caldasmariana-caldas
committed
Resolve conflict
2 parents 7e81fb2 + 9ece24c commit 2abc839

29 files changed

+343
-121
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
2020
- TwoColumn.js component
2121
- decoration components
2222
- nav component styling and intersection api
23+
- CardsColumns.js and Card.js
2324

2425
### Fixed
2526

2627
- updated Next.js from 10.0.0 to 12.0.10
2728
- fixed scroll-x added by the layout container, adjust README
2829
- updated TwoColumn.js component with style props
30+
- updated favicon icon and add OG

‎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/Meta.js

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,22 @@ export default function Meta() {
99
<meta name="description" content={meta.description} />
1010
<meta charSet="utf-8" />
1111
<title>{meta.title}</title>
12-
<link rel="icon" href="/favicon.ico" />
12+
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
13+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
14+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
15+
<link rel="manifest" href="/favicon/site.webmanifest" />
16+
<link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#023047" />
17+
<meta name="msapplication-TileColor" content="#023047" />
18+
<meta name="theme-color" content="#ffffff" />
19+
<meta property="og:title" content={meta.title} />
20+
<meta property="og:description" content={meta.description} />
21+
<meta property="og:site_name" content="Web Dev Path" />
22+
<meta property="og:type" content="website" />
23+
<meta property="og:image" content="/favicon/og-image.png" />
24+
<meta property="twitter:image" content="/favicon/og-image.png" />
25+
<meta property="og:url" content="/" />
26+
<meta property="og:image:width" content="1200" />
27+
<meta property="og:image:height" content="1200" />
1328
<link rel="preconnect" href="https://fonts.googleapis.com" />
1429
<link
1530
rel="preconnect"

‎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/favicon/android-chrome-192x192.png

6.8 KB
Loading

‎public/favicon/android-chrome-512x512.png

19.1 KB
Loading

0 commit comments

Comments
 (0)