Resources Page
Relevant source files
The following files were used as context for generating this wiki page:The Resources page, accessible at the /resources route, serves as a content hub for the Grapevine website. Its primary purpose is to showcase valuable materials such as reports, case studies, and guides. These resources are targeted at corporates, Travel Management Companies (TMCs), and the broader travel community to provide insights and demonstrate thought leadership.
The page is constructed using a modular approach, combining several React components to create the final layout. It features a hero section, a grid of featured resources, and a newsletter signup form.
Sources: app/resources/page.tsx:1-55
Page Architecture and Components
The /resources page is built by composing three main child components within a primary page component. The data for the resources is currently hardcoded within the page component and passed down as props.
Sources: app/resources/page.tsx:16-55
Component Hierarchy
The following diagram illustrates the component structure of the Resources page.
This diagram shows how the Resources page component assembles the Hero, FeaturedResources, and NewsletterSignup components within the site's main RootLayout.
Sources: app/resources/page.tsx:18-53, app/layout.tsx:100-104
Page Components
| Component | File | Purpose |
|---|---|---|
Resources | app/resources/page.tsx | The main page component that defines the layout and passes data to child components. |
Hero | components/hero.tsx | Displays the main title and subtitle for the page. |
FeaturedResources | components/featured-resources.tsx | Renders a grid of downloadable resources like case studies and reports. |
NewsletterSignup | components/newsletter-signup.tsx | A call-to-action component for users to subscribe to a newsletter. |
Sources: app/resources/page.tsx:3-5
Metadata and SEO
The Resources page is configured with specific metadata for search engine optimization. This includes a title, description, and a canonical URL to prevent duplicate content issues. The page is also included in the site's sitemap to ensure it is indexed by search engines.
Page-Specific Metadata
The metadata is defined directly within the page file.
| Property | Value |
|---|---|
title | Resources |
description | Explore insights for smarter business travel. Access reports, case studies, and thought leadership for corporates, TMCs, and the travel community. |
alternates.canonical | /resources |
The final page title is constructed using the template Grapevine - %s, resulting in "Grapevine - Resources".
Sources: app/resources/page.tsx:7-13, app/layout.tsx:71-74, lib/seo.ts:2-3
Sitemap Configuration
The page is registered in the sitemap with a specific priority and change frequency, signaling its importance to search crawlers.
| Property | Value |
|---|---|
url | /resources |
changeFrequency | weekly |
priority | 0.7 |
Sources: app/sitemap.ts:38-43
Featured Resources Component
The <FeaturedResources /> component is the core element of the page, responsible for displaying a grid of resource cards.
Sources: components/featured-resources.tsx
Properties (Props)
The component accepts a resources array to render the content.
| Prop | Type | Description |
|---|---|---|
title | string | (Optional) The title to display above the resource grid. Defaults to "Featured Resources". |
resources | Resource[] | An array of resource objects to be displayed. |
className | string | (Optional) CSS classes for custom styling of the container. |
Sources: components/featured-resources.tsx:14-19
Data Structures
The component relies on the Resource interface to structure the data for each card.
// components/featured-resources.tsx:5-12
interface Resource {
type: "Case Study" | "Report" | "Guide";
title: string;
description: string;
image: string;
downloadLink: string;
}
Sources: components/featured-resources.tsx:5-12
Dynamic Badge Styling
A helper function, getBadgeStyles, is used to apply different CSS classes to the resource type badge based on its value. This allows for visual distinction between "Case Study", "Report", and "Guide".
The logic of this function is as follows:
This flowchart shows the conditional logic for styling resource badges based on their type.
Sources: components/featured-resources.tsx:23-32
Data Flow
The data for the resources is currently hardcoded as an array of objects within the app/resources/page.tsx file. This array is then passed as a prop to the <FeaturedResources /> component.
This diagram illustrates that the resource data originates from a hardcoded array in the page component and flows into the FeaturedResources component via props.
The following snippet from app/resources/page.tsx shows how the data is defined and passed:
// app/resources/page.tsx:18-52
<FeaturedResources
resources={[
{
type: "Case Study",
title: "How Grapevine increased hotel attachment by 30%",
description:
"Real-world example of revenue growth through proactive communications and AI-native support.",
image: "/images/resources/resource-01.png",
downloadLink: "#download-case-study",
},
// ... more resource objects
]}
/>
Sources: app/resources/page.tsx:18-52