feat: add home slider

package.json

@@ -34,6 +34,7 @@
     "framer-motion": "^7.6.19",
     "image-blob-reduce": "^4.1.0",
     "jszip": "^3.10.1",
+    "keen-slider": "^6.8.5",
     "next": "13.0.6",
     "next-auth": "^4.18.0",
     "next-s3-upload": "^0.2.8",

src/components/home/Pricing.tsx

@@ -74,7 +74,7 @@ const Pricing = () => {
             <b>1</b> Studio with a <b>custom trained model</b>
           </CheckedListItem>
           <CheckedListItem>
-            <b>{process.env.NEXT_PUBLIC_STUDIO_SHOT_AMOUNT}</b> images
+            <b>{process.env.NEXT_PUBLIC_STUDIO_SHOT_AMOUNT}</b> avatars
             generation
           </CheckedListItem>
           <CheckedListItem>

src/components/home/Slider.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import { useKeenSlider } from "keen-slider/react";
+import { Box, Flex } from "@chakra-ui/react";
+import "keen-slider/keen-slider.min.css";
+import { prompts } from "@/core/utils/prompts";
+import Image from "next/image";
+import Link from "next/link";
+
+const Slider = () => {
+  const [sliderRef] = useKeenSlider(
+    {
+      slides: {
+        perView: 3,
+        spacing: 5,
+      },
+      breakpoints: {
+        "(min-width: 500px)": {
+          slides: { perView: 4, spacing: 5 },
+        },
+        "(min-width: 800px)": {
+          slides: { perView: 6, spacing: 5 },
+        },
+        "(min-width: 1000px)": {
+          slides: { perView: 10, spacing: 5 },
+        },
+      },
+      loop: true,
+      renderMode: "performance",
+    },
+    [
+      (slider) => {
+        let timeout: ReturnType<typeof setTimeout>;
+        let mouseOver = false;
+
+        function clearNextTimeout() {
+          clearTimeout(timeout);
+        }
+
+        function nextTimeout() {
+          clearTimeout(timeout);
+          if (mouseOver) return;
+          timeout = setTimeout(() => {
+            slider.next();
+          }, 2000);
+        }
+
+        slider.on("created", () => {
+          slider.container.addEventListener("mouseover", () => {
+            mouseOver = true;
+            clearNextTimeout();
+          });
+          slider.container.addEventListener("mouseout", () => {
+            mouseOver = false;
+            nextTimeout();
+          });
+
+          nextTimeout();
+        });
+
+        slider.on("dragStarted", clearNextTimeout);
+        slider.on("animationEnded", nextTimeout);
+        slider.on("updated", nextTimeout);
+      },
+    ]
+  );
+
+  return (
+    <Flex my={5} ref={sliderRef}>
+      {prompts.map((prompt) =>
+        ["romy", "sacha"].map((name) => (
+          <Box
+            transition="200ms all"
+            _hover={{ filter: "contrast(140%)" }}
+            key={`${prompt.slug}-${name}`}
+            className="keen-slider__slide"
+          >
+            <Link href={`/prompts/dreambooth/${prompt.slug}`}>
+              <Image
+                style={{ borderRadius: 10 }}
+                src={`/prompts/${name}/${prompt.slug}.png`}
+                alt={prompt.label}
+                width="400"
+                height="400"
+              />
+            </Link>
+          </Box>
+        ))
+      )}
+    </Flex>
+  );
+};
+
+export default Slider;

src/components/layout/Header.tsx

@@ -14,7 +14,7 @@ import { HiLogout } from "react-icons/hi";
 import { IoIosFlash } from "react-icons/io";
 
 const Header = () => {
-  const { data: session } = useSession();
+  const { data: session, status } = useSession();
 
   return (
     <Flex
@@ -80,7 +80,13 @@ const Header = () => {
               </Tooltip>
             </>
           ) : (
-            <Button href="/login" as={Link} variant="brand" size="sm">
+            <Button
+              isLoading={status === "loading"}
+              href="/login"
+              as={Link}
+              variant="brand"
+              size="sm"
+            >
               Login
             </Button>
           )}

src/components/projects/FormPayment.tsx

@@ -76,7 +76,7 @@ const FormPayment = ({
               <b>1</b> Studio with a <b>custom trained model</b>
             </CheckedListItem>
             <CheckedListItem>
-              <b>{process.env.NEXT_PUBLIC_STUDIO_SHOT_AMOUNT}</b> images
+              <b>{process.env.NEXT_PUBLIC_STUDIO_SHOT_AMOUNT}</b> avatars
               generation (512x512 resolution)
             </CheckedListItem>
             <CheckedListItem>

src/pages/index.tsx

@@ -1,6 +1,7 @@
 import Features from "@/components/home/Features";
 import Hero from "@/components/home/Hero";
 import Pricing from "@/components/home/Pricing";
+import Slider from "@/components/home/Slider";
 import { Flex } from "@chakra-ui/react";
 
 export default function Home() {
@@ -9,6 +10,7 @@ export default function Home() {
       <Flex flexDirection="column" marginX="auto" flex="1">
         <Hero />
       </Flex>
+      <Slider />
       <Features />
       <Flex px={4} py={10} maxWidth="container.lg" width="100%" marginX="auto">
         <Pricing />

yarn.lock

@@ -3787,6 +3787,11 @@ jszip@^3.10.1:
     readable-stream "~2.3.6"
     setimmediate "^1.0.5"
 
+keen-slider@^6.8.5:
+  version "6.8.5"
+  resolved "https://registry.yarnpkg.com/keen-slider/-/keen-slider-6.8.5.tgz#1d96ff3ab77f195fc6cacd2e5aecc35d8ceb9702"
+  integrity sha512-9yoosfffgTCrkmbX8kCUMWsn9KDgPSkxBof5/0yXde001D1xao7i9ppfxQCCK0MLnoCa+Rdssby0jFbTTUM4rw==
+
 language-subtag-registry@^0.3.20:
   version "0.3.22"
   resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz#2e1500861b2e457eba7e7ae86877cbd08fa1fd1d"