# Prompt Victoria AI Conference — Website Project

## Project Overview

Website mockups for **Prompt Victoria AI Conference** — Vancouver Island's largest AI conference.

- **Event date:** November 5, 2026
- **Venue:** Victoria Conference Centre
- **Tagline:** *From Disruption to Direction*
- **Presented by:** VIATEC
- **Co-organized by:** Victoria Data Society, PlusROI Online Marketing, AI4Enterprise
- **Delivery:** PlusROI Online Marketing (in partnership with VIATEC)

## Scope of this Repository

This directory contains **HTML mockup deliverables** for the client (VIATEC / PlusROI). The goal is to hand off static HTML mockups that demonstrate page structure, layout, and the visual design system before development in a CMS (likely WordPress).

The first deliverable is the **Home Page mockup**. Shared layout pieces (header navigation, pre-footer, footer) are built as standalone files so every subsequent page mockup only needs to produce the unique body content.

## Key Source Documents

| File | Purpose |
| :---- | :---- |
| `Website Planning.docx.md` | Full site planning — goals, site map/structure, SEO notes, branding direction |
| `Home Page Sections and Copy.docx.md` | Homepage content plan — 11 sections with final copy (LAUNCH vs LONGER TERM variants) |
| `lanyard and color scheme.png` | Reference image for the event color palette (purple → teal → green gradient with orange accents) |
| `Copy of 2026_Prompt-Logo_No-Date.png` | Primary conference logo |
| `Copy of 2026_Prompt-Logo_With-Date.png` | Logo variant with event date lockup |
| `Todo.md` | Running task list from the website developer |

## Folder Structure

```
Works/
├── CLAUDE.md                        # This file
├── Todo.md                          # Developer's task list
├── Website Planning.docx.md         # Client-supplied site planning
├── Home Page Sections and Copy.docx.md   # Client-supplied homepage copy
├── lanyard and color scheme.png     # Color reference
├── Copy of 2026_Prompt-Logo_*.png   # Logo assets
└── mockups/
    ├── style-guide.html             # Design system documentation
    ├── header-nav.html              # Standalone header/navigation mockup
    ├── pre-footer.html              # Stay Updated + Registration CTA banner
    ├── footer.html                  # Standalone footer mockup (launch version)
    ├── index.html                   # (to be added) Home page mockup
    └── css/
        └── styles.css               # Shared design tokens + component styles
```

## Design System — Quick Reference

Full documentation lives in `mockups/style-guide.html`. Core tokens are defined as CSS custom properties in `mockups/css/styles.css`.

- **Palette:** Deep Navy/Purple `#2B2D7E`, Teal `#00A8B5`, Green `#4FB84D`, Orange `#F58220`, Gold `#FBB040`, Coral `#E8423A`. Neutrals ramp from `#0F1024` (ink) to `#F7F8FB` (canvas).
- **Gradient:** `linear-gradient(135deg, #2B2D7E 0%, #00A8B5 55%, #4FB84D 100%)` — the signature event gradient pulled from the lanyard.
- **Type:** Display uses **Space Grotesk** (700 / 600). Body uses **Inter** (400 / 500 / 600). Both loaded from Google Fonts.
- **Spacing scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px.
- **Radius:** 4 (small), 12 (cards), 999 (pill buttons).
- **Container width:** max 1200px, horizontal padding 24px mobile / 48px desktop.

## Content Rules (from client)

- **Do not embellish copy.** Use only the copy provided in `Home Page Sections and Copy.docx.md`.
- The homepage document provides two states per section: **LAUNCH VERSION** (pre-registration, pre-speakers) and **LONGER TERM VERSION** (after announcements). Mockups are built against the **LAUNCH VERSION** unless otherwise requested.
- `[brackets]` in the copy doc indicate a button / CTA label.
- URLs for permanent pages must be stable across years (SEO equity).

## Conventions for Mockups

- **Output format:** static `.html` files. No build step, no JS frameworks.
- **Styling:** one shared stylesheet `mockups/css/styles.css`. Avoid per-page styles except for genuinely page-specific layout.
- **Images:** reference the local PNGs with relative paths (`../Copy of 2026_Prompt-Logo_No-Date.png`). Use descriptive `alt` text for accessibility and SEO.
- **Accessibility:** semantic HTML5 landmarks (`<header>`, `<nav>`, `<main>`, `<footer>`), visible focus states, sufficient color contrast, skip-to-content link on full pages.
- **SEO:** every full page mockup includes a proper `<title>`, meta description, and a single `<h1>`. No content hidden in JS.
- **Responsive:** mobile-first. Breakpoints at 640px (sm), 960px (md), 1200px (lg).

## Next Steps

1. Review style guide + shared layout pieces (header / pre-footer / footer).
2. Build the Home Page body (`index.html`) section by section against the LAUNCH VERSION copy.
3. Handoff for look-and-feel review with Tessa / VIATEC.
4. Proceed to remaining pages (About, Become a Speaker, Become a Sponsor) once home is approved.

# Catatan Tambahan Penting: 
Untuk copy content yang tidak berasal dari link document G:\My Drive\Projects\Prompt Victoria\Works\Home Page Sections and Copy.docx.md dan G:\My Drive\Projects\Prompt Victoria\Works\Website Planning.docx.md perlu ditandai dengan bracket contoh content generated ditandai dengan [].

# Catatan tambahan kedua:
pada pre-heading seperti ini class="pv-hero__meta" pada hero section, tolong buat design jangan terlihat seperti generate AI. Saya ingin terlihat autentik layaknya buatan manusia.