barsa 5a66adb7e6 refactor: update landing page components and styles

- Removed obsolete components such as AnimatedBackground, FloatingGlassCard, TrustBadge, TrustIndicators, and ValuePropCard to streamline the landing page.
- Enhanced existing components like CTABanner and HeroSection with improved accessibility and styling.
- Updated global CSS to introduce new line-height tokens and improved typography.
- Refactored the PublicContactView to focus on a streamlined contact form and sidebar information.
- Improved the ServicesGrid component to utilize a new data structure for landing services.
- Enhanced button components with new variants for better UI consistency.

2026-03-04 13:42:03 +09:00

3.8 KiB

Raw Blame History

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)

3.8 KiB Raw Blame History