Improve the ui and add content to the dashboard

app/dashboard/page.tsx

@@ -1,17 +1,50 @@
-export default function Dashboard() {
+import { DashboardHeader } from "@/components/dashboard/header";
+import { StatCard } from "@/components/dashboard/stat-card";
+import { ActivityList } from "@/components/dashboard/activity-list";
+import { ProjectCard } from "@/components/dashboard/project-card";
+import { QuickActions } from "@/components/dashboard/quick-actions";
+
+import {
+  statsData,
+  activityData,
+  projects,
+  actions,
+} from "@/config/dashboard";
+
+export default function DashboardPage() {
   return (
-    <section className="mt-20 relative flex min-h-screen items-center justify-center overflow-hidden px-4 text-center">
-      <div className="relative z-10 mx-auto max-w-5xl">
-        <h1 className="text-4xl md:text-6xl font-bold leading-tight">
-          Dashboard For the Developers
-        </h1>
-
-        <p className="mt-4 md:mt-6 text-sm md:text-xl text-foreground/60 max-w-2xl mx-auto">
-          Welcome to the central hub of the 100 ReactJS Projects platform.
-          Explore curated projects, track your progress, and discover real-world
-          applications built with React and Next.js.
-        </p>
+    <div className="p-6 space-y-6">
+
+      <DashboardHeader />
+
+      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        {statsData.map((stat: any, i: number) => (
+          <StatCard key={i} {...stat} />
+        ))}
+      </div>
+
+      <div className="grid lg:grid-cols-3 gap-6">
+
+        <div className="lg:col-span-2 bg-card border rounded-xl p-5">
+          <h2 className="text-lg font-medium mb-4">Recent Activity</h2>
+          <ActivityList data={activityData} />
+        </div>
+
+        <div className="bg-card border rounded-xl p-5">
+          <h2 className="text-lg font-medium mb-4">Quick Actions</h2>
+          <QuickActions actions={actions} />
+        </div>
+      </div>
+
+      <div className="bg-card border rounded-xl p-5">
+        <h2 className="text-lg font-medium mb-4">Projects</h2>
+
+        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {projects.map((p: any, i: number) => (
+            <ProjectCard key={i} project={p} />
+          ))}
+        </div>
       </div>
-    </section>
+    </div>
   );
-}
+}

app/dashboard/quick-actions.tsx

@@ -0,0 +1,14 @@
+export function QuickActions({ actions }: any) {
+  return (
+    <div className="space-y-3">
+      {actions.map((a: string, i: number) => (
+        <button
+          key={i}
+          className="w-full text-left p-3 rounded-lg bg-muted hover:bg-accent transition text-sm"
+        >
+          {a}
+        </button>
+      ))}
+    </div>
+  );
+}

app/projects/page.tsx

@@ -1,30 +1,181 @@
-import ProjectGrid from "@/components/project/project-grid";
-import { AuroraText } from "@/components/utils/aurora-text";
-import { generateMetadata as getMetadata } from "@/config/meta";
-import { projectConfig } from "@/config/projects";
+"use client";
 
-export const metadata = getMetadata("/projects");
+import React from "react";
+import {
+  FileText,
+  Users,
+  DollarSign,
+  Activity,
+  Plus,
+  ArrowUpRight,
+  TrendingUp,
+  Clock,
+} from "lucide-react";
+import { motion } from "framer-motion";
 
-export default function Projects() {
+export default function DashboardPage() {
   return (
-    <section className="mt-20 relative flex min-h-screen items-center justify-center overflow-hidden px-4 text-center">
-      <div className="relative z-10 mx-auto max-w-5xl">
-        <h1 className="text-4xl md:text-7xl font-bold leading-tight">
-          100+{" "}
-          <AuroraText
-            colors={["#22d3ee", "#3b82f6", "#6366f1", "#a855f7", "#ec4899"]}
-          >
-            React JS
-          </AuroraText>{" "}
-          Projects
-        </h1>
-
-        <p className="mt-4 md:mt-6 text-sm md:text-xl text-foreground/60 max-w-2xl mx-auto">
-          {projectConfig.description}
-        </p>
-
-        <ProjectGrid />
+    <div className="p-6 space-y-6">
+      {/* Header */}
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+        <div>
+          <h1 className="text-3xl font-semibold tracking-tight">
+            Dashboard
+          </h1>
+          <p className="text-sm text-muted-foreground">
+            Overview of your platform performance and activity
+          </p>
+        </div>
+
+        <button className="flex items-center gap-2 bg-primary text-primary-foreground px-4 py-2 rounded-lg shadow hover:opacity-90 transition">
+          <Plus size={16} />
+          New Project
+        </button>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCard
+          title="Projects"
+          value="24"
+          change="+12%"
+          icon={<FileText size={18} />}
+        />
+        <StatCard
+          title="Users"
+          value="1,240"
+          change="+5%"
+          icon={<Users size={18} />}
+        />
+        <StatCard
+          title="Revenue"
+          value="$12.4K"
+          change="+18%"
+          icon={<DollarSign size={18} />}
+        />
+        <StatCard
+          title="Growth"
+          value="89%"
+          change="+3%"
+          icon={<TrendingUp size={18} />}
+        />
+      </div>
+
+      {/* Main Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Activity */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="lg:col-span-2 bg-card p-5 rounded-xl border shadow-sm"
+        >
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-lg font-medium">Recent Activity</h2>
+            <Clock size={16} className="text-muted-foreground" />
+          </div>
+
+          <div className="space-y-3">
+            {activityData.map((item, i) => (
+              <div
+                key={i}
+                className="flex items-center justify-between p-3 rounded-lg bg-muted hover:bg-accent transition cursor-pointer"
+              >
+                <div>
+                  <p className="text-sm">{item.title}</p>
+                  <span className="text-xs text-muted-foreground">
+                    {item.time}
+                  </span>
+                </div>
+                <ArrowUpRight size={16} />
+              </div>
+            ))}
+          </div>
+        </motion.div>
+
+        {/* Quick Actions */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="bg-card p-5 rounded-xl border shadow-sm"
+        >
+          <h2 className="text-lg font-medium mb-4">Quick Actions</h2>
+
+          <div className="space-y-3">
+            {actions.map((a, i) => (
+              <button
+                key={i}
+                className="w-full text-left p-3 rounded-lg bg-muted hover:bg-accent transition text-sm"
+              >
+                {a}
+              </button>
+            ))}
+          </div>
+        </motion.div>
+      </div>
+
+      {/* Projects */}
+      <div className="bg-card p-5 rounded-xl border shadow-sm">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-medium">Projects</h2>
+          <button className="text-sm text-primary hover:underline">
+            View all
+          </button>
+        </div>
+
+        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {projects.map((p, i) => (
+            <motion.div
+              key={i}
+              whileHover={{ scale: 1.03 }}
+              className="p-4 rounded-lg border bg-muted hover:bg-accent transition cursor-pointer"
+            >
+              <h3 className="font-medium">{p.name}</h3>
+              <p className="text-xs text-muted-foreground mt-1">
+                {p.desc}
+              </p>
+            </motion.div>
+          ))}
+        </div>
       </div>
-    </section>
+    </div>
   );
 }
+
+
+function StatCard({ title, value, change, icon }: any) {
+  return (
+    <motion.div
+      whileHover={{ scale: 1.02 }}
+      className="bg-card p-4 rounded-xl border shadow-sm flex flex-col gap-2"
+    >
+      <div className="flex items-center justify-between text-muted-foreground">
+        {icon}
+        <span className="text-xs text-green-500">{change}</span>
+      </div>
+
+      <h3 className="text-xl font-semibold">{value}</h3>
+      <p className="text-sm text-muted-foreground">{title}</p>
+    </motion.div>
+  );
+}
+
+/* Data */
+const activityData = [
+  { title: "New user registered", time: "2 min ago" },
+  { title: "Payment received", time: "10 min ago" },
+  { title: "Project updated", time: "1 hour ago" },
+  { title: "New project created", time: "3 hours ago" },
+];
+
+const actions = [
+  "Create Project",
+  "Invite User",
+  "Generate Report",
+  "View Analytics",
+];
+
+const projects = [
+  { name: "Admin Dashboard", desc: "Internal analytics panel" },
+  { name: "E-commerce App", desc: "Shopping platform UI" },
+  { name: "Portfolio Website", desc: "Personal branding site" },
+];

components/dashboards/activity-list.tsx

@@ -0,0 +1,17 @@
+export function ActivityList({ data }: any) {
+  return (
+    <div className="space-y-3">
+      {data.map((item: any, i: number) => (
+        <div
+          key={i}
+          className="p-3 rounded-lg bg-muted hover:bg-accent transition"
+        >
+          <p className="text-sm">{item.title}</p>
+          <span className="text-xs text-muted-foreground">
+            {item.time}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}

components/dashboards/header.tsx

@@ -0,0 +1,10 @@
+export function DashboardHeader() {
+  return (
+    <div>
+      <h1 className="text-2xl font-semibold">Dashboard</h1>
+      <p className="text-sm text-muted-foreground">
+        Welcome back! Here's what's happening.
+      </p>
+    </div>
+  );
+}

components/dashboards/project-card.tsx

@@ -0,0 +1,10 @@
+export function ProjectCard({ project }: any) {
+  return (
+    <div className="p-4 rounded-lg border bg-muted hover:bg-accent transition">
+      <h3 className="font-medium">{project.name}</h3>
+      <p className="text-xs text-muted-foreground">
+        {project.desc}
+      </p>
+    </div>
+  );
+}

components/dashboards/quick-actions.tsx

@@ -0,0 +1,14 @@
+export function QuickActions({ actions }: any) {
+  return (
+    <div className="space-y-3">
+      {actions.map((a: string, i: number) => (
+        <button
+          key={i}
+          className="w-full text-left p-3 rounded-lg bg-muted hover:bg-accent transition text-sm"
+        >
+          {a}
+        </button>
+      ))}
+    </div>
+  );
+}

components/dashboards/stat-card.tsx

@@ -0,0 +1,13 @@
+import { Card } from "../ui/card";
+
+export function StatCard({ title, value, change }: any) {
+  return (
+    <Card>
+      <div className="flex justify-between text-sm text-muted-foreground">
+        <span>{title}</span>
+        <span className="text-green-500">{change}</span>
+      </div>
+      <h2 className="text-xl font-semibold mt-2">{value}</h2>
+    </Card>
+  );
+}

config/dashboard.ts

@@ -0,0 +1,25 @@
+export const statsData = [
+  { title: "Projects", value: "24", change: "+12%" },
+  { title: "Users", value: "1,240", change: "+5%" },
+  { title: "Revenue", value: "$12.4K", change: "+18%" },
+  { title: "Growth", value: "89%", change: "+3%" },
+];
+
+export const activityData = [
+  { title: "New user registered", time: "2 min ago" },
+  { title: "Payment received", time: "10 min ago" },
+  { title: "Project updated", time: "1 hour ago" },
+];
+
+export const projects = [
+  { name: "Admin Dashboard", desc: "Analytics panel" },
+  { name: "E-commerce App", desc: "Shopping UI" },
+  { name: "Portfolio", desc: "Personal site" },
+];
+
+export const actions = [
+  "Create Project",
+  "Invite User",
+  "Generate Report",
+  "View Analytics",
+];