From ef403108fb0f5ed2798bc7eb59fa487c323ac1fb Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Fri, 14 Dec 2018 14:59:22 +0100
Subject: Edits CTA landing section

---
 .../ts/@next/components/animatedChatIcon.tsx       | 51 ++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 packages/website/ts/@next/components/animatedChatIcon.tsx

(limited to 'packages/website/ts/@next/components/animatedChatIcon.tsx')

diff --git a/packages/website/ts/@next/components/animatedChatIcon.tsx b/packages/website/ts/@next/components/animatedChatIcon.tsx
new file mode 100644
index 000000000..ea97daf48
--- /dev/null
+++ b/packages/website/ts/@next/components/animatedChatIcon.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+export const AnimatedChatIcon = () => (
+    <svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="75" cy="75" r="73" stroke="#00AE99" stroke-width="3"/>
+        <path d="M76 37H137.5" stroke="#00AE99" stroke-width="3"/>
+        <path d="M37 73.5L37 12M113 137.5L113 75" stroke="#00AE99" stroke-width="3"/>
+        <path d="M13 113H71.5" stroke="#00AE99" stroke-width="3"/>
+        <path d="M49.087 47.5264L92.574 4.03932" stroke="#00AE99" stroke-width="3"/>
+        <path d="M47.3192 100.913L3.8321 57.4259M146.314 92.4277L102.12 48.2335" stroke="#00AE99" stroke-width="3"/>
+        <path d="M58.2793 145.814L101.766 102.327" stroke="#00AE99" stroke-width="3"/>
+        <Bubble>
+            <path vector-effect="non-scaling-stroke" d="M113 75C113 85.3064 108.897 94.6546 102.235 101.5C98.4048 105.436 71 132.5 71 132.5V112.792C51.8933 110.793 37 94.6359 37 75C37 54.0132 54.0132 37 75 37C95.9868 37 113 54.0132 113 75Z" stroke="#00AE99" strokeWidth="3"/>
+            <Dot delay={0} vector-effect="non-scaling-stroke" cx="75" cy="75" r="4" stroke="#00AE99" strokeWidth="3"/>
+            <Dot delay={5.6} vector-effect="non-scaling-stroke" cx="91" cy="75" r="4" stroke="#00AE99" strokeWidth="3"/>
+            <Dot delay={-5.8} vector-effect="non-scaling-stroke" cx="59" cy="75" r="4" stroke="#00AE99" strokeWidth="3"/>
+        </Bubble>
+    </svg>
+);
+
+const scale = keyframes`
+    0% { transform: scale(1.2) }
+    20% { transform: scale(1) }
+    80% { transform: scale(1) }
+    100% { transform: scale(1.2) }
+`;
+
+const fadeInOut = keyframes`
+    0%, 50%, 54%, 100% {
+        transform: initial;
+    }
+
+    25% {
+        transform: translateY(-5px);
+    }
+`;
+
+const Bubble = styled.g`
+    animation: ${scale} 5s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    transform-origin: 50% 50%;
+
+    path,
+    circle {
+        fill: ${props => props.theme.lightBgColor};
+    }
+`;
+
+const Dot = styled.circle<{ delay: number }>`
+    animation: ${fadeInOut} 5s ${props => `${props.delay}s`} infinite;
+`;
-- 
cgit 


From f6c173a97e3ad4c7a17024726151d7e747d01014 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Fri, 14 Dec 2018 15:02:01 +0100
Subject: Edits animation

---
 packages/website/ts/@next/components/animatedChatIcon.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'packages/website/ts/@next/components/animatedChatIcon.tsx')

diff --git a/packages/website/ts/@next/components/animatedChatIcon.tsx b/packages/website/ts/@next/components/animatedChatIcon.tsx
index ea97daf48..5e46497fd 100644
--- a/packages/website/ts/@next/components/animatedChatIcon.tsx
+++ b/packages/website/ts/@next/components/animatedChatIcon.tsx
@@ -13,8 +13,8 @@ export const AnimatedChatIcon = () => (
         <Bubble>
             <path vector-effect="non-scaling-stroke" d="M113 75C113 85.3064 108.897 94.6546 102.235 101.5C98.4048 105.436 71 132.5 71 132.5V112.792C51.8933 110.793 37 94.6359 37 75C37 54.0132 54.0132 37 75 37C95.9868 37 113 54.0132 113 75Z" stroke="#00AE99" strokeWidth="3"/>
             <Dot delay={0} vector-effect="non-scaling-stroke" cx="75" cy="75" r="4" stroke="#00AE99" strokeWidth="3"/>
-            <Dot delay={5.6} vector-effect="non-scaling-stroke" cx="91" cy="75" r="4" stroke="#00AE99" strokeWidth="3"/>
-            <Dot delay={-5.8} vector-effect="non-scaling-stroke" cx="59" cy="75" r="4" stroke="#00AE99" strokeWidth="3"/>
+            <Dot delay={5.4} vector-effect="non-scaling-stroke" cx="91" cy="75" r="4" stroke="#00AE99" strokeWidth="3"/>
+            <Dot delay={-5.6} vector-effect="non-scaling-stroke" cx="59" cy="75" r="4" stroke="#00AE99" strokeWidth="3"/>
         </Bubble>
     </svg>
 );
@@ -27,11 +27,11 @@ const scale = keyframes`
 `;
 
 const fadeInOut = keyframes`
-    0%, 50%, 54%, 100% {
+    0%, 50%, 70%, 100% {
         transform: initial;
     }
 
-    25% {
+    60% {
         transform: translateY(-5px);
     }
 `;
-- 
cgit 


From 51def6ee6b66ecb2c1dc2a8c0d74a79a4264dfc0 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Fri, 14 Dec 2018 15:27:47 +0100
Subject: Adds mask to get in touch anim

---
 .../ts/@next/components/animatedChatIcon.tsx       | 52 ++++++++++++++--------
 1 file changed, 34 insertions(+), 18 deletions(-)

(limited to 'packages/website/ts/@next/components/animatedChatIcon.tsx')

diff --git a/packages/website/ts/@next/components/animatedChatIcon.tsx b/packages/website/ts/@next/components/animatedChatIcon.tsx
index 5e46497fd..bddb1d433 100644
--- a/packages/website/ts/@next/components/animatedChatIcon.tsx
+++ b/packages/website/ts/@next/components/animatedChatIcon.tsx
@@ -3,41 +3,52 @@ import styled, { keyframes } from 'styled-components';
 
 export const AnimatedChatIcon = () => (
     <svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="75" cy="75" r="73" stroke="#00AE99" stroke-width="3"/>
-        <path d="M76 37H137.5" stroke="#00AE99" stroke-width="3"/>
-        <path d="M37 73.5L37 12M113 137.5L113 75" stroke="#00AE99" stroke-width="3"/>
-        <path d="M13 113H71.5" stroke="#00AE99" stroke-width="3"/>
-        <path d="M49.087 47.5264L92.574 4.03932" stroke="#00AE99" stroke-width="3"/>
-        <path d="M47.3192 100.913L3.8321 57.4259M146.314 92.4277L102.12 48.2335" stroke="#00AE99" stroke-width="3"/>
-        <path d="M58.2793 145.814L101.766 102.327" stroke="#00AE99" stroke-width="3"/>
-        <Bubble>
-            <path vector-effect="non-scaling-stroke" d="M113 75C113 85.3064 108.897 94.6546 102.235 101.5C98.4048 105.436 71 132.5 71 132.5V112.792C51.8933 110.793 37 94.6359 37 75C37 54.0132 54.0132 37 75 37C95.9868 37 113 54.0132 113 75Z" stroke="#00AE99" strokeWidth="3"/>
+        <mask id="mask30" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="150" height="150">
+            <circle cx="75" cy="75" r="73" fill="#00AE99" stroke="#00AE99" stroke-width="3"/>
+        </mask>
+
+        <g mask="url(#mask30)">
+            <circle cx="75" cy="75" r="73" stroke="#00AE99" stroke-width="3"/>
+
+            <Rays>
+                <path vector-effect="non-scaling-stroke" d="M76 37H137.5" stroke="#00AE99" stroke-width="3"/>
+                <path vector-effect="non-scaling-stroke" d="M37 73.5L37 12M113 137.5L113 75" stroke="#00AE99" stroke-width="3"/>
+                <path vector-effect="non-scaling-stroke" d="M13 113H71.5" stroke="#00AE99" stroke-width="3"/>
+                <path vector-effect="non-scaling-stroke" d="M49.087 47.5264L92.574 4.03932" stroke="#00AE99" stroke-width="3"/>
+                <path vector-effect="non-scaling-stroke" d="M47.3192 100.913L3.8321 57.4259M146.314 92.4277L102.12 48.2335" stroke="#00AE99" stroke-width="3"/>
+                <path vector-effect="non-scaling-stroke" d="M58.2793 145.814L101.766 102.327" stroke="#00AE99" stroke-width="3"/>
+            </Rays>
+
+            <Bubble>
+                <path vector-effect="non-scaling-stroke" d="M113 75C113 85.3064 108.897 94.6546 102.235 101.5C98.4048 105.436 71 132.5 71 132.5V112.792C51.8933 110.793 37 94.6359 37 75C37 54.0132 54.0132 37 75 37C95.9868 37 113 54.0132 113 75Z" stroke="#00AE99" strokeWidth="3"/>
+            </Bubble>
+
             <Dot delay={0} vector-effect="non-scaling-stroke" cx="75" cy="75" r="4" stroke="#00AE99" strokeWidth="3"/>
-            <Dot delay={5.4} vector-effect="non-scaling-stroke" cx="91" cy="75" r="4" stroke="#00AE99" strokeWidth="3"/>
-            <Dot delay={-5.6} vector-effect="non-scaling-stroke" cx="59" cy="75" r="4" stroke="#00AE99" strokeWidth="3"/>
-        </Bubble>
+            <Dot delay={4.4} vector-effect="non-scaling-stroke" cx="91" cy="75" r="4" stroke="#00AE99" strokeWidth="3"/>
+            <Dot delay={-4.6} vector-effect="non-scaling-stroke" cx="59" cy="75" r="4" stroke="#00AE99" strokeWidth="3"/>
+        </g>
     </svg>
 );
 
 const scale = keyframes`
     0% { transform: scale(1.2) }
-    20% { transform: scale(1) }
-    80% { transform: scale(1) }
+    10% { transform: scale(1) }
+    90% { transform: scale(1) }
     100% { transform: scale(1.2) }
 `;
 
 const fadeInOut = keyframes`
-    0%, 50%, 70%, 100% {
+    0%, 30%, 50%, 100% {
         transform: initial;
     }
 
-    60% {
+    40% {
         transform: translateY(-5px);
     }
 `;
 
 const Bubble = styled.g`
-    animation: ${scale} 5s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    animation: ${scale} 4s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
     transform-origin: 50% 50%;
 
     path,
@@ -46,6 +57,11 @@ const Bubble = styled.g`
     }
 `;
 
+const Rays = styled.g`
+    animation: ${scale} 4s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    transform-origin: 50% 50%;
+`;
+
 const Dot = styled.circle<{ delay: number }>`
-    animation: ${fadeInOut} 5s ${props => `${props.delay}s`} infinite;
+    animation: ${fadeInOut} 4s ${props => `${props.delay}s`} infinite;
 `;
-- 
cgit 


From 41ec26c927c53499306e8de40c688a2326cd799e Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Fri, 14 Dec 2018 15:36:42 +0100
Subject: cta boxes hover state

---
 packages/website/ts/@next/components/animatedChatIcon.tsx | 5 -----
 1 file changed, 5 deletions(-)

(limited to 'packages/website/ts/@next/components/animatedChatIcon.tsx')

diff --git a/packages/website/ts/@next/components/animatedChatIcon.tsx b/packages/website/ts/@next/components/animatedChatIcon.tsx
index bddb1d433..4b7466877 100644
--- a/packages/website/ts/@next/components/animatedChatIcon.tsx
+++ b/packages/website/ts/@next/components/animatedChatIcon.tsx
@@ -50,11 +50,6 @@ const fadeInOut = keyframes`
 const Bubble = styled.g`
     animation: ${scale} 4s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
     transform-origin: 50% 50%;
-
-    path,
-    circle {
-        fill: ${props => props.theme.lightBgColor};
-    }
 `;
 
 const Rays = styled.g`
-- 
cgit 


From 0dc9fc4ef7cce337a422a4e128ba451d0e088175 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Fri, 14 Dec 2018 15:38:56 +0100
Subject: More animation tweaks

---
 packages/website/ts/@next/components/animatedChatIcon.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/@next/components/animatedChatIcon.tsx')

diff --git a/packages/website/ts/@next/components/animatedChatIcon.tsx b/packages/website/ts/@next/components/animatedChatIcon.tsx
index 4b7466877..feaa0631f 100644
--- a/packages/website/ts/@next/components/animatedChatIcon.tsx
+++ b/packages/website/ts/@next/components/animatedChatIcon.tsx
@@ -32,8 +32,8 @@ export const AnimatedChatIcon = () => (
 
 const scale = keyframes`
     0% { transform: scale(1.2) }
-    10% { transform: scale(1) }
-    90% { transform: scale(1) }
+    15% { transform: scale(1) }
+    85% { transform: scale(1) }
     100% { transform: scale(1.2) }
 `;
 
-- 
cgit 


From 9bd71aeeffbadebb41756a605ef6a0aacbfd47c4 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 18 Dec 2018 13:24:53 -0800
Subject: run prettier on website

---
 .../ts/@next/components/animatedChatIcon.tsx       | 70 ++++++++++++++++++----
 1 file changed, 57 insertions(+), 13 deletions(-)

(limited to 'packages/website/ts/@next/components/animatedChatIcon.tsx')

diff --git a/packages/website/ts/@next/components/animatedChatIcon.tsx b/packages/website/ts/@next/components/animatedChatIcon.tsx
index feaa0631f..9a86e244c 100644
--- a/packages/website/ts/@next/components/animatedChatIcon.tsx
+++ b/packages/website/ts/@next/components/animatedChatIcon.tsx
@@ -4,28 +4,69 @@ import styled, { keyframes } from 'styled-components';
 export const AnimatedChatIcon = () => (
     <svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
         <mask id="mask30" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="150" height="150">
-            <circle cx="75" cy="75" r="73" fill="#00AE99" stroke="#00AE99" stroke-width="3"/>
+            <circle cx="75" cy="75" r="73" fill="#00AE99" stroke="#00AE99" stroke-width="3" />
         </mask>
 
         <g mask="url(#mask30)">
-            <circle cx="75" cy="75" r="73" stroke="#00AE99" stroke-width="3"/>
+            <circle cx="75" cy="75" r="73" stroke="#00AE99" stroke-width="3" />
 
             <Rays>
-                <path vector-effect="non-scaling-stroke" d="M76 37H137.5" stroke="#00AE99" stroke-width="3"/>
-                <path vector-effect="non-scaling-stroke" d="M37 73.5L37 12M113 137.5L113 75" stroke="#00AE99" stroke-width="3"/>
-                <path vector-effect="non-scaling-stroke" d="M13 113H71.5" stroke="#00AE99" stroke-width="3"/>
-                <path vector-effect="non-scaling-stroke" d="M49.087 47.5264L92.574 4.03932" stroke="#00AE99" stroke-width="3"/>
-                <path vector-effect="non-scaling-stroke" d="M47.3192 100.913L3.8321 57.4259M146.314 92.4277L102.12 48.2335" stroke="#00AE99" stroke-width="3"/>
-                <path vector-effect="non-scaling-stroke" d="M58.2793 145.814L101.766 102.327" stroke="#00AE99" stroke-width="3"/>
+                <path vector-effect="non-scaling-stroke" d="M76 37H137.5" stroke="#00AE99" stroke-width="3" />
+                <path
+                    vector-effect="non-scaling-stroke"
+                    d="M37 73.5L37 12M113 137.5L113 75"
+                    stroke="#00AE99"
+                    stroke-width="3"
+                />
+                <path vector-effect="non-scaling-stroke" d="M13 113H71.5" stroke="#00AE99" stroke-width="3" />
+                <path
+                    vector-effect="non-scaling-stroke"
+                    d="M49.087 47.5264L92.574 4.03932"
+                    stroke="#00AE99"
+                    stroke-width="3"
+                />
+                <path
+                    vector-effect="non-scaling-stroke"
+                    d="M47.3192 100.913L3.8321 57.4259M146.314 92.4277L102.12 48.2335"
+                    stroke="#00AE99"
+                    stroke-width="3"
+                />
+                <path
+                    vector-effect="non-scaling-stroke"
+                    d="M58.2793 145.814L101.766 102.327"
+                    stroke="#00AE99"
+                    stroke-width="3"
+                />
             </Rays>
 
             <Bubble>
-                <path vector-effect="non-scaling-stroke" d="M113 75C113 85.3064 108.897 94.6546 102.235 101.5C98.4048 105.436 71 132.5 71 132.5V112.792C51.8933 110.793 37 94.6359 37 75C37 54.0132 54.0132 37 75 37C95.9868 37 113 54.0132 113 75Z" stroke="#00AE99" strokeWidth="3"/>
+                <path
+                    vector-effect="non-scaling-stroke"
+                    d="M113 75C113 85.3064 108.897 94.6546 102.235 101.5C98.4048 105.436 71 132.5 71 132.5V112.792C51.8933 110.793 37 94.6359 37 75C37 54.0132 54.0132 37 75 37C95.9868 37 113 54.0132 113 75Z"
+                    stroke="#00AE99"
+                    strokeWidth="3"
+                />
             </Bubble>
 
-            <Dot delay={0} vector-effect="non-scaling-stroke" cx="75" cy="75" r="4" stroke="#00AE99" strokeWidth="3"/>
-            <Dot delay={4.4} vector-effect="non-scaling-stroke" cx="91" cy="75" r="4" stroke="#00AE99" strokeWidth="3"/>
-            <Dot delay={-4.6} vector-effect="non-scaling-stroke" cx="59" cy="75" r="4" stroke="#00AE99" strokeWidth="3"/>
+            <Dot delay={0} vector-effect="non-scaling-stroke" cx="75" cy="75" r="4" stroke="#00AE99" strokeWidth="3" />
+            <Dot
+                delay={4.4}
+                vector-effect="non-scaling-stroke"
+                cx="91"
+                cy="75"
+                r="4"
+                stroke="#00AE99"
+                strokeWidth="3"
+            />
+            <Dot
+                delay={-4.6}
+                vector-effect="non-scaling-stroke"
+                cx="59"
+                cy="75"
+                r="4"
+                stroke="#00AE99"
+                strokeWidth="3"
+            />
         </g>
     </svg>
 );
@@ -57,6 +98,9 @@ const Rays = styled.g`
     transform-origin: 50% 50%;
 `;
 
-const Dot = styled.circle<{ delay: number }>`
+const Dot =
+    styled.circle <
+    { delay: number } >
+    `
     animation: ${fadeInOut} 4s ${props => `${props.delay}s`} infinite;
 `;
-- 
cgit