Implement Two Reusable Analytics Pages

app/Analytics-Details/page.tsx

@@ -0,0 +1,141 @@
+import AnalyticsChart from "@/components/analytics/AnalyticsChart";
+import UserNav from "@/components/analytics/UserNav";
+import UserStats from "@/components/analytics/UserStats";
+import { SocialLinks } from "@/utils/interface";
+import { BsDiscord, BsGlobe, BsTelegram, BsTwitterX } from "react-icons/bs";
+
+
+
+
+
+export default function Page() {
+
+
+    const projectTags: string[] = ["DAO", "NFT", "NFT marketplace"]
+
+    const projectDescription: string = "Need a marketplace for your infrastructure? This is the perfect..."
+
+    const socialLinks: SocialLinks[] = [
+        {
+            link: "",
+            icon: <BsGlobe size={20} />,
+        },
+        {
+            link: "",
+            icon: <BsDiscord size={20} />,
+        },
+        {
+            link: "",
+            icon: <BsTelegram size={20} />,
+        },
+        {
+            link: "",
+            icon: <BsTwitterX size={20} />
+        }
+    ]
+
+
+
+    return (
+        <div className="bg-[#111111] pb-10 font-satoshi  " >
+            <UserNav />
+            <UserStats
+                projectTags={projectTags}
+                projectDescription={projectDescription}
+                socialLinks={socialLinks}
+            />
+
+
+            <section className="w-full max-w-[1400px] mx-auto mt-[50px] px-4 md:px-0 ">
+                {/* Nav buttons */}
+                <div className="w-full flex items-center gap-10 border-b-[2px] border-[#988C8C4F] pb-2">
+                    <button
+                        className={`text-xl font-normal relative
+            text-[#988C8C]
+            before:content-['']
+            before:absolute
+            before:bottom-[-8px]
+            before:bg-[#E0FFB0]
+            before:h-[3px]
+            hover:before:w-full
+            before:transition-all
+            before:duration-200
+            before:ease-in-out
+    before:w-0}
+          `}
+                    >
+                        Home
+                    </button>
+
+                    <button
+                        className={`text-xl font-normal relative
+            text-[#988C8C]
+            before:content-['']
+            before:absolute
+            before:bottom-[-8px]
+            before:bg-[#E0FFB0]
+            before:h-[3px]
+            hover:before:w-full
+            before:transition-all
+            before:duration-200
+            before:ease-in-out before:w-0
+          `}
+                    >
+                        Analytics
+                    </button>
+                </div>
+
+                {/* Section content */}
+
+                <div className=" w-full  rounded-lg border-[#988C8C] border-[1px] mx-auto mt-[30px] h-[179px] bg-[url('/item-image.svg')] bg-no-repeat bg-center bg-cover flex items-center px-[3%] " >
+
+                    <h1 className="font-bold text-2xl md:text-[32px] text-[#ffffff] " >DAO Voter</h1>
+
+                </div>
+
+
+                <div className="w-full flex flex-col md:flex-row gap-10 justify-between items-start mt-[70px] " >
+
+
+                    <div className="w-full md:max-w-[190px] flex-col items-center md:items-start gap-5   " >
+                        <div className="flex flex-col items-center md:items-start gap-8 ">
+                            <h2 className="text-[#FFFFFF] text-2xl md:text-[32px] font-medium " >Participants</h2>
+                            <div className="flex items-center gap-4" >
+                                <div className="w-[85px] h-[85px] flex flex-col items-start justify-center gap-2 " >
+                                    <p className=" font-normal text-lg text-[#EBFFCB] " >Active</p>
+                                    <span className="border-[1px] border-[#988C8C] rounded-[10px] w-[55px] h-[55px] md:w-[85px] md:h-[50px] text-base md:text-[28px] font-medium text-[#EBFFCB] flex items-center justify-center " >543</span>
+
+                                </div>
+
+
+                                <div className="w-[85px] h-[85px] flex flex-col items-center justify-center gap-2 " >
+                                    <p className=" font-normal text-lg text-[#988C8C] " >Inactive</p>
+                                    <span className=" rounded-[10px] w-[55px] h-[55px] md:w-[85px] md:h-[50px] text-base md:text-[28px] font-medium text-[#988C8C] flex items-center justify-center " >543</span>
+
+                                </div>
+                            </div>
+
+                        </div>
+                        <p className="text-[#E0FFB0] font-normal text-2xl mt-[14px]  text-center md:text-left " >May 20 - May 31</p>
+                    </div>
+
+
+
+                    <div className="w-full max-w-[868px]  " >
+
+                        <AnalyticsChart/>
+                    </div>
+
+                </div>
+
+
+
+
+
+            </section>
+
+
+
+        </div>
+    )
+}

app/analytics-overview/page.tsx

@@ -0,0 +1,59 @@
+import AnalyticsSection from "@/components/analytics/AnalyticsSection";
+import { cardData } from "@/components/analytics/data";
+import UserNav from "@/components/analytics/UserNav";
+import UserStats from "@/components/analytics/UserStats";
+import { SocialLinks } from "@/utils/interface";
+import { BsDiscord, BsGlobe, BsTelegram, BsTwitterX } from "react-icons/bs";
+
+
+
+
+
+
+
+export default function Page() {
+
+
+    const projectTags: string[] = ["DAO", "NFT", "NFT marketplace"]
+
+    const projectDescription: string = "Need a marketplace for your infrastructure? This is the perfect..."
+
+    const socialLinks: SocialLinks[] = [
+        {
+            link: "",
+            icon: <BsGlobe size={20} />,
+        },
+        {
+            link: "",
+            icon: <BsDiscord size={20} />,
+        },
+        {
+            link: "",
+            icon: <BsTelegram size={20} />,
+        },
+        {
+            link: "",
+            icon: <BsTwitterX size={20} />
+        }
+    ]
+
+
+
+
+
+
+
+
+
+    return (
+        <div className="bg-[#111111] pb-5 font-satoshi  " >
+            <UserNav />
+            <UserStats
+                projectTags={projectTags}
+                projectDescription={projectDescription}
+                socialLinks={socialLinks}
+            />
+            <AnalyticsSection data={cardData} />
+        </div>
+    )
+}

app/page.tsx

@@ -1,5 +1,5 @@
-import { redirect } from "next/navigation";
-
-export default function Home() {
-  redirect("/onboard");
-}
+import { redirect } from "next/navigation";
+
+export default function Home() {
+  redirect("/onboard");
+}

components/analytics/AnalyticsChart.tsx

@@ -0,0 +1,96 @@
+"use client"
+
+import { useState } from "react"
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"
+
+const weeklyData = [
+  { day: "Sun", users: 150, date: "May 19" },
+  { day: "Mon", users: 780, date: "May 20" },
+  { day: "Tue", users: 420, date: "May 21" },
+  { day: "Wed", users: 950, date: "May 22" },
+  { day: "Thu", users: 600, date: "May 23" },
+  { day: "Fri", users: 725, date: "May 24" },
+  { day: "Sat", users: 580, date: "May 25" },
+]
+
+const monthlyData = [
+  { day: "Week 1", users: 450, date: "May 1-7" },
+  { day: "Week 2", users: 680, date: "May 8-14" },
+  { day: "Week 3", users: 820, date: "May 15-21" },
+  { day: "Week 4", users: 720, date: "May 22-28" },
+]
+
+const CustomTooltip = ({ active, payload, label }: any) => {
+  if (active && payload && payload.length) {
+    const data = payload[0].payload
+    return (
+      <div className="bg-gray-800 border border-gray-600 rounded-lg p-3 shadow-lg">
+        <div className="text-gray-300 text-sm font-medium mb-1">{data.date}</div>
+        <div className="text-white text-lg font-semibold">{payload[0].value} users</div>
+      </div>
+    )
+  }
+  return null
+}
+
+export default function AnalyticsChart() {
+  const [timeframe, setTimeframe] = useState("weekly")
+  const data = timeframe === "weekly" ? weeklyData : monthlyData
+
+  return (
+    <div className="w-full h-fit  p-3 md:p-6">
+      <div className="flex justify-end mb-6">
+        <select
+          value={timeframe}
+          onChange={(e) => setTimeframe(e.target.value)}
+          className="bg-transparent border border-gray-600 text-white rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
+        >
+          <option value="weekly" className="bg-gray-800 text-white">
+            Weekly
+          </option>
+          <option value="monthly" className="bg-gray-800 text-white">
+            Monthly
+          </option>
+        </select>
+      </div>
+
+      <div className="h-96">
+        <ResponsiveContainer width="100%" height="100%">
+          <AreaChart
+            data={data}
+            margin={{
+              top: 20,
+              bottom: 20,
+            }}
+          >
+            <defs>
+              <linearGradient id="userGradient" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stopColor="#22c55e" stopOpacity={0.8} />
+                <stop offset="100%" stopColor="#22c55e" stopOpacity={0.1} />
+              </linearGradient>
+            </defs>
+            <CartesianGrid strokeDasharray="3 3" stroke="#374151" strokeOpacity={0.3} />
+            <XAxis dataKey="day" axisLine={false} tickLine={false} tick={{ fill: "#9CA3AF", fontSize: 12 }} />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tick={{ fill: "#9CA3AF", fontSize: 12 }}
+              domain={[0, 1000]}
+              ticks={[200, 400, 600, 800, 1000]}
+            />
+            <Tooltip content={<CustomTooltip />} />
+            <Area
+              type="monotone"
+              dataKey="users"
+              stroke="#22c55e"
+              strokeWidth={3}
+              fill="url(#userGradient)"
+              dot={{ fill: "#22c55e", strokeWidth: 2, r: 4 }}
+              activeDot={{ r: 6, fill: "#22c55e", strokeWidth: 2, stroke: "#000" }}
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  )
+}

components/analytics/AnalyticsDisplay.tsx

@@ -0,0 +1,18 @@
+import { CardProps } from "@/utils/interface";
+import ItemCard from "./ItemCard";
+
+
+interface AnalyticsDisplayProps{
+    data: CardProps[]
+}
+
+export default function AnalyticsDisplay({data}: AnalyticsDisplayProps) {
+    return (
+        <div className=" grid grid-cols-1 md:grid-cols-2  gap-7 min-h-[30vh] place-items-center " >
+            {data.map((card, index) => (
+                <ItemCard key={index} data={card} />
+            ))}
+
+        </div>
+    )
+}