shared-features 0.1.8 → 0.1.9

package/dist/components/ads/AdCarousel.d.ts

@@ -0,0 +1,25 @@
+import { AdPlacement } from '../../types/campaigns';
+export interface AdCarouselProps {
+    /** Ad placement (defaults to home_banner) */
+    placement?: AdPlacement;
+    /** Rotation interval in ms (default: 20000 = 20 seconds) */
+    rotationInterval?: number;
+    /** Maximum number of campaigns to fetch */
+    maxCampaigns?: number;
+    /** Custom CSS class */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+}
+/**
+ * AdCarousel - Slider for after hero sections
+ *
+ * @example
+ * ```tsx
+ * <AdCarousel />
+ * <AdCarousel placement="home_banner" rotationInterval={15000} />
+ * ```
+ */
+export declare function AdCarousel({ placement, rotationInterval, maxCampaigns, className, style, }: AdCarouselProps): import("react/jsx-runtime").JSX.Element | null;
+export default AdCarousel;
+//# sourceMappingURL=AdCarousel.d.ts.map

package/dist/components/ads/AdCarousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdCarousel.d.ts","sourceRoot":"","sources":["../../../src/components/ads/AdCarousel.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH,OAAO,KAAK,EAAE,WAAW,EAAuB,MAAM,uBAAuB,CAAC;AAE9E,MAAM,WAAW,eAAe;IAC9B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAyB,EACzB,gBAAwB,EACxB,YAAgB,EAChB,SAAS,EACT,KAAK,GACN,EAAE,eAAe,kDAkRjB;AAED,eAAe,UAAU,CAAC"}

package/dist/components/ads/TopbarAdBanner.d.ts

@@ -0,0 +1,25 @@
+import { AdPlacement } from '../../types/campaigns';
+export interface TopbarAdBannerProps {
+    /** Ad placement (defaults to topbar_banner) */
+    placement?: AdPlacement;
+    /** Rotation interval in ms (default: 20000 = 20 seconds) */
+    rotationInterval?: number;
+    /** Maximum number of campaigns to fetch */
+    maxCampaigns?: number;
+    /** Custom CSS class */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+}
+/**
+ * TopbarAdBanner - Compact carousel banner for top of site
+ *
+ * @example
+ * ```tsx
+ * <TopbarAdBanner />
+ * <TopbarAdBanner rotationInterval={15000} />
+ * ```
+ */
+export declare function TopbarAdBanner({ placement, rotationInterval, maxCampaigns, className, style, }: TopbarAdBannerProps): import("react/jsx-runtime").JSX.Element | null;
+export default TopbarAdBanner;
+//# sourceMappingURL=TopbarAdBanner.d.ts.map

package/dist/components/ads/TopbarAdBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopbarAdBanner.d.ts","sourceRoot":"","sources":["../../../src/components/ads/TopbarAdBanner.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAMH,OAAO,KAAK,EAAE,WAAW,EAAuB,MAAM,uBAAuB,CAAC;AAK9E,MAAM,WAAW,mBAAmB;IAClC,+CAA+C;IAC/C,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,EAC7B,SAA2B,EAC3B,gBAAwB,EACxB,YAAgB,EAChB,SAAS,EACT,KAAK,GACN,EAAE,mBAAmB,kDA8PrB;AAED,eAAe,cAAc,CAAC"}

package/dist/components/ads/index.d.ts

@@ -10,9 +10,13 @@ export { AdSlider } from './AdSlider';
 export { AdModal } from './AdModal';
 export { AdUpdateModal } from './AdUpdateModal';
 export { AdBanner } from './AdBanner';
+export { TopbarAdBanner } from './TopbarAdBanner';
+export { AdCarousel } from './AdCarousel';
 export type { AdSliderProps } from './AdSlider';
 export type { AdModalProps } from './AdModal';
 export type { AdUpdateModalProps } from './AdUpdateModal';
 export type { AdBannerProps } from './AdBanner';
+export type { TopbarAdBannerProps } from './TopbarAdBanner';
+export type { AdCarouselProps } from './AdCarousel';
 export * from './variants';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ads/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ads/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ads/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGpD,cAAc,YAAY,CAAC"}

package/dist/components/index.cjs

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("../index-CLd2pR09.cjs");
+const index = require("../index--8iNqKw6.cjs");
 exports.AdBanner = index.AdBanner;
+exports.AdCarousel = index.AdCarousel;
 exports.AdModal = index.AdModal;
 exports.AdPanel = index.AdPanel;
 exports.AdSlider = index.AdSlider;
@@ -28,6 +29,7 @@ exports.SocialLinksBar = index.SocialLinksBar;
 exports.TaglineVariant = index.TaglineVariant;
 exports.TestimonialVariant = index.TestimonialVariant;
 exports.TestimonialsGrid = index.TestimonialsGrid;
+exports.TopbarAdBanner = index.TopbarAdBanner;
 exports.VideoVariant = index.VideoVariant;
 exports.getLargePanelVariant = index.getLargePanelVariant;
 exports.getSmallPanelVariant = index.getSmallPanelVariant;

package/dist/components/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/index.js

@@ -1,34 +1,36 @@
-import { A, a, b, c, d, e, f, B, g, C, h, i, D, F, j, k, G, H, L, M, S, l, m, n, T, o, p, V, q, r } from "../index-WWndE5XT.js";
+import { A, a, b, c, d, e, f, g, B, h, C, i, j, D, F, k, l, G, H, L, M, S, m, n, o, T, p, q, r, V, s, t } from "../index-gXNz1Cox.js";
 export {
   A as AdBanner,
-  a as AdModal,
-  b as AdPanel,
-  c as AdSlider,
-  d as AdUpdateModal,
-  e as AddressCard,
-  f as AnnouncementModal,
+  a as AdCarousel,
+  b as AdModal,
+  c as AdPanel,
+  d as AdSlider,
+  e as AdUpdateModal,
+  f as AddressCard,
+  g as AnnouncementModal,
   B as BroadcastBanner,
-  g as BroadcastBanners,
+  h as BroadcastBanners,
   C as CardVariant,
-  h as ComparisonVariant,
-  i as ContactCard,
+  i as ComparisonVariant,
+  j as ContactCard,
   D as DeveloperCard,
   F as FeatureGridVariant,
-  j as FeaturesVariant,
-  k as FooterSection,
+  k as FeaturesVariant,
+  l as FooterSection,
   G as GradientVariant,
   H as HeroVariant,
   L as LARGE_PANEL_VARIANTS,
   M as MinimalVariant,
   S as SMALL_PANEL_VARIANTS,
-  l as ServicesGrid,
-  m as SkillsDisplay,
-  n as SocialLinksBar,
+  m as ServicesGrid,
+  n as SkillsDisplay,
+  o as SocialLinksBar,
   T as TaglineVariant,
-  o as TestimonialVariant,
-  p as TestimonialsGrid,
+  p as TestimonialVariant,
+  q as TestimonialsGrid,
+  r as TopbarAdBanner,
   V as VideoVariant,
-  q as getLargePanelVariant,
-  r as getSmallPanelVariant
+  s as getLargePanelVariant,
+  t as getSmallPanelVariant
 };
 //# sourceMappingURL=index.js.map

package/dist/{index-CLd2pR09.cjs → index--8iNqKw6.cjs}

@@ -1472,6 +1472,476 @@ function AdBanner({
     }
   );
 }
+const DISMISSED_TOPBAR_KEY = "sf_topbar_dismissed";
+function TopbarAdBanner({
+  placement = "topbar_banner",
+  rotationInterval = 2e4,
+  maxCampaigns = 5,
+  className,
+  style
+}) {
+  const [currentIndex, setCurrentIndex] = react.useState(0);
+  const [isAnimating, setIsAnimating] = react.useState(false);
+  const [isDismissed, setIsDismissed] = react.useState(false);
+  const trackedImpressions = react.useRef(/* @__PURE__ */ new Set());
+  const timerRef = react.useRef(null);
+  react.useEffect(() => {
+    try {
+      const dismissed = sessionStorage.getItem(DISMISSED_TOPBAR_KEY);
+      if (dismissed === "true") {
+        setIsDismissed(true);
+      }
+    } catch {
+    }
+  }, []);
+  const handleDismiss = react.useCallback(() => {
+    setIsDismissed(true);
+    try {
+      sessionStorage.setItem(DISMISSED_TOPBAR_KEY, "true");
+    } catch {
+    }
+  }, []);
+  const {
+    campaigns,
+    loading,
+    recordImpression,
+    recordClick
+  } = useCommonFeatures.useCampaigns({ placement, maxCampaigns });
+  react.useEffect(() => {
+    if (campaigns.length === 0) return;
+    const campaign2 = campaigns[currentIndex];
+    if (!campaign2 || trackedImpressions.current.has(campaign2.id)) return;
+    trackedImpressions.current.add(campaign2.id);
+    recordImpression(campaign2);
+  }, [currentIndex, campaigns, recordImpression]);
+  react.useEffect(() => {
+    if (campaigns.length <= 1) return;
+    timerRef.current = setInterval(() => {
+      setIsAnimating(true);
+      setTimeout(() => {
+        setCurrentIndex((prev) => (prev + 1) % campaigns.length);
+        setTimeout(() => setIsAnimating(false), 50);
+      }, 200);
+    }, rotationInterval);
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [campaigns.length, rotationInterval]);
+  const handleClick = react.useCallback(
+    (campaign2) => {
+      recordClick(campaign2);
+      const targetUrl = campaign2.customCtaUrl || campaign2.product.url;
+      window.open(targetUrl, "_blank");
+    },
+    [recordClick]
+  );
+  const goToPrev = react.useCallback(() => {
+    if (timerRef.current) clearInterval(timerRef.current);
+    setIsAnimating(true);
+    setTimeout(() => {
+      setCurrentIndex((prev) => (prev - 1 + campaigns.length) % campaigns.length);
+      setTimeout(() => setIsAnimating(false), 50);
+    }, 200);
+  }, [campaigns.length]);
+  const goToNext = react.useCallback(() => {
+    if (timerRef.current) clearInterval(timerRef.current);
+    setIsAnimating(true);
+    setTimeout(() => {
+      setCurrentIndex((prev) => (prev + 1) % campaigns.length);
+      setTimeout(() => setIsAnimating(false), 50);
+    }, 200);
+  }, [campaigns.length]);
+  if (loading || campaigns.length === 0 || isDismissed) return null;
+  const campaign = campaigns[currentIndex];
+  if (!campaign) return null;
+  const { product } = campaign;
+  const displayTitle = campaign.customTitle || product.name;
+  const displayTagline = campaign.customTagline || product.tagline;
+  const displayCta = campaign.customCta || "Learn More";
+  const displayColor = campaign.customProductColor || product.color || "#3B82F6";
+  const displayIcon = campaign.customIcon || product.icon64 || "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    themes.Box,
+    {
+      className,
+      style: {
+        background: `linear-gradient(90deg, ${displayColor}10 0%, ${displayColor}18 50%, ${displayColor}10 100%)`,
+        borderBottom: `2px solid ${displayColor}40`,
+        position: "relative",
+        maxHeight: 100,
+        overflow: "hidden",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { style: { height: 2, background: displayColor } }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          themes.Flex,
+          {
+            align: "center",
+            justify: "between",
+            gap: "3",
+            px: { initial: "3", sm: "4" },
+            py: "2",
+            style: {
+              opacity: isAnimating ? 0 : 1,
+              transform: isAnimating ? "translateY(-5px)" : "translateY(0)",
+              transition: "all 0.2s ease-out",
+              minHeight: 50,
+              maxHeight: 70
+            },
+            children: [
+              campaigns.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { gap: "1", display: { initial: "none", sm: "flex" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                themes.IconButton,
+                {
+                  size: "1",
+                  variant: "ghost",
+                  color: "gray",
+                  onClick: goToPrev,
+                  style: { cursor: "pointer" },
+                  "aria-label": "Previous ad",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16 })
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { align: "center", gap: "3", style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  themes.Box,
+                  {
+                    style: {
+                      width: 40,
+                      height: 40,
+                      borderRadius: 8,
+                      background: `${displayColor}20`,
+                      border: `1px solid ${displayColor}40`,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      flexShrink: 0
+                    },
+                    dangerouslySetInnerHTML: { __html: displayIcon }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { direction: "column", gap: "0", style: { minWidth: 0, flex: 1 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { size: "2", weight: "bold", style: { lineHeight: 1.2 }, children: displayTitle }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    themes.Text,
+                    {
+                      size: "1",
+                      color: "gray",
+                      style: {
+                        display: "-webkit-box",
+                        WebkitLineClamp: 1,
+                        WebkitBoxOrient: "vertical",
+                        overflow: "hidden"
+                      },
+                      children: displayTagline
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  themes.Button,
+                  {
+                    size: "1",
+                    onClick: () => handleClick(campaign),
+                    style: {
+                      background: displayColor,
+                      color: "white",
+                      fontWeight: 600,
+                      fontSize: "12px",
+                      padding: "0 12px",
+                      height: 28,
+                      flexShrink: 0
+                    },
+                    children: [
+                      displayCta,
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 12, style: { marginLeft: 4 } })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { gap: "1", align: "center", children: [
+                campaigns.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { display: { initial: "none", sm: "block" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  themes.IconButton,
+                  {
+                    size: "1",
+                    variant: "ghost",
+                    color: "gray",
+                    onClick: goToNext,
+                    style: { cursor: "pointer" },
+                    "aria-label": "Next ad",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16 })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  themes.IconButton,
+                  {
+                    size: "1",
+                    variant: "ghost",
+                    color: "gray",
+                    onClick: handleDismiss,
+                    style: { cursor: "pointer" },
+                    "aria-label": "Close banner",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        campaigns.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { justify: "center", gap: "1", pb: "1", display: { initial: "flex", sm: "none" }, children: campaigns.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          themes.Box,
+          {
+            style: {
+              width: 6,
+              height: 6,
+              borderRadius: "50%",
+              background: i === currentIndex ? displayColor : "var(--gray-a5)",
+              transition: "background 0.2s ease"
+            }
+          },
+          i
+        )) })
+      ]
+    }
+  );
+}
+function AdCarousel({
+  placement = "home_banner",
+  rotationInterval = 2e4,
+  maxCampaigns = 5,
+  className,
+  style
+}) {
+  const [currentIndex, setCurrentIndex] = react.useState(0);
+  const [isAnimating, setIsAnimating] = react.useState(false);
+  const [progress, setProgress] = react.useState(0);
+  const trackedImpressions = react.useRef(/* @__PURE__ */ new Set());
+  const timerRef = react.useRef(null);
+  const {
+    campaigns,
+    loading,
+    recordImpression,
+    recordClick
+  } = useCommonFeatures.useCampaigns({ placement, maxCampaigns });
+  react.useEffect(() => {
+    if (campaigns.length === 0) return;
+    const campaign2 = campaigns[currentIndex];
+    if (!campaign2 || trackedImpressions.current.has(campaign2.id)) return;
+    trackedImpressions.current.add(campaign2.id);
+    recordImpression(campaign2);
+  }, [currentIndex, campaigns, recordImpression]);
+  react.useEffect(() => {
+    if (campaigns.length <= 1) return;
+    setProgress(0);
+    const progressInterval = 50;
+    const steps = rotationInterval / progressInterval;
+    let currentStep = 0;
+    timerRef.current = setInterval(() => {
+      currentStep++;
+      setProgress(currentStep / steps * 100);
+      if (currentStep >= steps) {
+        setIsAnimating(true);
+        setTimeout(() => {
+          setCurrentIndex((prev) => (prev + 1) % campaigns.length);
+          setProgress(0);
+          currentStep = 0;
+          setTimeout(() => setIsAnimating(false), 50);
+        }, 200);
+      }
+    }, progressInterval);
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [campaigns.length, rotationInterval, currentIndex]);
+  const handleClick = react.useCallback(
+    (campaign2) => {
+      recordClick(campaign2);
+      const targetUrl = campaign2.customCtaUrl || campaign2.product.url;
+      window.open(targetUrl, "_blank");
+    },
+    [recordClick]
+  );
+  const resetTimer = react.useCallback(() => {
+    if (timerRef.current) clearInterval(timerRef.current);
+    setProgress(0);
+  }, []);
+  const goToPrev = react.useCallback(() => {
+    resetTimer();
+    setIsAnimating(true);
+    setTimeout(() => {
+      setCurrentIndex((prev) => (prev - 1 + campaigns.length) % campaigns.length);
+      setTimeout(() => setIsAnimating(false), 50);
+    }, 200);
+  }, [campaigns.length, resetTimer]);
+  const goToNext = react.useCallback(() => {
+    resetTimer();
+    setIsAnimating(true);
+    setTimeout(() => {
+      setCurrentIndex((prev) => (prev + 1) % campaigns.length);
+      setTimeout(() => setIsAnimating(false), 50);
+    }, 200);
+  }, [campaigns.length, resetTimer]);
+  const goToSlide = react.useCallback((index) => {
+    if (index === currentIndex) return;
+    resetTimer();
+    setIsAnimating(true);
+    setTimeout(() => {
+      setCurrentIndex(index);
+      setTimeout(() => setIsAnimating(false), 50);
+    }, 200);
+  }, [currentIndex, resetTimer]);
+  if (loading || campaigns.length === 0) return null;
+  const campaign = campaigns[currentIndex];
+  if (!campaign) return null;
+  const { product } = campaign;
+  const displayTitle = campaign.customTitle || product.name;
+  const displayTagline = campaign.customTagline || product.tagline;
+  const displayCta = campaign.customCta || "Learn More";
+  const displayColor = campaign.customProductColor || product.color || "#3B82F6";
+  const displayIcon = campaign.customIcon || product.icon64 || "";
+  const displayFeatures = campaign.customFeatures || product.features || [];
+  return /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { className, style: { padding: "16px 0", ...style }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    themes.Card,
+    {
+      style: {
+        background: `linear-gradient(135deg, ${displayColor}08 0%, ${displayColor}15 100%)`,
+        border: `1px solid ${displayColor}25`,
+        overflow: "hidden"
+      },
+      children: [
+        campaigns.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { style: { height: 3, background: "var(--gray-a3)", position: "relative" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          themes.Box,
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              height: "100%",
+              width: `${progress}%`,
+              background: displayColor,
+              transition: "width 50ms linear"
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(themes.Box, { p: { initial: "3", sm: "4" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            themes.Flex,
+            {
+              direction: { initial: "column", sm: "row" },
+              align: "center",
+              justify: "between",
+              gap: "4",
+              style: {
+                opacity: isAnimating ? 0 : 1,
+                transform: isAnimating ? "translateX(-10px)" : "translateX(0)",
+                transition: "all 0.2s ease-out"
+              },
+              children: [
+                campaigns.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { display: { initial: "none", sm: "block" }, style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  themes.IconButton,
+                  {
+                    size: "2",
+                    variant: "ghost",
+                    color: "gray",
+                    onClick: goToPrev,
+                    style: { cursor: "pointer" },
+                    "aria-label": "Previous",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 20 })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { align: "center", gap: "4", style: { flex: 1, minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    themes.Box,
+                    {
+                      style: {
+                        width: 64,
+                        height: 64,
+                        borderRadius: 12,
+                        background: `${displayColor}18`,
+                        border: `2px solid ${displayColor}35`,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        flexShrink: 0
+                      },
+                      dangerouslySetInnerHTML: { __html: displayIcon }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { direction: "column", gap: "1", style: { flex: 1, minWidth: 0 }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { align: "center", gap: "2", wrap: "wrap", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { size: "4", weight: "bold", children: displayTitle }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        themes.Badge,
+                        {
+                          size: "1",
+                          style: {
+                            background: `${displayColor}20`,
+                            color: displayColor,
+                            fontWeight: 600
+                          },
+                          children: product.type === "extension" ? "Extension" : product.type === "android" ? "App" : "Web"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { size: "2", color: "gray", style: { lineHeight: 1.4 }, children: displayTagline }),
+                    /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { gap: "3", mt: "1", wrap: "wrap", display: { initial: "none", md: "flex" }, children: displayFeatures.slice(0, 3).map((feature, i) => /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { align: "center", gap: "1", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 14, color: displayColor, strokeWidth: 2.5 }),
+                      /* @__PURE__ */ jsxRuntime.jsx(themes.Text, { size: "1", color: "gray", children: feature })
+                    ] }, i)) })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    themes.Button,
+                    {
+                      size: { initial: "2", sm: "3" },
+                      onClick: () => handleClick(campaign),
+                      style: {
+                        background: displayColor,
+                        color: "white",
+                        fontWeight: 600,
+                        flexShrink: 0,
+                        boxShadow: `0 2px 8px ${displayColor}40`
+                      },
+                      children: [
+                        displayCta,
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 16, style: { marginLeft: 6 } })
+                      ]
+                    }
+                  )
+                ] }),
+                campaigns.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { display: { initial: "none", sm: "block" }, style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  themes.IconButton,
+                  {
+                    size: "2",
+                    variant: "ghost",
+                    color: "gray",
+                    onClick: goToNext,
+                    style: { cursor: "pointer" },
+                    "aria-label": "Next",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 20 })
+                  }
+                ) })
+              ]
+            }
+          ),
+          campaigns.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { justify: "center", gap: "2", mt: "3", children: campaigns.map((c, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            themes.Box,
+            {
+              onClick: () => goToSlide(i),
+              style: {
+                width: 32,
+                height: 4,
+                borderRadius: 2,
+                background: i === currentIndex ? c.product?.color || displayColor : "var(--gray-a4)",
+                cursor: "pointer",
+                transition: "background 0.2s ease"
+              }
+            },
+            i
+          )) })
+        ] })
+      ]
+    }
+  ) });
+}
 const TYPE_STYLES = {
   info: {
     icon: lucideReact.Info,
@@ -2082,6 +2552,7 @@ function FooterSection({ showContact = true, showSocialLinks = true, showAddress
   ] });
 }
 exports.AdBanner = AdBanner;
+exports.AdCarousel = AdCarousel;
 exports.AdModal = AdModal;
 exports.AdPanel = AdPanel;
 exports.AdSlider = AdSlider;
@@ -2108,7 +2579,8 @@ exports.SocialLinksBar = SocialLinksBar;
 exports.TaglineVariant = TaglineVariant;
 exports.TestimonialVariant = TestimonialVariant;
 exports.TestimonialsGrid = TestimonialsGrid;
+exports.TopbarAdBanner = TopbarAdBanner;
 exports.VideoVariant = VideoVariant;
 exports.getLargePanelVariant = getLargePanelVariant;
 exports.getSmallPanelVariant = getSmallPanelVariant;
-//# sourceMappingURL=index-CLd2pR09.cjs.map
+//# sourceMappingURL=index--8iNqKw6.cjs.map