diff --git a/app/globals.css b/app/globals.css index c551be0..8aebf82 100644 --- a/app/globals.css +++ b/app/globals.css @@ -3,37 +3,50 @@ @tailwind utilities; :root { - --background-color: #0d0d0d; - --text-color: #ffffff; + --background-color: #0d0d0d; + --text-color: #ffffff; } [data-theme="light"] { - --background-color: #ffffff; - --text-color: #000000; + --background-color: #ffffff; + --text-color: #000000; } body { - background-color: var(--background-color); - color: var(--text-color); - font-weight: 400; - transition: background-color 0.3s ease, color 0.3s ease; + background-color: var(--background-color); + color: var(--text-color); + font-weight: 400; + transition: background-color 0.3s ease, color 0.3s ease; } @media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } + :root { + --background: #0a0a0a; + --foreground: #ededed; + } } .taskProgressBar::-webkit-progress-bar { - background-color: #f0f0f0; - border-radius: 4px; + background-color: #f0f0f0; + border-radius: 4px; } .taskProgressBar::-webkit-progress-value { - background-color: #c4ff63; - border-radius: 4px; + background-color: #c4ff63; + border-radius: 4px; } .animate__animated.animate__zoomIn { - --animate-duration: 0.3s; + --animate-duration: 0.3s; +} +.nft-pattern { + background-image: url("/nft-guy.png"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; +} + +.dao-pattern { + background-image: url("/dao-guy.png"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; } diff --git a/components/dasboard-components/Campaigns.tsx b/components/dasboard-components/Campaigns.tsx new file mode 100644 index 0000000..5fa5b74 --- /dev/null +++ b/components/dasboard-components/Campaigns.tsx @@ -0,0 +1,102 @@ +import { Dot, User } from "lucide-react"; + +interface CampaignsProps { + campaigns: Campaign[]; +} + +interface Campaign { + id: string; + title: string; + startDate: string; + endDate: string; + owner: string; + activeCount: number; + icon: string; +} +interface CampaignCardProps { + campaign: Campaign; + onClick?: () => void; + otherBg?: string; +} + +const Campaigns = ({ campaigns }: CampaignsProps) => { + return ( +
+ {campaigns.map((campaign) => ( + + ))} +
+ ); +}; + +const CampaignCard = ({ campaign, otherBg }: CampaignCardProps) => { + return ( +
(location.href = `/dashboard/campaign-details`)} + > +
+
+
+
+ +
+ {" "} + + {campaign.activeCount} + +
+ +
+
+
+ +
+ Icon + + {campaign.owner} + +
+ +
+ +

+ {campaign.title} +

+
+
+
+
+
+
+

{campaign.startDate}

+

{campaign.endDate}

+
+
+ +
+ + Live +
+ +
+
+
+ ); +}; + +export default Campaigns; diff --git a/components/dasboard-components/Navbar.tsx b/components/dasboard-components/Navbar.tsx new file mode 100644 index 0000000..c9ba07c --- /dev/null +++ b/components/dasboard-components/Navbar.tsx @@ -0,0 +1,22 @@ +import { ChevronDown } from "lucide-react"; + +const Navbar = () => { + return ( +
+ +
+ +
+

Luciferess

+

0x742d...f44e

+
+ + +
+
+ ); +}; + +export default Navbar; diff --git a/components/dasboard-components/Sidebar.tsx b/components/dasboard-components/Sidebar.tsx new file mode 100644 index 0000000..6a5112c --- /dev/null +++ b/components/dasboard-components/Sidebar.tsx @@ -0,0 +1,25 @@ +import { ChartNoAxesCombined, House, Network } from "lucide-react"; + +const Sidebar = () => { + return ( +
+ +
+ Home +
+ + +
+ Campaigns +
+ + +
+ Analytics +
+ +
+ ); +}; + +export default Sidebar; diff --git a/components/layout/DashboardLayout.tsx b/components/layout/DashboardLayout.tsx new file mode 100644 index 0000000..961d172 --- /dev/null +++ b/components/layout/DashboardLayout.tsx @@ -0,0 +1,19 @@ +import { Outlet } from "react-router-dom"; +import Navbar from "../dasboard-components/Navbar"; +import Sidebar from "../dasboard-components/Sidebar"; + +const DashboardLayout = () => { + return ( + <> + +
+ +
+ +
+
+ + ); +}; + +export default DashboardLayout; diff --git a/components/pages/Dashboard.tsx b/components/pages/Dashboard.tsx new file mode 100644 index 0000000..d34efb4 --- /dev/null +++ b/components/pages/Dashboard.tsx @@ -0,0 +1,69 @@ +import Campaigns from "../dasboard-components/Campaigns"; + +const activeCampaigns = [ + { + id: "1", + title: "Early NFT Collector", + startDate: "May 20th, 5:02pm", + endDate: "to May 31, 9:07 pm", + owner: "Coiton", + activeCount: 14, + icon: "/coiton-logo.png", + }, + { + id: "2", + title: "DAO Voter", + startDate: "May 20th, 5:02pm", + endDate: "to May 31, 9:07 pm", + owner: "Layer3", + activeCount: 987, + icon: "/coiton-logo.png", + }, + { + id: "3", + title: "TestNet Explorer", + startDate: "May 20th, 5:02pm", + endDate: "to May 31, 9:07 pm", + owner: "Coiton", + activeCount: 14, + icon: "/coiton-logo.png", + }, + { + id: "4", + title: "Dao Voter", + startDate: "May 20th, 5:02pm", + endDate: "to May 31, 9:07 pm", + owner: "Layer3", + activeCount: 987, + icon: "/coiton-logo.png", + }, + { + id: "5", + title: "Early NFT Collector", + startDate: "May 20th, 5:02pm", + endDate: "to May 31, 9:07 pm", + owner: "Coiton", + activeCount: 14, + icon: "/coiton-logo.png", + }, + { + id: "6", + title: "Early NFT Collector", + startDate: "May 20th, 5:02pm", + endDate: "to May 31, 9:07 pm", + owner: "Coiton", + activeCount: 987, + icon: "/coiton-logo.png", + }, +]; +const Dashboard = () => { + return ( +
+

Campaigns

+

Trending campaigns

+ +
+ ); +}; + +export default Dashboard; diff --git a/package-lock.json b/package-lock.json index 038535d..b3d3874 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,11 +10,13 @@ "dependencies": { "@argent/invisible-sdk": "^1.0.0", "animate.css": "^4.1.1", + "lucide-react": "^0.511.0", "next": "15.2.3", "next-themes": "^0.4.4", "react": "^19.0.0", "react-dom": "^19.0.0", "react-icons": "^5.4.0", + "react-router-dom": "^7.6.1", "swiper": "^11.2.0" }, "devDependencies": { @@ -2352,6 +2354,15 @@ "simple-wcswidth": "^1.0.1" } }, + "node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/cookie-es": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-1.2.2.tgz", @@ -3582,6 +3593,15 @@ "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==" }, + "node_modules/lucide-react": { + "version": "0.511.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.511.0.tgz", + "integrity": "sha512-VK5a2ydJ7xm8GvBeKLS9mu1pVK6ucef9780JVUjw6bAjJL/QXnd4Y0p7SPeOUMC27YhzNCZvm5d/QX0Tp3rc0w==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/math-intrinsics": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", @@ -4556,6 +4576,44 @@ "react": "*" } }, + "node_modules/react-router": { + "version": "7.6.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.1.tgz", + "integrity": "sha512-hPJXXxHJZEsPFNVbtATH7+MMX43UDeOauz+EAU4cgqTn7ojdI9qQORqS8Z0qmDlL1TclO/6jLRYUEtbWidtdHQ==", + "license": "MIT", + "dependencies": { + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.6.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.1.tgz", + "integrity": "sha512-vxU7ei//UfPYQ3iZvHuO1D/5fX3/JOqhNTbRR+WjSBWxf9bIvpWK+ftjmdfJHzPOuMQKe2fiEdG+dZX6E8uUpA==", + "license": "MIT", + "dependencies": { + "react-router": "7.6.1" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index d2ebddf..cbda821 100644 --- a/package.json +++ b/package.json @@ -12,11 +12,13 @@ "dependencies": { "@argent/invisible-sdk": "^1.0.0", "animate.css": "^4.1.1", + "lucide-react": "^0.511.0", "next": "15.2.3", "next-themes": "^0.4.4", "react": "^19.0.0", "react-dom": "^19.0.0", "react-icons": "^5.4.0", + "react-router-dom": "^7.6.1", "swiper": "^11.2.0" }, "devDependencies": { diff --git a/public/coiton-logo.png b/public/coiton-logo.png new file mode 100644 index 0000000..ca7af7b Binary files /dev/null and b/public/coiton-logo.png differ diff --git a/public/memoji.svg b/public/memoji.svg new file mode 100644 index 0000000..48d9a62 --- /dev/null +++ b/public/memoji.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/nav-line.svg b/public/nav-line.svg new file mode 100644 index 0000000..e5f6f60 --- /dev/null +++ b/public/nav-line.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/navbar-icon.svg b/public/navbar-icon.svg new file mode 100644 index 0000000..52f01ed --- /dev/null +++ b/public/navbar-icon.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +