Merge pull request #61 from SachaG/56-homepage-logos

56 homepage logos
storybookjs · May 25, 2017 · 1bcd131 · 1bcd131
2 parents f9f3e4c + 4f903b9
commit 1bcd131
Show file tree

Hide file tree

Showing 8 changed files with 286 additions and 60 deletions.
diff --git a/components/Homepage/Heading/index.js b/components/Homepage/Heading/index.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import './style.css';
 
-import storybookLogo from '../../../design/homepage/storybook-logo.png';
+import storybookLogo from '../../../design/homepage/storybook-logo-new.svg';
 
 const Heading = () => (
   <div id="heading" className="row">
     <div className="col-xs-12">
       <img className="sb-title" src={storybookLogo} alt="Storybook Logo" />
       <h3 className="sb-tagline">
-        UI Development Environment
+        The UI Development Environment
         <br />
         You'll
         {' '}
@@ -21,3 +21,60 @@ const Heading = () => (
 );
 
 export default Heading;
+
+const Logo = () => (
+  <svg className="sb-title" width='2598' height='804' viewBox='0 0 2598 804' xmlns='http://www.w3.org/2000/svg'
+  xmlnsXlink='http://www.w3.org/1999/xlink'>
+      <desc>Created using Figma</desc>
+      <g id='Canvas' transform='matrix(2 0 0 2 856 -2058)'>clip-path=&quot;url(#clip-0)&quot;
+          <g id='storybook-logo-new'>
+              <use xlinkHref='#path0_fill' transform='translate(-347 1104)' fill='#AD76B8'
+              id='Vector' />
+              <g id='Group'>
+                  <mask id='mask0_alpha'>
+                      <use xlinkHref='#path1_fill' transform='translate(-333 1090)' fill='#ED5B87'
+                      id='Vector' />
+                  </mask>
+                  <g id='Vector' mask='url(#mask0_alpha)'>
+                      <use xlinkHref='#path1_fill' transform='translate(-333 1090)' fill='#F77199'
+                      />
+                  </g>
+                  <g id='Vector 2' mask='url(#mask0_alpha)'>
+                      <use xlinkHref='#path2_fill' transform='translate(-187 1085)' fill='#FFF'
+                      />
+                  </g>
+              </g>
+              <g id='toryBook' transform='translate(-120 1129)'>
+                  <use xlinkHref='#path3_fill' fill='#7AB4F9' />
+                  <use xlinkHref='#path4_fill' fill='#F76F6F' />
+                  <use xlinkHref='#path5_fill' fill='#7AB4F8' />
+                  <use xlinkHref='#path6_fill' fill='#B987E4' />
+                  <use xlinkHref='#path7_fill' fill='#A9E26B' />
+                  <use xlinkHref='#path8_fill' fill='#F3AD38' />
+              </g>
+              <use xlinkHref='#path9_fill' transform='translate(-293 1130)' fill='#FFF'
+              id='S' />
+          </g>
+      </g>
+      <defs>
+          <path id='path0_fill' d='M 21 246L 9 0L 0 0L 9 246L 21 246Z' />
+          <path id='path1_fill' d='M 12 260L 0 14L 196 0L 196 269L 12 260Z' />
+          <path id='path2_fill' d='M 0 42L 1.57576 0.763636L 26 0L 26 42L 14.1818 31.3091L 0 42Z'
+          />
+          <path id='path3_fill' d='M 795.315 64.24L 760.775 59.62C 760.775 59.62 748.895 77.44 732.175 97.9C 734.815 51.04 738.115 19.58 738.115 19.58L 702.255 16.28C 702.255 16.28 698.295 97.68 697.415 162.36C 712.375 164.12 729.755 164.12 729.755 164.12L 730.855 125.4C 747.135 143.88 765.395 163.02 765.395 163.02L 803.455 156.86C 781.455 134.86 766.495 119.46 759.235 109.78C 767.595 98.56 782.555 80.74 795.315 64.24Z'
+          />
+          <path id='path4_fill' d='M 531.498 56.98C 498.058 56.98 483.758 83.82 483.758 115.72C 483.758 142.78 496.958 163.02 528.418 163.02C 563.618 163.02 576.158 136.62 576.158 106.04C 576.158 77.66 563.838 56.98 531.498 56.98ZM 543.158 110.22C 543.158 124.52 538.318 135.52 528.418 135.52C 520.058 135.52 516.758 125.84 516.758 115.72C 516.758 99.44 522.478 86.9 531.498 86.9C 540.738 86.9 543.158 99 543.158 110.22Z'
+          />
+          <path id='path5_fill' d='M 347.041 57.2L 314.261 57.2C 314.261 63.36 314.261 69.52 314.261 75.46C 314.261 99 314.041 117.92 314.041 117.92C 314.041 129.58 309.201 132.66 303.041 132.66C 296.661 132.66 293.361 129.8 293.361 117.48C 293.361 99.44 294.681 63.8 294.681 63.8L 261.901 62.92C 261.901 62.48 260.801 90.2 260.801 122.98C 260.801 155.76 281.481 158.18 290.941 158.18C 299.961 158.18 309.861 154.66 315.141 148.94C 315.141 167.64 309.201 173.8 296.001 173.8C 287.641 173.8 277.521 169.62 272.021 165L 272.021 195.14C 281.261 200.64 291.601 203.06 301.941 203.06C 323.941 203.06 345.501 190.3 345.941 153.56C 346.601 112.64 346.821 71.72 347.041 57.2Z'
+          />
+          <path id='path6_fill' d='M 219.276 70.62C 219.276 67.32 219.496 63.8 219.716 60.28L 189.136 59.18C 189.136 59.18 186.276 104.06 186.496 163.02C 201.236 164.12 218.396 164.12 218.396 164.12C 218.176 164.12 218.396 144.54 219.276 115.06C 219.716 97.9 225.876 92.62 235.116 92.62C 240.616 92.62 247.436 95.04 247.436 95.04L 250.956 64.46C 236.656 59.62 223.456 63.8 219.276 70.62ZM 449.266 89.32C 460.706 85.14 471.706 74.8 471.706 55.44C 471.706 34.76 452.786 16.28 398.886 14.3C 390.526 13.86 381.286 13.86 371.166 14.96C 371.166 14.96 369.406 131.12 368.086 165C 368.086 165 373.146 165 375.786 165C 440.686 166.32 469.066 149.16 470.826 121.44C 471.706 106.26 464.666 94.38 449.266 89.32ZM 435.186 60.72C 434.306 69.96 424.626 77 405.926 78.32C 406.366 64.02 407.466 47.08 407.686 44.88C 428.586 45.1 435.406 52.14 435.186 60.72ZM 404.606 134.64C 404.606 124.74 404.826 115.06 404.826 105.16C 407.686 104.94 410.546 104.94 412.966 105.16C 425.946 105.6 431.886 108.68 432.766 114.4C 433.206 116.16 433.206 118.36 432.766 120.56C 430.566 129.36 420.226 133.98 404.606 134.64Z'
+          />
+          <path id='path7_fill' d='M 126.088 56.98C 92.6475 56.98 78.3475 83.82 78.3475 115.72C 78.3475 142.78 91.5475 163.02 123.007 163.02C 158.207 163.02 170.748 136.62 170.748 106.04C 170.748 77.66 158.428 56.98 126.088 56.98ZM 137.748 110.22C 137.748 124.52 132.907 135.52 123.007 135.52C 114.647 135.52 111.347 125.84 111.347 115.72C 111.347 99.44 117.068 86.9 126.088 86.9C 135.328 86.9 137.748 99 137.748 110.22ZM 636.127 56.98C 602.687 56.98 588.387 83.82 588.387 115.72C 588.387 142.78 601.587 163.02 633.047 163.02C 668.247 163.02 680.787 136.62 680.787 106.04C 680.787 77.66 668.467 56.98 636.127 56.98ZM 647.787 110.22C 647.787 124.52 642.947 135.52 633.047 135.52C 624.687 135.52 621.387 125.84 621.387 115.72C 621.387 99.44 627.107 86.9 636.127 86.9C 645.367 86.9 647.787 99 647.787 110.22Z'
+          />
+          <path id='path8_fill' d='M 20.68 163.24C 37.62 163.46 53.9 161.26 53.9 161.26C 53.9 132.44 53.9 105.38 54.12 84.92C 62.92 84.04 70.18 82.94 70.18 82.94C 70.62 69.08 69.52 56.54 69.52 56.54L 54.56 57.42C 55 36.52 55.44 25.74 55.44 25.74L 20.24 27.94C 20.24 27.94 20.24 40.92 20.46 60.72C 9.68 62.04 1.76 64.24 1.76 64.24C 2.2 75.9 6.38 88.44 6.38 88.44L 20.68 87.78L 20.68 163.24Z'
+          />
+          <path id='path9_fill' d='M 74.64 65.28L 113.28 64.32C 114.24 26.88 94.8 8.40001 60.96 8.40001C 27.12 8.40001 8.16 27.6 8.16 56.4C 8.16 106.56 72.96 107.52 72.96 134.88C 72.96 142.56 69.36 147.12 61.44 147.12C 51.12 147.12 47.04 140.4 47.52 121.68L 6.96 121.68C 3.84 168 30.96 178.56 61.92 178.56C 91.92 178.56 115.44 164.64 115.44 134.4C 115.44 80.64 49.68 82.08 49.68 55.44C 49.68 44.64 57.36 43.2 61.92 43.2C 66.72 43.2 75.36 45.12 74.64 65.28Z'
+          />
+      </defs>
+  </svg>
+);
diff --git a/components/Homepage/MainLinks/index.js b/components/Homepage/MainLinks/index.js
@@ -28,7 +28,6 @@ const MainLinks = () => (
           </div>
         </div>
       </div>
-      <hr />
     </div>
   </div>
 );

diff --git a/components/Homepage/UsedBy/index.jsx b/components/Homepage/UsedBy/index.jsx
@@ -1,17 +1,38 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import './style.css';
 
-const User = ({ logo }) => <img src={logo} />;
+const UsedByBg = ({ color }) => (
+  <div className="used-by-bg">
+    <svg width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 1440 380" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+      <g id="Canvas" transform="translate(618 -3261)">
+        <use xlinkHref="#path0_fill" transform="translate(-618 3261.5)" fill={color} id="used-by-bg" />
+      </g>
+      <defs>
+        <path id="path0_fill" d="M 43.5 300.5L 0 35L 1440 0L 1371.5 379.5L 43.5 300.5Z"/>
+      </defs>
+    </svg>
+  </div>
+);
+
+const User = ({ logo, demo, site, title }) => (
+  <a className="used-by-user" href={demo || site}>
+    <img className="used-by-user-image" src={logo} alt={title} />
+  </a>
+);
 
 const UsedBy = ({ users }) => (
-  <div id="featured" className="row">
-    <div className="col-xs-12">
-      <h2>Used By</h2>
-      <div className="row">
-        {users.map((user, idx) => <User key={idx} {...user} />)}
+  <div className="used-by-wrapper">
+    <div className="used-by">
+      <UsedByBg color="#E7F6D8" />
+      <div className="used-by-contents">
+        <h2 className="used-by-title">Used by these fine folks:</h2>
+        <div className="used-by-users">
+          {users.map((user, idx) => <User key={idx} {...user} />)}
+        </div>
       </div>
-      <hr />
     </div>
+    <a className="used-by-more-examples" href="#">See more examples…</a>
   </div>
 );
 

diff --git a/components/Homepage/UsedBy/style.css b/components/Homepage/UsedBy/style.css
@@ -0,0 +1,67 @@
+.used-by-wrapper{
+  margin-bottom: 60px;
+}
+
+.used-by{
+  max-width: 1000px;
+  margin: 0 auto;
+  position: relative;
+}
+
+.used-by-bg{
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+}
+
+.used-by-bg svg{
+  height: 100%;
+  width: 100%;
+}
+
+.used-by-contents{
+  padding: 40px 20px;
+  position: relative;
+  z-index: 1;
+}
+
+.used-by-title{
+  text-align: center;
+  margin: 0 0 30px 0;
+  opacity: 0.5;
+  color: #468c07;
+}
+
+
+.used-by-users{
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.used-by-user{
+  /*flex: 1;*/
+  margin-right: 30px;
+  max-width: 100px;
+  filter: grayscale(100%);
+  opacity: 0.8;
+}
+.used-by-user:last-child{
+  margin-right: 0;
+}
+.used-by-user:hover{
+  filter: none;
+  opacity: 1;
+}
+.used-by-user-image{
+  display: block;
+  width: 100%;
+}
+
+.used-by-more-examples{
+  text-align: center;
+  display: block;
+  margin-top: 10px;
+}
diff --git a/components/Homepage/index.js b/components/Homepage/index.js
@@ -43,13 +43,13 @@ const featuredStorybooks = [
 const Homepage = ({ users }) => (
   <div className="container">
     <Helmet title="Storybook - UI dev environment you'll love to use" />
-    <Header currentSection="home" />
+    {/*<Header currentSection="home" />*/}
     <Heading />
     <Demo />
-    <Platforms />
+    {/*<Platforms />*/}
     <MainLinks />
     <UsedBy users={users} />
-    <Featured featuredStorybooks={featuredStorybooks} />
+    {/*<Featured featuredStorybooks={featuredStorybooks} />*/}
     <Footer />
   </div>
 );

diff --git a/design/homepage/storybook-logo-new.svg b/design/homepage/storybook-logo-new.svg
diff --git a/pages/_users.yml b/pages/_users.yml
@@ -11,13 +11,13 @@ slack:
   description: Slack improves performance and maintainability with Storybook!
   article: https://slack.engineering/rebuilding-slacks-emoji-picker-in-react-bfbd8ce6fbfe
   site: http://slack.com
-buffer:
-  logo: ./logos/buffer.svg
-  title: Buffer Components
-  description: A collection of Buffer UI React components.
-  source: https://github.com/bufferapp/buffer-components
-  demo: https://bufferapp.github.io/buffer-components/
-  site: https://buffer.com
+# buffer:
+#   logo: ./logos/buffer.svg
+#   title: Buffer Components
+#   description: A collection of Buffer UI React components.
+#   source: https://github.com/bufferapp/buffer-components
+#   demo: https://bufferapp.github.io/buffer-components/
+#   site: https://buffer.com
 lonelyplanet:
   logo: ./logos/lonelyplanet.svg
   title: Lonely Planet
@@ -29,47 +29,47 @@ coursera:
   logo: ./logos/coursera.svg
   title: Coursera
   site: https://coursera.org
-wix:
-  logo: ./logos/wix.svg
-  title: Wix
-  description: React component library for all Wix verticals
-  demo: https://wix.github.io/wix-style-react/
-  source: https://github.com/wix/wix-style-react
-  source2: https://github.com/wix/react-native-storybook-example/
-algolia:
-  logo: ./logos/algolia.svg
-  title: Algolia Instantsearch
-  description: Lightning-fast, hyper-configurable search.
-  source: https://github.com/algolia/react-instantsearch/
-  demo: https://community.algolia.com/react-instantsearch/storybook/
+# wix:
+#   logo: ./logos/wix.svg
+#   title: Wix
+#   description: React component library for all Wix verticals
+#   demo: https://wix.github.io/wix-style-react/
+#   source: https://github.com/wix/wix-style-react
+#   source2: https://github.com/wix/react-native-storybook-example/
+# algolia:
+#   logo: ./logos/algolia.svg
+#   title: Algolia Instantsearch
+#   description: Lightning-fast, hyper-configurable search.
+#   source: https://github.com/algolia/react-instantsearch/
+#   demo: https://community.algolia.com/react-instantsearch/storybook/
 mozilla:
   logo: ./logos/mozilla.svg
   title: Mozilla Foundation
   site: https://mozilla.org
-remitly:
-  logo: ./logos/remitly.svg
-  title: Remitly
-  site: https://remitly.com
-nulogy:
-  logo: ./logos/nulogy.png
-  title: Nulogy
-  description: SaaS for Supply Chain
-  site: https://nulogy.com
-postmates:
-  logo: ./logos/postmates.png
-  title: Quran.com
-  site: https://postmates.com
-appbase:
-  logo: ./logos/appbase.svg
-  title: Appbase Maps
-  description: A storybook playground for ReactiveMaps and ReactiveSearch.
-  source: https://github.com/appbaseio/playground
-  demo: https://opensource.appbase.io/playground/
-  site: https://appbase.io
-quran:
-  logo: ./logos/quran.svg
-  title: Quran.com
-  description: Component library for Quran.com, Quranicaudio.com and Salah.com.
-  source: https://github.com/quran/common-components
-  demo: https://quran.github.io/common-components/
-  site: https://quran.com/
+# remitly:
+#   logo: ./logos/remitly.svg
+#   title: Remitly
+#   site: https://remitly.com
+# nulogy:
+#   logo: ./logos/nulogy.png
+#   title: Nulogy
+#   description: SaaS for Supply Chain
+#   site: https://nulogy.com
+# postmates:
+#   logo: ./logos/postmates.png
+#   title: Quran.com
+#   site: https://postmates.com
+# appbase:
+#   logo: ./logos/appbase.svg
+#   title: Appbase Maps
+#   description: A storybook playground for ReactiveMaps and ReactiveSearch.
+#   source: https://github.com/appbaseio/playground
+#   demo: https://opensource.appbase.io/playground/
+#   site: https://appbase.io
+# quran:
+#   logo: ./logos/quran.svg
+#   title: Quran.com
+#   description: Component library for Quran.com, Quranicaudio.com and Salah.com.
+#   source: https://github.com/quran/common-components
+#   demo: https://quran.github.io/common-components/
+#   site: https://quran.com/