Skip to content

LP: Update Boost Hub Section & Added Header Alert #548

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Rokt33r merged 5 commits into from
Jul 21, 2020
Merged

LP: Update Boost Hub Section & Added Header Alert #548

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ef1051a
Replaced Descriptions
ellekasai Jul 20, 2020
8a15361
Replaced Button Text
ellekasai Jul 20, 2020
cfcc271
Made Name and Detail Separated
ellekasai Jul 20, 2020
178a19a
Restyled Boost Hub Section
ellekasai Jul 20, 2020
7138dd8
Added Header Alert
ellekasai Jul 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 11 additions & 2 deletions homepage/components/atoms/HomeLogoLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,21 @@
import React from 'react'
import Link from 'next/link'
import styled from 'styled-components'

const HomeLogoImg = styled.a`
display: block;

img {
vertical-align: middle;
}
`

const HomeLogoLink = () => {
return (
<Link href='/'>
<a>
<HomeLogoImg>
<img alt='Boost Note Logo' src='/static/logo.svg' />
</a>
</HomeLogoImg>
</Link>
)
}
Expand Down
104 changes: 76 additions & 28 deletions homepage/components/organisms/BoostHubSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,35 @@ const Container = styled.div<SpaceProps>`
${space}
`

const FeatureList = styled.ul`
margin-top: 40px;
const BoostHubTitle = styled.div`
text-align: center;
`

const BoostHubDescription = styled.div`
display: flex;
margin-top: 30px;
margin-bottom: 40px;
list-style: inside;

p {
margin-top: 0;
margin-bottom: 30px;
}
`

const FeatureList = styled.ul`
li {
font-size: 20px;

+ li {
margin-top: 10px;
}
}

span {
display: inline-block;
margin-right: 5px;
font-weight: bold;
}
`

const BoostHubImage = styled.img`
Expand All @@ -29,34 +54,57 @@ const BoostHubSection = () => {

return (
<section>
<Box bg='#2c2c2c' color='#f0f0f0' py={5} px={2}>
<Container my={5}>
<Box bg='#2c2c2c' color='#f0f0f0' pt={5} px={2}>
<Container mt={5}>
<Row>
<Column width={[1, 1, 1, 1 / 2]} mb={[6, 6, 6, 0]}>
<Text as='h2' fontSize={[3, 4, 5]} mt={0} mb={4}>
🤝 {t('boostHub.title')}
</Text>
<p>{t('boostHub.description1')}</p>

<FeatureList>
<li>{t('boostHub.description2')}</li>
<li>{t('boostHub.description3')}</li>
<li>{t('boostHub.description4')}</li>
<li>{t('boostHub.description5')}</li>
</FeatureList>

<ButtonLink
bg='teal'
color='white'
fontSize={1}
py={2}
href='https://boosthub.io'
>
{t('common.boostHub')}
</ButtonLink>
<Column width={1}>
<BoostHubTitle>
<Text as='h2' fontSize={[3, 4, 5]} mt={0} mb={4}>
🤝 {t('boostHub.title')}
</Text>
</BoostHubTitle>
</Column>
</Row>

<BoostHubDescription>
<Row>
<Column width={[1, 1, 1, 1 / 2]} mb={[6, 6, 6, 0]}>
<p>{t('boostHub.description')}</p>
<ButtonLink
bg='teal'
color='white'
fontSize={1}
py={2}
href='https://boosthub.io'
>
{t('common.boostHub')}
</ButtonLink>
</Column>
<Column width={[1, 1, 1, 1 / 2]}>
<FeatureList>
<li>
<span>{t('boostHub.feature1Name')}:</span>
{t('boostHub.feature1Detail')}
</li>
<li>
<span>{t('boostHub.feature2Name')}:</span>
{t('boostHub.feature2Detail')}
</li>
<li>
<span>{t('boostHub.feature3Name')}:</span>
{t('boostHub.feature3Detail')}
</li>
<li>
<span>{t('boostHub.feature4Name')}:</span>
{t('boostHub.feature4Detail')}
</li>
</FeatureList>
</Column>
</Row>
</BoostHubDescription>

<Column width={[1, 1, 1, 1 / 2]}>
<Row>
<Column>
<BoostHubImage src='/static/boosthub.svg' />
</Column>
</Row>
Expand Down
2 changes: 1 addition & 1 deletion homepage/components/organisms/CommunitySection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const CommunitySection = () => {
as='ul'
justifyContent='center'
mx={2}
my={5}
mt={5}
py={4}
flexWrap='wrap'
>
Expand Down
162 changes: 95 additions & 67 deletions homepage/components/organisms/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,22 @@ import Icon from '../atoms/Icon'
import { mdiDownload, mdiOpenInApp } from '@mdi/js'
import { sendGAEvent, queueNavigateToGA } from '../../lib/analytics'

const HeaderAlert = styled.div`
background-color: #0091ad;

p {
margin: 0;
padding: 15px 0;
color: #fff;
font-family: SFMono-Regular, Consolas, Liberation, Mono, Menlo, monospace;
text-align: center;
}

span {
font-weight: bold;
}
`

const HeaderContainer = styled.header`
position: sticky;
top: 0;
Expand Down Expand Up @@ -133,73 +149,85 @@ const Header = () => {
)

return (
<HeaderContainer>
<Container>
<HeaderNavigator mx={2} mt={2}>
<HeaderLogo flex={[1, 'inherit']}>
<HomeLogoLink />
</HeaderLogo>
<HeaderLeftList display={['none', 'flex']}>
<HeaderLink p={2} mx={3} href='https://boosthub.io'>
{t('header.forTeams')}
</HeaderLink>
<li style={{ height: '30px' }}>
<iframe
src='https://ghbtns.com/github-btn.html?user=boostio&repo=boostnote.next&type=star&count=true&size=large'
frameBorder='0'
scrolling='0'
width='170'
height='30'
title='Star boostio/boostnote.next on GitHub'
></iframe>
</li>
</HeaderLeftList>
<HeaderRightList display={['none', 'none', 'none', 'flex']}>
<li>
<ButtonLink
bg='teal'
color='white'
fontSize={1}
py={2}
href='/#download'
>
<Icon path={mdiDownload} />
{t('common.downloadApp')}
</ButtonLink>
</li>
<li>
<ButtonLink
bg='white'
color='teal'
fontSize={1}
py={2}
href='https://note.boostio.co'
onClick={(event) => {
event.preventDefault()
sendGAEvent('open-in-browser')
queueNavigateToGA('https://note.boostio.co')
}}
>
<Icon path={mdiOpenInApp} /> {t('common.openInBrowser')}
</ButtonLink>
</li>
</HeaderRightList>
<HeaderLanguageSelect value={i18n.language} onChange={switchLanguage}>
<option value='de'>🇩🇪</option>
<option value='en'>🇺🇸</option>
<option value='es'>🇪🇸</option>
<option value='fr'>🇫🇷</option>
<option value='ja'>🇯🇵</option>
<option value='ko'>🇰🇷</option>
<option value='nl'>🇳🇱</option>
<option value='pt'>🇵🇹</option>
<option value='ru'>🇷🇺</option>
<option value='vn'>🇻🇳</option>
<option value='zh'>🇨🇳</option>
</HeaderLanguageSelect>
</HeaderNavigator>
</Container>
</HeaderContainer>
<>
<HeaderAlert>
<p>
<span>Boost Hub</span>, the workspace app for developer teams, has
arrived!
</p>
</HeaderAlert>

<HeaderContainer>
<Container>
<HeaderNavigator mx={2} py={2}>
<HeaderLogo flex={[1, 'inherit']}>
<HomeLogoLink />
</HeaderLogo>
<HeaderLeftList display={['none', 'flex']}>
<HeaderLink p={2} mx={3} href='https://boosthub.io'>
{t('header.forTeams')}
</HeaderLink>
<li style={{ height: '30px' }}>
<iframe
src='https://ghbtns.com/github-btn.html?user=boostio&repo=boostnote.next&type=star&count=true&size=large'
frameBorder='0'
scrolling='0'
width='170'
height='30'
title='Star boostio/boostnote.next on GitHub'
></iframe>
</li>
</HeaderLeftList>
<HeaderRightList display={['none', 'none', 'none', 'flex']}>
<li>
<ButtonLink
bg='teal'
color='white'
fontSize={1}
py={2}
href='/#download'
>
<Icon path={mdiDownload} />
{t('common.downloadApp')}
</ButtonLink>
</li>
<li>
<ButtonLink
bg='white'
color='teal'
fontSize={1}
py={2}
href='https://note.boostio.co'
onClick={(event) => {
event.preventDefault()
sendGAEvent('open-in-browser')
queueNavigateToGA('https://note.boostio.co')
}}
>
<Icon path={mdiOpenInApp} /> {t('common.openInBrowser')}
</ButtonLink>
</li>
</HeaderRightList>
<HeaderLanguageSelect
value={i18n.language}
onChange={switchLanguage}
>
<option value='de'>🇩🇪</option>
<option value='en'>🇺🇸</option>
<option value='es'>🇪🇸</option>
<option value='fr'>🇫🇷</option>
<option value='ja'>🇯🇵</option>
<option value='ko'>🇰🇷</option>
<option value='nl'>🇳🇱</option>
<option value='pt'>🇵🇹</option>
<option value='ru'>🇷🇺</option>
<option value='vn'>🇻🇳</option>
<option value='zh'>🇨🇳</option>
</HeaderLanguageSelect>
</HeaderNavigator>
</Container>
</HeaderContainer>
</>
)
}

Expand Down
14 changes: 10 additions & 4 deletions homepage/components/organisms/KickstarterCampaignSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,28 @@
import React from 'react'
import Text from '../atoms/Text'
import Container from '../atoms/Container'
import Row from '../atoms/Row'
import Column from '../atoms/Column'
import styled from '../../lib/styled'
import { space, SpaceProps } from 'styled-system'
import ButtonLink from '../atoms/ButtonLink'
import Link from 'next/link'

const Container = styled.div<SpaceProps>`
max-width: 72em;
margin: 0 auto;
${space}
`

const CampaignImage = styled.img`
width: 100%;
`

const KickstarterCampaignSection = () => {
return (
<section>
<Container my={5}>
<Container mt={[0, 0, 5, 5]} mb={7}>
<Row>
<Column width={1 / 2}>
<Column width={[1, 1, 1 / 2, 1 / 2]} mb={[4, 4, 0, 0]}>
<Text as='h2' fontSize={[3, 4, 5]}>
Thank you for supporting our Kickstarter campaign
</Text>
Expand All @@ -30,7 +36,7 @@ const KickstarterCampaignSection = () => {
</ButtonLink>
</Link>
</Column>
<Column width={1 / 2}>
<Column width={[1, 1, 1 / 2, 1 / 2]}>
<CampaignImage src='/static/kickstarter-campaign.svg' />
</Column>
</Row>
Expand Down
Loading