# Public Pages Restructuring Design

**Date**: 2026-03-04
**Scope**: Homepage hero update, Contact page cleanup, Support page creation, shared ContactForm component

## Problem

- Homepage hero text doesn't match desired branding ("A One Stop Solution for Your IT Needs")
- Contact page mixes FAQ and contact form — unfocused
- Support page is thin with placeholder content
- Acronis/TeamViewer remote support tools are defined in data but not rendered anywhere
- Contact form is hardcoded in PublicContactView — not reusable
- `/help` just redirects to `/contact`, no dedicated support hub

## Design

### 1. Homepage (`/`)

**Hero Section changes only** — rest of page (TrustStrip, ServicesGrid, WhyUsSection, CTABanner) stays as-is.

- **Heading line 1**: "A One Stop Solution"
- **Heading line 2** (primary color): "for Your IT Needs"
- **Subtitle**: "From internet and mobile to VPN and on-site tech support — we handle it all in English so you don't have to."
- **CTAs**: "Browse Services" (primary) + "Need Assistance?" (outline, links to `/contact`)

### 2. Contact Page (`/contact`)

Focused page for reaching a human. Two-column layout.

**Left column — Contact Form**:

- Reusable `ContactForm` component
- Fields: Name, Email, Phone (optional), Subject, Message
- Same Zod validation (`publicContactRequestSchema`)
- Submit → POST `/api/support/contact` → success state

**Right sidebar — Contact Info** (stacked cards):

- Quick contact options: Phone (0120-660-470), Email (support@assist-solutions.jp), Live Chat
- Business hours: Mon-Fri 9:30 AM - 6:00 PM JST
- Office location: address, access info, "Get Directions" link
- Small embedded Google Map

**Removed from contact page**: FAQ section (moves to Support)

### 3. Support Page (`/support`)

Self-service support hub. Top-to-bottom flow.

**Section 1: Header**

- Icon + "How Can We Help?" heading
- Subtitle about self-service and English support

**Section 2: Knowledge Base Categories**

- Grid of 6 category cards (2x3 on desktop, 1 col mobile):
  - Internet & Wi-Fi
  - Phone & SIM
  - VPN & Streaming
  - Business Solutions
  - Billing & Account
  - General Tech Support
- Each card has icon, title, brief description
- Cards can link to anchors or future article pages (placeholder for now)

**Section 3: Remote Support Tools**

- Uses existing `supportDownloads` data from `features/landing-page/data/services.tsx`
- Two cards side-by-side: Acronis Quick Assist + TeamViewer QS
- Each shows: logo image, title, description, use case, download link (external)

**Section 4: FAQ**

- Accordion-style FAQ items (moved from contact page)
- Placeholder content for now, real content to be added later

**Section 5: Contact Form Fallback**

- "Still need help? Send us a message" heading
- Reusable `ContactForm` component

### 4. Shared ContactForm Component

**Location**: `apps/portal/src/features/support/components/ContactForm.tsx`

Extracted from current `PublicContactView`:

- Same fields, same Zod schema, same API call
- Accepts optional `className` prop
- Self-contained: manages own submit state and success/error UI
- Exported from `features/support/components/index.ts`

## File Changes

### New files

- `features/support/components/ContactForm.tsx` — reusable form
- `app/(public)/(site)/support/page.tsx` — support page route

### Modified files

- `features/landing-page/components/HeroSection.tsx` — new heading + subtitle
- `features/support/views/PublicContactView.tsx` — two-column layout, remove FAQ, use ContactForm
- `features/support/views/PublicSupportView.tsx` — full rewrite as support hub
- `features/support/views/index.ts` — update exports if needed
- `features/support/components/index.ts` — export ContactForm

### Routing

- `/` — homepage (updated hero)
- `/contact` — contact page (cleaned up)
- `/support` — new support hub page
- `/help` — keep redirect to `/contact` (backwards compat)