Skip to content

Commit 5f11338

Browse files
ray10102ray10102
committed
added first two sections
1 parent 347cac3 commit 5f11338

File tree

7 files changed

+214
-11
lines changed

7 files changed

+214
-11
lines changed

‎src/components/landing.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import React from 'react';
2+
import styled from "styled-components";
3+
import SectionContainer from "./section-container";
4+
5+
const TitleContainer = styled.div`
6+
padding: 245px 100px 0px 100px;
7+
`
8+
const University = styled.p`
9+
font-family: Nunito Sans;
10+
font-style: normal;
11+
font-weight: normal;
12+
font-size: 36px;
13+
line-height: 49px;
14+
color: #D9E2FF;
15+
`
16+
17+
const Name = styled.p`
18+
width: 530px;
19+
font-family: Nunito Sans;
20+
font-style: italic;
21+
font-weight: bold;
22+
font-size: 48px;
23+
line-height: 65px;
24+
color: #FFFFFF;
25+
`
26+
const InfoSection = styled.div`
27+
max-width: 600px;
28+
font-family: Nunito Sans;
29+
font-style: normal;
30+
font-weight: normal;
31+
font-size: 24px;
32+
line-height: 33px;
33+
text-align: right;
34+
color: white;
35+
text-wrap: pre;
36+
margin-bottom: 30px;
37+
`
38+
const InfoContainer = styled.div`
39+
display: flex;
40+
flex-direction: column;
41+
align-items: flex-end;
42+
position: relative;
43+
height: 100%;
44+
width: 100%;
45+
`
46+
47+
/*
48+
49+
const Background = styled.div`
50+
position: relative;
51+
width: 100%;
52+
height: auto;
53+
overflow: hidden;
54+
`
55+
56+
<Background>
57+
<svg width="1440" height="852" viewBox="0 0 1440 852" fill="none" xmlns="http://www.w3.org/2000/svg">
58+
<path d="M563 518.5C383 563.5 -2.5 622 -2.5 853.5H1441V0.5H959.5C956.333 158.167 827.591 452.352 563 518.5Z" fill="#A6ADD8"/>
59+
</svg>
60+
</Background>
61+
62+
*/
63+
64+
const Landing = () => {
65+
return(
66+
<>
67+
<SectionContainer>
68+
<TitleContainer>
69+
<University>Northeastern University</University>
70+
<Name>Computer Science Mentoring Organization</Name>
71+
<InfoContainer>
72+
<InfoSection>Northeastern's Computer Science Mentoring Organization serves to better connect Northeastern students who are interested in computer science.</InfoSection>
73+
<InfoSection>We run a mentorship program every semester where undergraduates who are interested in computer science can get the help they need with classes, co-ops, and more.</InfoSection>
74+
<InfoSection>CoSMO is open to all. No prior CS experience required!</InfoSection>
75+
</InfoContainer>
76+
</TitleContainer>
77+
</SectionContainer>
78+
</>
79+
)
80+
}
81+
82+
export default Landing;

‎src/components/section-container.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import styled from "styled-components"
2+
3+
const SectionContainer = styled.div`
4+
width: 100%;
5+
height: 900px;
6+
max-width: 1600px;
7+
margin: auto;
8+
`
9+
export default SectionContainer;

‎src/components/showcase-item.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react';
2+
import styled from 'styled-components'
3+
4+
const ShowcaseItemFlex = styled.div`
5+
display: flex;
6+
flex-direction: column;
7+
`
8+
9+
const ShowcaseImage = styled.img`
10+
height: 300px;
11+
width: 300px;
12+
margin: 50px 100px;
13+
`
14+
15+
const ItemTitle = styled.div`
16+
width: 300px;
17+
height: 80px;
18+
margin: 50px 100px;
19+
border-radius: 10px;
20+
background: #FFFFFF;
21+
text-align: center;
22+
`
23+
const ShowcaseButton = styled.button
24+
25+
const Showcase = ({ props }) => {
26+
return (
27+
<ShowcaseItemFlex>
28+
<ShowcaseImage src={props.imgsrc} alt={props.alt} />
29+
<ItemTitle></ItemTitle>
30+
</ShowcaseItemFlex>
31+
)
32+
}
33+
34+
export default Showcase;

‎src/components/showcase.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import styled from 'styled-components'
3+
import ShowcaseItem from "./showcase-item"
4+
5+
6+
const ShowcaseContainer = styled.div`
7+
display: flex;
8+
max-width: 1600px;
9+
justify-content: space-evenly;
10+
margin: auto;
11+
flex-wrap: wrap;
12+
`
13+
14+
const Showcase = ({props}) => {
15+
var items = [];
16+
for(var i = 0; i < props.itemProps.length; i++) {
17+
items[i] = <ShowcaseItem props={props.itemProps[i]}/>
18+
}
19+
20+
return (
21+
<ShowcaseContainer>
22+
{items}
23+
</ShowcaseContainer>
24+
)
25+
}
26+
27+
export default Showcase;

‎src/components/values.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from 'react';
2+
import styled from "styled-components";
3+
import SectionContainer from "./section-container";
4+
import Showcase from "./showcase";
5+
import logo from '../images/ clearLogo.png';
6+
7+
const Title = styled.p`
8+
font-family: Nunito Sans;
9+
font-style: normal;
10+
font-weight: 800;
11+
font-size: 48px;
12+
line-height: 65px;
13+
margin-top: 80px;
14+
margin-left: 100px;
15+
margin-right: 100px;
16+
max-width: 1050px;
17+
color: white;
18+
`
19+
const valuesSectionShowcaseProps = {
20+
itemProps: [
21+
{
22+
key: 0,
23+
imgsrc: logo,
24+
alt: "logo"
25+
},
26+
{
27+
key: 1,
28+
imgsrc: logo,
29+
alt: "logo"
30+
},
31+
{
32+
key: 2,
33+
imgsrc: logo,
34+
alt: "logo"
35+
}
36+
]
37+
}
38+
39+
const Values = () => {
40+
return (
41+
<SectionContainer>
42+
<Title>
43+
Our goals... idk what to put here lol but this is space we can put more info
44+
</Title>
45+
<Showcase props={valuesSectionShowcaseProps}/>
46+
</SectionContainer>
47+
)
48+
}
49+
50+
export default Values;

‎src/pages/index.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
11
import React from "react"
22
import { Link } from "gatsby"
3+
import styled from "styled-components"
4+
35

4-
import Layout from "../components/layout"
56
import Image from "../components/image"
7+
import Landing from "../components/landing"
8+
import Values from "../components/values"
9+
10+
const Background = styled.div`
11+
background: #041454;
12+
`
613

714
const IndexPage = () => (
8-
<Layout>
9-
<h1>Hi people</h1>
10-
<p>Welcome to your new Gatsby site.</p>
11-
<p>Now go build something great.</p>
12-
<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
13-
<Image />
14-
</div>
15+
<Background>
16+
<Landing/>
17+
<Values/>
1518
<Link to="/mentors/">Go to mentors page</Link> <br />
1619
<Link to="/using-typescript/">Go to "Using TypeScript"</Link>
17-
</Layout>
20+
</Background>
1821
)
1922

2023
export default IndexPage

‎src/pages/using-typescript.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import React from "react"
33
import { PageProps, Link, graphql } from "gatsby"
44

55
import Layout from "../components/layout"
6-
import SEO from "../components/seo"
76

87
type DataProps = {
98
site: {
@@ -13,7 +12,6 @@ type DataProps = {
1312

1413
const UsingTypescript: React.FC<PageProps<DataProps>> = ({ data, path }) => (
1514
<Layout>
16-
<SEO title="Using TypeScript" />
1715
<h1>Gatsby supports TypeScript by default!</h1>
1816
<p>This means that you can create and write <em>.ts/.tsx</em> files for your pages, components etc. Please note that the <em>gatsby-*.js</em> files (like gatsby-node.js) currently don't support TypeScript yet.</p>
1917
<p>For type checking you'll want to install <em>typescript</em> via npm and run <em>tsc --init</em> to create a <em>.tsconfig</em> file.</p>

0 commit comments

Comments
 (0)