Merge pull request #263 from TreasureProject/update/landing-page

Added bag platform section
TreasureProject · Jan 18, 2024 · d230b9f · d230b9f
2 parents fa2b71c + d447558
commit d230b9f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git 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
@@ -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 />