@nextworks/blocks-sections 0.1.0-alpha.0

package/dist/components/HeroOverlay.js

@@ -0,0 +1,111 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from "next/image";
+import Link from "next/link";
+import { Button } from "@nextworks/blocks-core";
+import { cn } from "@nextworks/blocks-core";
+/**
+ * Full-bleed image hero with color overlay, heading/subheading, and up to two CTAs.
+ *
+ * @remarks
+ * - Styling: slot-style overrides for container, imageContainer, overlay, content, textContainer.
+ * - Motion: enableMotion applies hover-lift transitions to CTA buttons only.
+ * - Accessibility: uses semantic <section> with aria-label; background image is
+ *   decorative with overlay and text content provided separately.
+ *
+ * @example
+ * <HeroOverlay
+ *   image={{ src: "/hero.png", alt: "" }}
+ *   heading="Welcome"
+ *   subheading="Build faster with our blocks"
+ *   cta1={{ label: "Get Started", href: "#getstarted" }}
+ * />
+ */
+export function HeroOverlay({ id, className, 
+// Deprecated flat image defaults (still supported)
+imageSrc = "/hero.png", imageAlt = "Hero background image", imageObjectFit = "cover", imageObjectPosition = "center", 
+// New structured image (optional)
+image, 
+// Keep string defaults; object form supported
+heading = "Lorem ipsum dolor sit amet, consectetur", subheading = "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", overlayRGBA = "rgba(255, 255, 255, 0.8)", overlayDarkRGBA = "rgba(0, 0, 0, 0.8)", 
+// Deprecated CTA label/href (still supported)
+ctaBtn1Label = "Get Started", ctaBtn1Href = "#getstarted", ctaBtn2Label, ctaBtn2Href, 
+// Layout containers
+container = { className: "relative h-[440px] md:h-[500px] w-full" }, 
+// container = { className: "relative h-[500px] md:h-[600px] w-full" },
+section, imageContainer = { className: "absolute inset-0" }, overlay = { className: "absolute inset-0 z-10 pointer-events-none" }, content = {
+    className: "relative z-20 h-full w-full flex flex-col justify-start items-center pt-14 pb-8 px-8",
+}, textContainer = { className: "max-w-4xl space-y-6 text-center" }, 
+// Typography defaults (deprecated props still merged)
+headingStyle = { className: "" }, subheadingStyle = { className: "" }, 
+// CTA containers and variants
+ctaContainer = {
+    className: "flex flex-col sm:flex-row gap-4 mt-6 justify-center items-center",
+}, cta1, cta2, ariaLabel = "Hero section", enableMotion = true, }) {
+    var _a, _b, _c, _d, _e, _f;
+    // Merge new structured image with deprecated flat props
+    const effImage = {
+        src: (_a = image === null || image === void 0 ? void 0 : image.src) !== null && _a !== void 0 ? _a : imageSrc,
+        alt: (_b = image === null || image === void 0 ? void 0 : image.alt) !== null && _b !== void 0 ? _b : imageAlt,
+        objectFit: (_c = image === null || image === void 0 ? void 0 : image.objectFit) !== null && _c !== void 0 ? _c : imageObjectFit,
+        objectPosition: (_d = image === null || image === void 0 ? void 0 : image.objectPosition) !== null && _d !== void 0 ? _d : imageObjectPosition,
+        className: image === null || image === void 0 ? void 0 : image.className,
+    };
+    // Defaults and normalization like HeroSplit
+    const defaultHeading = {
+        text: "Lorem ipsum dolor sit amet, consectetur",
+        className: "text-4xl md:text-5xl font-bold text-center leading-tight text-foreground",
+    };
+    const defaultSubheading = {
+        text: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+        className: "text-xl md:text-2xl text-center text-foreground leading-relaxed",
+    };
+    const normalizedHeading = typeof heading === "string"
+        ? {
+            text: heading,
+            className: cn(defaultHeading.className, headingStyle === null || headingStyle === void 0 ? void 0 : headingStyle.className),
+        }
+        : {
+            text: (_e = heading === null || heading === void 0 ? void 0 : heading.text) !== null && _e !== void 0 ? _e : defaultHeading.text,
+            className: cn(defaultHeading.className, headingStyle === null || headingStyle === void 0 ? void 0 : headingStyle.className, heading === null || heading === void 0 ? void 0 : heading.className),
+        };
+    const normalizedSubheading = typeof subheading === "string"
+        ? {
+            text: subheading,
+            className: cn(defaultSubheading.className, subheadingStyle === null || subheadingStyle === void 0 ? void 0 : subheadingStyle.className),
+        }
+        : {
+            text: (_f = subheading === null || subheading === void 0 ? void 0 : subheading.text) !== null && _f !== void 0 ? _f : defaultSubheading.text,
+            className: cn(defaultSubheading.className, subheadingStyle === null || subheadingStyle === void 0 ? void 0 : subheadingStyle.className, subheading === null || subheading === void 0 ? void 0 : subheading.className),
+        };
+    // Motion class for CTA buttons
+    const buttonLift = enableMotion
+        ? "transition-all duration-200 hover:-translate-y-0.5"
+        : "transition-none hover:!translate-y-0";
+    // CTA defaults and normalization (merge, don't replace).
+    const defaultCta1 = {
+        label: ctaBtn1Label,
+        href: ctaBtn1Href,
+        variant: "default",
+        size: "lg",
+        className: "",
+    };
+    const defaultCta2 = {
+        label: ctaBtn2Label,
+        href: ctaBtn2Href,
+        variant: "outline",
+        size: "lg",
+        className: "",
+    };
+    const mergedCta1 = Object.assign(Object.assign(Object.assign({}, defaultCta1), (cta1 !== null && cta1 !== void 0 ? cta1 : {})), { className: cn(defaultCta1.className, cta1 === null || cta1 === void 0 ? void 0 : cta1.className, buttonLift) });
+    const mergedCta2 = cta2 || ctaBtn2Label || ctaBtn2Href
+        ? Object.assign(Object.assign(Object.assign({}, defaultCta2), (cta2 !== null && cta2 !== void 0 ? cta2 : {})), { className: cn(defaultCta2.className, cta2 === null || cta2 === void 0 ? void 0 : cta2.className, buttonLift) }) : undefined;
+    // buttonLift defined above
+    // Merge alias section.className with container.className
+    const finalContainerClass = cn(container.className, section === null || section === void 0 ? void 0 : section.className);
+    const showCta2 = !!(mergedCta2 === null || mergedCta2 === void 0 ? void 0 : mergedCta2.label);
+    return (_jsxs("section", { id: id, className: cn(finalContainerClass, className), "aria-label": ariaLabel, children: [_jsx("div", { className: imageContainer.className, children: _jsx(Image, { src: effImage.src, alt: effImage.alt, fill: true, sizes: "100vw", quality: 75, priority: true, className: effImage.className, style: {
+                        objectFit: effImage.objectFit,
+                        objectPosition: effImage.objectPosition,
+                    } }) }), _jsx("div", { className: overlay.className, style: { backgroundColor: overlayRGBA }, "aria-hidden": true }), _jsx("div", { className: cn(overlay.className, "hidden dark:block"), style: { backgroundColor: overlayDarkRGBA }, "aria-hidden": true }), _jsx("div", { className: content.className, children: _jsxs("div", { className: textContainer.className, children: [_jsx("h1", { className: normalizedHeading.className, children: normalizedHeading.text }), _jsx("p", { className: normalizedSubheading.className, children: normalizedSubheading.text }), _jsxs("div", { className: ctaContainer.className, children: [mergedCta1.label && (_jsx(Button, { asChild: true, variant: mergedCta1.variant, size: mergedCta1.size, className: mergedCta1.className, unstyled: mergedCta1.unstyled, style: mergedCta1.style, children: _jsx(Link, { href: mergedCta1.href || "#", "aria-label": mergedCta1.label, children: mergedCta1.label }) })), showCta2 && (_jsx(Button, { asChild: true, variant: mergedCta2.variant, size: mergedCta2.size, className: mergedCta2.className, unstyled: mergedCta2.unstyled, style: mergedCta2.style, children: _jsx(Link, { href: mergedCta2.href || "#", "aria-label": mergedCta2.label, children: mergedCta2.label }) }))] })] }) })] }));
+}

package/dist/components/HeroOverlay.jsx

@@ -0,0 +1,141 @@
+"use client";
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { Button } from "@nextworks/blocks-core";
+import { cn } from "@nextworks/blocks-core";
+/**
+ * Full-bleed image hero with color overlay, heading/subheading, and up to two CTAs.
+ *
+ * @remarks
+ * - Styling: slot-style overrides for container, imageContainer, overlay, content, textContainer.
+ * - Motion: enableMotion applies hover-lift transitions to CTA buttons only.
+ * - Accessibility: uses semantic <section> with aria-label; background image is
+ *   decorative with overlay and text content provided separately.
+ *
+ * @example
+ * <HeroOverlay
+ *   image={{ src: "/hero.png", alt: "" }}
+ *   heading="Welcome"
+ *   subheading="Build faster with our blocks"
+ *   cta1={{ label: "Get Started", href: "#getstarted" }}
+ * />
+ */
+export function HeroOverlay({ id, className, 
+// Deprecated flat image defaults (still supported)
+imageSrc = "/hero.png", imageAlt = "Hero background image", imageObjectFit = "cover", imageObjectPosition = "center", 
+// New structured image (optional)
+image, 
+// Keep string defaults; object form supported
+heading = "Lorem ipsum dolor sit amet, consectetur", subheading = "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", overlayRGBA = "rgba(255, 255, 255, 0.8)", overlayDarkRGBA = "rgba(0, 0, 0, 0.8)", 
+// Deprecated CTA label/href (still supported)
+ctaBtn1Label = "Get Started", ctaBtn1Href = "#getstarted", ctaBtn2Label, ctaBtn2Href, 
+// Layout containers
+container = { className: "relative h-[440px] md:h-[500px] w-full" }, 
+// container = { className: "relative h-[500px] md:h-[600px] w-full" },
+section, imageContainer = { className: "absolute inset-0" }, overlay = { className: "absolute inset-0 z-10 pointer-events-none" }, content = {
+    className: "relative z-20 h-full w-full flex flex-col justify-start items-center pt-14 pb-8 px-8",
+}, textContainer = { className: "max-w-4xl space-y-6 text-center" }, 
+// Typography defaults (deprecated props still merged)
+headingStyle = { className: "" }, subheadingStyle = { className: "" }, 
+// CTA containers and variants
+ctaContainer = {
+    className: "flex flex-col sm:flex-row gap-4 mt-6 justify-center items-center",
+}, cta1, cta2, ariaLabel = "Hero section", enableMotion = true, }) {
+    var _a, _b, _c, _d, _e, _f;
+    // Merge new structured image with deprecated flat props
+    const effImage = {
+        src: (_a = image === null || image === void 0 ? void 0 : image.src) !== null && _a !== void 0 ? _a : imageSrc,
+        alt: (_b = image === null || image === void 0 ? void 0 : image.alt) !== null && _b !== void 0 ? _b : imageAlt,
+        objectFit: (_c = image === null || image === void 0 ? void 0 : image.objectFit) !== null && _c !== void 0 ? _c : imageObjectFit,
+        objectPosition: (_d = image === null || image === void 0 ? void 0 : image.objectPosition) !== null && _d !== void 0 ? _d : imageObjectPosition,
+        className: image === null || image === void 0 ? void 0 : image.className,
+    };
+    // Defaults and normalization like HeroSplit
+    const defaultHeading = {
+        text: "Lorem ipsum dolor sit amet, consectetur",
+        className: "text-4xl md:text-5xl font-bold text-center leading-tight text-foreground",
+    };
+    const defaultSubheading = {
+        text: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+        className: "text-xl md:text-2xl text-center text-foreground leading-relaxed",
+    };
+    const normalizedHeading = typeof heading === "string"
+        ? {
+            text: heading,
+            className: cn(defaultHeading.className, headingStyle === null || headingStyle === void 0 ? void 0 : headingStyle.className),
+        }
+        : {
+            text: (_e = heading === null || heading === void 0 ? void 0 : heading.text) !== null && _e !== void 0 ? _e : defaultHeading.text,
+            className: cn(defaultHeading.className, headingStyle === null || headingStyle === void 0 ? void 0 : headingStyle.className, heading === null || heading === void 0 ? void 0 : heading.className),
+        };
+    const normalizedSubheading = typeof subheading === "string"
+        ? {
+            text: subheading,
+            className: cn(defaultSubheading.className, subheadingStyle === null || subheadingStyle === void 0 ? void 0 : subheadingStyle.className),
+        }
+        : {
+            text: (_f = subheading === null || subheading === void 0 ? void 0 : subheading.text) !== null && _f !== void 0 ? _f : defaultSubheading.text,
+            className: cn(defaultSubheading.className, subheadingStyle === null || subheadingStyle === void 0 ? void 0 : subheadingStyle.className, subheading === null || subheading === void 0 ? void 0 : subheading.className),
+        };
+    // Motion class for CTA buttons
+    const buttonLift = enableMotion
+        ? "transition-all duration-200 hover:-translate-y-0.5"
+        : "transition-none hover:!translate-y-0";
+    // CTA defaults and normalization (merge, don't replace).
+    const defaultCta1 = {
+        label: ctaBtn1Label,
+        href: ctaBtn1Href,
+        variant: "default",
+        size: "lg",
+        className: "",
+    };
+    const defaultCta2 = {
+        label: ctaBtn2Label,
+        href: ctaBtn2Href,
+        variant: "outline",
+        size: "lg",
+        className: "",
+    };
+    const mergedCta1 = Object.assign(Object.assign(Object.assign({}, defaultCta1), (cta1 !== null && cta1 !== void 0 ? cta1 : {})), { className: cn(defaultCta1.className, cta1 === null || cta1 === void 0 ? void 0 : cta1.className, buttonLift) });
+    const mergedCta2 = cta2 || ctaBtn2Label || ctaBtn2Href
+        ? Object.assign(Object.assign(Object.assign({}, defaultCta2), (cta2 !== null && cta2 !== void 0 ? cta2 : {})), { className: cn(defaultCta2.className, cta2 === null || cta2 === void 0 ? void 0 : cta2.className, buttonLift) }) : undefined;
+    // buttonLift defined above
+    // Merge alias section.className with container.className
+    const finalContainerClass = cn(container.className, section === null || section === void 0 ? void 0 : section.className);
+    const showCta2 = !!(mergedCta2 === null || mergedCta2 === void 0 ? void 0 : mergedCta2.label);
+    return (<section id={id} className={cn(finalContainerClass, className)} aria-label={ariaLabel}>
+      <div className={imageContainer.className}>
+        <Image src={effImage.src} alt={effImage.alt} fill sizes="100vw" quality={75} priority className={effImage.className} style={{
+            objectFit: effImage.objectFit,
+            objectPosition: effImage.objectPosition,
+        }}/>
+      </div>
+
+      <div className={overlay.className} style={{ backgroundColor: overlayRGBA }} aria-hidden/>
+      <div className={cn(overlay.className, "hidden dark:block")} style={{ backgroundColor: overlayDarkRGBA }} aria-hidden/>
+
+      <div className={content.className}>
+        <div className={textContainer.className}>
+          <h1 className={normalizedHeading.className}>
+            {normalizedHeading.text}
+          </h1>
+          <p className={normalizedSubheading.className}>
+            {normalizedSubheading.text}
+          </p>
+          <div className={ctaContainer.className}>
+            {mergedCta1.label && (<Button asChild variant={mergedCta1.variant} size={mergedCta1.size} className={mergedCta1.className} unstyled={mergedCta1.unstyled} style={mergedCta1.style}>
+                <Link href={mergedCta1.href || "#"} aria-label={mergedCta1.label}>
+                  {mergedCta1.label}
+                </Link>
+              </Button>)}
+            {showCta2 && (<Button asChild variant={mergedCta2.variant} size={mergedCta2.size} className={mergedCta2.className} unstyled={mergedCta2.unstyled} style={mergedCta2.style}>
+                <Link href={mergedCta2.href || "#"} aria-label={mergedCta2.label}>
+                  {mergedCta2.label}
+                </Link>
+              </Button>)}
+          </div>
+        </div>
+      </div>
+    </section>);
+}

package/dist/components/HeroSplit.d.ts

@@ -0,0 +1,98 @@
+import React from "react";
+/**
+ * Props for the HeroSplit component.
+ *
+ * @remarks
+ * - Layout: split hero with text and image. imageLayout controls whether the
+ *   image is full-bleed or padded.
+ * - Styling: slot-style className overrides are merged via cn(). Heading and
+ *   subheading accept either a string or a { text, className } object.
+ * - Motion: enableMotion toggles button hover lift transitions.
+ * - Accessibility: uses a semantic <section> with aria-label.
+ */
+interface HeroSplitProps {
+    /** Optional id to attach to the root section element */
+    id?: string;
+    /** Optional top-level class to override the root */
+    className?: string;
+    /** Section slot override */
+    section?: {
+        className?: string;
+    };
+    /** Heading string or object with text and className */
+    heading?: string | {
+        text?: string;
+        className?: string;
+    };
+    /** Subheading string or object with text and className */
+    subheading?: string | {
+        text?: string;
+        className?: string;
+    };
+    /** Primary CTA configuration */
+    cta1?: {
+        label?: string;
+        href?: string;
+        variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+        size?: "default" | "sm" | "lg" | "icon";
+        className?: string;
+        /** When true, renders the Button in unstyled mode to avoid token bleed from variants */
+        unstyled?: boolean;
+        /** Optional inline style forwarded to Button */
+        style?: React.CSSProperties;
+    };
+    /** Secondary CTA configuration */
+    cta2?: {
+        label?: string;
+        href?: string;
+        variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+        size?: "default" | "sm" | "lg" | "icon";
+        className?: string;
+        /** When true, renders the Button in unstyled mode to avoid token bleed from variants */
+        unstyled?: boolean;
+        /** Optional inline style forwarded to Button */
+        style?: React.CSSProperties;
+    };
+    /** Image configuration */
+    image?: {
+        src?: string;
+        alt?: string;
+        className?: string;
+    };
+    /** Image container slot */
+    imageContainer?: {
+        className?: string;
+    };
+    /** Text container slot */
+    textContainer?: {
+        className?: string;
+    };
+    /** Buttons container slot */
+    buttonsContainer?: {
+        className?: string;
+    };
+    /** Text alignment at large breakpoints. @defaultValue "center" */
+    textAlign?: "left" | "center" | "right";
+    /** Fallback node shown when no image.src is provided */
+    fallback?: React.ReactNode;
+    /** ARIA label for the section. @defaultValue "Hero section" */
+    ariaLabel?: string;
+    /** When false, removes button hover lifts, keeps layout static */
+    enableMotion?: boolean;
+    /** "padded" keeps default gutters. "full-bleed" allows the image to touch page edges. @defaultValue "full-bleed" */
+    imageLayout?: "padded" | "full-bleed";
+}
+/**
+ * Split hero with text on one side and an image on the other.
+ *
+ * @remarks
+ * - Text props accept string or object forms to easily override classes.
+ * - Full-bleed layout absolutely positions the image on larger screens.
+ * - Motion only affects the subtle hover lift on CTA buttons.
+ *
+ * @example
+ * <HeroSplit heading="Build faster" subheading="Launch confidently" />
+ */
+export declare function HeroSplit({ id, className, heading, subheading, section, cta1, cta2, image, imageContainer, textContainer, buttonsContainer, textAlign, fallback, ariaLabel, enableMotion, imageLayout, }: HeroSplitProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=HeroSplit.d.ts.map

package/dist/components/HeroSplit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroSplit.d.ts","sourceRoot":"","sources":["../../src/components/HeroSplit.tsx"],"names":[],"mappings":"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"}

package/dist/components/HeroSplit.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from "next/image";
+import Link from "next/link";
+import { Button } from "@nextworks/blocks-core";
+import { cn } from "@nextworks/blocks-core";
+/**
+ * Split hero with text on one side and an image on the other.
+ *
+ * @remarks
+ * - Text props accept string or object forms to easily override classes.
+ * - Full-bleed layout absolutely positions the image on larger screens.
+ * - Motion only affects the subtle hover lift on CTA buttons.
+ *
+ * @example
+ * <HeroSplit heading="Build faster" subheading="Launch confidently" />
+ */
+export function HeroSplit({ id, className, heading, subheading, section, cta1, cta2, image = {
+    src: "/placeholders/gallery/hero-pexels-broken-9945014.avif",
+    alt: "Hero image",
+    className: "object-contain",
+}, imageContainer, textContainer = { className: "flex-1 p-5" }, buttonsContainer = { className: "flex flex-col md:flex-row gap-4 mt-6" }, textAlign = "center", fallback, ariaLabel = "Hero section", enableMotion = true, imageLayout = "full-bleed", }) {
+    var _a, _b;
+    const lgTextAlignClasses = {
+        left: "lg:text-left",
+        right: "lg:text-right",
+        center: "lg:text-center",
+    };
+    const lgItemsAlignClasses = {
+        left: "lg:items-start",
+        right: "lg:items-end",
+        center: "lg:items-center",
+    };
+    const lgJustifyAlignClasses = {
+        left: "lg:justify-start",
+        right: "lg:justify-end",
+        center: "lg:justify-center",
+    };
+    const buttonLift = enableMotion
+        ? "transition-all duration-200 hover:-translate-y-0.5"
+        : "transition-none hover:!translate-y-0";
+    // Defaults for text props (normalized below)
+    const defaultHeading = {
+        text: "Lorem ipsum dolor sit amet",
+        className: "text-3xl md:text-4xl font-bold leading-tight text-foreground",
+    };
+    const defaultSubheading = {
+        text: "Consectetur adipiscing elit, sed do eiusmod tempor.",
+        className: "text-lg md:text-xl text-foreground mt-4 mb-6",
+    };
+    const normalizedHeading = typeof heading === "string"
+        ? { text: heading, className: defaultHeading.className }
+        : {
+            text: (_a = heading === null || heading === void 0 ? void 0 : heading.text) !== null && _a !== void 0 ? _a : defaultHeading.text,
+            className: cn(defaultHeading.className, heading === null || heading === void 0 ? void 0 : heading.className),
+        };
+    const normalizedSubheading = typeof subheading === "string"
+        ? { text: subheading, className: defaultSubheading.className }
+        : {
+            text: (_b = subheading === null || subheading === void 0 ? void 0 : subheading.text) !== null && _b !== void 0 ? _b : defaultSubheading.text,
+            className: cn(defaultSubheading.className, subheading === null || subheading === void 0 ? void 0 : subheading.className),
+        };
+    // CTA defaults and normalization (merge, don't replace)
+    const defaultCta1 = {
+        label: "Get Started",
+        href: "#contact",
+        variant: "default",
+        size: "default",
+        className: "shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
+    };
+    const mergedCta1 = Object.assign(Object.assign(Object.assign({}, defaultCta1), (cta1 !== null && cta1 !== void 0 ? cta1 : {})), { className: cn(defaultCta1.className, cta1 === null || cta1 === void 0 ? void 0 : cta1.className, buttonLift) });
+    const defaultCta2 = {
+        label: "Learn More",
+        href: "#",
+        variant: "outline",
+        size: "default",
+        className: "",
+    };
+    const mergedCta2 = cta2
+        ? Object.assign(Object.assign(Object.assign({}, defaultCta2), cta2), { className: cn(defaultCta2.className, cta2.className, buttonLift) }) : undefined;
+    const defaultSectionPadded = cn("px-8 pt-8 pb-8 md:min-h-[60vh] lg:min-h-[70vh]");
+    const defaultSectionFull = cn("relative overflow-hidden pt-0 pb-0 md:min-h-[60vh] lg:min-h-[70vh]");
+    const defaultImageContainerPadded = cn("relative mb-4 h-48 min-h-[12rem] w-full md:mb-0 md:h-72 md:w-1/2");
+    // For full-bleed: absolute positioning on large screens to break out completely
+    const defaultImageContainerFull = cn("relative h-48 w-full md:absolute md:inset-y-0 md:right-0 md:h-full md:w-1/2");
+    const baseSectionClass = imageLayout === "full-bleed" ? defaultSectionFull : defaultSectionPadded;
+    const finalSectionClass = cn(baseSectionClass, section === null || section === void 0 ? void 0 : section.className);
+    const baseImageContainerClass = imageLayout === "full-bleed"
+        ? defaultImageContainerFull
+        : defaultImageContainerPadded;
+    const finalImageContainerClass = cn(baseImageContainerClass, imageContainer === null || imageContainer === void 0 ? void 0 : imageContainer.className);
+    // -- This overrides the image.className that is passed from importing components ... devs should be able to decide on cover/contain from the importing component.
+    const finalImageClass = cn(image === null || image === void 0 ? void 0 : image.className, imageLayout === "full-bleed"
+        ? "object-cover object-center md:object-right"
+        : "object-contain object-center");
+    return (_jsx("section", { id: id, className: cn(finalSectionClass, className), "aria-label": ariaLabel, children: _jsxs("div", { className: cn("flex flex-col items-stretch", imageLayout === "full-bleed"
+                ? "md:block"
+                : "md:flex-row md:items-start"), children: [_jsx("div", { className: cn("w-full", imageLayout === "full-bleed" &&
+                        "relative z-10 md:w-1/2 md:px-8 md:py-12", textContainer.className), children: _jsxs("div", { className: cn("flex flex-col items-center", lgItemsAlignClasses[textAlign]), children: [_jsx("h1", { className: cn("text-center", lgTextAlignClasses[textAlign], normalizedHeading.className), children: normalizedHeading.text }), _jsx("p", { className: cn("text-center", lgTextAlignClasses[textAlign], normalizedSubheading.className), children: normalizedSubheading.text }), _jsxs("div", { className: cn("flex flex-col items-center justify-center gap-4 sm:flex-row", lgJustifyAlignClasses[textAlign], lgItemsAlignClasses[textAlign], buttonsContainer.className), children: [mergedCta1.label && (_jsx(Button, { asChild: true, variant: mergedCta1.variant, size: mergedCta1.size, className: mergedCta1.className, unstyled: mergedCta1.unstyled, style: mergedCta1.style, children: _jsx(Link, { href: mergedCta1.href || "#", "aria-label": mergedCta1.label, children: mergedCta1.label }) })), (mergedCta2 === null || mergedCta2 === void 0 ? void 0 : mergedCta2.label) && (_jsx(Button, { asChild: true, variant: mergedCta2.variant, size: mergedCta2.size, className: mergedCta2.className, unstyled: mergedCta2.unstyled, style: mergedCta2.style, children: _jsx(Link, { href: mergedCta2.href || "#", "aria-label": mergedCta2.label, children: mergedCta2.label }) }))] })] }) }), _jsx("div", { className: cn(finalImageContainerClass), children: (image === null || image === void 0 ? void 0 : image.src) ? (_jsx(Image, { priority: true, fetchPriority: "high", src: image.src, alt: image.alt || "Hero image", className: finalImageClass, fill: true, sizes: "(min-width: 768px) 50vw, 100vw", quality: 75 })) : (_jsx("div", { className: "absolute inset-0", children: fallback || null })) })] }) }));
+}

package/dist/components/HeroSplit.jsx

@@ -0,0 +1,134 @@
+"use client";
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { Button } from "@nextworks/blocks-core";
+import { cn } from "@nextworks/blocks-core";
+/**
+ * Split hero with text on one side and an image on the other.
+ *
+ * @remarks
+ * - Text props accept string or object forms to easily override classes.
+ * - Full-bleed layout absolutely positions the image on larger screens.
+ * - Motion only affects the subtle hover lift on CTA buttons.
+ *
+ * @example
+ * <HeroSplit heading="Build faster" subheading="Launch confidently" />
+ */
+export function HeroSplit({ id, className, heading, subheading, section, cta1, cta2, image = {
+    src: "/placeholders/gallery/hero-pexels-broken-9945014.avif",
+    alt: "Hero image",
+    className: "object-contain",
+}, imageContainer, textContainer = { className: "flex-1 p-5" }, buttonsContainer = { className: "flex flex-col md:flex-row gap-4 mt-6" }, textAlign = "center", fallback, ariaLabel = "Hero section", enableMotion = true, imageLayout = "full-bleed", }) {
+    var _a, _b;
+    const lgTextAlignClasses = {
+        left: "lg:text-left",
+        right: "lg:text-right",
+        center: "lg:text-center",
+    };
+    const lgItemsAlignClasses = {
+        left: "lg:items-start",
+        right: "lg:items-end",
+        center: "lg:items-center",
+    };
+    const lgJustifyAlignClasses = {
+        left: "lg:justify-start",
+        right: "lg:justify-end",
+        center: "lg:justify-center",
+    };
+    const buttonLift = enableMotion
+        ? "transition-all duration-200 hover:-translate-y-0.5"
+        : "transition-none hover:!translate-y-0";
+    // Defaults for text props (normalized below)
+    const defaultHeading = {
+        text: "Lorem ipsum dolor sit amet",
+        className: "text-3xl md:text-4xl font-bold leading-tight text-foreground",
+    };
+    const defaultSubheading = {
+        text: "Consectetur adipiscing elit, sed do eiusmod tempor.",
+        className: "text-lg md:text-xl text-foreground mt-4 mb-6",
+    };
+    const normalizedHeading = typeof heading === "string"
+        ? { text: heading, className: defaultHeading.className }
+        : {
+            text: (_a = heading === null || heading === void 0 ? void 0 : heading.text) !== null && _a !== void 0 ? _a : defaultHeading.text,
+            className: cn(defaultHeading.className, heading === null || heading === void 0 ? void 0 : heading.className),
+        };
+    const normalizedSubheading = typeof subheading === "string"
+        ? { text: subheading, className: defaultSubheading.className }
+        : {
+            text: (_b = subheading === null || subheading === void 0 ? void 0 : subheading.text) !== null && _b !== void 0 ? _b : defaultSubheading.text,
+            className: cn(defaultSubheading.className, subheading === null || subheading === void 0 ? void 0 : subheading.className),
+        };
+    // CTA defaults and normalization (merge, don't replace)
+    const defaultCta1 = {
+        label: "Get Started",
+        href: "#contact",
+        variant: "default",
+        size: "default",
+        className: "shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
+    };
+    const mergedCta1 = Object.assign(Object.assign(Object.assign({}, defaultCta1), (cta1 !== null && cta1 !== void 0 ? cta1 : {})), { className: cn(defaultCta1.className, cta1 === null || cta1 === void 0 ? void 0 : cta1.className, buttonLift) });
+    const defaultCta2 = {
+        label: "Learn More",
+        href: "#",
+        variant: "outline",
+        size: "default",
+        className: "",
+    };
+    const mergedCta2 = cta2
+        ? Object.assign(Object.assign(Object.assign({}, defaultCta2), cta2), { className: cn(defaultCta2.className, cta2.className, buttonLift) }) : undefined;
+    const defaultSectionPadded = cn("px-8 pt-8 pb-8 md:min-h-[60vh] lg:min-h-[70vh]");
+    const defaultSectionFull = cn("relative overflow-hidden pt-0 pb-0 md:min-h-[60vh] lg:min-h-[70vh]");
+    const defaultImageContainerPadded = cn("relative mb-4 h-48 min-h-[12rem] w-full md:mb-0 md:h-72 md:w-1/2");
+    // For full-bleed: absolute positioning on large screens to break out completely
+    const defaultImageContainerFull = cn("relative h-48 w-full md:absolute md:inset-y-0 md:right-0 md:h-full md:w-1/2");
+    const baseSectionClass = imageLayout === "full-bleed" ? defaultSectionFull : defaultSectionPadded;
+    const finalSectionClass = cn(baseSectionClass, section === null || section === void 0 ? void 0 : section.className);
+    const baseImageContainerClass = imageLayout === "full-bleed"
+        ? defaultImageContainerFull
+        : defaultImageContainerPadded;
+    const finalImageContainerClass = cn(baseImageContainerClass, imageContainer === null || imageContainer === void 0 ? void 0 : imageContainer.className);
+    // -- This overrides the image.className that is passed from importing components ... devs should be able to decide on cover/contain from the importing component.
+    const finalImageClass = cn(image === null || image === void 0 ? void 0 : image.className, imageLayout === "full-bleed"
+        ? "object-cover object-center md:object-right"
+        : "object-contain object-center");
+    return (<section id={id} className={cn(finalSectionClass, className)} aria-label={ariaLabel}>
+      <div className={cn("flex flex-col items-stretch", imageLayout === "full-bleed"
+            ? "md:block"
+            : "md:flex-row md:items-start")}>
+        {/* Text container - takes up left side on large screens */}
+        <div className={cn("w-full", imageLayout === "full-bleed" &&
+            "relative z-10 md:w-1/2 md:px-8 md:py-12", textContainer.className)}>
+          <div className={cn("flex flex-col items-center", lgItemsAlignClasses[textAlign])}>
+            <h1 className={cn("text-center", lgTextAlignClasses[textAlign], normalizedHeading.className)}>
+              {normalizedHeading.text}
+            </h1>
+
+            <p className={cn("text-center", lgTextAlignClasses[textAlign], normalizedSubheading.className)}>
+              {normalizedSubheading.text}
+            </p>
+
+            <div className={cn("flex flex-col items-center justify-center gap-4 sm:flex-row", lgJustifyAlignClasses[textAlign], lgItemsAlignClasses[textAlign], buttonsContainer.className)}>
+              {mergedCta1.label && (<Button asChild variant={mergedCta1.variant} size={mergedCta1.size} className={mergedCta1.className} unstyled={mergedCta1.unstyled} style={mergedCta1.style}>
+                  <Link href={mergedCta1.href || "#"} aria-label={mergedCta1.label}>
+                    {mergedCta1.label}
+                  </Link>
+                </Button>)}
+
+              {(mergedCta2 === null || mergedCta2 === void 0 ? void 0 : mergedCta2.label) && (<Button asChild variant={mergedCta2.variant} size={mergedCta2.size} className={mergedCta2.className} unstyled={mergedCta2.unstyled} style={mergedCta2.style}>
+                  <Link href={mergedCta2.href || "#"} aria-label={mergedCta2.label}>
+                    {mergedCta2.label}
+                  </Link>
+                </Button>)}
+            </div>
+          </div>
+        </div>
+
+        {/* Image container - absolutely positioned on right side for full-bleed */}
+        <div className={cn(finalImageContainerClass)}>
+          {(image === null || image === void 0 ? void 0 : image.src) ? (<Image priority fetchPriority="high" src={image.src} alt={image.alt || "Hero image"} className={finalImageClass} fill sizes="(min-width: 768px) 50vw, 100vw" quality={75}/>) : (<div className="absolute inset-0">{fallback || null}</div>)}
+        </div>
+      </div>
+    </section>);
+}