Spaces:
Sleeping
Sleeping
File size: 3,613 Bytes
bb5d4f8 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | import React from 'react';
import { Slide } from '../../types';
import { motion } from 'framer-motion';
import { ArrowDown, ArrowRight } from 'lucide-react';
export const ProcessSlide: React.FC<{ slide: Slide }> = ({ slide }) => {
const isDiagram = slide.type === 'diagram';
const steps = slide.content.steps;
if (!steps) return null;
return (
<div className="flex flex-col h-full justify-center px-6 max-w-6xl mx-auto">
<h2 className="text-4xl font-bold text-center mb-16 text-slate-900">{slide.title}</h2>
{isDiagram ? (
// Horizontal Flow with Icons
<div className="flex flex-wrap md:flex-nowrap items-center justify-center gap-4 md:gap-2">
{steps.map((step: any, idx) => (
<React.Fragment key={idx}>
<motion.div
className="flex flex-col items-center gap-4 p-6"
initial={{ opacity: 0, scale: 0.5 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ delay: 0.2 + (idx * 0.2) }}
>
<div className="w-20 h-20 rounded-3xl bg-white border border-slate-100 flex items-center justify-center text-4xl shadow-glow text-slate-700">
{step.icon}
</div>
<span className="text-base font-semibold text-slate-600 text-center">{step.label}</span>
</motion.div>
{idx < steps.length - 1 && (
<motion.div
className="text-slate-300 hidden md:block"
initial={{ width: 0, opacity: 0 }}
animate={{ width: 'auto', opacity: 1 }}
transition={{ delay: 0.3 + (idx * 0.2) }}
>
<ArrowRight size={24} />
</motion.div>
)}
{idx < steps.length - 1 && (
<div className="w-full flex justify-center md:hidden text-slate-300">
<ArrowDown size={24} />
</div>
)}
</React.Fragment>
))}
</div>
) : (
// Vertical Numbered List
<div className="max-w-3xl mx-auto w-full">
{steps.map((step, idx) => (
<motion.div
key={idx}
className="flex items-center gap-6 mb-6 relative"
initial={{ opacity: 0, x: -30 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.2 + (idx * 0.15) }}
>
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-white border-2 border-secondary text-secondary flex items-center justify-center font-bold text-lg shadow-sm z-10">
{idx + 1}
</div>
{/* Connecting line */}
{idx < steps.length - 1 && (
<div className="absolute left-6 top-12 bottom-[-24px] w-0.5 bg-slate-200" />
)}
<div className="bg-white p-5 rounded-xl border border-slate-100 w-full hover:shadow-md transition-all shadow-sm">
<p className="text-xl text-slate-700 font-medium">{typeof step === 'string' ? step : (step as any).label}</p>
</div>
</motion.div>
))}
</div>
)}
</div>
);
}; |