Use Cases Component
Relevant source files
The following files were used as context for generating this wiki page:The application demonstrates its capabilities and use cases not through a single, monolithic "Use Cases" component, but through a collection of distinct, specialized components. These components work together to present the product's value from different perspectives: core features, high-level solutions, narrative-driven scenarios, and the underlying operational process.
The file UseCases.css defines a generic styling structure for presenting use cases in a grid of cards, suggesting a design pattern that may have been used or intended for such a section. The primary components that implement the display of use cases are Features, Solutions, ProductNarrative, and Process. These are all rendered within the main App component.
Sources: src/App.jsx:16-18, src/components/UseCases.css
Styling and Structure (UseCases.css)
The UseCases.css file outlines a standard visual structure for a section dedicated to use cases. It defines styles for a header, a responsive grid, and individual cards that feature an icon, title, and description. The cards include a hover effect that reveals a radial gradient and lifts the card, enhancing interactivity.
Sources: src/components/UseCases.css:1-101
CSS Class Definitions
The following table summarizes the key CSS classes and their purpose.
| Class Name | Description |
|---|---|
.use-cases-section | Main container for the section with padding and a black background. |
.uc-header | Centered header block for the section title and description. |
.uc-grid | A responsive grid container that displays cards in 1, 2, or 4 columns depending on the screen width. |
.uc-card | Styles for an individual use case card, including border, padding, and a hover-activated radial gradient. |
.uc-icon-box | A circular container for an icon, which changes color on hover. |
.uc-card-title | Styles for the title within a card. |
.uc-card-desc | Styles for the descriptive text within a card. |
Sources: src/components/UseCases.css:1-101
Implied DOM Structure
The CSS implies a specific HTML structure for each use case card. The diagram below illustrates this structure.
Sources: src/components/UseCases.css:50-101
Core Features as Use Cases (Features.jsx)
The Features component presents the product's core capabilities as distinct, high-impact use cases. It iterates over a predefined array of features, rendering each one in a full-screen FeatureCard. Each card combines descriptive text, key statistics, and a unique animated visualization.
Sources: src/components/Features.jsx:311-317
Feature Data Structure
The features are defined in a constant array within the component. Each feature object contains a title, description, icon, color gradient, and an array of statistics.
// Source: src/components/Features.jsx:5-40
const features = [
{
id: 1,
title: "Predictive Analytics",
description: "Forecast demand with 99% accuracy...",
icon: BarChart3,
stats: [
{ label: "Accuracy", value: "99.2%" },
{ label: "Processing", value: "<50ms" }
]
},
// ... more features
];
Component Flow
The Features component maps over the features array and renders a FeatureCard for each item. The FeatureCard uses framer-motion for entry animations and conditionally renders a specific visualization based on the feature's id.
Sources: src/components/Features.jsx:42-317
Defined Features
| Feature | Description | Key Stats |
|---|---|---|
| Predictive Analytics | Forecast demand with 99% accuracy using proprietary neural networks. | Accuracy: 99.2%, Processing: <50ms |
| Global Real-time Tracking | Monitor every shipment across air, sea, and land in real-time. | Coverage: 190+ Countries, Updates: Real-time |
| Automated Compliance | Navigate complex customs regulations and generate documentation automatically. | Compliance: 100%, Docs/min: 500+ |
Sources: src/components/Features.jsx:5-40
High-Level Solutions (Solutions.jsx)
The Solutions component groups features into broader, industry-focused use cases. It uses a tabbed interface where selecting a solution updates the main visualization panel. This component demonstrates how the platform can be applied to solve problems in different domains like logistics, warehousing, and delivery.
Sources: src/components/Solutions.jsx:1-298
Component State and Logic
The component uses a useState hook (activeTab) to manage which solution is currently selected. Clicking a solution button updates this state, which in turn conditionally renders a different visualization in the right-hand panel using AnimatePresence from framer-motion.
Defined Solutions
| Solution | Description | Icon |
|---|---|---|
| Global Logistics | Real-time visibility across ocean, air, and rail with predictive delay models. | Globe2 |
| Smart Warehousing | AI-orchestrated robotic fleets to optimize storage density and throughput by 40%. | Box |
| Last-Mile Delivery | Dynamic route optimization that adapts to traffic in real-time, reducing fuel costs by 25%. | Map |
Sources: src/components/Solutions.jsx:6-30
Narrative-Driven Use Cases (ProductNarrative.jsx)
This component presents a compelling story of the product in action by synchronizing text content with large-scale visuals as the user scrolls. It uses framer-motion's useScroll and useTransform hooks to control the opacity and position of text and visual elements, creating an immersive, cinematic experience. The narrative progresses through three stages: identifying a problem, analyzing it with AI, and automatically resolving it.
Sources: src/components/ProductNarrative.jsx:1-244
Scroll-Based Animation Flow
The component's core logic is tied to the user's scroll progress within a 400vh container.
Operational Process Flow (Process.jsx)
The Process component demystifies the product's "black box" by breaking down its operation into a clear, four-step flow. It explains how data is ingested, processed by AI, optimized, and finally executed. Each step is presented in a card with an icon, title, and description, arranged in a grid.
Sources: src/components/Process.jsx:1-139
Process Steps
The component defines the four steps in an array, which is then mapped to create the UI.
| Step | Title | Description | Icon |
|---|---|---|---|
| 01 | Data Ingestion | Connect ERP, WMS, and fleet data sources via secure API connectors. | Database |
| 02 | AI Simulation | Proprietary engine runs millions of scenario simulations to identify optimal paths. | Brain |
| 03 | Strategic Optimization | Receive actionable, ranked recommendations to maximize efficiency and minimize costs. | Target |
| 04 | Automated Execution | Implement decisions instantly with automated dispatching and real-time fleet communication. | Zap |
Sources: src/components/Process.jsx:5-38
Process Visualization
The flow from data input to automated action is linear and sequential.
Sources: src/components/Process.jsx:5-38