[+] Release

CHANGELOG.md

@@ -4,12 +4,13 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-#### [1.13.0](https://github.com/denvash/summer-time-theme-vscode/compare/1.12.0...1.13.0)
+#### [1.13.0](https://github.com/denvash/summer-time-theme-vscode/compare/1.13.0...1.13.0)
 
-> 29 October 2019
+> 14 March 2020
 
-- [+] Graphql [`817a597`](https://github.com/denvash/summer-time-theme-vscode/commit/817a597c69a236dbc76a01d7c4f9db942de27652)
-- [~] Changelog [`108eed9`](https://github.com/denvash/summer-time-theme-vscode/commit/108eed9f441fb38d7a048967c6a36e4f8db8ad67)
+- [+] Better tokens [`1610b71`](https://github.com/denvash/summer-time-theme-vscode/commit/1610b71cb4df523675fd731bc7c8c185e45c6bd1)
+- [+] Fix after update [`793e243`](https://github.com/denvash/summer-time-theme-vscode/commit/793e243253d17faf267e4e9384c9d93fd0c4268b)
+- Update README.md [`6a85027`](https://github.com/denvash/summer-time-theme-vscode/commit/6a8502787fe2eb8129f57c0b1c80afb17eab03c5)
 
 #### [1.12.0](https://github.com/denvash/summer-time-theme-vscode/compare/1.11.0...1.12.0)
 

demo/Hero.react.js

@@ -0,0 +1,61 @@
+import { IntroParallax, LogoParallax, SocialBar } from "@components";
+import { mixins, styled } from "@styles";
+import React, { useCallback } from "react";
+import { config, useSpring } from "react-spring";
+import tw from "twin.macro";
+
+const Logo = styled(LogoParallax)`
+  ${tw`z-0 absolute right-0
+     w-1/2 sm:w-2/5 md:w-1/3 lg:w-1/3 xl:w-1/4
+     mr-3 sm:mr-10 md:mr-24 lg:mr-40 xl:mr-64`}
+`;
+
+const Intro = styled(IntroParallax)`
+  ${tw`z-10`}
+`;
+
+const Wrapper = styled.div`
+  ${mixins.flexCenter}
+  ${tw`w-full`}
+`;
+
+const Container = styled.div`
+  ${mixins.flexCenter}
+  ${mixins.fillContainer}
+  ${tw`flex-col`}
+  ${SocialBar.SC} {
+    ${tw`mt-24 sm:mt-16`}
+  }
+`;
+
+const spring = () => ({
+  xy: [-100, -100],
+  config: config.gentle
+});
+
+const calc = (x, y) => [x - window.innerWidth / 2, y - window.innerHeight / 2];
+const trans = delta => (x, y) => `translate3d(${x / delta}px,${y / delta}px,0)`;
+
+const Hero = () => {
+  const [{ xy }, set] = useSpring(spring);
+
+  const onMouseMove = useCallback(
+    ({ clientX: x, clientY: y }) => set({ xy: calc(x, y) }),
+    [set]
+  );
+  const transform = useCallback(delta => ({ transform: xy.to(trans(delta)) }), [
+    xy
+  ]);
+
+  return (
+    <Container onMouseMove={onMouseMove}>
+      <Wrapper>
+        <Intro transform={transform} />
+        <Logo transform={transform} />
+      </Wrapper>
+      <SocialBar />
+    </Container>
+  );
+};
+
+export default Hero;