AeThex-Corporation/aethex-forge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Create Staff Team Handbook page with benefits and policies

Browse source 
cgen-11a93e286526475b8c8af096fedec14c
This commit is contained in:
Builder.io 2025-11-10 19:28:54 +00:00
parent 3795c3ad0e
commit ec29ee2621
1 changed files with 231 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

231
client/pages/staff/StaffTeamHandbook.tsx Normal file
View file

@ -0,0 +1,231 @@
import Layout from "@/components/Layout";
import SEO from "@/components/SEO";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
Heart,
DollarSign,
Calendar,
MapPin,
Users,
Shield,
Zap,
Award,
} from "lucide-react";
interface HandbookSection {
id: string;
title: string;
icon: React.ReactNode;
content: string;
subsections: string[];
}
const sections: HandbookSection[] = [
{
id: "1",
title: "Benefits & Compensation",
icon: <Heart className="h-6 w-6" />,
content: "Comprehensive benefits package including health, dental, vision",
subsections: [
"Health Insurance",
"Retirement Plans",
"Stock Options",
"Flexible PTO",
],
},
{
id: "2",
title: "Company Policies",
icon: <Shield className="h-6 w-6" />,
content: "Core policies governing workplace conduct and expectations",
subsections: [
"Code of Conduct",
"Harassment Policy",
"Confidentiality",
"Data Security",
],
},
{
id: "3",
title: "Time Off & Leave",
icon: <Calendar className="h-6 w-6" />,
content: "Vacation, sick leave, parental leave, and special circumstances",
subsections: [
"Paid Time Off",
"Sick Leave",
"Parental Leave",
"Sabbatical",
],
},
{
id: "4",
title: "Remote Work & Flexibility",
icon: <MapPin className="h-6 w-6" />,
content: "Work from home policies, office hours, and location flexibility",
subsections: [
"WFH Policy",
"Core Hours",
"Office Access",
"Equipment",
],
},
{
id: "5",
title: "Professional Development",
icon: <Zap className="h-6 w-6" />,
content: "Learning opportunities, training budgets, and career growth",
subsections: [
"Training Budget",
"Conference Attendance",
"Internal Training",
"Mentorship",
],
},
{
id: "6",
title: "Recognition & Awards",
icon: <Award className="h-6 w-6" />,
content: "Employee recognition programs and performance incentives",
subsections: [
"Spot Bonuses",
"Team Awards",
"Anniversary Recognition",
"Excellence Awards",
],
},
];
export default function StaffTeamHandbook() {
return (
<Layout>
<SEO
title="Team Handbook"
description="AeThex team handbook, policies, and benefits"
/>
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
{/* Background effects */}
<div className="absolute inset-0 opacity-30">
<div className="absolute top-20 left-10 w-96 h-96 bg-blue-600 rounded-full mix-blend-multiply filter blur-3xl animate-pulse" />
<div className="absolute bottom-20 right-10 w-96 h-96 bg-indigo-600 rounded-full mix-blend-multiply filter blur-3xl animate-pulse" />
</div>
<div className="relative z-10">
{/* Header */}
<div className="container mx-auto max-w-6xl px-4 py-16">
<div className="flex items-center gap-3 mb-6">
<div className="p-3 rounded-lg bg-blue-500/20 border border-blue-500/30">
<Users className="h-6 w-6 text-blue-400" />
</div>
<div>
<h1 className="text-4xl font-bold text-blue-100">
Team Handbook
</h1>
<p className="text-blue-200/70">
Benefits, policies, and team culture
</p>
</div>
</div>
{/* Quick Stats */}
<div className="grid md:grid-cols-4 gap-4 mb-12">
<Card className="bg-blue-950/30 border-blue-500/30">
<CardContent className="pt-6">
<p className="text-2xl font-bold text-blue-100">25</p>
<p className="text-sm text-blue-200/70">Days PTO</p>
</CardContent>
</Card>
<Card className="bg-blue-950/30 border-blue-500/30">
<CardContent className="pt-6">
<p className="text-2xl font-bold text-blue-100">100%</p>
<p className="text-sm text-blue-200/70">Health Coverage</p>
</CardContent>
</Card>
<Card className="bg-blue-950/30 border-blue-500/30">
<CardContent className="pt-6">
<p className="text-2xl font-bold text-blue-100">$5K</p>
<p className="text-sm text-blue-200/70">Learning Budget</p>
</CardContent>
</Card>
<Card className="bg-blue-950/30 border-blue-500/30">
<CardContent className="pt-6">
<p className="text-2xl font-bold text-blue-100">Flexible</p>
<p className="text-sm text-blue-200/70">Remote Work</p>
</CardContent>
</Card>
</div>
{/* Handbook Sections */}
<div className="space-y-6">
{sections.map((section) => (
<Card
key={section.id}
className="bg-slate-800/50 border-slate-700/50 hover:border-blue-500/50 transition-all"
>
<CardHeader>
<div className="flex items-start justify-between">
<div className="flex items-center gap-3">
<div className="p-2 rounded-lg bg-blue-500/20 text-blue-400">
{section.icon}
</div>
<div>
<CardTitle className="text-blue-100">
{section.title}
</CardTitle>
<CardDescription className="text-slate-400">
{section.content}
</CardDescription>
</div>
</div>
</div>
</CardHeader>
<CardContent>
<div className="flex flex-wrap gap-2 mb-4">
{section.subsections.map((subsection) => (
<Badge
key={subsection}
variant="secondary"
className="bg-slate-700/50 text-slate-300"
>
{subsection}
</Badge>
))}
</div>
<Button
size="sm"
className="bg-blue-600 hover:bg-blue-700"
>
View Details
</Button>
</CardContent>
</Card>
))}
</div>
{/* Additional Resources */}
<div className="mt-12 p-6 rounded-lg bg-slate-800/50 border border-blue-500/30">
<h2 className="text-xl font-bold text-blue-100 mb-4">
Have Questions?
</h2>
<p className="text-slate-300 mb-4">
HR team is here to help with any handbook-related questions or
to clarify company policies.
</p>
<Button className="bg-blue-600 hover:bg-blue-700">
Contact HR
</Button>
</div>
</div>
</div>
</div>
</Layout>
);
}