From 933a4613727d99624be159a24b12da2d256151eb Mon Sep 17 00:00:00 2001 From: tema Date: Fri, 16 Jan 2026 17:54:55 +0900 Subject: [PATCH] Refactor TV Services Page for Enhanced User Experience - Introduced a service selection feature with dynamic pricing and channel listings for various TV services, improving user engagement and clarity. - Updated the layout and styling for better visual consistency and responsiveness across different screen sizes. - Enhanced the FAQ section for improved readability and user interaction. - Removed deprecated components and streamlined the code for better maintainability. --- .../(public)/(site)/services/tv/layout.tsx | 24 + .../app/(public)/(site)/services/tv/page.tsx | 1351 ++++++++--------- .../landing-page/views/PublicLandingView.tsx | 46 +- .../components/base/ServiceHighlights.tsx | 17 +- 4 files changed, 695 insertions(+), 743 deletions(-) create mode 100644 apps/portal/src/app/(public)/(site)/services/tv/layout.tsx diff --git a/apps/portal/src/app/(public)/(site)/services/tv/layout.tsx b/apps/portal/src/app/(public)/(site)/services/tv/layout.tsx new file mode 100644 index 00000000..ce3326b9 --- /dev/null +++ b/apps/portal/src/app/(public)/(site)/services/tv/layout.tsx @@ -0,0 +1,24 @@ +import type { Metadata } from "next"; + +export const metadata: Metadata = { + title: "TV Services - Satellite & Cable TV in Japan | Assist Solutions", + description: + "Access premium TV services including Sky PerfecTV, iTSCOM, and J:COM. We arrange your TV service at no extra fee. English support available.", + keywords: [ + "cable TV Japan", + "satellite TV Tokyo", + "Sky PerfecTV", + "JCOM English", + "TV service expats", + ], + openGraph: { + title: "TV Services - Assist Solutions", + description: + "Premium cable and satellite TV options in Japan. Free consultation and arrangement service.", + type: "website", + }, +}; + +export default function TVServicesLayout({ children }: { children: React.ReactNode }) { + return children; +} diff --git a/apps/portal/src/app/(public)/(site)/services/tv/page.tsx b/apps/portal/src/app/(public)/(site)/services/tv/page.tsx index a416d3ef..bac4544a 100644 --- a/apps/portal/src/app/(public)/(site)/services/tv/page.tsx +++ b/apps/portal/src/app/(public)/(site)/services/tv/page.tsx @@ -1,4 +1,6 @@ -import type { Metadata } from "next"; +"use client"; + +import { useState } from "react"; import { Button } from "@/components/atoms"; import { Tv, @@ -10,641 +12,697 @@ import { MoreHorizontal, GraduationCap, Globe, + ChevronDown, + Check, + Satellite, + Cable, + Zap, } from "lucide-react"; +import { cn } from "@/shared/utils"; -export const metadata: Metadata = { - title: "TV Services - Satellite & Cable TV in Japan | Assist Solutions", - description: - "Access premium TV services including Sky PerfecTV, iTSCOM, and J:COM. We arrange your TV service at no extra fee. English support available.", - keywords: [ - "cable TV Japan", - "satellite TV Tokyo", - "Sky PerfecTV", - "JCOM English", - "TV service expats", - ], - openGraph: { - title: "TV Services - Assist Solutions", - description: - "Premium cable and satellite TV options in Japan. Free consultation and arrangement service.", - type: "website", +// TV Service Data +const tvServices = [ + { + id: "sky-hikari", + name: "Sky PerfecTV Premium Hikari", + shortName: "Sky Hikari", + type: "Optical Fiber", + icon: , + fees: [ + { type: "Apartment", initial: "Free", monthly: "4,567" }, + { type: "Home", initial: "14,630", monthly: "5,392" }, + ], + note: "Home initial: 6,680 JPY if simultaneous installation", + channels: { + Movie: [ + "The Cinema HD", + "Movie Plus HD", + "Channel NECO HD", + "Japanese Movie HD", + "Fox Movie Premium HD", + "Cinefil Wowow HD", + "NTV G HD", + "EX Sports", + "Dance Channel", + ], + Sports: [ + "Golf Network HD", + "GAORA HD", + "J Sports 1 HD", + "J Sports 2 HD", + "J Sports 3 HD", + "Sky A Sports HD", + ], + Music: [ + "Music Japan TV HD", + "MTV HD", + "Music ON! TV HD", + "Space Shower TV HD", + "Space Shower TV Plus HD", + "Kayou Pops HD", + "Music Air HD", + "Music Graffiti TV", + ], + Kids: [ + "Cartoon Network HD", + "Disney Channel HD", + "Disney XD HD", + "Kids Station HD", + "Animax HD", + "Lala HD", + "Asia Dramatic TV HD", + "KBS World HD", + ], + "Foreign Drama": [ + "Super Drama TV HD", + "AXN Mystery HD", + "AXN HD", + "FOX HD", + "FOX CLASSICS HD", + ], + Documentary: [ + "History Channel HD", + "National Geographic HD", + "Discovery HD", + "Nat Geo Wild HD", + "Animal Planet HD", + ], + "News & Business": [ + "TBS News Bird HD", + "Nikkei CNBC HD", + "BBC World News HD", + "CNNj HD", + "NTV News 24", + "SORA Weather Channel", + "E-tenki.net", + "Entametele HD", + "Nittele Plus HD", + ], + Entertainment: [ + "Fox Sports HD", + "FujiTV One HD", + "FujiTV Two HD", + "TBS Channel 1 HD", + "TBS Channel 2 HD", + "TV Asahi Channel 1 HD", + "TV Asahi Channel 2 HD", + ], + Others: [ + "Mondo TV HD", + "Family Theater HD", + "Home Drama HD", + "Samurai Drama HD", + "TABI Channel HD", + "Tsuri Vision HD", + "Igo/Shogi Channel HD", + ], + }, }, + { + id: "sky-premium", + name: "Sky PerfecTV Premium", + shortName: "Sky Premium", + type: "Satellite", + icon: , + fees: [{ type: "Standard", initial: "Free", monthly: "4,514" }], + channels: { + Movie: [ + "Imagica BS HD", + "The Cinema HD", + "Movie Plus HD", + "Channel NECO HD", + "Japanese Movie HD", + "Fox Movie Premium HD", + "Cinefil Wowow HD", + ], + Sports: ["J Sports 3 HD", "Sky A Sports HD", "NTV G HD", "EX Sports", "Dance Channel"], + Music: [ + "Music Japan TV HD", + "MTV HD", + "Music ON! TV HD", + "Space Shower TV HD", + "Space Shower TV Plus HD", + "Kayou Pops HD", + "Music Air HD", + "Music Graffiti TV", + ], + Kids: [ + "Cartoon Network HD", + "Disney Channel HD", + "Disney XD HD", + "Kids Station HD", + "Animax HD", + "Disney Junior", + "Asia Dramatic TV HD", + "KBS World HD", + ], + "Foreign Drama": [ + "Super Drama TV HD", + "AXN Mystery HD", + "AXN HD", + "FOX HD", + "FOX CLASSICS HD", + "Lala HD", + ], + Documentary: [ + "History Channel HD", + "National Geographic HD", + "Discovery HD", + "Nat Geo Wild HD", + "Animal Planet HD", + ], + "News & Business": [ + "TBS News Bird HD", + "Nikkei CNBC HD", + "BBC World News HD", + "CNNj HD", + "NTV News 24", + "CCTV Daifu", + "SORA Weather Channel", + "Entametele HD", + "NTV Plus HD", + "Channel Ginga", + ], + Entertainment: [ + "Fox Sports HD", + "FujiTV One HD", + "FujiTV Two HD", + "TBS Channel 1 HD", + "TBS Channel 2 HD", + "TV Asahi Channel 1 HD", + "TV Asahi Channel 2 HD", + "Yose Channel", + ], + Others: [ + "IGO & Shogi", + "Mondo 21 HD", + "Family Theater HD", + "Home Drama HD", + "Samurai Drama HD", + "TABI Channel HD", + "Railyway Channel HD", + ], + }, + }, + { + id: "sky-basic", + name: "Sky PerfecTV", + shortName: "Sky Basic", + type: "Satellite", + icon: , + fees: [ + { type: "Apartment", initial: "Free", monthly: "4,389" }, + { type: "Home", initial: "11,330", monthly: "5,214" }, + ], + note: "Home initial: 6,680 JPY if simultaneous installation", + channels: { + Movie: [ + "Movie Plus HD", + "Japanese Movie HD (BS)", + "The Cinema", + "Channel NECO", + "Cinefil Wowow HD", + ], + Sports: ["Nittele G HD", "Sky A Sports HD", "GAORA Sports HD", "Fox Sports HD"], + Music: [ + "MTV HD", + "Music ON! TV HD", + "Space Shower TV", + "Music Air", + "Space Shower TV Plus", + "Kayo Pops", + ], + Kids: [ + "Kids Station HD", + "BS Animax HD (BS)", + "Disney (BS)", + "Cartoon Network", + "Disney Junior", + ], + "Foreign Drama": ["Lala HD", "Super Drama TV HD", "AXN", "AXN Mystery", "FOX"], + Documentary: ["History Channel", "National Geographic", "Discovery", "Animal Planet"], + "News & Business": [ + "TBS News Bird", + "BBC World News", + "CNNj", + "NTV News 24", + "TBS Channel 1 HD", + "TBS Channel 2", + "NTV Plus", + "Channel Ginga", + ], + Entertainment: [ + "Fuji TV One HD", + "Fuji TV Two HD", + "TV Asahi Channel 1 HD", + "TV Asahi Channel 2 HD", + "Igo/Shogi Channel", + "Mondo TV HD", + ], + Others: [ + "Tsuri Vision HD (BS)", + "Family Gekijo HD", + "Samurai Drama HD", + "Home Drama Channel", + ], + }, + }, + { + id: "itscom", + name: "iTSCOM", + shortName: "iTSCOM", + type: "Cable TV", + icon: , + fees: [{ type: "Big Package", initial: "11,000", monthly: "5,280" }], + channels: { + Movie: ["Movie Plus HD", "Japanese Movie HD", "Channel NECO HD", "FOX Movie Premium HD"], + Sports: [ + "Golf Network HD", + "Nittele G HD", + "Sky A Sports HD", + "GAORA HD", + "J Sports 1 HD", + "J Sports 2 HD", + "J Sports 3 HD", + ], + Music: ["MTV HD", "Music ON! TV HD", "Space Shower TV", "Music Air"], + Kids: [ + "Animax HD", + "Kids Station HD", + "Disney XD", + "Cartoon Network", + "Baby TV", + "Disney Junior", + ], + "Foreign Drama": [ + "AXN HD", + "FOX HD", + "Asia Dramatic TV HD", + "Super Drama TV HD", + "AXN Mystery HD", + "Family Theater HD", + ], + Documentary: [ + "Discovery HD", + "National Geographic", + "Animal Planet HD", + "History Channel HD", + ], + "News & Business": [ + "BBC World News HD", + "CNNj HD", + "Nikkei CNBC HD", + "TBS News Bird HD", + "TV Asahi Channel 2", + "NTV News 24", + "NHK World Japan", + "Disney Channel HD", + ], + Entertainment: [ + "LaLa TV HD", + "Channel Ginga HD", + "Dlife HD", + "FOX Sports HD", + "TBS Channel 1 HD", + "TBS Channel 2", + "NTV Plus", + ], + Others: [ + "Japanet Channel DX HD", + "Jewelly Gem Shopping HD", + "Samurai Drama HD", + "TABI Channel", + "QVC", + "Shop Channel", + "Igo/Shogi Channel", + ], + }, + }, + { + id: "jcom", + name: "J:COM", + shortName: "J:COM", + type: "Cable TV", + icon: , + fees: [{ type: "Standard Package", initial: "9,900", monthly: "6,074" }], + channels: { + Movie: [ + "Movie Plus HD", + "The Cinema HD", + "Channel NECO HD", + "Japanese Movie HD", + "Fox Movies", + "Cinefil Wowow HD", + "Fox Sports & Entertainment", + ], + Sports: [ + "J Sports 1 HD", + "J Sports 2 HD", + "J Sports 3 HD", + "Sky A Sports HD", + "Golf Network HD", + "GAORA HD", + ], + Music: ["MTV HD", "Music ON! TV HD", "Space Shower TV", "Kayou Pops"], + Kids: [ + "Animax HD", + "Kids Station HD", + "Cartoon Network HD", + "Disney Channel HD", + "Disney XD HD", + "Disney Junior HD", + "AXN Mystery HD", + ], + "Foreign Drama": [ + "Super Drama TV HD", + "FOX HD", + "FOX Classics HD", + "AXN HD", + "Lala HD", + "KBS World HD", + ], + Documentary: [ + "History Channel HD", + "National Geographic HD", + "Discovery Channel HD", + "Animal Planet HD", + ], + "News & Business": [ + "TBS News Bird HD", + "Nikkei CNBC HD", + "TV Asahi Channel 2 HD", + "CNNj", + "NTV News 24", + "NHK World Japan", + "KBS World", + "NTV Plus", + "Act On TV", + ], + Entertainment: [ + "FujiTV One HD", + "FujiTV Two HD", + "TBS Channel 1 HD", + "TBS Channel 2 HD", + "Channel Ginga HD", + "TV Asahi Channel 1", + "Housou University TV", + ], + Others: [ + "Family Theater HD", + "Samurai Drama HD", + "Home Drama Channel HD", + "Mondo TV HD", + "Tsuri Vision HD", + "Igo/Shogi Channel", + ], + }, + }, +]; + +const categoryIcons: Record = { + Movie: , + Music: , + Sports: , + "News & Business": , + Entertainment: , + Kids: , + "Foreign Drama": , + Documentary: , + Others: , }; export default function TVServicesPage() { + const [selectedService, setSelectedService] = useState(tvServices[0].id); + const [expandedCategories, setExpandedCategories] = useState([]); + + const activeService = tvServices.find(s => s.id === selectedService)!; + + const toggleCategory = (category: string) => { + setExpandedCategories(prev => + prev.includes(category) ? prev.filter(c => c !== category) : [...prev, category] + ); + }; + + const expandAll = () => { + setExpandedCategories(Object.keys(activeService.channels)); + }; + + const collapseAll = () => { + setExpandedCategories([]); + }; + return ( -
+
{/* Header */} -
-

+
+

TV Services

-

- Providing a variety of options for our customers such as Satellite TV, Cable TV and - Optical Fiber TV. +

+ Satellite TV, Cable TV and Optical Fiber TV options. We arrange your service at no extra + fee.

- {/* Intro */} -
-

Service Lineup

-

- We are proud to act as agents for Japan's major paid TV service providers, and we will - arrange your services on your behalf (no service fee required for us to arrange your - services). Usually each building has their pre-assigned main TV service providers. To find - out which TV service you can apply for, please feel free to contact us anytime. -

- + {/* Service Selector Cards */} +
+

+ Select a Service +

+
+ {tvServices.map(service => { + const isSelected = selectedService === service.id; + const lowestMonthly = Math.min( + ...service.fees.map(f => parseInt(f.monthly.replace(",", ""))) + ); + return ( + + ); + })} +
- {/* Services List */} -
- {/* Sky PerfecTV Premium Hikari */} - - - - - - - - - - - - - + {/* Selected Service Details */} +
+ {/* Service Header */} +
+
+
+ +
+
+

{activeService.name}

+

{activeService.type} Service

+
+
+
- {/* Sky PerfecTV Premium (Satellite) */} - - - - - - - - - - - - - +
+ {/* Pricing Table */} +
+

+ Pricing +

+
+ + + + + + + + + + {activeService.fees.map((fee, i) => ( + + + + + + ))} + +
+ Plan + + Initial Cost + + Monthly +
{fee.type} + {fee.initial === "Free" ? ( + Free + ) : ( + `¥${fee.initial}` + )} + ¥{fee.monthly}/mo
+
+ {activeService.note && ( +

* {activeService.note}

+ )} +

* Prices include 10% tax

+
- {/* Sky PerfecTV (Satellite) */} - - - - - - - - - - - - - + {/* Channel List */} +
+
+

+ Channel Lineup ({Object.values(activeService.channels).flat().length} channels) +

+
+ + | + +
+
- {/* iTSCOM (CATV) */} - - - - - - - - - - - - - +
+ {Object.entries(activeService.channels).map(([category, channels]) => { + const isExpanded = expandedCategories.includes(category); + return ( +
+ + {isExpanded && ( +
+
    + {channels.map(channel => ( +
  • + + {channel} +
    • + ))} +
+
+ )} +
+ ); + })} +
+
+
+
- {/* JCOM (CATV) */} - - - - - - - - - - - - - + {/* Info Banner */} +
+
+
+ +
+
+

Not sure which service is available?

+

+ Most buildings in Japan have pre-assigned TV service providers. Contact us for a free + consultation to find out which services you can apply for. +

+
+ +
{/* FAQ */} -
-

+
+

Frequently Asked Questions

-
-
-

+
+
+

Is Assist Solutions directly providing the TV service?

-

- As partners, we are able to refer you to each cable TV company available at your home. - However, once the service starts, the cable TV service itself will be directly - provided by each cable TV company. +

+ As partners, we refer you to each cable TV company. Once the service starts, it will + be directly provided by each cable TV company.

- -
-

- Would I be able to choose any cable TV service that Assist Solutions is partnered - with? +
+

+ Can I choose any TV service you're partnered with?

-

- In Japan, most cable TV companies have predetermined service areas. We will be able to - check which services are available for your home. Please contact us for a free - consultation. +

+ Cable TV companies have predetermined service areas. We can check which services are + available for your home. Contact us for a free consultation.

{/* CTA */} -
-

+
+

Find the best TV service for you

+

Free consultation and arrangement service

@@ -652,98 +710,3 @@ export default function TVServicesPage() {
); } - -// Helper Components - -function TVServiceSection({ - title, - fees, - note, - children, -}: { - title: string; - fees: { type: string; initial: string; monthly: string }[]; - note?: string; - children?: React.ReactNode; -}) { - return ( -
-
-
-
- -
-

{title}

-
-
- -
-
-

- Service Fees -

-
- - - - - - - - - - {fees.map((fee, i) => ( - - - - - - ))} - -
TypeInitial CostMonthly Cost
{fee.type}{fee.initial}{fee.monthly}
-
- {note &&

{note}

} -
- - {children} -
-
- ); -} - -function ChannelPackage({ title, children }: { title: string; children: React.ReactNode }) { - return ( -
-

- {title} -

-
{children}
-
- ); -} - -function ChannelCategory({ title, channels }: { title: string; channels: string[] }) { - return ( -
-

- {title === "Movie" && } - {title === "Music" && } - {title === "Sports" && } - {title === "News & Business" && } - {title === "Entertainment" && } - {title === "Kids" && } - {title === "Foreign Drama" && } - {title === "Documentary" && } - {title === "Others" && } - {title} -

-
    - {channels.map(channel => ( -
  • - {channel} -
    • - ))} -
-
- ); -} diff --git a/apps/portal/src/features/landing-page/views/PublicLandingView.tsx b/apps/portal/src/features/landing-page/views/PublicLandingView.tsx index 96a532ff..b83aa379 100644 --- a/apps/portal/src/features/landing-page/views/PublicLandingView.tsx +++ b/apps/portal/src/features/landing-page/views/PublicLandingView.tsx @@ -20,10 +20,6 @@ import { Globe, Server, Shield, - Languages, - Calendar, - ShieldCheck, - Users, } from "lucide-react"; type ServiceCategory = "personal" | "business"; @@ -311,19 +307,19 @@ export function PublicLandingView() {

- {/* Services Grid */} -
+ {/* Services Grid - Fixed height for consistent sizing */} +
{(activeCategory === "personal" ? personalServices : businessServices).map( service => ( -
+
{service.icon}
- + {service.title} @@ -358,38 +354,6 @@ export function PublicLandingView() {

- {/* Trust Badges */} -
-
- -
-

Est. 2002

-

20+ Years Experience

-
-
-
- -
-

Registered Carrier

-

A-19-9538

-
-
-
- -
-

Bilingual Support

-

English & Japanese

-
-
-
- -
-

21 Staff Members

-

Dedicated Team

-
-
-
-
    {["One Stop Solution", "English Support", "Onsite Support"].map(item => (
  • diff --git a/apps/portal/src/features/services/components/base/ServiceHighlights.tsx b/apps/portal/src/features/services/components/base/ServiceHighlights.tsx index c35d1fa1..9ef3616b 100644 --- a/apps/portal/src/features/services/components/base/ServiceHighlights.tsx +++ b/apps/portal/src/features/services/components/base/ServiceHighlights.tsx @@ -14,21 +14,22 @@ interface ServiceHighlightsProps { function HighlightItem({ icon, title, description, highlight }: HighlightFeature) { return ( -
    -
    -
    +
    + {/* Icon - smaller, inline style */} +
    +
    {icon}
    {highlight && ( - - - {highlight} + + + {highlight} )}
    -

    {title}

    -

    {description}

    +

    {title}

    +

    {description}

    ); }