Spaces:
Running
Running
| import React, { useState } from 'react'; | |
| import { Network, Zap, ShieldAlert } from 'lucide-react'; | |
| function UseCaseTabs() { | |
| const [activeTab, setActiveTab] = useState('enterprise'); | |
| return ( | |
| <section id="use-cases" className="tabs-section"> | |
| <div className="tabs-header"> | |
| <h2>Deployment Scenarios</h2> | |
| </div> | |
| <div className="tab-switcher"> | |
| <button | |
| className={`tab-pill ${activeTab === 'enterprise' ? 'active' : ''}`} | |
| onClick={() => setActiveTab('enterprise')} | |
| > | |
| Enterprise | |
| </button> | |
| <button | |
| className={`tab-pill ${activeTab === 'research' ? 'active' : ''}`} | |
| onClick={() => setActiveTab('research')} | |
| > | |
| AI Research | |
| </button> | |
| </div> | |
| <div className="tab-content-card"> | |
| <div className="tab-ghost-icon"> | |
| {activeTab === 'enterprise' ? 'E' : 'R'} | |
| </div> | |
| <div className="tab-content-inner"> | |
| <h3 className="tab-content-title"> | |
| {activeTab === 'enterprise' ? 'Supply Chain Optimization' : 'OpenEnv RL Agent Training'} | |
| </h3> | |
| <p className="tab-content-desc"> | |
| {activeTab === 'enterprise' | |
| ? 'Deploy TradeStorm as a digital twin to stress-test your supply chain against simulated macroeconomic shocks.' | |
| : 'Utilize our OpenEnv-compliant Gymnasium wrapper to train massive LLM-based autonomous logistics agents.'} | |
| </p> | |
| <div className="benefits-grid"> | |
| <div className="benefit-item"> | |
| <div className="benefit-icon"><Network size={20} color="var(--primary)" /></div> | |
| <div className="benefit-title">Complex Routing</div> | |
| <div className="benefit-desc">Calculate optimal n-tier logistics pathways instantly.</div> | |
| </div> | |
| <div className="benefit-item"> | |
| <div className="benefit-icon"><Zap size={20} color="var(--primary)" /></div> | |
| <div className="benefit-title">Real-Time Processing</div> | |
| <div className="benefit-desc">React to geopolitical shocks within simulation ticks.</div> | |
| </div> | |
| <div className="benefit-item"> | |
| <div className="benefit-icon"><ShieldAlert size={20} color="var(--primary)" /></div> | |
| <div className="benefit-title">Risk Mitigation</div> | |
| <div className="benefit-desc">Proactive alerts prevent costly inventory stockouts.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| ); | |
| } | |
| export default UseCaseTabs; | |