aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/@next')
-rw-r--r--packages/website/ts/@next/components/animatedChatIcon.tsx52
-rw-r--r--packages/website/ts/@next/components/hero.tsx2
2 files changed, 35 insertions, 19 deletions
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;
`;
diff --git a/packages/website/ts/@next/components/hero.tsx b/packages/website/ts/@next/components/hero.tsx
index 34f33d641..62008d53e 100644
--- a/packages/website/ts/@next/components/hero.tsx
+++ b/packages/website/ts/@next/components/hero.tsx
@@ -13,7 +13,7 @@ interface Props {
}
export const Hero = (props: Props) => (
- <Section>
+ <Section maxWidth="1170px">
<Wrap isCentered={!props.figure} isFullWidth={props.isFullWidth}>
{props.figure &&
<Content width="400px">