From 14860bef1c004702d7a231fadcd63f500d218a5f Mon Sep 17 00:00:00 2001 From: Nicholas Zuber Date: Thu, 8 Nov 2018 02:41:40 -0500 Subject: [PATCH] Improve homepage a bit --- package.json | 3 +- src/components/Icon/index.js | 6 + src/components/Icon/svg/ear.svg | 1 + src/components/Icon/svg/ring.svg | 1 + src/components/Icon/svg/zap.svg | 1 + src/pages/Home/Scene.js | 467 ++++++++++++++++++++++++++++--- src/styles/index.css | 4 +- 7 files changed, 438 insertions(+), 45 deletions(-) create mode 100644 src/components/Icon/svg/ear.svg create mode 100644 src/components/Icon/svg/ring.svg create mode 100644 src/components/Icon/svg/zap.svg diff --git a/package.json b/package.json index 3be2c8d..fdf803b 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,8 @@ "scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js && cp build/index.html build/200.html", - "test": "node scripts/test.js" + "test": "node scripts/test.js", + "deploy": "surge" }, "eslintConfig": { "extends": "react-app" diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js index 57672fa..668729c 100644 --- a/src/components/Icon/index.js +++ b/src/components/Icon/index.js @@ -40,6 +40,9 @@ import unlocked from './svg/unlocked.svg'; import undo from './svg/undo.svg'; import user from './svg/user.svg'; import x from './svg/x.svg'; +import zap from './svg/zap.svg'; +import ear from './svg/ear.svg'; +import ring from './svg/ring.svg'; import issue_closed from './svg/github/issue-closed.svg'; import issue_open from './svg/github/issue-open.svg'; @@ -107,6 +110,9 @@ Icon.Unlocked = createIcon(unlocked); Icon.Undo = createIcon(undo); Icon.User = createIcon(user); Icon.X = createIcon(x); +Icon.Zap = createIcon(zap); +Icon.Ear = createIcon(ear); +Icon.Ring = createIcon(ring); Icon.IssueClosed = createIcon(issue_closed); Icon.IssueOpen = createIcon(issue_open); diff --git a/src/components/Icon/svg/ear.svg b/src/components/Icon/svg/ear.svg new file mode 100644 index 0000000..050b791 --- /dev/null +++ b/src/components/Icon/svg/ear.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Icon/svg/ring.svg b/src/components/Icon/svg/ring.svg new file mode 100644 index 0000000..5f606bc --- /dev/null +++ b/src/components/Icon/svg/ring.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Icon/svg/zap.svg b/src/components/Icon/svg/zap.svg new file mode 100644 index 0000000..e3560b4 --- /dev/null +++ b/src/components/Icon/svg/zap.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/Home/Scene.js b/src/pages/Home/Scene.js index 44fc3fd..2d3b210 100644 --- a/src/pages/Home/Scene.js +++ b/src/pages/Home/Scene.js @@ -7,6 +7,344 @@ import Icon from '../../components/Icon'; import Logo from '../../components/Logo'; import '../../styles/gradient.css'; +function createImagePlaceholder () { + return ( + + {/* navigation backdrop */} +
+ {/* buttons */} +
+
+
+ {/* url */} +
+ {/* webpage header */} +
+
+ {/* status headers */} +
+
+
+
+
+
+ {/* notificaton row */} +
+
+
+
+ +
+
+ +
+
+
+
+
+ {/* notificaton row */} +
+
+
+
+
+ +
+
+
+
+
+ + ); +} + +const Section = styled('div')({ + position: 'relative', + width: '100%', + minHeight: 300, + display: 'flex', + alignItems: 'center', + flexDirection: 'row', + margin: '40px auto', + padding: '80px 0' +}, ({alt}) => alt && ({ + background: '#24292e', + 'p': { + color: '#fff' + }, + 'h2': { + color: '#fff' + }, +})); + +const Item = styled('div')({ + flex: 1, + display: 'block', + padding: '24px 72px', + 'h2': { + marginTop: 0, + fontSize: 36, + textAlign: 'left', + fontWeight: 700 + }, + 'p': { + fontSize: 18 + } +}, ({flex}) => ({ + flex +})); +const ItemText = styled('div')({ + display: 'flex', + flexDirection: 'row', + margin: '20px 0', + 'p': { + flex: .9, + margin: 0 + }, + 'div': { + flex: .1, + marginTop: 3 + }, +}); + +const ImagePlaceholder = styled('div')({ + position: 'relative', + display: 'block', + height: 400, + background: '#fff', + borderRadius: 8, + boxShadow: '0 2px 8px rgba(179, 179, 179, 0.25)' + // '-webkit-mask-image': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)' +}); + const Header = styled('h1')({ color: '#fff', padding: '0 20px', @@ -80,50 +418,95 @@ const UnofficialReleaseTag = styled('span')({ export default function Scene ({loggedIn, onLogout, ...props}) { return ( -
- - - beta - {loggedIn ? ( +
+
+ + + beta + {loggedIn ? ( +
+ notifications + sign out +
+ ) : ( +
+ sign in +
+ )} + + +
Control your notifications
+ Prioritize the tasks that keep you and your team most productive
- notifications - sign out + let's get started
- ) : ( -
- sign in -
- )} - - -
Control your notifications
- Prioritize the tasks that keep you and your team most productive -
- let's get started -
- - View and contribute on GitHub - - - Free and open sourced - - - - + + View and contribute on GitHub + + + Free and open sourced + + + + +
+
+ + {createImagePlaceholder()} + + +

Surface the most important tasks to tackle as they happen

+ + +

The issues and pull requests that require your attention the most are called out for you.

+ + + +

We listen for updates with your notifications and let you know as soon as things change.

+ + + +

Super charge your day by focusing on getting things done, rather than sifting through notifications.

+ + +
+
+ + +

Surface the most important tasks to tackle as they happen

+ + +

The issues and pull requests that require your attention the most are called out for you.

+ + + +

We listen for updates with your notifications and let you know as soon as things change.

+ + + +

Super charge your day by focusing on getting things done, rather than sifting through notifications.

+ + + + {createImagePlaceholder()} + + +
); }; diff --git a/src/styles/index.css b/src/styles/index.css index 0740da5..22fb68d 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -37,7 +37,7 @@ body { } h1 { - font-weight: 500; + font-weight: 600; font-size: 48px; letter-spacing: -0.05px; font-size: 52px; @@ -59,7 +59,7 @@ h3 { p { font: 15px/22px 'Inter UI', system-ui, sans-serif; - color: #111; + color: #24292e; font: 15px/22px 'Inter UI', system-ui, sans-serif; font-size: 15px; line-height: 1.5;