aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rwxr-xr-x[-rw-r--r--]packages/website/public/images/@next/0x-instant/widget-1.pngbin37046 -> 27160 bytes
-rwxr-xr-x[-rw-r--r--]packages/website/public/images/@next/0x-instant/widget-2.pngbin68311 -> 47878 bytes
-rwxr-xr-x[-rw-r--r--]packages/website/public/images/@next/0x-instant/widget-3.pngbin37805 -> 27505 bytes
-rwxr-xr-x[-rw-r--r--]packages/website/public/images/@next/0x-instant/widget-4.pngbin37148 -> 30727 bytes
-rwxr-xr-x[-rw-r--r--]packages/website/public/images/@next/0x-instant/widget-5.pngbin181796 -> 144454 bytes
-rwxr-xr-x[-rw-r--r--]packages/website/public/images/@next/0x-instant/widget-6.pngbin37812 -> 28382 bytes
-rw-r--r--packages/website/ts/@next/pages/instant.tsx17
7 files changed, 10 insertions, 7 deletions
diff --git a/packages/website/public/images/@next/0x-instant/widget-1.png b/packages/website/public/images/@next/0x-instant/widget-1.png
index 9c3abe97b..622c1f42c 100644..100755
--- a/packages/website/public/images/@next/0x-instant/widget-1.png
+++ b/packages/website/public/images/@next/0x-instant/widget-1.png
Binary files differ
diff --git a/packages/website/public/images/@next/0x-instant/widget-2.png b/packages/website/public/images/@next/0x-instant/widget-2.png
index dbe662e89..7fec16cfb 100644..100755
--- a/packages/website/public/images/@next/0x-instant/widget-2.png
+++ b/packages/website/public/images/@next/0x-instant/widget-2.png
Binary files differ
diff --git a/packages/website/public/images/@next/0x-instant/widget-3.png b/packages/website/public/images/@next/0x-instant/widget-3.png
index d74755361..91ac7d36a 100644..100755
--- a/packages/website/public/images/@next/0x-instant/widget-3.png
+++ b/packages/website/public/images/@next/0x-instant/widget-3.png
Binary files differ
diff --git a/packages/website/public/images/@next/0x-instant/widget-4.png b/packages/website/public/images/@next/0x-instant/widget-4.png
index 45ef37fa6..3db35e068 100644..100755
--- a/packages/website/public/images/@next/0x-instant/widget-4.png
+++ b/packages/website/public/images/@next/0x-instant/widget-4.png
Binary files differ
diff --git a/packages/website/public/images/@next/0x-instant/widget-5.png b/packages/website/public/images/@next/0x-instant/widget-5.png
index 992353efe..05cebf28b 100644..100755
--- a/packages/website/public/images/@next/0x-instant/widget-5.png
+++ b/packages/website/public/images/@next/0x-instant/widget-5.png
Binary files differ
diff --git a/packages/website/public/images/@next/0x-instant/widget-6.png b/packages/website/public/images/@next/0x-instant/widget-6.png
index a4bd33de2..33def6e04 100644..100755
--- a/packages/website/public/images/@next/0x-instant/widget-6.png
+++ b/packages/website/public/images/@next/0x-instant/widget-6.png
Binary files differ
diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx
index 86a2485ce..9f996b182 100644
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -71,7 +71,7 @@ export const Next0xInstant = () => (
<Section isFullWidth={true} isPadded={false} padding="30px 0">
<MarqueeWrap>
<div>
- {[...Array(12)].map((item, index) => (
+ {[...Array(18)].map((item, index) => (
<Card key={`card-${index}`} index={index}>
<img src={`/images/@next/0x-instant/widget-${(index % 6) + 1}.png`} />
</Card>
@@ -114,9 +114,10 @@ export const Next0xInstant = () => (
);
// scroll animation calc is simply (imageWidth * totalRepetitions) / 2
+// img width is 370px
const scroll = keyframes`
- 0% { transform: translate3d(0, 0, 0) }
- 100% { transform: translate3d(-2220px, 0, 0) }
+ 0% { transform: translate3d(-2220px, 0, 0) }
+ 100% { transform: translate3d(-4440px, 0, 0) }
`;
const scrollMobile = keyframes`
@@ -142,6 +143,7 @@ const ConfiguratorSection = styled(Section)<SectionProps>`
`;
// width = 370 * 12
+// mobile width = 300
const MarqueeWrap = styled.div`
width: 100vw;
height: 514px;
@@ -151,19 +153,20 @@ const MarqueeWrap = styled.div`
height: auto;
display: flex;
will-change: transform;
+ transform: translate3d(-2220px, 0, 0);
}
@media (min-width: 768px) {
> div {
- width: 4440px;
- animation: ${scroll} 30s linear infinite;
+ width: 6660px;
+ animation: ${scroll} 70s linear infinite;
}
}
@media (max-width: 768px) {
> div {
- width: 3600px;
- animation: ${scrollMobile} 30s linear infinite;
+ width: 5400px;
+ animation: ${scrollMobile} 70s linear infinite;
}
}
`;