Data & Stats Components
Relevant source files
The following files were used as context for generating this wiki page:The Data & Stats components are a collection of reusable React components designed to display key statistics, performance metrics, and social proof across the Grapevine website. These components are purely presentational, receiving all their data via props, which makes them highly configurable for different contexts. They are used on various pages to highlight industry trends, showcase Grapevine's impact, and build trust with potential customers.
These components are animated using the AnimateOnScroll wrapper to provide visual effects like fading in or scaling as the user scrolls them into view. They are built using TypeScript and styled with Tailwind CSS.
Component Overview
The system consists of three main components for displaying statistical data: StatsSection, StatsHighlight, and ProofPoints. Each serves a slightly different purpose and has a distinct visual style.
The following diagram illustrates how page components pass data to the stats components.
StatsSection
The StatsSection component is designed to present a series of key statistics related to industry trends or market data. It typically features a light background (variant="light") and is used to educate visitors about the market context.
Sources: components/stats-section.tsx:1-76
Properties
The component accepts the following props to customize its content and appearance.
| Prop | Type | Description | Default Value - |
|---|---|---|---|
subtitle | string | An optional subtitle displayed above the main title. | "Why now?" - |
title | React.ReactNode | The main title of the section. | "Because corporate travel is changing. So are traveller expectations." - |
description | string | A paragraph of text appearing below the title. | "TMCs need to grow margins... The data tells the story:" - |
stats | Stat[] | An array of stat objects, where each object has a value and description. | [{ value: "70%", description: "of hotel bookings are made outside managed channels¹" }, ...] - |
className | string | Optional CSS classes for additional styling. | undefined - |
Sources: components/stats-section.tsx:8-28
Usage Example
The StatsSection is used on the homepage (app/page.tsx) to provide context on the state of corporate travel.
// In app/page.tsx
<StatsSection />
This renders the component with its default props. The data for the stats, such as "70% of hotel bookings are made outside managed channels¹", is defined directly within the component as a default prop.
Sources: app/page.tsx:82, components/stats-section.tsx:24-28
StatsHighlight
The StatsHighlight component is used to draw attention to specific, high-impact statistics, often related to Grapevine's performance. It uses a dark background (variant="navy") for visual contrast.
Sources: components/stats-highlight.tsx:1-46
Properties
| Prop | Type | Description |
|---|---|---|
subtitle | string | An optional subtitle displayed above the main title. |
title | React.ReactNode | The main title of the section. |
description | React.ReactNode | A paragraph of text appearing below the title. |
stats | Stat[] | An array of stat objects, where each object has a value and label. |
className | string | Optional CSS classes for additional styling. |
Sources: components/stats-highlight.tsx:8-15
Data Structure
The stats prop expects an array of objects with value and label keys.
interface Stat {
value: string;
label: string;
}
Sources: components/stats-highlight.tsx:4-7
Usage Example
On the TMC page (app/tmcs/page.tsx), StatsHighlight is used to showcase the revenue and profit uplift Grapevine provides.
// In app/tmcs/page.tsx
<StatsHighlight
subtitle="Why now?"
title="Airline margins are falling, and traveller expectations are rising."
description="To stay competitive, TMCs need to capture more of the trip and offer a modern, connected experience. Grapevine's technology offers:"
stats={[
{ value: "+31%", label: "uplift in revenue per-trip" },
{ value: "+110%", label: "uplift profit per-trip" },
{ value: "< 4 hours", label: "to go live" },
]}
/>
Sources: app/tmcs/page.tsx:71-79
ProofPoints
The ProofPoints component is a versatile section for displaying both quantitative impact statistics and qualitative testimonials. It helps build credibility by combining hard data with customer quotes. It also features a dark background similar to StatsHighlight.
Sources: components/proof-points.tsx:1-91
Component Logic
This diagram shows the conditional rendering logic within the ProofPoints component.
Sources: components/proof-points.tsx:41-89
Properties
| Prop | Type | Description | Default Value - |
|---|---|---|---|
title | React.ReactNode | An optional main title for the section. | "Delivering measurable impact for leading travel partners." - |
impactStats | ImpactStat[] | An array of stat objects with value and label. | [] (empty array) - |
testimonialsCta | string | Text for the link that scrolls to the testimonials section. | "See what our customers say..." - |
testimonials | Testimonial[] | An array of testimonial objects with quote and author. | [] (empty array) - |
className | string | Optional CSS classes for additional styling. | undefined - |
Sources: components/proof-points.tsx:15-24
Usage Example
On the homepage, ProofPoints is used to display key performance indicators like hotel attachment rate and traveller satisfaction. The testimonials prop is commented out in the source, indicating it's available but not currently in use on this page.
// In app/page.tsx
<ProofPoints
impactStats={[
{ value: "+20%", label: "hotel attachment rate" },
{ value: "95%", label: "traveller satisfaction" },
{ value: "100%", label: "in-policy bookings" },
]}
// testimonials={[...]}
/>
Sources: app/page.tsx:83-89
Summary
The Data & Stats components provide a standardized and visually appealing way to present numerical data and testimonials. By encapsulating the display logic and styling, they allow developers to easily add impactful statistical sections to any page with minimal effort. Their reliance on props for data ensures a clean separation of concerns and promotes reusability throughout the website.