Trust & Partner Components
Relevant source files
The following files were used as context for generating this wiki page:
The Trust & Partner components are a suite of React components designed to build credibility and showcase social proof on the Grapevine website. Their primary purpose is to display testimonials, partner logos, company values, and key performance statistics to establish trust with prospective clients, including Travel Management Companies (TMCs) and corporate customers.
These components are strategically placed on high-value marketing pages such as the "About", "TMCs", "Corporate", and home pages to reinforce the company's value proposition and market position. They are built using TypeScript, Tailwind CSS, and Framer Motion for animations.
Component Overview
The following diagram illustrates how different pages consume the primary trust-building components.
TrustPartners Component
The TrustPartners component is used to display information about the company's backers, partners, and core values. It combines a text header, a partner logo carousel, and a grid of "value cards".
Sources: components/trust-partners.tsx
Component Structure
The component renders its sections in a clear, vertical flow, with each part animated on scroll.
Sources: components/trust-partners.tsx:29-73
Props
The component's behavior and content are configured through the TrustPartnersProps interface.
| Prop | Type | Description |
|---|---|---|
title | React.ReactNode | The main heading for the section. |
description | React.ReactNode | The descriptive text appearing below the title. |
valueSectionTitle | string | An optional subtitle for the values section (e.g., "What drives us?"). |
valueCards | ValueCard[] | An array of objects defining the company's core values. |
className | string | Optional CSS classes to apply to the root element. |
Sources: components/trust-partners.tsx:15-22
Data Structures
ValueCard Interface
This interface defines the shape of each card in the values grid.
| Field | Type | Description |
|---|---|---|
icon | IconName | The name of the Lucide icon to display. |
title | string | The title of the value (e.g., "Relentless curiosity"). |
description | string | A short description of the value. |
Sources: components/trust-partners.tsx:9-13
Usage
The TrustPartners component is used on the "About" page to showcase investors, advisors, and partners, along with the company's driving principles.
Sources: app/about/page.tsx:112-139
TrustBuilder Component
The TrustBuilder component is a versatile module that pairs a prominent feature callout with a collection of testimonials. It is designed to highlight a specific benefit or feature and immediately back it up with social proof.
Sources: components/trust-builder.tsx
Props
The component is configured via the TrustBuilderProps interface.
| Prop | Type | Description |
|---|---|---|
featureSubtitle | string | Optional subtitle for the feature callout card. |
featureIcon | IconName | Optional Lucide icon to display next to the feature subtitle. |
featureTitle | React.ReactNode | The main title within the feature callout card. |
featureDescription | React.ReactNode | The descriptive text for the feature. |
testimonialsTitle | React.ReactNode | The heading for the testimonials section. |
testimonials | Testimonial[] | An array of testimonial objects. |
className | string | Optional CSS classes. |
Sources: components/trust-builder.tsx:12-20
Data Structures
Testimonial Interface
This interface defines the structure for each testimonial.
| Field | Type | Description |
|---|---|---|
quote | string | The text of the testimonial. |
author | string | The name and/or title of the person quoted. |
Sources: components/trust-builder.tsx:7-10
Dynamic Layout Logic
The TrustBuilder component implements a dynamic grid layout for testimonials using the getGridClasses function. The layout adapts based on the number of testimonials to ensure an optimal presentation.
- 1 Testimonial: A single-column grid.
- 2 or 3 Testimonials: A multi-column grid (
md:grid-cols-2ormd:grid-cols-3). - 4+ Testimonials: A masonry-style layout using
columns-1 md:columns-2 lg:columns-3.
Sources: components/trust-builder.tsx:26-36
This logic can be visualized as follows:
Sources: components/trust-builder.tsx:26-36
Usage
This component is used on both the /tmcs and /corporate pages to pair a key feature with relevant testimonials from that specific audience.
- On
/tmcs: It highlights the "Easy to integrate" feature and shows quotes from TMC executives.
Sources: app/tmcs/page.tsx:110-135 - On
/corporate: It explains that "Grapevine works through your TMC" and provides testimonials from roles like "Global Travel Manager" and "Frequent Business Traveller".
Sources: app/corporate/page.tsx:117-139
ProofPoints Component
The ProofPoints component is designed to present hard data and social proof in a visually impactful way. It primarily features a grid of key statistics ("impact stats") and can also include a masonry grid of testimonials.
Sources: components/proof-points.tsx
Props
| Prop | Type | Default Value | Description |
|---|---|---|---|
title | React.ReactNode | "Delivering measurable impact..." | The main heading for the section. |
impactStats | ImpactStat[] | [] | An array of key statistics to display. |
testimonialsCta | string | "See what our customers say..." | Call-to-action text displayed above the testimonials. |
testimonials | Testimonial[] | [] | An array of testimonial objects. |
className | string | undefined | Optional CSS classes. |
Sources: components/proof-points.tsx:15-22
Data Structures
ImpactStat Interface
| Field | Type | Description |
|---|---|---|
value | string | The statistic itself (e.g., "+20%", "95%"). |
label | string | The description of the statistic (e.g., "hotel attachment rate"). |
Sources: components/proof-points.tsx:10-13
Usage
The ProofPoints component is used on the home page (/) to immediately establish credibility with high-impact metrics such as increased hotel attachment rate and traveller satisfaction.
Sources: app/page.tsx:81-89
Conclusion
The TrustBuilder, TrustPartners, and ProofPoints components form a cohesive system for building brand credibility and user trust. By consistently and strategically deploying testimonials, partner logos, and data-driven proof points, these components play a critical role in the website's marketing narrative. Their modular design and prop-based configuration allow for flexible use across different pages, tailored to specific audiences while maintaining a consistent visual language.