Trust Component
Relevant source files
The following files were used as context for generating this wiki page:
The Trust component is a stateless functional React component designed to display a scrolling gallery of company logos. Its primary purpose is to build social proof and user confidence by showcasing well-known companies that use or partner with the "OptiFlow" service. It is rendered on the main page, immediately following the Hero component, to quickly establish credibility with visitors.
The component uses the framer-motion library to apply subtle, scroll-triggered animations to each logo, creating a visually appealing and staggered fade-in effect as the user scrolls the component into view. Styling is managed via Tailwind CSS, ensuring a consistent look and feel with the rest of the application.
Sources: src/components/Trust.jsx, src/App.jsx:16
Component Structure
The Trust component is built with a simple and semantic structure. It consists of a main <section> element that acts as the container. Inside, a <p> tag serves as a title, followed by a <div> that wraps the dynamically rendered list of logos.
This diagram illustrates the JSX structure of the component.
Sources: src/components/Trust.jsx:20-37
Logo Assets
The component does not hardcode image URLs. Instead, it imports SVG logo files directly from the src/assets/logos/ directory. These imported assets are stored in a logos array, which is then iterated over to render each image.
| Variable Name | Imported Asset |
|---|---|
maerskLogo | maersk.svg |
dhlLogo | dhl.svg |
fedexLogo | fedex.svg |
shopifyLogo | shopify.svg |
walmartLogo | walmart.svg |
siemensLogo | siemens.svg |
Sources: src/components/Trust.jsx:4-9, src/components/Trust.jsx:11-18
Rendering and Animation
The component uses the .map() function to iterate through the logos array and render a motion.img element for each logo. This approach makes it easy to add or remove logos by simply modifying the array.
Each logo image is animated using framer-motion. The animation is triggered when the component scrolls into the user's viewport.
Animation Properties
The following props are configured on the motion.img element to control its animation behavior:
| Prop | Value | Description |
|---|---|---|
initial | { opacity: 0, y: 10 } | The initial state of the logo: invisible and slightly shifted down. |
whileInView | { opacity: 1, y: 0 } | The target state when the logo enters the viewport: fully visible and in its final position. |
viewport | { once: true } | Ensures the animation only runs one time when the component first becomes visible. |
transition | { delay: index * 0.1 } | Creates a staggered effect by delaying the animation of each subsequent logo by 100ms. |
Sources: src/components/Trust.jsx:31-34
Animation Flow
The following sequence diagram shows how the animation is triggered upon user scroll.
Sources: src/components/Trust.jsx:31-34
Styling
Styling is applied using Tailwind CSS utility classes. The component has a dark background (bg-[#050505]) which is consistent with the primary background color defined in the application's global stylesheet.
Key styling classes include:
grayscale: Renders the logos in black and white by default.hover:grayscale-0: Removes the grayscale filter on hover, revealing the logo's original colors.brightness-0 invert: These classes are used to make the SVG logos white to contrast with the dark background.hover:brightness-100: On hover, this class (in combination withgrayscale-0) restores the original logo appearance.
Sources: src/components/Trust.jsx:20, src/components/Trust.jsx:28, src/components/Trust.jsx:36, src/index.css:7
Application Integration
The Trust component is integrated into the main application layout within App.jsx. It is placed between the Hero and Solutions components, serving as a bridge of social proof after the initial value proposition.
This diagram shows the component's position in the application's component tree.
Sources: src/App.jsx:13-22
The following code snippet from App.jsx shows its direct usage:
// src/App.jsx:11-23
function App() {
return (
<div className="min-h-screen bg-[#050505] text-white selection:bg-blue-500/30">
<Navbar />
<main>
<Hero />
<Trust />
<Solutions />
<Features />
<Integrations />
<Testimonials />
<CostCalculator />
<Pricing />
<CTA />
</main>
<Footer />
</div>
);
}
Sources: src/App.jsx:11-23
Dependencies
The component relies on two key external libraries defined in package.json.
| Dependency | Version | Usage |
|---|---|---|
react | ^19.2.0 | The core library for building the component. |
framer-motion | ^12.23.24 | Provides the motion.img component for animation. |