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.
This commit is contained in:
tema
parent
d4b34faeb4
commit
933a461372
24
apps/portal/src/app/(public)/(site)/services/tv/layout.tsx
Normal file
24
apps/portal/src/app/(public)/(site)/services/tv/layout.tsx
Normal file
@ -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;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -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() {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Services Grid */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{/* Services Grid - Fixed height for consistent sizing */}
|
||||
<div className="grid grid-cols-2 gap-4 min-h-[340px] content-start">
|
||||
{(activeCategory === "personal" ? personalServices : businessServices).map(
|
||||
service => (
|
||||
<Link
|
||||
key={service.title}
|
||||
href={service.href}
|
||||
className="group flex flex-col items-center gap-3 p-4 rounded-xl hover:bg-gray-50 transition-colors"
|
||||
className="group flex flex-col items-center gap-3 p-4 rounded-xl hover:bg-gray-50 transition-colors h-[100px]"
|
||||
>
|
||||
<div className="w-16 h-16 rounded-full border-2 border-primary/30 flex items-center justify-center group-hover:border-primary/60 transition-colors">
|
||||
<div className="w-16 h-16 rounded-full border-2 border-primary/30 flex items-center justify-center group-hover:border-primary/60 transition-colors flex-shrink-0">
|
||||
{service.icon}
|
||||
</div>
|
||||
<span className="text-sm font-semibold text-foreground text-center">
|
||||
<span className="text-sm font-semibold text-foreground text-center leading-tight">
|
||||
{service.title}
|
||||
</span>
|
||||
</Link>
|
||||
@ -358,38 +354,6 @@ export function PublicLandingView() {
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Trust Badges */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="flex items-center gap-3 p-3 rounded-lg bg-primary/5">
|
||||
<Calendar className="h-5 w-5 text-primary flex-shrink-0" />
|
||||
<div>
|
||||
<p className="text-sm font-bold text-foreground">Est. 2002</p>
|
||||
<p className="text-xs text-muted-foreground">20+ Years Experience</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-3 rounded-lg bg-primary/5">
|
||||
<ShieldCheck className="h-5 w-5 text-primary flex-shrink-0" />
|
||||
<div>
|
||||
<p className="text-sm font-bold text-foreground">Registered Carrier</p>
|
||||
<p className="text-xs text-muted-foreground">A-19-9538</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-3 rounded-lg bg-primary/5">
|
||||
<Languages className="h-5 w-5 text-primary flex-shrink-0" />
|
||||
<div>
|
||||
<p className="text-sm font-bold text-foreground">Bilingual Support</p>
|
||||
<p className="text-xs text-muted-foreground">English & Japanese</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-3 rounded-lg bg-primary/5">
|
||||
<Users className="h-5 w-5 text-primary flex-shrink-0" />
|
||||
<div>
|
||||
<p className="text-sm font-bold text-foreground">21 Staff Members</p>
|
||||
<p className="text-xs text-muted-foreground">Dedicated Team</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-3 text-foreground">
|
||||
{["One Stop Solution", "English Support", "Onsite Support"].map(item => (
|
||||
<li key={item} className="flex items-center gap-3 text-base font-semibold">
|
||||
|
||||
@ -14,21 +14,22 @@ interface ServiceHighlightsProps {
|
||||
|
||||
function HighlightItem({ icon, title, description, highlight }: HighlightFeature) {
|
||||
return (
|
||||
<div className="flex flex-col h-full p-5 rounded-2xl bg-secondary/10 hover:bg-secondary/20 transition-colors border border-transparent">
|
||||
<div className="flex items-start justify-between gap-4 mb-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-background text-primary shadow-sm flex-shrink-0">
|
||||
<div className="group relative flex flex-col h-full p-5 rounded-xl bg-muted/30 border-l-4 border-l-primary/60 border-y border-r border-border/30 hover:bg-muted/50 transition-colors duration-200">
|
||||
{/* Icon - smaller, inline style */}
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary flex-shrink-0">
|
||||
{icon}
|
||||
</div>
|
||||
{highlight && (
|
||||
<span className="inline-flex items-center gap-1.5 py-1 px-2.5 rounded-full bg-background text-[10px] font-bold text-success leading-tight shadow-sm">
|
||||
<CheckCircle className="h-3.5 w-3.5 flex-shrink-0" />
|
||||
<span className="break-words">{highlight}</span>
|
||||
<span className="inline-flex items-center gap-1 py-0.5 px-2 rounded-full bg-primary/10 text-[10px] font-semibold text-primary whitespace-nowrap">
|
||||
<CheckCircle className="h-3 w-3" />
|
||||
{highlight}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h3 className="font-bold text-foreground text-base mb-2">{title}</h3>
|
||||
<p className="text-sm text-muted-foreground leading-relaxed flex-grow">{description}</p>
|
||||
<h3 className="font-semibold text-foreground text-sm mb-1.5">{title}</h3>
|
||||
<p className="text-xs text-muted-foreground leading-relaxed flex-grow">{description}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user