diff --git a/app/Analytics-Details/page.tsx b/app/Analytics-Details/page.tsx
new file mode 100644
index 0000000..901183d
--- /dev/null
+++ b/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: ,
+ },
+ {
+ link: "",
+ icon: ,
+ },
+ {
+ link: "",
+ icon: ,
+ },
+ {
+ link: "",
+ icon:
+ }
+ ]
+
+
+
+ return (
+
+
+
+
+
+
+ {/* Nav buttons */}
+
+
+
+
+
+
+ {/* Section content */}
+
+
+
+
DAO Voter
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{data.date}
+
{payload[0].value} users
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ } />
+
+
+
+
+
+ {data.map((card, index) => (
+
+ ))}
+
+
+ )
+}
\ No newline at end of file
diff --git a/components/analytics/AnalyticsSection.tsx b/components/analytics/AnalyticsSection.tsx
new file mode 100644
index 0000000..eb06690
--- /dev/null
+++ b/components/analytics/AnalyticsSection.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import { useState } from "react";
+import HomeSection from "./HomeSection";
+import AnalyticsDisplay from "./AnalyticsDisplay";
+import { CardProps } from "@/utils/interface";
+
+
+
+
+interface AnalyticsSectionProps {
+ data: CardProps[]
+}
+
+
+export default function AnalyticsSection({data}: AnalyticsSectionProps) {
+ const [displayedSection, setDisplayedSection] = useState("Home");
+
+
+
+ const renderDisplayedSection = () => {
+ switch (displayedSection) {
+ case "Home":
+ return ;
+ case "Analytics":
+ return ;
+ default:
+ return null;
+ }
+ };
+
+ return (
+
+ {/* Nav buttons */}
+
+
+
+
+
+
+ {/* Section content */}
+ {renderDisplayedSection()}
+
+ );
+}
diff --git a/components/analytics/HomeSection.tsx b/components/analytics/HomeSection.tsx
new file mode 100644
index 0000000..1afac7e
--- /dev/null
+++ b/components/analytics/HomeSection.tsx
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+export default function HomeSection () {
+ return (
+
+ Home
+
+ )
+}
\ No newline at end of file
diff --git a/components/analytics/ItemCard.tsx b/components/analytics/ItemCard.tsx
new file mode 100644
index 0000000..0f91c6e
--- /dev/null
+++ b/components/analytics/ItemCard.tsx
@@ -0,0 +1,51 @@
+import { formatDate } from "@/utils/DateFormatter";
+import { CardProps } from "@/utils/interface";
+import Image from "next/image";
+import { BiUser } from "react-icons/bi";
+import { BsDot } from "react-icons/bs";
+
+
+
+
+
+
+interface ItemcardProp {
+ data: CardProps
+}
+
+export default function ItemCard({ data }: ItemcardProp) {
+ return (
+
+
+
+
+
+
{data.participantCount}
+
+
+
+ {data.badgeText}
+
{data.title}
+
+
+
+
+
+
{formatDate(data.startTime)}
+
to {formatDate(data.endTime)}
+
+
+
+
+
+ {data.isLive ? "Live" : "Completed"}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {projectTags.map((tag, index) => (
+ {tag}
+ ))}
+
+
+
{projectDescription}
+
+
+ {socialLinks.map((link, index) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+