Skip to content
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

Content and layout updates for rimble storefront #11

Open
wants to merge 6 commits into
base: stage
Choose a base branch
from
Open

Content and layout updates for rimble storefront #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
286d230
npm -> yarn
Apr 8, 2019
84b6e8c
New rimble site
May 24, 2019
a77ed69
re-instated background image
May 24, 2019
f4b45ee
More copy changes
May 24, 2019
b212358
Playing with a rimble benefits section
May 24, 2019
61b43e6
Titles updated
May 24, 2019
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
10 changes: 7 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,24 +59,28 @@ Out of the box, we get:

Read more about [Next's Routing](https://github.com/zeit/next.js#routing)

## Install npm packages

`yarn install`

## Available Scripts

In the project directory, you can run:

### `npm run dev`
### `yarn dev`

Runs the app in the development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.<br>
You will also see any errors in the console.

### `npm run build`
### `yarn build`

Builds the app for production to the `.next` folder.<br>
It correctly bundles React in production mode and optimizes the build for the best performance.

### `npm run start`
### `yarn start`

Starts the application in production mode.
The application should be compiled with \`next build\` first.
Expand Down
2 changes: 1 addition & 1 deletion components/footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const Footer = ({}) => (
<FooterStyled>
<MyContainer flexDirection={['column', 'row']} py={4}>
<Link fontWeight={2} fontSize={0} href='//consensys.design/' target='_blank' rel='noopener'>Made by ConsenSys Design</Link>
<Text fontWeight={0} fontSize={0} color='#888D95'>© 2018 ConsenSys Inc.</Text>
<Text fontWeight={0} fontSize={0} color='#888D95'>© 2019 ConsenSys Inc.</Text>
</MyContainer>
</FooterStyled>
)
Expand Down
11 changes: 6 additions & 5 deletions components/header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,15 @@ import React from 'react'
import Text from './Text'
import Heading from './Heading'
import Button from './Button'
import Link from './Link'

const Header = ({}) => (
<header>
<Heading.h1 fontSize={[5, 7]} pr={[3, 6]}>Rimble Design System</Heading.h1>
<Text.p fontSize={2} mt={3} mb={5} pr={[3, 6]}>Adaptable components and design standards for decentralized applications.</Text.p>

<Button as="a" href="#getting-started" width={['100%', 'auto']} mr={[0, 3]} mb={[3, 0]}>Get Started</Button>
<Button.outline as="a" href='//consensys.github.io/rimble-ui/' target='_blank' rel='noopener' width={['100%', 'auto']}>Documentation</Button.outline>
<Heading.h1 fontSize={[5, 7]} pr={[3, 6]}>Hi, we're Rimble 👋</Heading.h1>
<Heading.h2 fontSize={[2, 3]} my={3} pr={[3, 6]}>
A growing open-source library of components and guides for helping you make dApps everyone can use. We put out React components to help you <Link href="#build">build</Link> and guides to help you <Link href="#learn">learn.
</Link>
</Heading.h2>
</header>
);

Expand Down
2 changes: 1 addition & 1 deletion components/nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const Nav = () => (
<Container>
<NavList display='flex' flex='row nowrap'>
<li>
<Heading.h1 fontSize={[1, 2]} fontWeight={1} color={'mid-grey'}>Rimble Design System</Heading.h1>
<Heading.h1 fontSize={[1, 2]} fontWeight={1} color={'mid-grey'}>Rimble 🚀</Heading.h1>
</li>
<NavMenu></NavMenu>
</NavList>
Expand Down
8 changes: 1 addition & 7 deletions components/navMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,13 +100,7 @@ class Menu extends Component {
<StyledList hidden={!this.state.isOpen} >
<ul>
<li>
<Text fontSize={1} fontWeight={1} color={'mid-grey'}>v0.6.0</Text>
</li>
<li>
<Link href='//github.com/ConsenSys/rimble-ui' target='_blank' rel='noopener'>Github</Link>
</li>
<li>
<Link href='//consensys.github.io/rimble-ui/' target='_blank' rel='noopener'>Documentation</Link>
<Link href='https://consensys.github.io/rimble-app-demo/' target='_blank' rel='noopener'>Try demo</Link>
</li>
</ul>
</StyledList>
Expand Down
2 changes: 1 addition & 1 deletion pages/_document.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default class MyDocument extends Document {
return (
<html lang='en'>
<Head>
<title>Rimble Design System</title>
<title>Rimble component library</title>
{this.props.styleTags}
</Head>
<body>
Expand Down
124 changes: 81 additions & 43 deletions pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import ThemeProvider from '../components/ThemeProvider'
import Typography from '../components/typography'
import Container from '../components/Container'
import CodeBlock from '../components/CodeBlock'
import Button from '../components/Button'
import Heading from '../components/Heading'
import Text from '../components/Text'
import Hr from '../components/Hr'
Expand Down Expand Up @@ -47,89 +48,126 @@ const Masthead = styled(Flex)`
${backgroundImage}
`

const exampleCode = `
import React, { Component } from 'react'

import { Button } from 'rimble-ui'

class Example extends Component {
render () {
return (
<Button size={'medium'}>
Click me!
</Button>
)
}
}
`

const Home = () => (
<ThemeProvider>
<React.Fragment>
<Typography />
<Head title="Rimble Design System" />
<Head title="Rimble – Open-source components and guides for building amazing dApps" />
<Nav/>
<main role="main">
<Masthead backgroundImage={['none', 'none', 'url("/static/svg/fig-bg.svg")']} >
<Masthead backgroundImage={['url("/static/svg/fig-1.svg")']} >
<Container>
<Header/>
</Container>
</Masthead>
<section>




<section id="build">
<Container>
<Box my={5}>
<Heading.h1 fontSize={[3, 4]}>Why Rimble?</Heading.h1>
<Heading.h3 mt={3} fontSize={[3, 4]} >Build 👷‍♀️</Heading.h3>
<Hr/>
<Text.p fontSize={[1, 2]}>
Decentralized applications (dApps) require users to learn new patterns and they present new hurdles for designers and front-end developers. Rimble is here to make life easier for everyone. As an open source project, Rimble aims to create common dApp UX patterns, validated through user research, and built for developers.
</Text.p>

<Text.p>Your backlog is already *this* big. And we've already designed, tested and built these. Makes sense right?</Text.p>
<Flex mt={4} width={1} flexDirection={['column', 'row']}>
<Box flex={'1 1 auto'} width={[1, 1/3]} mr={5}>
<Box flex={'1 1 auto'} width={[1, 1/2]} mr={5}>
<Flex my={3}>
<ReactSVG src='static/svg/fig-1.svg' />
</Flex>
<Heading.h2 fontSize={[2, 3]} fontWeight={1}>Flexible</Heading.h2>
<Text.p>Your tech stack and workflow are yours to decide. We impose as few constraints as possible. </Text.p>
<Heading.h2 fontSize={[2, 3]} fontWeight={1}>Rimble UI</Heading.h2>
<Text.p>Clean, customisable building blocks for putting your interface together, including UI for Ethereum concepts.</Text.p>
<Button.outline mt={3} mr={5} mb={5} href='https://github.com/ConsenSys/rimble-ui' target='_blank' rel='noopener'>Get the code</Button.outline>
<Link mt={3} ml={5} mb={5} href='https://consensys.github.io/rimble-ui/?path=/story/getting-started--welcome' target='_blank' rel='noopener'>Read the docs</Link>
</Box>
<Box flex={'1 1 auto'} width={[1, 1/3]} mr={5}>
<Box flex={'1 1 auto'} width={[1, 1/2]} mr={5}>
<Flex my={3}>
<ReactSVG src='static/svg/fig-2.svg' />
</Flex>
<Heading.h2 fontSize={[2, 3]} fontWeight={1}>Research-driven</Heading.h2>
<Text.p>We are constantly talking to dApp designers, developers, and users to understand common challenges and effective UI patterns. </Text.p>
</Box>
<Box flex={'1 1 auto'} width={[1, 1/3]} >
<Flex my={3}>
<ReactSVG src='static/svg/fig-3.svg' />
</Flex>
<Heading.h2 fontSize={[2, 3]} fontWeight={1}>Human</Heading.h2>
<Text.p>Blockchain is confusing. We are a dedicated team, invested in being understandable and approachable.</Text.p>
<Heading.h2 fontSize={[2, 3]} fontWeight={1}>Rimble Web3</Heading.h2>
<Text.p>Drop-in components that solve an Ethereum UX problem out of the box. Configure some inputs and you're ready. </Text.p>
<Button.outline mt={3} mr={5} href='https://github.com/ConsenSys/rimble-web3-components' target='_blank' rel='noopener'>Get the code</Button.outline>
<Link disabled mt={3} ml={5} href='https://rimble-web3-components.netlify.com/?path=/story/connectionbanner--wrong-network-default' target='_blank' rel='noopener'>Docs coming soon!</Link>
</Box>
</Flex>
</Box>
</Container>
</section>

<section>
<Container>
<Heading.h3 fontSize={[3, 4]} id="learn">Learn 🤓</Heading.h3>

<Text.p>Research-led guides for creating user-friendly blockchain experiences</Text.p>
<Hr/>
<Flex mt={4} width={1} flexDirection={['column', 'row']}>
<Box flex={'1 1 auto'} width={[1, 1/3]} mr={5}>
<Flex my={3}>
<ReactSVG src='static/svg/fig-3.svg' />
</Flex>
<Heading.h2 fontSize={[2, 3]} fontWeight={1}>UX</Heading.h2>
<Text.p>In-depth pieces on designing patterns that help your users navigate Ethereum.</Text.p>
<Link disabled mt={3} ml={5} href='#' target='_blank' rel='noopener'>Guide coming soon!</Link>
</Box>
<Box flex={'1 1 auto'} width={[1, 1/3]} mr={5}>
<Flex my={3}>
<ReactSVG src='static/svg/fig-4.svg' />
</Flex>
<Heading.h2 fontSize={[2, 3]} fontWeight={1}>Content</Heading.h2>
<Text.p>Tips on designing dApps that talk sense – how to design the words in your dApp. </Text.p>
<Link disabled mt={3} ml={5} href='#' target='_blank' rel='noopener'>Guide coming soon!</Link>
</Box>
<Box flex={'1 1 auto'} width={[1, 1/3]} mr={5}>
<Flex my={3}>
<ReactSVG src='static/svg/fig-3.svg' />
</Flex>
<Heading.h2 fontSize={[2, 3]} fontWeight={1}>Design</Heading.h2>
<Text.p>Guidelines for styling Rimble components to fit your product's brand.</Text.p>
<Link disabled mt={3} ml={5} href='#' target='_blank' rel='noopener'>Guide coming soon!</Link>
</Box>
</Flex>

</Container>
</section>


<section>
<Container>
<Box my={5}>
{/* body section */}
<Heading.h1 id='getting-started' fontSize={[3, 4]}>Getting Started</Heading.h1>
<Heading.h1 fontSize={[3, 4]}>Why Rimble? 🤔</Heading.h1>
<Hr/>
<Heading.h2 fontSize={2} fontWeight={1}>Installation</Heading.h2>
<CodeBlock code={'$ npm install --save rimble-ui styled-components'} />
<Heading.h2 fontSize={2} fontWeight={1}>Usage</Heading.h2>
<CodeBlock code={exampleCode} />
<Flex mt={4} width={1} flexDirection={['column', 'row']}>
<Box alignItems="center" justifyContent="center" flex={'1 1 auto'} width={[1, 1/2]} mr={5}>
<ReactSVG src='static/svg/fig-3.svg' />
</Box>
<Box flex={'1 1 auto'} width={[1, 1/2]} mr={5}>
<Heading.h2 fontSize={[2, 3]} fontWeight={1}>Solve the problems you care about, not the blockchain ones</Heading.h2>
<Text.p>Don't let blockchain usability issues get in the way of your vision.</Text.p>
</Box>
</Flex>
<Flex mt={4} width={1} flexDirection={['column', 'row']}>
<Box flex={'1 1 auto'} width={[1, 1/2]} mr={5}>
<Heading.h2 fontSize={[2, 3]} fontWeight={1}>Got more ideas than time?</Heading.h2>
<Text.p>Rimble helps those with more ideas than time – our components include functionality out of the box that we've already designed, tested and iterated on. </Text.p>
</Box>
<Box flex={'1 1 auto'} width={[1, 1/2]} mr={5}>
<ReactSVG src='static/svg/fig-3.svg' />
</Box>
</Flex>
</Box>
</Container>
</section>


<section>
<Container>
<Box my={5}>
<Heading.h1 fontSize={[3, 4]}>Made by ConsenSys Design</Heading.h1>
<Heading.h1 fontSize={[3, 4]}>Contribute to Rimble 🏅</Heading.h1>
<Hr/>
<Text.p>
Rimble is created by <Link href='//consensys.design/' target='_blank' rel='noopener'>ConsenSys Design.</Link> Want to help us define the roadmap? Submit feedback or feature requests on the <Link href='//github.com/ConsenSys/rimble-ui' target='_blank' rel='noopener'>Rimble</Link> GitHub page.
Want to help us define the roadmap? Submit feedback or feature requests on our GitHub pages.
</Text.p>
</Box>
</Container>
Expand Down
2 changes: 1 addition & 1 deletion static/svg/baseline-menu-24px.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 25 additions & 0 deletions static/svg/fig-4.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion static/svg/fig-bg.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.