mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-09-06 08:53:39 +00:00
397 lines
17 KiB
TypeScript
397 lines
17 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
|
|
const WorkflowSection = () => {
|
|
const { t } = useTranslation();
|
|
const steps = [
|
|
{
|
|
id: "01",
|
|
name: t("landingPage.recordCreation"),
|
|
description: t("landingPage.recordCreationDesc"),
|
|
status: "complete",
|
|
icon: (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-5 w-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V8z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
id: "02",
|
|
name: t("landingPage.teamLeaderReview"),
|
|
description: t("landingPage.teamLeaderReviewDesc"),
|
|
status: "complete",
|
|
icon: (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-5 w-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
id: "03",
|
|
name: t("landingPage.directorApproval"),
|
|
description: t("landingPage.directorApprovalDesc"),
|
|
status: "current",
|
|
icon: (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-5 w-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
id: "04",
|
|
name: t("landingPage.deputyHeadReview"),
|
|
description: t("landingPage.deputyHeadReviewDesc"),
|
|
status: "upcoming",
|
|
icon: (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-5 w-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
id: "05",
|
|
name: t("landingPage.recordOfficerProcessing"),
|
|
description: t("landingPage.recordOfficerProcessingDesc"),
|
|
status: "upcoming",
|
|
icon: (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-5 w-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
),
|
|
},
|
|
];
|
|
return (
|
|
<div className="py-16 bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-800">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="lg:text-center mb-16">
|
|
<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-primary/10 text-primary animate-pulse">
|
|
{t("landingPage.streamlinedProcess")}
|
|
</span>
|
|
<h2 className="mt-4 text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-5xl">
|
|
<span className="block">
|
|
{t("landingPage.recordManagementApprovalWorkflows")}
|
|
</span>
|
|
<span className="block text-primary">
|
|
{t("landingPage.workflow")}
|
|
</span>
|
|
</h2>
|
|
<p className="mt-6 max-w-3xl text-xl text-gray-600 dark:text-gray-300 lg:mx-auto">
|
|
{t("landingPage.smartOfficeDescription")}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-12">
|
|
<div className="relative">
|
|
{/* Progress bar */}
|
|
<div className="hidden md:block absolute top-0 left-16 h-full w-0.5 bg-gray-200 dark:bg-gray-700">
|
|
<div
|
|
className="absolute top-0 left-0 h-full bg-primary transition-all duration-1000 ease-in-out"
|
|
style={{ height: "60%" }} // Adjust based on current step
|
|
/>
|
|
</div>
|
|
|
|
<ul className="space-y-10 md:space-y-12">
|
|
{steps.map((step, stepIdx) => (
|
|
<li
|
|
key={step.name}
|
|
className="relative group transition-all duration-300 hover:scale-[1.02]"
|
|
data-aos="fade-up"
|
|
data-aos-delay={stepIdx * 100}
|
|
>
|
|
<div className="relative flex items-start md:items-center">
|
|
{/* Step indicator */}
|
|
<div className="flex-shrink-0 relative z-10">
|
|
<div
|
|
className={`flex items-center justify-center w-12 h-12 rounded-full transition-all duration-300 shadow-lg ${
|
|
step.status === "complete"
|
|
? "bg-primary text-white transform group-hover:scale-110"
|
|
: step.status === "current"
|
|
? "bg-white dark:bg-gray-800 border-4 border-primary shadow-[var(--primary)]/30"
|
|
: "bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 group-hover:border-gray-400"
|
|
}`}
|
|
>
|
|
{step.status === "complete" ? (
|
|
<svg
|
|
className="w-6 h-6"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
) : step.status === "current" ? (
|
|
<div className="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-primary opacity-75"></div>
|
|
) : step.status === "upcoming" ? (
|
|
<span className="text-gray-400 dark:text-gray-500 font-medium">{step.id}</span>
|
|
) : (
|
|
<span className="text-gray-400 dark:text-gray-500">{step.icon}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Step content */}
|
|
<div
|
|
className={`ml-6 p-6 rounded-xl flex-1 transition-all duration-300 ${
|
|
step.status === "current"
|
|
? "bg-white dark:bg-gray-800 border-l-4 border-primary shadow-lg"
|
|
: "bg-white dark:bg-gray-800 shadow-md group-hover:shadow-lg"
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<span
|
|
className={`text-xs font-semibold tracking-wider ${
|
|
step.status === "complete"
|
|
? "text-primary"
|
|
: "text-gray-500 dark:text-gray-400"
|
|
}`}
|
|
>
|
|
{t("landingPage.step")} {step.id}
|
|
</span>
|
|
<h3 className="text-lg font-bold text-gray-900 dark:text-white mt-1">
|
|
{step.name}
|
|
</h3>
|
|
</div>
|
|
{step.status === "current" && (
|
|
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary text-white animate-pulse">
|
|
{t("statusBar.In Progress")}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="mt-2 text-gray-600 dark:text-gray-300">{step.description}</p>
|
|
|
|
{step.status === "current" && (
|
|
<div className="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
|
|
<div className="flex space-x-4">
|
|
<button className="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-700 transition-colors">
|
|
{t("statusBar.Approve")}
|
|
</button>
|
|
<button className="px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
|
|
{t("landingPage.requestChanges")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Features section */}
|
|
<div className="mt-20 bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
|
|
<div className="grid grid-cols-1 md:grid-cols-2">
|
|
<div className="p-10 bg-gradient-to-br from-primary to-primary-800 text-white">
|
|
<h3 className="text-2xl font-bold mb-6">
|
|
{t("landingPage.workflowAutomationBenefits")}
|
|
</h3>
|
|
<p className="mb-8 opacity-90">
|
|
{t("landingPage.workflowAutomationDesc")}
|
|
</p>
|
|
|
|
<div className="space-y-6">
|
|
<div className="flex items-start">
|
|
<div className="flex-shrink-0 mt-1">
|
|
<div className="flex items-center justify-center h-8 w-8 rounded-full bg-white/20">
|
|
<svg
|
|
className="h-5 w-5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div className="ml-4">
|
|
<h4 className="text-sm font-semibold">
|
|
{t("landingPage.fasterApprovals")}
|
|
</h4>
|
|
<p className="mt-1 text-sm opacity-80">
|
|
{t("landingPage.reduceDelays")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start">
|
|
<div className="flex-shrink-0 mt-1">
|
|
<div className="flex items-center justify-center h-8 w-8 rounded-full bg-white/20">
|
|
<svg
|
|
className="h-5 w-5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div className="ml-4">
|
|
<h4 className="text-sm font-semibold">
|
|
{t("landingPage.auditTrail")}
|
|
</h4>
|
|
<p className="mt-1 text-sm opacity-80">
|
|
{t("landingPage.completeRecord")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-10">
|
|
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
|
|
{t("landingPage.advancedFeatures")}
|
|
</h3>
|
|
|
|
<div className="grid grid-cols-1 gap-8">
|
|
<div className="flex items-start">
|
|
<div className="flex-shrink-0">
|
|
<div className="flex items-center justify-center h-12 w-12 rounded-xl bg-primary-500/5 text-primary">
|
|
<svg
|
|
className="h-6 w-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div className="ml-4">
|
|
<h4 className="text-lg font-medium text-gray-900 dark:text-white">
|
|
{t("landingPage.slaMonitoring")}
|
|
</h4>
|
|
<p className="mt-2 text-gray-600 dark:text-gray-300">
|
|
{t("landingPage.slaMonitoringDesc")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start">
|
|
<div className="flex-shrink-0">
|
|
<div className="flex items-center justify-center h-12 w-12 rounded-xl bg-primary-500/5 text-primary">
|
|
<svg
|
|
className="h-6 w-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div className="ml-4">
|
|
<h4 className="text-lg font-medium text-gray-900 dark:text-white">
|
|
{t("landingPage.conditionalRouting")}
|
|
</h4>
|
|
<p className="mt-2 text-gray-600 dark:text-gray-300">
|
|
{t("landingPage.conditionalRoutingDesc")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start">
|
|
<div className="flex-shrink-0">
|
|
<div className="flex items-center justify-center h-12 w-12 rounded-xl bg-primary-500/5 text-primary">
|
|
<svg
|
|
className="h-6 w-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div className="ml-4">
|
|
<h4 className="text-lg font-medium text-gray-900 dark:text-white">
|
|
{t("delegation.title")}
|
|
</h4>
|
|
<p className="mt-2 text-gray-600 dark:text-gray-300">
|
|
{t("landingPage.temporaryApprovalDelegation")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default WorkflowSection;
|