initial commit

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,51 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+node_modules
+.env
+
+# Hardhat files
+/cache
+/artifacts
+
+# TypeChain files
+/typechain
+/typechain-types
+
+# solidity-coverage files
+/coverage
+/coverage.json

components/ActiveSlider.jsx

@@ -0,0 +1,53 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/free-mode";
+
+import { FreeMode, Pagination } from "swiper/modules";
+
+import { RxArrowTopRight } from "react-icons/rx";
+import { ServiceData } from "../constants";
+
+const ActiveSlider = () => {
+  return (
+    <div className="flex items-center justify-center flex-col h-[550px] bg-gradient-to-r from-sky-500 to-indigo-500">
+      <Swiper
+        breakpoints={{
+          340: {
+            slidesPerView: 2,
+            spaceBetween: 15,
+          },
+          700: {
+            slidesPerView: 3,
+            spaceBetween: 15,
+          },
+        }}
+        freeMode={true}
+        pagination={{
+          clickable: true,
+        }}
+        modules={[FreeMode, Pagination]}
+        className="max-w-[100%] lg:max-w-[80%]"
+      >
+        {ServiceData.map((item) => (
+          <SwiperSlide key={item.title}>
+            <div className="flex flex-col gap-6 mb-2 group relative shadow-lg text-white rounded-xl px-6 py-8 h-[250px] w-[215px] lg:h-[400px] lg:w-[400px] overflow-hidden cursor-pointer">
+              <div className="absolute inset-0 bg-cover bg-center"
+                style={{ backgroundImage: `url(${item.backgroundImage})` }}
+              />
+              <div className="absolute inset-0 bg-black opacity-10 group-hover:opacity-60" />
+              <div className="relative flex flex-col gap-3">
+                <h1 className="text-xl lg:text-2xl">{item.title} </h1>
+                <p className="lg:text-[18px]">{item.content} </p>
+              </div>
+              <RxArrowTopRight className="absolute bottom-5 left-5 w-[35px] h-[35px] text-white group-hover:text-blue-500 group-hover:rotate-45 duration-100" />
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </div>
+  );
+};
+
+export default ActiveSlider;

components/BlankLayout.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const BlankLayout = ({ children }) => {
+  return <div>{children}</div>;
+};
+
+export default BlankLayout;

components/FeaturedSlider.jsx

@@ -0,0 +1,98 @@
+import React from "react";
+
+const trendingTokens = [
+  {
+    image: "/assets/hotstuff.png",
+    title: "Ordinal Maxi Biz",
+    sub: "BTC",
+  },
+  {
+    image: "/assets/hotstuff2.png",
+    title: "DeGods",
+    sub: "SOL",
+  },
+  {
+    image: "/assets/hotstuff3.png",
+    title: "Mad Lads",
+    sub: "SOL",
+  },
+  {
+    image: "/assets/city1.png",
+    title: "Pudgy Penguins",
+    sub: "ETH",
+  },
+  {
+    image: "/assets/city2.png",
+    title: "Milady Maker",
+    sub: "ETH",
+  },
+  {
+    image: "/assets/planet1.png",
+    title: "Milady Maker",
+    sub: "ETH",
+  },
+];
+
+const nft101Cards = [
+  {
+    title: "What is an NFT?",
+    bg: "bg-blue-500",
+    image: "/assets/faq.png", // Replace with actual image paths
+  },
+  {
+    title: "How to buy an NFT",
+    bg: "bg-yellow-400",
+    image: "/assets/faq2.png",
+  },
+  {
+    title: "What is minting?",
+    bg: "bg-green-500",
+    image: "/assets/faq3.png",
+  },
+];
+
+export default function FeaturedSlider() {
+  return (
+    <div className="w-full bg-black py-6 pl-12 pr-6">
+      {/* Trending Collections Section */}
+      <h2 className="text-white text-3xl font-semibold mb-4">
+        Trending Collections
+      </h2>
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-10">
+        {trendingTokens.map((token, index) => (
+          <div
+            key={index}
+            className="bg-[#1a1a1a] rounded-xl p-3 pl-4 hover:scale-105 transition-transform"
+          >
+            <img
+              src={token.image}
+              alt={token.title}
+              className="w-full h-20 rounded-lg object-cover mb-2"
+            />
+            <h3 className="text-white text-sm font-semibold">{token.title}</h3>
+            <p className="text-green-400 text-xs">{token.sub}</p>
+          </div>
+        ))}
+      </div>
+
+      {/* NFT 101 Section */}
+      <h2 className="text-white text-3xl font-semibold mb-4">NFT 101</h2>
+      <p className="text-gray-400 text-sm mb-6">Learn about NFTs, Web3, and more.</p>
+      <div className="flex flex-wrap gap-4">
+        {nft101Cards.map((card, index) => (
+          <div
+            key={index}
+            className={`${card.bg} rounded-2xl p-4 w-full sm:w-[300px] h-[220px] flex flex-col justify-between hover:scale-105 transition-transform`}
+          >
+            <img
+              src={card.image}
+              alt={card.title}
+              className="w-full h-32 rounded-lg object-cover"
+            />
+            <h3 className="text-white text-lg font-semibold mt-2">{card.title}</h3>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

components/Footer.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { FaDiscord } from "react-icons/fa";
+import { BsFillMoonStarsFill, BsFillSunFill } from "react-icons/bs";
+import { MdSupport } from "react-icons/md";
+import { FiSettings } from "react-icons/fi";
+
+const Footer = () => {
+  return (
+<div className="w-full px-4 py-2 bg-[#0e0e0e] text-white flex flex-wrap justify-between items-center text-sm font-light border-t border-gray-800">
+      {/* Left Section */}
+      <div className="flex items-center gap-4 flex-wrap">
+        <span className="text-green-400">● Live</span>
+        <span className="flex items-center gap-1">⚡ Aggregating</span>
+        <span className="flex items-center gap-1">📡 Networks</span>
+        <a href="#" className="hover:underline">Terms of Service</a>
+        <a href="#" className="hover:underline">Privacy Policy</a>
+        <FaDiscord className="text-xl cursor-pointer hover:text-indigo-400" />
+      </div>
+
+      {/* Middle Section */}
+      <div className="flex items-center gap-4 flex-wrap">
+        <span>Ξ $3,528.59</span>
+        <span>⛽ 0.54 GWEI</span>
+        <div className="flex items-center gap-1 cursor-pointer hover:underline">
+          <MdSupport />
+          <span>Support</span>
+        </div>
+      </div>
+
+      {/* Right Section */}
+      <div className="flex items-center gap-2 flex-wrap">
+        <button className="p-1 hover:text-yellow-400">
+          <BsFillSunFill />
+        </button>
+        <button className="p-1 hover:text-purple-400">
+          <BsFillMoonStarsFill />
+        </button>
+        <span className="bg-gray-800 px-2 py-1 rounded-md">Collector</span>
+        <span className="text-gray-400">Pro</span>
+        <span className="text-gray-400 cursor-pointer hover:text-white">Crypto</span>
+        <span className="bg-gray-800 px-2 py-1 rounded-md">USD</span>
+        <FiSettings className="cursor-pointer hover:text-white" />
+      </div>
+    </div>
+  )
+}
+
+export default Footer

components/InfoBar.jsx

@@ -0,0 +1,120 @@
+"use client";
+import React, { useState } from "react";
+import Image from "next/image";
+
+const ServiceData = [
+  {
+    id: 1,
+    title: "Azuki Mizuki Anime Shorts",
+    creator: "MizukiDeployer",
+    status: "Minting",
+    mintPrice: "$4.96",
+    totalItems: "Open Edition",
+    itemsMinted: "15,065",
+    background: "/assets/hotstuff.png",
+  },
+  {
+    id: 2,
+    title: "Yokai Genesis NFT Drop",
+    creator: "YokaiLabs",
+    status: "Upcoming",
+    mintPrice: "$6.50",
+    totalItems: "3,000",
+    itemsMinted: "2,312",
+    background: "/assets/hotStuff2.png",
+  },
+  {
+    id: 3,
+    title: "Samurai Pixel Art",
+    creator: "RoninStudios",
+    status: "Live",
+    mintPrice: "$3.00",
+    totalItems: "10,000",
+    itemsMinted: "9,826",
+    background: "/assets/hotstuff3.png",
+  },
+];
+
+const InfoBar = () => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const slide = ServiceData[currentIndex];
+
+  const handlePrev = () => {
+    setCurrentIndex((prev) => (prev - 1 + ServiceData.length) % ServiceData.length);
+  };
+
+  const handleNext = () => {
+    setCurrentIndex((prev) => (prev + 1) % ServiceData.length);
+  };
+
+  return (
+    <div className="w-full h-[600px] flex justify-center items-center bg-black px-4">
+      <div className="relative w-full max-w-6xl h-full flex rounded-3xl overflow-hidden border-4 border-zinc-700">
+        {/* Background Image */}
+        <div
+          className="absolute inset-0 bg-cover bg-center transition-all duration-500"
+          style={{ backgroundImage: `url(${slide.background})` }}
+        />
+
+        {/* Overlay */}
+        <div className="absolute inset-0 bg-gradient-to-b from-black/30 to-black/80" />
+
+        {/* Left/Right Buttons */}
+        <button
+          onClick={handlePrev}
+          className="absolute left-4 top-1/2 transform -translate-y-1/2 z-20 bg-black/50 hover:bg-black/70 p-3 rounded-full text-white"
+        >
+          ◀
+        </button>
+        <button
+          onClick={handleNext}
+          className="absolute right-4 top-1/2 transform -translate-y-1/2 z-20 bg-black/50 hover:bg-black/70 p-3 rounded-full text-white"
+        >
+          ▶
+        </button>
+
+        {/* Content */}
+        <div className="relative z-10 flex h-full w-full">
+          {/* Left Side Text */}
+          <div className="flex-1 flex flex-col justify-start p-10 text-white">
+            {/* Title & Creator */}
+            <div className="space-y-2 mb-auto">
+              <h2 className="text-4xl font-bold">{slide.title}</h2>
+              <p className="text-sm text-gray-300">
+                By {slide.creator}
+                <span className="text-blue-400 ml-1">✔️</span>
+              </p>
+            </div>
+
+            {/* Bottom Floating Info Card */}
+            <div className="absolute bottom-8 left-8 bg-white/5 backdrop-blur-md border border-white/20 rounded-xl px-6 py-4 text-sm text-white w-[320px] shadow-lg">
+              <div className="flex justify-between pb-3 border-b border-white/20">
+                <div>
+                  <p className="text-gray-400 text-xs">STATUS</p>
+                  <p className="font-bold flex items-center gap-1">
+                    {slide.status}
+                    <span className="w-2 h-2 rounded-full bg-green-400 inline-block" />
+                  </p>
+                </div>
+                <div>
+                  <p className="text-gray-400 text-xs">MINT PRICE</p>
+                  <p className="font-bold">{slide.mintPrice}</p>
+                </div>
+                <div>
+                  <p className="text-gray-400 text-xs">TOTAL ITEMS</p>
+                  <p className="font-bold">{slide.totalItems}</p>
+                </div>
+              </div>
+              <div className="pt-3 flex justify-between">
+                <p className="text-white font-bold">ITEMS MINTED</p>
+                <p className="text-gray-400">{slide.itemsMinted}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InfoBar;