diff --git a/package-lock.json b/package-lock.json index 551e508..19eb73f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,11 @@ "name": "duelfi", "version": "0.1.0", "dependencies": { + "@fontsource/manrope": "^5.2.5", "next": "15.2.4", "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "react-icons": "^5.5.0" }, "devDependencies": { "@eslint/eslintrc": "^3", @@ -208,6 +210,15 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@fontsource/manrope": { + "version": "5.2.5", + "resolved": "https://registry.npmjs.org/@fontsource/manrope/-/manrope-5.2.5.tgz", + "integrity": "sha512-4mYUAhsuF8KoXseG8T9woWUc/foznUVluFtE6fCKAqe76WM3kmDNedaINWjzWB73+wly0duFvVpDBma3NXXT0g==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", @@ -4742,6 +4753,15 @@ "react": "^19.0.0" } }, + "node_modules/react-icons": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz", + "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 6763f02..2b38c8e 100644 --- a/package.json +++ b/package.json @@ -9,19 +9,21 @@ "lint": "next lint" }, "dependencies": { + "@fontsource/manrope": "^5.2.5", + "next": "15.2.4", "react": "^19.0.0", "react-dom": "^19.0.0", - "next": "15.2.4" + "react-icons": "^5.5.0" }, "devDependencies": { - "typescript": "^5", + "@eslint/eslintrc": "^3", + "@tailwindcss/postcss": "^4", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", - "@tailwindcss/postcss": "^4", - "tailwindcss": "^4", "eslint": "^9", "eslint-config-next": "15.2.4", - "@eslint/eslintrc": "^3" + "tailwindcss": "^4", + "typescript": "^5" } } diff --git a/public/duelfiassets/8Ball Game Cover Illustration.png b/public/duelfiassets/8Ball Game Cover Illustration.png new file mode 100644 index 0000000..db5a4ab Binary files /dev/null and b/public/duelfiassets/8Ball Game Cover Illustration.png differ diff --git a/public/duelfiassets/Air Hockey Game Cover Illustration.png b/public/duelfiassets/Air Hockey Game Cover Illustration.png new file mode 100644 index 0000000..b5568fd Binary files /dev/null and b/public/duelfiassets/Air Hockey Game Cover Illustration.png differ diff --git a/public/duelfiassets/Banner (3).png b/public/duelfiassets/Banner (3).png new file mode 100644 index 0000000..5a3b283 Binary files /dev/null and b/public/duelfiassets/Banner (3).png differ diff --git a/public/duelfiassets/Block Drop Game Cover Illustration.png b/public/duelfiassets/Block Drop Game Cover Illustration.png new file mode 100644 index 0000000..7c6d065 Binary files /dev/null and b/public/duelfiassets/Block Drop Game Cover Illustration.png differ diff --git a/public/duelfiassets/Block Drop Illustration.jpeg b/public/duelfiassets/Block Drop Illustration.jpeg new file mode 100644 index 0000000..fa2a031 Binary files /dev/null and b/public/duelfiassets/Block Drop Illustration.jpeg differ diff --git a/public/duelfiassets/Bomb Brawl Game Cover Illustration.png b/public/duelfiassets/Bomb Brawl Game Cover Illustration.png new file mode 100644 index 0000000..b79df3a Binary files /dev/null and b/public/duelfiassets/Bomb Brawl Game Cover Illustration.png differ diff --git a/public/duelfiassets/Bubble Blast Game Cover Illustration.png b/public/duelfiassets/Bubble Blast Game Cover Illustration.png new file mode 100644 index 0000000..13c9889 Binary files /dev/null and b/public/duelfiassets/Bubble Blast Game Cover Illustration.png differ diff --git a/public/duelfiassets/Click N Flap Game Cover.png b/public/duelfiassets/Click N Flap Game Cover.png new file mode 100644 index 0000000..4ee93bd Binary files /dev/null and b/public/duelfiassets/Click N Flap Game Cover.png differ diff --git a/public/duelfiassets/Galaxy Wars Game Cover Illustration.png b/public/duelfiassets/Galaxy Wars Game Cover Illustration.png new file mode 100644 index 0000000..e3cdd51 Binary files /dev/null and b/public/duelfiassets/Galaxy Wars Game Cover Illustration.png differ diff --git a/public/duelfiassets/Lobby (2).jpeg b/public/duelfiassets/Lobby (2).jpeg new file mode 100644 index 0000000..a2a056e Binary files /dev/null and b/public/duelfiassets/Lobby (2).jpeg differ diff --git a/public/duelfiassets/Lobby (3).jpeg b/public/duelfiassets/Lobby (3).jpeg new file mode 100644 index 0000000..aa42347 Binary files /dev/null and b/public/duelfiassets/Lobby (3).jpeg differ diff --git a/public/duelfiassets/Lobby Tetris Blank.jpeg b/public/duelfiassets/Lobby Tetris Blank.jpeg new file mode 100644 index 0000000..56096f3 Binary files /dev/null and b/public/duelfiassets/Lobby Tetris Blank.jpeg differ diff --git a/public/duelfiassets/Logo (4).png b/public/duelfiassets/Logo (4).png new file mode 100644 index 0000000..8549fb8 Binary files /dev/null and b/public/duelfiassets/Logo (4).png differ diff --git a/public/duelfiassets/Mascot (2).png b/public/duelfiassets/Mascot (2).png new file mode 100644 index 0000000..eb0063e Binary files /dev/null and b/public/duelfiassets/Mascot (2).png differ diff --git a/public/duelfiassets/PFP (1).png b/public/duelfiassets/PFP (1).png new file mode 100644 index 0000000..4768f1f Binary files /dev/null and b/public/duelfiassets/PFP (1).png differ diff --git a/public/duelfiassets/PFP no BG (1).png b/public/duelfiassets/PFP no BG (1).png new file mode 100644 index 0000000..63a63bd Binary files /dev/null and b/public/duelfiassets/PFP no BG (1).png differ diff --git a/public/duelfiassets/Pixel Muncher Game Cover Illustration.png b/public/duelfiassets/Pixel Muncher Game Cover Illustration.png new file mode 100644 index 0000000..f86c999 Binary files /dev/null and b/public/duelfiassets/Pixel Muncher Game Cover Illustration.png differ diff --git a/public/duelfiassets/Playing on Arcade Machine no BG.png b/public/duelfiassets/Playing on Arcade Machine no BG.png new file mode 100644 index 0000000..4d146ac Binary files /dev/null and b/public/duelfiassets/Playing on Arcade Machine no BG.png differ diff --git a/public/duelfiassets/Venom Trail Game Cover Illustration.png b/public/duelfiassets/Venom Trail Game Cover Illustration.png new file mode 100644 index 0000000..26fd3b0 Binary files /dev/null and b/public/duelfiassets/Venom Trail Game Cover Illustration.png differ diff --git a/public/duelfiassets/Wall Smash Game Cover Illustration.png b/public/duelfiassets/Wall Smash Game Cover Illustration.png new file mode 100644 index 0000000..5a090ac Binary files /dev/null and b/public/duelfiassets/Wall Smash Game Cover Illustration.png differ diff --git a/public/duelfiassets/avatar-01.png b/public/duelfiassets/avatar-01.png new file mode 100644 index 0000000..f92aa72 Binary files /dev/null and b/public/duelfiassets/avatar-01.png differ diff --git a/public/duelfiassets/candy.jpg b/public/duelfiassets/candy.jpg new file mode 100644 index 0000000..040ad87 Binary files /dev/null and b/public/duelfiassets/candy.jpg differ diff --git a/public/duelfiassets/comingsoon.jpg b/public/duelfiassets/comingsoon.jpg new file mode 100644 index 0000000..0595c23 Binary files /dev/null and b/public/duelfiassets/comingsoon.jpg differ diff --git a/public/duelfiassets/dice.png b/public/duelfiassets/dice.png new file mode 100644 index 0000000..d44fdc1 Binary files /dev/null and b/public/duelfiassets/dice.png differ diff --git a/public/duelfiassets/favicon.png b/public/duelfiassets/favicon.png new file mode 100644 index 0000000..63a63bd Binary files /dev/null and b/public/duelfiassets/favicon.png differ diff --git a/public/duelfiassets/https___meta-q.cdn.bubble.io_f1632235621602x236921993913165250_plugin_phantom.png b/public/duelfiassets/https___meta-q.cdn.bubble.io_f1632235621602x236921993913165250_plugin_phantom.png new file mode 100644 index 0000000..97f9516 Binary files /dev/null and b/public/duelfiassets/https___meta-q.cdn.bubble.io_f1632235621602x236921993913165250_plugin_phantom.png differ diff --git a/public/duelfiassets/logo.png b/public/duelfiassets/logo.png new file mode 100644 index 0000000..227f215 Binary files /dev/null and b/public/duelfiassets/logo.png differ diff --git a/public/duelfiassets/purse.png b/public/duelfiassets/purse.png new file mode 100644 index 0000000..90e5442 Binary files /dev/null and b/public/duelfiassets/purse.png differ diff --git a/public/duelfiassets/solana (1).png b/public/duelfiassets/solana (1).png new file mode 100644 index 0000000..c6e57e3 Binary files /dev/null and b/public/duelfiassets/solana (1).png differ diff --git a/public/duelfiassets/solana logo.png b/public/duelfiassets/solana logo.png new file mode 100644 index 0000000..028a9e8 Binary files /dev/null and b/public/duelfiassets/solana logo.png differ diff --git a/public/duelfiassets/solana-sol-logo.svg b/public/duelfiassets/solana-sol-logo.svg new file mode 100644 index 0000000..bd349af --- /dev/null +++ b/public/duelfiassets/solana-sol-logo.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/public/duelfiassets/solana.png b/public/duelfiassets/solana.png new file mode 100644 index 0000000..609f21d Binary files /dev/null and b/public/duelfiassets/solana.png differ diff --git a/public/duelfiassets/telegram (1).png b/public/duelfiassets/telegram (1).png new file mode 100644 index 0000000..26a338b Binary files /dev/null and b/public/duelfiassets/telegram (1).png differ diff --git a/public/duelfiassets/telegram.png b/public/duelfiassets/telegram.png new file mode 100644 index 0000000..231b3ff Binary files /dev/null and b/public/duelfiassets/telegram.png differ diff --git a/public/duelfiassets/tetris.webp b/public/duelfiassets/tetris.webp new file mode 100644 index 0000000..b5aa56b Binary files /dev/null and b/public/duelfiassets/tetris.webp differ diff --git a/public/duelfiassets/twitter.png b/public/duelfiassets/twitter.png new file mode 100644 index 0000000..21ba26e Binary files /dev/null and b/public/duelfiassets/twitter.png differ diff --git a/public/duelfiassets/win.png b/public/duelfiassets/win.png new file mode 100644 index 0000000..d81fd2f Binary files /dev/null and b/public/duelfiassets/win.png differ diff --git a/public/duelfiassets/xlogo.png b/public/duelfiassets/xlogo.png new file mode 100644 index 0000000..8ac5549 Binary files /dev/null and b/public/duelfiassets/xlogo.png differ diff --git a/src/app/globals.css b/src/app/globals.css index a2dc41e..c01270a 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,8 +1,12 @@ @import "tailwindcss"; +/* Import the Manrope font with different weights from Google Fonts */ +@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@400;600&display=swap'); + :root { - --background: #ffffff; - --foreground: #171717; + --background: rgb(22,22,22); + --foreground: #fffff; } @theme inline { @@ -14,7 +18,7 @@ @media (prefers-color-scheme: dark) { :root { - --background: #0a0a0a; + --background: rgb(22,22,22); --foreground: #ededed; } } @@ -22,5 +26,8 @@ body { background: var(--background); color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; + font-family: "Manrope", sans-serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; } diff --git a/src/app/page.tsx b/src/app/page.tsx index e68abe6..316ec3d 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,103 +1,12 @@ +import Footer from "@/components/Footer"; +import Header from "@/components/Header"; import Image from "next/image"; export default function Home() { return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - src/app/page.tsx - - . -
    2. -
  2. - Save and see your changes instantly. -
    3. -
- -
- - Vercel logomark - Deploy now - - - Read our docs - -
-
- +
+
+
); } diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..f0d2350 --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,73 @@ +"use client"; + +import Image from "next/image"; +import Link from "next/link"; + +export default function Footer() { + return ( + + ); +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..d55629d --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,175 @@ +"use client"; + +import Link from "next/link"; +import Image from "next/image"; +import { FaTelegram, FaXTwitter } from "react-icons/fa6"; +import { useState } from "react"; + +export default function Header() { + const [isDrawerOpen, setIsDrawerOpen] = useState(false); + + // Toggle the nav drawer + const toggleDrawer = () => { + setIsDrawerOpen(!isDrawerOpen); + }; + + return ( +
+
+ {/* Logo */} +
+ Logo +
+ + {/* Navigation Links (hidden on mobile, visible on md+) */} + + + {/* Spacer (for centering) */} +
+ + {/* Socials & Login (hidden on mobile, visible on md+) */} +
+ + Telegram + + + X (Twitter) + + + {/* Login Button */} + +
+ + {/* Mobile-only view (Logo & Login) */} +
+ {/* Hamburger Button */} + + +
+
+ + {/* Mobile Drawer */} + {isDrawerOpen && ( +
+
+ {/* Close button */} + + + {/* Mobile Navigation Links */} +
+ setIsDrawerOpen(false)} // Close drawer on link click + > + Whitepaper + + setIsDrawerOpen(false)} // Close drawer on link click + > + Support + + + {/* Socials */} + setIsDrawerOpen(false)} + > + + + setIsDrawerOpen(false)} + > + + +
+
+
+ )} +
+ ); +}