Home
Relevant source files
The following files were used as context for generating this wiki page:The Home page serves as the primary user-facing entry point for the "OptiFlow" AI SaaS application. It is a comprehensive, single-page marketing and informational website built using React and Vite. The page is designed to showcase the product's features, solutions, and value proposition through a series of interactive and animated components. Its main purpose is to explain how OptiFlow can solve supply chain inefficiencies, demonstrate its core capabilities, and encourage users to sign up or request a demo.
The page is structured as a vertical flow of sections, each highlighting a different aspect of the OptiFlow platform. These sections include a hero banner with a live data pipeline visualization, detailed feature explanations, an overview of solutions, an interactive cost calculator, and integration information. The entire application is heavily animated using framer-motion to create a dynamic and modern user experience.
Sources: src/App.jsx, README.md
Application Architecture
The application is a single-page React app composed of multiple functional components. The main App.jsx file orchestrates the layout, rendering a sequence of components that form the landing page. This component-based architecture promotes reusability and separation of concerns.
Sources: src/App.jsx:15-29
The diagram below illustrates the high-level component structure of the home page.
Sources: src/App.jsx:16-28
Core Technologies & Dependencies
The project is built on the Vite tooling platform for fast development and builds. Key libraries are used for UI, animation, and iconography, as defined in package.json.
| Dependency | Version | Description |
|---|---|---|
react | ^19.2.0 | The core UI library for building components. |
framer-motion | ^12.23.24 | Used extensively for animations and transitions throughout the application. |
lucide-react | ^0.554.0 | Provides the icon set used across components. |
tailwindcss | ^3.4.17 | A utility-first CSS framework for styling. |
vite | ^7.2.4 | The build tool and development server. |
Sources: package.json:13-29
Styling and Theming
The application uses Tailwind CSS for styling, with a custom theme defined in tailwind.config.js and global styles in src/index.css. The theme is built around a dark mode color system with specific variables for backgrounds, text, and accents.
Color Palette
The primary color palette is defined using CSS variables, allowing for consistent theming across all components.
| Variable | Value | Description |
|---|---|---|
--bg-primary | #050505 | Main background color. |
--bg-secondary | #0A0A0A | Secondary background for cards and containers. |
--text-primary | #FFFFFF | Primary text color. |
--text-secondary | #A1A1AA | Secondary text for descriptions. |
--accent-primary | #3B82F6 | Primary accent color (blue). |
--border-subtle | rgba(255, 255, 255, 0.08) | Standard border color. |
Sources: src/index.css:8-20, tailwind.config.js:8-16
Typography
The project uses the 'Plus Jakarta Sans' and 'JetBrains Mono' fonts, imported via Google Fonts. 'Plus Jakarta Sans' is the default sans-serif font for the body text, while 'JetBrains Mono' is used for code-like text and data displays.
Sources: src/index.css:1, src/components/Hero.jsx:174
Key Components
The Home page is composed of several distinct React components, each responsible for a specific section of the user experience.
Navbar Component
The Navbar is a responsive and sticky navigation bar at the top of the page. It becomes semi-transparent with a backdrop blur when the user scrolls down. It contains navigation links, a logo, and call-to-action buttons.
- Navigation Links: Solutions, Features, Integrations, Pricing.
- CTAs: "Log in" and "Get Started".
- Behavior: A mobile-friendly menu is available on smaller screens.
Sources: src/components/Navbar.jsx
Hero Component
The Hero component is the first section users see. It features a bold headline, a short description of OptiFlow, and an animated "Live Pipeline" visualization that cycles through four key operational steps.
The pipeline visualization demonstrates the core process of the OptiFlow platform in a continuous loop.
This diagram shows the cyclical flow of the live pipeline animation.
Sources: src/components/Hero.jsx:8-41
Process Component
The Process component, titled "How It Works," outlines the four-step operational flow of the OptiFlow platform. Each step is presented in a card with an icon, title, and description, arranged in a grid.
| Step | Title | Description | Icon |
|---|---|---|---|
| 01 | Data Ingestion | Seamlessly connect ERP, WMS, and fleet data sources. | Database |
| 02 | AI Simulation | Proprietary engine runs millions of scenario simulations. | Brain |
| 03 | Strategic Optimization | Receive actionable, ranked recommendations. | Target |
| 04 | Automated Execution | Implement decisions with automated dispatching. | Zap |
Sources: src/components/Process.jsx:7-40
Solutions Component
This component presents OptiFlow's core solutions in a tabbed interface. Users can switch between "Global Logistics," "Smart Warehousing," and "Last-Mile Delivery." Each tab displays a unique description and an interactive visualization.
- Global Logistics: Features an interactive 3D globe visualization (
cobelibrary). - Smart Warehousing: Shows an animated grid representing a warehouse with AI-orchestrated robotic fleets.
- Last-Mile Delivery: Displays a map with a dynamically optimized route path.
Sources: src/components/Solutions.jsx
Features Component
The Features section uses a scroll-based animation to present three key features in sticky cards. As the user scrolls, each feature card is highlighted alongside a corresponding visual mock-up.
| Feature | Description | Icon |
|---|---|---|
| Predictive Analytics | Forecast demand with 99% accuracy using neural networks. | BarChart3 |
| Global Real-time Tracking | Monitor every shipment across air, sea, and land in real-time. | Globe |
| Automated Compliance | Navigate complex customs regulations automatically. | ShieldCheck |
Sources: src/components/Features.jsx:8-41
Integrations Component
This section uses a "bento grid" layout to showcase OptiFlow's integration capabilities. Key highlights include a "Unified Data Layer" visualization and a "Developer First API" section with a code snippet.
The Unified Data Layer visualizes data flowing from various enterprise systems into a central hub.
The "Developer First API" card displays a sample GraphQL query to demonstrate its ease of use.
query GetShipment($id: ID!) {
shipment(id: $id) {
id
status
currentLocation {
lat
lng
}
estimatedDelivery
}
}
Sources: src/components/Integrations.jsx:178-191
CostCalculator Component
This is an interactive tool that allows potential customers to estimate the hidden costs in their supply chain. Users can adjust sliders and inputs for monthly shipments, average shipment value, delay rate, and industry. The calculator then computes the estimated annual financial impact.
The calculation is based on a model that considers:
- Stockout Impact:
(Delayed Shipments * Avg Value * Industry Multiplier * 0.3) - Late Delivery Penalties:
(Delayed Shipments * $150) - Retention Loss:
(Delayed Shipments * Avg Value * Industry Churn Rate)
A detailed breakdown of the methodology is available within a <details> element in the component.
Sources: src/components/CostCalculator.jsx:26-31, src/components/CostCalculator.jsx:223-278
Footer Component
The Footer provides standard website footer content, including product, company, resource, and legal links, as well as copyright information and social media links.
Sources: src/components/Footer.jsx