├── public
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── robots.txt
    ├── img
    │   ├── item-1.png
    │   ├── item-2.png
    │   ├── item-3.png
    │   ├── item-4.png
    │   ├── item-5.png
    │   ├── item-6.png
    │   ├── avatar-1.png
    │   ├── avatar-10.png
    │   ├── avatar-2.png
    │   ├── avatar-3.png
    │   ├── avatar-4.png
    │   ├── avatar-5.png
    │   ├── avatar-6.png
    │   ├── avatar-7.png
    │   ├── avatar-8.png
    │   ├── avatar-9.png
    │   ├── steps-1.png
    │   ├── steps-2.png
    │   └── steps-3.png
    ├── manifest.json
    └── index.html
├── postcss.config.js
├── src
    ├── index.css
    ├── index.js
    ├── App.js
    ├── data
    │   ├── item-nft.json
    │   └── creator.json
    └── Components
    │   ├── Community.js
    │   ├── Button.js
    │   ├── Footer.js
    │   ├── Collections.js
    │   ├── Navbar.js
    │   ├── Steps.js
    │   ├── Hero.js
    │   └── Creators.js
├── .gitignore
├── tailwind.config.js
├── README.md
└── package.json


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedddev/nft-landing-page/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedddev/nft-landing-page/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedddev/nft-landing-page/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/img/item-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedddev/nft-landing-page/HEAD/public/img/item-1.png


--------------------------------------------------------------------------------
/public/img/item-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedddev/nft-landing-page/HEAD/public/img/item-2.png


--------------------------------------------------------------------------------
/public/img/item-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedddev/nft-landing-page/HEAD/public/img/item-3.png


--------------------------------------------------------------------------------
/public/img/item-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedddev/nft-landing-page/HEAD/public/img/item-4.png


--------------------------------------------------------------------------------
/public/img/item-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedddev/nft-landing-page/HEAD/public/img/item-5.png


--------------------------------------------------------------------------------
/public/img/item-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedddev/nft-landing-page/HEAD/public/img/item-6.png


--------------------------------------------------------------------------------
/public/img/avatar-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedddev/nft-landing-page/HEAD/public/img/avatar-1.png


--------------------------------------------------------------------------------
/public/img/avatar-10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedddev/nft-landing-page/HEAD/public/img/avatar-10.png


--------------------------------------------------------------------------------
/public/img/avatar-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedddev/nft-landing-page/HEAD/public/img/avatar-2.png


--------------------------------------------------------------------------------
/public/img/avatar-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedddev/nft-landing-page/HEAD/public/img/avatar-3.png


--------------------------------------------------------------------------------
/public/img/avatar-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedddev/nft-landing-page/HEAD/public/img/avatar-4.png


--------------------------------------------------------------------------------
/public/img/avatar-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedddev/nft-landing-page/HEAD/public/img/avatar-5.png


--------------------------------------------------------------------------------
/public/img/avatar-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedddev/nft-landing-page/HEAD/public/img/avatar-6.png


--------------------------------------------------------------------------------
/public/img/avatar-7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedddev/nft-landing-page/HEAD/public/img/avatar-7.png


--------------------------------------------------------------------------------
/public/img/avatar-8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedddev/nft-landing-page/HEAD/public/img/avatar-8.png


--------------------------------------------------------------------------------
/public/img/avatar-9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedddev/nft-landing-page/HEAD/public/img/avatar-9.png


--------------------------------------------------------------------------------
/public/img/steps-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedddev/nft-landing-page/HEAD/public/img/steps-1.png


--------------------------------------------------------------------------------
/public/img/steps-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedddev/nft-landing-page/HEAD/public/img/steps-2.png


--------------------------------------------------------------------------------
/public/img/steps-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedddev/nft-landing-page/HEAD/public/img/steps-3.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 
5 | body {
6 |   background-color: #191919;
7 | }
8 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import "./index.css";
 4 | import App from "./App";
 5 | 
 6 | const root = ReactDOM.createRoot(document.getElementById("root"));
 7 | root.render(
 8 |   <React.StrictMode>
 9 |     <App />
10 |   </React.StrictMode>
11 | );
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: ["./src/**/*.{js,jsx,ts,tsx}"],
 4 |   theme: {
 5 |     extend: {
 6 |       fontFamily: {
 7 |         sans: ["Montserrat Alternates", "sans-serif"],
 8 |         primary: ["Cormorant Garamond", "serif"],
 9 |       },
10 |       colors: {
11 |         background: "#191919",
12 |         primary: "#2D4263",
13 |         secondary: "#C84B31",
14 |         tertiary: "#ECDBBA",
15 |       },
16 |     },
17 |   },
18 |   plugins: [],
19 | };
20 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 3D NFT Landing Page Collections.
 2 | 
 3 | [Demo Project](https://3d-nft.netlify.app/).
 4 | 
 5 | [Watch it on youtube](https://youtu.be/Oe7MWQ0-kfA)
 6 | 
 7 | Hi friends, today i hope we get a great day and this repo is a build 3D NFT Landing Page Collections with React JS and Tailwind CSS
 8 | 
 9 | [Figma File](https://www.figma.com/community/file/1121655354645544040)
10 | 
11 | Social Media : \
12 | [Instagram](https://www.instagram.com/bedddev/) \
13 | [Dribbble](https://dribbble.com/bedddev) \
14 | [Youtube](https://www.youtube.com/channel/UC_XQkWu_EPqam4vHdvh058A)
15 | 
16 | hope you guys like it\
17 | Thanks a lot
18 | 
19 | ![Thumbnail (1)](https://user-images.githubusercontent.com/78606852/175220220-10d433dc-a6cc-4380-a827-0a9da1bbfe74.png)
20 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import Navbar from "./Components/Navbar";
 2 | import Hero from "./Components/Hero";
 3 | import Collections from "./Components/Collections";
 4 | import Steps from "./Components/Steps";
 5 | import Creators from "./Components/Creators";
 6 | import Community from "./Components/Community";
 7 | import Footer from "./Components/Footer";
 8 | import AOS from "aos";
 9 | import "aos/dist/aos.css";
10 | import { useEffect } from "react";
11 | 
12 | function App() {
13 |   useEffect(() => {
14 |     AOS.init();
15 |     AOS.refresh();
16 |   });
17 | 
18 |   return (
19 |     <>
20 |       <Navbar />
21 |       <Hero />
22 |       <Collections />
23 |       <Steps />
24 |       <Creators />
25 |       <Community />
26 |       <Footer />
27 |     </>
28 |   );
29 | }
30 | 
31 | export default App;
32 | 


--------------------------------------------------------------------------------
/src/data/item-nft.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "id": 1,
 4 |     "image": "item-1.png",
 5 |     "title": "Knight Sword",
 6 |     "username": "santosox",
 7 |     "price": 3
 8 |   },
 9 |   {
10 |     "id": 2,
11 |     "image": "item-2.png",
12 |     "title": "Daft Punk",
13 |     "username": "punix",
14 |     "price": 2.34
15 |   },
16 |   {
17 |     "id": 3,
18 |     "image": "item-3.png",
19 |     "title": "Skater Girl",
20 |     "username": "inoino",
21 |     "price": 10.5
22 |   },
23 |   {
24 |     "id": 4,
25 |     "image": "item-4.png",
26 |     "title": "Grogu",
27 |     "username": "alexio",
28 |     "price": 20.5
29 |   },
30 |   {
31 |     "id": 5,
32 |     "image": "item-5.png",
33 |     "title": "Foodies",
34 |     "username": "animola",
35 |     "price": 7
36 |   },
37 |   {
38 |     "id": 6,
39 |     "image": "item-6.png",
40 |     "title": "Friends Kawaii",
41 |     "username": "kunai",
42 |     "price": 80
43 |   }
44 | ]
45 | 


--------------------------------------------------------------------------------
/src/Components/Community.js:
--------------------------------------------------------------------------------
 1 | import { FaDiscord } from "react-icons/fa";
 2 | export default function Community() {
 3 |   return (
 4 |     <>
 5 |       <div
 6 |         className="container mx-auto py-4 md:py-16 px-3 md:px-0 bg-secondary rounded-3xl flex flex-col items-center gap-6"
 7 |         data-aos="fade-up"
 8 |         data-aos-duration="2000"
 9 |       >
10 |         <h1 className="font-primary text-tertiary font-bold text-2xl md:text-6xl text-center">
11 |           Join Our Community
12 |         </h1>
13 |         <p className="text-center text-tertiary text-base md:text-xl">
14 |           Meet the company team, artist and collector for platform updates,
15 |           announcements, and more ...
16 |         </p>
17 |         <button className="bg-primary text-tertiary hover:bg-transparent hover:border-tertiary border-primary text-base md:text-xl px-6 py-3 border-2 rounded-full font-primary font-bold transition-all flex items-center gap-2">
18 |           <FaDiscord size={28} /> Launch Discord
19 |         </button>
20 |       </div>
21 |     </>
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/src/data/creator.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "image": "avatar-1.png",
 4 |     "name": "Cary Goldner",
 5 |     "value": 16548
 6 |   },
 7 |   {
 8 |     "image": "avatar-2.png",
 9 |     "name": "Gregg Prosacco V",
10 |     "value": 24507
11 |   },
12 |   {
13 |     "image": "avatar-3.png",
14 |     "name": "Angelina Koss",
15 |     "value": 91031
16 |   },
17 |   {
18 |     "image": "avatar-4.png",
19 |     "name": "Faith Mayert",
20 |     "value": 66800
21 |   },
22 |   {
23 |     "image": "avatar-5.png",
24 |     "name": "Saul Bashirian",
25 |     "value": 50587
26 |   },
27 |   {
28 |     "image": "avatar-6.png",
29 |     "name": "Pam Frami",
30 |     "value": 500
31 |   },
32 |   {
33 |     "image": "avatar-7.png",
34 |     "name": "Axio Sun",
35 |     "value": 80224
36 |   },
37 |   {
38 |     "image": "avatar-8.png",
39 |     "name": "Gloria Wolff MD",
40 |     "value": 29369
41 |   },
42 |   {
43 |     "image": "avatar-9.png",
44 |     "name": "Albert Trantow",
45 |     "value": 53808
46 |   },
47 |   {
48 |     "image": "avatar-10.png",
49 |     "name": "Alexis Mante",
50 |     "value": 20123
51 |   }
52 | ]
53 | 


--------------------------------------------------------------------------------
/src/Components/Button.js:
--------------------------------------------------------------------------------
 1 | export default function Button(props) {
 2 |   const { text, size, variant } = props;
 3 | 
 4 |   const sizeBtn = () => {
 5 |     if (size === "lg") {
 6 |       return "text-2xl px-6 py-3";
 7 |     } else {
 8 |       return "text-lg px-4 py-2";
 9 |     }
10 |   };
11 | 
12 |   const variantBtn = () => {
13 |     if (variant === "primary") {
14 |       return "bg-primary text-tertiary hover:bg-transparent hover:text-primary border-primary";
15 |     } else if (variant === "primary-outline") {
16 |       return "bg-tertiary text-primary hover:bg-primary hover:text-tertiary border-primary";
17 |     } else if (variant === "secondary") {
18 |       return "bg-transparent text-tertiary hover:bg-tertiary hover:text-primary border-tertiary";
19 |     } else {
20 |       return "bg-primary text-tertiary hover:bg-tertiary border-primary hover:text-primary";
21 |     }
22 |   };
23 | 
24 |   return (
25 |     <a
26 |       href="#x"
27 |       className={` ${sizeBtn()} ${variantBtn()} tracking-wider font-primary font-bold border-2 rounded-full transition-all`}
28 |     >
29 |       {text}
30 |     </a>
31 |   );
32 | }
33 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nft-landing-page",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@splinetool/react-spline": "^2.2.1",
 7 |     "@testing-library/jest-dom": "^5.16.4",
 8 |     "@testing-library/react": "^13.3.0",
 9 |     "@testing-library/user-event": "^13.5.0",
10 |     "aos": "^2.3.4",
11 |     "react": "^18.2.0",
12 |     "react-dom": "^18.2.0",
13 |     "react-fast-marquee": "^1.3.2",
14 |     "react-icons": "^4.4.0",
15 |     "react-scripts": "5.0.1",
16 |     "web-vitals": "^2.1.4"
17 |   },
18 |   "scripts": {
19 |     "start": "react-scripts start",
20 |     "build": "react-scripts build",
21 |     "test": "react-scripts test",
22 |     "eject": "react-scripts eject"
23 |   },
24 |   "eslintConfig": {
25 |     "extends": [
26 |       "react-app",
27 |       "react-app/jest"
28 |     ]
29 |   },
30 |   "browserslist": {
31 |     "production": [
32 |       ">0.2%",
33 |       "not dead",
34 |       "not op_mini all"
35 |     ],
36 |     "development": [
37 |       "last 1 chrome version",
38 |       "last 1 firefox version",
39 |       "last 1 safari version"
40 |     ]
41 |   },
42 |   "devDependencies": {
43 |     "autoprefixer": "^10.4.7",
44 |     "postcss": "^8.4.14",
45 |     "tailwindcss": "^3.1.3"
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/src/Components/Footer.js:
--------------------------------------------------------------------------------
 1 | import { FaArrowRight } from "react-icons/fa";
 2 | 
 3 | export default function Footer() {
 4 |   return (
 5 |     <>
 6 |       <div
 7 |         className="border-t-4 border-tertiary mt-16 py-10 text-tertiary"
 8 |         data-aos="fade-up"
 9 |         data-aos-duration="2000"
10 |       >
11 |         <div className="container mx-auto">
12 |           <div className="grid grid-col-2 md:grid-cols-5 gap-2 md:gap-6 text-center md:text-left">
13 |             <div className="col-span-2">
14 |               <a href="#x" className="text-5xl line-through font-bold">
15 |                 ED
16 |               </a>
17 |               <p className="mt-3 pr-5">
18 |                 The largest 3D NFT marketplace. Authentic and truly unique
19 |                 digital creation. Signed and issued by the creator. made
20 |                 possible by blockchain technology
21 |               </p>
22 |             </div>
23 |             <div>
24 |               <h2 className="font-primary font-bold text-2xl">Quick Links</h2>
25 |               <p className="mt-6">About</p>
26 |               <p>Blog</p>
27 |               <p>Press</p>
28 |             </div>
29 |             <div>
30 |               <h2 className="font-primary font-bold text-2xl">Resources</h2>
31 |               <p className="mt-6">Help Center</p>
32 |               <p>Community</p>
33 |               <p>Partners</p>
34 |             </div>
35 |             <div className="col-span-2 md:col-span-1 flex flex-col items-center md:items-start">
36 |               <h2 className="font-primary font-bold text-2xl">Subscribe</h2>
37 |               <button className="bg-transparent hover:bg-primary mt-6 text-tertiary border-tertiary hover:border-primary px-8 py-3 border-2 rounded-full font-semibold transition-all flex items-center gap-2">
38 |                 Get NFT Updates <FaArrowRight />
39 |               </button>
40 |             </div>
41 |           </div>
42 |         </div>
43 |       </div>
44 |     </>
45 |   );
46 | }
47 | 


--------------------------------------------------------------------------------
/src/Components/Collections.js:
--------------------------------------------------------------------------------
 1 | import Button from "./Button";
 2 | import { FaEthereum } from "react-icons/fa";
 3 | 
 4 | import data from "../data/item-nft.json";
 5 | 
 6 | export default function Collections() {
 7 |   return (
 8 |     <>
 9 |       <div
10 |         className="container mx-auto py-4 md:py-20 px-3 md:px-0"
11 |         data-aos="fade-up"
12 |         data-aos-duration="2000"
13 |       >
14 |         <div className="flex justify-between items-center">
15 |           <h1 className="font-primary text-tertiary font-bold text-3xl md:text-5xl">
16 |             Hot Drops
17 |           </h1>
18 |           <Button text="View More" variant="secondary" />
19 |         </div>
20 |         <div className="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-14 py-8">
21 |           {data.map((item) => {
22 |             return (
23 |               <div data-aos="fade-up" data-aos-duration="3000">
24 |                 <div className="border-2 md:border-4 bg-background rounded-2xl border-tertiary w-full p-3 flex flex-col gap-4 hover:scale-105 transition-all cursor-pointer">
25 |                   <img
26 |                     src={`/img/${item.image}`}
27 |                     alt=""
28 |                     className="w-full rounded-xl"
29 |                   />
30 |                   <div>
31 |                     <h1 className="font-primary text-tertiary font-bold text-xl md:text-3xl">
32 |                       {item.title}
33 |                     </h1>
34 |                     <p className="text-tertiary">@{item.username}</p>
35 |                   </div>
36 |                   <div className="flex justify-between items-center">
37 |                     <p className="text-tertiary font-bold">{item.price} ETH</p>
38 |                     <div className="bg-secondary p-2 rounded-full">
39 |                       <FaEthereum color="#ECDBBA" size="1rem" />
40 |                     </div>
41 |                   </div>
42 |                 </div>
43 |               </div>
44 |             );
45 |           })}
46 |         </div>
47 |       </div>
48 |     </>
49 |   );
50 | }
51 | 


--------------------------------------------------------------------------------
/src/Components/Navbar.js:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import { BiMenu, BiXCircle } from "react-icons/bi";
 3 | import Button from "./Button";
 4 | export default function Navbar() {
 5 |   const [active, setActive] = useState(true);
 6 | 
 7 |   return (
 8 |     <nav className="bg-tertiary px-2 sm:px-2 py-2.5">
 9 |       <div className="container flex flex-wrap justify-between items-center mx-auto">
10 |         <a href="#x" className="text-3xl font-bold line-through text-primary">
11 |           ED
12 |         </a>
13 |         <div className="flex md:order-2 md:hidden">
14 |           <button type="button" onClick={() => setActive(!active)}>
15 |             {active ? <BiMenu size={30} /> : <BiXCircle size={30} />}
16 |           </button>
17 |         </div>
18 |         <div
19 |           className={`${
20 |             active ? `hidden` : ``
21 |           } justify-between items-center w-full md:flex md:w-auto md:order-1`}
22 |         >
23 |           <ul className="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0  text-xl text-primary">
24 |             <li className="py-2 md:py-0">
25 |               <a
26 |                 href="#x"
27 |                 className="py-4 pr-6 pl-0 hover:opacity-80 transition-all"
28 |               >
29 |                 explore
30 |               </a>
31 |             </li>
32 |             <li className="py-2 md:py-0">
33 |               <a
34 |                 href="#x"
35 |                 className="py-4 pr-6 pl-0 hover:opacity-80 transition-all"
36 |               >
37 |                 resources
38 |               </a>
39 |             </li>
40 |             <li className="py-2 md:py-0">
41 |               <a
42 |                 href="#x"
43 |                 className="py-4 pr-6 pl-0 hover:opacity-80 transition-all"
44 |               >
45 |                 creators
46 |               </a>
47 |             </li>
48 |             <li className="py-2 md:py-0">
49 |               <a
50 |                 href="#x"
51 |                 className="py-4 pr-6 pl-0 hover:opacity-80 transition-all"
52 |               >
53 |                 <Button text="Connect Wallet" />
54 |               </a>
55 |             </li>
56 |           </ul>
57 |         </div>
58 |       </div>
59 |     </nav>
60 |   );
61 | }
62 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
29 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
30 |     <link
31 |       href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Montserrat+Alternates:wght@100;200;300;400;500;600;700;800&display=swap"
32 |       rel="stylesheet"
33 |     />
34 |   </head>
35 |   <body>
36 |     <noscript>You need to enable JavaScript to run this app.</noscript>
37 |     <div id="root"></div>
38 |     <!--
39 |       This HTML file is a template.
40 |       If you open it directly in the browser, you will see an empty page.
41 | 
42 |       You can add webfonts, meta tags, or analytics to this file.
43 |       The build step will place the bundled scripts into the <body> tag.
44 | 
45 |       To begin the development, run `npm start` or `yarn start`.
46 |       To create a production bundle, use `npm run build` or `yarn build`.
47 |     -->
48 |   </body>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/src/Components/Steps.js:
--------------------------------------------------------------------------------
 1 | export default function Steps() {
 2 |   return (
 3 |     <>
 4 |       <div
 5 |         className="container mx-auto py-10 md:py-20 px-3 md:px-0"
 6 |         data-aos="fade-up"
 7 |         data-aos-duration="2000"
 8 |       >
 9 |         <h1 className="font-primary text-tertiary font-bold text-3xl md:text-6xl text-center mb-0 md:mg-8">
10 |           Create and sell your NFTs
11 |         </h1>
12 |         <div className="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-14 py-8">
13 |           <div className="bg-primary text-tertiary text-center rounded-2xl border-tertiary w-full p-2 md:p-4 flex flex-col items-center gap-3 cursor-pointer hover:scale-105 transition-all">
14 |             <img src="/img/steps-1.png" alt="" className="w-3/4" />
15 |             <h1 className="text-2xl md:text-4xl font-primary font-bold">
16 |               Create Artwork
17 |             </h1>
18 |             <p className="text-sm md:text-lg">
19 |               Create your collection, Add social links, a description, profile &
20 |               banner images, and set a secondary sales fee
21 |             </p>
22 |           </div>
23 |           <div className="bg-primary text-tertiary text-center rounded-2xl border-tertiary w-full p-2 md:p-4 flex flex-col items-center gap-3 cursor-pointer hover:scale-105 transition-all">
24 |             <img src="/img/steps-2.png" alt="" className="w-3/4" />
25 |             <h1 className="text-2xl md:text-4xl font-primary font-bold">
26 |               Add your NFTs
27 |             </h1>
28 |             <p className="text-sm md:text-lg">
29 |               Upload your work, add a title and description, and customize your
30 |               NFTs with properties, stats, and unlockable content.
31 |             </p>
32 |           </div>
33 |           <div className="bg-primary text-tertiary text-center rounded-2xl border-tertiary w-full p-2 md:p-4 flex flex-col items-center gap-3 cursor-pointer hover:scale-105 transition-all col-span-2 md:col-span-1">
34 |             <img src="/img/steps-3.png" alt="" className="w-2/4 md:w-3/4" />
35 |             <h1 className="text-2xl md:text-4xl font-primary font-bold">
36 |               List them for sale
37 |             </h1>
38 |             <p className="text-sm md:text-lg">
39 |               Choose between auctions and declining-price listings. You choose
40 |               how you want to sell your NFTs, and we help you sell them!
41 |             </p>
42 |           </div>
43 |         </div>
44 |       </div>
45 |     </>
46 |   );
47 | }
48 | 


--------------------------------------------------------------------------------
/src/Components/Hero.js:
--------------------------------------------------------------------------------
 1 | import Button from "./Button";
 2 | import Spline from "@splinetool/react-spline";
 3 | 
 4 | export default function Hero() {
 5 |   return (
 6 |     <>
 7 |       <div className="bg-tertiary py-20 md:py-24">
 8 |         <div className="grid grid-cols-1 md:grid-cols-2 container mx-auto">
 9 |           <div
10 |             className="flex flex-col gap-8 text-center items-center md:text-left md:items-start"
11 |             data-aos="fade-up"
12 |             data-aos-duration="2000"
13 |           >
14 |             <h1 className="text-5xl text-center md:text-left md:text-8xl font-primary font-semibold text-primary">
15 |               Discover{" "}
16 |               <span className="text-secondary underline decoration-solid">
17 |                 Rare 3D Collections
18 |               </span>{" "}
19 |               in the{" "}
20 |               <span className="text-secondary underline decoration-solid">
21 |                 World
22 |               </span>
23 |             </h1>
24 |             <p className="text-primary md:text-xl">
25 |               The largest 3D NFT marketplace authentic and truly unique digital
26 |               creation. Create yout own NFT dream gallery
27 |             </p>
28 |             <div className="flex justify-between w-3/4">
29 |               <div className="text-primary text-center">
30 |                 <h1 className=" text-xl md:text-3xl font-semibold">$278M</h1>
31 |                 <p className="text-sm md:text-base">Trading Volume</p>
32 |               </div>
33 |               <div className="text-primary text-center">
34 |                 <h1 className=" text-xl md:text-3xl font-semibold">300K</h1>
35 |                 <p className="text-sm md:text-base">Art Work</p>
36 |               </div>
37 |               <div className="text-primary text-center">
38 |                 <h1 className=" text-xl md:text-3xl font-semibold">1.8M</h1>
39 |                 <p className="text-sm md:text-base">Total Users</p>
40 |               </div>
41 |             </div>
42 |             <div>
43 |               <Button text="Join Now" size="lg" variant="primary-outline" />
44 |             </div>
45 |           </div>
46 |           <div
47 |             className="hidden md:block"
48 |             data-aos="fade-up"
49 |             data-aos-duration="3000"
50 |           >
51 |             <Spline
52 |               scene="https://prod.spline.design/Lvazvm6W3wlOASSk/scene.splinecode"
53 |               className="cursor-pointer"
54 |             />
55 |           </div>
56 |         </div>
57 |       </div>
58 |     </>
59 |   );
60 | }
61 | 


--------------------------------------------------------------------------------
/src/Components/Creators.js:
--------------------------------------------------------------------------------
 1 | import { FaEthereum } from "react-icons/fa";
 2 | import React from "react";
 3 | import Marquee from "react-fast-marquee";
 4 | import data from "../data/creator.json";
 5 | export default function Creators() {
 6 |   return (
 7 |     <div className="py-10 md:py-20" data-aos="fade-up" data-aos-duration="2000">
 8 |       <h1 className="font-primary text-center text-tertiary font-bold text-3xl md:text-6xl">
 9 |         Top Creators
10 |       </h1>
11 |       <Marquee
12 |         pauseOnHover={true}
13 |         gradient={false}
14 |         className="mt-5 md:mt-10 py-4"
15 |       >
16 |         {data.map((item) => {
17 |           return (
18 |             <div className="flex items-center gap-3  mr-4 md:mr-12 cursor-pointer hover:scale-105 transition-all">
19 |               <img
20 |                 src={`/img/${item.image}`}
21 |                 alt=""
22 |                 className="rounded-full w-1/4 md:w-auto"
23 |               />
24 |               <div className="text-tertiary">
25 |                 <p className="font-primary text-lg md:text-2xl font-semibold">
26 |                   {item.name}
27 |                 </p>
28 |                 <div className="flex items-center gap-2">
29 |                   <div className="bg-secondary p-1 md:p-2 mt-1 rounded-full">
30 |                     <FaEthereum color="#ECDBBA" size="1rem" />
31 |                   </div>
32 |                   <p className="text-xs md:text-base">{item.value}</p>
33 |                 </div>
34 |               </div>
35 |             </div>
36 |           );
37 |         })}
38 |       </Marquee>
39 |       <Marquee
40 |         pauseOnHover={true}
41 |         gradient={false}
42 |         direction="right"
43 |         className="mt-0 md:mt-10 py-4"
44 |       >
45 |         {data.map((item) => {
46 |           return (
47 |             <div className="flex items-center gap-3 mr-4 md:mr-12 cursor-pointer hover:scale-105 transition-all">
48 |               <img
49 |                 src={`/img/${item.image}`}
50 |                 alt=""
51 |                 className="rounded-full w-1/4 md:w-auto"
52 |               />
53 |               <div className="text-tertiary">
54 |                 <p className="font-primary text-lg md:text-2xl font-semibold">
55 |                   {item.name}
56 |                 </p>
57 |                 <div className="flex items-center gap-2">
58 |                   <div className="bg-secondary p-1 md:p-2 mt-1 rounded-full">
59 |                     <FaEthereum color="#ECDBBA" size="1rem" />
60 |                   </div>
61 |                   <p className="text-xs md:text-base">{item.value}</p>
62 |                 </div>
63 |               </div>
64 |             </div>
65 |           );
66 |         })}
67 |       </Marquee>
68 |     </div>
69 |   );
70 | }
71 | 


--------------------------------------------------------------------------------