@gosalesdeal/blog 0.1.0 → 0.3.0

package/dist/components/landing/HeroFeatureBannerComponent.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import React from "react";
+import Link from "next/link";
+import Image from "next/image";
+const HeroFeatureBannerComponent = ({ props }) => {
+  const bullets = Array.isArray(props.bullets) ? props.bullets : [];
+  let headingNode = props.heading || "";
+  if (typeof headingNode === "string" && headingNode.includes("\n")) {
+    const parts = headingNode.split("\n");
+    headingNode = /* @__PURE__ */ jsx(Fragment, { children: parts.map((part, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      i > 0 && /* @__PURE__ */ jsx("br", {}),
+      part
+    ] }, i)) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: `hero-feature-banner ${props.wrapperClassName || ""}`, children: /* @__PURE__ */ jsxs("div", { className: props.sectionBgClassName || "", children: [
+    /* @__PURE__ */ jsx("style", { children: `
+          .hfb-tint { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
+          .hfb-content { position: relative; z-index: 2; }
+          .hfb-bullet i { color: ${props.bulletIconColor || "var(--primary-color, #f97316)"}; font-size: 1.1rem; }
+        ` }),
+    props.customCSS && /* @__PURE__ */ jsx("style", { children: props.customCSS }),
+    /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className: `relative w-full ${props.rounded || ""} overflow-hidden ${props.className || ""}`,
+        style: { minHeight: props.height || 560 },
+        children: [
+          /* @__PURE__ */ jsx(
+            Image,
+            {
+              src: props.bgImageSrc,
+              alt: props.bgAlt || "",
+              fill: true,
+              priority: true,
+              quality: 90,
+              sizes: "100vw",
+              style: {
+                objectFit: "cover",
+                objectPosition: "center right"
+              }
+            }
+          ),
+          props.leftTint && /* @__PURE__ */ jsx("div", { className: "hfb-tint" }),
+          /* @__PURE__ */ jsxs("div", { className: "hfb-content w-full h-full container", style: { position: "relative" }, children: [
+            /* @__PURE__ */ jsx("div", { className: "p-4 p-md-5", style: { height: "100%", display: "flex", flexDirection: "column", justifyContent: props.ctaPosition === "center" ? "center" : "flex-start" }, children: /* @__PURE__ */ jsxs("div", { style: { maxWidth: props.contentMaxWidth || 720 }, children: [
+              /* @__PURE__ */ jsx("h1", { className: props.headingClassName || "m-0 text-900", style: { fontSize: props.headingFontSize || 56, lineHeight: 1.05, fontWeight: 800, color: props.headingColor || void 0 }, children: headingNode }),
+              bullets.length > 0 && /* @__PURE__ */ jsx("ul", { className: "list-none m-0 p-0 mt-4", children: bullets.map((b, i) => /* @__PURE__ */ jsxs("li", { className: "flex align-items-center gap-3 mb-3 hfb-bullet", children: [
+                /* @__PURE__ */ jsx("span", { className: "flex align-items-center justify-content-center", style: { width: 34, height: 34, background: props.bulletIconBgColor || "rgba(255,100,50,.12)" }, children: /* @__PURE__ */ jsx("i", { className: `pi ${b.icon || "pi-check-circle"}` }) }),
+                /* @__PURE__ */ jsx("span", { className: props.bulletTextClassName || "text-800", style: { fontSize: 18, color: props.bulletTextColor || void 0 }, children: b.text })
+              ] }, i)) }),
+              props.ctaLabel && (!props.ctaPosition || props.ctaPosition === "left") && /* @__PURE__ */ jsx("div", { className: "mt-5", children: /* @__PURE__ */ jsxs(
+                Link,
+                {
+                  href: props.ctaHref || "#",
+                  className: props.ctaClassName || "no-underline inline-flex align-items-center gap-2 bg-primary text-white px-4 py-3 border-round-lg font-semibold",
+                  style: { fontSize: 16, textDecoration: "none", color: props.ctaColor || void 0, backgroundColor: props.ctaBgColor || void 0 },
+                  children: [
+                    props.ctaIcon && /* @__PURE__ */ jsx("i", { className: props.ctaIcon }),
+                    /* @__PURE__ */ jsx("span", { children: props.ctaLabel })
+                  ]
+                }
+              ) })
+            ] }) }),
+            props.ctaLabel && props.ctaPosition && props.ctaPosition !== "left" && /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  zIndex: 3,
+                  ...props.ctaPosition === "center" && { top: "50%", left: "50%", transform: "translate(-50%, -50%)" },
+                  ...props.ctaPosition === "top-left" && { top: "2rem", left: "2rem" },
+                  ...props.ctaPosition === "top-right" && { top: "2rem", right: "2rem" },
+                  ...props.ctaPosition === "bottom-left" && { bottom: "2rem", left: "2rem" },
+                  ...props.ctaPosition === "bottom-right" && { bottom: "2rem", right: "2rem" }
+                },
+                children: /* @__PURE__ */ jsxs(
+                  Link,
+                  {
+                    href: props.ctaHref || "#",
+                    className: props.ctaClassName || "no-underline inline-flex align-items-center gap-2 bg-primary text-white px-4 py-3 border-round-lg font-semibold",
+                    style: { fontSize: 16, textDecoration: "none", color: props.ctaColor || void 0, backgroundColor: props.ctaBgColor || void 0 },
+                    children: [
+                      props.ctaIcon && /* @__PURE__ */ jsx("i", { className: props.ctaIcon }),
+                      /* @__PURE__ */ jsx("span", { children: props.ctaLabel })
+                    ]
+                  }
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] }) });
+};
+export {
+  HeroFeatureBannerComponent
+};
+//# sourceMappingURL=HeroFeatureBannerComponent.js.map

package/dist/components/landing/HeroFeatureBannerComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroFeatureBannerComponent.js","sources":["../../../src/components/landing/HeroFeatureBannerComponent.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport Link from 'next/link';\nimport Image from 'next/image';\n\nexport const HeroFeatureBannerComponent: React.FC<{ props: Record<string, any> }> = ({ props }) => {\n  const bullets: any[] = Array.isArray(props.bullets) ? props.bullets : [];\n\n  // Transform heading line breaks\n  let headingNode: React.ReactNode = props.heading || '';\n  if (typeof headingNode === 'string' && headingNode.includes('\\n')) {\n    const parts = (headingNode as string).split('\\n');\n    headingNode = (\n      <>\n        {parts.map((part: string, i: number) => (\n          <React.Fragment key={i}>\n            {i > 0 && <br />}\n            {part}\n          </React.Fragment>\n        ))}\n      </>\n    );\n  }\n\n  return (\n    <div className={`hero-feature-banner ${props.wrapperClassName || ''}`}>\n      <div className={props.sectionBgClassName || ''}>\n        <style>{`\n          .hfb-tint { position: absolute; inset: 0; pointer-events: none; z-index: 1; }\n          .hfb-content { position: relative; z-index: 2; }\n          .hfb-bullet i { color: ${props.bulletIconColor || 'var(--primary-color, #f97316)'}; font-size: 1.1rem; }\n        `}</style>\n        {props.customCSS && <style>{props.customCSS}</style>}\n        <section\n          className={`relative w-full ${props.rounded || ''} overflow-hidden ${props.className || ''}`}\n          style={{ minHeight: props.height || 560 }}\n        >\n          {/* Background Image using Next.js Image */}\n          <Image\n            src={props.bgImageSrc}\n            alt={props.bgAlt || ''}\n            fill\n            priority\n            quality={90}\n            sizes=\"100vw\"\n            style={{\n              objectFit: 'cover',\n              objectPosition: 'center right',\n            }}\n          />\n\n          {props.leftTint && <div className=\"hfb-tint\" />}\n\n          <div className=\"hfb-content w-full h-full container\" style={{ position: 'relative' }}>\n            <div className=\"p-4 p-md-5\" style={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: props.ctaPosition === 'center' ? 'center' : 'flex-start' }}>\n              <div style={{ maxWidth: props.contentMaxWidth || 720 }}>\n                <h1 className={props.headingClassName || 'm-0 text-900'} style={{ fontSize: props.headingFontSize || 56, lineHeight: 1.05, fontWeight: 800, color: props.headingColor || undefined }}>\n                  {headingNode}\n                </h1>\n\n                {bullets.length > 0 && (\n                  <ul className=\"list-none m-0 p-0 mt-4\">\n                    {bullets.map((b: any, i: number) => (\n                      <li key={i} className=\"flex align-items-center gap-3 mb-3 hfb-bullet\">\n                        <span className=\"flex align-items-center justify-content-center\" style={{ width: 34, height: 34, background: props.bulletIconBgColor || 'rgba(255,100,50,.12)' }}>\n                          <i className={`pi ${b.icon || 'pi-check-circle'}`} />\n                        </span>\n                        <span className={props.bulletTextClassName || 'text-800'} style={{ fontSize: 18, color: props.bulletTextColor || undefined }}>{b.text}</span>\n                      </li>\n                    ))}\n                  </ul>\n                )}\n\n                {props.ctaLabel && (!props.ctaPosition || props.ctaPosition === 'left') && (\n                  <div className=\"mt-5\">\n                    <Link\n                      href={props.ctaHref || '#'}\n                      className={props.ctaClassName || 'no-underline inline-flex align-items-center gap-2 bg-primary text-white px-4 py-3 border-round-lg font-semibold'}\n                      style={{ fontSize: 16, textDecoration: 'none', color: props.ctaColor || undefined, backgroundColor: props.ctaBgColor || undefined }}\n                    >\n                      {props.ctaIcon && <i className={props.ctaIcon} />}\n                      <span>{props.ctaLabel}</span>\n                    </Link>\n                  </div>\n                )}\n              </div>\n            </div>\n            \n            {/* Positioned CTA button */}\n            {props.ctaLabel && props.ctaPosition && props.ctaPosition !== 'left' && (\n              <div \n                style={{\n                  position: 'absolute',\n                  zIndex: 3,\n                  ...(props.ctaPosition === 'center' && { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }),\n                  ...(props.ctaPosition === 'top-left' && { top: '2rem', left: '2rem' }),\n                  ...(props.ctaPosition === 'top-right' && { top: '2rem', right: '2rem' }),\n                  ...(props.ctaPosition === 'bottom-left' && { bottom: '2rem', left: '2rem' }),\n                  ...(props.ctaPosition === 'bottom-right' && { bottom: '2rem', right: '2rem' }),\n                }}\n              >\n                <Link\n                  href={props.ctaHref || '#'}\n                  className={props.ctaClassName || 'no-underline inline-flex align-items-center gap-2 bg-primary text-white px-4 py-3 border-round-lg font-semibold'}\n                  style={{ fontSize: 16, textDecoration: 'none', color: props.ctaColor || undefined, backgroundColor: props.ctaBgColor || undefined }}\n                >\n                  {props.ctaIcon && <i className={props.ctaIcon} />}\n                  <span>{props.ctaLabel}</span>\n                </Link>\n              </div>\n            )}\n          </div>\n        </section>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/landing/HeroFeatureBannerVideo.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+export type HeroBullet = {
+    icon?: string;
+    text: React.ReactNode;
+};
+export type HeroFeatureBannerVideoProps = {
+    bgVideoSrc?: string;
+    bgPosterSrc?: string;
+    bgPosterAlt?: string;
+    videoAutoplay?: boolean;
+    videoMuted?: boolean;
+    videoLoop?: boolean;
+    videoLazyLoad?: boolean;
+    /** Prioritize fetch/decode for above-the-fold hero usage */
+    videoPriority?: boolean;
+    heading: React.ReactNode;
+    bullets?: HeroBullet[];
+    cta?: {
+        label: string;
+        href?: string;
+        onClick?: () => void;
+        icon?: string;
+        backgroundColor?: string;
+        className?: string;
+    };
+    ctaPosition?: 'left' | 'center' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    height?: number;
+    rounded?: string;
+    leftTint?: boolean;
+    contentMaxWidth?: number;
+    className?: string;
+};
+declare const HeroFeatureBannerVideo: React.FC<HeroFeatureBannerVideoProps>;
+export default HeroFeatureBannerVideo;

package/dist/components/landing/HeroFeatureBannerVideo.js

@@ -0,0 +1,261 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+function configureMobileVideo(video, muted) {
+  video.muted = muted;
+  video.defaultMuted = muted;
+  video.playsInline = true;
+  video.setAttribute("playsinline", "");
+  video.setAttribute("webkit-playsinline", "");
+}
+const HeroBackgroundVideo = ({ src, autoplay, muted, loop, lazyLoad, priority }) => {
+  const containerRef = useRef(null);
+  const videoRef = useRef(null);
+  const [shouldLoad, setShouldLoad] = useState(!lazyLoad);
+  const [isReady, setIsReady] = useState(false);
+  const [reduceMotion, setReduceMotion] = useState(false);
+  useEffect(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const update = () => setReduceMotion(mq.matches);
+    update();
+    mq.addEventListener("change", update);
+    return () => mq.removeEventListener("change", update);
+  }, []);
+  useEffect(() => {
+    if (!lazyLoad || shouldLoad || reduceMotion) return;
+    const node = containerRef.current;
+    if (!node || typeof IntersectionObserver === "undefined") {
+      setShouldLoad(true);
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          setShouldLoad(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: "200px 0px", threshold: 0.01 }
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [lazyLoad, shouldLoad, reduceMotion]);
+  useEffect(() => {
+    setIsReady(false);
+  }, [src]);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !shouldLoad || reduceMotion) return;
+    configureMobileVideo(video, muted);
+    const tryPlay = () => {
+      setIsReady(true);
+      if (!autoplay) return;
+      configureMobileVideo(video, muted);
+      void video.play().catch(() => {
+      });
+    };
+    const onLoadedData = () => tryPlay();
+    const onCanPlay = () => tryPlay();
+    const onVisibilityChange = () => {
+      if (!document.hidden && autoplay && video.paused) {
+        configureMobileVideo(video, muted);
+        void video.play().catch(() => {
+        });
+      }
+    };
+    const hardFallback = window.setTimeout(tryPlay, 2e3);
+    if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+      tryPlay();
+    }
+    video.addEventListener("loadeddata", onLoadedData);
+    video.addEventListener("canplay", onCanPlay);
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    return () => {
+      window.clearTimeout(hardFallback);
+      video.removeEventListener("loadeddata", onLoadedData);
+      video.removeEventListener("canplay", onCanPlay);
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+    };
+  }, [shouldLoad, autoplay, muted, reduceMotion, src]);
+  const setVideoRef = (node) => {
+    videoRef.current = node;
+    if (node) {
+      configureMobileVideo(node, muted);
+    }
+  };
+  if (reduceMotion || !src) {
+    return /* @__PURE__ */ jsx("div", { ref: containerRef, className: "hfbv-media-layer", "aria-hidden": "true" });
+  }
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: "hfbv-media-layer", "aria-hidden": "true", children: shouldLoad && /* @__PURE__ */ jsx(
+    "video",
+    {
+      ref: setVideoRef,
+      className: `hfbv-video${isReady ? " hfbv-video--ready" : ""}`,
+      src,
+      muted,
+      loop,
+      autoPlay: autoplay,
+      playsInline: true,
+      preload: priority ? "auto" : "metadata",
+      fetchPriority: priority ? "high" : "auto",
+      disablePictureInPicture: true,
+      disableRemotePlayback: true,
+      tabIndex: -1
+    }
+  ) });
+};
+const HeroFeatureBannerVideo = ({
+  bgVideoSrc,
+  videoAutoplay = true,
+  videoMuted = true,
+  videoLoop = true,
+  videoLazyLoad = false,
+  videoPriority = true,
+  heading,
+  bullets = [],
+  cta,
+  ctaPosition = "left",
+  height = 560,
+  rounded = "",
+  leftTint = true,
+  contentMaxWidth = 720,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: `relative w-full ${rounded} overflow-hidden ${className}`,
+      "aria-label": "Hero feature banner",
+      style: { minHeight: height },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        .hfbv-media-stack { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
+        .hfbv-media-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
+        .hfbv-video {
+          position: absolute;
+          inset: 0;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          object-position: center right;
+          opacity: 0;
+          transition: opacity 0.35s ease;
+          transform: translate3d(0, 0, 0);
+          backface-visibility: hidden;
+          -webkit-backface-visibility: hidden;
+        }
+        .hfbv-video--ready { opacity: 1; }
+        .hfbv-tint { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
+        .hfbv-content { position: relative; z-index: 2; }
+        .hfbv-bullet i { color: var(--primary-color); font-size: 1.1rem; }
+      ` }),
+        /* @__PURE__ */ jsx("div", { className: "hfbv-media-stack", children: bgVideoSrc && /* @__PURE__ */ jsx(
+          HeroBackgroundVideo,
+          {
+            src: bgVideoSrc,
+            autoplay: videoAutoplay,
+            muted: videoMuted,
+            loop: videoLoop,
+            lazyLoad: videoLazyLoad,
+            priority: videoPriority
+          }
+        ) }),
+        leftTint && /* @__PURE__ */ jsx("div", { className: "hfbv-tint" }),
+        /* @__PURE__ */ jsxs("div", { className: "hfbv-content w-full h-full container", style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "p-4 p-md-5",
+              style: {
+                height: "100%",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: ctaPosition === "center" ? "center" : "flex-start"
+              },
+              children: /* @__PURE__ */ jsxs("div", { style: { maxWidth: contentMaxWidth }, children: [
+                /* @__PURE__ */ jsx("h1", { className: "m-0 text-900", style: { fontSize: 56, lineHeight: 1.05, fontWeight: 800 }, children: heading }),
+                bullets.length > 0 && /* @__PURE__ */ jsx("ul", { className: "list-none m-0 p-0 mt-4", children: bullets.map((b, i) => /* @__PURE__ */ jsxs("li", { className: "flex align-items-center gap-3 mb-3 hfbv-bullet", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "flex align-items-center justify-content-center",
+                      style: { width: 34, height: 34, background: "rgba(255,100,50,.12)" },
+                      children: /* @__PURE__ */ jsx("i", { className: `pi ${b.icon ?? "pi-check-circle"}` })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "text-800", style: { fontSize: 18 }, children: b.text })
+                ] }, i)) }),
+                cta && ctaPosition === "left" && /* @__PURE__ */ jsx("div", { className: "mt-5", children: cta.href ? /* @__PURE__ */ jsxs(
+                  "a",
+                  {
+                    href: cta.href,
+                    className: `p-button p-component p-button-rounded p-button-lg ${cta.className || ""}`,
+                    style: { textDecoration: "none", backgroundColor: cta.backgroundColor },
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "p-button-icon p-button-icon-left pi pi-arrow-right" }),
+                      /* @__PURE__ */ jsx("span", { className: "p-button-label", children: cta.label })
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: `p-button p-component p-button-rounded p-button-lg ${cta.className || ""}`,
+                    onClick: cta.onClick,
+                    style: { backgroundColor: cta.backgroundColor },
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "p-button-icon p-button-icon-left pi pi-arrow-right" }),
+                      /* @__PURE__ */ jsx("span", { className: "p-button-label", children: cta.label })
+                    ]
+                  }
+                ) })
+              ] })
+            }
+          ),
+          cta && ctaPosition !== "left" && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                zIndex: 3,
+                ...ctaPosition === "center" && { top: "50%", left: "50%", transform: "translate(-50%, -50%)" },
+                ...ctaPosition === "top-left" && { top: "2rem", left: "2rem" },
+                ...ctaPosition === "top-right" && { top: "2rem", right: "2rem" },
+                ...ctaPosition === "bottom-left" && { bottom: "2rem", left: "2rem" },
+                ...ctaPosition === "bottom-right" && { bottom: "2rem", right: "2rem" }
+              },
+              children: cta.href ? /* @__PURE__ */ jsxs(
+                "a",
+                {
+                  href: cta.href,
+                  className: `p-button p-component p-button-rounded p-button-lg ${cta.className || ""}`,
+                  style: { textDecoration: "none", backgroundColor: cta.backgroundColor },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "p-button-icon p-button-icon-left pi pi-arrow-right" }),
+                    /* @__PURE__ */ jsx("span", { className: "p-button-label", children: cta.label })
+                  ]
+                }
+              ) : /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: `p-button p-component p-button-rounded p-button-lg ${cta.className || ""}`,
+                  onClick: cta.onClick,
+                  style: { backgroundColor: cta.backgroundColor },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "p-button-icon p-button-icon-left pi pi-arrow-right" }),
+                    /* @__PURE__ */ jsx("span", { className: "p-button-label", children: cta.label })
+                  ]
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  HeroFeatureBannerVideo as default
+};
+//# sourceMappingURL=HeroFeatureBannerVideo.js.map

package/dist/components/landing/HeroFeatureBannerVideo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroFeatureBannerVideo.js","sources":["../../../src/components/landing/HeroFeatureBannerVideo.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useRef, useState } from 'react';\n\nexport type HeroBullet = {\n  icon?: string;\n  text: React.ReactNode;\n};\n\nexport type HeroFeatureBannerVideoProps = {\n  bgVideoSrc?: string;\n  bgPosterSrc?: string;\n  bgPosterAlt?: string;\n  videoAutoplay?: boolean;\n  videoMuted?: boolean;\n  videoLoop?: boolean;\n  videoLazyLoad?: boolean;\n  /** Prioritize fetch/decode for above-the-fold hero usage */\n  videoPriority?: boolean;\n  heading: React.ReactNode;\n  bullets?: HeroBullet[];\n  cta?: {\n    label: string;\n    href?: string;\n    onClick?: () => void;\n    icon?: string;\n    backgroundColor?: string;\n    className?: string;\n  };\n  ctaPosition?: 'left' | 'center' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n  height?: number;\n  rounded?: string;\n  leftTint?: boolean;\n  contentMaxWidth?: number;\n  className?: string;\n};\n\nfunction configureMobileVideo(video: HTMLVideoElement, muted: boolean) {\n  video.muted = muted;\n  video.defaultMuted = muted;\n  video.playsInline = true;\n  video.setAttribute('playsinline', '');\n  video.setAttribute('webkit-playsinline', '');\n}\n\nconst HeroBackgroundVideo: React.FC<{\n  src: string;\n  autoplay: boolean;\n  muted: boolean;\n  loop: boolean;\n  lazyLoad: boolean;\n  priority: boolean;\n}> = ({ src, autoplay, muted, loop, lazyLoad, priority }) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const [shouldLoad, setShouldLoad] = useState(!lazyLoad);\n  const [isReady, setIsReady] = useState(false);\n  const [reduceMotion, setReduceMotion] = useState(false);\n\n  useEffect(() => {\n    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n    const update = () => setReduceMotion(mq.matches);\n    update();\n    mq.addEventListener('change', update);\n    return () => mq.removeEventListener('change', update);\n  }, []);\n\n  useEffect(() => {\n    if (!lazyLoad || shouldLoad || reduceMotion) return;\n\n    const node = containerRef.current;\n    if (!node || typeof IntersectionObserver === 'undefined') {\n      setShouldLoad(true);\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((entry) => entry.isIntersecting)) {\n          setShouldLoad(true);\n          observer.disconnect();\n        }\n      },\n      { rootMargin: '200px 0px', threshold: 0.01 }\n    );\n\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [lazyLoad, shouldLoad, reduceMotion]);\n\n  useEffect(() => {\n    setIsReady(false);\n  }, [src]);\n\n  useEffect(() => {\n    const video = videoRef.current;\n    if (!video || !shouldLoad || reduceMotion) return;\n\n    configureMobileVideo(video, muted);\n\n    const tryPlay = () => {\n      setIsReady(true);\n      if (!autoplay) return;\n      configureMobileVideo(video, muted);\n      void video.play().catch(() => {\n        // Autoplay may be blocked until a user gesture on some mobile browsers\n      });\n    };\n\n    const onLoadedData = () => tryPlay();\n    const onCanPlay = () => tryPlay();\n\n    const onVisibilityChange = () => {\n      if (!document.hidden && autoplay && video.paused) {\n        configureMobileVideo(video, muted);\n        void video.play().catch(() => {});\n      }\n    };\n\n    // iOS Safari often never fires canplaythrough for large files — use loadeddata/canplay instead\n    const hardFallback = window.setTimeout(tryPlay, 2000);\n\n    if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {\n      tryPlay();\n    }\n\n    video.addEventListener('loadeddata', onLoadedData);\n    video.addEventListener('canplay', onCanPlay);\n    document.addEventListener('visibilitychange', onVisibilityChange);\n\n    return () => {\n      window.clearTimeout(hardFallback);\n      video.removeEventListener('loadeddata', onLoadedData);\n      video.removeEventListener('canplay', onCanPlay);\n      document.removeEventListener('visibilitychange', onVisibilityChange);\n    };\n  }, [shouldLoad, autoplay, muted, reduceMotion, src]);\n\n  const setVideoRef = (node: HTMLVideoElement | null) => {\n    videoRef.current = node;\n    if (node) {\n      configureMobileVideo(node, muted);\n    }\n  };\n\n  if (reduceMotion || !src) {\n    return <div ref={containerRef} className=\"hfbv-media-layer\" aria-hidden=\"true\" />;\n  }\n\n  return (\n    <div ref={containerRef} className=\"hfbv-media-layer\" aria-hidden=\"true\">\n      {shouldLoad && (\n        <video\n          ref={setVideoRef}\n          className={`hfbv-video${isReady ? ' hfbv-video--ready' : ''}`}\n          src={src}\n          muted={muted}\n          loop={loop}\n          autoPlay={autoplay}\n          playsInline\n          preload={priority ? 'auto' : 'metadata'}\n          // @ts-expect-error fetchPriority is supported in modern browsers\n          fetchPriority={priority ? 'high' : 'auto'}\n          disablePictureInPicture\n          disableRemotePlayback\n          tabIndex={-1}\n        />\n      )}\n    </div>\n  );\n};\n\nconst HeroFeatureBannerVideo: React.FC<HeroFeatureBannerVideoProps> = ({\n  bgVideoSrc,\n  videoAutoplay = true,\n  videoMuted = true,\n  videoLoop = true,\n  videoLazyLoad = false,\n  videoPriority = true,\n  heading,\n  bullets = [],\n  cta,\n  ctaPosition = 'left',\n  height = 560,\n  rounded = '',\n  leftTint = true,\n  contentMaxWidth = 720,\n  className = '',\n}) => {\n  return (\n    <section\n      className={`relative w-full ${rounded} overflow-hidden ${className}`}\n      aria-label=\"Hero feature banner\"\n      style={{ minHeight: height }}\n    >\n      <style>{`\n        .hfbv-media-stack { position: absolute; inset: 0; z-index: 0; overflow: hidden; }\n        .hfbv-media-layer { position: absolute; inset: 0; width: 100%; height: 100%; }\n        .hfbv-video {\n          position: absolute;\n          inset: 0;\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n          object-position: center right;\n          opacity: 0;\n          transition: opacity 0.35s ease;\n          transform: translate3d(0, 0, 0);\n          backface-visibility: hidden;\n          -webkit-backface-visibility: hidden;\n        }\n        .hfbv-video--ready { opacity: 1; }\n        .hfbv-tint { position: absolute; inset: 0; pointer-events: none; z-index: 1; }\n        .hfbv-content { position: relative; z-index: 2; }\n        .hfbv-bullet i { color: var(--primary-color); font-size: 1.1rem; }\n      `}</style>\n\n      <div className=\"hfbv-media-stack\">\n        {bgVideoSrc && (\n          <HeroBackgroundVideo\n            src={bgVideoSrc}\n            autoplay={videoAutoplay}\n            muted={videoMuted}\n            loop={videoLoop}\n            lazyLoad={videoLazyLoad}\n            priority={videoPriority}\n          />\n        )}\n      </div>\n\n      {leftTint && <div className=\"hfbv-tint\" />}\n\n      <div className=\"hfbv-content w-full h-full container\" style={{ position: 'relative' }}>\n        <div\n          className=\"p-4 p-md-5\"\n          style={{\n            height: '100%',\n            display: 'flex',\n            flexDirection: 'column',\n            justifyContent: ctaPosition === 'center' ? 'center' : 'flex-start',\n          }}\n        >\n          <div style={{ maxWidth: contentMaxWidth }}>\n            <h1 className=\"m-0 text-900\" style={{ fontSize: 56, lineHeight: 1.05, fontWeight: 800 }}>\n              {heading}\n            </h1>\n\n            {bullets.length > 0 && (\n              <ul className=\"list-none m-0 p-0 mt-4\">\n                {bullets.map((b, i) => (\n                  <li key={i} className=\"flex align-items-center gap-3 mb-3 hfbv-bullet\">\n                    <span\n                      className=\"flex align-items-center justify-content-center\"\n                      style={{ width: 34, height: 34, background: 'rgba(255,100,50,.12)' }}\n                    >\n                      <i className={`pi ${b.icon ?? 'pi-check-circle'}`} />\n                    </span>\n                    <span className=\"text-800\" style={{ fontSize: 18 }}>\n                      {b.text}\n                    </span>\n                  </li>\n                ))}\n              </ul>\n            )}\n\n            {cta && ctaPosition === 'left' && (\n              <div className=\"mt-5\">\n                {cta.href ? (\n                  <a\n                    href={cta.href}\n                    className={`p-button p-component p-button-rounded p-button-lg ${cta.className || ''}`}\n                    style={{ textDecoration: 'none', backgroundColor: cta.backgroundColor }}\n                  >\n                    <span className=\"p-button-icon p-button-icon-left pi pi-arrow-right\" />\n                    <span className=\"p-button-label\">{cta.label}</span>\n                  </a>\n                ) : (\n                  <button\n                    type=\"button\"\n                    className={`p-button p-component p-button-rounded p-button-lg ${cta.className || ''}`}\n                    onClick={cta.onClick}\n                    style={{ backgroundColor: cta.backgroundColor }}\n                  >\n                    <span className=\"p-button-icon p-button-icon-left pi pi-arrow-right\" />\n                    <span className=\"p-button-label\">{cta.label}</span>\n                  </button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n\n        {cta && ctaPosition !== 'left' && (\n          <div\n            style={{\n              position: 'absolute',\n              zIndex: 3,\n              ...(ctaPosition === 'center' && { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }),\n              ...(ctaPosition === 'top-left' && { top: '2rem', left: '2rem' }),\n              ...(ctaPosition === 'top-right' && { top: '2rem', right: '2rem' }),\n              ...(ctaPosition === 'bottom-left' && { bottom: '2rem', left: '2rem' }),\n              ...(ctaPosition === 'bottom-right' && { bottom: '2rem', right: '2rem' }),\n            }}\n          >\n            {cta.href ? (\n              <a\n                href={cta.href}\n                className={`p-button p-component p-button-rounded p-button-lg ${cta.className || ''}`}\n                style={{ textDecoration: 'none', backgroundColor: cta.backgroundColor }}\n              >\n                <span className=\"p-button-icon p-button-icon-left pi pi-arrow-right\" />\n                <span className=\"p-button-label\">{cta.label}</span>\n              </a>\n            ) : (\n              <button\n                type=\"button\"\n                className={`p-button p-component p-button-rounded p-button-lg ${cta.className || ''}`}\n                onClick={cta.onClick}\n                style={{ backgroundColor: cta.backgroundColor }}\n              >\n                <span className=\"p-button-icon p-button-icon-left pi pi-arrow-right\" />\n                <span className=\"p-button-label\">{cta.label}</span>\n              </button>\n            )}\n          </div>\n        )}\n      </div>\n    </section>\n  );\n};\n\nexport default HeroFeatureBannerVideo;\n"],"names":[],"mappings":"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"}

package/dist/components/landing/HeroFeatureBannerVideoComponent.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+export declare const HeroFeatureBannerVideoComponent: React.FC<{
+    props: Record<string, any>;
+    isAboveFold?: boolean;
+}>;

package/dist/components/landing/HeroFeatureBannerVideoComponent.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import React, { useEffect } from "react";
+import HeroFeatureBannerVideo from "./HeroFeatureBannerVideo.js";
+import { resolveMediaSrc } from "../../lib/resolveMediaSrc.js";
+function useHeroVideoPreload(src, enabled = true) {
+  useEffect(() => {
+    if (!src || !enabled) return;
+    const existing = document.querySelector(`link[data-hfbv-preload="${src}"]`);
+    if (existing) return;
+    const link = document.createElement("link");
+    link.rel = "preload";
+    link.as = "video";
+    link.href = src;
+    link.setAttribute("fetchpriority", "high");
+    link.setAttribute("data-hfbv-preload", src);
+    document.head.appendChild(link);
+    return () => {
+      link.remove();
+    };
+  }, [src, enabled]);
+}
+const HeroFeatureBannerVideoComponent = ({ props, isAboveFold: _isAboveFold = false }) => {
+  const bullets = Array.isArray(props.bullets) ? props.bullets : [];
+  let headingNode = props.heading || "";
+  if (typeof headingNode === "string" && headingNode.includes("\n")) {
+    const parts = headingNode.split("\n");
+    headingNode = /* @__PURE__ */ jsx(Fragment, { children: parts.map((part, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      i > 0 && /* @__PURE__ */ jsx("br", {}),
+      part
+    ] }, i)) });
+  }
+  const cta = props.ctaLabel ? {
+    label: props.ctaLabel,
+    href: props.ctaHref,
+    icon: props.ctaIcon,
+    backgroundColor: props.ctaBgColor,
+    className: props.ctaClassName
+  } : void 0;
+  const bgVideoSrc = resolveMediaSrc(props.bgVideoSrc, props.bgVideoSrcNew);
+  useHeroVideoPreload(bgVideoSrc, Boolean(bgVideoSrc));
+  return /* @__PURE__ */ jsx("div", { className: `hero-feature-banner-video ${props.wrapperClassName || ""}`, children: /* @__PURE__ */ jsxs("div", { className: props.sectionBgClassName || "", children: [
+    props.customCSS && /* @__PURE__ */ jsx("style", { children: props.customCSS }),
+    /* @__PURE__ */ jsx(
+      HeroFeatureBannerVideo,
+      {
+        bgVideoSrc,
+        videoAutoplay: Boolean(bgVideoSrc),
+        videoMuted: true,
+        videoLoop: props.videoLoop !== false,
+        videoLazyLoad: false,
+        videoPriority: true,
+        heading: headingNode,
+        bullets,
+        cta,
+        ctaPosition: props.ctaPosition || "left",
+        height: props.height || 560,
+        rounded: props.rounded || "",
+        leftTint: props.leftTint !== false,
+        contentMaxWidth: props.contentMaxWidth || 720,
+        className: props.className || ""
+      }
+    )
+  ] }) });
+};
+export {
+  HeroFeatureBannerVideoComponent
+};
+//# sourceMappingURL=HeroFeatureBannerVideoComponent.js.map

package/dist/components/landing/HeroFeatureBannerVideoComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroFeatureBannerVideoComponent.js","sources":["../../../src/components/landing/HeroFeatureBannerVideoComponent.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect } from 'react';\nimport HeroFeatureBannerVideo from './HeroFeatureBannerVideo';\nimport { resolveMediaSrc } from '../../lib/resolveMediaSrc';\n\nfunction useHeroVideoPreload(src?: string, enabled = true) {\n  useEffect(() => {\n    if (!src || !enabled) return;\n\n    const existing = document.querySelector<HTMLLinkElement>(`link[data-hfbv-preload=\"${src}\"]`);\n    if (existing) return;\n\n    const link = document.createElement('link');\n    link.rel = 'preload';\n    link.as = 'video';\n    link.href = src;\n    link.setAttribute('fetchpriority', 'high');\n    link.setAttribute('data-hfbv-preload', src);\n    document.head.appendChild(link);\n\n    return () => {\n      link.remove();\n    };\n  }, [src, enabled]);\n}\n\nexport const HeroFeatureBannerVideoComponent: React.FC<{\n  props: Record<string, any>;\n  isAboveFold?: boolean;\n}> = ({ props, isAboveFold: _isAboveFold = false }) => {\n  const bullets: any[] = Array.isArray(props.bullets) ? props.bullets : [];\n\n  let headingNode: React.ReactNode = props.heading || '';\n  if (typeof headingNode === 'string' && headingNode.includes('\\n')) {\n    const parts = (headingNode as string).split('\\n');\n    headingNode = (\n      <>\n        {parts.map((part: string, i: number) => (\n          <React.Fragment key={i}>\n            {i > 0 && <br />}\n            {part}\n          </React.Fragment>\n        ))}\n      </>\n    );\n  }\n\n  const cta =\n    props.ctaLabel\n      ? {\n          label: props.ctaLabel,\n          href: props.ctaHref,\n          icon: props.ctaIcon,\n          backgroundColor: props.ctaBgColor,\n          className: props.ctaClassName\n        }\n      : undefined;\n\n  const bgVideoSrc = resolveMediaSrc(props.bgVideoSrc, props.bgVideoSrcNew);\n\n  // Hero videos must load immediately — lazy load breaks mobile autoplay (especially iOS Safari)\n  useHeroVideoPreload(bgVideoSrc, Boolean(bgVideoSrc));\n\n  return (\n    <div className={`hero-feature-banner-video ${props.wrapperClassName || ''}`}>\n      <div className={props.sectionBgClassName || ''}>\n        {props.customCSS && <style>{props.customCSS}</style>}\n        <HeroFeatureBannerVideo\n          bgVideoSrc={bgVideoSrc}\n          videoAutoplay={Boolean(bgVideoSrc)}\n          videoMuted\n          videoLoop={props.videoLoop !== false}\n          videoLazyLoad={false}\n          videoPriority\n          heading={headingNode}\n          bullets={bullets}\n          cta={cta}\n          ctaPosition={props.ctaPosition || 'left'}\n          height={props.height || 560}\n          rounded={props.rounded || ''}\n          leftTint={props.leftTint !== false}\n          contentMaxWidth={props.contentMaxWidth || 720}\n          className={props.className || ''}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAMA,SAAS,oBAAoB,KAAc,UAAU,MAAM;AACzD,YAAU,MAAM;AACd,QAAI,CAAC,OAAO,CAAC,QAAS;AAEtB,UAAM,WAAW,SAAS,cAA+B,2BAA2B,GAAG,IAAI;AAC3F,QAAI,SAAU;AAEd,UAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,SAAK,MAAM;AACX,SAAK,KAAK;AACV,SAAK,OAAO;AACZ,SAAK,aAAa,iBAAiB,MAAM;AACzC,SAAK,aAAa,qBAAqB,GAAG;AAC1C,aAAS,KAAK,YAAY,IAAI;AAE9B,WAAO,MAAM;AACX,WAAK,OAAA;AAAA,IACP;AAAA,EACF,GAAG,CAAC,KAAK,OAAO,CAAC;AACnB;AAEO,MAAM,kCAGR,CAAC,EAAE,OAAO,aAAa,eAAe,YAAY;AACrD,QAAM,UAAiB,MAAM,QAAQ,MAAM,OAAO,IAAI,MAAM,UAAU,CAAA;AAEtE,MAAI,cAA+B,MAAM,WAAW;AACpD,MAAI,OAAO,gBAAgB,YAAY,YAAY,SAAS,IAAI,GAAG;AACjE,UAAM,QAAS,YAAuB,MAAM,IAAI;AAChD,kBACE,oBAAA,UAAA,EACG,gBAAM,IAAI,CAAC,MAAc,MACxB,qBAAC,MAAM,UAAN,EACE,UAAA;AAAA,MAAA,IAAI,yBAAM,MAAA,CAAA,CAAG;AAAA,MACb;AAAA,IAAA,KAFkB,CAGrB,CACD,GACH;AAAA,EAEJ;AAEA,QAAM,MACJ,MAAM,WACF;AAAA,IACE,OAAO,MAAM;AAAA,IACb,MAAM,MAAM;AAAA,IACZ,MAAM,MAAM;AAAA,IACZ,iBAAiB,MAAM;AAAA,IACvB,WAAW,MAAM;AAAA,EAAA,IAEnB;AAEN,QAAM,aAAa,gBAAgB,MAAM,YAAY,MAAM,aAAa;AAGxE,sBAAoB,YAAY,QAAQ,UAAU,CAAC;AAEnD,SACE,oBAAC,OAAA,EAAI,WAAW,6BAA6B,MAAM,oBAAoB,EAAE,IACvE,UAAA,qBAAC,OAAA,EAAI,WAAW,MAAM,sBAAsB,IACzC,UAAA;AAAA,IAAA,MAAM,aAAa,oBAAC,SAAA,EAAO,UAAA,MAAM,WAAU;AAAA,IAC5C;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAe,QAAQ,UAAU;AAAA,QACjC,YAAU;AAAA,QACV,WAAW,MAAM,cAAc;AAAA,QAC/B,eAAe;AAAA,QACf,eAAa;AAAA,QACb,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA,aAAa,MAAM,eAAe;AAAA,QAClC,QAAQ,MAAM,UAAU;AAAA,QACxB,SAAS,MAAM,WAAW;AAAA,QAC1B,UAAU,MAAM,aAAa;AAAA,QAC7B,iBAAiB,MAAM,mBAAmB;AAAA,QAC1C,WAAW,MAAM,aAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EAChC,EAAA,CACF,EAAA,CACF;AAEJ;"}

package/dist/components/landing/VarietyReviewslistComponent.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+export declare const ReviewsListRender: React.FC<{
+    props: Record<string, any>;
+}>;