Features Component

Relevant source files

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

• src/components/Features.jsx
• src/App.jsx
• src/components/Navbar.jsx
• package.json
• src/index.css
• src/components/Process.jsx
• src/components/Solutions.jsx

The Features component is a core section of the application's landing page, designed to showcase the product's primary capabilities in a visually engaging and interactive manner. It presents a series of features using a sticky scrolling effect, where each feature's details and a corresponding visual mock-up are displayed sequentially. This component is crucial for communicating the product's value proposition to potential users.

The component is rendered within the main App component and is directly navigable via the Navbar. It relies heavily on framer-motion for animations and lucide-react for iconography.

Sources: src/components/Features.jsx, src/App.jsx:18, src/components/Navbar.jsx:18

Component Architecture

The Features module is composed of two main React components: a parent container Features and a child presentational component FeatureCard.

• Features: The main wrapper component. Its sole responsibility is to iterate over a static features data array and render a FeatureCard for each item in the array. It defines the main section with the id="features" for anchor linking.
• FeatureCard: A reusable component that displays a single feature. It receives the feature data as a prop and structures the content into a two-column layout: one for textual information (title, description, stats) and another for a complex, feature-specific visual mock-up.

This diagram illustrates the parent-child relationship and data flow.

FeatureCard Internal Structure

The FeatureCard component dynamically renders its content based on the feature prop it receives. The text content is rendered uniformly, while the visual content is conditionally rendered based on feature.id.

This flowchart shows the internal logic of the FeatureCard component.

Data Structure

The component's content is driven by a hardcoded array of objects named features. This array defines the properties for each feature card to be displayed.

Sources: src/components/Features.jsx:5-40

Property	Type	Description	Example
id	number	A unique identifier for the feature, used for conditional rendering of visuals.	1
title	string	The main heading for the feature.	"Predictive Analytics"
description	string	A paragraph explaining the feature's benefits.	"Forecast demand with 99% accuracy..."
icon	LucideReactIcon	A React component from lucide-react used as the feature's icon.	BarChart3
color	string	A Tailwind CSS gradient class string for styling the icon background and other elements.	"from-blue-500 to-cyan-500"
stats	Array<{label, value}>	An array of key-value pairs representing important statistics for the feature.	[{ label: "Accuracy", value: "99.2%" }]

Visual Presentation and Layout

The component uses a combination of sticky positioning and a two-column grid to create a compelling user experience.

Sticky Scrolling Effect

On screens wider than the md breakpoint, each FeatureCard has a sticky position with top-0. This makes each card stick to the top of the viewport as the user scrolls, creating a presentation-like effect where one feature card replaces the next. The parent container has a height that accommodates this scrolling behavior.

Sources: src/components/Features.jsx:43

Two-Column Layout

Within each FeatureCard, a responsive grid (grid-cols-1 md:grid-cols-2) separates the content.

1. Text Content: The left column contains the feature's icon, title, description, and key statistics.
2. Visual Content: The right column contains a detailed, animated visual mock-up specific to the feature.

Sources: src/components/Features.jsx:45

Feature-Specific Visuals

The right-hand visual content is conditionally rendered based on the feature.id.

• Predictive Analytics (id: 1): Displays a mock UI of a demand forecast chart. It uses SVG <path> elements to draw historical (solid) and predicted (dashed) data lines, along with a gradient fill underneath. A framer-motion animated tooltip highlights a predicted data point.
  Sources: src/components/Features.jsx:101-150
• Global Real-time Tracking (id: 2): Renders a stylized map interface. An SVG <path> with a strokeDasharray is used to show a shipment route, and an animated motion.div displays a "Shipment Card" with details like origin, destination, and ETA.
  Sources: src/components/Features.jsx:174-237
• Automated Compliance (id: 3): Shows a "Document Scanner" UI. It features a list of compliance checks with their statuses and an animated scanning beam effect created with CSS animations (animate-[scan_...]). A framer-motion animated "Compliance 100%" badge appears with a spring effect.
  Sources: src/components/Features.jsx:239-290

Animation and Interactivity

The component utilizes the framer-motion library to add sophisticated animations.

• Entrance Animations: Most elements, such as the text content in FeatureCard, use initial and whileInView props on motion.div components to fade and slide into view as the user scrolls.

  // src/components/Features.jsx:50-54
  <motion.div
      initial={{ opacity: 0, x: -50 }}
      whileInView={{ opacity: 1, x: 0 }}
      transition={{ duration: 0.8, ease: "easeOut" }}
  >
  

• Spring Animation: The success badge in the "Automated Compliance" visual uses a spring-type transition for a bouncy effect.
  Sources: src/components/Features.jsx:280-284
• CSS Keyframe Animations: The scanning beam in the "Automated Compliance" visual uses a custom Tailwind CSS animation class animate-[scan_...].
  Sources: src/components/Features.jsx:243

Dependencies

The Features component relies on several external libraries to function.

Dependency	Version	Usage
react	^19.2.0	Core framework for building the UI.
framer-motion	^12.23.24	Powers all component and element animations.
lucide-react	^0.554.0	Provides icons (BarChart3, Globe, etc.).

Sources: package.json:13-15, src/components/Features.jsx:2-3

Integration

The Features component is a direct child of the main App component, placed within the <main> element. Its position in the component tree determines its location on the landing page.

This diagram shows the overall structure of the App component, highlighting where Features is located.

The <section> element in Features.jsx has an id="features", which serves as an anchor for in-page navigation. The Navbar component contains a link that directs the user to this section.

Sources: src/App.jsx:18, src/components/Features.jsx:294, src/components/Navbar.jsx:18