Fix 51

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;
 }

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 (
+        <div className="w-full grid grid-cols-2 gap-6 mt-8">
+            {campaigns.map((campaign) => (
+                <CampaignCard
+                    key={campaign.id}
+                    campaign={campaign}
+                    otherBg={Number(campaign.id) % 2 == 0 ? "dao-pattern" : ""}
+                />
+            ))}
+        </div>
+    );
+};
+
+const CampaignCard = ({ campaign, otherBg }: CampaignCardProps) => {
+    return (
+        <div
+            className="w-full border rounded flex flex-col"
+            onClick={() => (location.href = `/dashboard/campaign-details`)}
+        >
+            <div
+                className={
+                    !otherBg
+                        ? `h-64 nft-pattern bg-cover bg-center bg-no-repeat rounded`
+                        : `h-64 bg-cover bg-center bg-no-repeat rounded ${otherBg}`
+                }
+            >
+                <div className="bg-black/50 h-full p-4">
+                    <div className="flex flex-col justify-between h-full">
+                        <div className="flex justify-end">
+                            <span className="rounded-full bg-[#444444] border inline-block py-1 px-2">
+                                <div className="flex space-x-2">
+                                    <User />{" "}
+                                    <span className="text-sm">
+                                        {campaign.activeCount}
+                                    </span>
+                                </div>
+                            </span>
+                        </div>
+                        <div className="flex flex-col space-y-3 ">
+                            <div>
+                                <span className="rounded-full bg-[#444444] border inline-block py-1 px-2">
+                                    <div className="flex space-x-2">
+                                        <img
+                                            src={campaign.icon}
+                                            alt="Icon"
+                                            className="w-4 h-4"
+                                        />
+                                        <span className="text-sm">
+                                            {campaign.owner}
+                                        </span>
+                                    </div>
+                                </span>
+                            </div>
+
+                            <p className="text-2xl font-bold">
+                                {campaign.title}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className="py-6 px-4 flex bg-[#1E1E1E] justify-between items-center">
+                <div>
+                    <p className="">{campaign.startDate}</p>
+                    <p className="text-sm text-[#988C8C]">{campaign.endDate}</p>
+                </div>
+                <div>
+                    <span className="rounded-full bg-white border inline-block py-1 px-2">
+                        <div className="flex items-center">
+                            <Dot color="#8BB151" />
+                            <span className="text-sm text-[#8BB151]">Live</span>
+                        </div>
+                    </span>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Campaigns;

components/dasboard-components/Navbar.tsx

@@ -0,0 +1,22 @@
+import { ChevronDown } from "lucide-react";
+
+const Navbar = () => {
+    return (
+        <div className="py-2 px-8 flex justify-between bg-[#232222] border-b border-b-[#988C8C]">
+            <img src="/navbar-icon.svg" alt="" className="block" />
+            <div className="flex space-x-3 items-center">
+                <img src="/nav-line.svg" alt="" className="block" />
+                <div>
+                    <p className="mb-2">Luciferess</p>
+                    <p className="text-[#988C8C]">0x742d...f44e</p>
+                </div>
+                <button className="block">
+                    <ChevronDown />
+                </button>
+                <img src="/memoji.svg" alt="" className="block" />
+            </div>
+        </div>
+    );
+};
+
+export default Navbar;

components/dasboard-components/Sidebar.tsx

@@ -0,0 +1,25 @@
+import { ChartNoAxesCombined, House, Network } from "lucide-react";
+
+const Sidebar = () => {
+    return (
+        <div className="min-h-screen bg-[#232222] w-[10%] pt-[2%] flex flex-col">
+            <a href="/" className="w-full block py-3 mb-15 text-center">
+                <div className="flex justify-center space-x-2">
+                    <House /> <span>Home</span>
+                </div>
+            </a>
+            <a href="/" className="w-full block py-3 mb-15 text-center">
+                <div className="flex justify-center space-x-2">
+                    <Network /> <span>Campaigns</span>
+                </div>
+            </a>
+            <a href="/" className="w-full block py-3 mb-15 text-center">
+                <div className="flex justify-center space-x-2">
+                    <ChartNoAxesCombined /> <span>Analytics</span>
+                </div>
+            </a>
+        </div>
+    );
+};
+
+export default Sidebar;

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 (
+        <>
+            <Navbar />
+            <div className="min-h-screen flex">
+                <Sidebar />
+                <div className="w-full">
+                    <Outlet />
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default DashboardLayout;

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 (
+        <div className="p-12 bg-black">
+            <h1 className="text-[#EBFFCB] text-[40px]">Campaigns</h1>
+            <h3 className="text-2xl mt-12">Trending campaigns</h3>
+            <Campaigns campaigns={activeCampaigns} />
+        </div>
+    );
+};
+
+export default Dashboard;