refactor(website): update carousels and other improvements

apps/website/src/app/learn/page.tsx

@@ -279,11 +279,13 @@ await verifyProof(verificationKey, fullProof)`,
                     </VStack>
                 ))}
             </VStack>
-            <VStack backgroundColor={"darkBlue"} w={"100vw"}>
-                <VStack mt={"128px"}>
+
+            <VStack backgroundColor={"darkBlue"}>
+                <VStack mt={"128px"} w="full">
                     <MediaCarousel />
                 </VStack>
-                <VStack mt={"96px"} mb={"66px"}>
+
+                <VStack mt={"96px"} mb={"66px"} w={"full"}>
                     <ArticlesCarousel />
                 </VStack>
             </VStack>

apps/website/src/components/ArticlesCarousel.tsx

@@ -1,44 +1,45 @@
 "use client"
 
-import { HStack, IconButton, Stack, useBreakpointValue } from "@chakra-ui/react"
-import { useCallback, useEffect, useState } from "react"
-import allArticles from "../data/articles.json"
+import { Box, HStack, IconButton, VStack, useBreakpointValue, Text } from "@chakra-ui/react"
+import { useCallback, useState } from "react"
+import articles from "../data/articles.json"
 import IconArrowLeft from "../icons/IconArrowLeft"
 import IconArrowRight from "../icons/IconArrowRight"
-import { circularSlice } from "../utils/circularSlice"
 import ArticleCard from "./ArticleCard"
 
-export default function ArticlesCarousel() {
-    const variant = useBreakpointValue(
-        {
-            base: 3,
-            sm: 3,
-            md: 2,
-            lg: 4
-        },
-        {
-            fallback: "md"
-        }
-    )
-
-    const [articles, setArticles] = useState<typeof allArticles>()
+export default function VideosCarousel() {
     const [index, setIndex] = useState<number>(0)
-
-    useEffect(() => {
-        setArticles(circularSlice(allArticles, index, variant!))
-    }, [index, variant])
+    const numberOfItems = useBreakpointValue({
+        base: 1,
+        md: 2,
+        lg: 4
+    })
 
     const nextProject = useCallback(() => {
-        setIndex((i) => (i + 1) % allArticles.length)
-    }, [index])
+        if (index + 1 === Math.ceil(articles.length / numberOfItems!)) {
+            setIndex(0)
+        } else {
+            setIndex((prevIndex) => prevIndex + 1)
+        }
+    }, [index, numberOfItems])
 
     const previousProject = useCallback(() => {
-        setIndex((i) => (i === 0 ? allArticles.length - 1 : i - 1))
+        if (index === 0) {
+            setIndex(Math.ceil(articles.length / numberOfItems!) - 1)
+        } else {
+            setIndex((prevIndex) => prevIndex - 1)
+        }
     }, [index])
 
     return (
         <>
-            <HStack display={{ base: "none", md: "block" }} w="100%">
+            <HStack display={"flex"} w="full" mb={"56px"}>
+                <HStack flex="1" justify={"left"}>
+                    <Text flex="1" textAlign={"left"} fontSize="44px" fontWeight={"500"}>
+                        Articles
+                    </Text>
+                </HStack>
+
                 <HStack flex="1" justify="end">
                     <IconButton
                         onClick={previousProject}
@@ -54,12 +55,28 @@ export default function ArticlesCarousel() {
                     />
                 </HStack>
             </HStack>
-            <Stack direction={{ base: "column", md: "row" }} spacing="30px">
-                {articles &&
-                    articles.map((article, i) => (
-                        <ArticleCard key={i} title={article.title} minRead={article.minRead} url={article.url} />
+            <HStack display={"flex"} w="full" overflow="hidden">
+                <HStack
+                    w="full"
+                    transition="transform 0.4s ease-in-out"
+                    transform={`translateX(-${index * 100}%)`}
+                    py="1"
+                    spacing="0"
+                >
+                    {articles.map((article, i) => (
+                        <VStack key={i} minW={{ base: `${100 / 1}%`, md: `${100 / 2}%`, lg: `${100 / 4}%` }}>
+                            <Box px="3">
+                                <ArticleCard
+                                    key={i}
+                                    title={article.title}
+                                    minRead={article.minRead}
+                                    url={article.url}
+                                />
+                            </Box>
+                        </VStack>
                     ))}
-            </Stack>
+                </HStack>
+            </HStack>
         </>
     )
 }

apps/website/src/components/CodeBlock.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { Flex, useClipboard, Button } from "@chakra-ui/react"
 import { CodeBlock, ocean } from "react-code-blocks"
 

apps/website/src/components/VideosCarousel.tsx

@@ -1,44 +1,45 @@
 "use client"
 
-import { HStack, IconButton, Stack, useBreakpointValue } from "@chakra-ui/react"
-import { useCallback, useEffect, useState } from "react"
-import allVideos from "../data/videos.json"
+import { Box, HStack, IconButton, VStack, useBreakpointValue, Text } from "@chakra-ui/react"
+import { useCallback, useState } from "react"
+import videos from "../data/videos.json"
 import IconArrowLeft from "../icons/IconArrowLeft"
 import IconArrowRight from "../icons/IconArrowRight"
-import { circularSlice } from "../utils/circularSlice"
 import VideoCard from "./VideoCard"
 
 export default function VideosCarousel() {
-    const variant = useBreakpointValue(
-        {
-            base: 3,
-            sm: 3,
-            md: 2,
-            lg: 4
-        },
-        {
-            fallback: "md"
-        }
-    )
-
-    const [videos, setVideos] = useState<typeof allVideos>()
     const [index, setIndex] = useState<number>(0)
-
-    useEffect(() => {
-        setVideos(circularSlice(allVideos, index, variant!))
-    }, [index, variant])
+    const numberOfItems = useBreakpointValue({
+        base: 1,
+        md: 2,
+        lg: 4
+    })
 
     const nextProject = useCallback(() => {
-        setIndex((i) => (i + 1) % allVideos.length)
-    }, [index])
+        if (index + 1 === Math.ceil(videos.length / numberOfItems!)) {
+            setIndex(0)
+        } else {
+            setIndex((prevIndex) => prevIndex + 1)
+        }
+    }, [index, numberOfItems])
 
     const previousProject = useCallback(() => {
-        setIndex((i) => (i === 0 ? allVideos.length - 1 : i - 1))
+        if (index === 0) {
+            setIndex(Math.ceil(videos.length / numberOfItems!) - 1)
+        } else {
+            setIndex((prevIndex) => prevIndex - 1)
+        }
     }, [index])
 
     return (
         <>
-            <HStack display={{ base: "none", md: "block" }} w="100%">
+            <HStack display={"flex"} w="full" mb={"56px"}>
+                <HStack flex="1" justify={"left"}>
+                    <Text flex="1" textAlign={"left"} fontSize="44px" fontWeight={"500"}>
+                        Videos
+                    </Text>
+                </HStack>
+
                 <HStack flex="1" justify="end">
                     <IconButton
                         onClick={previousProject}
@@ -54,12 +55,23 @@ export default function VideosCarousel() {
                     />
                 </HStack>
             </HStack>
-            <Stack direction={{ base: "column", md: "row" }} spacing="30px">
-                {videos &&
-                    videos.map((video, i) => (
-                        <VideoCard key={i} title={video.title} embeddedVideoUrl={video.embeddedUrl} />
+            <HStack display={"flex"} w="full" overflow="hidden">
+                <HStack
+                    w="full"
+                    transition="transform 0.4s ease-in-out"
+                    transform={`translateX(-${index * 100}%)`}
+                    py="1"
+                    spacing="0"
+                >
+                    {videos.map((video, i) => (
+                        <VStack key={i} minW={{ base: `${100 / 1}%`, md: `${100 / 2}%`, lg: `${100 / 4}%` }}>
+                            <Box px="3">
+                                <VideoCard key={i} title={video.title} embeddedVideoUrl={video.embeddedUrl} />
+                            </Box>
+                        </VStack>
                     ))}
-            </Stack>
+                </HStack>
+            </HStack>
         </>
     )
 }

apps/website/src/data/videos.json

@@ -3,7 +3,7 @@
         "title": "Snarks for mixing, signaling and scaling",
         "eventName": "Devcon4",
         "date": "Dec 10, 2018",
-        "speakerss": ["Barry Whitehat"],
+        "speakers": ["Barry Whitehat"],
         "url": "https://youtu.be/lv6iK9qezBY",
         "embeddedUrl": "https://www.youtube.com/embed/lv6iK9qezBY?si=3HDxcxjELRCjrLJo"
     },
@@ -11,7 +11,7 @@
         "title": "Succinct Proofs in Ethereum",
         "eventName": "2nd ZKProof Workshop",
         "date": "Apr 30, 2019",
-        "speakerss": ["Barry Whitehat"],
+        "speakers": ["Barry Whitehat"],
         "url": "https://youtu.be/TtsDNneTDDY",
         "embeddedUrl": "https://www.youtube.com/embed/TtsDNneTDDY?si=UmRq7i4B0gm7bvfx"
     },