Improve homepage a bit

2024-08-16 15:00:26 +03:00 · 2018-11-08 02:41:40 -05:00 · 2018-11-08 02:41:40 -05:00 · 14860bef1c
commit 14860bef1c
parent 71c45adb98
7 changed files with 438 additions and 45 deletions
--- 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"
--- 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);
--- a/src/components/Icon/svg/ear.svg
+++ b/src/components/Icon/svg/ear.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17 20c-.29 0-.56-.06-.76-.15-.71-.37-1.21-.88-1.71-2.38-.51-1.56-1.47-2.29-2.39-3-.79-.61-1.61-1.24-2.32-2.53C9.29 10.98 9 9.93 9 9c0-2.8 2.2-5 5-5s5 2.2 5 5h2c0-3.93-3.07-7-7-7S7 5.07 7 9c0 1.26.38 2.65 1.07 3.9.91 1.65 1.98 2.48 2.85 3.15.81.62 1.39 1.07 1.71 2.05.6 1.82 1.37 2.84 2.73 3.55.51.23 1.07.35 1.64.35 2.21 0 4-1.79 4-4h-2c0 1.1-.9 2-2 2zM7.64 2.64L6.22 1.22C4.23 3.21 3 5.96 3 9s1.23 5.79 3.22 7.78l1.41-1.41C6.01 13.74 5 11.49 5 9s1.01-4.74 2.64-6.36zM11.5 9c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5-2.5 1.12-2.5 2.5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
--- a/src/components/Icon/svg/ring.svg
+++ b/src/components/Icon/svg/ring.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M23.71 16.67C20.66 13.78 16.54 12 12 12 7.46 12 3.34 13.78.29 16.67c-.18.18-.29.43-.29.71 0 .28.11.53.29.71l2.48 2.48c.18.18.43.29.71.29.27 0 .52-.11.7-.28.79-.74 1.69-1.36 2.66-1.85.33-.16.56-.5.56-.9v-3.1c1.45-.48 3-.73 4.6-.73s3.15.25 4.6.72v3.1c0 .39.23.74.56.9.98.49 1.87 1.12 2.66 1.85.18.18.43.28.7.28.28 0 .53-.11.71-.29l2.48-2.48c.18-.18.29-.43.29-.71 0-.27-.11-.52-.29-.7zM21.16 6.26l-1.41-1.41-3.56 3.55 1.41 1.41s3.45-3.52 3.56-3.55zM13 2h-2v5h2V2zM6.4 9.81L7.81 8.4 4.26 4.84 2.84 6.26c.11.03 3.56 3.55 3.56 3.55z"/></svg>
--- a/src/components/Icon/svg/zap.svg
+++ b/src/components/Icon/svg/zap.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 2v11h3v9l7-12h-4l4-8z"/></svg>
--- 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 (
+    <ImagePlaceholder>
+      {/* navigation backdrop */}
+      <div style={{
+        position: 'absolute',
+        background: '#dee1e6',
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
+        top: 0,
+        left: 0,
+        right: 0,
+        height: 35
+      }} />
+      {/* buttons */}
+      <div style={{
+        position: 'absolute',
+        background: '#ff5e52',
+        top: 13,
+        left: 10,
+        borderRadius: '100%',
+        height: 10,
+        width: 10,
+      }} />
+      <div style={{
+        position: 'absolute',
+        background: '#ffbe05',
+        top: 13,
+        left: 10 + 16,
+        borderRadius: '100%',
+        height: 10,
+        width: 10,
+      }} />
+      <div style={{
+        position: 'absolute',
+        background: '#16cc38',
+        top: 13,
+        left: 10 + 32,
+        borderRadius: '100%',
+        height: 10,
+        width: 10,
+      }} />
+      {/* url */}
+      <div style={{
+        position: 'absolute',
+        background: '#f1f3f4',
+        top: 40,
+        left: 30,
+        right: 30,
+        height: 20,
+        borderRadius: 100
+      }} />
+      {/* webpage header */}
+      <div style={{
+        position: 'absolute',
+        background: '#24292e',
+        top: 65,
+        left: 0,
+        right: 0,
+        height: 30,
+      }} />
+      <div style={{
+        position: 'absolute',
+        background: '#3f4954',
+        top: 71,
+        left: 50,
+        height: 18,
+        width: 300,
+        borderRadius: 5
+      }} />
+      {/* status headers */}
+      <div style={{
+        position: 'absolute',
+        background: 'rgb(0, 209, 154)',
+        top: 120,
+        left: 100,
+        width: 30,
+        height: 10,
+        borderRadius: 4
+      }} />
+      <div style={{
+        position: 'absolute',
+        background: 'rgb(0, 209, 154)',
+        top: 140,
+        left: 100,
+        width: 100,
+        height: 5,
+        borderRadius: 4
+      }} />
+      <div style={{
+        position: 'absolute',
+        background: 'rgb(0, 158, 248)',
+        top: 120,
+        left: 210,
+        width: 30,
+        height: 10,
+        borderRadius: 4
+      }} />
+      <div style={{
+        position: 'absolute',
+        background: 'rgb(0, 158, 248)',
+        top: 140,
+        left: 210,
+        width: 100,
+        height: 5,
+        borderRadius: 4
+      }} />
+      <div style={{
+        position: 'absolute',
+        background: 'rgb(241, 44, 63)',
+        top: 120,
+        left: 320,
+        width: 30,
+        height: 10,
+        borderRadius: 4
+      }} />
+      <div style={{
+        position: 'absolute',
+        background: 'rgb(241, 44, 63)',
+        top: 140,
+        left: 320,
+        width: 100,
+        height: 5,
+        borderRadius: 4
+      }} />
+      {/* notificaton row */}
+      <div style={{
+        position: 'absolute',
+        background: '#fff',
+        top: 190,
+        left: -20,
+        right: -20,
+        height: 50,
+        borderRadius: 4,
+        boxShadow: 'rgba(130, 126, 126, 0.27) 0px 3px 8px',
+      }}>
+        <div style={{
+          position: 'absolute',
+          background: '#dee1e6',
+          top: 15,
+          left: 30,
+          width: 200,
+          height: 10,
+          borderRadius: 50
+        }} />
+        <div style={{
+          position: 'absolute',
+          background: '#dee1e6',
+          top: 30,
+          left: 30,
+          width: 50,
+          height: 7,
+          borderRadius: 50
+        }} />
+        <div style={{
+          position: 'absolute',
+          top: 12,
+          left: 300,
+          width: 30,
+          height: 30
+        }}>
+          <Icon.Hot shrink={1.1} />
+        </div>
+        <div style={{
+          position: 'absolute',
+          top: 13,
+          left: 330,
+          width: 30,
+          height: 30
+        }}>
+          <Icon.Convo shrink={1.1} />
+        </div>
+        <div style={{
+          position: 'absolute',
+          background: '#dee1e6',
+          top: 20,
+          right: 120,
+          width: 100,
+          height: 10,
+          borderRadius: 50
+        }} />
+        <div style={{
+          position: 'absolute',
+          background: '#dee1e6',
+          top: 15,
+          right: 20,
+          width: 20,
+          height: 20,
+          borderRadius: '100%'
+        }} />
+        <div style={{
+          position: 'absolute',
+          background: '#dee1e6',
+          top: 15,
+          right: 50,
+          width: 20,
+          height: 20,
+          borderRadius: '100%'
+        }} />
+      </div>
+      {/* notificaton row */}
+      <div style={{
+        position: 'absolute',
+        background: '#fff',
+        top: 280,
+        left: -20,
+        right: -20,
+        height: 50,
+        borderRadius: 4,
+        boxShadow: 'rgba(130, 126, 126, 0.27) 0px 3px 8px',
+      }}>
+        <div style={{
+          position: 'absolute',
+          background: '#dee1e6',
+          top: 15,
+          left: 30,
+          width: 220,
+          height: 10,
+          borderRadius: 50
+        }} />
+        <div style={{
+          position: 'absolute',
+          background: '#dee1e6',
+          top: 30,
+          left: 30,
+          width: 30,
+          height: 7,
+          borderRadius: 50
+        }} />
+        <div style={{
+          position: 'absolute',
+          background: '#dee1e6',
+          top: 30,
+          left: 64,
+          width: 7,
+          height: 7,
+          borderRadius: '100%'
+        }} />
+        <div style={{
+          position: 'absolute',
+          top: 12,
+          left: 315,
+          width: 30,
+          height: 30
+        }}>
+          <Icon.Timer shrink={1.1} />
+        </div>
+        <div style={{
+          position: 'absolute',
+          background: '#dee1e6',
+          top: 20,
+          right: 120,
+          width: 100,
+          height: 10,
+          borderRadius: 50
+        }} />
+        <div style={{
+          position: 'absolute',
+          background: '#dee1e6',
+          top: 15,
+          right: 20,
+          width: 20,
+          height: 20,
+          borderRadius: '100%'
+        }} />
+        <div style={{
+          position: 'absolute',
+          background: '#dee1e6',
+          top: 15,
+          right: 50,
+          width: 20,
+          height: 20,
+          borderRadius: '100%'
+        }} />
+      </div>
+    </ImagePlaceholder>
+  );
+}
+
+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 (
-    <div className="container-gradient" style={{
-      width: '100%',
-      height: 600,
-      position: 'relative',
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      overflowX: 'hidden'
-    }}>
-      <LandingHeader>
-        <Logo size={75} />
-        <UnofficialReleaseTag>beta</UnofficialReleaseTag>
-        {loggedIn ? (
+    <div>
+      <div className="container-gradient" style={{
+        width: '100%',
+        height: 600,
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        overflow: 'hidden'
+      }}>
+        <LandingHeader>
+          <Logo size={75} />
+          <UnofficialReleaseTag>beta</UnofficialReleaseTag>
+          {loggedIn ? (
+            <div className="button-container">
+              <RouterLink style={{marginRight: 15}} to={routes.NOTIFICATIONS}>notifications</RouterLink>
+              <LinkButton style={{marginRight: 15}} href="#" onClick={onLogout}>sign out</LinkButton>
+            </div>
+          ) : (
+            <div className="button-container">
+              <RouterLink style={{marginRight: 15}} to={routes.LOGIN}>sign in</RouterLink>
+            </div>
+          )}
+        </LandingHeader>
+        <LandingMessage>
+          <Header>Control your notifications</Header>
+          <SubHeader>Prioritize the tasks that keep you and your team most productive</SubHeader>
          <div className="button-container">
-            <RouterLink style={{marginRight: 15}} to={routes.NOTIFICATIONS}>notifications</RouterLink>
-            <LinkButton style={{marginRight: 15}} href="#" onClick={onLogout}>sign out</LinkButton>
+            <RouterLink to={routes.LOGIN}>let's get started</RouterLink>
          </div>
-        ) : (
-          <div className="button-container">
-            <RouterLink style={{marginRight: 15}} to={routes.LOGIN}>sign in</RouterLink>
-          </div>
-        )}
-      </LandingHeader>
-      <LandingMessage>
-        <Header>Control your notifications</Header>
-        <SubHeader>Prioritize the tasks that keep you and your team most productive</SubHeader>
-        <div className="button-container">
-          <RouterLink to={routes.LOGIN}>let's get started</RouterLink>
-        </div>
-        <BottomLinkContainer>
-          <SmallLink target="_blank" href="https://github.com/nickzuber/meteorite">View and contribute on GitHub</SmallLink>
-          <SmallText>
-            <Icon.PeopleWhite
-              shrink={0.55}
-              style={{
-                display: 'inline-block',
-                top: -3
-              }}
-            />
-            Free and open sourced
-          </SmallText>
-        </BottomLinkContainer>
-      </LandingMessage>
-      <Curve />
+          <BottomLinkContainer>
+            <SmallLink target="_blank" href="https://github.com/nickzuber/meteorite">View and contribute on GitHub</SmallLink>
+            <SmallText>
+              <Icon.PeopleWhite
+                shrink={0.55}
+                style={{
+                  display: 'inline-block',
+                  top: -3,
+                  right: -2
+                }}
+              />
+              Free and open sourced
+            </SmallText>
+          </BottomLinkContainer>
+        </LandingMessage>
+        <Curve />
+      </div>
+      <Section>
+        <Item>
+          {createImagePlaceholder()}
+        </Item>
+        <Item>
+          <h2>Surface the most important tasks to tackle as they happen</h2>
+          <ItemText>
+            <Icon.Ring />
+            <p>The issues and pull requests that require your attention the most are called out for you.</p>
+          </ItemText>
+          <ItemText>
+            <Icon.Ear />
+            <p>We listen for updates with your notifications and let you know as soon as things change.</p>
+          </ItemText>
+          <ItemText>
+            <Icon.Zap />
+            <p>Super charge your day by focusing on getting things done, rather than sifting through notifications.</p>
+          </ItemText>
+        </Item>
+      </Section>
+      <Section alt={true}>
+        <Item style={{flex: '0 0 2.5%', padding: 0}} />
+        <Item>
+          <h2>Surface the most important tasks to tackle as they happen</h2>
+          <ItemText>
+            <Icon.PeopleWhite />
+            <p>The issues and pull requests that require your attention the most are called out for you.</p>
+          </ItemText>
+          <ItemText>
+            <Icon.BoltWhite />
+            <p>We listen for updates with your notifications and let you know as soon as things change.</p>
+          </ItemText>
+          <ItemText>
+            <Icon.BookmarkAltWhite />
+            <p>Super charge your day by focusing on getting things done, rather than sifting through notifications.</p>
+          </ItemText>
+        </Item>
+        <Item>
+          {createImagePlaceholder()}
+        </Item>
+        <Item style={{flex: '0 0 2.5%', padding: 0}} />
+      </Section>
    </div>
  );
 };
--- 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;
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17 20c-.29 0-.56-.06-.76-.15-.71-.37-1.21-.88-1.71-2.38-.51-1.56-1.47-2.29-2.39-3-.79-.61-1.61-1.24-2.32-2.53C9.29 10.98 9 9.93 9 9c0-2.8 2.2-5 5-5s5 2.2 5 5h2c0-3.93-3.07-7-7-7S7 5.07 7 9c0 1.26.38 2.65 1.07 3.9.91 1.65 1.98 2.48 2.85 3.15.81.62 1.39 1.07 1.71 2.05.6 1.82 1.37 2.84 2.73 3.55.51.23 1.07.35 1.64.35 2.21 0 4-1.79 4-4h-2c0 1.1-.9 2-2 2zM7.64 2.64L6.22 1.22C4.23 3.21 3 5.96 3 9s1.23 5.79 3.22 7.78l1.41-1.41C6.01 13.74 5 11.49 5 9s1.01-4.74 2.64-6.36zM11.5 9c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5-2.5 1.12-2.5 2.5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 2v11h3v9l7-12h-4l4-8z"/></svg>`