Hero Components
Relevant source files
The following files were used as context for generating this wiki page:
The Hero components are a set of reusable React components that form the main banner or introductory section at the top of most pages. Their primary purpose is to capture user attention with a prominent title, a descriptive subtitle, and often a call-to-action (CTA).
The system is built around a generic Hero component, with specialized variants like HeroPartners and HeroPlatform that extend the base functionality for specific use cases, such as displaying partner logos or a detailed platform architecture diagram. These components are consistently styled with a dark (bg-navy) background and utilize animations to enhance user experience.
Core Hero Component
The Hero component, defined in components/hero.tsx, is the foundational building block for all hero sections. It provides a simple and flexible interface for creating a standard hero banner.
Sources: components/hero.tsx
Properties
The Hero component accepts the following props, defined by the HeroProps interface:
| Prop | Type | Default Value | Description |
|---|---|---|---|
title | React.ReactNode | - | Required. The main heading of the hero section. |
subtitle | React.ReactNode | undefined | An optional subheading displayed below the title. |
buttonText | string | undefined | The text for the call-to-action button. If not provided, the button is not rendered. |
buttonHref | string | undefined | The URL the CTA button links to. Required if buttonText is present. |
showDecoration | boolean | true | Controls the visibility of the animated background decoration image. |
className | string | "bg-navy relative overflow-hidden" | Custom CSS classes to apply to the root div element. |
Sources: components/hero.tsx:10-17
Structure and Behavior
The component renders a full-width section with a centered text block. Content elements (title, subtitle, button) are animated to fade in and move up on scroll, using the AnimateOnScroll wrapper component.
The following diagram illustrates the basic structure of the Hero component.
This diagram shows the conditional rendering of the background decoration, subtitle, and CTA button based on the provided props.
Sources: components/hero.tsx:20-53
Usage Example
The Hero component is used on several pages, such as the "About" and "Contact" pages, for a consistent look and feel.
// file: app/about/page.tsx:23-26
<Hero
title="Building the future of business travel, together."
subtitle="Grapevine is the AI-native assistant that keeps business travellers compliant, supported, and in-policy - always available at their fingertips."
/>
Sources: app/about/page.tsx:23-26
Specialized Hero Variants
To cater to specific page requirements, two specialized variants of the Hero component exist: HeroPartners and HeroPlatform.
HeroPartners Component
This component, defined in components/hero-partners.tsx, is designed for the homepage. It extends the core hero by adding a section for displaying partner logos in a carousel.
Sources: components/hero-partners.tsx
Properties
The HeroPartnersProps interface defines its properties:
| Prop | Type | Default Value | Description |
|---|---|---|---|
title | React.ReactNode | "Drive in-platform bookings..." | The main heading. |
subtitle | string | "Grapevine detects gaps..." | The subheading. |
buttons | HeroButton[] | [{ text: "I'm a TMC", href: "/tmcs" }, { text: "I'm a Corporate", href: "/corporate" }] | An array of objects to create multiple CTA buttons. |
partnerText | string | "Trusted by leading TMCs..." | A line of text displayed above the partner logo carousel. |
showPartners | boolean | true | Toggles the visibility of the partner carousel section. |
Sources: components/hero-partners.tsx:13-21
Structure and Usage
It renders the standard hero content (title, subtitle, buttons) and, if showPartners is true, it includes a PartnerCarousel component below the main text block.
This diagram shows how HeroPartners composes the standard hero content with an optional partner logo section.
It is used on the main homepage (app/page.tsx).
// file: app/page.tsx:50-50
<HeroPartners />
Sources: app/page.tsx:50
HeroPlatform Component
This is a more complex variant used on the Product page (app/product/page.tsx) to showcase the platform's architecture. It's defined in components/hero-platform.tsx.
Sources: components/hero-platform.tsx
Properties
The HeroPlatformProps interface defines its properties:
| Prop | Type | Description |
|---|---|---|
title | React.ReactNode | Required. The main heading for the top section. |
subtitle | React.ReactNode | An optional subheading for the top section. |
platformTitle | React.ReactNode | Required. The title for the second "Platform Architecture" section. |
platformSubtitle | React.ReactNode | Required. The subtitle for the "Platform Architecture" section. |
layers | PlatformLayer[] | Required. An array of objects describing each layer of the platform. |
showDecoration | boolean | Controls the visibility of the background decoration. |
Sources: components/hero-platform.tsx:15-24
The layers prop expects an array of PlatformLayer objects with the following structure:
| Field | Type | Description |
|---|---|---|
icon | IconName | The name of the Lucide icon to display. |
title | string | The title of the layer. |
description | string | A short description of the layer. |
Sources: components/hero-platform.tsx:9-13
Structure and Usage
This component is divided into two main parts:
- A standard hero section at the top.
- A "Platform Architecture" section below, which includes:
- A title and subtitle.
- An SVG graphic (
CorePlatformGraphic). - A grid of "Platform Layers" rendered from the
layersprop.
This diagram shows the two-part structure of the HeroPlatform component.
It is used on the product page to provide a detailed overview of the Grapevine platform.
// file: app/product/page.tsx:34-70
<HeroPlatform
title={
<>
The AI-native platform
<br />
built for business travel.
</>
}
subtitle="A vertically integrated, real-time, zero-trust Customer Data Platform powering an intelligent ancillary marketplace."
platformTitle={
<>
Grapevine Core Platform.
<br />
<span className="text-primary">Data</span> in,{" "}
<span className="text-primary">Intelligence</span> out.
</>
}
platformSubtitle="Grapevine unites trip data, supplier content, and conversational AI to deliver personalised, in-policy traveller experiences - all within a secure walled garden that combines the intelligence of public LLMs with the context, control, and compliance of an enterprise environment."
layers={[
{
icon: "send",
title: "Data Layer",
description: "Real-time ingestion from GDS, OBT, mid- and back-office feeds.",
},
// ... other layers
]}
/>
Sources: app/product/page.tsx:34-70
Styling and Animation
All hero components share a common visual foundation and use animations for a dynamic presentation.
- Styling: The components are styled using Tailwind CSS. The default
classNamesets abg-navybackground and makes the container a relative positioning context (relative overflow-hidden). - Animation: The
AnimateOnScrollcomponent is used extensively to wrap content elements. This component applies fade-in and slide-up effects as the user scrolls them into view. - Decoration: A decorative SVG (
/images/hero-decoration.svg) is positioned in the background and animated with afade-lefteffect. This can be disabled by setting theshowDecorationprop tofalse.
Sources: components/hero.tsx:20-34, components/hero-platform.tsx:27-37, components/hero-partners.tsx:28-38
Conclusion
The Hero component family provides a robust and extensible system for creating the primary visual entry point for pages across the website. By using a base component and specialized variants, the architecture promotes code reuse while allowing for tailored experiences on key pages like the homepage and product page. The consistent use of animation and styling ensures a cohesive and professional user experience.