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.

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;
+}

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() {
                 </button>
               </div>
 
-              {/* Services Grid */}
+              {/* Services Grid - Fixed height for consistent sizing */}
-              <div className="grid grid-cols-2 gap-4">
+              <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">

apps/portal/src/features/services/components/base/ServiceHighlights.tsx

@@ -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="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">
-      <div className="flex items-start justify-between gap-4 mb-3">
+      {/* Icon - smaller, inline style */}
-        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-background text-primary shadow-sm flex-shrink-0">
+      <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">
+          <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.5 w-3.5 flex-shrink-0" />
+            <CheckCircle className="h-3 w-3" />
-            <span className="break-words">{highlight}</span>
+            {highlight}
           </span>
         )}
       </div>
 
-      <h3 className="font-bold text-foreground text-base mb-2">{title}</h3>
+      <h3 className="font-semibold text-foreground text-sm mb-1.5">{title}</h3>
-      <p className="text-sm text-muted-foreground leading-relaxed flex-grow">{description}</p>
+      <p className="text-xs text-muted-foreground leading-relaxed flex-grow">{description}</p>
     </div>
   );
 }