Project Structure

Relevant source files

The following files were used as context for generating this wiki page:

• src/App.jsx
• src/main.jsx
• package.json
• tailwind.config.js
• src/index.css
• index.html
• src/components/Navbar.jsx
• src/components/Hero.jsx
• src/components/Features.jsx
• src/components/Solutions.jsx
• src/components/Integrations.jsx
• src/components/CostCalculator.jsx
• src/components/Footer.jsx
• src/components/Process.jsx
• README.md

This project is a modern single-page application (SPA) built using React and Vite. It serves as a landing page for a SaaS product named "OptiFlow AI". The architecture is centered around a component-based model, with a clear separation of concerns for different UI sections. Styling is managed primarily through Tailwind CSS, and animations are heavily implemented using Framer Motion to create a dynamic and engaging user experience.

The structure is typical for a Vite-based React project, with the main source code residing in the src/ directory. The application is composed of a series of functional components that are assembled into a single, scrollable page.

Core Technologies and Dependencies

The project's foundation is defined by its dependencies listed in package.json. It uses a modern frontend stack focused on performance and developer experience.

Sources: package.json

Key Dependencies

Dependency	Version	Description
react	^19.2.0	The core library for building the user interface.
react-dom	^19.2.0	Provides DOM-specific methods for React.
framer-motion	^12.23.24	A production-ready motion library for React, used extensively for animations.
lucide-react	^0.554.0	Provides a set of simply beautiful & consistent icons.
cobe	^0.6.5	Used for creating the interactive globe visualization in the Solutions component.

Development Dependencies

Dependency	Version	Description
vite	^7.2.4	The build tool and development server.
tailwindcss	^3.4.17	A utility-first CSS framework for styling.
autoprefixer	^10.4.22	A PostCSS plugin to parse CSS and add vendor prefixes.
postcss	^8.5.6	A tool for transforming CSS with JavaScript.
eslint	^9.39.1	A tool for identifying and reporting on patterns in JavaScript.

Application Entrypoint and Rendering Flow

The application bootstrap process begins with the index.html file and flows through main.jsx to render the root App component.

The following diagram illustrates the initial rendering flow of the application.

1. index.html: This is the main HTML file served to the browser. It contains the root DOM node <div id="root"></div> where the React application will be mounted. It also links to the Google Fonts used in the project and loads the main JavaScript module, /src/main.jsx.
   Sources: index.html:9-12, 15-16
2. src/main.jsx: This file is the application's entry point. It imports React, ReactDOM, the main App component, and the global stylesheet src/index.css. It then uses ReactDOM.createRoot() to render the <App /> component into the div#root element from index.html.
   Sources: src/main.jsx:1-8

Main Application Layout (App.jsx)

The App.jsx component serves as the main container for the entire single-page application. It defines the overall page structure by composing various section components in a specific order.

Sources: src/App.jsx

The component hierarchy is as follows:

The main div in App.jsx sets the global background color (bg-[#050505]), text color (text-white), and selection color. The structure is a standard webpage layout with a header (<Navbar />), a main content area (<main>), and a footer (<Footer />).

Component-Based Architecture

The application's UI is broken down into a series of functional React components located in the src/components/ directory. Each component is responsible for a specific section or feature of the landing page.

Component	File Path	Description
Navbar	src/components/Navbar.jsx	The main navigation bar, which is fixed to the top of the page and becomes translucent on scroll.
Hero	src/components/Hero.jsx	The main "above the fold" section, featuring the primary headline and a "Live Pipeline" animated visual.
Trust	src/components/Trust.jsx	Displays logos of trusted companies.
Solutions	src/components/Solutions.jsx	An interactive tabbed section showcasing different product solutions with visualizations.
Features	src/components/Features.jsx	A vertically scrolling section that highlights key product features with animated visuals.
Integrations	src/components/Integrations.jsx	A bento-grid layout displaying integration capabilities, including a developer API section.
Process	src/components/Process.jsx	Explains the four-step process of the service, from data ingestion to execution.
CostCalculator	src/components/CostCalculator.jsx	An interactive calculator to estimate the cost of supply chain inefficiencies.
Testimonials	src/components/Testimonials.jsx	Displays customer quotes and testimonials.
Footer	src/components/Footer.jsx	The site footer containing navigation links, legal information, and social media links.

Sources: src/App.jsx:2-13, src/components/Hero.jsx, src/components/Features.jsx, src/components/Solutions.jsx, src/components/Integrations.jsx, src/components/CostCalculator.jsx, src/components/Process.jsx

Styling and Theming

Styling is handled through a combination of Tailwind CSS and custom CSS with variables for a consistent theme.

Tailwind CSS

The project uses Tailwind CSS for utility-first styling. The configuration file, tailwind.config.js, specifies the content files to be scanned for utility classes. It also extends the default theme with custom fonts (Inter).
Sources: tailwind.config.js, package.json:31

Global Styles and CSS Variables

The src/index.css file defines the global styles, imports fonts, and sets up a theming system using CSS variables.

Variable	Default Value	Description
--bg-primary	#050505	Primary background color for the application.
--bg-secondary	#0A0A0A	Secondary background color, used for cards and containers.
--text-primary	#FFFFFF	Primary text color.
--text-secondary	#A1A1AA	Secondary text color for less prominent text.
--accent-primary	#3B82F6	The main accent color (blue).
--border-subtle	rgba(255, 255, 255, 0.08)	A subtle border color for UI elements.

This file also includes custom utility classes like .glass for a frosted glass effect and .text-gradient for gradient text.
Sources: src/index.css:7-20, 52-68

State Management and Animation

Local State

The application relies on local component state managed by React's useState and useEffect hooks. There is no evidence of a global state management library like Redux or Zustand. For example, the CostCalculator component uses useState to manage user inputs (shipments, value, etc.) and calculates the results dynamically.

The diagram below shows the state flow within the CostCalculator component.

Animation

Animations are a core part of the user experience and are implemented using the Framer Motion library.

• Component Animation: Most components use motion.div to animate their appearance on scroll, typically with a y offset and opacity transition. This is controlled by the whileInView prop.
  Sources: src/components/Process.jsx:49-54, src/components/Hero.jsx:83-87
• Scroll-linked Animations: More complex animations are linked to scroll progress using useScroll and useTransform hooks. The ProductNarrative component is a prime example, where text and visuals fade in and out based on the user's scroll position within a container.
  Sources: src/components/ProductNarrative.jsx:7-11, 230-233
• Layout Animations: The layoutId prop is used to create smooth transitions between elements, such as the active tab indicator in the Solutions component.
  Sources: src/components/Solutions.jsx:106-110

Conclusion

The project is a well-structured, modern React SPA designed as a visually rich marketing website. Its architecture leverages a component-based model for maintainability, Vite for a fast development environment, Tailwind CSS for efficient styling, and Framer Motion for sophisticated animations. The code is organized logically into self-contained components, making it easy to understand and extend.