Legal & Policy Pages
Relevant source files
The following files were used as context for generating this wiki page:
The Legal & Policy pages are a set of static content pages within the Grapevine website that provide users with essential legal information, terms of use, and data handling practices. These pages are built as React Server Components using the Next.js App Router, ensuring fast load times and optimal SEO performance. Their primary purpose is to outline the legal framework governing the use of the website and services, including the Privacy Policy, Terms & Conditions, Cookies Policy, and Acceptable Use Policy.
These pages are styled using Tailwind CSS, specifically leveraging the @tailwindcss/typography plugin (prose classes) for clean, readable formatting of long-form text content. They are crucial for legal compliance and establishing trust with users by being transparent about company policies.
Architecture and File Structure
The policy pages are implemented using the file-system-based routing of the Next.js App Router. Each policy has its own directory containing a page.tsx file, which defines the React component for that route.
Sources: app/policy/privacy/page.tsx, app/policy/terms/page.tsx, app/policy/cookies/page.tsx, app/acceptable-use-policy/page.tsx
Page Routing
The following diagram illustrates how directory structure maps to URL paths for the legal pages.
This diagram shows the mapping from file paths to the final URL routes for each policy page.
Sources: app/acceptable-use-policy/page.tsx, app/policy/cookies/page.tsx, app/policy/privacy/page.tsx, app/policy/terms/page.tsx
Policy Page Summary
| Policy Page | Route | File Path | Purpose |
|---|---|---|---|
| Acceptable Use Policy | /acceptable-use-policy | app/acceptable-use-policy/page.tsx | Defines rules and guidelines for using the Grapevine website and services. |
| Terms & Conditions | /policy/terms | app/policy/terms/page.tsx | Outlines the terms on which users may use the site. |
| Privacy Policy | /policy/privacy | app/policy/privacy/page.tsx | Informs users how their personal data is collected, used, and protected. |
| Cookies Policy | /policy/cookies | app/policy/cookies/page.tsx | Explains the use of cookies and similar technologies on the website. |
Sources: app/acceptable-use-policy/page.tsx:3-9, app/policy/terms/page.tsx:3-9, app/policy/privacy/page.tsx:3-9, app/policy/cookies/page.tsx:3-9
Page Implementation
Each policy page is a default-exported React Server Component. The structure is straightforward, consisting of nested div elements for layout and styling, with the main content wrapped in a div with prose prose-navy classes for typography styling.
Sources: app/policy/privacy/page.tsx:16-21, app/policy/terms/page.tsx:18-23, app/policy/cookies/page.tsx:18-23, app/acceptable-use-policy/page.tsx:18-23
Component Structure
The basic JSX structure for each policy page is consistent.
This diagram shows the typical DOM structure of a policy page component.
Sources: app/acceptable-use-policy/page.tsx:18-23, app/policy/cookies/page.tsx:18-23
Inter-Policy Linking
The legal documents are interconnected. For instance, the Terms & Conditions page explicitly links to the Privacy Notice and the Acceptable Use Policy, creating a cohesive legal framework that users agree to by using the site.
// app/policy/terms/page.tsx:40-46
<p className="text-body mb-8">
Please read these Terms and Conditions carefully before you start to use the site. By
using the site, you accept and agree to be bound and abide by these Terms and
Conditions, our{" "}
<a href="/policy/privacy" className="text-primary hover:underline">
Privacy Notice
</a>
. If you do not accept them, please do not use the site.
</p>
// app/policy/terms/page.tsx:82-86
<p className="text-body mb-6">
You agree to follow our{" "}
<a href="/acceptable-use-policy" className="text-primary hover:underline">
Acceptable Use Policy
</a>
.
</p>
The Privacy Policy also links to the Cookie Policy.
// app/policy/privacy/page.tsx:160-166
<p className="text-body mb-8">
Our website uses cookies to distinguish you from other users of our website. This helps
us to provide you with a good experience when you browse our website and allows us to
improve our website. This website uses a cookie control system which you accept on your
first site visit. For detailed information on the cookies we use and the purposes for
which we use them, see our{" "}
<a href="/policy/cookies" className="text-primary hover:underline">
Cookie Policy
</a>
.
</p>
Sources: app/policy/terms/page.tsx:40-46, 82-86, app/policy/privacy/page.tsx:160-166
Metadata and SEO
Each policy page exports a Metadata object from the next package. This object is used by Next.js to populate the <head> of the HTML document, which is critical for SEO.
Metadata Configuration
The Metadata object in each file configures the page's title, description, canonical URL, and robot indexing rules.
| Property | Type | Description | Example Value (Privacy Policy) |
|---|---|---|---|
title | string | The title of the page, displayed in the browser tab and search results. | Grapevine - Privacy Policy |
description | string | A brief summary of the page's content for search engine snippets. | Learn how Grapevine collects, uses... |
alternates | object | Specifies alternative versions of the page, like the canonical URL. | { canonical: "/policy/privacy" } |
robots | object | Instructions for search engine crawlers. | { index: true, follow: true } |
Sources: app/policy/privacy/page.tsx:3-13, app/policy/terms/page.tsx:3-13, app/policy/cookies/page.tsx:3-13, app/acceptable-use-policy/page.tsx:3-13, lib/seo.ts
The following diagram shows the process of how metadata is generated and served for a policy page.
This sequence illustrates how a user request for a policy page results in an HTML response with SEO-optimized metadata.
Sources: app/policy/privacy/page.tsx:3-13
Navigation and Accessibility
The primary navigation path to these legal pages is through the website's footer. The Footer component contains a "Legal" section with links to the Privacy and Cookies policies, as well as direct links to Terms & Conditions and Privacy Policy in the bottom bar.
Sources: components/footer.tsx:24-27, 102-113, 143-153
Footer Links
The Footer component defines arrays of link objects that are then mapped to create the navigation lists.
// components/footer.tsx:24-27
const legalLinks = [
{ label: "Privacy Policy", href: "/policy/privacy" },
{ label: "Cookies Policy", href: "/policy/cookies" },
];
This diagram shows the legal links originating from the Footer component.
Sources: components/footer.tsx:24-27, 102-113, 143-153
Summary
The legal and policy pages are a fundamental part of the Grapevine website, implemented as static, SEO-friendly pages using Next.js. They are clearly structured, styled for readability, and interlinked to provide a comprehensive legal resource for users. Their accessibility is primarily ensured through the global Footer component, making them easily discoverable from any page on the site. The implementation leverages server-side rendering and static metadata exports to ensure both performance and search engine visibility.