diff --git a/package.json b/package.json
index aa49bfb..17bc494 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/home/Pricing.tsx b/src/components/home/Pricing.tsx
index f94fa2d..d3a4579 100644
--- a/src/components/home/Pricing.tsx
+++ b/src/components/home/Pricing.tsx
@@ -74,7 +74,7 @@ const Pricing = () => {
1 Studio with a custom trained model
- {process.env.NEXT_PUBLIC_STUDIO_SHOT_AMOUNT} images
+ {process.env.NEXT_PUBLIC_STUDIO_SHOT_AMOUNT} avatars
generation
diff --git a/src/components/home/Slider.tsx b/src/components/home/Slider.tsx
new file mode 100644
index 0000000..3e52e06
--- /dev/null
+++ b/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;
+ 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 (
+
+ {prompts.map((prompt) =>
+ ["romy", "sacha"].map((name) => (
+
+
+
+
+
+ ))
+ )}
+
+ );
+};
+
+export default Slider;
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index ac0ade9..5f4a4d1 100644
--- a/src/components/layout/Header.tsx
+++ b/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 (
{
>
) : (
-
- {process.env.NEXT_PUBLIC_STUDIO_SHOT_AMOUNT} images
+ {process.env.NEXT_PUBLIC_STUDIO_SHOT_AMOUNT} avatars
generation (512x512 resolution)
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index d78d326..cdddd1f 100644
--- a/src/pages/index.tsx
+++ b/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() {
+
diff --git a/yarn.lock b/yarn.lock
index f6bfe3c..30eb422 100644
--- a/yarn.lock
+++ b/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"