Landing page first draft

Reviewed By: danielbuechele

Differential Revision: D6964899

fbshipit-source-id: ea9fed66ba0376a5cd2efda4d631cc14e591e666

website/src/components/Padded.css

@@ -1,7 +1,7 @@
 .Padded {
   width: 100%;
-  max-width: 1000px;
+  max-width: 1200px;
-  padding: 0 20px;
+  padding: 0 50px;
   margin-left: auto;
   margin-right: auto;
 }

website/src/components/Page.css

@@ -1,5 +1,4 @@
-@import url('https://fonts.googleapis.com/css?family=Open+Sans|Source+Code+Pro');
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Source+Code+Pro');
-
 
 html,
 body {

website/src/pages/index.css

@@ -1,12 +1,134 @@
-.IndexPageSection {
+.landing-page .hero {
-  padding-top: 80px;
+  padding-top: 100px;
-  padding-bottom: 80px;
+  padding-bottom: 100px;
+  display: flex;
+  align-items: center;
 }
 
-.IndexPageSection h1 {
+.landing-page .hero h3 {
-  line-height: 130%;
+  color: #BEC3C9;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 200%;
 }
 
-.IndexPageSection .button-spacing {
+.landing-page .hero h1 {
-  margin-right: 10px;
+  color: #1C1E21;
+  font-size: 48px;
+  font-weight: 300;
+  line-height: 110%;
+}
+
+.landing-page .hero p {
+  color: #1C1E21;
+  line-height: 200%;
+  font-size: 18px;
+  font-weight: 300;
+}
+
+.landing-page .hero .button {
+  color: white;
+  font-size: 14px;
+  font-weight: 700;
+  padding: 12px 30px;
+  height: auto;
+}
+
+.landing-page .hero .blueprint {
+	border-style: dashed;
+    border-color: #1C1E21;
+    border-width: 1px;
+}
+
+.landing-page .hero .blueprint-container {
+	position: relative;
+	margin: auto;
+	height: 300px;
+	width: 300px;
+}
+
+.landing-page .hero .blueprint-avatar {
+	position: absolute;
+	left: 15px;
+	top: 15px;
+	height: 50px;
+	width: 50px;
+}
+
+.landing-page .hero .blueprint-title {
+	position: absolute;
+	left: 80px;
+	top: 20px;
+	height: 15px;
+	width: 150px;
+}
+
+.landing-page .hero .blueprint-subtitle {
+	position: absolute;
+	left: 80px;
+	top: 40px;
+	height: 15px;
+	width: 80px;
+}
+
+.landing-page .hero .blueprint-content {
+	position: absolute;
+	left: 15px;
+	right: 15px;
+	bottom: 15px;
+	top: 80px;
+}
+
+.landing-page hr {
+	width: 100%;
+	height: 1px;
+	background-color: #8FD0C6;
+  border-width: 0px;
+}
+
+.landing-page .about-section {
+  padding-top: 100px;
+  padding-bottom: 100px;
+}
+
+.landing-page .about-section h1 {
+  color: #1C1E21;
+  font-size: 32px;
+  font-weight: 400;
+  line-height: 120%;
+}
+
+.landing-page .about-section h3 {
+  color: #1C1E21;
+  font-size: 16px;
+  font-weight: 600;
+  margin-top: 50px;
+}
+
+.landing-page .about-section p {
+  color: #1C1E21;
+  line-height: 200%;
+  font-size: 16px;
+  font-weight: 300;
+}
+
+.landing-page .logo-group {
+  margin-top: 50px;
+}
+
+.landing-page .logo-group .logo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.landing-page .logo-group img {
+  height: 130px;
+}
+
+.landing-page .logo-group .logo h3 {
+  color: #BEC3C9;
+  font-size: 14px;
+  font-weight: 600;
+  margin-top: 20px;
 }

website/src/pages/index.js

@@ -17,55 +17,121 @@ import Padded from '../components/Padded';
 import Playground from '../components/Playground';
 import {Row, Col} from 'antd';
 import './index.css';
+import ReactNativeLogo from './logos/reactnative.png';
+import LithoLogo from './logos/litho.png';
+import ComponentKitLogo from './logos/componentkit.png';
+
+const HeroSection = () => (
+  <Padded>
+    <Row className="hero">
+      <Col md={12} sm={24} xs={24}>
+        <h3>INTRODUCING</h3>
+        <h1>Flexible Layouts <br/> with Yoga</h1>
+        <p>
+        Build flexible layouts on any platform with a highly optimized
+        layout engine designed with speed, size, and ease of use in mind.
+        Yoga is open source and ready for you to use today.
+        </p>
+
+        <Button type="primary" className="button">
+        GET STARTED
+        </Button>
+      </Col>
+      <Col md={12} sm={0} xs={0}>
+        <div className="blueprint blueprint-container">
+          <div className="blueprint blueprint-avatar"/>
+          <div className="blueprint blueprint-title"/>
+          <div className="blueprint blueprint-subtitle"/>
+          <div className="blueprint blueprint-content"/>
+        </div>
+      </Col>
+    </Row>
+  </Padded>
+);
+
+const PlaygroundSection = () => (
+  <Row className="playground">
+    <Col xl={24} lg={0} md={0} sm={0} xs={0}>
+      <Playground selectedNodePath={[]} showGuides={false} height={600} />
+    </Col>
+  </Row>
+);
+
+const AboutSectionOne = () => (
+  <Padded className="about-section">
+    <Row>
+      <Col xl={16} lg={16} md={24} sm={24} xs={24}>
+        <h1>Foundation of Many Open Source UI Frameworks</h1>
+        <p>
+        There are a large number of open source UI Frameworks which rely on
+        Yoga to power their layout. Yoga enables these frameworks to perform
+        layout in a simple and intuitive way across all platforms. This allows
+        engineers across platforms to collaborate more easily. Yoga allows these
+        frameworks to calculate layouts off the main thread to help ensure
+        optimal UI performance.
+        </p>
+      </Col>
+    </Row>
+    <Row type="flex" justify="space-around" className="logo-group">
+      <Col lg={8} md={8} sm={12} xs={12} className="logo">
+        <img src={LithoLogo}/>
+        <h3>Litho</h3>
+      </Col>
+      <Col lg={8} md={8} sm={12} xs={12} className="logo">
+        <img src={ComponentKitLogo}/>
+        <h3>ComponentKit</h3>
+      </Col>
+      <Col lg={8} md={8} sm={24} xs={24} className="logo">
+        <img src={ReactNativeLogo}/>
+        <h3>React Native</h3>
+      </Col>
+    </Row>
+  </Padded>
+);
+
+const AboutSectionTwo = () => (
+  <Padded className="about-section">
+    <Row>
+      <Col xl={16} lg={16} md={24} sm={24} xs={24}>
+        <h1>Why You May Consider Yoga</h1>
+    
+        <h3>PERFORMANCE</h3>
+        <p>
+        Yoga was built to be fast and performance will always be one of Yoga's
+        primary goals. We believe that for a layout engine to be able to power 
+        any range of applications it needs to be fast and never stand in the way
+        of a fluid user experience.
+        </p>
+
+        <h3>CROSS PLATFORM</h3>
+        <p>
+        Yoga is built with cross platform in mind. To ensure Yoga can be used
+        anywhere we have written is in portable C/C++ and tried to keep both
+        the dependencies and final binary size impact as low as possible.
+        This means you can use Yoga on iOS and Android, sharing knowledge and
+        potentially code between platforms.
+        </p>
+
+        <h3>EASY TO LEARN</h3>
+        <p>
+        With Yoga we have focused on making it as easy as possible to pick up and
+        learn. With interactive documentation pages and a fully fledged layout editor 
+        we believe that any engineering team can get up to speed in record time. If 
+        you are using Yoga with any of the major UI frameworks we even provide generated
+        code from the layout editor.
+        </p>
+
+      </Col>
+    </Row>
+  </Padded>
+);
 
 export default () => (
-  <Page>
+  <Page className="landing-page">
-    <Padded className="IndexPageSection">
+    <HeroSection/>
-      <Row>
+    <PlaygroundSection/>
-        <Col span={12}>
+    <AboutSectionOne/>
-          <h1>Flexible Layouts with Yoga</h1>
+    <hr/>
-          <p>
+    <AboutSectionTwo/>
-            Build flexible layouts on any platform with a highly optimized
-            layout engine designed with speed, size, and ease of use in mind.
-          </p>
-          <Button type="primary" className="button-spacing">
-            Get started
-          </Button>
-          <Button type="primary" ghost>
-            Try it out
-          </Button>
-        </Col>
-        <Col span={12} />
-      </Row>
-    </Padded>
-    <Playground selectedNodePath={[]} showGuides={false} height={501} />
-    <Padded className="IndexPageSection">
-      <Row>
-        <Col span={12} />
-        <Col span={12}>
-          <h1>Integrated Into The Most Optimized Mobile Frameworks</h1>
-          <p>
-            Facebook makes use of Yoga to power most of their UI Frameworks.
-            This ensured layout can be performed quickly and fluidly off of the
-            main thread to ensure optimal performance. As an added benefit
-            engineers familiar with one framework can get started quickly with
-            another thanks to the shared layout engine.
-          </p>
-        </Col>
-      </Row>
-    </Padded>
-    <Padded className="IndexPageSection">
-      <Row>
-        <Col span={12}>
-          <h1>Proven In Productions</h1>
-          <p>
-            Yoga powers some of the largest apps in the world, including many of
-            Facebook's products. This should help convince you that Yoga is
-            ready to handle the scale of almost any app out there.
-          </p>
-        </Col>
-        <Col span={12} />
-      </Row>
-    </Padded>
   </Page>
 );