App Component
Relevant source files
The following files were used as context for generating this wiki page:The App component is the root component of the application, serving as the main entry point and layout orchestrator for this single-page React application. It is responsible for assembling all the major UI sections of the landing page, such as the navigation bar, hero section, feature showcases, and footer, into a cohesive vertical structure.
The component defines the global page layout, including the primary background color and text selection styles. It imports and renders a series of presentational components in a specific order to construct the user-facing view. The overall architecture is a straightforward composition of stateless and stateful components that together form a rich, interactive marketing website for a product named "OptiFlow".
Sources: src/App.jsx, src/index.css:1-10
Architecture and Structure
The App component's primary role is to define the high-level structure of the page. It wraps all content in a main div container that sets the application's dark theme and minimum height. The structure is divided into three main parts: a fixed Navbar, a main content area, and a Footer.
Sources: src/App.jsx:13-28
Component Hierarchy
The following diagram illustrates the direct child components rendered by App.jsx and their order of appearance.
This diagram shows the top-level layout defined in App.jsx, which includes the Navbar, a main content block, and the Footer. The main block contains the sequence of all major sections of the landing page.
Sources: src/App.jsx:14-27
Core Dependencies
The project relies on several key libraries for its functionality and appearance. These are defined in package.json.
| Library | Version | Description |
|---|---|---|
react | ^19.2.0 | The core library for building the user interface. |
framer-motion | ^12.23.24 | Used for declarative animations throughout the application's components. |
lucide-react | ^0.554.0 | Provides the icon set used across the UI. |
tailwindcss | ^3.4.17 | A utility-first CSS framework for styling the components. |
vite | ^7.2.4 | The build tool and development server for the project. |
Sources: package.json:9-27
Page Components
The App component composes the entire page from a series of modular components, each representing a distinct section of the landing page.
Sources: src/App.jsx:2-12
Navbar Component
The Navbar is a fixed-position component at the top of the page. It provides navigation links and primary calls-to-action.
- Functionality: Displays the "OptiFlow" logo, navigation links, a "Log in" button, and a "Get Started" button. It also includes a responsive mobile menu.
- State: It manages its own state for scroll position (
scrolled) and mobile menu visibility (mobileMenuOpen). - Styling: The background becomes semi-transparent with a blur effect when the user scrolls down the page.
- Navigation Links:
- Solutions (
#solutions) - Features (
#features) - Integrations (
#integrations) - Pricing (
#pricing)
- Solutions (
Sources: src/components/Navbar.jsx:5-30
main Content Area
This is the primary container for the page's marketing and informational content. It renders components sequentially to tell the product's story.
Sources: src/App.jsx:16-26
Key Sections within main
| Component | Purpose | Key Features |
|---|---|---|
Hero | The main "above-the-fold" content, designed to capture user attention. | Features an animated "Live Pipeline" that cycles through data processing steps every 3 seconds. |
Trust | Displays logos of companies that use the product to build social proof. | A row of grayscale logos that become colored on hover. |
Solutions | An interactive tabbed section detailing different product solutions like Global Logistics and Smart Warehousing. | Uses framer-motion to animate between tabs and corresponding visualizations (e.g., a 3D globe). |
Features | A vertically-scrolling section that highlights key product features like Predictive Analytics and Global Tracking. | Implements a "sticky" scrolling effect where each feature card is displayed one at a time. |
Integrations | Showcases the product's ability to connect with other systems using a bento-style grid layout. | Includes a visualization of a "Unified Data Layer" and a code snippet for the "Developer First API". |
CostCalculator | An interactive tool for users to estimate the financial impact of supply chain inefficiencies. | Calculates and displays estimated annual costs based on user inputs for shipments, value, and industry. |
Testimonials | Displays quotes from satisfied customers. | A simple grid layout of testimonial cards. |
Sources: src/App.jsx:17-25, src/components/Hero.jsx:28-34, src/components/Solutions.jsx:10-33, src/components/Features.jsx:4-28, src/components/Integrations.jsx:10-18, src/components/CostCalculator.jsx:15-26, src/components/Testimonials.jsx:4-21
Footer Component
The Footer component is located at the bottom of the page and contains supplemental links and copyright information.
- Content: Includes links to Product, Company, Resources, and Legal pages.
- Branding: Displays the "OptiFlow" name and a brief tagline.
- Copyright: Shows the copyright notice and links to social media profiles.
Sources: src/components/Footer.jsx:4-53
Styling and Theming
The application employs a consistent dark theme defined globally. The primary styling is handled by Tailwind CSS, with custom theme values and utility classes.
Global Styles
The root stylesheet src/index.css defines the base styles for the application.
- Background: The default background color for the entire application is set to
#050505. This is applied inApp.jsx. - Fonts: The project imports and uses the 'Plus Jakarta Sans' and 'JetBrains Mono' font families.
- CSS Variables: It defines a set of CSS variables for a consistent color system, including primary/secondary backgrounds, text colors, and accent colors.
Sources: src/index.css:1-20, src/App.jsx:14
App.jsx Specific Styles
The main container in App.jsx applies several key Tailwind CSS classes:
// src/App.jsx:14
<div className="min-h-screen bg-[#050505] text-white selection:bg-blue-500/30">
min-h-screen: Ensures the application body takes up at least the full height of the viewport.bg-[#050505]: Sets the dark background color, consistent with the global theme.text-white: Sets the default text color.selection:bg-blue-500/30: Customizes the background color of selected text for better visual feedback.
Sources: src/App.jsx:14