@opensite/ui 0.1.3 → 0.1.4

package/dist/footer-cta-social.cjs

@@ -0,0 +1,221 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// components/blocks/footers/footer-cta-social.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var svgCache = /* @__PURE__ */ new Map();
+function DynamicIcon({
+  name,
+  size = 28,
+  color,
+  className,
+  alt
+}) {
+  const [svgContent, setSvgContent] = React__namespace.useState(null);
+  const [isLoading, setIsLoading] = React__namespace.useState(true);
+  const [error, setError] = React__namespace.useState(null);
+  const { url, iconName } = React__namespace.useMemo(() => {
+    const separator = name.includes("/") ? "/" : ":";
+    const [prefix, iconName2] = name.split(separator);
+    const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
+    return {
+      url: baseUrl,
+      iconName: iconName2
+    };
+  }, [name, size]);
+  React__namespace.useEffect(() => {
+    let isMounted = true;
+    const fetchSvg = async () => {
+      const cached = svgCache.get(url);
+      if (cached) {
+        if (isMounted) {
+          setSvgContent(cached);
+          setIsLoading(false);
+        }
+        return;
+      }
+      try {
+        setIsLoading(true);
+        setError(null);
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error(`Failed to fetch icon: ${response.status}`);
+        }
+        let svg = await response.text();
+        svg = processSvgForCurrentColor(svg);
+        svgCache.set(url, svg);
+        if (isMounted) {
+          setSvgContent(svg);
+          setIsLoading(false);
+        }
+      } catch (err) {
+        if (isMounted) {
+          setError(err instanceof Error ? err.message : "Failed to load icon");
+          setIsLoading(false);
+        }
+      }
+    };
+    fetchSvg();
+    return () => {
+      isMounted = false;
+    };
+  }, [url]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn("inline-block", className),
+        style: { width: size, height: size },
+        "aria-hidden": "true"
+      }
+    );
+  }
+  if (error || !svgContent) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn("inline-block", className),
+        style: { width: size, height: size },
+        role: "img",
+        "aria-label": alt || iconName
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn("inline-flex items-center justify-center", className),
+      style: {
+        width: size,
+        height: size,
+        color: color || "inherit"
+      },
+      role: "img",
+      "aria-label": alt || iconName,
+      dangerouslySetInnerHTML: { __html: svgContent }
+    }
+  );
+}
+function processSvgForCurrentColor(svg) {
+  let processed = svg;
+  processed = processed.replace(
+    /stroke=["'](#000000|#000|black)["']/gi,
+    'stroke="currentColor"'
+  );
+  processed = processed.replace(
+    /fill=["'](#000000|#000|black)["']/gi,
+    'fill="currentColor"'
+  );
+  return processed;
+}
+var defaultSocialLinks = [
+  { icon: "lucide/twitter", url: "#", label: "Twitter" },
+  { icon: "lucide/instagram", url: "#", label: "Instagram" },
+  { icon: "lucide/facebook", url: "#", label: "Facebook" }
+];
+function FooterCtaSocial({
+  className,
+  preHeading = "Let's connect",
+  heading = "You want to scale faster? Try Opensite today.",
+  description = "Join thousands of companies already using our platform to scale their operations",
+  buttonText = "Get Started Now",
+  buttonUrl = "#",
+  email = "hello@opensite.ai",
+  socialLinks = defaultSocialLinks
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("relative py-32", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 container", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex max-w-3xl flex-col items-center gap-2 text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-[linear-gradient(270deg,var(--primary,rgb(255,255,255))_0%,var(--secondary,rgb(0,0,0))_100%)] opacity-50" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground italic md:text-base", children: preHeading }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-[linear-gradient(270deg,var(--secondary,rgb(0,0,0))_0%,var(--primary,rgb(255,255,255))_100%)] opacity-50" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "py-6 text-5xl font-bold md:text-6xl", children: heading }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-2xl text-base text-muted-foreground md:text-lg", children: description }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "a",
+      {
+        href: buttonUrl,
+        className: "group relative mt-4 inline-flex items-center gap-2 rounded-lg border bg-background px-8 py-4 text-base font-medium transition-all hover:bg-muted",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: buttonText }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DynamicIcon,
+            {
+              name: "lucide/arrow-up-right",
+              size: 16,
+              className: "transition-transform group-hover:translate-x-1 group-hover:-translate-y-1"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-6 pt-8", children: socialLinks.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: link.url,
+          className: "text-muted-foreground transition-colors hover:text-foreground",
+          "aria-label": link.label,
+          children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: link.icon, size: 20 })
+        }
+      ),
+      idx < socialLinks.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-px bg-border" })
+    ] }, idx)) }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pt-2 text-sm text-muted-foreground md:text-base", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: `mailto:${email}`,
+        className: "transition-colors hover:text-foreground",
+        children: email
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 border-t pt-8 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+        "\xA9 ",
+        (/* @__PURE__ */ new Date()).getFullYear(),
+        " Opensite AI. All rights reserved."
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: "https://opensite.ai",
+          className: "mt-2 inline-block hover:text-foreground",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: "AI Website and Automation Platform by Opensite"
+        }
+      )
+    ] })
+  ] }) }) });
+}
+
+exports.FooterCtaSocial = FooterCtaSocial;
+//# sourceMappingURL=footer-cta-social.cjs.map
+//# sourceMappingURL=footer-cta-social.cjs.map

package/dist/footer-cta-social.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../lib/utils.ts","../components/ui/dynamic-icon.tsx","../components/blocks/footers/footer-cta-social.tsx"],"names":["twMerge","clsx","React","iconName","jsx","jsxs","React2"],"mappings":"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","file":"footer-cta-social.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\ninterface DynamicIconProps {\n  /**\n   * Icon name in format: prefix/name or prefix:name\n   * Examples: \"lucide/home\", \"mdi:account\", \"heroicons/check\"\n   */\n  name: string;\n  /**\n   * Icon size in pixels\n   * @default 28\n   */\n  size?: number;\n  /**\n   * Icon color - accepts any valid CSS color\n   * Note: When not specified, the icon inherits color from parent via CSS currentColor\n   */\n  color?: string;\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n  /**\n   * Alt text for accessibility\n   */\n  alt?: string;\n}\n\n// Simple in-memory cache for fetched SVGs\nconst svgCache = new Map<string, string>();\n\n/**\n * Lightweight icon component that dynamically loads SVG icons from icons.opensite.ai API.\n *\n * Features:\n * - Pulls SVGs from https://icons.opensite.ai API and inlines them for CSS color inheritance\n * - Supports currentColor - icons inherit color from parent element\n * - Accepts prefix/name or prefix:name format\n * - Customizable size and explicit color via props\n * - In-memory caching to prevent duplicate fetches\n *\n * @example\n * ```tsx\n * // Icon inherits color from parent (recommended for hover states, etc.)\n * <span className=\"text-white hover:text-red-500\">\n *   <DynamicIcon name=\"lucide/home\" size={24} />\n * </span>\n *\n * // Icon with explicit color\n * <DynamicIcon name=\"mdi:account\" size={32} color=\"#ff0000\" />\n * ```\n */\nexport function DynamicIcon({\n  name,\n  size = 28,\n  color,\n  className,\n  alt,\n}: DynamicIconProps) {\n  const [svgContent, setSvgContent] = React.useState<string | null>(null);\n  const [isLoading, setIsLoading] = React.useState(true);\n  const [error, setError] = React.useState<string | null>(null);\n\n  const { url, iconName } = React.useMemo(() => {\n    const separator = name.includes(\"/\") ? \"/\" : \":\";\n    const [prefix, iconName] = name.split(separator);\n    // Don't pass color to API - we'll handle it via CSS\n    const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName}?format=svg&width=${size}&height=${size}`;\n\n    return {\n      url: baseUrl,\n      iconName,\n    };\n  }, [name, size]);\n\n  React.useEffect(() => {\n    let isMounted = true;\n\n    const fetchSvg = async () => {\n      // Check cache first\n      const cached = svgCache.get(url);\n      if (cached) {\n        if (isMounted) {\n          setSvgContent(cached);\n          setIsLoading(false);\n        }\n        return;\n      }\n\n      try {\n        setIsLoading(true);\n        setError(null);\n\n        const response = await fetch(url);\n        if (!response.ok) {\n          throw new Error(`Failed to fetch icon: ${response.status}`);\n        }\n\n        let svg = await response.text();\n\n        // Process SVG to ensure currentColor works:\n        // 1. Replace any hardcoded colors with currentColor\n        // 2. Ensure stroke/fill use currentColor where appropriate\n        svg = processSvgForCurrentColor(svg);\n\n        // Cache the processed SVG\n        svgCache.set(url, svg);\n\n        if (isMounted) {\n          setSvgContent(svg);\n          setIsLoading(false);\n        }\n      } catch (err) {\n        if (isMounted) {\n          setError(err instanceof Error ? err.message : \"Failed to load icon\");\n          setIsLoading(false);\n        }\n      }\n    };\n\n    fetchSvg();\n\n    return () => {\n      isMounted = false;\n    };\n  }, [url]);\n\n  // Loading state - show placeholder with same dimensions\n  if (isLoading) {\n    return (\n      <span\n        className={cn(\"inline-block\", className)}\n        style={{ width: size, height: size }}\n        aria-hidden=\"true\"\n      />\n    );\n  }\n\n  // Error state - show nothing or fallback\n  if (error || !svgContent) {\n    return (\n      <span\n        className={cn(\"inline-block\", className)}\n        style={{ width: size, height: size }}\n        role=\"img\"\n        aria-label={alt || iconName}\n      />\n    );\n  }\n\n  // Render inline SVG\n  // The color prop applies an explicit color, otherwise inherits from parent via currentColor\n  return (\n    <span\n      className={cn(\"inline-flex items-center justify-center\", className)}\n      style={{\n        width: size,\n        height: size,\n        color: color || \"inherit\",\n      }}\n      role=\"img\"\n      aria-label={alt || iconName}\n      dangerouslySetInnerHTML={{ __html: svgContent }}\n    />\n  );\n}\n\n/**\n * Process SVG to ensure it uses currentColor for proper CSS inheritance.\n * This handles various icon libraries that may use different color approaches.\n */\nfunction processSvgForCurrentColor(svg: string): string {\n  // Replace stroke=\"currentColor\" is already correct, but ensure fill also works\n  // Some icons use fill=\"none\" with stroke, others use fill with no stroke\n\n  // Ensure the SVG doesn't have hardcoded colors that should be currentColor\n  // Common patterns to replace:\n  // - stroke=\"#000\" or stroke=\"#000000\" or stroke=\"black\" -> stroke=\"currentColor\"\n  // - fill=\"#000\" or fill=\"#000000\" or fill=\"black\" -> fill=\"currentColor\"\n\n  let processed = svg;\n\n  // Replace common black color values with currentColor for stroke\n  processed = processed.replace(\n    /stroke=[\"'](#000000|#000|black)[\"']/gi,\n    'stroke=\"currentColor\"'\n  );\n\n  // Replace common black color values with currentColor for fill\n  // But be careful not to replace fill=\"none\"\n  processed = processed.replace(\n    /fill=[\"'](#000000|#000|black)[\"']/gi,\n    'fill=\"currentColor\"'\n  );\n\n  return processed;\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../../lib/utils\";\nimport { DynamicIcon } from \"../../ui/dynamic-icon\";\n\n/**\n * Social link configuration with icon\n */\nexport interface FooterCtaSocialLink {\n  /** Icon name in format: prefix/name (e.g., \"lucide/twitter\") */\n  icon: string;\n  /** Link URL */\n  url: string;\n  /** Accessible label */\n  label: string;\n}\n\n/**\n * Props for the FooterCtaSocial component\n */\nexport interface FooterCtaSocialProps {\n  /** Additional CSS classes */\n  className?: string;\n  /** Pre-heading text */\n  preHeading?: string;\n  /** Main heading text */\n  heading?: string;\n  /** Description text */\n  description?: string;\n  /** CTA button text */\n  buttonText?: string;\n  /** CTA button URL */\n  buttonUrl?: string;\n  /** Contact email */\n  email?: string;\n  /** Social links */\n  socialLinks?: FooterCtaSocialLink[];\n}\n\nconst defaultSocialLinks: FooterCtaSocialLink[] = [\n  { icon: \"lucide/twitter\", url: \"#\", label: \"Twitter\" },\n  { icon: \"lucide/instagram\", url: \"#\", label: \"Instagram\" },\n  { icon: \"lucide/facebook\", url: \"#\", label: \"Facebook\" },\n];\n\n/**\n * FooterCtaSocial - A centered CTA footer with decorative lines and social icons.\n *\n * Features a centered layout with decorative gradient lines, pre-heading text,\n * large heading, description, prominent CTA button, social media icons, and\n * contact email. Ideal for landing pages, marketing sites, and businesses\n * that want a conversion-focused footer with strong visual appeal.\n */\nexport function FooterCtaSocial({\n  className,\n  preHeading = \"Let's connect\",\n  heading = \"You want to scale faster? Try Opensite today.\",\n  description = \"Join thousands of companies already using our platform to scale their operations\",\n  buttonText = \"Get Started Now\",\n  buttonUrl = \"#\",\n  email = \"hello@opensite.ai\",\n  socialLinks = defaultSocialLinks,\n}: FooterCtaSocialProps): React.JSX.Element {\n  return (\n    <section className={cn(\"relative py-32\", className)}>\n      <div className=\"relative z-10 container\">\n        <div className=\"mx-auto flex max-w-3xl flex-col items-center gap-2 text-center\">\n          {/* Pre-heading with decorative lines */}\n          <div className=\"flex w-full items-center gap-4\">\n            <div className=\"h-px flex-1 bg-[linear-gradient(270deg,var(--primary,rgb(255,255,255))_0%,var(--secondary,rgb(0,0,0))_100%)] opacity-50\" />\n            <p className=\"text-sm text-muted-foreground italic md:text-base\">\n              {preHeading}\n            </p>\n            <div className=\"h-px flex-1 bg-[linear-gradient(270deg,var(--secondary,rgb(0,0,0))_0%,var(--primary,rgb(255,255,255))_100%)] opacity-50\" />\n          </div>\n\n          {/* Main heading */}\n          <h2 className=\"py-6 text-5xl font-bold md:text-6xl\">{heading}</h2>\n\n          {/* Description */}\n          <p className=\"max-w-2xl text-base text-muted-foreground md:text-lg\">\n            {description}\n          </p>\n\n          {/* CTA Button */}\n          <a\n            href={buttonUrl}\n            className=\"group relative mt-4 inline-flex items-center gap-2 rounded-lg border bg-background px-8 py-4 text-base font-medium transition-all hover:bg-muted\"\n          >\n            <span>{buttonText}</span>\n            <DynamicIcon\n              name=\"lucide/arrow-up-right\"\n              size={16}\n              className=\"transition-transform group-hover:translate-x-1 group-hover:-translate-y-1\"\n            />\n          </a>\n\n          {/* Social Media Links */}\n          <div className=\"flex items-center gap-6 pt-8\">\n            {socialLinks.map((link, idx) => (\n              <React.Fragment key={idx}>\n                <a\n                  href={link.url}\n                  className=\"text-muted-foreground transition-colors hover:text-foreground\"\n                  aria-label={link.label}\n                >\n                  <DynamicIcon name={link.icon} size={20} />\n                </a>\n                {idx < socialLinks.length - 1 && (\n                  <div className=\"h-4 w-px bg-border\" />\n                )}\n              </React.Fragment>\n            ))}\n          </div>\n\n          {/* Support Email */}\n          <p className=\"pt-2 text-sm text-muted-foreground md:text-base\">\n            <a\n              href={`mailto:${email}`}\n              className=\"transition-colors hover:text-foreground\"\n            >\n              {email}\n            </a>\n          </p>\n\n          {/* Attribution */}\n          <div className=\"mt-8 border-t pt-8 text-sm text-muted-foreground\">\n            <p>© {new Date().getFullYear()} Opensite AI. All rights reserved.</p>\n            <a\n              href=\"https://opensite.ai\"\n              className=\"mt-2 inline-block hover:text-foreground\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              AI Website and Automation Platform by Opensite\n            </a>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/footer-cta-social.d.cts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+
+/**
+ * Social link configuration with icon
+ */
+interface FooterCtaSocialLink {
+    /** Icon name in format: prefix/name (e.g., "lucide/twitter") */
+    icon: string;
+    /** Link URL */
+    url: string;
+    /** Accessible label */
+    label: string;
+}
+/**
+ * Props for the FooterCtaSocial component
+ */
+interface FooterCtaSocialProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** Pre-heading text */
+    preHeading?: string;
+    /** Main heading text */
+    heading?: string;
+    /** Description text */
+    description?: string;
+    /** CTA button text */
+    buttonText?: string;
+    /** CTA button URL */
+    buttonUrl?: string;
+    /** Contact email */
+    email?: string;
+    /** Social links */
+    socialLinks?: FooterCtaSocialLink[];
+}
+/**
+ * FooterCtaSocial - A centered CTA footer with decorative lines and social icons.
+ *
+ * Features a centered layout with decorative gradient lines, pre-heading text,
+ * large heading, description, prominent CTA button, social media icons, and
+ * contact email. Ideal for landing pages, marketing sites, and businesses
+ * that want a conversion-focused footer with strong visual appeal.
+ */
+declare function FooterCtaSocial({ className, preHeading, heading, description, buttonText, buttonUrl, email, socialLinks, }: FooterCtaSocialProps): React.JSX.Element;
+
+export { FooterCtaSocial, type FooterCtaSocialLink, type FooterCtaSocialProps };

package/dist/footer-cta-social.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+
+/**
+ * Social link configuration with icon
+ */
+interface FooterCtaSocialLink {
+    /** Icon name in format: prefix/name (e.g., "lucide/twitter") */
+    icon: string;
+    /** Link URL */
+    url: string;
+    /** Accessible label */
+    label: string;
+}
+/**
+ * Props for the FooterCtaSocial component
+ */
+interface FooterCtaSocialProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** Pre-heading text */
+    preHeading?: string;
+    /** Main heading text */
+    heading?: string;
+    /** Description text */
+    description?: string;
+    /** CTA button text */
+    buttonText?: string;
+    /** CTA button URL */
+    buttonUrl?: string;
+    /** Contact email */
+    email?: string;
+    /** Social links */
+    socialLinks?: FooterCtaSocialLink[];
+}
+/**
+ * FooterCtaSocial - A centered CTA footer with decorative lines and social icons.
+ *
+ * Features a centered layout with decorative gradient lines, pre-heading text,
+ * large heading, description, prominent CTA button, social media icons, and
+ * contact email. Ideal for landing pages, marketing sites, and businesses
+ * that want a conversion-focused footer with strong visual appeal.
+ */
+declare function FooterCtaSocial({ className, preHeading, heading, description, buttonText, buttonUrl, email, socialLinks, }: FooterCtaSocialProps): React.JSX.Element;
+
+export { FooterCtaSocial, type FooterCtaSocialLink, type FooterCtaSocialProps };

package/dist/footer-cta-social.js

@@ -0,0 +1,199 @@
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// components/blocks/footers/footer-cta-social.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var svgCache = /* @__PURE__ */ new Map();
+function DynamicIcon({
+  name,
+  size = 28,
+  color,
+  className,
+  alt
+}) {
+  const [svgContent, setSvgContent] = React.useState(null);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  const { url, iconName } = React.useMemo(() => {
+    const separator = name.includes("/") ? "/" : ":";
+    const [prefix, iconName2] = name.split(separator);
+    const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
+    return {
+      url: baseUrl,
+      iconName: iconName2
+    };
+  }, [name, size]);
+  React.useEffect(() => {
+    let isMounted = true;
+    const fetchSvg = async () => {
+      const cached = svgCache.get(url);
+      if (cached) {
+        if (isMounted) {
+          setSvgContent(cached);
+          setIsLoading(false);
+        }
+        return;
+      }
+      try {
+        setIsLoading(true);
+        setError(null);
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error(`Failed to fetch icon: ${response.status}`);
+        }
+        let svg = await response.text();
+        svg = processSvgForCurrentColor(svg);
+        svgCache.set(url, svg);
+        if (isMounted) {
+          setSvgContent(svg);
+          setIsLoading(false);
+        }
+      } catch (err) {
+        if (isMounted) {
+          setError(err instanceof Error ? err.message : "Failed to load icon");
+          setIsLoading(false);
+        }
+      }
+    };
+    fetchSvg();
+    return () => {
+      isMounted = false;
+    };
+  }, [url]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn("inline-block", className),
+        style: { width: size, height: size },
+        "aria-hidden": "true"
+      }
+    );
+  }
+  if (error || !svgContent) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn("inline-block", className),
+        style: { width: size, height: size },
+        role: "img",
+        "aria-label": alt || iconName
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("inline-flex items-center justify-center", className),
+      style: {
+        width: size,
+        height: size,
+        color: color || "inherit"
+      },
+      role: "img",
+      "aria-label": alt || iconName,
+      dangerouslySetInnerHTML: { __html: svgContent }
+    }
+  );
+}
+function processSvgForCurrentColor(svg) {
+  let processed = svg;
+  processed = processed.replace(
+    /stroke=["'](#000000|#000|black)["']/gi,
+    'stroke="currentColor"'
+  );
+  processed = processed.replace(
+    /fill=["'](#000000|#000|black)["']/gi,
+    'fill="currentColor"'
+  );
+  return processed;
+}
+var defaultSocialLinks = [
+  { icon: "lucide/twitter", url: "#", label: "Twitter" },
+  { icon: "lucide/instagram", url: "#", label: "Instagram" },
+  { icon: "lucide/facebook", url: "#", label: "Facebook" }
+];
+function FooterCtaSocial({
+  className,
+  preHeading = "Let's connect",
+  heading = "You want to scale faster? Try Opensite today.",
+  description = "Join thousands of companies already using our platform to scale their operations",
+  buttonText = "Get Started Now",
+  buttonUrl = "#",
+  email = "hello@opensite.ai",
+  socialLinks = defaultSocialLinks
+}) {
+  return /* @__PURE__ */ jsx("section", { className: cn("relative py-32", className), children: /* @__PURE__ */ jsx("div", { className: "relative z-10 container", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-3xl flex-col items-center gap-2 text-center", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-[linear-gradient(270deg,var(--primary,rgb(255,255,255))_0%,var(--secondary,rgb(0,0,0))_100%)] opacity-50" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground italic md:text-base", children: preHeading }),
+      /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-[linear-gradient(270deg,var(--secondary,rgb(0,0,0))_0%,var(--primary,rgb(255,255,255))_100%)] opacity-50" })
+    ] }),
+    /* @__PURE__ */ jsx("h2", { className: "py-6 text-5xl font-bold md:text-6xl", children: heading }),
+    /* @__PURE__ */ jsx("p", { className: "max-w-2xl text-base text-muted-foreground md:text-lg", children: description }),
+    /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: buttonUrl,
+        className: "group relative mt-4 inline-flex items-center gap-2 rounded-lg border bg-background px-8 py-4 text-base font-medium transition-all hover:bg-muted",
+        children: [
+          /* @__PURE__ */ jsx("span", { children: buttonText }),
+          /* @__PURE__ */ jsx(
+            DynamicIcon,
+            {
+              name: "lucide/arrow-up-right",
+              size: 16,
+              className: "transition-transform group-hover:translate-x-1 group-hover:-translate-y-1"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-6 pt-8", children: socialLinks.map((link, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: link.url,
+          className: "text-muted-foreground transition-colors hover:text-foreground",
+          "aria-label": link.label,
+          children: /* @__PURE__ */ jsx(DynamicIcon, { name: link.icon, size: 20 })
+        }
+      ),
+      idx < socialLinks.length - 1 && /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-border" })
+    ] }, idx)) }),
+    /* @__PURE__ */ jsx("p", { className: "pt-2 text-sm text-muted-foreground md:text-base", children: /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: `mailto:${email}`,
+        className: "transition-colors hover:text-foreground",
+        children: email
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-8 border-t pt-8 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs("p", { children: [
+        "\xA9 ",
+        (/* @__PURE__ */ new Date()).getFullYear(),
+        " Opensite AI. All rights reserved."
+      ] }),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "https://opensite.ai",
+          className: "mt-2 inline-block hover:text-foreground",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: "AI Website and Automation Platform by Opensite"
+        }
+      )
+    ] })
+  ] }) }) });
+}
+
+export { FooterCtaSocial };
+//# sourceMappingURL=footer-cta-social.js.map
+//# sourceMappingURL=footer-cta-social.js.map

package/dist/footer-cta-social.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../lib/utils.ts","../components/ui/dynamic-icon.tsx","../components/blocks/footers/footer-cta-social.tsx"],"names":["iconName","jsx","React2"],"mappings":"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","file":"footer-cta-social.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\ninterface DynamicIconProps {\n  /**\n   * Icon name in format: prefix/name or prefix:name\n   * Examples: \"lucide/home\", \"mdi:account\", \"heroicons/check\"\n   */\n  name: string;\n  /**\n   * Icon size in pixels\n   * @default 28\n   */\n  size?: number;\n  /**\n   * Icon color - accepts any valid CSS color\n   * Note: When not specified, the icon inherits color from parent via CSS currentColor\n   */\n  color?: string;\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n  /**\n   * Alt text for accessibility\n   */\n  alt?: string;\n}\n\n// Simple in-memory cache for fetched SVGs\nconst svgCache = new Map<string, string>();\n\n/**\n * Lightweight icon component that dynamically loads SVG icons from icons.opensite.ai API.\n *\n * Features:\n * - Pulls SVGs from https://icons.opensite.ai API and inlines them for CSS color inheritance\n * - Supports currentColor - icons inherit color from parent element\n * - Accepts prefix/name or prefix:name format\n * - Customizable size and explicit color via props\n * - In-memory caching to prevent duplicate fetches\n *\n * @example\n * ```tsx\n * // Icon inherits color from parent (recommended for hover states, etc.)\n * <span className=\"text-white hover:text-red-500\">\n *   <DynamicIcon name=\"lucide/home\" size={24} />\n * </span>\n *\n * // Icon with explicit color\n * <DynamicIcon name=\"mdi:account\" size={32} color=\"#ff0000\" />\n * ```\n */\nexport function DynamicIcon({\n  name,\n  size = 28,\n  color,\n  className,\n  alt,\n}: DynamicIconProps) {\n  const [svgContent, setSvgContent] = React.useState<string | null>(null);\n  const [isLoading, setIsLoading] = React.useState(true);\n  const [error, setError] = React.useState<string | null>(null);\n\n  const { url, iconName } = React.useMemo(() => {\n    const separator = name.includes(\"/\") ? \"/\" : \":\";\n    const [prefix, iconName] = name.split(separator);\n    // Don't pass color to API - we'll handle it via CSS\n    const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName}?format=svg&width=${size}&height=${size}`;\n\n    return {\n      url: baseUrl,\n      iconName,\n    };\n  }, [name, size]);\n\n  React.useEffect(() => {\n    let isMounted = true;\n\n    const fetchSvg = async () => {\n      // Check cache first\n      const cached = svgCache.get(url);\n      if (cached) {\n        if (isMounted) {\n          setSvgContent(cached);\n          setIsLoading(false);\n        }\n        return;\n      }\n\n      try {\n        setIsLoading(true);\n        setError(null);\n\n        const response = await fetch(url);\n        if (!response.ok) {\n          throw new Error(`Failed to fetch icon: ${response.status}`);\n        }\n\n        let svg = await response.text();\n\n        // Process SVG to ensure currentColor works:\n        // 1. Replace any hardcoded colors with currentColor\n        // 2. Ensure stroke/fill use currentColor where appropriate\n        svg = processSvgForCurrentColor(svg);\n\n        // Cache the processed SVG\n        svgCache.set(url, svg);\n\n        if (isMounted) {\n          setSvgContent(svg);\n          setIsLoading(false);\n        }\n      } catch (err) {\n        if (isMounted) {\n          setError(err instanceof Error ? err.message : \"Failed to load icon\");\n          setIsLoading(false);\n        }\n      }\n    };\n\n    fetchSvg();\n\n    return () => {\n      isMounted = false;\n    };\n  }, [url]);\n\n  // Loading state - show placeholder with same dimensions\n  if (isLoading) {\n    return (\n      <span\n        className={cn(\"inline-block\", className)}\n        style={{ width: size, height: size }}\n        aria-hidden=\"true\"\n      />\n    );\n  }\n\n  // Error state - show nothing or fallback\n  if (error || !svgContent) {\n    return (\n      <span\n        className={cn(\"inline-block\", className)}\n        style={{ width: size, height: size }}\n        role=\"img\"\n        aria-label={alt || iconName}\n      />\n    );\n  }\n\n  // Render inline SVG\n  // The color prop applies an explicit color, otherwise inherits from parent via currentColor\n  return (\n    <span\n      className={cn(\"inline-flex items-center justify-center\", className)}\n      style={{\n        width: size,\n        height: size,\n        color: color || \"inherit\",\n      }}\n      role=\"img\"\n      aria-label={alt || iconName}\n      dangerouslySetInnerHTML={{ __html: svgContent }}\n    />\n  );\n}\n\n/**\n * Process SVG to ensure it uses currentColor for proper CSS inheritance.\n * This handles various icon libraries that may use different color approaches.\n */\nfunction processSvgForCurrentColor(svg: string): string {\n  // Replace stroke=\"currentColor\" is already correct, but ensure fill also works\n  // Some icons use fill=\"none\" with stroke, others use fill with no stroke\n\n  // Ensure the SVG doesn't have hardcoded colors that should be currentColor\n  // Common patterns to replace:\n  // - stroke=\"#000\" or stroke=\"#000000\" or stroke=\"black\" -> stroke=\"currentColor\"\n  // - fill=\"#000\" or fill=\"#000000\" or fill=\"black\" -> fill=\"currentColor\"\n\n  let processed = svg;\n\n  // Replace common black color values with currentColor for stroke\n  processed = processed.replace(\n    /stroke=[\"'](#000000|#000|black)[\"']/gi,\n    'stroke=\"currentColor\"'\n  );\n\n  // Replace common black color values with currentColor for fill\n  // But be careful not to replace fill=\"none\"\n  processed = processed.replace(\n    /fill=[\"'](#000000|#000|black)[\"']/gi,\n    'fill=\"currentColor\"'\n  );\n\n  return processed;\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../../lib/utils\";\nimport { DynamicIcon } from \"../../ui/dynamic-icon\";\n\n/**\n * Social link configuration with icon\n */\nexport interface FooterCtaSocialLink {\n  /** Icon name in format: prefix/name (e.g., \"lucide/twitter\") */\n  icon: string;\n  /** Link URL */\n  url: string;\n  /** Accessible label */\n  label: string;\n}\n\n/**\n * Props for the FooterCtaSocial component\n */\nexport interface FooterCtaSocialProps {\n  /** Additional CSS classes */\n  className?: string;\n  /** Pre-heading text */\n  preHeading?: string;\n  /** Main heading text */\n  heading?: string;\n  /** Description text */\n  description?: string;\n  /** CTA button text */\n  buttonText?: string;\n  /** CTA button URL */\n  buttonUrl?: string;\n  /** Contact email */\n  email?: string;\n  /** Social links */\n  socialLinks?: FooterCtaSocialLink[];\n}\n\nconst defaultSocialLinks: FooterCtaSocialLink[] = [\n  { icon: \"lucide/twitter\", url: \"#\", label: \"Twitter\" },\n  { icon: \"lucide/instagram\", url: \"#\", label: \"Instagram\" },\n  { icon: \"lucide/facebook\", url: \"#\", label: \"Facebook\" },\n];\n\n/**\n * FooterCtaSocial - A centered CTA footer with decorative lines and social icons.\n *\n * Features a centered layout with decorative gradient lines, pre-heading text,\n * large heading, description, prominent CTA button, social media icons, and\n * contact email. Ideal for landing pages, marketing sites, and businesses\n * that want a conversion-focused footer with strong visual appeal.\n */\nexport function FooterCtaSocial({\n  className,\n  preHeading = \"Let's connect\",\n  heading = \"You want to scale faster? Try Opensite today.\",\n  description = \"Join thousands of companies already using our platform to scale their operations\",\n  buttonText = \"Get Started Now\",\n  buttonUrl = \"#\",\n  email = \"hello@opensite.ai\",\n  socialLinks = defaultSocialLinks,\n}: FooterCtaSocialProps): React.JSX.Element {\n  return (\n    <section className={cn(\"relative py-32\", className)}>\n      <div className=\"relative z-10 container\">\n        <div className=\"mx-auto flex max-w-3xl flex-col items-center gap-2 text-center\">\n          {/* Pre-heading with decorative lines */}\n          <div className=\"flex w-full items-center gap-4\">\n            <div className=\"h-px flex-1 bg-[linear-gradient(270deg,var(--primary,rgb(255,255,255))_0%,var(--secondary,rgb(0,0,0))_100%)] opacity-50\" />\n            <p className=\"text-sm text-muted-foreground italic md:text-base\">\n              {preHeading}\n            </p>\n            <div className=\"h-px flex-1 bg-[linear-gradient(270deg,var(--secondary,rgb(0,0,0))_0%,var(--primary,rgb(255,255,255))_100%)] opacity-50\" />\n          </div>\n\n          {/* Main heading */}\n          <h2 className=\"py-6 text-5xl font-bold md:text-6xl\">{heading}</h2>\n\n          {/* Description */}\n          <p className=\"max-w-2xl text-base text-muted-foreground md:text-lg\">\n            {description}\n          </p>\n\n          {/* CTA Button */}\n          <a\n            href={buttonUrl}\n            className=\"group relative mt-4 inline-flex items-center gap-2 rounded-lg border bg-background px-8 py-4 text-base font-medium transition-all hover:bg-muted\"\n          >\n            <span>{buttonText}</span>\n            <DynamicIcon\n              name=\"lucide/arrow-up-right\"\n              size={16}\n              className=\"transition-transform group-hover:translate-x-1 group-hover:-translate-y-1\"\n            />\n          </a>\n\n          {/* Social Media Links */}\n          <div className=\"flex items-center gap-6 pt-8\">\n            {socialLinks.map((link, idx) => (\n              <React.Fragment key={idx}>\n                <a\n                  href={link.url}\n                  className=\"text-muted-foreground transition-colors hover:text-foreground\"\n                  aria-label={link.label}\n                >\n                  <DynamicIcon name={link.icon} size={20} />\n                </a>\n                {idx < socialLinks.length - 1 && (\n                  <div className=\"h-4 w-px bg-border\" />\n                )}\n              </React.Fragment>\n            ))}\n          </div>\n\n          {/* Support Email */}\n          <p className=\"pt-2 text-sm text-muted-foreground md:text-base\">\n            <a\n              href={`mailto:${email}`}\n              className=\"transition-colors hover:text-foreground\"\n            >\n              {email}\n            </a>\n          </p>\n\n          {/* Attribution */}\n          <div className=\"mt-8 border-t pt-8 text-sm text-muted-foreground\">\n            <p>© {new Date().getFullYear()} Opensite AI. All rights reserved.</p>\n            <a\n              href=\"https://opensite.ai\"\n              className=\"mt-2 inline-block hover:text-foreground\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              AI Website and Automation Platform by Opensite\n            </a>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n"]}