@nextworks/blocks-sections 0.1.0-alpha.0

package/dist/components/FAQ.jsx

@@ -0,0 +1,98 @@
+"use client";
+import React, { useMemo, useState } from "react";
+import { cn } from "@nextworks/blocks-core";
+import { ChevronDown, ChevronUp } from "lucide-react";
+// const defaultFaqData: FAQS[] = [
+//   {
+//     question: "What does IntelliOpAI do?",
+//     answer: "Automates ops with real-time insights.",
+//   },
+//   {
+//     question: "Do I need coding skills?",
+//     answer: "No, it's designed for ease of use.",
+//   },
+// ];
+const defaultFaqData = [
+    {
+        question: "What does IntelliOpAI do?",
+        answer: "Automates ops with real-time insights.",
+    },
+    {
+        question: "How secure is my data?",
+        answer: "We use industry-standard encryption and strict access controls.",
+    },
+    {
+        question: "Can I integrate with other tools?",
+        answer: "Yes — supports APIs and popular integrations like Slack, GitHub, and Jira.",
+    },
+    {
+        question: "How do I get support?",
+        answer: "Contact our support team via in-app chat or the help center for assistance.",
+    },
+];
+/**
+ * Expandable FAQ section with accessible toggles and optional icons.
+ *
+ * @remarks
+ * - Supports multiple or single open item behavior via allowMultipleOpen.
+ * - Uses button with aria-expanded and a region with aria-labelledby.
+ * - Motion can be disabled via enableMotion for reduced animation.
+ *
+ * @example
+ * <FAQ faqData={[{ question: 'What is X?', answer: 'Y' }]} />
+ */
+export function FAQ({ faqSectionHeaderText = "Frequently Asked Questions", faqData = defaultFaqData, sectionId = "faq", className, allowMultipleOpen = true, defaultOpenIndices = [], openIcon, closedIcon, ariaLabel = "Frequently asked questions section", section = { className: "py-10 px-5 bg-muted text-foreground" }, container = { className: "mx-auto max-w-7xl" }, heading = {
+    className: "mb-6 text-center text-2xl font-bold text-foreground",
+}, grid = { className: "grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6" }, item = { className: "mb-4" }, questionButton = {
+    className: "shadow-md hover:shadow-lg border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)] bg-[var(--faq-btn-bg,var(--btn-bg))] text-[var(--faq-btn-fg,var(--btn-fg))] hover:bg-[var(--faq-btn-hover-bg,var(--btn-hover-bg))] hover:text-[var(--faq-btn-hover-fg,var(--btn-hover-fg))]",
+}, questionText = { className: "" }, chevronIcon = { className: "transition-transform duration-200" }, answer = {
+    className: "bg-[var(--faq-answer-bg,var(--card-bg))] text-[var(--faq-answer-fg,var(--card-fg))] border-[var(--card-border)]",
+}, answerText = { className: "leading-relaxed" }, enableMotion = true, }) {
+    const [openSet, setOpenSet] = useState(() => new Set(defaultOpenIndices));
+    const idPrefix = useMemo(() => sectionId || "faq", [sectionId]);
+    const onToggle = (idx) => {
+        setOpenSet((prev) => {
+            const next = new Set(prev);
+            if (next.has(idx))
+                next.delete(idx);
+            else {
+                if (!allowMultipleOpen)
+                    next.clear();
+                next.add(idx);
+            }
+            return next;
+        });
+    };
+    return (<section id={sectionId} className={cn(section.className, className)} aria-label={ariaLabel}>
+      <div className={cn(container.className)}>
+        {faqSectionHeaderText && (<h2 className={cn(heading.className)}>{faqSectionHeaderText}</h2>)}
+        <div className={cn(grid.className)}>
+          {faqData.map((faq, index) => {
+            const transitionCls = enableMotion
+                ? "transition-all duration-300 ease-in-out"
+                : "transition-none";
+            const isOpen = openSet.has(index);
+            return (<div key={`${idPrefix}-item-${index}`} className={cn("w-full", item.className)}>
+                <button id={`${idPrefix}-trigger-${index}`} aria-controls={`${idPrefix}-panel-${index}`} aria-expanded={isOpen} onClick={() => onToggle(index)} className={cn("flex w-full items-center justify-between rounded-md p-4 text-left focus:outline-none", 
+                // preset-first ring/border
+                "border-[var(--btn-border)] focus-visible:ring-2 focus-visible:ring-[var(--btn-ring)] focus-visible:ring-offset-2", questionButton.className)}>
+                  <span className={cn("flex-1 font-medium select-none", questionText.className)}>
+                    {faq.question}
+                  </span>
+                  <span className={cn("ml-3 flex-shrink-0", chevronIcon.className)}>
+                    {isOpen
+                    ? (openIcon !== null && openIcon !== void 0 ? openIcon : <ChevronUp className="h-5 w-5"/>)
+                    : (closedIcon !== null && closedIcon !== void 0 ? closedIcon : <ChevronDown className="h-5 w-5"/>)}
+                  </span>
+                </button>
+                <div id={`${idPrefix}-panel-${index}`} role="region" aria-labelledby={`${idPrefix}-trigger-${index}`} className={cn("border-border overflow-hidden rounded-md border", isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0", transitionCls, answer.className)}>
+                  <div className={cn("p-4", answerText.className)}>
+                    {faq.answer}
+                  </div>
+                </div>
+              </div>);
+        })}
+        </div>
+      </div>
+    </section>);
+}

package/dist/components/Features.d.ts

@@ -0,0 +1,111 @@
+import React from "react";
+import type { Transition } from "motion";
+/**
+ * Data used to render a FeatureCard within the Features grid.
+ * @public
+ */
+export interface FeatureCardData {
+    imageSrc: string;
+    imageAlt: string;
+    headingText: string;
+    subheadingText: string;
+}
+/**
+ * Props for the Features section component.
+ *
+ * @remarks
+ * - Styling: slot-style className overrides are merged after defaults via cn().
+ * - Motion: entrance animations respect enableMotion; prefers-reduced-motion
+ *   disables transforms and transitions where possible.
+ *
+ * @public
+ */
+export interface FeaturesProps {
+    /**
+     * Optional id to attach to the root section element.
+     * @defaultValue "features"
+     */
+    id?: string;
+    /** Main section heading text */
+    sectionHeading?: string;
+    /** Subheading text displayed below the main heading */
+    sectionSubheading?: string;
+    /** Array of feature card data objects */
+    featuresData?: FeatureCardData[];
+    /** Optional top-level class to override the section root */
+    className?: string;
+    /** Styling configuration objects (slots) */
+    section?: {
+        className?: string;
+    };
+    container?: {
+        className?: string;
+    };
+    header?: {
+        className?: string;
+    };
+    heading?: {
+        className?: string;
+    };
+    subheading?: {
+        className?: string;
+    };
+    grid?: {
+        className?: string;
+    };
+    /** Wrapper around each FeatureCard (the animated container) */
+    cardWrapper?: {
+        className?: string;
+    };
+    /** Styles passed down to FeatureCard slots */
+    card?: {
+        className?: string;
+    };
+    image?: {
+        className?: string;
+    };
+    cardHeading?: {
+        className?: string;
+    };
+    cardSubheading?: {
+        className?: string;
+    };
+    /** When false, disables entrance animations and hover transitions. */
+    enableMotion?: boolean;
+    /** Motion configuration for the feature items */
+    motionConfig?: {
+        initial?: {
+            opacity?: number;
+            y?: number;
+        };
+        whileInView?: {
+            opacity?: number;
+            y?: number;
+        };
+        viewport?: {
+            once?: boolean;
+            amount?: number;
+        };
+        transition?: Transition;
+    };
+    /** ARIA label for the features section */
+    ariaLabel?: string;
+}
+/**
+ * Responsive Features section that renders a heading, optional subheading,
+ * and a grid of FeatureCard items with configurable entrance animations.
+ *
+ * @remarks
+ * - Styling: slot-style className overrides are merged after defaults via cn().
+ * - Motion: Controlled by enableMotion and motionConfig; animations are reduced
+ *   or disabled when users prefer reduced motion.
+ * - Accessibility: Uses a semantic <section> with an aria-label.
+ *
+ * @example
+ * <Features
+ *   sectionHeading="Key Features"
+ *   featuresData={[{ imageSrc: "/a.png", imageAlt: "", headingText: "Fast", subheadingText: "Blazing" }]}
+ * />
+ */
+export declare function Features({ id, sectionHeading, sectionSubheading, featuresData, className, section, container, header, heading, subheading, grid, cardWrapper, card, image, cardHeading, cardSubheading, enableMotion, motionConfig, ariaLabel, }: FeaturesProps): React.JSX.Element;
+//# sourceMappingURL=Features.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Features.d.ts","sourceRoot":"","sources":["../../src/components/Features.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAIzC;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,gCAAgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uDAAuD;IACvD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,yCAAyC;IACzC,YAAY,CAAC,EAAE,eAAe,EAAE,CAAC;IAEjC,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,4CAA4C;IAC5C,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,SAAS,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,MAAM,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,UAAU,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,+DAA+D;IAC/D,WAAW,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACrC,8CAA8C;IAC9C,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,KAAK,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/B,WAAW,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACrC,cAAc,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAExC,sEAAsE;IACtE,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,iDAAiD;IACjD,YAAY,CAAC,EAAE;QACb,OAAO,CAAC,EAAE;YAAE,OAAO,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QAC3C,WAAW,CAAC,EAAE;YAAE,OAAO,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QAC/C,QAAQ,CAAC,EAAE;YAAE,IAAI,CAAC,EAAE,OAAO,CAAC;YAAC,MAAM,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QAC/C,UAAU,CAAC,EAAE,UAAU,CAAC;KACzB,CAAC;IAEF,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiCD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,QAAQ,CAAC,EACvB,EAAe,EACf,cAA+B,EAC/B,iBAA0E,EAC1E,YAAkC,EAElC,SAAS,EAET,OAAgE,EAChE,SAAmE,EACnE,MAAoD,EACpD,OAGC,EACD,UAGC,EACD,IAGC,EACD,WAEC,EACD,IAGC,EACD,KAGC,EACD,WAGC,EACD,cAEC,EAED,YAAmB,EACnB,YAWC,EACD,SAA8B,GAC/B,EAAE,aAAa,qBAwFf"}

package/dist/components/Features.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { cn } from "@nextworks/blocks-core";
+import { FeatureCard } from "@nextworks/blocks-core";
+const defaultFeaturesData = [
+    {
+        imageSrc: "/feature_1.png",
+        imageAlt: "Advanced Analytics Dashboard",
+        headingText: "Advanced Analytics",
+        subheadingText: "Get deep insights into your business performance with our comprehensive analytics dashboard that tracks key metrics and provides actionable recommendations.",
+    },
+    {
+        imageSrc: "/feature_2.png",
+        imageAlt: "Real-time Collaboration Tools",
+        headingText: "Real-time Collaboration",
+        subheadingText: "Work seamlessly with your team using our real-time collaboration tools that keep everyone in sync and boost productivity across all projects.",
+    },
+    {
+        imageSrc: "/feature_3.png",
+        imageAlt: "Secure Data Management",
+        headingText: "Secure Data Management",
+        subheadingText: "Protect your sensitive information with enterprise-grade security features including encryption, access controls, and compliance monitoring.",
+    },
+    {
+        imageSrc: "/feature_4.png",
+        imageAlt: "Mobile-First Design",
+        headingText: "Mobile-First Design",
+        subheadingText: "Access your data and manage your workflow from anywhere with our responsive, mobile-optimized interface that works perfectly on all devices.",
+    },
+];
+/**
+ * Responsive Features section that renders a heading, optional subheading,
+ * and a grid of FeatureCard items with configurable entrance animations.
+ *
+ * @remarks
+ * - Styling: slot-style className overrides are merged after defaults via cn().
+ * - Motion: Controlled by enableMotion and motionConfig; animations are reduced
+ *   or disabled when users prefer reduced motion.
+ * - Accessibility: Uses a semantic <section> with an aria-label.
+ *
+ * @example
+ * <Features
+ *   sectionHeading="Key Features"
+ *   featuresData={[{ imageSrc: "/a.png", imageAlt: "", headingText: "Fast", subheadingText: "Blazing" }]}
+ * />
+ */
+export function Features({ id = "features", sectionHeading = "Key Features", sectionSubheading = "Discover what makes our platform unique and powerful", featuresData = defaultFeaturesData, className, section = { className: "py-16 md:py-20 lg:py-24 bg-background" }, container = { className: "max-w-7xl mx-auto px-4 md:px-6 lg:px-8" }, header = { className: "text-center mb-12 md:mb-16" }, heading = {
+    className: "text-3xl md:text-4xl lg:text-5xl font-bold text-foreground mb-4",
+}, subheading = {
+    className: "text-lg md:text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed",
+}, grid = {
+    className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-4 gap-6 md:gap-8",
+}, cardWrapper = {
+    className: "motion-reduce:transform-none motion-reduce:transition-none",
+}, card = {
+    className: "h-full bg-card border border-border rounded-lg shadow-md transition-all duration-200 hover:-translate-y-1 hover:shadow-lg overflow-hidden motion-reduce:transition-none motion-reduce:transform-none",
+}, image = {
+    className: "w-full h-48 md:h-56 object-cover transition-none hover:!scale-100 group-hover:!scale-100 [transform:none]",
+}, cardHeading = {
+    className: "text-xl md:text-2xl font-semibold text-card-foreground mb-3 leading-tight",
+}, cardSubheading = {
+    className: "text-sm md:text-base text-muted-foreground leading-relaxed",
+}, enableMotion = true, motionConfig = {
+    initial: { opacity: 0, y: 12 },
+    whileInView: { opacity: 1, y: 0 },
+    viewport: { once: true, amount: 0.2 },
+    transition: {
+        type: "tween",
+        stiffness: 0,
+        damping: 50,
+        mass: 1,
+        delay: 0.15,
+    },
+}, ariaLabel = "Features section", }) {
+    return (_jsx("section", { id: id, className: cn(section.className, className), "aria-label": ariaLabel, children: _jsxs("div", { className: cn(container.className), children: [_jsxs("div", { className: cn(header.className), children: [_jsx("h2", { className: cn(heading.className), children: sectionHeading }), sectionSubheading && (_jsx("p", { className: cn(subheading.className), children: sectionSubheading }))] }), _jsx("div", { className: cn(grid.className), children: featuresData.map((feature, index) => {
+                        var _a, _b, _c;
+                        const mConfig = enableMotion
+                            ? motionConfig
+                            : {
+                                initial: { opacity: 1, y: 0 },
+                                whileInView: { opacity: 1, y: 0 },
+                                viewport: { once: true, amount: 0 },
+                                transition: {
+                                    type: "tween",
+                                    duration: 0,
+                                },
+                            };
+                        // Ensure we always spread a defined object into transition
+                        const baseTransition = ((_a = mConfig.transition) !== null && _a !== void 0 ? _a : {
+                            type: "tween",
+                            duration: 0,
+                        });
+                        const noMotionCard = "transition-none hover:!translate-y-0 hover:shadow-none motion-reduce:transition-none motion-reduce:transform-none";
+                        const noMotionImage = "transition-none hover:!scale-100 transform-none motion-reduce:transform-none group-hover:!scale-100";
+                        return (_jsx(motion.div, { initial: mConfig.initial, whileInView: mConfig.whileInView, viewport: mConfig.viewport, transition: Object.assign(Object.assign({}, baseTransition), { 
+                                // Stagger based on index while preserving provided delay if any
+                                delay: ((_c = (_b = mConfig.transition) === null || _b === void 0 ? void 0 : _b.delay) !== null && _c !== void 0 ? _c : 0.15) +
+                                    index * (enableMotion ? 0.06 : 0) }), className: cn(cardWrapper.className), children: _jsx(FeatureCard, { cardImageSrc: feature.imageSrc, cardImageAlt: feature.imageAlt, cardHeadingText: feature.headingText, cardSubheadingText: feature.subheadingText, card: {
+                                    className: cn(card.className, !enableMotion && noMotionCard),
+                                }, image: {
+                                    className: cn(image.className, !enableMotion && noMotionImage),
+                                }, 
+                                // image={{
+                                //   className: cn(image.className),
+                                // }}
+                                heading: { className: cn(cardHeading.className) }, subheading: { className: cn(cardSubheading.className) }, className: cn("h-full") }) }, index));
+                    }) })] }) }));
+}

package/dist/components/Features.jsx

@@ -0,0 +1,122 @@
+"use client";
+import React from "react";
+import { motion } from "motion/react";
+import { cn } from "@nextworks/blocks-core";
+import { FeatureCard } from "@nextworks/blocks-core";
+const defaultFeaturesData = [
+    {
+        imageSrc: "/feature_1.png",
+        imageAlt: "Advanced Analytics Dashboard",
+        headingText: "Advanced Analytics",
+        subheadingText: "Get deep insights into your business performance with our comprehensive analytics dashboard that tracks key metrics and provides actionable recommendations.",
+    },
+    {
+        imageSrc: "/feature_2.png",
+        imageAlt: "Real-time Collaboration Tools",
+        headingText: "Real-time Collaboration",
+        subheadingText: "Work seamlessly with your team using our real-time collaboration tools that keep everyone in sync and boost productivity across all projects.",
+    },
+    {
+        imageSrc: "/feature_3.png",
+        imageAlt: "Secure Data Management",
+        headingText: "Secure Data Management",
+        subheadingText: "Protect your sensitive information with enterprise-grade security features including encryption, access controls, and compliance monitoring.",
+    },
+    {
+        imageSrc: "/feature_4.png",
+        imageAlt: "Mobile-First Design",
+        headingText: "Mobile-First Design",
+        subheadingText: "Access your data and manage your workflow from anywhere with our responsive, mobile-optimized interface that works perfectly on all devices.",
+    },
+];
+/**
+ * Responsive Features section that renders a heading, optional subheading,
+ * and a grid of FeatureCard items with configurable entrance animations.
+ *
+ * @remarks
+ * - Styling: slot-style className overrides are merged after defaults via cn().
+ * - Motion: Controlled by enableMotion and motionConfig; animations are reduced
+ *   or disabled when users prefer reduced motion.
+ * - Accessibility: Uses a semantic <section> with an aria-label.
+ *
+ * @example
+ * <Features
+ *   sectionHeading="Key Features"
+ *   featuresData={[{ imageSrc: "/a.png", imageAlt: "", headingText: "Fast", subheadingText: "Blazing" }]}
+ * />
+ */
+export function Features({ id = "features", sectionHeading = "Key Features", sectionSubheading = "Discover what makes our platform unique and powerful", featuresData = defaultFeaturesData, className, section = { className: "py-16 md:py-20 lg:py-24 bg-background" }, container = { className: "max-w-7xl mx-auto px-4 md:px-6 lg:px-8" }, header = { className: "text-center mb-12 md:mb-16" }, heading = {
+    className: "text-3xl md:text-4xl lg:text-5xl font-bold text-foreground mb-4",
+}, subheading = {
+    className: "text-lg md:text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed",
+}, grid = {
+    className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-4 gap-6 md:gap-8",
+}, cardWrapper = {
+    className: "motion-reduce:transform-none motion-reduce:transition-none",
+}, card = {
+    className: "h-full bg-card border border-border rounded-lg shadow-md transition-all duration-200 hover:-translate-y-1 hover:shadow-lg overflow-hidden motion-reduce:transition-none motion-reduce:transform-none",
+}, image = {
+    className: "w-full h-48 md:h-56 object-cover transition-none hover:!scale-100 group-hover:!scale-100 [transform:none]",
+}, cardHeading = {
+    className: "text-xl md:text-2xl font-semibold text-card-foreground mb-3 leading-tight",
+}, cardSubheading = {
+    className: "text-sm md:text-base text-muted-foreground leading-relaxed",
+}, enableMotion = true, motionConfig = {
+    initial: { opacity: 0, y: 12 },
+    whileInView: { opacity: 1, y: 0 },
+    viewport: { once: true, amount: 0.2 },
+    transition: {
+        type: "tween",
+        stiffness: 0,
+        damping: 50,
+        mass: 1,
+        delay: 0.15,
+    },
+}, ariaLabel = "Features section", }) {
+    return (<section id={id} className={cn(section.className, className)} aria-label={ariaLabel}>
+      <div className={cn(container.className)}>
+        <div className={cn(header.className)}>
+          <h2 className={cn(heading.className)}>{sectionHeading}</h2>
+          {sectionSubheading && (<p className={cn(subheading.className)}>{sectionSubheading}</p>)}
+        </div>
+
+        <div className={cn(grid.className)}>
+          {featuresData.map((feature, index) => {
+            var _a, _b, _c;
+            const mConfig = enableMotion
+                ? motionConfig
+                : {
+                    initial: { opacity: 1, y: 0 },
+                    whileInView: { opacity: 1, y: 0 },
+                    viewport: { once: true, amount: 0 },
+                    transition: {
+                        type: "tween",
+                        duration: 0,
+                    },
+                };
+            // Ensure we always spread a defined object into transition
+            const baseTransition = ((_a = mConfig.transition) !== null && _a !== void 0 ? _a : {
+                type: "tween",
+                duration: 0,
+            });
+            const noMotionCard = "transition-none hover:!translate-y-0 hover:shadow-none motion-reduce:transition-none motion-reduce:transform-none";
+            const noMotionImage = "transition-none hover:!scale-100 transform-none motion-reduce:transform-none group-hover:!scale-100";
+            return (<motion.div key={index} initial={mConfig.initial} whileInView={mConfig.whileInView} viewport={mConfig.viewport} transition={Object.assign(Object.assign({}, baseTransition), { 
+                    // Stagger based on index while preserving provided delay if any
+                    delay: ((_c = (_b = mConfig.transition) === null || _b === void 0 ? void 0 : _b.delay) !== null && _c !== void 0 ? _c : 0.15) +
+                        index * (enableMotion ? 0.06 : 0) })} className={cn(cardWrapper.className)}>
+                <FeatureCard cardImageSrc={feature.imageSrc} cardImageAlt={feature.imageAlt} cardHeadingText={feature.headingText} cardSubheadingText={feature.subheadingText} card={{
+                    className: cn(card.className, !enableMotion && noMotionCard),
+                }} image={{
+                    className: cn(image.className, !enableMotion && noMotionImage),
+                }} 
+            // image={{
+            //   className: cn(image.className),
+            // }}
+            heading={{ className: cn(cardHeading.className) }} subheading={{ className: cn(cardSubheading.className) }} className={cn("h-full")}/>
+              </motion.div>);
+        })}
+        </div>
+      </div>
+    </section>);
+}

package/dist/components/Footer.d.ts

@@ -0,0 +1,120 @@
+import React from "react";
+/**
+ * Navigation link item interface representing a single link in the footer.
+ */
+export interface NavLinkItem {
+    /** Display name of the link */
+    name: string;
+    /** URL or anchor for the navigation link */
+    href: string;
+    /** Whether the link should open in a new tab */
+    external?: boolean;
+}
+/**
+ * Grouping for navigation link items under a section heading.
+ */
+export interface NavLinkGroup {
+    /** Section heading/title */
+    heading: string;
+    /** Collection of links under this section */
+    links: NavLinkItem[];
+}
+/**
+ * Social media link interface for footer social icons.
+ * @public
+ */
+export interface SocialLink {
+    /** Name of the social media platform */
+    name: string;
+    /** SVG icon component (e.g., Lucide). Should respect currentColor. */
+    icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+    /** URL to the social profile */
+    url: string;
+    /** Optional aria-label for accessibility */
+    label?: string;
+    /** Whether the link should open in a new tab */
+    external?: boolean;
+}
+/**
+ * Props for the Footer component.
+ *
+ * @remarks
+ * Exposes slot-style className overrides for layout and typography. External
+ * links automatically receive target and rel attributes for security.
+ *
+ * @public
+ */
+export interface FooterProps {
+    /** Optional id to attach to the root footer element */
+    id?: string;
+    /** Brand name or logo text displayed in the footer */
+    footerBrandName?: string;
+    /** Optional custom brand node (e.g., logo). Rendered left of brand text */
+    brandNode?: React.ReactNode;
+    /** Optional link for the brand (wraps brand text) */
+    brandHref?: string;
+    /** Navigation link groups shown in the footer */
+    footerNavLinks?: NavLinkGroup[];
+    /** Social media links and icons shown in the footer */
+    footerSocialLinks?: SocialLink[];
+    /** Optional top-level class to override the footer root */
+    className?: string;
+    /** Styling configuration objects (slot-based API) */
+    section?: {
+        className?: string;
+    };
+    container?: {
+        className?: string;
+    };
+    brand?: {
+        className?: string;
+    };
+    brandWrapper?: {
+        className?: string;
+    };
+    navSection?: {
+        className?: string;
+    };
+    navGroup?: {
+        className?: string;
+    };
+    navHeading?: {
+        className?: string;
+    };
+    navLink?: {
+        className?: string;
+    };
+    linksList?: {
+        className?: string;
+    };
+    socialSection?: {
+        className?: string;
+    };
+    socialLink?: {
+        className?: string;
+    };
+    socialIcon?: {
+        className?: string;
+    };
+    copyright?: {
+        className?: string;
+    };
+    /** Optional overrides for copyright */
+    copyrightYear?: number;
+    copyrightOverride?: React.ReactNode;
+    /** ARIA label for the footer section */
+    ariaLabel?: string;
+}
+/**
+ * Site footer with brand, grouped navigation links, social icons, and copyright.
+ *
+ * @remarks
+ * - Styling: slot-style className overrides are merged after defaults via cn().
+ * - Accessibility: renders a semantic <footer> with aria-label and clear link
+ *   names; external links open in a new tab with rel security attributes.
+ *
+ * @example
+ * <Footer footerBrandName="Acme" />
+ */
+export declare function Footer({ id, footerBrandName, brandNode, brandHref, footerNavLinks, footerSocialLinks, className, section, container, brand, brandWrapper, navSection, navGroup, navHeading, navLink, linksList, socialSection, socialLink, socialIcon, copyright, copyrightYear, copyrightOverride, ariaLabel, }: FooterProps): React.JSX.Element;
+//# sourceMappingURL=Footer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../src/components/Footer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,6CAA6C;IAC7C,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;AAED;;;GAGG;AACH,MAAM,WAAW,UAAU;IAGzB,wCAAwC;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,sEAAsE;IACtE,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;IACzD,gCAAgC;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,WAAW;IAC1B,uDAAuD;IACvD,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,sDAAsD;IACtD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,iDAAiD;IACjD,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAChC,uDAAuD;IACvD,iBAAiB,CAAC,EAAE,UAAU,EAAE,CAAC;IAEjC,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qDAAqD;IACrD,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,SAAS,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,KAAK,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/B,YAAY,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,UAAU,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,QAAQ,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClC,UAAU,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,SAAS,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,aAAa,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,UAAU,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,UAAU,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,SAAS,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAEnC,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEpC,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiED;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAC,EACrB,EAAE,EACF,eAA8B,EAC9B,SAAS,EACT,SAAS,EACT,cAAgC,EAChC,iBAAsC,EACtC,SAAS,EACT,OAGC,EACD,SAAmD,EACnD,KAAuE,EACvE,YAEC,EACD,UAGC,EACD,QAGC,EACD,UAGC,EACD,OAGC,EACD,SAAsC,EACtC,aAA4E,EAC5E,UAGC,EACD,UAAqC,EACrC,SAGC,EACD,aAAa,EACb,iBAAiB,EACjB,SAA4B,GAC7B,EAAE,WAAW,qBAgFb"}