Merge pull request dotnet#61 from madewithkoji/homepage-fixes

Homepage fixes

src/components/Content.js

@@ -8,6 +8,7 @@ const Container = styled.div`
   margin-top: 64px;
   margin-left: ${({ style: { hasDrawer } }) => hasDrawer ? '240px' : '0'};
   width: ${({ style: { hasDrawer } }) => hasDrawer ? 'calc(100vw - 256px)' : '100vw'};
+  overflow-x: hidden;
 `;
 
 const Content = (props) => {

src/components/HomePage/Actions.js

@@ -0,0 +1,105 @@
+/* eslint-disable max-len */
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'gatsby';
+
+const Wrapper = styled.div`
+  width: 100%;
+  max-width: 1080px;
+  margin: 32px auto 96px auto;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  h2 {
+    text-align: center;
+  }
+`;
+
+const ActionsWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-around;
+
+  @media screen and (max-width: 767px) {
+    flex-direction: column;
+    align-items: center;
+  }
+`;
+
+const Action = styled(Link)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  color: initial;
+  width: 33.3%;
+
+  @media screen and (max-width: 767px) {
+    width: 80%;
+    margin-bottom: 48px;
+  }
+`;
+
+const ExternalAction = styled.a`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  color: initial;
+  width: 33.3%;
+
+  @media screen and (max-width: 767px) {
+    width: 80%;
+    margin-bottom: 48px;
+  }
+`;
+
+const Image = styled.img`
+  height: 64px;
+  width: auto;
+  margin-bottom: 16px;
+`;
+
+const Title = styled.div`
+  font-size: 20px;
+  font-weight: bold;
+  text-decoration: underline;
+  text-align: center;
+  margin-bottom: 16px;
+`;
+
+const Description = styled.div`
+  font-size: 16px;
+  padding: 0 8px;
+  text-align: center;
+`;
+
+const Actions = () => (
+  <Wrapper>
+    <h2>{'Get started'}</h2>
+    <ActionsWrapper>
+      <Action to="/docs/blueprints/magazine-cover-blueprint">
+        <Image src="/images/FlyOffKoji.png" alt="Money" width="auto" height="100px" marginTop="20px" />
+        <Title>{'Build your first template'}</Title>
+        <Description>{'Follow this block by block blueprint to get started quickly and publish your first web application on Koji.'}</Description>
+      </Action>
+      <Action to="/reference/packages/packages-overview">
+        <Image src="/images/ExploreKoji.png" alt="Money" width="auto" height="100px" marginTop="20px" />
+        <Title>{' Explore a Koji project'}</Title>
+        <Description>{'See the unique elements of a Koji web application and learn what powers the magic of customization.'}</Description>
+      </Action>
+      <ExternalAction href="https://discord.com/invite/eQuMJF6">
+        <Image src="/images/CommunityKoji.png" alt="Money" width="auto" height="100px" marginTop="20px" />
+        <Title>{'Connect with the community'}</Title>
+        <Description>{'Share tips and partner with other JavaScript developers, graphic designers, multimedia experts, and content creators.'}</Description>
+      </ExternalAction>
+    </ActionsWrapper>
+  </Wrapper>
+);
+
+export default Actions;

src/components/HomePage/Banner.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'gatsby';
+
+const Wrapper = styled.div`
+  width: 100%;
+  max-width: 1080px;
+  margin: 0 auto 32px auto;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+
+  > div {
+    width: 50%;
+  }
+
+  > div:first-child {
+    margin-right: 16px;
+  }
+
+  > div:last-child {
+    display: block;
+  }
+
+  @media screen and (max-width: 767px) {
+    flex-direction: column;
+
+    > div {
+      width: 100%;
+    }
+
+    > div:first-child {
+      margin-right: 0;
+    }
+
+    > div:last-child {
+      display: none;
+    }
+  }
+`;
+
+const IFrame = styled.iframe`
+  width: 100%;
+  height: 70vh;
+`;
+
+const Button = styled.button`
+  font-size: 20px;
+  padding: 16px;
+  background: none;
+  color: #111111;
+  border: 2px solid #111111;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    background: #111111;
+    color: rgb(249, 249, 249);
+  }
+`;
+
+const Banner = () => (
+  <Wrapper>
+    <div>
+      <h1>{'Develop the future of social with remixable applications'}</h1>
+      <p>
+        {`Kojis are mini web applications that can be shared on all social platforms,
+                    embedded in any website, and sent via messengers and email. Everyday users can
+                    create Kojis in minutes by “remixing” templates and customizing them.`}
+        <br />
+        <br />
+        {`As a developer, you can build the templates that power Kojis, and your
+                    templates will be remixed into custom web applications and shared by millions
+                    of people across the world.`}
+      </p>
+      <br />
+      <div>
+        <Link to={'/docs/blueprints/magazine-cover-blueprint'}>
+          <Button>{'Build your first template'}</Button>
+        </Link>
+      </div>
+      <br />
+    </div>
+    <div>
+      <IFrame src={'https://withkoji.com/~JamesHole/kojidev'} />
+    </div>
+  </Wrapper>
+);
+
+export default Banner;

src/components/HomePage/CTA.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'gatsby';
+
+const Wrapper = styled.div`
+  width: 100%;
+  max-width: 1080px;
+  margin: 0 auto 32px auto;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+
+  h2 {
+    text-align: center;
+  }
+`;
+
+const Button = styled.button`
+  font-size: 20px;
+  padding: 16px;
+  background: none;
+  color: #111111;
+  border: 2px solid #111111;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    background: #111111;
+    color:rgb(249, 249, 249);
+  }
+`;
+
+const CTA = () => (
+  <Wrapper>
+    <h2>{'Ready to build the future?'}</h2>
+    <Link to={'/docs/getting-started/introduction'}>
+      <Button>{'Get started'}</Button>
+    </Link>
+  </Wrapper>
+);
+
+export default CTA;

src/components/HomePage/CallOut.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  background: #111111;
+  color:rgb(249, 249, 249);
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const ContentWrapper = styled.div`
+  width: 100%;
+  max-width: 1080px;
+  padding: 16px;
+  margin: 0 auto 32px auto;
+`;
+
+const CallOut = () => (
+  <Wrapper>
+    <ContentWrapper>
+      <h2>{'Kojis are JavaScript applications'}</h2>
+      <p>
+        {`Kojis are full-stack, modern JavaScript applications 
+        that take advantage of the latest web standards and emerging technologies. 
+        They are designed to be responsive, so that they can run on any browser and every device. 
+        They can embed multimedia, leverage web AR/VR support, facilitate e-commerce transactions, and more.`}
+      </p>
+      <br />
+      <h2>{'Templates empower everyone to make amazing Kojis'}</h2>
+      <p>
+        {`Developers build “remixable” templates for any type of web application, 
+        such as interactive selfies, memes, games, and utilities. 
+        Non-developers can edit template elements without coding, 
+        such as images, text, and sounds, and create a custom version that they can share anywhere on the web. 
+        With the ability to create and share remixable, interactive content, 
+        the opportunities for creative new applications and experiences are endless.`}
+      </p>
+    </ContentWrapper>
+  </Wrapper>
+);
+
+export default CallOut;