use swipable carousel

packages/website/src/components/Carousel/Carousel.js

@@ -2,6 +2,7 @@ import * as React from "react";
 import { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { wrap } from "popmotion";
+import classnames from "classnames";
 
 const variants = {
   enter: (direction) => {
@@ -35,7 +36,7 @@ const swipePower = (offset, velocity) => {
   return Math.abs(offset) * velocity;
 };
 
-export const Carousel = ({ items }) => {
+export const Carousel = ({ Component, items }) => {
   const [[page, direction], setPage] = useState([0, 0]);
 
   // We only have 3 items, but we paginate them absolutely (ie 1, 2, 3, 4, 5...) and
@@ -50,6 +51,15 @@ export const Carousel = ({ items }) => {
 
   return (
     <>
+      <div className="relative overflow-hidden">
+        <div className="opacity-0 flex flex-row">
+          {items.map((item, index) => (
+            <div className="flex-shrink-0 w-screen">
+              <Component key={index} {...item} />
+            </div>
+          ))}
+        </div>
+
         <AnimatePresence initial={false} custom={direction}>
           <motion.div
             key={page}
@@ -58,10 +68,10 @@ export const Carousel = ({ items }) => {
             initial="enter"
             animate="center"
             exit="exit"
-          // transition={{
+            transition={{
-          //   x: { type: "spring", stiffness: 300, damping: 30 },
+              x: { type: "spring", stiffness: 300, damping: 30 },
               // opacity: { duration: 0.2 },
-          // }}
+            }}
             drag="x"
             dragConstraints={{ left: 0, right: 0 }}
             dragElastic={1}
@@ -74,15 +84,28 @@ export const Carousel = ({ items }) => {
                 paginate(-1);
               }
             }}
+            className="absolute top-0 w-full"
           >
-          {items[itemIndex]}
+            <Component {...items[itemIndex]} />
           </motion.div>
         </AnimatePresence>
-      <div className="next" onClick={() => paginate(1)}>
-        {"‣"}
       </div>
-      <div className="prev" onClick={() => paginate(-1)}>
+      <div className="flex justify-center mt-8">
-        {"‣"}
+        {items.map((item, index) => (
+          <button
+            key={index}
+            type="button"
+            className="p-3 flex"
+            onClick={() => setPage([index, index > itemIndex ? 1 : -1])}
+          >
+            <span
+              className={classnames("circle transition-colors", {
+                "bg-primary border-2 border-primary": itemIndex === index,
+                "bg-white border-2 border-palette-600": itemIndex !== index,
+              })}
+            ></span>
+          </button>
+        ))}
       </div>
     </>
   );

packages/website/src/components/CodeTerminal/CodeTerminal.js

@@ -29,7 +29,7 @@ async function example() {
 
   return (
     <div>
-      <div className="bg-palette-400 rounded-t space-x-2 px-2" style={{ width: "540px" }}>
+      <div className="bg-palette-400 rounded-t space-x-2 px-2">
         <div className="circle bg-error"></div>
         <div className="circle bg-warning"></div>
         <div className="circle bg-primary"></div>

packages/website/src/components/Link/Link.js

@@ -5,7 +5,7 @@ export default function Link({
   children,
   to,
   activeClassName,
-  partiallyActive,
+  partiallyActive = to !== "/",
   target = "_blank",
   rel = "noopener noreferrer",
   ...params

packages/website/src/pages/about.js

@@ -1,12 +1,7 @@
 import * as React from "react";
 import { GatsbyImage, getImage } from "gatsby-plugin-image";
-import Layout, {
+import Layout, { Section, SectionTitle, SectionTitleCaption, CardWithDescription } from "../components/Layout";
-  Section,
+import { Carousel } from "../components/Carousel/Carousel";
-  SectionTitle,
-  SectionTitleCaption,
-  CardWithDescription,
-  CardCarousel,
-} from "../components/Layout";
 import SEO from "../components/seo";
 import {
   ArrowRight,
@@ -183,7 +178,7 @@ const AboutPage = ({ ...props }) => {
             </div>
 
             <div className="desktop:hidden">
-              <CardCarousel CardComponent={CardWithDescription} cards={aboutCards} />
+              <Carousel Component={CardWithDescription} items={aboutCards} />
             </div>
 
             <div className="mt-14 text-center space-y-6">
@@ -247,7 +242,7 @@ const AboutPage = ({ ...props }) => {
           </div>
 
           <div className="desktop:hidden">
-            <CardCarousel CardComponent={TeamCardPage} cards={teamCardsPaginated} fullWidth={true} />
+            <Carousel Component={TeamCardPage} items={teamCardsPaginated} fullWidth={true} />
           </div>
 
           <div className="desktop:col-span-2 flex flex-col desktop:flex-row items-center desktop:space-x-8 space-y-8 desktop:space-y-0">

packages/website/src/pages/developers.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-import Layout, { Section, SectionTitle, CardWithDescription, CardCarousel } from "../components/Layout";
+import Layout, { Section, SectionTitle, CardWithDescription } from "../components/Layout";
+import { Carousel } from "../components/Carousel/Carousel";
 import { ExternalLink, DataSwap, Encryption, Layers, Mesh, Toolkit, DevBig } from "../components/Icons";
 import CodeTerminal from "../components/CodeTerminal";
 import SEO from "../components/seo";
@@ -130,7 +131,7 @@ const DevelopersPage = () => (
       </div>
 
       <div className="desktop:hidden">
-        <CardCarousel CardComponent={CardWithDescription} cards={reasonCards} />
+        <Carousel Component={CardWithDescription} items={reasonCards} />
       </div>
 
       <div className="desktop:hidden mt-12 text-center">

packages/website/src/pages/index.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-// import { StaticImage } from "gatsby-plugin-image";
+import Layout, { Section, SectionTitle, CardWithDescription, CardWithTitle } from "../components/Layout";
-import Layout, { Section, SectionTitle, CardWithDescription, CardWithTitle, CardCarousel } from "../components/Layout";
+import { Carousel } from "../components/Carousel/Carousel";
 import SEO from "../components/seo";
 import CommunitySection from "../components/CommunitySection";
 import Uploader from "../components/Uploader";
@@ -102,7 +102,7 @@ const IndexPage = () => {
         </div>
 
         <div className="desktop:hidden">
-          <CardCarousel CardComponent={CardWithTitle} cards={etosCards} />
+          <Carousel Component={CardWithTitle} items={etosCards} />
         </div>
 
         <div className="flex flex-col items-center mt-16">
@@ -141,7 +141,7 @@ const IndexPage = () => {
         </div>
 
         <div className="desktop:hidden">
-          <CardCarousel CardComponent={CardWithDescription} cards={ecosystemCards} />
+          <Carousel Component={CardWithDescription} items={ecosystemCards} />
         </div>
 
         <div className="desktop:hidden mt-12 text-center">