Spaces:
Running
Running
| import React, { useState } from 'react'; | |
| function Workflow() { | |
| const [activeStep, setActiveStep] = useState(1); | |
| const steps = [ | |
| { | |
| id: 1, | |
| title: "Global Factory Sourcing", | |
| desc: "Analyze dynamic pricing and geopolitical risks across 6 manufacturing hubs to identify optimal production vectors." | |
| }, | |
| { | |
| id: 2, | |
| title: "Intelligent Routing", | |
| desc: "Navigate through real-time port delays and sudden closures to maintain strict delivery schedules and minimize holding costs." | |
| }, | |
| { | |
| id: 3, | |
| title: "Demand Fulfillment", | |
| desc: "Automatically balance warehouse inventory against volatile regional demands to eliminate stockouts and maximize profit scalability." | |
| } | |
| ]; | |
| return ( | |
| <section id="features" className="workflow-section"> | |
| <div className="workflow-left"> | |
| <div className="workflow-header">Autonomous Operation</div> | |
| <div className="workflow-steps"> | |
| {steps.map(step => ( | |
| <div | |
| key={step.id} | |
| className={`workflow-step ${activeStep === step.id ? 'active' : 'inactive'}`} | |
| onClick={() => setActiveStep(step.id)} | |
| > | |
| <div className="workflow-step-top"> | |
| <span className="workflow-step-number">0{step.id}</span> | |
| <span className="workflow-step-title">{step.title}</span> | |
| </div> | |
| <div className="workflow-step-desc"> | |
| <p>{step.desc}</p> | |
| </div> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| <div className="workflow-right"> | |
| <div className="workflow-card"> | |
| <img src="/workflow.png" alt="Logistics Center" className="workflow-image" /> | |
| <div className="scan-line"></div> | |
| </div> | |
| </div> | |
| </section> | |
| ); | |
| } | |
| export default Workflow; | |