# 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`):

```ts
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`
