Redesign Staff landing page with professional styling

cgen-1ae9ec79b7ef4d7aa13588e21062908b

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 = [
+  const workspaceStats = [
-    { label: "Active Team Members", value: "142", color: "text-purple-400" },
+    {
-    { label: "Departments", value: "8", color: "text-purple-400" },
+      icon: Users,
-    { label: "Ongoing Projects", value: "47", color: "text-purple-400" },
+      label: "Team Members",
-    { label: "Completed Q1", value: "23", color: "text-purple-400" },
+      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 (
     <Layout>
       <div className="relative min-h-screen bg-black text-white overflow-hidden">
         {/* Animated gradient background */}
-        <div className="absolute inset-0 overflow-hidden">
+        <div className="absolute inset-0 overflow-hidden pointer-events-none">
-          <div className="absolute top-40 right-10 w-72 h-72 bg-purple-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob" />
+          <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-purple-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob" />
-          <div className="absolute top-1/3 left-10 w-72 h-72 bg-violet-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000" />
+          <div className="absolute top-1/3 right-1/4 w-96 h-96 bg-violet-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000" />
-          <div className="absolute bottom-40 left-1/2 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000" />
+          <div className="absolute bottom-1/4 left-1/2 w-96 h-96 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000" />
+          
+          {/* Grid background */}
+          <div
+            className="absolute inset-0 opacity-5"
+            style={{
+              backgroundImage:
+                'linear-gradient(rgba(139, 92, 246, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 92, 246, 0.1) 1px, transparent 1px)',
+              backgroundSize: '50px 50px',
+            }}
+          />
         </div>
 
         <div className="relative z-10">
           {/* Hero Section */}
-          <section className="container mx-auto max-w-6xl px-4 py-20 md:py-32">
+          <section className="container mx-auto max-w-6xl px-4 py-16 md:py-24">
-            <div className="text-center mb-12 animate-fade-in">
+            {/* Animated Logo */}
-              <Badge className="mb-4 bg-purple-500/20 text-purple-300 border-purple-500/30 hover:bg-purple-500/30">
+            <div className="flex justify-center mb-12 animate-fade-in">
-                <Shield className="w-3 h-3 mr-1" />
+              <div className="relative">
-                Secure Staff Portal
+                <div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-violet-500 rounded-full blur-2xl opacity-30 animate-pulse" />
-              </Badge>
+                <img
-              <h1 className="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-purple-300 via-violet-300 to-purple-400 bg-clip-text text-transparent">
+                  src="https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fc0414efd7af54ef4b821a05d469150d0?format=webp&width=400"
-                Staff Operations Hub
+                  alt="Staff Portal"
-              </h1>
+                  className="relative h-40 w-40 object-contain drop-shadow-2xl"
-              <p className="text-lg md:text-xl text-gray-300 max-w-2xl mx-auto mb-8">
+                />
-                Centralized portal for internal communications, resources, and team collaboration
-              </p>
-              <div className="flex flex-col sm:flex-row gap-4 justify-center">
-                <Button
-                  onClick={() => navigate("/staff/announcements")}
-                  className="bg-gradient-to-r from-purple-500 to-violet-500 hover:from-purple-600 hover:to-violet-600 text-white font-semibold group"
-                >
-                  Access Portal
-                  <ArrowRight className="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform" />
-                </Button>
               </div>
             </div>
 
-            {/* Stats Grid */}
+            {/* Badge */}
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-16">
+            <div className="flex justify-center mb-8 animate-fade-in animation-delay-100">
-              {statsCards.map((stat) => (
+              <Badge className="bg-purple-500/20 text-purple-300 border-purple-500/40 hover:bg-purple-500/30 px-4 py-2 text-sm">
-                <Card
+                <Shield className="w-3 h-3 mr-2" />
-                  key={stat.label}
+                Internal Operations Portal
-                  className="bg-purple-950/40 border-purple-500/20 hover:border-purple-500/40 transition-colors"
+              </Badge>
-                >
-                  <CardContent className="p-6 text-center">
-                    <div className={`text-3xl font-bold ${stat.color} mb-2`}>
-                      {stat.value}
-                    </div>
-                    <p className="text-sm text-gray-400">{stat.label}</p>
-                  </CardContent>
-                </Card>
-              ))}
             </div>
 
-            {/* Staff Resources Grid */}
+            {/* Main Heading */}
-            <div className="mb-16">
+            <div className="text-center mb-8 animate-fade-in animation-delay-200">
-              <h2 className="text-3xl font-bold mb-8 text-center">
+              <h1 className="text-6xl md:text-7xl font-bold mb-6 text-purple-100">
-                Quick Access Resources
+                The Staff Command Center
-              </h2>
+              </h1>
+              <p className="text-lg md:text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
+                Unified workspace for internal communications, team collaboration, and operational excellence. Manage projects, track performance, and connect with your team—all in one secure platform.
+              </p>
+            </div>
+
+            {/* CTA Button */}
+            <div className="flex justify-center mb-16 animate-fade-in animation-delay-300">
+              <Button
+                onClick={() => navigate("/staff/announcements")}
+                className="bg-gradient-to-r from-purple-500 to-violet-500 hover:from-purple-600 hover:to-violet-600 text-white font-semibold px-8 py-3 text-lg group hover-lift"
+              >
+                Access Portal
+                <ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
+              </Button>
+            </div>
+
+            {/* Stats Section */}
+            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-20 animate-fade-in animation-delay-400">
+              {workspaceStats.map((stat) => {
+                const Icon = stat.icon;
+                return (
+                  <Card
+                    key={stat.label}
+                    className="bg-gradient-to-br from-purple-950/50 to-violet-950/50 border-purple-500/20 hover:border-purple-500/40 hover:shadow-lg hover:shadow-purple-500/10 transition-all duration-300"
+                  >
+                    <CardContent className="p-6">
+                      <div className="flex items-start justify-between mb-4">
+                        <div>
+                          <p className="text-gray-400 text-sm font-medium mb-1">
+                            {stat.label}
+                          </p>
+                          <p className={`text-4xl font-bold ${stat.color}`}>
+                            {stat.value}
+                          </p>
+                        </div>
+                        <div className="p-2 rounded-lg bg-purple-500/20">
+                          <Icon className="w-5 h-5 text-purple-400" />
+                        </div>
+                      </div>
+                      <p className="text-xs text-gray-500">{stat.trend}</p>
+                    </CardContent>
+                  </Card>
+                );
+              })}
+            </div>
+
+            {/* Resources Section */}
+            <div className="mb-20 animate-fade-in animation-delay-500">
+              <div className="mb-12">
+                <h2 className="text-4xl md:text-5xl font-bold mb-4">
+                  Quick Access Resources
+                </h2>
+                <p className="text-gray-400 text-lg">
+                  Everything you need to manage operations, collaborate with your team, and stay informed
+                </p>
+              </div>
+
               <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                 {staffResources.map((resource) => {
                   const Icon = resource.icon;
                   return (
                     <Card
                       key={resource.title}
-                      className="group bg-purple-950/40 border-purple-500/20 hover:border-purple-400/40 transition-all hover:shadow-lg hover:shadow-purple-500/20 cursor-pointer overflow-hidden"
                       onClick={() => 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`}
                     >
-                      <CardHeader>
+                      <CardHeader className="pb-3">
-                        <div className={`w-12 h-12 rounded-lg bg-gradient-to-br ${resource.color} p-2.5 mb-3 group-hover:scale-110 transition-transform`}>
+                        <div className="flex items-start justify-between">
-                          <Icon className="w-full h-full text-white" />
+                          <div>
+                            <CardTitle className="text-white group-hover:text-purple-300 transition-colors">
+                              {resource.title}
+                            </CardTitle>
+                          </div>
+                          <div
+                            className={`p-3 rounded-lg bg-gradient-to-br ${resource.color} group-hover:scale-110 transition-transform duration-300`}
+                          >
+                            <Icon className="w-5 h-5 text-white" />
+                          </div>
                         </div>
-                        <CardTitle className="group-hover:text-purple-300 transition-colors">
-                          {resource.title}
-                        </CardTitle>
                       </CardHeader>
                       <CardContent>
-                        <p className="text-sm text-gray-400 group-hover:text-gray-300 transition-colors">
+                        <p className="text-sm text-gray-400 group-hover:text-gray-300 transition-colors leading-relaxed">
                           {resource.description}
                         </p>
+                        <div className="mt-4 flex items-center text-purple-400 text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity">
+                          Explore
+                          <ArrowRight className="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" />
+                        </div>
                       </CardContent>
                     </Card>
                   );
@@ -184,47 +276,76 @@ export default function Staff() {
             </div>
 
             {/* Features Section */}
-            <section className="bg-purple-950/30 border border-purple-500/20 rounded-xl p-8 md:p-12">
+            <div className="grid md:grid-cols-2 gap-8 mb-20 animate-fade-in animation-delay-600">
-              <h2 className="text-2xl md:text-3xl font-bold mb-8">
+              <div className="bg-gradient-to-br from-purple-950/40 to-violet-950/40 border border-purple-500/20 rounded-xl p-8 hover:border-purple-500/40 transition-colors">
-                Staff Portal Features
+                <div className="flex items-center gap-3 mb-6">
-              </h2>
+                  <div className="p-2 rounded-lg bg-purple-500/20">
-              <div className="grid md:grid-cols-2 gap-8">
+                    <MessageSquare className="w-6 h-6 text-purple-400" />
-                <div className="space-y-4">
+                  </div>
-                  <h3 className="font-semibold text-purple-300">Communication</h3>
+                  <h3 className="text-xl font-bold">Communication & Collaboration</h3>
-                  <ul className="space-y-2 text-gray-300 text-sm">
-                    <li className="flex items-start">
-                      <span className="inline-block w-1.5 h-1.5 rounded-full bg-purple-400 mr-3 mt-1.5 flex-shrink-0" />
-                      <span>Company-wide announcements and updates</span>
-                    </li>
-                    <li className="flex items-start">
-                      <span className="inline-block w-1.5 h-1.5 rounded-full bg-purple-400 mr-3 mt-1.5 flex-shrink-0" />
-                      <span>Department notifications</span>
-                    </li>
-                    <li className="flex items-start">
-                      <span className="inline-block w-1.5 h-1.5 rounded-full bg-purple-400 mr-3 mt-1.5 flex-shrink-0" />
-                      <span>Team collaboration tools</span>
-                    </li>
-                  </ul>
                 </div>
-                <div className="space-y-4">
+                <ul className="space-y-3">
-                  <h3 className="font-semibold text-purple-300">Resources</h3>
+                  {[
-                  <ul className="space-y-2 text-gray-300 text-sm">
+                    "Real-time company announcements",
-                    <li className="flex items-start">
+                    "Department-specific updates",
-                      <span className="inline-block w-1.5 h-1.5 rounded-full bg-purple-400 mr-3 mt-1.5 flex-shrink-0" />
+                    "Team collaboration workspace",
-                      <span>Internal documentation and guides</span>
+                    "Internal messaging system",
+                    "Event notifications",
+                  ].map((item) => (
+                    <li
+                      key={item}
+                      className="flex items-start text-gray-300 group"
+                    >
+                      <span className="inline-block w-1.5 h-1.5 rounded-full bg-purple-400 mr-3 mt-2 flex-shrink-0 group-hover:scale-125 transition-transform" />
+                      <span>{item}</span>
                     </li>
-                    <li className="flex items-start">
+                  ))}
-                      <span className="inline-block w-1.5 h-1.5 rounded-full bg-purple-400 mr-3 mt-1.5 flex-shrink-0" />
+                </ul>
-                      <span>Policies and procedures</span>
+              </div>
+
+              <div className="bg-gradient-to-br from-purple-950/40 to-violet-950/40 border border-purple-500/20 rounded-xl p-8 hover:border-purple-500/40 transition-colors">
+                <div className="flex items-center gap-3 mb-6">
+                  <div className="p-2 rounded-lg bg-purple-500/20">
+                    <Lock className="w-6 h-6 text-purple-400" />
+                  </div>
+                  <h3 className="text-xl font-bold">Resources & Governance</h3>
+                </div>
+                <ul className="space-y-3">
+                  {[
+                    "Comprehensive internal documentation",
+                    "Policies and procedures library",
+                    "Team handbook & guidelines",
+                    "Performance tracking tools",
+                    "Secure information sharing",
+                  ].map((item) => (
+                    <li
+                      key={item}
+                      className="flex items-start text-gray-300 group"
+                    >
+                      <span className="inline-block w-1.5 h-1.5 rounded-full bg-purple-400 mr-3 mt-2 flex-shrink-0 group-hover:scale-125 transition-transform" />
+                      <span>{item}</span>
                     </li>
-                    <li className="flex items-start">
+                  ))}
-                      <span className="inline-block w-1.5 h-1.5 rounded-full bg-purple-400 mr-3 mt-1.5 flex-shrink-0" />
+                </ul>
-                      <span>Learning and development materials</span>
+              </div>
-                    </li>
+            </div>
-                  </ul>
+
+            {/* Security Notice */}
+            <div className="bg-gradient-to-r from-purple-950/60 to-violet-950/60 border border-purple-500/30 rounded-xl p-8 animate-fade-in animation-delay-700">
+              <div className="flex items-start gap-4">
+                <div className="p-2 rounded-lg bg-purple-500/20 flex-shrink-0 mt-1">
+                  <Lock className="w-6 h-6 text-purple-400" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-bold text-purple-200 mb-2">
+                    Enterprise Security & Privacy
+                  </h3>
+                  <p className="text-gray-300 leading-relaxed">
+                    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.
+                  </p>
                 </div>
               </div>
-            </section>
+            </div>
           </section>
         </div>
       </div>