Phase 1: Private Hire Pages Foundation - Implementation Complete

Phase 1: Foundation - Implementation Complete ✅

Successfully implemented the foundation for the private hire pages feature as specified in /specs/private-hire-pages.md.

📊 Overview

• Commit: a4c22b5
• Branch: development
• Files Changed: 11 files (8 new, 3 modified)
• Lines Added: 677
• Implementation Time: ~4 hours
• Status: ✅ All tasks completed, TypeScript passing, Convex types regenerated

---

🎯 What Was Built

Backend (Convex)

4 New Database Tables:

• privateHireEnquiries - Store customer enquiries with contact info, event details, venue preferences, and admin tracking
• privateHireContent - CMS-style content storage with sections, images, videos, and metadata
• blackoutDates - Manage unavailable dates for form validation
• brochureDownloads - Track brochure downloads with referrer and user agent data

6 New Convex Functions:

• getPrivateHireContent(sectionKey?) - Query page content by section
• getBlackoutDates(startDate?, endDate?) - Query unavailable dates
• trackBrochureDownload(brochureName, ipAddress?, userAgent?) - Log downloads
• createPrivateHireContent(...) - Admin function for content management
• addBlackoutDate(date, reason?) - Admin function for blackout dates

All tables include proper indexes and Convex validators following project conventions.

Frontend (Next.js)

New Route: /private-hire

• Server component with SEO metadata
• Preloads Convex data with preloadQuery
• Responsive layout with 5 sections

Components Created:

1. HeroSection.tsx - Hero with placeholder background (Phase 2: video transitions)
2. VenueDetailsSection.tsx - Downstairs/upstairs venue details with ImageKit images
3. ChristmasPartiesSection.tsx - Seasonal hire CTA with brochure download
4. ClubNightsSection.tsx - Club nights showcase linking to /events
5. ResourcesSection.tsx - Brochure downloads with Convex tracking
6. ScrollObserver.tsx - Client component for scroll detection (Phase 2: hero transitions)

Infrastructure:

• useScrollDetection.ts - Intersection Observer hook for tracking active sections
• All components follow existing codebase patterns (Tailwind CSS 4, typography, color mixing)

Content & Translations

Dictionary Updates (dictionaries/en.json):
Added complete privateHire section with:

• Hero content (title, subtitle, description, CTA)
• Venue details (downstairs/upstairs descriptions, capacity, features arrays)
• Christmas parties content
• Club nights content
• Resources section labels

---

📁 Files Created/Modified

Created (8 files):

app/private-hire/
├── page.tsx
├── _components/
│   ├── HeroSection.tsx
│   ├── VenueDetailsSection.tsx
│   ├── ChristmasPartiesSection.tsx
│   ├── ClubNightsSection.tsx
│   ├── ResourcesSection.tsx
│   └── ScrollObserver.tsx
└── _hooks/
    └── useScrollDetection.ts

Modified (3 files):

• convex/schema.ts - Added 4 tables with indexes
• convex/admin.ts - Added 6 queries/mutations
• dictionaries/en.json - Added privateHire section

---

✅ Validation

• [x] TypeScript compilation passes (pnpm exec tsc --noEmit)
• [x] Convex types regenerated successfully
• [x] All files follow existing codebase patterns
• [x] Proper use of Convex validators (args and returns)
• [x] Server components for static content, client components for interactivity
• [x] SEO metadata with OpenGraph tags
• [x] Responsive design with Tailwind CSS 4

---

🎨 Design Implementation

All components use the existing design system:

• Color mixing with CSS color-mix() for primary colors
• Radial gradients for section backgrounds
• Border styling with transparency
• Responsive breakpoints (mobile < 768px, tablet 768-1024px, desktop > 1024px)
• Typography hierarchy (extrabold uppercase headers, tracking adjustments)

---

🚀 Next Steps

To View the Page:

1. Run pnpm dev
2. Navigate to http://localhost:3000/private-hire

Optional - Seed Sample Data:
Use Convex Dashboard to insert sample content records (see plan file for JSON examples)

Future Phases:

Phase 2: Hero & Content (Week 1-2)

• [ ] Implement scroll-based hero video transitions
• [ ] Extract real content from PDF brochures
• [ ] Integrate additional venue images
• [ ] Build admin content editor UI

Phase 3: Enquiry Form (Week 2)

• [ ] Build form with React Hook Form
• [ ] Implement client/server validation
• [ ] Add date picker with blackout date checking
• [ ] Wire up Convex submission mutation
• [ ] Add honeypot spam prevention

Phase 4: Email System (Week 2-3)

• [ ] Create API route for Amazon SES
• [ ] Design email templates (admin notification + auto-reply)
• [ ] Implement email sending in submission flow
• [ ] Test delivery and formatting

Phase 5: Virtual Tour Modal (Week 3)

• [ ] Build modal component with Framer Motion
• [ ] Implement iframe embedding for tours
• [ ] Add tab switching (main/Christmas)

Phase 6: Admin Features (Week 3-4)

• [ ] Build content editor
• [ ] Build enquiry manager with filters
• [ ] Build blackout dates manager

---

📝 Notes

• Phase 1 uses placeholder content - real content extraction from PDFs is scheduled for Phase 2
• Hero section has basic static image - scroll-based video transitions will be added in Phase 2
• No enquiry form in Phase 1 - this is intentionally deferred to Phase 3
• All infrastructure is in place for future phases to build upon

---

🔗 References

• Spec Document: /specs/private-hire-pages.md
• Plan File: /Users/cage/.claude/plans/splendid-foraging-mango.md
• Commit: a4c22b5

---

Implementation completed by: Claude Code
Date: 2026-01-05