Landing page first draft
Reviewed By: danielbuechele Differential Revision: D6964899 fbshipit-source-id: ea9fed66ba0376a5cd2efda4d631cc14e591e666
This commit is contained in:
Emil Sjölander
committed by
Facebook Github Bot
Facebook Github Bot
parent
de8cab8e60
commit
e7c56ccd1e
@@ -1,7 +1,7 @@
|
||||
.Padded {
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
padding: 0 20px;
|
||||
max-width: 1200px;
|
||||
padding: 0 50px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -1,12 +1,134 @@
|
||||
.IndexPageSection {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
.landing-page .hero {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.IndexPageSection h1 {
|
||||
line-height: 130%;
|
||||
.landing-page .hero h3 {
|
||||
color: #BEC3C9;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 200%;
|
||||
}
|
||||
|
||||
.IndexPageSection .button-spacing {
|
||||
margin-right: 10px;
|
||||
.landing-page .hero h1 {
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -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';
|
||||
|
||||
export default () => (
|
||||
<Page>
|
||||
<Padded className="IndexPageSection">
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<h1>Flexible Layouts with Yoga</h1>
|
||||
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-spacing">
|
||||
Get started
|
||||
</Button>
|
||||
<Button type="primary" ghost>
|
||||
Try it out
|
||||
|
||||
<Button type="primary" className="button">
|
||||
GET STARTED
|
||||
</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 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>
|
||||
<Padded className="IndexPageSection">
|
||||
);
|
||||
|
||||
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 span={12}>
|
||||
<h1>Proven In Productions</h1>
|
||||
<Col xl={16} lg={16} md={24} sm={24} xs={24}>
|
||||
<h1>Foundation of Many Open Source UI Frameworks</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.
|
||||
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>
|
||||
<Col span={12} />
|
||||
</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 className="landing-page">
|
||||
<HeroSection/>
|
||||
<PlaygroundSection/>
|
||||
<AboutSectionOne/>
|
||||
<hr/>
|
||||
<AboutSectionTwo/>
|
||||
</Page>
|
||||
);
|
||||
|
||||
BIN
website/src/pages/logos/componentkit.png
Normal file
BIN
website/src/pages/logos/componentkit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
website/src/pages/logos/litho.png
Normal file
BIN
website/src/pages/logos/litho.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
website/src/pages/logos/reactnative.png
Normal file
BIN
website/src/pages/logos/reactnative.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Reference in New Issue
Block a user