Content Display Components
Relevant source files
The following files were used as context for generating this wiki page:The Grapevine website utilizes a set of modular, reusable React components to construct its various marketing and informational pages. These components are designed to present content in a structured, visually consistent, and engaging manner. They encapsulate specific presentation patterns, such as alternating text and images, feature showcases, step-by-step guides, and unique selling proposition highlights.
These components are composed together on pages like the Homepage (app/page.tsx), Product page (app/product/page.tsx), and About page (app/about/page.tsx) to build the user interface. Each component accepts a set of props to define its content and appearance, promoting reusability and a consistent design language across the site. All components are wrapped with AnimateOnScroll to provide fade-in animations as the user scrolls them into view.
AlternatingContent Component
This component is used to display a series of sections where each section typically contains an image and a list of textual items. The layout of the image and text alternates for each consecutive section, creating a visually balanced page flow.
Sources: components/alternating-content.tsx, app/page.tsx:28-69, app/product/page.tsx:83-176
Data Structure
The component's content is primarily driven by the sections prop, which is an array of AlternatingContentSection objects.
This diagram shows the props structure for the AlternatingContent component and its nested section and item types.
Sources: components/alternating-content.tsx:10-29
Props
| Prop | Type | Description |
|---|---|---|
title | React.ReactNode | The main title for the entire component block. |
subtitle | string (optional) | A subtitle displayed below the main title. |
sections | AlternatingContentSection[] | An array of section objects to be rendered. |
headerAlign | "left" | "center" (optional) | Alignment for the main title and subtitle. Defaults to left. |
Sources: components/alternating-content.tsx:31-37
Usage
The component is used on the homepage to showcase benefits for different stakeholders (TMCs, Corporates, EAs, Travellers) and on the product page to detail the "Detect", "Engage", "Support", and "Report" features.
Sources: app/page.tsx:100-109, app/product/page.tsx:83-176
Features Component
The Features component is a sophisticated, interactive element designed to showcase a series of features or steps. It has distinct layouts for mobile and desktop. On mobile, it's a swipeable carousel. On desktop, it's a two-column layout where clicking a feature on the left updates the image on the right. It also includes an optional "pillars" section at the bottom.
Sources: components/features.tsx
Data Structure
The component is configured through FeaturesProps, which includes arrays for steps and pillars.
This diagram illustrates the props interface for the Features component, detailing the structure of steps and pillars.
Sources: components/features.tsx:10-28
Interactive Logic
The component features an auto-play mechanism that cycles through the steps. This auto-play is paused on user interaction (click, swipe) and resumes after a timeout.
This flowchart shows the logic for the auto-play feature and how user interaction temporarily pauses it.
Sources: components/features.tsx:47-60, components/features.tsx:70-80
Props
| Prop | Type | Description |
|---|---|---|
steps | FeatureStep[] | Array of feature steps to display in the interactive section. |
pillars | Pillar[] (optional) | Array of "pillars" to display in a grid below the main features section. |
autoPlayInterval | number (optional) | The interval in milliseconds for auto-playing features. Default is 4000. |
Sources: components/features.tsx:29-41
StepSection Component
A simple component for displaying a numbered list of steps, each with a title and description. It's used to outline a process, such as the integration workflow on the product page.
Sources: components/step-section.tsx, app/product/page.tsx:177-196
Data Structure
This diagram shows the props for the StepSection component.
Sources: components/step-section.tsx:10-20
Props
| Prop | Type | Description |
|---|---|---|
subtitle | string (optional) | A subtitle appearing above the main title. |
title | React.ReactNode | The main title for the section. |
description | React.ReactNode | A description appearing below the title. |
steps | Step[] | An array of step objects to be rendered as a list. |
footerText | string (optional) | A concluding text displayed below the steps. |
Sources: components/step-section.tsx:22-30
Usp (Unique Selling Proposition) Component
This component is designed to highlight key benefits or value propositions. It displays a list of items, each with an icon, title, and description, arranged in a grid.
Sources: components/usp.tsx, app/about/page.tsx:35-56
Data Structure
This diagram outlines the props structure for the Usp component.
Sources: components/usp.tsx:10-20
Props
| Prop | Type | Description |
|---|---|---|
variant | "light" | "dark" (optional) | The color scheme variant. Defaults to dark. |
subtitle | string (optional) | A subtitle for the section. |
title | React.ReactNode | The main title for the section. |
description | React.ReactNode (optional) | A paragraph of text below the title. |
items | UspItem[] | An array of USP items to display in a grid. |
Sources: components/usp.tsx:22-30
MarketplaceOverview Component
This is a highly visual component used on the product page to illustrate the "Grapevine Marketplace". It features a central animated graphic with orbiting icons, a list of features, a grid of content types, and a set of "Why it matters" cards.
Sources: components/marketplace-overview.tsx, app/product/page.tsx:197-254
Data Structure
The component's structure is complex, with several nested data types for its different visual sections.
This diagram shows the comprehensive props interface for the MarketplaceOverview component.
Sources: components/marketplace-overview.tsx:10-33
Animation and Layout
- Circular Diagram: A central icon is surrounded by a rotating dashed circle. Smaller icons are positioned around this circle and animate into view. This is achieved using
framer-motionfor rotation and staggered appearance animations.
Sources: components/marketplace-overview.tsx:77-147 - Feature List: A simple bulleted list of key features.
Sources: components/marketplace-overview.tsx:153-182 - Content Grid: A grid displaying various content types available in the marketplace (e.g., Hotels, Transfers).
Sources: components/marketplace-overview.tsx:188-215 - USP Cards: A three-column grid of cards at the bottom, explaining the importance of the marketplace.
Sources: components/marketplace-overview.tsx:221-249
Conclusion
The content display components in the Grapevine website project form a robust and flexible system for building pages. By abstracting common UI patterns into reusable components with well-defined props, the codebase maintains consistency, simplifies page creation, and separates content from presentation. These components are fundamental to the website's marketing and informational architecture.