Project Overview
Relevant source files
The following files were used as context for generating this wiki page:The grapevine_website project is the official marketing and informational website for Grapevine, "The Smart Communications Platform for Business Travel." Built with Next.js and TypeScript, its primary purpose is to articulate the value proposition of the Grapevine platform to various stakeholders, including Travel Management Companies (TMCs), corporate clients, and their employees. The site serves as a lead generation tool through its contact forms and provides essential company and legal information.
The core of the product is an AI-native platform that detects gaps in travel itineraries and engages travellers to drive in-policy bookings, thereby increasing compliance and revenue. The website is designed to showcase this functionality through dedicated pages for different user segments, detailed product descriptions, and clear calls-to-action.
Sources: README.md, lib/seo.ts:2-5, app/page.tsx:11-13
Technology Stack
The project is built on a modern web development stack, leveraging Next.js for its framework and TypeScript for type safety. Styling is handled by Tailwind CSS, with animations powered by Framer Motion.
Sources: README.md:5-10, package.json:14-20
This diagram illustrates the main technologies used in the project.
Sources: README.md:5-10, package.json:14-34
Key Dependencies
The following table outlines the primary dependencies of the project.
| Package | Version | Description |
|---|---|---|
next | 16.0.3 | The React framework for server-rendered applications. |
react | 19.2.0 | A JavaScript library for building user interfaces. |
tailwindcss | 4 | A utility-first CSS framework for styling. |
framer-motion | 12.23.24 | A production-ready motion library for React. |
lucide-react | 0.554.0 | A library for simply beautiful and consistent icons. |
clsx | 2.1.1 | A tiny utility for constructing className strings conditionally. |
tailwind-merge | 3.4.0 | Utility to merge Tailwind CSS classes without style conflicts. |
Sources: package.json:14-20
Project Structure
The repository follows a standard Next.js App Router structure. Key directories include app for pages, components for reusable React components, lib for utility functions, and public for static assets.
This diagram shows the high-level directory structure of the project.
Sources: README.md:29-36, components/contact-form.tsx:103
Core Features
Product Showcase
The website is structured to present the Grapevine product to different audiences. It details the "Grapevine Core Platform" as a vertically integrated system with several layers.
The platform's architecture is described as having five distinct layers:
- Data Layer: Ingests real-time data from GDS, OBT, and other feeds.
- Context Layer: Uses traveller profiles, preferences, and historical data.
- Assistant Layer: Provides a secure, multi-channel conversational AI.
- Marketplace Layer: Contains hotel and ancillary inventory.
- Insight Layer: Offers dashboards for tracking spend, compliance, and engagement.
Sources: app/product/page.tsx:39-65
The site also outlines a four-step process for how the platform works:
- Detect: Identifies gaps in itineraries.
- Engage: Sends personalized prompts to drive in-policy bookings.
- Support: Offers 24/7 conversational AI assistance.
- Report: Provides real-time visibility and dashboards.
Sources: app/product/page.tsx:70-136
Lead Generation
A key function of the website is to generate leads by encouraging visitors to book a discovery call. This is primarily achieved through a contact form.
Contact Form
The contact form, located at /contact, collects user information and submits it to a backend API endpoint.
Form Fields:
- Full name (required)
- Work email (required, validated)
- Company name (required)
- Role (required)
- "I am a" (TMC, Corporate, Investor, Other) (required)
- Message (optional, max 250 chars)
Sources: components/contact-form.tsx:32-44, 150-247
The form includes client-side validation and provides feedback on submission status, including loading states and success/error messages.
This sequence diagram shows the process of submitting the contact form.
Sources: components/contact-form.tsx:88-121
SEO and Structured Data
The project has a comprehensive SEO strategy implemented through Next.js metadata and custom JSON-LD schema generation.
Global Metadata
The root layout sets default metadata for the entire site, including title, description, keywords, Open Graph data, and Twitter cards. This configuration is centralized in lib/seo.ts.
// 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",
// ...
};
Sources: lib/seo.ts:1-10, app/layout.tsx:90-143
JSON-LD Schemas
The application dynamically generates various schema.org JSON-LD objects to provide structured data to search engines. This is managed by a set of functions in lib/seo.ts. An Organization schema is injected into every page via the root layout.
The following schema types are supported:
OrganizationSchemaWebPageSchemaFAQSchemaSoftwareApplicationSchemaBreadcrumbSchemaServiceSchemaContactPageSchemaAboutPageSchema
This class diagram shows the structure of the different schema interfaces defined for JSON-LD.
Sources: lib/seo.ts:18-80, app/layout.tsx:151-155
Legal and Compliance
The website includes several static pages to address legal and compliance requirements. These pages are accessible via the site footer and are linked from relevant sections like the Terms and Conditions.
- Terms & Conditions (
/policy/terms): Governs the use of the website. - Privacy Policy (
/policy/privacy): Details how user data is collected, used, and protected, mentioning the Data Protection Act 2018 and ICO registration. - Cookies Policy (
/policy/cookies): Explains the types of cookies used on the site. - Acceptable Use Policy (
/acceptable-use-policy): Outlines rules and guidelines for using the site and its services.
Sources: app/policy/terms/page.tsx, app/policy/privacy/page.tsx, app/policy/cookies/page.tsx, app/acceptable-use-policy/page.tsx, components/footer.tsx:31-35
Build and Deployment
The project includes standard NPM scripts for development, building, and running the application in a production environment.
NPM Scripts
| Command | Description |
|---|---|
npm run dev | Starts the Next.js development server. |
npm run build | Creates an optimized production build. |
npm run start | Starts the Next.js production server. |
npm run lint | Runs ESLint to check for code quality issues. |
npm run format | Formats code using Prettier. |
Sources: package.json:5-11, README.md:21-27
Conclusion
The grapevine_website is a well-structured, modern marketing website built with Next.js. Its primary goals are to clearly communicate the value of the Grapevine B2B travel platform and to generate qualified leads through a discovery call booking process. The project demonstrates strong practices in component-based architecture, SEO implementation with structured data, and clear separation of concerns between pages, components, and utility functions. The technology stack is contemporary and geared towards performance and developer experience.