Hero Component

Relevant source files

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

• src/components/Hero.jsx
• src/App.jsx
• src/components/Process.jsx
• src/index.css
• tailwind.config.js
• lucide-react (package.json)

The Hero component is the primary "above-the-fold" section of the application's main page. Its purpose is to immediately engage users with a compelling headline, a brief description of the product's value proposition ("OptiFlow illuminates every shipment"), and a dynamic, animated "Live Pipeline" visualization that showcases a core process. It is the first component rendered within the <main> tag of the application.

The component is structured as a full-height section with a sophisticated, layered background and a two-column layout on larger screens. It heavily utilizes framer-motion for animations and lucide-react for iconography.

Sources: src/components/Hero.jsx, src/App.jsx:15

Component Architecture

The Hero component is divided into a two-column grid layout. The left column contains the main marketing and informational text, while the right column features an interactive "Live Processing Unit" card. The entire component is wrapped in a <section> with a relative position to contain its absolute-positioned background elements.

Sources: src/components/Hero.jsx:65-68

The following diagram illustrates the high-level structure of the Hero component.

Background Styling

The component features a multi-layered background to create a modern, "enterprise grid" aesthetic. These layers are all absolutely positioned and have pointer-events-none to prevent interference with user interaction.

1. Grid Pattern: A repeating linear gradient creates a subtle grid.
2. Radial Spotlight: A large radial gradient provides a "spotlight" effect near the top center.
3. Horizon Fade: A linear gradient fades the background to the primary background color (#050505) at the bottom.

Sources: src/components/Hero.jsx:52-61, src/index.css:5

Left Column: Textual Content

The left column presents the core messaging of the product. All elements are animated on entry using framer-motion with staggered delays to create a fluid appearance.

Element	Description	Animation	Source
"System Operational" Badge	A pill-shaped badge with a pulsing green dot indicating the system is active.	opacity, y	src/components/Hero.jsx:73-80
Headline (<h1>)	The main headline: "You can't fix what you can't see."	opacity, y	src/components/Hero.jsx:86-94
Description (<p>)	A paragraph explaining the product's core benefit.	opacity, y	src/components/Hero.jsx:96-103
CTA Buttons	"Start Free Trial" and "Watch Demo" buttons.	opacity, y	src/components/Hero.jsx:105-117
Certification Badges	Small text elements indicating "SOC2 Certified" and "99.9% Uptime".	N/A	src/components/Hero.jsx:119-127

Sources: src/components/Hero.jsx:69-128

Right Column: Live Processing Unit

The right column contains a "Live Pipeline" card that visually represents a four-step process. This is the most dynamic part of the Hero component.

State Management and Animation Logic

The component uses a useState hook to manage the activeStep and a useEffect hook to cycle through the steps.

• State: const [activeStep, setActiveStep] = useState(0);
• Effect: A setInterval function increments the activeStep every 3000 milliseconds, looping back to the beginning when it reaches the end of the steps array. The interval is cleared on component unmount.

This logic drives the animation sequence of the pipeline.

Sources: src/components/Hero.jsx:45-50

The following diagram shows the state update flow.

Data Structure: steps

The pipeline's content is defined by a constant array of objects named steps. This structure is nearly identical to the one found in the Process component, indicating a shared design pattern. Each object in the array defines a single step in the pipeline.

Sources: src/components/Hero.jsx:5-43, src/components/Process.jsx:4-42

The table below details the properties for each step object. The icons are imported from the lucide-react library.

Property	Type	Description	Example
id	Number	Unique identifier for the step.	0
title	String	The main title of the step.	"Data Ingestion"
status	String	The status text displayed when the step is active.	"Connected"
desc	String	A short description shown when the step is active.	"Syncing ERP, WMS & Fleet data..."
icon	Icon	A component from lucide-react.	Database
color	String	Tailwind CSS class for the icon and status text color.	"text-blue-500"
bg	String	Tailwind CSS class for the progress bar and indicator dot background.	"bg-blue-500"

Sources: src/components/Hero.jsx:5-43, package.json:13

UI Rendering and Animations

The steps array is mapped to render a list of motion.div elements.

• Active State: The currently active step is determined by activeStep === index. When active, the step's background color, border, and icon color change.
• Description Animation: The AnimatePresence component is used to smoothly transition the description text (step.desc) in and out of view. When a step is active, the description fades and slides in; when inactive, a placeholder bar is shown.
• Progress Bar: For the active step, a motion.div is rendered at the bottom, which animates its width from 0% to 100% over 3 seconds, synchronized with the setInterval timer.

Sources: src/components/Hero.jsx:145-231

Conclusion

The Hero component serves as a powerful and dynamic introduction to the OptiFlow application. It effectively combines static marketing content with a live, animated data processing visualization to communicate the product's core functionality and benefits. Its modular structure, reliance on framer-motion for sophisticated animations, and clear data-driven UI for the "Live Pipeline" make it a central piece of the user's first impression.

Sources: src/components/Hero.jsx, src/App.jsx