@opensite/ui 2.0.2 → 2.0.4

package/dist/hero-fullscreen-logo-cta.cjs

@@ -834,16 +834,32 @@ function HeroFullscreenLogoCta({
   actionSlot,
   backgroundImage,
   background,
-  spacing,
+  spacing = "none",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
-  contentClassName,
+  containerClassName = "px-0 sm:px-0 lg:px-0 max-w-full relative z-10 h-screen w-screen flex justify-center items-center",
+  contentClassName = "relative flex flex-col gap-12 px-6 pt-28 pb-6 md:pt-0 md:pb-0",
   headingClassName,
   descriptionClassName,
   optixFlowConfig
 }) {
+  const renderBackground = React.useMemo(() => {
+    if (!backgroundImage) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        img.Img,
+        {
+          src: backgroundImage,
+          alt: "Full screen background image",
+          className: "h-full w-full object-cover",
+          loading: "eager",
+          optixFlowConfig
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-b from-black/80 via-black/65 to-black/20" })
+    ] });
+  }, [backgroundImage, optixFlowConfig]);
   const renderLogo = React.useMemo(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
@@ -853,7 +869,7 @@ function HeroFullscreenLogoCta({
       {
         src: logoSrc,
         alt: logo.alt,
-        className: cn("size-20", logo.className),
+        className: cn("h-24 w-auto object-contain", logo.className),
         optixFlowConfig
       }
     );
@@ -861,39 +877,81 @@ function HeroFullscreenLogoCta({
   const renderAction = React.useMemo(() => {
     if (actionSlot) return actionSlot;
     if (!action) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Pressable,
-      {
-        asButton: true,
-        className: actionClassName,
-        ...pressableProps,
-        children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          icon,
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-2xl", children: label }),
-          iconAfter
-        ] })
-      }
-    );
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = action;
+    return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      icon,
+      label,
+      iconAfter
+    ] }) });
   }, [actionSlot, action]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
       className: cn(
-        "dark h-screen w-screen bg-background bg-cover bg-center bg-no-repeat pt-12 pb-24",
+        "relative flex h-full min-h-screen w-screen items-center justify-center overflow-hidden bg-black pb-0 pt-0 md:pt-0 px-0",
         className
       ),
-      style: { backgroundImage: `url('${backgroundImage}')` },
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container flex h-full flex-col justify-between px-5 xl:px-20", containerClassName), children: [
-        renderLogo,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full flex-col gap-8 md:w-2/3", contentClassName), children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-6xl font-medium md:text-[5.8rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-6xl font-medium md:text-[5.8rem]", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xl md:text-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-          ] }),
-          renderAction
-        ] })
-      ] })
+      containerClassName,
+      children: [
+        renderBackground,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "relative z-30 m-auto flex max-w-185 flex-col items-start justify-center gap-6 px-5",
+              contentClassName
+            ),
+            children: [
+              renderLogo,
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end justify-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full flex-col gap-8 md:w-2/3"), children: [
+                  heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "h1",
+                    {
+                      className: cn(
+                        "text-6xl font-font-semibold md:text-[5.8rem]",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "h1",
+                    {
+                      className: cn(
+                        "text-6xl font-semibold md:text-[5.8rem]",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  )),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "text-xl md:text-2xl text-balance",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+                ] }),
+                renderAction
+              ] })
+            ]
+          }
+        )
+      ]
     }
   );
 }

package/dist/hero-fullscreen-logo-cta.js

@@ -813,16 +813,32 @@ function HeroFullscreenLogoCta({
   actionSlot,
   backgroundImage,
   background,
-  spacing,
+  spacing = "none",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
-  contentClassName,
+  containerClassName = "px-0 sm:px-0 lg:px-0 max-w-full relative z-10 h-screen w-screen flex justify-center items-center",
+  contentClassName = "relative flex flex-col gap-12 px-6 pt-28 pb-6 md:pt-0 md:pb-0",
   headingClassName,
   descriptionClassName,
   optixFlowConfig
 }) {
+  const renderBackground = useMemo(() => {
+    if (!backgroundImage) return null;
+    return /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", children: [
+      /* @__PURE__ */ jsx(
+        Img,
+        {
+          src: backgroundImage,
+          alt: "Full screen background image",
+          className: "h-full w-full object-cover",
+          loading: "eager",
+          optixFlowConfig
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-b from-black/80 via-black/65 to-black/20" })
+    ] });
+  }, [backgroundImage, optixFlowConfig]);
   const renderLogo = useMemo(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
@@ -832,7 +848,7 @@ function HeroFullscreenLogoCta({
       {
         src: logoSrc,
         alt: logo.alt,
-        className: cn("size-20", logo.className),
+        className: cn("h-24 w-auto object-contain", logo.className),
         optixFlowConfig
       }
     );
@@ -840,39 +856,81 @@ function HeroFullscreenLogoCta({
   const renderAction = useMemo(() => {
     if (actionSlot) return actionSlot;
     if (!action) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-    return /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        asButton: true,
-        className: actionClassName,
-        ...pressableProps,
-        children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-          icon,
-          /* @__PURE__ */ jsx("span", { className: "text-2xl", children: label }),
-          iconAfter
-        ] })
-      }
-    );
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = action;
+    return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon,
+      label,
+      iconAfter
+    ] }) });
   }, [actionSlot, action]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Section,
     {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
       className: cn(
-        "dark h-screen w-screen bg-background bg-cover bg-center bg-no-repeat pt-12 pb-24",
+        "relative flex h-full min-h-screen w-screen items-center justify-center overflow-hidden bg-black pb-0 pt-0 md:pt-0 px-0",
         className
       ),
-      style: { backgroundImage: `url('${backgroundImage}')` },
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container flex h-full flex-col justify-between px-5 xl:px-20", containerClassName), children: [
-        renderLogo,
-        /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between", children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-8 md:w-2/3", contentClassName), children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-6xl font-medium md:text-[5.8rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-6xl font-medium md:text-[5.8rem]", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xl md:text-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-          ] }),
-          renderAction
-        ] })
-      ] })
+      containerClassName,
+      children: [
+        renderBackground,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative z-30 m-auto flex max-w-185 flex-col items-start justify-center gap-6 px-5",
+              contentClassName
+            ),
+            children: [
+              renderLogo,
+              /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between", children: [
+                /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-8 md:w-2/3"), children: [
+                  heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                    "h1",
+                    {
+                      className: cn(
+                        "text-6xl font-font-semibold md:text-[5.8rem]",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "h1",
+                    {
+                      className: cn(
+                        "text-6xl font-semibold md:text-[5.8rem]",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  )),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "text-xl md:text-2xl text-balance",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+                ] }),
+                renderAction
+              ] })
+            ]
+          }
+        )
+      ]
     }
   );
 }