simonpaag/create-template-page

Create Template Page Skill

When the user asks to create a new page or content entry, follow these strict guidelines to ensure consistency across the CPHport.com platform.

1. Understand the Request

Determine the following from the user:

• What is the Name of the page/entity?
• What is the Template Type (e.g., Tourism, Cruise Ship, B2B Service, Restaurant)?
• What is the URL route (slug)?

2. Component Structure

All pages and major components must follow this structure:

• Use functional React components (const ComponentName = () => { ... }).
• Place the file in the appropriate directory (e.g., src/pages/[category]/ or src/components/templates/).
• Use informative, semantic HTML tags (<article>, <section>, <aside>).

3. Mandatory Inclusions

Every new page MUST include:

• SEO Metadata: A proper <title> and <meta name="description"> relevant to the specific service or business in Copenhagen Port.
• Dynamic Data Fetching Placeholder: Structure the component to accept data via props or fetch data from the database, rather than hardcoding business details.
• Layout Wrapper: Wrap the content in the main application layout component to maintain the global header and footer.

4. Styling

• Use the established CSS/styling framework of the project (e.g., CSS Modules, Tailwind - check project configuration).
• Ensure the design feels premium and matches the maritime/harbor aesthetic of CPHport.com. Include responsive design out-of-the-box.

5. Next Steps

After writing the code, briefly explain to the user:

1. Where the file was saved.
2. How to link this new page to the main navigation.
3. If any database changes are required to support this new template.