From 89aa046bfe34a0d06c160c2b564b50ce30241c8f Mon Sep 17 00:00:00 2001 From: "Builder.io" Date: Tue, 11 Nov 2025 04:30:41 +0000 Subject: [PATCH] Redesign Staff landing page with professional styling cgen-1ae9ec79b7ef4d7aa13588e21062908b --- client/pages/Staff.tsx | 307 ++++++++++++++++++++++++++++------------- 1 file changed, 214 insertions(+), 93 deletions(-) diff --git a/client/pages/Staff.tsx b/client/pages/Staff.tsx index 86a872a1..d64460ea 100644 --- a/client/pages/Staff.tsx +++ b/client/pages/Staff.tsx @@ -11,6 +11,10 @@ import { Target, ArrowRight, Shield, + Clock, + TrendingUp, + Zap, + Lock, } from "lucide-react"; import { useNavigate } from "react-router-dom"; import { useEffect, useState, useRef } from "react"; @@ -53,6 +57,7 @@ export default function Staff() { description: "Company updates, news, and important information", link: "/staff/announcements", color: "from-rose-500 to-pink-500", + lightBg: "bg-rose-500/10", }, { icon: BookOpen, @@ -60,6 +65,7 @@ export default function Staff() { description: "Internal documentation, guides, and best practices", link: "/staff/knowledge-base", color: "from-blue-500 to-cyan-500", + lightBg: "bg-blue-500/10", }, { icon: MessageSquare, @@ -67,6 +73,7 @@ export default function Staff() { description: "Policies, procedures, and team guidelines", link: "/staff/team-handbook", color: "from-green-500 to-emerald-500", + lightBg: "bg-green-500/10", }, { icon: Trophy, @@ -74,6 +81,7 @@ export default function Staff() { description: "Career development and performance tracking", link: "/staff/performance-reviews", color: "from-amber-500 to-orange-500", + lightBg: "bg-amber-500/10", }, { icon: Target, @@ -81,6 +89,7 @@ export default function Staff() { description: "Team projects and task management", link: "/staff/project-tracking", color: "from-violet-500 to-indigo-500", + lightBg: "bg-violet-500/10", }, { icon: Users, @@ -88,94 +97,177 @@ export default function Staff() { description: "Staff directory and team contacts", link: "/staff/knowledge-base", color: "from-teal-500 to-cyan-500", + lightBg: "bg-teal-500/10", }, ]; - const statsCards = [ - { label: "Active Team Members", value: "142", color: "text-purple-400" }, - { label: "Departments", value: "8", color: "text-purple-400" }, - { label: "Ongoing Projects", value: "47", color: "text-purple-400" }, - { label: "Completed Q1", value: "23", color: "text-purple-400" }, + const workspaceStats = [ + { + icon: Users, + label: "Team Members", + value: "142", + trend: "+8 this quarter", + color: "text-purple-300", + }, + { + icon: Clock, + label: "Ongoing Projects", + value: "47", + trend: "+12 this month", + color: "text-purple-300", + }, + { + icon: TrendingUp, + label: "Productivity Score", + value: "94%", + trend: "↑ 5% from last month", + color: "text-purple-300", + }, + { + icon: Zap, + label: "Active Teams", + value: "8", + trend: "All operational", + color: "text-purple-300", + }, ]; return (
{/* Animated gradient background */} -
-
-
-
+
+
+
+
+ + {/* Grid background */} +
{/* Hero Section */} -
-
- - - Secure Staff Portal - -

- Staff Operations Hub -

-

- Centralized portal for internal communications, resources, and team collaboration -

-
- +
+ {/* Animated Logo */} +
+
+
+ Staff Portal
- {/* Stats Grid */} -
- {statsCards.map((stat) => ( - - -
- {stat.value} -
-

{stat.label}

- - - ))} + {/* Badge */} +
+ + + Internal Operations Portal +
- {/* Staff Resources Grid */} -
-

- Quick Access Resources -

+ {/* Main Heading */} +
+

+ The Staff Command Center +

+

+ Unified workspace for internal communications, team collaboration, and operational excellence. Manage projects, track performance, and connect with your team—all in one secure platform. +

+
+ + {/* CTA Button */} +
+ +
+ + {/* Stats Section */} +
+ {workspaceStats.map((stat) => { + const Icon = stat.icon; + return ( + + +
+
+

+ {stat.label} +

+

+ {stat.value} +

+
+
+ +
+
+

{stat.trend}

+ + + ); + })} +
+ + {/* Resources Section */} +
+
+

+ Quick Access Resources +

+

+ Everything you need to manage operations, collaborate with your team, and stay informed +

+
+
{staffResources.map((resource) => { const Icon = resource.icon; return ( navigate(resource.link)} + className={`group cursor-pointer ${resource.lightBg} border-purple-500/20 hover:border-purple-400/50 transition-all duration-300 hover:shadow-xl hover:shadow-purple-500/20 hover:scale-105 overflow-hidden`} > - -
- + +
+
+ + {resource.title} + +
+
+ +
- - {resource.title} - -

+

{resource.description}

+
+ Explore + +
); @@ -184,47 +276,76 @@ export default function Staff() {
{/* Features Section */} -
-

- Staff Portal Features -

-
-
-

Communication

-
    -
  • - - Company-wide announcements and updates -
    • -
  • - - Department notifications -
    • -
  • - - Team collaboration tools -
    • -
+
+
+
+
+ +
+

Communication & Collaboration

-
-

Resources

-
    -
  • - - Internal documentation and guides +
      + {[ + "Real-time company announcements", + "Department-specific updates", + "Team collaboration workspace", + "Internal messaging system", + "Event notifications", + ].map((item) => ( +
    • + + {item}
      • -
    • - - Policies and procedures + ))} +
    +
+ +
+
+
+ +
+

Resources & Governance

+
+
    + {[ + "Comprehensive internal documentation", + "Policies and procedures library", + "Team handbook & guidelines", + "Performance tracking tools", + "Secure information sharing", + ].map((item) => ( +
  • + + {item}
    • -
  • - - Learning and development materials -
    • -
+ ))} + +
+
+ + {/* Security Notice */} +
+
+
+ +
+
+

+ Enterprise Security & Privacy +

+

+ All staff information is protected with enterprise-grade security. Access is restricted to authenticated team members only. Your data is encrypted, audited, and compliant with privacy regulations. +

-
+