Refactor Service Caching and Enhance Data Handling

- Improved ServicesCacheService to optimize caching strategies and ensure data consistency across service components.
- Updated utility functions for SOQL query building to enhance performance and maintainability.
- Refined existing service classes for internet, SIM, and VPN offerings to leverage new caching mechanisms.
- Enhanced integration with Salesforce Change Data Capture for real-time updates on service eligibility and availability.

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

@@ -0,0 +1,49 @@
+"use client";
+
+import { Button } from "@/components/atoms/button";
+import { cn } from "@/lib/utils";
+import { ArrowLeftIcon } from "@heroicons/react/24/outline";
+import type { ReactNode } from "react";
+
+type Alignment = "left" | "center" | "right";
+
+interface ServicesBackLinkProps {
+  href: string;
+  label?: string;
+  align?: Alignment;
+  className?: string;
+  buttonClassName?: string;
+  icon?: ReactNode;
+}
+
+const alignmentMap: Record<Alignment, string> = {
+  left: "justify-start",
+  center: "justify-center",
+  right: "justify-end",
+};
+
+export function ServicesBackLink({
+  href,
+  label = "Back",
+  align = "left",
+  className,
+  buttonClassName,
+  icon = <ArrowLeftIcon className="w-4 h-4" />,
+}: ServicesBackLinkProps) {
+  return (
+    <div className={cn("mb-6 flex", alignmentMap[align], className)}>
+      <Button
+        as="a"
+        href={href}
+        size="sm"
+        variant="ghost"
+        leftIcon={icon}
+        className={cn("text-muted-foreground hover:text-foreground", buttonClassName)}
+      >
+        {label}
+      </Button>
+    </div>
+  );
+}
+
+export type { ServicesBackLinkProps };

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

@@ -0,0 +1,47 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import type { ReactNode } from "react";
+
+type Alignment = "left" | "center";
+
+interface ServicesHeroProps {
+  title: string;
+  description: string;
+  align?: Alignment;
+  eyebrow?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+}
+
+const alignmentMap: Record<Alignment, string> = {
+  left: "text-left items-start",
+  center: "text-center items-center",
+};
+
+export function ServicesHero({
+  title,
+  description,
+  align = "center",
+  eyebrow,
+  children,
+  className,
+}: ServicesHeroProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-2 mb-8",
+        alignmentMap[align],
+        className,
+        align === "center" ? "mx-auto max-w-2xl" : ""
+      )}
+    >
+      {eyebrow ? <div className="text-xs font-medium text-primary">{eyebrow}</div> : null}
+      <h1 className="text-2xl md:text-3xl font-bold text-foreground leading-tight">{title}</h1>
+      <p className="text-sm text-muted-foreground leading-relaxed">{description}</p>
+      {children ? <div className="mt-1 w-full">{children}</div> : null}
+    </div>
+  );
+}
+
+export type { ServicesHeroProps };