Redesign Staff landing page with professional styling
cgen-1ae9ec79b7ef4d7aa13588e21062908b
This commit is contained in:
Builder.io
parent
9744daf5ae
commit
89aa046bfe
1 changed files with 214 additions and 93 deletions
|
|
@ -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 (
|
||||
<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 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/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 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 inset-0 overflow-hidden pointer-events-none">
|
||||
<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 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-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">
|
||||
<div className="text-center mb-12 animate-fade-in">
|
||||
<Badge className="mb-4 bg-purple-500/20 text-purple-300 border-purple-500/30 hover:bg-purple-500/30">
|
||||
<Shield className="w-3 h-3 mr-1" />
|
||||
Secure Staff Portal
|
||||
</Badge>
|
||||
<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">
|
||||
Staff Operations Hub
|
||||
</h1>
|
||||
<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>
|
||||
<section className="container mx-auto max-w-6xl px-4 py-16 md:py-24">
|
||||
{/* Animated Logo */}
|
||||
<div className="flex justify-center mb-12 animate-fade-in">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-violet-500 rounded-full blur-2xl opacity-30 animate-pulse" />
|
||||
<img
|
||||
src="https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fc0414efd7af54ef4b821a05d469150d0?format=webp&width=400"
|
||||
alt="Staff Portal"
|
||||
className="relative h-40 w-40 object-contain drop-shadow-2xl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-16">
|
||||
{statsCards.map((stat) => (
|
||||
<Card
|
||||
key={stat.label}
|
||||
className="bg-purple-950/40 border-purple-500/20 hover:border-purple-500/40 transition-colors"
|
||||
>
|
||||
<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>
|
||||
))}
|
||||
{/* Badge */}
|
||||
<div className="flex justify-center mb-8 animate-fade-in animation-delay-100">
|
||||
<Badge className="bg-purple-500/20 text-purple-300 border-purple-500/40 hover:bg-purple-500/30 px-4 py-2 text-sm">
|
||||
<Shield className="w-3 h-3 mr-2" />
|
||||
Internal Operations Portal
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Staff Resources Grid */}
|
||||
<div className="mb-16">
|
||||
<h2 className="text-3xl font-bold mb-8 text-center">
|
||||
Quick Access Resources
|
||||
</h2>
|
||||
{/* Main Heading */}
|
||||
<div className="text-center mb-8 animate-fade-in animation-delay-200">
|
||||
<h1 className="text-6xl md:text-7xl font-bold mb-6 text-purple-100">
|
||||
The Staff Command Center
|
||||
</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>
|
||||
<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`}>
|
||||
<Icon className="w-full h-full text-white" />
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<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">
|
||||
<h2 className="text-2xl md:text-3xl font-bold mb-8">
|
||||
Staff Portal Features
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold text-purple-300">Communication</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 className="grid md:grid-cols-2 gap-8 mb-20 animate-fade-in animation-delay-600">
|
||||
<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">
|
||||
<MessageSquare className="w-6 h-6 text-purple-400" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold">Communication & Collaboration</h3>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold text-purple-300">Resources</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>Internal documentation and guides</span>
|
||||
<ul className="space-y-3">
|
||||
{[
|
||||
"Real-time company announcements",
|
||||
"Department-specific updates",
|
||||
"Team collaboration workspace",
|
||||
"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" />
|
||||
<span>Policies and procedures</span>
|
||||
))}
|
||||
</ul>
|
||||
</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" />
|
||||
<span>Learning and development materials</span>
|
||||
</li>
|
||||
</ul>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue