Integrations Component
Relevant source files
The following files were used as context for generating this wiki page:The Integrations component is a key section of the application's landing page, designed to showcase the "OptiFlow" platform's ability to connect with a wide range of external systems. It visually communicates features such as a unified data layer, real-time synchronization, enterprise-grade security, and a developer-friendly API. The component is rendered within the main App component, and a navigation link in the Navbar points to it, highlighting its importance in the product narrative.
The component uses a "bento box" style grid layout to present information in a modular and visually engaging way. Each card in the grid is an instance of the reusable BentoCard component, which provides a consistent look and feel with entrance animations powered by framer-motion.
Sources: src/components/Integrations.jsx:25-31, src/App.jsx:18, src/components/Navbar.jsx:21
Component Architecture
The Integrations component is a React functional component that serves as a container for several BentoCard instances. It sets up the main section, title, and a responsive grid layout.
Sources: src/components/Integrations.jsx:25, src/components/Integrations.jsx:32
Component Hierarchy
The following diagram illustrates how the Integrations component fits within the application's structure.
This diagram shows that the App component renders both the Navbar and the Integrations component, which in turn uses the BentoCard component.
Sources: src/App.jsx:13-22, src/components/Integrations.jsx:34
BentoCard Component
BentoCard is a reusable wrapper component that provides the base styling and animation for each card in the integrations grid. It uses framer-motion to animate its appearance when it scrolls into view.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The content to be rendered inside the card. |
className | string | '' | Additional CSS classes to be applied to the card for custom styling (e.g., grid spanning). |
delay | number | 0 | A delay (in seconds) for the whileInView animation, allowing for staggered animations. |
Sources: src/components/Integrations.jsx:5-14
Integration Features
The component highlights four key integration features, each presented in a distinct BentoCard.
1. Unified Data Layer
This is the primary visual element, occupying a large portion of the grid. It represents the core concept of pulling data from disparate systems into a single source of truth. The card states that OptiFlow can connect with systems like SAP, Oracle, and NetSuite to eliminate data silos.
The visualization features a central hub with a Database icon, representing the unified data layer. Several nodes orbit this hub, symbolizing external systems.
Sources: src/components/Integrations.jsx:37-45, src/components/Integrations.jsx:48-60
Data Hub Architecture
The diagram below models the data flow from external systems into the central OptiFlow database.
This diagram shows various external systems feeding data into the central Unified Data Layer.
Sources: src/components/Integrations.jsx:63-69
Integrated Systems
The following systems are explicitly visualized as being integrated:
| System | Icon Color Class |
|---|---|
| SAP | bg-blue-400 |
| Oracle | bg-red-400 |
| FedEx | bg-purple-400 |
| Maersk | bg-cyan-400 |
| Salesforce | bg-indigo-400 |
Sources: src/components/Integrations.jsx:63-69
2. Instant Sync
This card emphasizes the real-time nature of the integrations. It features a Zap icon and mentions:
- Real-time bi-directional sync.
- A 99.9% uptime Service Level Agreement (SLA).
This capability is related to the "Automated Execution" step described in the Process component, which relies on instant communication.
Sources: src/components/Integrations.jsx:96-101, src/components/Process.jsx:32-37
3. Enterprise Security
This card, marked with a Lock icon, highlights the security of the integration platform. Key security features mentioned are:
- SOC2 Type II certification.
- End-to-end encryption for all data in transit.
The card is visually reinforced with an "ENCRYPTED" label.
Sources: src/components/Integrations.jsx:109-114
4. Developer First API
This card is dedicated to the developer experience, promoting a "robust GraphQL API" for building custom workflows. It is divided into a text section and a code demonstration.
Key API Features:
- GraphQL API
- Comprehensive documentation
- Typed SDKs
- Webhooks for every event
Sources: src/components/Integrations.jsx:122-132
GraphQL API Example
The component displays a sample GraphQL query to fetch shipment details. This demonstrates the API's structure and the type of data that can be retrieved.
// src/components/Integrations.jsx:153-167
query GetShipment($id: ID!) {
shipment(id: $id) {
id
status
currentLocation {
lat
lng
}
estimatedDelivery
}
}
API Interaction Flow
The following sequence diagram illustrates a typical interaction with the GraphQL API.
This diagram shows the flow of a client requesting shipment data from the GraphQL endpoint.
Sources: src/components/Integrations.jsx:149, src/components/Integrations.jsx:153-167
Conclusion
The Integrations component effectively functions as a marketing and informational tool within the application. It uses a clean, modern design with animations and clear iconography to convey complex technical capabilities in an easily digestible format. By highlighting the platform's connectivity, security, and developer-friendliness, it addresses key concerns for potential enterprise customers and reinforces the value proposition of a unified, intelligent supply chain system, a theme also present in the Features component.
Sources: src/components/Integrations.jsx, src/components/Features.jsx