DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Footer implementation

Browse Source 
Summary: Footer Implementation

Reviewed By: emilsjolander

Differential Revision: D6998645

fbshipit-source-id: db637f2d9fe1cdbcaa8366e0cc03f2bf67e2543a
This commit is contained in:
Pritesh Nandgaonkar
2018-02-15 06:12:23 -08:00
committed by Facebook Github Bot
parent d4b20f5793
commit aac40cf89b
7 changed files with 176 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
website/src/pages/index.js
View File

@@ -21,31 +21,34 @@ import ReactNativeLogo from './logos/reactnative.png';
import LithoLogo from './logos/litho.png';
import ComponentKitLogo from './logos/componentkit.png';
import Link from 'gatsby-link';
import Footer from '../components/Footer';
const HeroSection = () => (
<Padded>
<Row className="hero">
<Col md={12} sm={24} xs={24}>
<h3>INTRODUCING</h3>
<h1>Flexible Layouts <br/> with Yoga</h1>
<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.
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>
<Link to="/docs">
<Button type="primary" className="button">
LEARN MORE
LEARN MORE
</Button>
</Link>
</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 className="blueprint blueprint-avatar" />
<div className="blueprint blueprint-title" />
<div className="blueprint blueprint-subtitle" />
<div className="blueprint blueprint-content" />
</div>
</Col>
</Row>
@@ -66,26 +69,29 @@ const AboutSectionOne = () => (
<Col xl={16} lg={16} md={24} sm={24} xs={24}>
<h1>Foundation of Many Open Source&nbsp;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.
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>
<div className="logo-group">
<a href="https://fblitho.com" target="_blank" className="logo">
<img src={LithoLogo}/>
<img src={LithoLogo} />
<h3>Litho</h3>
</a>
<a href="https://componentkit.org" target="_blank" className="logo">
<img src={ComponentKitLogo}/>
<img src={ComponentKitLogo} />
<h3>ComponentKit</h3>
</a>
<a href="http://facebook.github.io/react-native/" target="_blank" className="logo">
<img src={ReactNativeLogo}/>
<a
href="http://facebook.github.io/react-native/"
target="_blank"
className="logo">
<img src={ReactNativeLogo} />
<h3>React Native</h3>
</a>
</div>
@@ -97,53 +103,44 @@ const AboutSectionTwo = () => (
<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.
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.
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.
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>
);
const Footer = () => (
<footer className="Footer">
<Link to="/docs">Docs</Link>
<Link to="/playground">Playground</Link>
<a href="https://github.com/facebook/yoga">GitHub</a>
</footer>
);
export default () => (
<Page className="landing-page">
<HeroSection/>
<PlaygroundSection/>
<AboutSectionOne/>
<hr/>
<AboutSectionTwo/>
<Footer/>
<HeroSection />
<PlaygroundSection />
<AboutSectionOne />
<hr />
<AboutSectionTwo />
<Footer />
</Page>
);