@windstream/react-shared-components 0.2.22 → 0.2.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.2.22",
+  "version": "0.2.24",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

package/src/components/link/index.test.tsx

@@ -7,10 +7,23 @@ import "@testing-library/jest-dom";
 
 // Mock next/link
 jest.mock("next/link", () => {
-  const MockLink = ({ children, href, className, onClick, ...rest }: any) => (
-    <a href={href} className={className} onClick={onClick} {...rest}>
-      {children}
-    </a>
+  const ReactModule = require("react");
+  const MockLink = ReactModule.forwardRef(
+    (
+      { children, href, className, onClick, ...rest }: any,
+      ref: React.Ref<HTMLAnchorElement>
+    ) => (
+      <a
+        ref={ref}
+        href={href}
+        className={className}
+        onClick={onClick}
+        data-mock="next-link"
+        {...rest}
+      >
+        {children}
+      </a>
+    )
   );
   MockLink.displayName = "MockNextLink";
   return MockLink;
@@ -50,6 +63,67 @@ describe("Link", () => {
     });
   });
 
+  describe("preserveTrailingSlash", () => {
+    it("renders a plain <a> (bypassing next/link) when preserveTrailingSlash is true and href ends with '/'", () => {
+      render(
+        <Link href="/local/al/" preserveTrailingSlash>
+          Alabama
+        </Link>
+      );
+      const anchor = screen.getByText("Alabama").closest("a");
+      expect(anchor).toHaveAttribute("href", "/local/al/");
+      // plain <a> path does not carry the next/link mock marker
+      expect(anchor).not.toHaveAttribute("data-mock", "next-link");
+    });
+
+    it("still renders via next/link when preserveTrailingSlash is false even if href ends with '/'", () => {
+      render(<Link href="/local/al/">Alabama</Link>);
+      const anchor = screen.getByText("Alabama").closest("a");
+      expect(anchor).toHaveAttribute("data-mock", "next-link");
+      expect(anchor).toHaveAttribute("href", "/local/al/");
+    });
+
+    it("renders via next/link when preserveTrailingSlash is true but href has no trailing slash", () => {
+      render(
+        <Link href="/local/al" preserveTrailingSlash>
+          Alabama
+        </Link>
+      );
+      const anchor = screen.getByText("Alabama").closest("a");
+      expect(anchor).toHaveAttribute("data-mock", "next-link");
+    });
+
+    it("does not bypass next/link for protocol-relative hrefs even with a trailing slash", () => {
+      render(
+        <Link href="//example.com/" preserveTrailingSlash>
+          Protocol Relative
+        </Link>
+      );
+      const anchor = screen.getByText("Protocol Relative").closest("a");
+      expect(anchor).toHaveAttribute("data-mock", "next-link");
+    });
+
+    it("applies style on both render paths (plain <a> and next/link)", () => {
+      const { rerender } = render(
+        <Link href="/local/al/" preserveTrailingSlash style={{ color: "red" }}>
+          Alabama
+        </Link>
+      );
+      let anchor = screen.getByText("Alabama").closest("a")!;
+      expect(anchor).not.toHaveAttribute("data-mock", "next-link");
+      expect(anchor.style.color).toBe("red");
+
+      rerender(
+        <Link href="/internal" style={{ color: "red" }}>
+          Internal
+        </Link>
+      );
+      anchor = screen.getByText("Internal").closest("a")!;
+      expect(anchor).toHaveAttribute("data-mock", "next-link");
+      expect(anchor.style.color).toBe("red");
+    });
+  });
+
   describe("Variants", () => {
     it("applies unstyled variant with no extra classes", () => {
       render(
@@ -104,6 +178,20 @@ describe("Link", () => {
       expect(el).toHaveAttribute("tabindex", "-1");
     });
 
+    it("applies disabled accessibility attributes on internal links", () => {
+      render(
+        <Link href="/test" disabled={true}>
+          Disabled
+        </Link>
+      );
+      const el = screen.getByText("Disabled").closest("a");
+      // disabled links render as a plain <a>, not via next/link
+      expect(el).not.toHaveAttribute("data-mock", "next-link");
+      expect(el).toHaveAttribute("aria-disabled", "true");
+      expect(el).toHaveAttribute("tabindex", "-1");
+      expect(el).not.toHaveAttribute("href");
+    });
+
     it("prevents click when disabled", () => {
       const onClick = jest.fn();
       render(
@@ -173,6 +261,17 @@ describe("Link", () => {
       );
       expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
     });
+
+    it("forwards ref to the anchor element for internal (next/link) links", () => {
+      const ref = React.createRef<HTMLAnchorElement>();
+      render(
+        <Link ref={ref} href="/internal">
+          Internal Ref
+        </Link>
+      );
+      expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
+      expect(ref.current).toHaveAttribute("data-mock", "next-link");
+    });
   });
 
   describe("Custom className and style", () => {

package/src/components/link/index.tsx

@@ -23,6 +23,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
       style,
       external = false,
       disabled = false,
+      preserveTrailingSlash = false,
       ...props
     },
     ref
@@ -95,13 +96,20 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
         tabIndex: -1,
       }),
     };
-    if (external || (typeof href === "string" && href.startsWith("http"))) {
+
+    if (
+      disabled ||
+      external ||
+      (typeof href === "string" && href.startsWith("http"))
+    ) {
       return <a {...linkProps}>{children}</a>;
     }
     return (
       <NextLink
         href={href || "#"}
+        ref={ref}
         className={combinedClassName}
+        style={style}
         onClick={handleClick}
         {...props}
       >

package/src/components/link/types.ts

@@ -22,4 +22,16 @@ export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   external?: boolean;
   /** Disable the link */
   disabled?: boolean;
+  /**
+   * Preserve an intentional trailing slash on internal links.
+   * next/link normalizes the trailing slash based on the app's `trailingSlash`
+   * config (stripping it when `false`). When this is `true` and the href ends
+   * with a slash, the link renders as a plain anchor so the slash is kept.
+   *
+   * Tradeoff: because it renders a plain `<a>` instead of `next/link`, this
+   * link bypasses Next.js client-side navigation and prefetch — clicking it
+   * triggers a full page load. Only opt in when preserving the trailing slash
+   * matters more than client-side routing.
+   */
+  preserveTrailingSlash?: boolean;
 }

package/src/contentful/blocks/anchored-bottom-banner/AnchoredBottomBanner.stories.tsx

@@ -0,0 +1,155 @@
+import React from "react";
+
+import { AnchoredBottomBanner } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof AnchoredBottomBanner> = {
+  title: "Contentful Blocks/AnchoredBottomBanner",
+  component: AnchoredBottomBanner,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A fixed-position bottom banner with an optional countdown timer, icon, and CTA link.",
+      },
+    },
+  },
+  decorators: [
+    Story => (
+      <>
+        <style>{`
+          #anchored-banner .fixed > a > div > div {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            flex-wrap: nowrap;
+          }
+          #anchored-banner .material-symbols-rounded {
+            flex-shrink: 0;
+          }
+        `}</style>
+        <Story />
+      </>
+    ),
+  ],
+  argTypes: {
+    ctaSuffixText: { control: "text" },
+    backgroundColor: {
+      control: "select",
+      options: ["navy", "yellow", "green", "purple", "blue", "white"],
+    },
+    iconName: { control: "text" },
+    boxShadow: { control: "boolean" },
+    ctaButtonLabel: { control: "text" },
+    ctaButtonLink: { control: "text" },
+    ctaButtonTarget: {
+      control: "select",
+      options: ["_self", "_blank"],
+    },
+    anchorId: { control: "text" },
+    enableCountdownTimer: { control: "boolean" },
+    countdownStartDateTime: {
+      control: "date",
+      description: "Timer becomes visible after this time",
+    },
+    countdownEndDateTime: {
+      control: "date",
+      description: "Timer counts down to this time",
+    },
+  },
+  render: args => {
+    const { countdownStartDateTime, countdownEndDateTime, ...rest } = args;
+    return (
+      <AnchoredBottomBanner
+        {...rest}
+        countdownStartDateTime={
+          typeof countdownStartDateTime === "number" &&
+          Number.isFinite(countdownStartDateTime)
+            ? new Date(countdownStartDateTime).toISOString()
+            : (countdownStartDateTime as string | undefined)
+        }
+        countdownEndDateTime={
+          typeof countdownEndDateTime === "number" &&
+          Number.isFinite(countdownEndDateTime)
+            ? new Date(countdownEndDateTime).toISOString()
+            : (countdownEndDateTime as string | undefined)
+        }
+      />
+    );
+  },
+  args: {
+    ctaSuffixText: "to order Kinetic today",
+    backgroundColor: "yellow",
+    iconName: "call",
+    boxShadow: true,
+    ctaButtonLabel: "call (866) 445-8084",
+    ctaButtonLink: "tel:+1-866-445-8084",
+    ctaButtonTarget: "_blank",
+    anchorId: "anchored-banner",
+    enableCountdownTimer: false,
+    countdownStartDateTime: "2026-07-10T00:00:00.000Z",
+    countdownEndDateTime: "2026-12-31T23:59:59.000Z",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithCountdownTimer: Story = {
+  args: {
+    enableCountdownTimer: true,
+    countdownStartDateTime: new Date("2026-07-10T00:00:00.000Z").getTime() as unknown as string,
+    countdownEndDateTime: new Date("2026-12-31T23:59:59.000Z").getTime() as unknown as string,
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    iconName: "call",
+    ctaButtonLabel: "call (866) 445-8084",
+    ctaButtonLink: "tel:+1-866-445-8084",
+    backgroundColor: "green",
+    enableCountdownTimer: false,
+  },
+};
+
+export const WithSuffixText: Story = {
+  args: {
+    ctaSuffixText: "to order Kinetic today",
+    ctaButtonLabel: "call (866) 445-8084",
+    ctaButtonLink: "tel:+1-866-445-8084",
+    backgroundColor: "navy",
+  },
+};
+
+export const BackgroundNavy: Story = {
+  args: { backgroundColor: "navy" },
+};
+
+export const BackgroundYellow: Story = {
+  args: { backgroundColor: "yellow" },
+};
+
+export const BackgroundGreen: Story = {
+  args: { backgroundColor: "green" },
+};
+
+export const BackgroundPurple: Story = {
+  args: { backgroundColor: "purple" },
+};
+
+export const BackgroundBlue: Story = {
+  args: { backgroundColor: "blue" },
+};
+
+export const BackgroundWhite: Story = {
+  args: { backgroundColor: "white", boxShadow: true },
+};

package/src/contentful/blocks/breadcrumbs/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { BreadcrumbNavigationProps } from "./types";
 
+import { Link } from "@shared/components/link";
 import { MaterialIcon } from "@shared/components/material-icon";
 import { Text } from "@shared/components/text";
 
@@ -61,12 +62,12 @@ export const BreadcrumbNavigation: React.FC<
                   className="mr-2 h-10 w-10"
                 />
               )}
-              <a
+              <Link
                 href={linkProps.href}
                 className={`label3 mr-2 whitespace-nowrap ${color} hover:underline`}
               >
                 {linkProps.buttonLabel}
-              </a>
+              </Link>
 
               <MaterialIcon name="chevron_right" className={`${color} `} />
             </li>

package/src/contentful/blocks/callout/Callout.stories.mocks.ts

@@ -0,0 +1,327 @@
+import type { CalloutProps } from "./types";
+
+/* Card Items */
+
+export const defaultSimpleItems: CalloutProps["items"] = [
+  {
+    title: "ultra-fast fiber internet",
+    body: "Reliable high-speed internet for your home on our fiber-backed network.",
+    image: "https://images.ctfassets.net/8d4yn2ywtegc/2tArpGyb6Pmog6tU972NRR/07761d8a230242e0e8e302dbc0345f5e/icon.svg",
+    imageAlt: "Purple speedometer",
+    imageWidth: 88,
+    imageHeight: 88,
+    iconAlignment: "left",
+    imageView: "standard",
+    cta: {
+      buttonLabel: "See options",
+      href: "/fiber-internet",
+      target: "_self",
+      showButtonAs: "text",
+      preserveQueryParameters: true,
+    },
+    ctaAlignment: "left",
+    showBackgroundImage: true,
+    // Blog-compatible fields
+    shortDescription: "Reliable high-speed internet for your home on our fiber-backed network.",
+    slug: "/fiber-internet",
+    blogCreationDate: "2026-01-15",
+    category: "Internet",
+    cover: { src: "https://images.ctfassets.net/8d4yn2ywtegc/17t6o3lIEE1OmyRtK2LSiN/7c00763e6afc39e97492c8aa3a3e5260/image_390.jpg", alt: "Fiber internet", width: 1920, height: 1281 },
+    // FullImage / FloatingImage-compatible fields
+    description: "Reliable high-speed internet for your home on our fiber-backed network.",
+    caption: "Fiber-backed network",
+  },
+  {
+    title: "tv and entertainment",
+    body: "Start streaming with best-in-class live entertainment.",
+    image: "https://images.ctfassets.net/8d4yn2ywtegc/2XHS5ndV3g8qq4GmDxdmai/911b3dcfe6ba2240dd09b4d4153390a5/icon-1.svg",
+    imageAlt: "Green streaming play",
+    imageWidth: 88,
+    imageHeight: 88,
+    iconAlignment: "left",
+    imageView: "standard",
+    cta: {
+      buttonLabel: "See options",
+      href: "/products",
+      target: "_self",
+      showButtonAs: "text",
+      preserveQueryParameters: true,
+    },
+    ctaAlignment: "left",
+    // Blog-compatible fields
+    shortDescription: "Start streaming with best-in-class live entertainment.",
+    slug: "/products",
+    blogCreationDate: "2026-02-20",
+    category: "Entertainment",
+    cover: { src: "https://images.ctfassets.net/8d4yn2ywtegc/2QoSoX9jUc6G8Tvg007MI0/7ae950e16d2ac83ff75b992dc9e24c37/image_388.jpg", alt: "TV entertainment", width: 1920, height: 1281 },
+    // FullImage / FloatingImage-compatible fields
+    description: "Start streaming with best-in-class live entertainment.",
+    caption: "Live entertainment",
+  },
+  {
+    title: "voice services",
+    body: "Unlimited nationwide voice calling with Kinetic phone service.",
+    image: "https://images.ctfassets.net/8d4yn2ywtegc/1JPpHXSe3WcQBOSTHhK3YD/9398907485bc13a90e46df73a4c6634c/icon-2.svg",
+    imageAlt: "Blue phone",
+    imageWidth: 88,
+    imageHeight: 88,
+    iconAlignment: "left",
+    imageView: "standard",
+    cta: {
+      buttonLabel: "See options",
+      href: "/home-phone",
+      target: "_self",
+      showButtonAs: "text",
+      preserveQueryParameters: true,
+    },
+    ctaAlignment: "left",
+    // Blog-compatible fields
+    shortDescription: "Unlimited nationwide voice calling with Kinetic phone service.",
+    slug: "/home-phone",
+    blogCreationDate: "2026-03-10",
+    category: "Phone",
+    cover: { src: "https://images.ctfassets.net/8d4yn2ywtegc/6CVKQrlrmcuNyefT6jM96d/8264de217e3822c0e7284c823c57314c/image_391.jpg", alt: "Voice services", width: 1920, height: 1280 },
+    // FullImage / FloatingImage-compatible fields
+    description: "Unlimited nationwide voice calling with Kinetic phone service.",
+    caption: "Nationwide calling",
+  },
+];
+
+/* Floating Image Card Items */
+
+export const floatingImageItems: CalloutProps["items"] = [
+  {
+    cardType: "floatingImage",
+    title: "pick your favorite video conferencing spot",
+    body: "Our technicians can ensure Wi-Fi reaches your home office with optimal connectivity.",
+    image: {
+      href: "https://images.ctfassets.net/8d4yn2ywtegc/17t6o3lIEE1OmyRtK2LSiN/7c00763e6afc39e97492c8aa3a3e5260/image_390.jpg",
+      title: "Pick your favorite spot",
+      width: 1920,
+      height: 1281,
+    },
+  },
+  {
+    cardType: "floatingImage",
+    title: "stream and game from anywhere",
+    body: "Strong Wi-Fi throughout your whole home means you can enjoy your favorite movies, sports, and video games from every room.",
+    image: {
+      href: "https://images.ctfassets.net/8d4yn2ywtegc/2QoSoX9jUc6G8Tvg007MI0/7ae950e16d2ac83ff75b992dc9e24c37/image_388.jpg",
+      title: "Stream and game from anywhere",
+      width: 1920,
+      height: 1281,
+    },
+  },
+  {
+    cardType: "floatingImage",
+    title: "manage your smart home",
+    body: "Let our technicians know what smart devices you need connected during your Wi-Fi installation for seamless coverage.",
+    image: {
+      href: "https://images.ctfassets.net/8d4yn2ywtegc/6CVKQrlrmcuNyefT6jM96d/8264de217e3822c0e7284c823c57314c/image_391.jpg",
+      title: "Brother and sister smart home",
+      width: 1920,
+      height: 1280,
+    },
+  },
+];
+
+/* Full Image Card Items */
+
+export const fullImageItems: CalloutProps["items"] = [
+  {
+    cardType: "fullImage",
+    title: "Stream in 4K",
+    description: "Crystal clear entertainment on every device.",
+    caption: "Starting at $49/mo",
+    image: {
+      href: "https://images.ctfassets.net/8d4yn2ywtegc/2QoSoX9jUc6G8Tvg007MI0/7ae950e16d2ac83ff75b992dc9e24c37/image_388.jpg",
+      title: "Streaming",
+      width: 1920,
+      height: 1281,
+    },
+    cta: {
+      buttonLabel: "Learn more",
+      href: "/streaming",
+      showButtonAs: "solid",
+      buttonVariant: "primary_brand",
+    },
+  },
+  {
+    cardType: "fullImage",
+    title: "Work From Home",
+    description: "Stay productive with reliable, fast internet.",
+    caption: "Starting at $59/mo",
+    image: {
+      href: "https://images.ctfassets.net/8d4yn2ywtegc/17t6o3lIEE1OmyRtK2LSiN/7c00763e6afc39e97492c8aa3a3e5260/image_390.jpg",
+      title: "Work from home",
+      width: 1920,
+      height: 1281,
+    },
+    cta: {
+      buttonLabel: "See plans",
+      href: "/plans",
+      showButtonAs: "solid",
+      buttonVariant: "primary_brand",
+    },
+  },
+  {
+    cardType: "fullImage",
+    title: "Game Online",
+    description: "Low latency for competitive gaming.",
+    caption: "Starting at $69/mo",
+    image: {
+      href: "https://images.ctfassets.net/8d4yn2ywtegc/6CVKQrlrmcuNyefT6jM96d/8264de217e3822c0e7284c823c57314c/image_391.jpg",
+      title: "Gaming",
+      width: 1920,
+      height: 1280,
+    },
+    cta: {
+      buttonLabel: "Get started",
+      href: "/gaming",
+      showButtonAs: "solid",
+      buttonVariant: "primary_brand",
+    },
+  },
+];
+
+/*  Blog Card Items */
+
+export const blogItems: CalloutProps["items"] = [
+  {
+    cardType: "blog",
+    title: "How to Choose the Right Internet Plan",
+    shortDescription: "A guide to picking the best plan for your needs.",
+    blogCreationDate: "2026-01-15",
+    category: "Guides",
+    slug: "/blog/choose-internet-plan",
+    cover: {
+      src: "https://images.ctfassets.net/8d4yn2ywtegc/17t6o3lIEE1OmyRtK2LSiN/7c00763e6afc39e97492c8aa3a3e5260/image_390.jpg",
+      alt: "Internet plan guide",
+      width: 1920,
+      height: 1281,
+    },
+  },
+  {
+    cardType: "blog",
+    title: "Top 5 Tips for Faster Wi-Fi",
+    shortDescription: "Simple tricks to boost your home network speed.",
+    blogCreationDate: "2026-02-20",
+    category: "Tips",
+    slug: "/blog/faster-wifi-tips",
+    cover: {
+      src: "https://images.ctfassets.net/8d4yn2ywtegc/2QoSoX9jUc6G8Tvg007MI0/7ae950e16d2ac83ff75b992dc9e24c37/image_388.jpg",
+      alt: "Wi-Fi tips",
+      width: 1920,
+      height: 1281,
+    },
+  },
+  {
+    cardType: "blog",
+    title: "Understanding Fiber Optic Internet",
+    shortDescription: "Everything you need to know about fiber technology.",
+    blogCreationDate: "2026-03-10",
+    category: "Technology",
+    slug: "/blog/fiber-optic-internet",
+    cover: {
+      src: "https://images.ctfassets.net/8d4yn2ywtegc/6CVKQrlrmcuNyefT6jM96d/8264de217e3822c0e7284c823c57314c/image_391.jpg",
+      alt: "Fiber optic technology",
+      width: 1920,
+      height: 1280,
+    },
+  },
+];
+
+/* Default Callout Args  */
+
+export const defaultCalloutArgs: Partial<CalloutProps> = {
+  title: "whatever you need, Kinetic can deliver",
+  subtitle:
+    "We're not just delivering high-speed internet. We're delivering it with local care, backed by people who live and work right here in your community. That means service you can count on and people you can trust.",
+  items: defaultSimpleItems,
+  cardType: "simple",
+  cardStackingMobile: true,
+  backgroundColor: "white",
+  textColor: "#00002d",
+  cardsWidth: true,
+  maxCardsPerRow: 3,
+  applyBoxShadow: false,
+};
+
+/* Floating Image Callout Args — mirrors martech */
+
+export const withFloatingImageArgs: Partial<CalloutProps> = {
+  anchorId: "callout",
+  title: "we'll connect your devices, so you don't have to",
+  subtitle:
+    "With Kinetic's Whole Home Wi-Fi Set Up, our technicians ensure you can get online quickly from any device, anywhere in your home.",
+  items: floatingImageItems,
+  cardType: "floatingImage",
+  cardStackingMobile: true,
+  background: "#fff",
+  textColor: "#00002D",
+  maxCardsPerRow: 3,
+};
+
+/* Four Column Items */
+
+export const fourColumnItems: CalloutProps["items"] = [
+  {
+    title: "1 Gig Internet",
+    body: "Download speeds up to 1 Gbps for the ultimate connected home.",
+    image: "https://images.ctfassets.net/8d4yn2ywtegc/2tArpGyb6Pmog6tU972NRR/07761d8a230242e0e8e302dbc0345f5e/icon.svg",
+    imageAlt: "Purple speedometer",
+    imageWidth: 88,
+    imageHeight: 88,
+    iconAlignment: "center",
+    imageView: "icon",
+    cta: { buttonLabel: "View plan", href: "/plans/1gig", showButtonAs: "text" },
+    ctaAlignment: "center",
+  },
+  {
+    title: "500 Mbps Internet",
+    body: "Fast enough for streaming, gaming, and video calls simultaneously.",
+    image: "https://images.ctfassets.net/8d4yn2ywtegc/2XHS5ndV3g8qq4GmDxdmai/911b3dcfe6ba2240dd09b4d4153390a5/icon-1.svg",
+    imageAlt: "Green streaming play",
+    imageWidth: 88,
+    imageHeight: 88,
+    iconAlignment: "center",
+    imageView: "icon",
+    cta: { buttonLabel: "View plan", href: "/plans/500", showButtonAs: "text" },
+    ctaAlignment: "center",
+  },
+  {
+    title: "300 Mbps Internet",
+    body: "Great for households with multiple connected devices.",
+    image: "https://images.ctfassets.net/8d4yn2ywtegc/1JPpHXSe3WcQBOSTHhK3YD/9398907485bc13a90e46df73a4c6634c/icon-2.svg",
+    imageAlt: "Blue phone",
+    imageWidth: 88,
+    imageHeight: 88,
+    iconAlignment: "center",
+    imageView: "icon",
+    cta: { buttonLabel: "View plan", href: "/plans/300", showButtonAs: "text" },
+    ctaAlignment: "center",
+  },
+  {
+    title: "100 Mbps Internet",
+    body: "Reliable everyday internet for browsing and email.",
+    image: "https://images.ctfassets.net/8d4yn2ywtegc/2tArpGyb6Pmog6tU972NRR/07761d8a230242e0e8e302dbc0345f5e/icon.svg",
+    imageAlt: "Purple speedometer",
+    imageWidth: 88,
+    imageHeight: 88,
+    iconAlignment: "center",
+    imageView: "icon",
+    cta: { buttonLabel: "View plan", href: "/plans/100", showButtonAs: "text" },
+    ctaAlignment: "center",
+  },
+];
+
+/* Six Column Items */
+
+export const sixColumnItems: CalloutProps["items"] = [
+  { title: "Speed", body: "Up to 1 Gbps fiber speeds." },
+  { title: "Reliability", body: "99.9% uptime guaranteed." },
+  { title: "Support", body: "24/7 local customer care." },
+  { title: "Value", body: "No hidden fees or contracts." },
+  { title: "Security", body: "Built-in network protection." },
+  { title: "Flexibility", body: "Upgrade anytime, no penalty." },
+];