Assist_Design/docs/plans/2026-03-04-public-pages-restructuring-v2-design.md

Public Pages Restructuring v2 — Design

Date: 2026-03-04 Scope: Landing page conversion overhaul, contact section restoration, routing cleanup

Problem

The previous restructuring (v1) stripped the landing page down to an informational layout — hero, static 4-card grid, trust section, and a CTA banner with a phone number. The contact form was removed from the landing page and pushed to a standalone /contact page. This broke the conversion funnel:

• No contact form on the landing page — visitors must navigate away to reach out
• CTA Banner leads with a phone number instead of driving visitors to services
• Services presented as a static 4-card grid with no pricing — no hook to click through
• Service cards are informational, not conversion-oriented
• No smart grouping of Personal vs Business services
• /help route is unnecessary
• Support downloads (Acronis, TeamViewer) removed from landing page

The services page (/services and sub-pages) is the actual converter — where visitors select plans and enter the checkout funnel. The landing page's job is to funnel visitors there, with the contact form as a fallback for those who want to talk.

Design

1. Landing Page (/)

Seven sections, structured as a conversion funnel that drives visitors to /services:

Section 1: Hero (problem-first framing)

Reframe from company-centric to visitor-centric:

• Heading: "Just Moved to Japan? Get Connected in English."
• Subtitle: "Internet, phone, VPN and IT support — set up in days, not weeks. No Japanese needed."
• Primary CTA: "Find Your Plan" → /services
• Secondary CTA: "Talk to Us" → #contact (same-page smooth scroll)

Section 2: Trust Strip (unchanged)

• 20+ years | Full English | Foreign Cards | 10,000+ Customers
• No changes to current implementation

Section 3: Services Section (tabbed carousel with conversion cards)

Replace the static 4-card ServicesGrid with a tabbed carousel:

• Tab switcher: "For You" | "For Business"
• "For You" tab: Internet, SIM, VPN, Onsite (from personalServices data)
• "For Business" tab: Office LAN, Tech Support, Dedicated Internet, Data Center, Web Construction (from businessServices data)
• Horizontal scroll with prev/next buttons and auto-scroll

Each card is a conversion-oriented mini-ad:

┌──────────────────────────────┐
│ "Need reliable internet?"    │  ← problem hook
│  NTT Fiber up to 10Gbps     │  ← key benefit
│  from ¥3,200/mo              │  ← price anchor
│  ★ Most Popular              │  ← badge (optional)
│  [View Plans →]              │  ← CTA
└──────────────────────────────┘

Card data structure (extend existing ServiceItem):

interface ConversionServiceCard {
  title: string;
  problemHook: string; // "Need reliable internet?"
  keyBenefit: string; // "NTT Fiber up to 10Gbps"
  priceFrom: string; // "from ¥3,200/mo"
  badge?: string; // "Most Popular" | "1st month free"
  icon: React.ReactNode;
  href: string;
  ctaLabel: string; // "View Plans"
}

Section 4: Why Us (unchanged)

• "Built on Trust and Excellence"
• Image + trust points (English support, foreign cards, bilingual contracts)
• Link to /about

Section 5: CTA Banner (repurposed)

• Heading: "Ready to Get Set Up?"
• Subtitle: "No Japanese required. Our English-speaking team is here to help."
• Primary CTA: "Find Your Plan" → /services
• Secondary CTA: "Talk to Us" → #contact
• Phone number removed as headline

Section 6: Support Downloads

Restored from old landing page. Two cards side-by-side:

• Acronis Quick Assist (download link)
• TeamViewer QS (download link)

Uses existing supportDownloads data from features/landing-page/data/services.tsx.

Section 7: Contact Section (#contact)

Full contact section restored (like original pre-v1 landing page):

• Left column:
  • Contact form (uses existing ContactForm component)
  • "By Chat (Anytime)" — chat mention
  • "By Phone (9:30-18:00 JST)" — toll-free (0120-660-470) + international (+81-3-3560-1006)
• Right column:
  • Google Maps embed
  • Access info card (Azabu-Juban Station, Exit 6)
  • Address card (3F Azabu Maruka Bldg., Minato-ku, Tokyo)

Sticky Mobile CTA:

• "Find Your Plan" → /services
• Shows when hero CTA scrolls out of viewport (existing useStickyCta hook)

2. Routing Changes

Route	Current	New
/	Stripped-down landing	Full 7-section conversion funnel
/contact	Standalone contact page	No change — stays for SEO, external links, cross-site nav
/support	Self-service hub	No change
/help	Redirects to /contact	Delete — route removed entirely

3. Navigation Link Updates

Location	Link Text	Target
Header nav	"Support"	/support
Footer	"Support"	/support
Footer	"Contact"	/contact
Hero primary	"Find Your Plan"	/services
Hero secondary	"Talk to Us"	#contact
CTA Banner primary	"Find Your Plan"	/services
CTA Banner secondary	"Talk to Us"	#contact
Service page CTAs	"Contact Us"	/contact
Sticky mobile	"Find Your Plan"	/services

4. Component Changes

New components:

• ServicesCarousel.tsx — tabbed (For You / For Business) horizontal carousel with conversion cards, auto-scroll, prev/next buttons
• ContactSection.tsx — full contact section: form (left) + map/address (right), uses ContactForm component
• SupportDownloadsSection.tsx — two-card grid for Acronis + TeamViewer downloads

Modified components:

• PublicLandingView.tsx — new 7-section composition replacing current 5-section layout
• CTABanner.tsx — remove phone number headline, update CTAs to "Find Your Plan" + "Talk to Us"
• HeroSection.tsx — problem-first copy, secondary CTA targets #contact instead of /contact
• SiteFooter.tsx — ensure "Support" → /support and "Contact" → /contact as separate links
• features/landing-page/data/services.tsx — extend service data with problemHook, keyBenefit, priceFrom, badge fields for conversion cards

Deleted:

• ServicesGrid.tsx — replaced by ServicesCarousel.tsx
• app/(public)/(site)/help/page.tsx — route removed

Unchanged:

• PublicContactView.tsx — standalone contact page stays as-is
• PublicSupportView.tsx — support page stays as-is (KB cards decorative)
• ContactForm.tsx — reused in landing page contact section + contact page + support page
• All service pages, about, blog, auth pages — no changes
• TrustStrip.tsx — no changes
• WhyUsSection.tsx — no changes

Service Card Pricing Data

Pricing to display on conversion cards (sourced from service pages):

Service	Price From	Badge
Internet	¥3,200/mo	—
SIM	¥1,100/mo	1st month free
VPN	¥2,500/mo	—
Onsite Support	— (quote-based)	—
Office LAN Setup	— (quote-based)	—
Tech Support	— (quote-based)	—
Dedicated Internet	— (quote-based)	—
Data Center	— (quote-based)	—
Web Construction	— (quote-based)	—

Quote-based services show "Get a Quote" instead of a price.

File Changes Summary

New files

• features/landing-page/components/ServicesCarousel.tsx
• features/landing-page/components/ContactSection.tsx
• features/landing-page/components/SupportDownloadsSection.tsx

Modified files

• features/landing-page/views/PublicLandingView.tsx
• features/landing-page/components/HeroSection.tsx
• features/landing-page/components/CTABanner.tsx
• features/landing-page/components/index.ts
• features/landing-page/data/services.tsx
• components/organisms/SiteFooter/SiteFooter.tsx

Deleted files

• features/landing-page/components/ServicesGrid.tsx
• app/(public)/(site)/help/page.tsx