@nextworks/blocks-sections 0.1.0-alpha.0

package/dist/components/Pricing.jsx

@@ -0,0 +1,103 @@
+"use client";
+import React from "react";
+import { motion } from "motion/react";
+import { cn } from "@nextworks/blocks-core";
+import { PricingCard } from "@nextworks/blocks-core";
+/**
+ * Default pricing plans used if none are passed in.
+ */
+const defaultPricingData = [
+    {
+        pricingPlanHeaderText: "Basic",
+        pricingPlanPrice: "$9.99",
+        pricingPlanFeatures: ["Feature 1", "Feature 2", "Feature 3"],
+        pricingPlanCTALabel: "Select Plan",
+        pricingPlanCTAHref: "#contact",
+    },
+    {
+        pricingPlanHeaderText: "Pro",
+        pricingPlanPrice: "$19.99",
+        pricingPlanFeatures: ["Feature 1", "Feature 2", "Feature 3", "Feature 4"],
+        pricingPlanCTALabel: "Select Plan",
+        pricingPlanCTAHref: "#contact",
+    },
+    {
+        pricingPlanHeaderText: "Enterprise",
+        pricingPlanPrice: "$49.99",
+        pricingPlanFeatures: [
+            "Feature 1",
+            "Feature 2",
+            "Feature 3",
+            "Feature 4",
+            "Feature 5",
+        ],
+        pricingPlanCTALabel: "Select Plan",
+        pricingPlanCTAHref: "#contact",
+    },
+];
+/**
+ * Responsive pricing grid using PricingCard with optional motion.
+ *
+ * @remarks
+ * - Styling: exposes slot-style overrides (card, header, title, price, etc.).
+ * - Motion: enableMotion controls entrance animations and hover transitions.
+ * - Accessibility: semantic <section> with aria-label.
+ *
+ * @example
+ * <Pricing pricingPlans={[{ pricingPlanHeaderText: 'Pro', pricingPlanPrice: '$19' }]} />
+ */
+export function Pricing({ id, className, pricingPlans = defaultPricingData, pricingHeadingText = "Choose Your Plan", enableMotion = true, section = {
+    className: "pt-20 pb-5 bg-background text-foreground",
+}, container = {
+    className: "max-w-7xl mx-auto px-6",
+}, heading = {
+    className: "text-3xl font-bold font-poppins text-center text-foreground mb-8",
+}, grid = {
+    className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-8",
+}, card = {
+    className: "relative bg-card border border-border rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)] shadow-[var(--card-shadow)]",
+}, header = {
+    className: "p-6 text-center border-b border-[var(--card-border)]",
+}, title = {
+    className: "text-xl font-bold font-poppins text-card-foreground mb-2 text-[var(--card-title-fg)]",
+}, price = {
+    className: "text-3xl font-bold font-poppins text-card-foreground mb-4 text-[var(--card-title-fg)]",
+}, features = {
+    className: "p-6 space-y-3 font-inter",
+}, featureItem = {
+    className: "flex items-center text-muted-foreground text-sm text-[var(--card-muted-fg)]",
+}, cta = {
+    variant: "default",
+    size: "lg",
+    className: "w-full bg-primary hover:bg-primary/90 dark:bg-primary dark:hover:bg-primary/90 text-primary-foreground font-medium shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5 border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)]",
+}, popularBadge = {
+    className: "absolute -top-3 left-1/2 transform -translate-x-1/2 bg-primary text-primary-foreground px-4 py-1 rounded-full text-sm font-medium bg-[var(--badge-bg)] text-[var(--badge-fg)] border-[var(--badge-border)]",
+}, ariaLabel = "Pricing section", }) {
+    return (<section id={id || "pricing"} className={cn(section.className, className)} aria-label={ariaLabel}>
+      <div className={container.className}>
+        {/* Section heading */}
+        <h2 className={heading.className}>{pricingHeadingText}</h2>
+
+        {/* Pricing cards grid */}
+        <div className={grid.className}>
+          {pricingPlans.map((plan, index) => (<motion.div key={index} initial={enableMotion ? { opacity: 0, y: 12 } : { opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }} viewport={enableMotion
+                ? { once: true, amount: 0.2 }
+                : { once: true, amount: 0 }} transition={enableMotion
+                ? {
+                    type: "spring",
+                    stiffness: 125,
+                    damping: 50,
+                    mass: 1,
+                    delay: 0.12 + index * 0.06,
+                }
+                : { type: "tween", duration: 0 }} className="motion-reduce:transform-none motion-reduce:transition-none">
+              <PricingCard pricingCardTitle={plan.pricingPlanHeaderText} pricingCardPrice={plan.pricingPlanPrice} pricingCardFeatures={plan.pricingPlanFeatures} pricingCardCTALabel={plan.pricingPlanCTALabel} pricingCardCTAHref={plan.pricingPlanCTAHref} isPopular={plan.isPopular} card={{
+                className: cn(card.className, enableMotion
+                    ? "transition-all duration-200 hover:-translate-y-1 motion-reduce:transform-none motion-reduce:transition-none"
+                    : "transition-none hover:!translate-y-0 hover:shadow-none"),
+            }} header={header} title={title} price={price} features={features} featureItem={featureItem} cta={cta} popularBadge={popularBadge}/>
+            </motion.div>))}
+        </div>
+      </div>
+    </section>);
+}

package/dist/components/ProcessTimeline.d.ts

@@ -0,0 +1,121 @@
+import React from "react";
+/**
+ * Interface for individual process steps.
+ * @public
+ */
+export interface ProcessStep {
+    /** Ordinal step number starting at 1 */
+    stepNumber: number;
+    /** Short title for the step */
+    title: string;
+    /** Description of what happens in this step */
+    description: string;
+    /** Optional icon or emoji to visually represent the step */
+    icon?: string;
+}
+/**
+ * Props for configuring the ProcessTimeline component (slot-style + cn).
+ *
+ * @remarks
+ * - Styling: exposes slot-style className overrides; consumer classes merge
+ *   after defaults via cn().
+ * - Layout: renders a horizontal timeline on desktop and vertical on mobile.
+ * - Accessibility: semantic <section> with aria-label.
+ */
+export interface ProcessTimelineProps {
+    /** Optional id on root */
+    id?: string;
+    /** Root className merged into section slot */
+    className?: string;
+    /** Array of steps to render. @defaultValue a 4-step discovery-to-launch flow */
+    steps?: ProcessStep[];
+    /** Section heading text. @defaultValue "Our Process" */
+    heading?: string;
+    /** Optional subheading text */
+    subheading?: string;
+    /** Styling configuration objects */
+    section?: {
+        className?: string;
+    };
+    container?: {
+        className?: string;
+    };
+    header?: {
+        className?: string;
+    };
+    headingStyle?: {
+        className?: string;
+    };
+    subheadingStyle?: {
+        className?: string;
+    };
+    timelineContainer?: {
+        className?: string;
+    };
+    desktopTimeline?: {
+        className?: string;
+    };
+    connectingLine?: {
+        className?: string;
+    };
+    stepContainer?: {
+        className?: string;
+    };
+    stepCircle?: {
+        className?: string;
+    };
+    stepNumber?: {
+        className?: string;
+    };
+    stepIcon?: {
+        className?: string;
+    };
+    stepContent?: {
+        className?: string;
+    };
+    stepTitle?: {
+        className?: string;
+    };
+    stepDescription?: {
+        className?: string;
+    };
+    mobileTimeline?: {
+        className?: string;
+    };
+    mobileStep?: {
+        className?: string;
+    };
+    mobileVerticalLine?: {
+        className?: string;
+    };
+    mobileStepCircle?: {
+        className?: string;
+    };
+    mobileStepContent?: {
+        className?: string;
+    };
+    mobileStepIcon?: {
+        className?: string;
+    };
+    mobileStepTitle?: {
+        className?: string;
+    };
+    mobileStepDescription?: {
+        className?: string;
+    };
+    /** ARIA label for the process timeline section */
+    ariaLabel?: string;
+}
+/**
+ * Responsive timeline showing a multi-step process for your workflow.
+ *
+ * @remarks
+ * - Renders horizontally on desktop and vertically on mobile.
+ * - Slot-style className overrides are merged after defaults via cn().
+ * - Uses a semantic <section> and supports aria-label.
+ *
+ * @example
+ * <ProcessTimeline steps={[{ stepNumber: 1, title: 'Plan', description: '...' }]} />
+ */
+export declare function ProcessTimeline({ id, className, steps, heading, subheading, section, container, header, headingStyle, subheadingStyle, timelineContainer, desktopTimeline, connectingLine, stepContainer, stepCircle, stepNumber, stepIcon, stepContent, stepTitle, stepDescription, mobileTimeline, mobileStep, mobileVerticalLine, mobileStepCircle, mobileStepContent, mobileStepIcon, mobileStepTitle, mobileStepDescription, ariaLabel, }: ProcessTimelineProps): React.JSX.Element;
+//# sourceMappingURL=ProcessTimeline.d.ts.map

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

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

package/dist/components/ProcessTimeline.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@nextworks/blocks-core";
+/**
+ * Responsive timeline showing a multi-step process for your workflow.
+ *
+ * @remarks
+ * - Renders horizontally on desktop and vertically on mobile.
+ * - Slot-style className overrides are merged after defaults via cn().
+ * - Uses a semantic <section> and supports aria-label.
+ *
+ * @example
+ * <ProcessTimeline steps={[{ stepNumber: 1, title: 'Plan', description: '...' }]} />
+ */
+export function ProcessTimeline({ id, className, steps = [
+    {
+        stepNumber: 1,
+        title: "Discovery Call",
+        description: "Understanding your goals and requirements",
+        icon: "🔍",
+    },
+    {
+        stepNumber: 2,
+        title: "Strategy & Design",
+        description: "Custom mockups and project roadmap",
+        icon: "🎨",
+    },
+    {
+        stepNumber: 3,
+        title: "Development",
+        description: "Building your site with regular updates",
+        icon: "⚡",
+    },
+    {
+        stepNumber: 4,
+        title: "Launch & Support",
+        description: "Going live with ongoing maintenance",
+        icon: "🚀",
+    },
+], heading = "Our Process", subheading, section = {
+    className: "py-16 md:py-20 bg-muted",
+}, container = {
+    className: "max-w-6xl mx-auto px-5 md:px-10",
+}, header = {
+    className: "space-y-4 mb-12 md:mb-16 text-center",
+}, headingStyle = {
+    className: "text-4xl md:text-5xl font-bold font-poppins text-foreground leading-tight",
+}, subheadingStyle = {
+    className: "text-lg md:text-xl font-inter text-muted-foreground max-w-2xl mx-auto leading-relaxed",
+}, timelineContainer = {
+    className: "w-full max-w-4xl mx-auto",
+}, desktopTimeline = {
+    className: "hidden lg:flex justify-between items-start relative w-full",
+}, connectingLine = {
+    className: "absolute top-8 left-15 right-15 h-0.5 z-10 bg-[var(--process-connector)] dark:bg-[var(--process-connector)]",
+}, stepContainer = {
+    className: "flex flex-col items-center space-y-4 flex-1 max-w-48 relative z-20",
+}, stepCircle = {
+    className: "w-15 h-15 font-bold text-2xl rounded-full flex items-center justify-center shadow-lg relative z-30 bg-[var(--process-step-bg)] text-[var(--process-step-fg)] dark:bg-[var(--process-step-bg)] dark:text-[var(--process-step-fg)]",
+}, stepNumber = {
+    className: "font-bold text-2xl text-[var(--process-step-fg)] dark:text-[var(--process-step-fg)]",
+}, stepIcon = {
+    className: "text-2xl md:text-3xl mb-2",
+}, stepContent = {
+    className: "space-y-2 text-center",
+}, stepTitle = {
+    className: "text-lg md:text-xl font-semibold font-poppins text-foreground leading-tight",
+}, stepDescription = {
+    className: "text-sm md:text-base font-inter text-muted-foreground leading-relaxed",
+}, mobileTimeline = {
+    className: "flex lg:hidden flex-col space-y-8 w-full",
+}, mobileStep = {
+    className: "flex items-start relative",
+}, mobileVerticalLine = {
+    className: "absolute left-7 top-15 bottom-[-2rem] w-0.5 z-10 bg-[var(--process-connector)] dark:bg-[var(--process-connector)]",
+}, mobileStepCircle = {
+    className: "w-15 h-15 font-bold text-2xl rounded-full flex items-center justify-center shadow-lg flex-shrink-0 mr-6 z-20 bg-[var(--process-step-bg)] text-[var(--process-step-fg)] dark:bg-[var(--process-step-bg)] dark:text-[var(--process-step-fg)]",
+}, mobileStepContent = {
+    className: "flex flex-col items-start space-y-3 flex-1 pt-2",
+}, mobileStepIcon = {
+    className: "text-2xl md:text-3xl",
+}, mobileStepTitle = {
+    className: "text-lg md:text-xl font-semibold font-poppins text-foreground leading-tight",
+}, mobileStepDescription = {
+    className: "text-sm md:text-base font-inter text-muted-foreground leading-relaxed",
+}, ariaLabel = "Process timeline section", }) {
+    return (_jsx("section", { id: id, className: cn(section.className, className), "aria-label": ariaLabel, children: _jsxs("div", { className: container.className, children: [_jsxs("div", { className: header.className, children: [_jsx("h2", { className: headingStyle.className, children: heading }), subheading && (_jsx("p", { className: subheadingStyle.className, children: subheading }))] }), _jsxs("div", { className: timelineContainer.className, children: [_jsxs("div", { className: desktopTimeline.className, children: [_jsx("div", { className: connectingLine.className }), steps.map((step) => (_jsxs("div", { className: stepContainer.className, children: [_jsx("div", { className: stepCircle.className, children: _jsx("span", { className: stepNumber.className, children: step.stepNumber }) }), step.icon && (_jsx("div", { className: stepIcon.className, children: step.icon })), _jsxs("div", { className: stepContent.className, children: [_jsx("h3", { className: stepTitle.className, children: step.title }), _jsx("p", { className: stepDescription.className, children: step.description })] })] }, step.stepNumber)))] }), _jsx("div", { className: mobileTimeline.className, children: steps.map((step, index) => (_jsxs("div", { className: mobileStep.className, children: [index < steps.length - 1 && (_jsx("div", { className: mobileVerticalLine.className })), _jsx("div", { className: mobileStepCircle.className, children: _jsx("span", { className: stepNumber.className, children: step.stepNumber }) }), _jsxs("div", { className: mobileStepContent.className, children: [step.icon && (_jsx("div", { className: mobileStepIcon.className, children: step.icon })), _jsx("h3", { className: mobileStepTitle.className, children: step.title }), _jsx("p", { className: mobileStepDescription.className, children: step.description })] })] }, step.stepNumber))) })] })] }) }));
+}

package/dist/components/ProcessTimeline.jsx

@@ -0,0 +1,151 @@
+"use client";
+import React from "react";
+import { cn } from "@nextworks/blocks-core";
+/**
+ * Responsive timeline showing a multi-step process for your workflow.
+ *
+ * @remarks
+ * - Renders horizontally on desktop and vertically on mobile.
+ * - Slot-style className overrides are merged after defaults via cn().
+ * - Uses a semantic <section> and supports aria-label.
+ *
+ * @example
+ * <ProcessTimeline steps={[{ stepNumber: 1, title: 'Plan', description: '...' }]} />
+ */
+export function ProcessTimeline({ id, className, steps = [
+    {
+        stepNumber: 1,
+        title: "Discovery Call",
+        description: "Understanding your goals and requirements",
+        icon: "🔍",
+    },
+    {
+        stepNumber: 2,
+        title: "Strategy & Design",
+        description: "Custom mockups and project roadmap",
+        icon: "🎨",
+    },
+    {
+        stepNumber: 3,
+        title: "Development",
+        description: "Building your site with regular updates",
+        icon: "⚡",
+    },
+    {
+        stepNumber: 4,
+        title: "Launch & Support",
+        description: "Going live with ongoing maintenance",
+        icon: "🚀",
+    },
+], heading = "Our Process", subheading, section = {
+    className: "py-16 md:py-20 bg-muted",
+}, container = {
+    className: "max-w-6xl mx-auto px-5 md:px-10",
+}, header = {
+    className: "space-y-4 mb-12 md:mb-16 text-center",
+}, headingStyle = {
+    className: "text-4xl md:text-5xl font-bold font-poppins text-foreground leading-tight",
+}, subheadingStyle = {
+    className: "text-lg md:text-xl font-inter text-muted-foreground max-w-2xl mx-auto leading-relaxed",
+}, timelineContainer = {
+    className: "w-full max-w-4xl mx-auto",
+}, desktopTimeline = {
+    className: "hidden lg:flex justify-between items-start relative w-full",
+}, connectingLine = {
+    className: "absolute top-8 left-15 right-15 h-0.5 z-10 bg-[var(--process-connector)] dark:bg-[var(--process-connector)]",
+}, stepContainer = {
+    className: "flex flex-col items-center space-y-4 flex-1 max-w-48 relative z-20",
+}, stepCircle = {
+    className: "w-15 h-15 font-bold text-2xl rounded-full flex items-center justify-center shadow-lg relative z-30 bg-[var(--process-step-bg)] text-[var(--process-step-fg)] dark:bg-[var(--process-step-bg)] dark:text-[var(--process-step-fg)]",
+}, stepNumber = {
+    className: "font-bold text-2xl text-[var(--process-step-fg)] dark:text-[var(--process-step-fg)]",
+}, stepIcon = {
+    className: "text-2xl md:text-3xl mb-2",
+}, stepContent = {
+    className: "space-y-2 text-center",
+}, stepTitle = {
+    className: "text-lg md:text-xl font-semibold font-poppins text-foreground leading-tight",
+}, stepDescription = {
+    className: "text-sm md:text-base font-inter leading-relaxed text-[var(--description-fg)]",
+}, mobileTimeline = {
+    className: "flex lg:hidden flex-col space-y-8 w-full",
+}, mobileStep = {
+    className: "flex items-start relative",
+}, mobileVerticalLine = {
+    className: "absolute left-7 top-15 bottom-[-2rem] w-0.5 z-10 bg-[var(--process-connector)] dark:bg-[var(--process-connector)]",
+}, mobileStepCircle = {
+    className: "w-15 h-15 font-bold text-2xl rounded-full flex items-center justify-center shadow-lg flex-shrink-0 mr-6 z-20 bg-[var(--process-step-bg)] text-[var(--process-step-fg)] dark:bg-[var(--process-step-bg)] dark:text-[var(--process-step-fg)]",
+}, mobileStepContent = {
+    className: "flex flex-col items-start space-y-3 flex-1 pt-2",
+}, mobileStepIcon = {
+    className: "text-2xl md:text-3xl",
+}, mobileStepTitle = {
+    className: "text-lg md:text-xl font-semibold font-poppins text-foreground leading-tight",
+}, mobileStepDescription = {
+    className: "text-sm md:text-base font-inter leading-relaxed text-[var(--description-fg)]",
+}, ariaLabel = "Process timeline section", }) {
+    return (<section id={id} className={cn(section.className, className)} aria-label={ariaLabel}>
+      <div className={container.className}>
+        {/* Section Header */}
+        <div className={header.className}>
+          <h2 className={headingStyle.className}>{heading}</h2>
+          {subheading && (<p className={subheadingStyle.className}>{subheading}</p>)}
+        </div>
+
+        {/* Timeline Steps */}
+        <div className={timelineContainer.className}>
+          {/* Desktop: Horizontal Layout */}
+          <div className={desktopTimeline.className}>
+            {/* Connecting Line */}
+            <div className={connectingLine.className}/>
+
+            {steps.map((step) => (<div key={step.stepNumber} className={stepContainer.className}>
+                {/* Step Circle with Number */}
+                <div className={stepCircle.className}>
+                  <span className={stepNumber.className}>
+                    {step.stepNumber}
+                  </span>
+                </div>
+
+                {/* Step Icon */}
+                {step.icon && (<div className={stepIcon.className}>{step.icon}</div>)}
+
+                {/* Step Content */}
+                <div className={stepContent.className}>
+                  <h3 className={stepTitle.className}>{step.title}</h3>
+                  <p className={stepDescription.className}>
+                    {step.description}
+                  </p>
+                </div>
+              </div>))}
+          </div>
+
+          {/* Mobile: Vertical Layout */}
+          <div className={mobileTimeline.className}>
+            {steps.map((step, index) => (<div key={step.stepNumber} className={mobileStep.className}>
+                {/* Vertical Line */}
+                {index < steps.length - 1 && (<div className={mobileVerticalLine.className}/>)}
+
+                {/* Step Circle */}
+                <div className={mobileStepCircle.className}>
+                  <span className={stepNumber.className}>
+                    {step.stepNumber}
+                  </span>
+                </div>
+
+                {/* Step Content */}
+                <div className={mobileStepContent.className}>
+                  {/* Step Icon */}
+                  {step.icon && (<div className={mobileStepIcon.className}>{step.icon}</div>)}
+
+                  <h3 className={mobileStepTitle.className}>{step.title}</h3>
+                  <p className={mobileStepDescription.className}>
+                    {step.description}
+                  </p>
+                </div>
+              </div>))}
+          </div>
+        </div>
+      </div>
+    </section>);
+}

package/dist/components/ServicesGrid.d.ts

@@ -0,0 +1,64 @@
+import React from "react";
+/**
+ * Data structure representing a single service card.
+ */
+export interface ServiceCardData {
+    icon: string;
+    title: string;
+    description: string;
+}
+/**
+ * Props to configure the ServicesGrid component (upgraded slots + cn).
+ */
+export interface ServicesGridProps {
+    /** Optional id on root */
+    id?: string;
+    /** Root className merged into section slot */
+    className?: string;
+    sectionHeading?: string;
+    servicesData?: ServiceCardData[];
+    /** When false, disables entrance animations and hover transitions */
+    enableMotion?: boolean;
+    /** Styling configuration objects */
+    section?: {
+        className?: string;
+    };
+    container?: {
+        className?: string;
+    };
+    heading?: {
+        className?: string;
+    };
+    grid?: {
+        className?: string;
+    };
+    card?: {
+        className?: string;
+    };
+    cardContent?: {
+        className?: string;
+    };
+    icon?: {
+        className?: string;
+    };
+    title?: {
+        className?: string;
+    };
+    description?: {
+        className?: string;
+    };
+    /** ARIA label for the services section */
+    ariaLabel?: string;
+}
+/**
+ * Responsive services grid with subtle motion and slot-style overrides.
+ *
+ * @remarks
+ * - Motion can be disabled globally with enableMotion.
+ * - Each card uses simple emoji icons by default; replace with real icons if preferred.
+ *
+ * @example
+ * <ServicesGrid servicesData={[{ icon: '⚙️', title: 'Automation', description: '...' }]} />
+ */
+export declare function ServicesGrid({ id, className, sectionHeading, servicesData, enableMotion, section, container, heading, grid, card, cardContent, icon, title, description, ariaLabel, }: ServicesGridProps): React.JSX.Element;
+//# sourceMappingURL=ServicesGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ServicesGrid.d.ts","sourceRoot":"","sources":["../../src/components/ServicesGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,0BAA0B;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,eAAe,EAAE,CAAC;IACjC,qEAAqE;IACrE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oCAAoC;IACpC,OAAO,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,SAAS,CAAC,EAAE;QACV,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,OAAO,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,IAAI,CAAC,EAAE;QACL,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,IAAI,CAAC,EAAE;QACL,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,WAAW,CAAC,EAAE;QACZ,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,IAAI,CAAC,EAAE;QACL,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,KAAK,CAAC,EAAE;QACN,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,WAAW,CAAC,EAAE;QACZ,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA8BD;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,SAAS,EACT,cAA+B,EAC/B,YAAkC,EAClC,YAAmB,EACnB,OAEC,EACD,SAEC,EACD,OAGC,EACD,IAEC,EACD,IAGC,EACD,WAEC,EACD,IAEC,EACD,KAGC,EACD,WAGC,EACD,SAA8B,GAC/B,EAAE,iBAAiB,qBA0EnB"}

package/dist/components/ServicesGrid.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { cn } from "@nextworks/blocks-core";
+/**
+ * Default services data for digital agency
+ */
+const defaultServicesData = [
+    {
+        icon: "💻",
+        title: "Web Design & Development",
+        description: "Custom websites that capture your brand and convert visitors into customers",
+    },
+    {
+        icon: "📈",
+        title: "SEO & Digital Marketing",
+        description: "Get found on Google and drive qualified traffic to your website",
+    },
+    {
+        icon: "🛒",
+        title: "E-commerce Solutions",
+        description: "Online stores that maximize sales and customer experience",
+    },
+    {
+        icon: "🎨",
+        title: "Brand Identity & Design",
+        description: "Logo, branding, and visual identity that makes you stand out",
+    },
+];
+/**
+ * Responsive services grid with subtle motion and slot-style overrides.
+ *
+ * @remarks
+ * - Motion can be disabled globally with enableMotion.
+ * - Each card uses simple emoji icons by default; replace with real icons if preferred.
+ *
+ * @example
+ * <ServicesGrid servicesData={[{ icon: '⚙️', title: 'Automation', description: '...' }]} />
+ */
+export function ServicesGrid({ id, className, sectionHeading = "Our Services", servicesData = defaultServicesData, enableMotion = true, section = {
+    className: "py-16 md:py-20 lg:py-24 bg-muted",
+}, container = {
+    className: "max-w-6xl mx-auto px-4 md:px-6 lg:px-8",
+}, heading = {
+    className: "text-3xl md:text-4xl lg:text-5xl font-bold font-poppins text-foreground text-center mb-8 md:mb-12",
+}, grid = {
+    className: "grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 items-stretch",
+}, card = {
+    className: "bg-card/90 backdrop-blur p-6 md:p-8 rounded-lg border border-border shadow-sm hover:shadow-md transition-all duration-300 bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)] shadow-[var(--card-shadow)]",
+}, cardContent = {
+    className: "flex flex-col h-full space-y-4",
+}, icon = {
+    className: "text-4xl",
+}, title = {
+    className: "text-lg md:text-xl font-semibold font-poppins text-card-foreground leading-tight text-[var(--card-title-fg)]",
+}, description = {
+    className: "text-sm md:text-base font-inter text-muted-foreground leading-relaxed flex-1 text-[var(--card-muted-fg)]",
+}, ariaLabel = "Services section", }) {
+    return (_jsx("section", { id: id, className: cn(section.className, className), "aria-label": ariaLabel, children: _jsxs("div", { className: container.className, children: [_jsx("h2", { className: heading.className, children: sectionHeading }), _jsx("div", { className: grid.className, children: servicesData.map((service, index) => (_jsx(motion.div, { initial: enableMotion ? { opacity: 0, y: 12 } : { opacity: 1, y: 0 }, whileInView: enableMotion ? { opacity: 1, y: 0 } : { opacity: 1, y: 0 }, viewport: enableMotion
+                            ? { once: true, amount: 0.2 }
+                            : { once: true, amount: 0 }, transition: enableMotion
+                            ? {
+                                type: "spring",
+                                stiffness: 125,
+                                damping: 50,
+                                mass: 1,
+                                delay: 0.12 + index * 0.05,
+                            }
+                            : { type: "tween", duration: 0 }, className: cn("h-full motion-reduce:transform-none motion-reduce:transition-none"), children: _jsx("div", { className: cn(card.className, "flex h-full flex-col", enableMotion
+                                ? "transition-transform duration-200 hover:-translate-y-1"
+                                : "transition-none hover:!translate-y-0 hover:shadow-none"), children: _jsxs("div", { className: cardContent.className, children: [_jsx("div", { className: icon.className, role: "img", "aria-label": service.title, children: service.icon }), _jsx("h3", { className: title.className, children: service.title }), _jsx("p", { className: description.className, children: service.description })] }) }) }, index))) })] }) }));
+}