nft trading

metacube-games · Dec 7, 2024 · d61f574 · d61f574
1 parent c7e808f
commit d61f574
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 39 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -9,27 +9,27 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@next/third-parties": "^15.0.3",
+    "@next/third-parties": "^15.0.4",
     "clsx": "^2.1.1",
     "cssnano": "^7.0.6",
-    "framer-motion": "^11.11.11",
+    "framer-motion": "^11.13.1",
     "million": "latest",
-    "next": "15.0.3",
+    "next": "15.0.4",
     "next-videos": "^1.4.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-social-icons": "^6.18.0",
-    "tailwind-merge": "^2.5.4"
+    "tailwind-merge": "^2.5.5"
   },
   "devDependencies": {
     "@types/node": "^22",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "autoprefixer": "^10.4.20",
     "eslint": "^9",
-    "eslint-config-next": "15.0.3",
+    "eslint-config-next": "15.0.4",
     "postcss": "^8",
-    "tailwindcss": "^3.4.14",
+    "tailwindcss": "^3.4.16",
     "typescript": "^5"
   }
 }
diff --git a/public/g.gif b/public/g.gif
diff --git a/public/passcard.gif b/public/passcard.gif
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -7,23 +7,26 @@ import Footer from "@/components/footer";
 import Trailer from "@/components/trailer";
 import Team from "@/components/team";
 import MotionCard from "@/components/motion-card";
-const TracingBeam = dynamic(() => import("@/components/ui/tracing-beam"))
+import Link from "next/link";
+import Image from "next/image";
 
+const TracingBeam = dynamic(() => import("@/components/ui/tracing-beam"));
 
 export default function Home() {
   return (
     <main className="flex flex-col items-center justify-between">
       <Navbar />
       <CubeAnimation />
-      <div className="container mx-auto py-24">
+      <div className="container mx-auto">
         <div
           aria-hidden="true"
           className={"relative w-full max-w-5xl mx-auto h-full"}
         >
           <div className="absolute -left-20 top-3">
             <TracingBeam />
           </div>
-          <div id="heightNeed" >
+          <div id="heightNeed">
+            <TradeNFTs />
             <Trailer />
             <Features />
             <MotionCard />
@@ -35,3 +38,64 @@ export default function Home() {
     </main>
   );
 }
+
+const NFTLinkWImage = ({
+  title,
+  href,
+  image,
+}: {
+  title: string;
+  href: string;
+  image: string;
+}) => {
+  return (
+    <Link
+      href={href}
+      target="_blank"
+      className="group w-max relative inline-block rounded-lg text-black  transition transform hover:scale-105 hover:shadow-green-glow"
+    >
+      <Image
+        src={image}
+        alt={title}
+        width={175}
+        height={175}
+        className="rounded-md mb-2  border-white border-opacity-20 border-2 "
+      />
+      <div className="relative p-1 rounded-md rounded-tl-none rounded-tr-none">
+        <span className=" text-zinc-100 text-xl sm:text-xl ">{title}</span>
+      </div>
+    </Link>
+  );
+};
+
+const TradeNFTs = () => {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-black text-white ">
+      <div className="text-center p-14">
+        <h1 className="text-4xl tracking-widest uppercase text-center mb-4">
+          Trade Your NFTs
+        </h1>
+        <p className="text-gray-300 mb-8 p-4">
+          Start trading the exclusive <strong>Metacube: Genesis</strong> and{" "}
+          <strong>Metacube: Passcards</strong> collections! Each NFT unlocks
+          unique advantages, with benefits revealed as events come.
+        </p>
+        <div
+          // align items center
+          className="flex flex-col sm:flex-row justify-center align-middle gap-10 gap-x-28 p-6 items-center "
+        >
+          <NFTLinkWImage
+            title="Genesis"
+            href="https://element.market/collections/metacube-genesis"
+            image="/g.gif"
+          />
+          <NFTLinkWImage
+            title="Passcard"
+            href="https://element.market/collections/metacube-passcards"
+            image="/passcard.gif"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/cubeAnimation/index.tsx b/src/components/cubeAnimation/index.tsx
@@ -2,12 +2,21 @@ import React from "react";
 import { CommunityJoinSection } from "@/components/typed";
 
 export const CubeAnimation = () => {
-    return (
-        <div className="relative w-full h-screen flex">
-            <video aria-hidden="true" preload="auto" src={'/heroVideo.mp4'} autoPlay muted loop playsInline className="absolute w-full h-full object-cover z-[1]" />
-            <div className="absolute z-10 text-4xl tracking-widest uppercase top-48 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                <CommunityJoinSection />
-            </div>
-        </div>
-    );
+  return (
+    <div className="relative w-full h-screen flex">
+      <video
+        aria-hidden="true"
+        preload="auto"
+        src={"/heroVideo.mp4"}
+        autoPlay
+        muted
+        loop
+        playsInline
+        className="absolute w-full h-full object-cover z-[1]"
+      />
+      <div className="absolute z-10 text-4xl tracking-widest uppercase top-48 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+        <CommunityJoinSection />
+      </div>
+    </div>
+  );
 };
diff --git a/src/components/motion-card/index.tsx b/src/components/motion-card/index.tsx
@@ -11,10 +11,7 @@ function MotionCard() {
       </h1>
       <CardContainer className="inter-var">
         <CardBody className="relative group/card  hover:shadow-2xl hover:shadow-emerald-500/[0.1] bg-black border-white/[0.2] w-auto sm:w-[30rem] h-auto rounded-xl p-6 border  ">
-          <CardItem
-            translateZ="0"
-            className="text-2xl font-bold text-white"
-          >
+          <CardItem translateZ="0" className="text-2xl font-bold text-white">
             Collect your assets
           </CardItem>
           <CardItem
@@ -90,8 +87,8 @@ function MotionCard() {
           </div>
         </CardBody>
       </CardContainer>
-    </section >
+    </section>
   );
 }
 
-export default MotionCard;
+export default MotionCard;
diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx
@@ -21,15 +21,24 @@ export function Navbar() {
 
   return (
     <nav className="relative left-1/2">
-      <FloatingNav navItems={navItems.map(item => ({
-        ...item,
-        element: (
-          <a href={item.link} key={item.name} className="flex items-center space-x-2" target="_blank" rel="noopener noreferrer" aria-label={`Learn more about ${item.name} at Metacube Games`}>
-            {item.icon}
-            <span>{item.name}</span>
-          </a>
-        )
-      }))} />
+      <FloatingNav
+        navItems={navItems.map((item) => ({
+          ...item,
+          element: (
+            <a
+              href={item.link}
+              key={item.name}
+              className="flex items-center space-x-2"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label={`Learn more about ${item.name} at Metacube Games`}
+            >
+              {item.icon}
+              <span>{item.name}</span>
+            </a>
+          ),
+        }))}
+      />
     </nav>
   );
-}
+}
diff --git a/src/components/typed/index.tsx b/src/components/typed/index.tsx
@@ -1,13 +1,12 @@
 import { SocialIcon } from "react-social-icons/component";
 
 export function CommunityJoinSection() {
-
   return (
     <div className="flex flex-col items-center justify-center h-[40rem]">
       <h1 className="text-5xl md:text-7xl font-medium tracking-widest uppercase text-white m-4">
         Metacube
       </h1>
-      <p className="text-neutral-200 text-base md:text-xl">
+      <p className="text-neutral-200 text-base md:text-xl animate-pulse">
         Join the Community
       </p>
       <div className="flex flex-row space-y-0  space-x-24 p-0">