Website Pages Overview
Relevant source files
The following files were used as context for generating this wiki page:
The Grapevine website is a Next.js application built with TypeScript and styled with Tailwind CSS. It serves as the primary marketing and information hub for the Grapevine platform. The site is structured using the Next.js App Router, with a strong emphasis on component-based architecture, Search Engine Optimization (SEO) through structured data, and tailored content for different audience segments.
The pages are broadly categorized into marketing pages (Home, Product, TMCs, Corporate), informational pages (About, Resources), legal pages (Privacy, Terms, Cookies), and functional pages (Contact). A consistent layout, defined in app/layout.tsx, wraps all pages, providing a shared header, footer, and global metadata.
Core Architecture
Root Layout and Structure
The main entry point for the page structure is app/layout.tsx. This file defines the root HTML structure for every page on the site.
- Global Styles & Fonts: It imports the global stylesheet (
globals.css) and defines a local font, "Ambit", which is applied throughout the application. - Metadata: It exports a
metadataobject that sets default SEO metadata for the entire site, including title templates, descriptions, keywords, Open Graph data, and Twitter cards. This configuration is sourced fromlib/seo.ts. - Component Structure: The
RootLayoutcomponent wraps all child pages. It consistently renders the<Header />and<Footer />components, ensuring a uniform navigation experience. - SEO Schema: It injects a global
OrganizationJSON-LD schema on every page using thegenerateOrganizationSchemafunction fromlib/seo.ts.
This diagram illustrates the structure of the root layout.
Sources: app/layout.tsx, lib/seo.ts:4-21
Page Routing and Sitemap
The website uses the Next.js App Router convention, where directories within the app/ folder map directly to URL routes. The app/sitemap.ts file programmatically generates the sitemap.xml file, defining the priority and change frequency for each page.
This diagram shows the high-level page structure based on the app directory and sitemap.ts.
The sitemap configuration provides metadata for search engine crawlers.
| URL Path | Priority | Change Frequency |
|---|---|---|
/ | 1.0 | weekly |
/about | 0.8 | monthly |
/product | 0.9 | weekly |
/tmcs | 0.9 | weekly |
/corporate | 0.9 | weekly |
/resources | 0.7 | weekly |
/contact | 0.8 | monthly |
/policy/privacy | 0.3 | yearly |
/policy/cookies | 0.3 | yearly |
/policy/terms | 0.3 | yearly |
Sources: app/sitemap.ts:4-68
SEO and Structured Data
A central part of the website's architecture is its SEO implementation, managed primarily by lib/seo.ts. This file provides site-wide configuration and functions to generate various schema.org JSON-LD structured data types.
Site Configuration
The siteConfig object centralizes key information used for metadata and schemas across the site.
// lib/seo.ts
export const siteConfig = {
name: "Grapevine",
description:
"Grapevine detects gaps in itineraries and sends personalised prompts that encourage traveller to book in-platform, driving compliance for corporates and revenue for TMCs.",
url: process.env.NEXT_PUBLIC_APP_URL || "https://grapevine.travel",
ogImage: "/images/og-image.png",
xHandle: "grapevine_trvl",
linkedInUrl: "https://www.linkedin.com/company/grapevinetravel",
locale: "en_GB",
keywords: [
// ...
],
};
Sources: lib/seo.ts:1-21
Schema Generation
The file provides TypeScript interfaces and generator functions for multiple schema types, which are then used within individual page components to inject context-specific JSON-LD data.
This diagram shows the different schema types generated by lib/seo.ts.
Each page component calls the relevant generator and renders the output using a <JsonLd /> component. For example, the product page generates SoftwareApplication and BreadcrumbList schemas.
// app/product/page.tsx
export default function ProductsPage() {
const softwareSchema = generateSoftwareSchema();
const breadcrumbSchema = generateBreadcrumbSchema([
{ name: "Home", path: "/" },
{ name: "Product" },
]);
return (
<>
<JsonLd data={softwareSchema} />
<JsonLd data={breadcrumbSchema} />
{/* ... rest of the page */}
</>
);
}
Sources: lib/seo.ts:23-198, app/product/page.tsx:23-33
Page Analysis
Marketing & Informational Pages
These pages are designed to inform potential customers about the Grapevine product. They are highly componentized, reusing elements like Hero, AlternatingContent, Features, and CtaSection with different props to tailor the content.
Home Page (app/page.tsx)
The home page serves as a general entry point, providing value propositions for all key stakeholders (TMCs, Corporates, EAs, Travellers). It is composed of several distinct components to guide the user through the product's offerings.
- Components Used:
HeroPartners,Features,AlternatingContent,StatsSection,ProofPoints,CtaSection. - SEO: Injects a
WebSiteschema.
Sources: app/page.tsx
Product Page (app/product/page.tsx)
This page provides a deep dive into the platform's technical architecture and features. It details the five layers of the platform and the four key functions: Detect, Engage, Support, and Report.
- Components Used:
HeroPlatform,AlternatingContent,StepSection,MarketplaceOverview,CtaSection. - SEO: Injects
SoftwareApplicationandBreadcrumbListschemas.
Sources: app/product/page.tsx
Audience-Specific Pages (/tmcs, /corporate)
The /tmcs and /corporate pages tailor the marketing message to specific audiences. They reuse many of the same components as the home and product pages but with content and statistics relevant to either Travel Management Companies or corporate clients.
/tmcs: Focuses on revenue growth and automation for TMCs. Injects aServiceschema for "Travel Management Software"./corporate: Focuses on compliance, duty of care, and supporting employees for corporate clients. Injects aServiceschema for "Corporate Travel Management".
Sources: app/tmcs/page.tsx, app/corporate/page.tsx
Functional Pages
Contact Page (app/contact/page.tsx)
The contact page features a "discovery call" form. The form component (components/contact-form.tsx) handles state management, validation, and submission.
- Form Logic: The
ContactFormcomponent usesuseStatefor form data, errors, and submission status. It performs client-side validation before sending aPOSTrequest to the/api/contactendpoint. - SEO: Injects
ContactPageandBreadcrumbListschemas.
The following sequence diagram illustrates the contact form submission process.
Legal Pages (/policy/*)
The website includes standard legal pages for Terms & Conditions, Privacy Policy, and Cookies Policy. These pages are located under app/policy/. They are primarily static content rendered within a standard layout, with prose styling applied for readability. They contain important links to each other.
app/policy/terms/page.tsx: Links to the Privacy Notice and Acceptable Use Policy.app/policy/privacy/page.tsx: Links to the Cookie Policy.app/policy/cookies/page.tsx: Explains the types of cookies used.
Sources: app/policy/terms/page.tsx, app/policy/privacy/page.tsx, app/policy/cookies/page.tsx
Shared Components
Footer
The Footer component (components/footer.tsx) is displayed on every page and contains navigation links, contact information, and social media links. The links are organized into categories.
| Category | Links |
|---|---|
| Platform | Corporate, TMCs, Product |
| Company | About us, Contact |
| Legal | Privacy Policy, Cookies Policy |
The footer also includes additional legal links (Terms & Conditions, Privacy Policy) and social links to LinkedIn and X (Twitter).
Sources: components/footer.tsx:13-31, components/footer.tsx:82-109