From d447558ac07dbce6ba30264e8449a6b8e8cb781e Mon Sep 17 00:00:00 2001
From: BasVanDeGroep <accounts@basvandegroep.com>
Date: Thu, 18 Jan 2024 21:52:43 +0100
Subject: [PATCH] update

---
 app/components/new-landing/sections/Games.tsx | 19 +++++++++++++++++--
 app/routes/_index.tsx                         |  3 ++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/app/components/new-landing/sections/Games.tsx b/app/components/new-landing/sections/Games.tsx
index 4a6f9423..07be3c40 100644
--- a/app/components/new-landing/sections/Games.tsx
+++ b/app/components/new-landing/sections/Games.tsx
@@ -30,6 +30,7 @@ import TOE_BACKGROUND from "~/../public/img/new-landing/game-backgrounds/The_ToE
 
 import { twMerge } from "tailwind-merge";
 import { ChevronRightIcon } from "../misc/Icons";
+import { set } from "nprogress";
 
 const games = [
   {
@@ -92,11 +93,25 @@ const Games = () => {
       />
 
       {/* Carousel container */}
-      <div className="relative z-10 mb-20 flex cursor-pointer gap-12">
+      <div className="relative z-10 mb-20 flex h-[600px] cursor-pointer gap-12 transition-all">
         {games.map((game) => (
           <div
-            className="h-[600px] w-[416px] min-w-[416px] overflow-hidden rounded-2xl border border-night-100/40"
+            className={twMerge(
+              "absolute h-[600px] w-[416px] min-w-[416px] overflow-hidden rounded-2xl border border-night-100/40",
+              activeGame === games.indexOf(game) && "scale-110"
+            )}
+            style={{
+              left: `${
+                (games.indexOf(game) - activeGame) * 416 +
+                games.indexOf(game) * 32
+              }px`,
+            }}
             key={game.name}
+            onClick={() => {
+              if (!(activeGame === games.indexOf(game))) {
+                setActiveGame(games.indexOf(game));
+              }
+            }}
           >
             <img
               src={game.cover}
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index 2f583297..f4eb3bc5 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -11,6 +11,7 @@ import Games from "~/components/new-landing/sections/Games";
 import Ctas from "~/components/new-landing/sections/Ctas";
 import Bridgeworld from "~/components/new-landing/sections/Bridgeworld";
 import Chain from "~/components/new-landing/sections/Chain";
+import Platform from "~/components/new-landing/sections/Platform";
 
 export const headers: HeadersFunction = commonHeaders;
 
@@ -30,7 +31,7 @@ export default function Home() {
         <Intro />
         <Partners />
         <Games />
-        {/* <Platform /> */}
+        <Platform />
         <Chain />
         <Bridgeworld />
         <Ctas />