Skip to content

Commit

Permalink
[Landing] New layout with some feature screenshots
Browse files Browse the repository at this point in the history
  • Loading branch information
brunolemos committed Nov 11, 2019
1 parent 9c86c1e commit 814b11c
Show file tree
Hide file tree
Showing 45 changed files with 426 additions and 177 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<p align="center">
<img src="https://user-images.githubusercontent.com/619186/52172760-33710f00-275d-11e9-9adb-8ea4209e4453.png" height="100" /><br/>
<span><b>DevHub</b>: <span>GitHub Management Tool</span><br/>
<span><b>DevHub</b>: <span>TweetDeck for GitHub</span><br/>
<span><a href="https://play.google.com/store/apps/details?id=com.devhubapp&utm_source=github_repo_link" target="_blank">Android</a>, <a href="https://itunes.apple.com/us/app/devhub-for-github/id1191864199?l=en&mt=8&utm_source=github_repo_link" target="_blank">iOS</a>, <a href="https://devhubapp.com/" target="_blank">Web</a> & <a href="https://github.com/devhubapp/devhub/releases" target="_self">Desktop</a> with <b>95%+ code sharing</b> between them<br/><i>thanks to React Native + React Native Web</i></span><br/>
<p align="center">
<a href="https://itunes.apple.com/us/app/devhub-for-github/id1191864199?l=en&mt=8&utm_source=github_repo_button" target="_blank"><img alt="Download on the App Store" height="50" src="https://user-images.githubusercontent.com/619186/52173137-d416fd00-2764-11e9-98c1-77607061f188.png" /></a>
Expand Down
2 changes: 1 addition & 1 deletion landing/pages/_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export default class App extends NextApp {
<AuthProvider>
<Container>
<Head>
<title>DevHub | GitHub Management tool</title>
<title>DevHub | TweetDeck for GitHub</title>
</Head>

<ThemeConsumer>
Expand Down
4 changes: 2 additions & 2 deletions landing/pages/_document.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import NextDocument, { Head, Main, NextScript } from 'next/document'
import React from 'react'

const shortDescriptionTitle = 'GitHub Management Tool'
const shortDescriptionTitle = 'TweetDeck for GitHub'
const shortDescriptionContent =
"Take back control of your GitHub workflow. Manage notifications, apply filters, save custom searches and don't miss anything important."
'Create columns with filters; Manage Notifications, Issues, Pull Requests and Repository Activities; Bookmark things for later; Enable Desktop Push Notifications.'
const fullDescription = `${shortDescriptionTitle}. ${shortDescriptionContent}`
const screenshot =
'https://devhubapp.com/static/screenshots/devhub-desktop-zoomed-dark.jpg'
Expand Down
File renamed without changes.
28 changes: 20 additions & 8 deletions landing/src/components/common/CheckLabels.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,36 @@
import classNames from 'classnames'
import React, { ReactElement } from 'react'

import { CheckLabelProps } from './CheckLabel'

export interface CheckLabelsProps {
center?: boolean
className?: string
children: Array<ReactElement<CheckLabelProps> | false>
}

export function CheckLabels(props: CheckLabelsProps) {
const { children } = props
const { center, className, children } = props

const total = React.Children.count(children)

return (
<div className="flex flex-row flex-wrap">
{React.Children.map(children, (child, index) => (
<>
{child}
{!!(child && index < total - 1) && <div className="pr-4" />}
</>
))}
<div
className={classNames('flex', center && 'items-center m-auto', className)}
>
<div
className={classNames(
'flex flex-row flex-wrap',
center && 'items-center justify-center m-auto text-center',
)}
>
{React.Children.map(children, (child, index) => (
<>
{child}
{!!(child && index < total - 1) && <div className="pr-4" />}
</>
))}
</div>
</div>
)
}
11 changes: 11 additions & 0 deletions landing/src/components/common/LogoHead.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react'

export function LogoHead() {
return (
<img
alt="DevHub logo"
className="w-20 h-20 m-auto mb-6 bg-primary border-4 border-bg-less-2 rounded-full"
src="/static/logo.png"
/>
)
}
75 changes: 75 additions & 0 deletions landing/src/components/common/ResponsiveImage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import classNames from 'classnames'
import React, { CSSProperties } from 'react'

import { aspectRatioToStyle } from '../../helpers'

export interface ResponsiveImageProps {
alt: string
aspectRatio: number
containerClassName?: string
disableHorizontalScrolling?: boolean
enableBorder?: boolean
imageClassName?: string
imageStyle?: CSSProperties
minHeight?: number
src: string
}

export function ResponsiveImage(props: ResponsiveImageProps) {
const {
alt,
aspectRatio,
containerClassName,
disableHorizontalScrolling,
enableBorder,
imageClassName,
imageStyle,
minHeight = 500,
src,
} = props

const defaultStyle = { minHeight, minWidth: minHeight * aspectRatio }

return (
<div
className={classNames(
!disableHorizontalScrolling && 'overflow-x-auto overflow-y-hidden',
'-ml-8 sm:ml-0 -mr-8 sm:mr-0',
containerClassName || 'sm:w-full',
)}
>
<div
className={classNames(
enableBorder && 'sm:p-2',
'bg-less-1 sm:rounded-lg',
)}
style={defaultStyle}
>
<div
className="relative w-full h-full bg-less-1 rounded-lg"
style={aspectRatioToStyle(aspectRatio)}
>
<img
alt={alt}
src={src}
className={classNames(
'hidden sm:block absolute inset-0 object-cover w-full rounded',
imageClassName,
)}
style={imageStyle}
/>
<div
className={classNames(
'block sm:hidden absolute inset-0 bg-cover w-full h-full rounded',
imageClassName,
)}
style={{
backgroundImage: `url(${src})`,
...imageStyle,
}}
/>
</div>
</div>
</div>
)
}
3 changes: 2 additions & 1 deletion landing/src/components/common/buttons/Button.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import classNames from 'classnames'
import Link from 'next/link'
import React, { AnchorHTMLAttributes } from 'react'

import { Loader } from '../Loader'

const twClasses = {
button:
'btn flex items-center justify-center py-2 px-8 border font-semibold rounded-full cursor-pointer whitespace-no-wrap',
'btn flex items-center justify-center py-2 px-8 lg:px-10 border font-semibold rounded-full cursor-pointer whitespace-no-wrap',
button__primary: 'bg-primary text-primary-foreground border-primary',
// button__secondary: 'bg-transparent text-primary border-primary',
button__neutral: 'bg-less-2 text-default border-bg-darker-2',
Expand Down
2 changes: 1 addition & 1 deletion landing/src/components/sections/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default function Footer() {
</Link>

<Link href="/account">
<a className={twClasses.footerLink}>My account</a>
<a className={twClasses.footerLink}>Manage subscription</a>
</Link>
</div>

Expand Down
11 changes: 3 additions & 8 deletions landing/src/components/sections/GetStartedBlock.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,13 @@
import Button from '../common/buttons/Button'
import DownloadButtons from './download/DownloadButtons'

export interface GetStartedBlockProps {}

export default function GetStartedBlock(_props: GetStartedBlockProps) {
return (
<section id="get-started" className="bg-less-1 p-6">
<div className="container text-center">
<h3 className="uppercase">Get Started Now</h3>

<div className="flex flex-row justify-center">
<Button type="primary" href="/download">
Download DevHub
</Button>
</div>
<h3 className="uppercase mb-6">Get Started Now</h3>
<DownloadButtons center />
</div>
</section>
)
Expand Down
2 changes: 1 addition & 1 deletion landing/src/components/sections/UsedByCompaniesBlock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default function UsedByCompaniesBlock(
<section id="trusted-by" className="bg-less-1 py-6">
<div className="container text-center">
<h3 className="uppercase mb-0">
Used by 20,000+ Developers &amp; Managers
Join 20,000+ Developers &amp; Managers
</h3>
<h4 className="mb-4">Including people from these companies:</h4>

Expand Down
36 changes: 25 additions & 11 deletions landing/src/components/sections/download/DownloadButtons.tsx
Original file line number Diff line number Diff line change
@@ -1,42 +1,56 @@
import classNames from 'classnames'

import { constants } from '@brunolemos/devhub-core'
import { getSystemLabel } from '../../../helpers'
import { useSystem } from '../../../hooks/use-system'
import Button from '../../common/buttons/Button'

export interface DownloadButtonsProps {}
export interface DownloadButtonsProps {
center?: boolean
className?: string
}

export default function DownloadButtons(props: DownloadButtonsProps) {
const { center, className } = props

export default function DownloadButtons(_props: DownloadButtonsProps) {
const { os } = useSystem()

return (
<div className="flex flex-row flex-wrap mb-4">
<div
className={classNames(
'flex flex-row flex-wrap',
center && 'items-center justify-center m-auto text-center',
className,
)}
>
{os ? (
<>
<Button
type="primary"
href="/download?autostart"
href="/pricing"
target="_top"
className="mb-2 mr-2"
>
{`Download for ${getSystemLabel(os)}`}
Start free trial
</Button>

<Button
type="neutral"
href="https://app.devhubapp.com/"
target="_top"
className="mb-2"
href="/download?autostart"
className="mb-2 mr-2"
>
Use web version
{`Download for ${getSystemLabel(os)}`}
</Button>
</>
) : (
<>
<Button type="primary" href="/download" className="mb-2 mr-2">
<Button type="primary" href="/download" className="mb-2">
Download the app
</Button>

<Button
type="neutral"
href="https://app.devhubapp.com/"
href={constants.APP_BASE_URL}
target="_top"
className="mb-2"
>
Expand Down
50 changes: 38 additions & 12 deletions landing/src/components/sections/features/FeatureBlock.tsx
Original file line number Diff line number Diff line change
@@ -1,38 +1,64 @@
import classNames from 'classnames'

import { aspectRatioToStyle } from '../../../helpers'
import {
ResponsiveImage,
ResponsiveImageProps,
} from '../../common/ResponsiveImage'

export interface FeatureBlockProps {
children?: React.ReactNode
inverted?: boolean
image: ResponsiveImageProps & { position: 'left' | 'right' | 'full' }
title: string
subtitle: string
}

export default function FeatureBlock(props: FeatureBlockProps) {
const { children, inverted, title, subtitle } = props
const {
children,
image: { position, ...imageProps },
title,
subtitle,
} = props

return (
<section className="feature-block container">
<div
className={classNames(
'flex flex-col lg:px-8 xl:items-center',
inverted ? 'lg:flex-row-reverse' : 'lg:flex-row',
'flex flex-col',
position === 'left'
? 'lg:flex-row-reverse lg:px-8 xl:items-center'
: position === 'right'
? 'lg:flex-row lg:px-8 xl:items-center'
: 'sm:items-center text-center',
)}
>
<div className={classNames('lg:w-5/12', inverted ? '' : 'lg:mr-16')}>
<div
className={classNames(
position === 'left'
? 'lg:w-5/12'
: position === 'right'
? 'lg:w-5/12 lg:mr-16'
: 'lg:w-10/12 xl:w-8/12 mb-4',
)}
>
<h1 className="mb-2 text-3xl">{title}</h1>
<h2 className="mb-6 text-xl">{subtitle}</h2>
{children}
{!!children && <div className="pb-6" />}
</div>

<div className={classNames('lg:w-7/12', inverted ? 'lg:mr-16' : '')}>
<div
className="bg-less-1 rounded-lg"
style={aspectRatioToStyle(16 / 9)}
/>
</div>
<ResponsiveImage
enableBorder
minHeight={500}
containerClassName={classNames(
position === 'left'
? 'lg:w-7/12 lg:mr-16'
: position === 'right'
? 'lg:w-7/12'
: undefined,
)}
{...imageProps}
/>
</div>
</section>
)
Expand Down
Loading

0 comments on commit 814b11c

Please sign in to comment.