Skip to content

footer redesigned and stats card components created #581

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yusuftomilola merged 1 commit into from
Feb 26, 2026
+173 −21
Merged

footer redesigned and stats card components created #581

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
{
}
91 changes: 91 additions & 0 deletions frontend/components/dashboard/StatsCards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
"use client";

import React from "react";
import { Users, UserCheck, Building2, TrendingUp, LucideIcon } from "lucide-react";

export interface StatsCardsProps {
data?: {
totalMembers: number;
verifiedUsers: number;
activeWorkspaces: number;
occupancyRate: number;
};
}

interface StatCard {
label: string;
value: number | string;
icon: LucideIcon;
iconBgColor: string;
iconColor: string;
}

export function StatsCards({ data }: StatsCardsProps) {
const stats: StatCard[] = [
{
label: "Total Members",
value: data?.totalMembers ?? 0,
icon: Users,
iconBgColor: "bg-blue-50",
iconColor: "text-blue-600",
},
{
label: "Verified Users",
value: data?.verifiedUsers ?? 0,
icon: UserCheck,
iconBgColor: "bg-green-50",
iconColor: "text-green-600",
},
{
label: "Active Workspaces",
value: data?.activeWorkspaces ?? 0,
icon: Building2,
iconBgColor: "bg-purple-50",
iconColor: "text-purple-600",
},
{
label: "Occupancy Rate",
value: data?.occupancyRate !== undefined ? `${data.occupancyRate}%` : "0%",
icon: TrendingUp,
iconBgColor: "bg-amber-50",
iconColor: "text-amber-600",
},
];

return (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
{stats.map((stat) => (
<div
key={stat.label}
className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm"
>
{data === undefined ? (
<SkeletonCard />
) : (
<>
<div className="flex items-center gap-4 mb-4">
<div className={`${stat.iconBgColor} p-3 rounded-lg`}>
<stat.icon className={`w-6 h-6 ${stat.iconColor}`} />
</div>
<h4 className="text-gray-500 font-medium">{stat.label}</h4>
</div>
<p className="text-3xl font-bold text-gray-900">{stat.value}</p>
</>
)}
</div>
))}
</div>
);
}

function SkeletonCard() {
return (
<div className="animate-pulse">
<div className="flex items-center gap-4 mb-4">
<div className="bg-gray-200 p-3 rounded-lg w-12 h-12" />
<div className="h-4 bg-gray-200 rounded w-24" />
</div>
<div className="h-8 bg-gray-200 rounded w-16" />
</div>
);
}
101 changes: 80 additions & 21 deletions frontend/components/ui/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,29 +6,88 @@ const Footer = () => {

return (
<footer className="relative z-10 px-4 py-12 bg-gray-900">
<div className="max-w-6xl mx-auto text-center">
<div className="flex items-center justify-center space-x-3 mb-6">
<div className="bg-blue-600 p-2 rounded-xl">
<Building2 className="h-6 w-6 text-white" />
<div className="max-w-6xl mx-auto">
{/* 3-Column Layout */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
{/* Brand Column */}
<div>
<div className="flex items-center space-x-3 mb-4">
<div className="bg-blue-600 p-2 rounded-xl">
<Building2 className="h-6 w-6 text-white" />
</div>
<span className="text-xl font-bold text-white">ManageHub</span>
</div>
<p className="text-gray-400 text-sm">
Revolutionizing workspace management for the digital age
</p>
</div>

{/* Product Column */}
<div>
<h3 className="text-white font-semibold mb-4">Product</h3>
<ul className="space-y-2">
<li>
<Link
href="/dashboard"
className="text-gray-400 text-sm hover:text-white transition-colors"
>
Dashboard
</Link>
</li>
<li>
<Link
href="/workspaces"
className="text-gray-400 text-sm hover:text-white transition-colors"
>
Workspaces
</Link>
</li>
<li>
<Link
href="/analytics"
className="text-gray-400 text-sm hover:text-white transition-colors"
>
Analytics
</Link>
</li>
</ul>
</div>

{/* Legal Column */}
<div>
<h3 className="text-white font-semibold mb-4">Legal</h3>
<ul className="space-y-2">
<li>
<Link
href="/privacy"
className="text-gray-400 text-sm hover:text-white transition-colors"
>
Privacy Policy
</Link>
</li>
<li>
<Link
href="/terms"
className="text-gray-400 text-sm hover:text-white transition-colors"
>
Terms of Service
</Link>
</li>
<li>
<Link
href="/contact"
className="text-gray-400 text-sm hover:text-white transition-colors"
>
Contact
</Link>
</li>
</ul>
</div>
<span className="text-xl font-bold text-white">ManageHub</span>
</div>
<p className="text-gray-400 mb-6">
Revolutionizing workspace management for the digital age
</p>
<div className="flex justify-center space-x-8 text-sm text-gray-400">
<Link href="#" className="hover:text-white transition-colors">
Privacy Policy
</Link>
<Link href="#" className="hover:text-white transition-colors">
Terms of Service
</Link>
<Link href="#" className="hover:text-white transition-colors">
Contact Us
</Link>
</div>
<div className="mt-8 pt-8 border-t border-gray-800">
<p className="text-gray-500 text-sm">

{/* Copyright Line */}
<div className="pt-8 border-t border-gray-800">
<p className="text-gray-500 text-sm text-center">
© {currentYear} ManageHub. All rights reserved.
</p>
</div>
Expand Down