added web vendorsHEADmaster

4 files changed, 256 insertions, 0 deletions

diff --git a/@linaria/website/src/components/App.js b/@linaria/website/src/components/App.js
new file mode 100644
index 0000000..4a1d817
--- /dev/null
+++ b/@linaria/website/src/components/App.js
@@ -0,0 +1,22 @@
+/* @flow */
+
+import { styled } from '@linaria/react';
+import React from 'react';
+import Header from './Header';
+import Hero from './Hero';
+
+export default function Index() {
+  return (
+    <Page>
+      <Header />
+      <Hero />
+    </Page>
+  );
+}
+
+const Page = styled.div`
+  background: linear-gradient(to bottom right, #b24592, #f15f79);
+  color: #fff;
+  min-height: 100vh;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.08);
+`;
diff --git a/@linaria/website/src/components/Container.js b/@linaria/website/src/components/Container.js
new file mode 100644
index 0000000..74a13ed
--- /dev/null
+++ b/@linaria/website/src/components/Container.js
@@ -0,0 +1,11 @@
+/* @flow */
+
+import { styled } from '@linaria/react';
+
+const Container = styled.div`
+  max-width: 1140px;
+  padding: 16px 24px;
+  margin: 0 auto;
+`;
+
+export default Container;
diff --git a/@linaria/website/src/components/Header.js b/@linaria/website/src/components/Header.js
new file mode 100644
index 0000000..3f6fd35
--- /dev/null
+++ b/@linaria/website/src/components/Header.js
@@ -0,0 +1,101 @@
+/* @flow */
+
+import { styled } from '@linaria/react';
+import React from 'react';
+import constants from '../styles/constants';
+import { media } from '../styles/utils';
+import Container from './Container';
+
+export default function Header() {
+  return (
+    <NavBar>
+      <LogoImage
+        src={require('../../assets/linaria-logo.svg')}
+        alt="Linaria Logo"
+      />
+      <Links>
+        <li>
+          <LinkItem href="https://github.com/callstack/linaria#features">
+            Features
+          </LinkItem>
+        </li>
+        <li>
+          <LinkItem
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://github.com/callstack/linaria/tree/master/docs"
+          >
+            Docs
+          </LinkItem>
+        </li>
+        <li>
+          <LinkItem
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://github.com/callstack/linaria"
+            title="GitHub"
+          >
+            GitHub
+          </LinkItem>
+        </li>
+      </Links>
+    </NavBar>
+  );
+}
+
+const NavBar = styled(Container)`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+
+  ${media.medium} {
+    flex-direction: row;
+  }
+`;
+
+const LogoImage = styled.img`
+  height: 64px;
+  margin: 16px auto;
+  display: block;
+
+  ${media.medium} {
+    height: 48px;
+    margin: 0;
+    display: inline-block;
+    vertical-align: middle;
+  }
+`;
+
+const Links = styled.ul`
+  display: flex;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  align-items: center;
+`;
+
+const LinkItem = styled.a`
+  display: block;
+  font-size: 1.2em;
+  font-weight: 700;
+  padding: 24px 16px;
+  text-decoration: none;
+  color: inherit;
+  transition: color 0.2s;
+  transition: 200ms;
+
+  &:hover {
+    color: inherit;
+  }
+
+  @supports (-webkit-background-clip: text) {
+    background-image: ${constants.gradient};
+    /* stylelint-disable-next-line property-no-vendor-prefix */
+    -webkit-background-clip: text;
+
+    &:hover {
+      color: transparent;
+    }
+  }
+`;
diff --git a/@linaria/website/src/components/Hero.js b/@linaria/website/src/components/Hero.js
new file mode 100644
index 0000000..a4fd568
--- /dev/null
+++ b/@linaria/website/src/components/Hero.js
@@ -0,0 +1,122 @@
+/* @flow */
+
+import { styled } from '@linaria/react';
+import React from 'react';
+import { media } from '../styles/utils';
+import Container from './Container';
+
+export default function Hero() {
+  return (
+    <HeroContainer>
+      <Container>
+        <Row>
+          <LeftColumn>
+            <Heading>Zero-Runtime CSS in JS</Heading>
+            <Description>
+              Write CSS in JS and get real CSS files during build. Use dynamic
+              prop based styles with the React bindings and have them transpiled
+              to CSS variables automatically. Great productivity with source
+              maps and linting support.
+            </Description>
+            <Button
+              as="a"
+              href="https://github.com/callstack/linaria#installation"
+            >
+              Get Started
+            </Button>
+          </LeftColumn>
+          <RightColumn>
+            <CodeSample
+              alt="Linaria code sample"
+              src={require('../../assets/code-sample.png')}
+            />
+          </RightColumn>
+        </Row>
+      </Container>
+    </HeroContainer>
+  );
+}
+
+const HeroContainer = styled.main`
+  position: relative;
+
+  ${media.large} {
+    padding: 64px 0;
+    background-image: url(${require('../../assets/linaria-logomark.svg')});
+    background-repeat: no-repeat;
+    background-position: bottom right;
+  }
+`;
+
+const Row = styled.div`
+  ${media.large} {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+`;
+
+const LeftColumn = styled.div`
+  text-align: center;
+  flex: 3;
+
+  ${media.large} {
+    text-align: left;
+  }
+`;
+
+const RightColumn = styled.div`
+  text-align: center;
+  flex: 2;
+  z-index: 1;
+`;
+
+const Heading = styled.h1`
+  font-weight: 700;
+  font-size: 56px;
+`;
+
+const Description = styled.p`
+  margin-bottom: 60px;
+`;
+
+const Button = styled.button`
+  display: inline-block;
+  appearance: none;
+  background: none;
+  border: 0;
+  padding: 16px 24px;
+  color: inherit;
+  font-size: inherit;
+  font-weight: 700;
+  font-family: inherit;
+  text-transform: uppercase;
+  text-decoration: none;
+  box-shadow: inset 0 0 0 2px currentColor, 1px 1px 1px rgba(0, 0, 0, 0.08);
+  border-radius: 30px;
+  cursor: pointer;
+  transition: color 200ms, background 200ms;
+
+  &:hover {
+    color: #d2356d;
+    box-shadow: inset 0 0 0 2px transparent, 1px 1px 1px rgba(0, 0, 0, 0.08);
+    background: linear-gradient(
+      to right,
+      hsl(180, 100%, 70%),
+      hsl(64, 57%, 82%),
+      hsl(0, 100%, 84%)
+    );
+  }
+`;
+
+const CodeSample = styled.img`
+  width: 100%;
+  height: auto;
+  margin: 64px 24px;
+  max-width: calc(100% - 48px);
+  box-shadow: 3px 3px 32px rgba(0, 0, 0, 0.32);
+
+  ${media.large} {
+    margin: 24px;
+  }
+`;