Stone_Red/website
1
0
Fork 0
mirror of https://github.com/Stone-Red-Code/website.git synced 2026-09-06 23:43:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: set up new homepage using new branding

Browse Source
This commit is contained in:
Jean-Philippe Sirois
2019-08-23 17:00:15 -04:00
parent 59f83e3dd0
commit 0af9faf322
14 changed files with 302 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header/index.tsx
+53 -18
View File
@@ -1,13 +1,12 @@
import { Link } from "gatsby"
import React, { PropsWithChildren } from "react"
import logo from "../../images/tph-logo.png"
import { Container } from "../Container"
import * as SC from "./styles"
function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {
return (
<SC.MenuItem to={to} activeClassName="active">
{children}
<SC.MenuItemText>{children}</SC.MenuItemText>
<SC.MenuItemLine />
</SC.MenuItem>
)
}
@@ -15,21 +14,57 @@ function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {
export function Header() {
return (
<SC.HeaderWrapper>
<Container>
<SC.InnerWrapper>
<Link to="/">
<SC.Logo src={logo} />
</Link>
<SC.Menu>
<MenuItem to="/about">about</MenuItem>
<MenuItem to="/rules">rules</MenuItem>
<MenuItem to="/">faq</MenuItem>
<MenuItem to="/">hotbot</MenuItem>
<MenuItem to="/resources">resources</MenuItem>
<MenuItem to="/">tech spotlight</MenuItem>
</SC.Menu>
</SC.InnerWrapper>
</Container>
<SC.StyledWavesTop />
<SC.StyledWavesBottom />
<SC.StyledParticles
params={{
particles: {
number: { value: 5, density: { enable: true, value_area: 500 } },
color: { value: "#ffffff" },
opacity: {
value: 0.5,
random: false,
anim: { enable: false },
},
size: {
value: 36,
random: true,
anim: { enable: false },
},
line_linked: {
enable: false,
},
move: {
enable: true,
speed: 1.5,
direction: "top",
random: false,
straight: false,
out_mode: "out",
bounce: false,
attract: { enable: false },
},
},
retina_detect: true,
}}
/>
<SC.InnerWrapper>
<Link to="/">
<SC.Logo />
</Link>
<SC.Title>The Programmer's Hangout</SC.Title>
<SC.Menu>
<MenuItem to="/about">about</MenuItem>
<MenuItem to="/rules">rules</MenuItem>
<MenuItem to="/">faq</MenuItem>
<MenuItem to="/">hotbot</MenuItem>
<MenuItem to="/resources">resources</MenuItem>
<MenuItem to="/">tech spotlight</MenuItem>
</SC.Menu>
<SC.DiscordButton>
<SC.StyledDiscordLogo /> join us
</SC.DiscordButton>
</SC.InnerWrapper>
</SC.HeaderWrapper>
)
}