diff --git a/website/landing/components/Users/Users.tsx b/website/landing/components/Users/Users.tsx index 0195f520f..62a827ba7 100644 --- a/website/landing/components/Users/Users.tsx +++ b/website/landing/components/Users/Users.tsx @@ -17,10 +17,24 @@ const UserLink = styled("a", { maxWidth: "75%", margin: "0 auto", position: "relative", + opacity: 0, + transitionProperty: "opacity", + transitionTimingFunction: "cubic-bezier(0.770, 0.000, 0.175, 1.000)", "@bp1": { maxWidth: "100%", }, + + variants: { + visible: { + true: { + opacity: 1, + }, + false: { + opacity: 0, + }, + }, + }, }); export const Users: React.FC = () => { @@ -31,8 +45,7 @@ export const Users: React.FC = () => { // callback, a workaround is to wait until the list is in view // and then do an opacity transition. const { ref: listRef, inView } = useInView({ - threshold: 1, - triggerOnce: true, + threshold: [0, 1], }); return ( @@ -59,8 +72,6 @@ export const Users: React.FC = () => { flexDirection: "column", gap: "48px", justifyContent: "center", - opacity: inView ? 1 : 0, - transition: "opacity .5s cubic-bezier(0.770, 0.000, 0.175, 1.000)", "@bp1": { gap: "100px", @@ -69,20 +80,36 @@ export const Users: React.FC = () => { "@bp2": { flexDirection: "row", flexFlow: "row wrap", + margin: "0 auto", + width: "75%", }, }} > - {content.list.map((u) => { - const { url, height, width } = u.logo; + {content.list.map((user, userIndex) => { + const { url, height, width } = user.logo; return ( - + - {u.name} + {user.name} ); diff --git a/website/landing/public/assets/logos/CodeSandbox-minimal.svg b/website/landing/public/assets/logos/CodeSandbox-minimal.svg deleted file mode 100644 index f04b2f206..000000000 --- a/website/landing/public/assets/logos/CodeSandbox-minimal.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - \ No newline at end of file diff --git a/website/landing/public/assets/logos/GitLab.svg b/website/landing/public/assets/logos/GitLab.svg new file mode 100644 index 000000000..d8b1b5853 --- /dev/null +++ b/website/landing/public/assets/logos/GitLab.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/website/landing/website.config.json b/website/landing/website.config.json index 0ea5640bc..a5633f1b0 100644 --- a/website/landing/website.config.json +++ b/website/landing/website.config.json @@ -147,21 +147,12 @@ } }, { - "name": "CodeSandbox", - "socialUrl": "https://codesandbox.io", - "logo": { - "url": "/assets/logos/CodeSandbox-minimal.svg", - "height": 37, - "width": 261 - } - }, - { - "name": "Amplify", - "socialUrl": "https://ui.docs.amplify.aws/", + "name": "CodeAmigo", + "socialUrl": "https://codeamigo.dev/", "logo": { - "url": "/assets/logos/Amplify.svg", - "height": 40, - "width": 210 + "url": "/assets/logos/CodeAmigo.svg", + "height": 47, + "width": 219 } }, { @@ -174,12 +165,30 @@ } }, { - "name": "CodeAmigo", - "socialUrl": "https://codeamigo.dev/", + "name": "CodeSandbox", + "socialUrl": "https://codesandbox.io", "logo": { - "url": "/assets/logos/CodeAmigo.svg", + "url": "/assets/logos/CodeSandbox.svg", + "height": 40, + "width": 245 + } + }, + { + "name": "GitLab", + "socialUrl": "https://gitlab.com", + "logo": { + "url": "/assets/logos/GitLab.svg", "height": 47, - "width": 219 + "width": 150 + } + }, + { + "name": "Amplify", + "socialUrl": "https://ui.docs.amplify.aws/", + "logo": { + "url": "/assets/logos/Amplify.svg", + "height": 40, + "width": 210 } } ]