57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import { getTranslations } from 'next-intl/server';
|
|
|
|
interface WorkflowStep {
|
|
number: string;
|
|
title: string;
|
|
}
|
|
|
|
const Workflow = async () => {
|
|
const t = await getTranslations('pages.about.workflow');
|
|
|
|
let workflowSteps: WorkflowStep[] = [];
|
|
try {
|
|
const steps = t.raw('steps') as WorkflowStep[];
|
|
if (Array.isArray(steps)) {
|
|
workflowSteps = steps;
|
|
}
|
|
} catch {
|
|
workflowSteps = [];
|
|
}
|
|
|
|
if (workflowSteps.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
const totalSteps = workflowSteps.length;
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto" role="list">
|
|
{workflowSteps.map((step) => (
|
|
<div
|
|
key={step.number}
|
|
className="group relative"
|
|
role="listitem"
|
|
aria-label={`Step ${step.number} of ${totalSteps}: ${step.title}`}
|
|
>
|
|
<div className="flex items-center py-6 border-b border-border group-hover:border-accent transition-colors duration-300">
|
|
<div className="w-12 sm:w-20 text-sm text-muted-foreground/60 font-light">
|
|
{step.number}
|
|
</div>
|
|
<h3 className="text-sm sm:text-base text-muted-foreground group-hover:text-foreground transition-colors duration-300">
|
|
{step.title}
|
|
</h3>
|
|
</div>
|
|
|
|
{/* Line Indicator */}
|
|
<div
|
|
className="absolute left-0 bottom-0 w-0 h-px bg-foreground group-hover:w-full transition-all duration-500 ease-out"
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Workflow;
|