aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/pages/instant.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/@next/pages/instant.tsx')
-rw-r--r--packages/website/ts/@next/pages/instant.tsx39
1 files changed, 34 insertions, 5 deletions
diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx
index b20a2c044..442aa0c8b 100644
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -71,9 +71,9 @@ export const Next0xInstant = () => (
<Section isFullWidth={true} isPadded={false} padding="30px 0">
<MarqueeWrap>
<div>
- <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/>
- <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/>
- <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/>
+ {[...Array(20)].map((item, index) => (
+ <Card index={index} />
+ ))}
</div>
</MarqueeWrap>
</Section>
@@ -110,17 +110,31 @@ export const Next0xInstant = () => (
</SiteWrap>
);
+// scroll calc for infinite is (width * total / 2) + padding
const scroll = keyframes`
0% { transform: translate3d(0, 0, 0) }
- 100% { transform: translate3d(-1715.18px, 0, 0) }
+ 100% { transform: translate3d(-2615px, 0, 0) }
`;
+
+const fadeUp = keyframes`
+ 0% {
+ opacity: 0;
+ transform: translateY(50px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0px);
+ }
+`;
+
+// width = (260 * 20) - (15 * 19)
const MarqueeWrap = styled.div`
width: 100vw;
height: 380px;
padding-bottom: 60px;
> div {
- width: 5145.54px;
+ width: 5485px;
height: 380px;
display: flex;
animation: ${scroll} 20s linear infinite;
@@ -131,3 +145,18 @@ const MarqueeWrap = styled.div`
}
}
`;
+
+const Card = styled.div`
+ width: 260px;
+ height: 370px;
+ background: #555;
+ border-radius: 5px;
+ display: inline-block;
+ opacity: 0;
+ transform: translateY(10px);
+ animation: ${fadeUp} 0.5s ${props => `${props.index * 0.05}s`} forwards;
+
+ & + & {
+ margin-left: 15px;
+ }
+`;