115 lines
3.8 KiB
Markdown
115 lines
3.8 KiB
Markdown
|
# 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)
|