@nextworks/blocks-sections 0.1.0-alpha.0

package/dist/components/PortfolioSimple.js

@@ -0,0 +1,180 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { motion } from "motion/react";
+import { cn } from "@nextworks/blocks-core";
+import { CTAButton } from "@nextworks/blocks-core";
+import { ExternalLink, TrendingUp } from "lucide-react";
+import Image from "next/image";
+const ProjectImage = ({ project, onClick, imageContainer = {
+    className: "relative rounded-lg overflow-hidden bg-muted shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-xl cursor-pointer aspect-[16/10]",
+}, }) => {
+    const colorClasses = {
+        blue: "bg-blue-100 dark:bg-blue-900",
+        green: "bg-green-100 dark:bg-green-900",
+        purple: "bg-purple-100 dark:bg-purple-900",
+        red: "bg-red-100 dark:bg-red-900",
+        yellow: "bg-yellow-100 dark:bg-yellow-900",
+        indigo: "bg-indigo-100 dark:bg-indigo-900",
+    };
+    const fallbackBg = colorClasses[project.color] ||
+        colorClasses.blue;
+    return (_jsx("div", { className: imageContainer.className, onClick: onClick, children: project.image ? (_jsx(Image, { src: project.image, alt: project.title, fill: true, className: "object-cover", sizes: "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" })) : (_jsx("div", { className: `flex h-full w-full items-center justify-center ${fallbackBg}`, children: _jsxs("div", { className: "p-8 text-center", children: [_jsx("div", { className: "bg-background/20 dark:bg-foreground/20 mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full", children: _jsx(ExternalLink, { className: "h-8 w-8 text-[var(--card-muted-fg)]" }) }), _jsx("h3", { className: "mb-2 text-lg font-semibold text-[var(--card-title-fg)]", children: project.title }), _jsx("p", { className: "text-sm text-[var(--card-muted-fg)]", children: project.category })] }) })) }));
+};
+const defaultProjects = [
+    {
+        id: 1,
+        title: "TechStartup Growth Campaign",
+        category: "Digital Marketing",
+        industry: "Technology",
+        result: "+300% Leads",
+        description: "Comprehensive digital marketing campaign that increased qualified leads by 300% through targeted SEO, social media marketing, and conversion optimization strategies.",
+        tags: ["SEO", "Social Media", "PPC", "Analytics"],
+        color: "blue",
+        url: "#",
+    },
+    {
+        id: 2,
+        title: "E-Commerce Brand Launch",
+        category: "Brand Marketing",
+        industry: "Retail",
+        result: "+250% Revenue",
+        description: "Complete brand launch and digital marketing strategy for a new e-commerce platform, resulting in 250% revenue growth within the first 6 months.",
+        tags: ["Brand Strategy", "Content Marketing", "Influencer", "Email"],
+        color: "green",
+        url: "#",
+    },
+    {
+        id: 3,
+        title: "Healthcare Practice Expansion",
+        category: "Local Marketing",
+        industry: "Healthcare",
+        result: "+180% Patients",
+        description: "Local SEO and digital marketing campaign that helped a healthcare practice expand to three new locations and increase patient acquisition by 180%.",
+        tags: ["Local SEO", "Google Ads", "Reputation", "Content"],
+        color: "purple",
+        url: "#",
+    },
+    {
+        id: 4,
+        title: "SaaS Product Launch",
+        category: "B2B Marketing",
+        industry: "Software",
+        result: "+400% Signups",
+        description: "Strategic B2B marketing campaign for a SaaS product launch, achieving 400% increase in trial signups through targeted content marketing and account-based marketing.",
+        tags: ["B2B Strategy", "Content", "LinkedIn Ads", "Webinars"],
+        color: "indigo",
+        url: "#",
+    },
+    {
+        id: 5,
+        title: "Restaurant Chain Rebrand",
+        category: "Brand Marketing",
+        industry: "Food & Beverage",
+        result: "+220% Foot Traffic",
+        description: "Complete rebrand and digital marketing transformation for a restaurant chain, resulting in 220% increase in foot traffic and 150% growth in online orders.",
+        tags: ["Rebranding", "Social Media", "Local SEO", "Delivery"],
+        color: "red",
+        url: "#",
+    },
+    {
+        id: 6,
+        title: "Fitness App User Acquisition",
+        category: "Mobile Marketing",
+        industry: "Health & Fitness",
+        result: "+500% Downloads",
+        description: "Mobile-first marketing campaign that achieved 500% increase in app downloads through app store optimization, influencer partnerships, and targeted social media advertising.",
+        tags: ["ASO", "Influencer", "Social Ads", "Retention"],
+        color: "yellow",
+        url: "#",
+    },
+];
+const defaultFilters = [
+    "All Projects",
+    "Digital Marketing",
+    "Brand Marketing",
+    "B2B Marketing",
+    "Local Marketing",
+    "Mobile Marketing",
+];
+/**
+ * Responsive portfolio/gallery grid with simple category filtering and CTA block.
+ *
+ * @remarks
+ * - Filtering uses exact category match; include "All Projects" to disable filtering.
+ * - Accessibility: Renders a semantic <section> with aria-label; ensure images have informative titles or alt text.
+ *
+ * @example
+ * <PortfolioSimple sectionTitle="Our Work" />
+ */
+export function PortfolioSimple({ id, className, projects = defaultProjects, filters = defaultFilters, enableMotion = true, sectionTitle = "Our Recent Work", sectionSubtitle = "Take a look at some of our successful projects that have helped businesses transform their digital presence and achieve remarkable growth.", ctaTitle = "Ready to See Your Project Here?", ctaDescription = "Let's discuss how we can help transform your business with a custom digital solution.", cta1Label = "Get Free Quote", cta1Href = "#contact", cta2Label, cta2Href, section = {
+    className: "py-16 md:py-24 bg-background",
+}, container = {
+    className: "max-w-7xl mx-auto px-6",
+}, header = {
+    className: "space-y-6 text-center mb-12",
+}, title = {
+    className: "text-3xl md:text-4xl font-bold font-poppins text-foreground text-[var(--heading-fg)]",
+}, subtitle = {
+    className: "text-xl font-inter text-muted-foreground max-w-2xl mx-auto leading-relaxed text-[var(--subheading-fg)]",
+}, filterContainer = {
+    className: "flex gap-4 flex-wrap justify-center mt-8",
+}, filterButton = {
+    className: "px-6 py-2 rounded-full transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md border-[var(--badge-border)] text-[var(--badge-fg)] bg-[var(--badge-bg)]",
+}, activeFilterButton = {
+    className: "px-6 py-2 rounded-full transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md bg-[var(--badge-active-bg)] text-[var(--badge-active-fg)] border-[var(--badge-active-border)]",
+}, grid = {
+    className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10 mt-12",
+}, projectCard = {
+    className: "group cursor-pointer transition-all duration-300",
+}, imageContainer = {
+    className: "relative rounded-lg overflow-hidden bg-muted shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-xl cursor-pointer aspect-[16/10]",
+}, projectInfo = {
+    className: "space-y-4 px-2 mt-4",
+}, projectTitle = {
+    className: "text-xl font-bold font-poppins transition-colors duration-200 text-[var(--card-title-fg)] group-hover:text-[var(--card-title-hover-fg)]",
+}, projectDescription = {
+    className: "text-base font-inter text-[var(--card-muted-fg)]",
+}, tagsContainer = {
+    className: "flex gap-2 flex-wrap",
+}, tagStyle = {
+    className: "px-2 py-1 text-xs border border-border rounded-full text-muted-foreground border-[var(--badge-border)] text-[var(--badge-fg)] bg-[var(--badge-bg)]",
+}, result = {
+    className: "font-bold text-[var(--metric-fg)] text-sm whitespace-nowrap ml-4",
+}, ctaSection = {
+    className: "space-y-6 text-center mt-16 pt-12 border-t border-border",
+}, ctaTitleStyle = {
+    className: "text-xl font-bold text-foreground text-[var(--heading-fg)]",
+}, ctaDescriptionStyle = {
+    className: "text-muted-foreground max-w-md mx-auto text-[var(--subheading-fg)]",
+}, ctaButtons = {
+    className: "flex gap-4 justify-center",
+}, cta1Button = {
+    className: "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)]",
+}, cta2Button = {
+    className: "border-primary text-primary hover:bg-primary/10 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)]",
+}, onProjectClick, onPrimaryCtaClick, onSecondaryCtaClick, ariaLabel = "Portfolio showcase section", }) {
+    const [activeFilter, setActiveFilter] = useState(filters[0] || "All Projects");
+    const filteredProjects = projects.filter((project) => activeFilter === "All Projects" || project.category === activeFilter);
+    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: title.className, children: sectionTitle }), _jsx("p", { className: subtitle.className, children: sectionSubtitle }), _jsx("div", { className: filterContainer.className, children: filters.map((filter) => (_jsx("button", { className: activeFilter === filter
+                                    ? activeFilterButton.className
+                                    : filterButton.className, onClick: () => setActiveFilter(filter), children: filter }, filter))) })] }), _jsx("div", { className: grid.className, children: filteredProjects.map((project, 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.1 + index * 0.05,
+                            }
+                            : { type: "tween", duration: 0 }, className: "motion-reduce:transform-none motion-reduce:transition-none", children: _jsx("div", { className: cn(projectCard.className, enableMotion
+                                ? "transition-all duration-200 hover:-translate-y-1"
+                                : "cursor-default transition-none hover:!translate-y-0 hover:shadow-none"), children: _jsxs("div", { className: "space-y-4", children: [_jsx(ProjectImage, { project: project, onClick: () => onProjectClick === null || onProjectClick === void 0 ? void 0 : onProjectClick(project), imageContainer: imageContainer }), _jsxs("div", { className: projectInfo.className, children: [_jsx("div", { className: "flex w-full items-start justify-between", children: _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx("h3", { className: projectTitle.className, children: project.title }), _jsx("p", { className: projectDescription.className, children: project.description })] }) }), _jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsx("div", { className: tagsContainer.className, children: project.tags.map((tag, index) => (_jsx("span", { className: tagStyle.className, children: tag }, index))) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(TrendingUp, { className: "h-4 w-4 text-[var(--metric-fg)]" }), _jsx("span", { className: result.className, children: project.result })] })] })] })] }) }) }, project.id))) }), _jsxs("div", { className: ctaSection.className, children: [_jsx("h3", { className: ctaTitleStyle.className, children: ctaTitle }), _jsx("p", { className: ctaDescriptionStyle.className, children: ctaDescription }), _jsxs("div", { className: ctaButtons.className, children: [_jsx(CTAButton, { ctaButtonLabel: cta1Label, ctaButtonHref: cta1Href, button: {
+                                        className: cta1Button.className,
+                                    }, onClick: onPrimaryCtaClick }), cta2Label && (_jsx(CTAButton, { ctaButtonLabel: cta2Label, ctaButtonHref: cta2Href, button: {
+                                        variant: "outline",
+                                        size: "lg",
+                                        className: cta2Button.className,
+                                    }, onClick: onSecondaryCtaClick }))] })] })] }) }));
+}

package/dist/components/PortfolioSimple.jsx

@@ -0,0 +1,259 @@
+"use client";
+import React, { useState } from "react";
+import { motion } from "motion/react";
+import { cn } from "@nextworks/blocks-core";
+import { CTAButton } from "@nextworks/blocks-core";
+import { ExternalLink, TrendingUp } from "lucide-react";
+import Image from "next/image";
+const ProjectImage = ({ project, onClick, imageContainer = {
+    className: "relative rounded-lg overflow-hidden bg-muted shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-xl cursor-pointer aspect-[16/10]",
+}, }) => {
+    const colorClasses = {
+        blue: "bg-blue-100 dark:bg-blue-900",
+        green: "bg-green-100 dark:bg-green-900",
+        purple: "bg-purple-100 dark:bg-purple-900",
+        red: "bg-red-100 dark:bg-red-900",
+        yellow: "bg-yellow-100 dark:bg-yellow-900",
+        indigo: "bg-indigo-100 dark:bg-indigo-900",
+    };
+    const fallbackBg = colorClasses[project.color] ||
+        colorClasses.blue;
+    return (<div className={imageContainer.className} onClick={onClick}>
+      {project.image ? (<Image src={project.image} alt={project.title} fill className="object-cover" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"/>) : (<div className={`flex h-full w-full items-center justify-center ${fallbackBg}`}>
+          <div className="p-8 text-center">
+            <div className="bg-background/20 dark:bg-foreground/20 mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full">
+              <ExternalLink className="h-8 w-8 text-[var(--card-muted-fg)]"/>
+            </div>
+            <h3 className="mb-2 text-lg font-semibold text-[var(--card-title-fg)]">
+              {project.title}
+            </h3>
+            <p className="text-sm text-[var(--card-muted-fg)]">
+              {project.category}
+            </p>
+          </div>
+        </div>)}
+    </div>);
+};
+const defaultProjects = [
+    {
+        id: 1,
+        title: "TechStartup Growth Campaign",
+        category: "Digital Marketing",
+        industry: "Technology",
+        result: "+300% Leads",
+        description: "Comprehensive digital marketing campaign that increased qualified leads by 300% through targeted SEO, social media marketing, and conversion optimization strategies.",
+        tags: ["SEO", "Social Media", "PPC", "Analytics"],
+        color: "blue",
+        url: "#",
+    },
+    {
+        id: 2,
+        title: "E-Commerce Brand Launch",
+        category: "Brand Marketing",
+        industry: "Retail",
+        result: "+250% Revenue",
+        description: "Complete brand launch and digital marketing strategy for a new e-commerce platform, resulting in 250% revenue growth within the first 6 months.",
+        tags: ["Brand Strategy", "Content Marketing", "Influencer", "Email"],
+        color: "green",
+        url: "#",
+    },
+    {
+        id: 3,
+        title: "Healthcare Practice Expansion",
+        category: "Local Marketing",
+        industry: "Healthcare",
+        result: "+180% Patients",
+        description: "Local SEO and digital marketing campaign that helped a healthcare practice expand to three new locations and increase patient acquisition by 180%.",
+        tags: ["Local SEO", "Google Ads", "Reputation", "Content"],
+        color: "purple",
+        url: "#",
+    },
+    {
+        id: 4,
+        title: "SaaS Product Launch",
+        category: "B2B Marketing",
+        industry: "Software",
+        result: "+400% Signups",
+        description: "Strategic B2B marketing campaign for a SaaS product launch, achieving 400% increase in trial signups through targeted content marketing and account-based marketing.",
+        tags: ["B2B Strategy", "Content", "LinkedIn Ads", "Webinars"],
+        color: "indigo",
+        url: "#",
+    },
+    {
+        id: 5,
+        title: "Restaurant Chain Rebrand",
+        category: "Brand Marketing",
+        industry: "Food & Beverage",
+        result: "+220% Foot Traffic",
+        description: "Complete rebrand and digital marketing transformation for a restaurant chain, resulting in 220% increase in foot traffic and 150% growth in online orders.",
+        tags: ["Rebranding", "Social Media", "Local SEO", "Delivery"],
+        color: "red",
+        url: "#",
+    },
+    {
+        id: 6,
+        title: "Fitness App User Acquisition",
+        category: "Mobile Marketing",
+        industry: "Health & Fitness",
+        result: "+500% Downloads",
+        description: "Mobile-first marketing campaign that achieved 500% increase in app downloads through app store optimization, influencer partnerships, and targeted social media advertising.",
+        tags: ["ASO", "Influencer", "Social Ads", "Retention"],
+        color: "yellow",
+        url: "#",
+    },
+];
+const defaultFilters = [
+    "All Projects",
+    "Digital Marketing",
+    "Brand Marketing",
+    "B2B Marketing",
+    "Local Marketing",
+    "Mobile Marketing",
+];
+/**
+ * Responsive portfolio/gallery grid with simple category filtering and CTA block.
+ *
+ * @remarks
+ * - Filtering uses exact category match; include "All Projects" to disable filtering.
+ * - Accessibility: Renders a semantic <section> with aria-label; ensure images have informative titles or alt text.
+ *
+ * @example
+ * <PortfolioSimple sectionTitle="Our Work" />
+ */
+export function PortfolioSimple({ id, className, projects = defaultProjects, filters = defaultFilters, enableMotion = true, sectionTitle = "Our Recent Work", sectionSubtitle = "Take a look at some of our successful projects that have helped businesses transform their digital presence and achieve remarkable growth.", ctaTitle = "Ready to See Your Project Here?", ctaDescription = "Let's discuss how we can help transform your business with a custom digital solution.", cta1Label = "Get Free Quote", cta1Href = "#contact", cta2Label, cta2Href, section = {
+    className: "py-16 md:py-24 bg-background",
+}, container = {
+    className: "max-w-7xl mx-auto px-6",
+}, header = {
+    className: "space-y-6 text-center mb-12",
+}, title = {
+    className: "text-3xl md:text-4xl font-bold font-poppins text-foreground text-[var(--heading-fg)]",
+}, subtitle = {
+    className: "text-xl font-inter text-muted-foreground max-w-2xl mx-auto leading-relaxed text-[var(--subheading-fg)]",
+}, filterContainer = {
+    className: "flex gap-4 flex-wrap justify-center mt-8",
+}, filterButton = {
+    className: "px-6 py-2 rounded-full transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md border-[var(--badge-border)] text-[var(--badge-fg)] bg-[var(--badge-bg)]",
+}, activeFilterButton = {
+    className: "px-6 py-2 rounded-full transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md bg-[var(--badge-active-bg)] text-[var(--badge-active-fg)] border-[var(--badge-active-border)]",
+}, grid = {
+    className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10 mt-12",
+}, projectCard = {
+    className: "group cursor-pointer transition-all duration-300",
+}, imageContainer = {
+    className: "relative rounded-lg overflow-hidden bg-muted shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-xl cursor-pointer aspect-[16/10]",
+}, projectInfo = {
+    className: "space-y-4 px-2 mt-4",
+}, projectTitle = {
+    className: "text-xl font-bold font-poppins transition-colors duration-200 text-[var(--card-title-fg)] group-hover:text-[var(--card-title-hover-fg)]",
+}, projectDescription = {
+    className: "text-base font-inter text-[var(--card-muted-fg)]",
+}, tagsContainer = {
+    className: "flex gap-2 flex-wrap",
+}, tagStyle = {
+    className: "px-2 py-1 text-xs border border-border rounded-full text-muted-foreground border-[var(--badge-border)] text-[var(--badge-fg)] bg-[var(--badge-bg)]",
+}, result = {
+    className: "font-bold text-[var(--metric-fg)] text-sm whitespace-nowrap ml-4",
+}, ctaSection = {
+    className: "space-y-6 text-center mt-16 pt-12 border-t border-border",
+}, ctaTitleStyle = {
+    className: "text-xl font-bold text-foreground text-[var(--heading-fg)]",
+}, ctaDescriptionStyle = {
+    className: "text-muted-foreground max-w-md mx-auto text-[var(--subheading-fg)]",
+}, ctaButtons = {
+    className: "flex gap-4 justify-center",
+}, cta1Button = {
+    className: "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)]",
+}, cta2Button = {
+    className: "border-primary text-primary hover:bg-primary/10 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)]",
+}, onProjectClick, onPrimaryCtaClick, onSecondaryCtaClick, ariaLabel = "Portfolio showcase section", }) {
+    const [activeFilter, setActiveFilter] = useState(filters[0] || "All Projects");
+    const filteredProjects = projects.filter((project) => activeFilter === "All Projects" || project.category === activeFilter);
+    return (<section id={id} className={cn(section.className, className)} aria-label={ariaLabel}>
+      <div className={container.className}>
+        {/* Section Header */}
+        <div className={header.className}>
+          <h2 className={title.className}>{sectionTitle}</h2>
+          <p className={subtitle.className}>{sectionSubtitle}</p>
+
+          {/* Filter Buttons */}
+          <div className={filterContainer.className}>
+            {filters.map((filter) => (<button key={filter} className={activeFilter === filter
+                ? activeFilterButton.className
+                : filterButton.className} onClick={() => setActiveFilter(filter)}>
+                {filter}
+              </button>))}
+          </div>
+        </div>
+
+        {/* Portfolio Grid */}
+        <div className={grid.className}>
+          {filteredProjects.map((project, index) => (<motion.div key={project.id} 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.1 + index * 0.05,
+                }
+                : { type: "tween", duration: 0 }} className="motion-reduce:transform-none motion-reduce:transition-none">
+              <div className={cn(projectCard.className, enableMotion
+                ? "transition-all duration-200 hover:-translate-y-1"
+                : "cursor-default transition-none hover:!translate-y-0 hover:shadow-none")}>
+                <div className="space-y-4">
+                  {/* Project Image */}
+                  <ProjectImage project={project} onClick={() => onProjectClick === null || onProjectClick === void 0 ? void 0 : onProjectClick(project)} imageContainer={imageContainer}/>
+
+                  {/* Project Info */}
+                  <div className={projectInfo.className}>
+                    <div className="flex w-full items-start justify-between">
+                      <div className="flex-1 space-y-2">
+                        <h3 className={projectTitle.className}>
+                          {project.title}
+                        </h3>
+                        <p className={projectDescription.className}>
+                          {project.description}
+                        </p>
+                      </div>
+                    </div>
+
+                    {/* Tags & Result */}
+                    <div className="flex w-full items-center justify-between">
+                      <div className={tagsContainer.className}>
+                        {project.tags.map((tag, index) => (<span key={index} className={tagStyle.className}>
+                            {tag}
+                          </span>))}
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <TrendingUp className="h-4 w-4 text-[var(--metric-fg)]"/>
+                        <span className={result.className}>
+                          {project.result}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </motion.div>))}
+        </div>
+
+        {/* CTA Section */}
+        <div className={ctaSection.className}>
+          <h3 className={ctaTitleStyle.className}>{ctaTitle}</h3>
+          <p className={ctaDescriptionStyle.className}>{ctaDescription}</p>
+          <div className={ctaButtons.className}>
+            <CTAButton ctaButtonLabel={cta1Label} ctaButtonHref={cta1Href} button={{
+            className: cta1Button.className,
+        }} onClick={onPrimaryCtaClick}/>
+            {cta2Label && (<CTAButton ctaButtonLabel={cta2Label} ctaButtonHref={cta2Href} button={{
+                variant: "outline",
+                size: "lg",
+                className: cta2Button.className,
+            }} onClick={onSecondaryCtaClick}/>)}
+          </div>
+        </div>
+      </div>
+    </section>);
+}

package/dist/components/Pricing.d.ts

@@ -0,0 +1,96 @@
+import React from "react";
+/**
+ * Represents individual pricing plan data.
+ * @public
+ */
+export interface PricingData {
+    /** Title of the plan (e.g., "Pro") */
+    pricingPlanHeaderText?: string;
+    /** Display price (e.g., "$19.99") */
+    pricingPlanPrice?: string;
+    /** Feature list bullets */
+    pricingPlanFeatures?: string[];
+    /** CTA button label */
+    pricingPlanCTALabel?: string;
+    /** CTA button href */
+    pricingPlanCTAHref?: string;
+    /** Whether this plan should be highlighted */
+    isPopular?: boolean;
+}
+/**
+ * Props for the Pricing section component.
+ *
+ * @remarks
+ * - Styling: slot-style className overrides are merged after defaults via cn().
+ * - Motion: enableMotion toggles entrance animations and hover transitions.
+ * - Accessibility: uses a semantic <section> with an aria-label.
+ */
+interface PricingProps {
+    /** Optional id on root. @defaultValue "pricing" */
+    id?: string;
+    /** Merge-in class for root */
+    className?: string;
+    /** Heading text displayed at the top of the pricing section. @defaultValue "Choose Your Plan" */
+    pricingHeadingText?: string;
+    /** Array of individual pricing plans to display. @defaultValue defaultPricingData */
+    pricingPlans?: PricingData[];
+    /** 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;
+    };
+    header?: {
+        className?: string;
+    };
+    title?: {
+        className?: string;
+    };
+    price?: {
+        className?: string;
+    };
+    features?: {
+        className?: string;
+    };
+    featureItem?: {
+        className?: string;
+    };
+    cta?: {
+        unstyled?: boolean;
+        style?: React.CSSProperties;
+        variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+        size?: "default" | "sm" | "lg" | "icon";
+        className?: string;
+    };
+    popularBadge?: {
+        className?: string;
+    };
+    /** ARIA label for the pricing section */
+    ariaLabel?: string;
+}
+/**
+ * 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 declare function Pricing({ id, className, pricingPlans, pricingHeadingText, enableMotion, section, container, heading, grid, card, header, title, price, features, featureItem, cta, popularBadge, ariaLabel, }: PricingProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Pricing.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pricing.d.ts","sourceRoot":"","sources":["../../src/components/Pricing.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B,sCAAsC;IACtC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qCAAqC;IACrC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2BAA2B;IAC3B,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,uBAAuB;IACvB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,sBAAsB;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;GAOG;AACH,UAAU,YAAY;IACpB,mDAAmD;IACnD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,iGAAiG;IACjG,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qFAAqF;IACrF,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAE7B,qEAAqE;IACrE,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,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,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,KAAK,CAAC,EAAE;QACN,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,KAAK,CAAC,EAAE;QACN,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,QAAQ,CAAC,EAAE;QACT,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,WAAW,CAAC,EAAE;QACZ,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,GAAG,CAAC,EAAE;QACJ,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC5B,OAAO,CAAC,EACJ,SAAS,GACT,aAAa,GACb,SAAS,GACT,WAAW,GACX,OAAO,GACP,MAAM,CAAC;QACX,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;QACxC,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,YAAY,CAAC,EAAE;QACb,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IAEF,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmCD;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,EACtB,EAAE,EACF,SAAS,EACT,YAAiC,EACjC,kBAAuC,EACvC,YAAmB,EACnB,OAEC,EACD,SAEC,EACD,OAGC,EACD,IAEC,EACD,IAGC,EACD,MAEC,EACD,KAGC,EACD,KAGC,EACD,QAEC,EACD,WAGC,EACD,GAKC,EACD,YAGC,EACD,SAA6B,GAC9B,EAAE,YAAY,qBAmEd"}

package/dist/components/Pricing.js

@@ -0,0 +1,91 @@
+"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 { 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 (_jsx("section", { id: id || "pricing", className: cn(section.className, className), "aria-label": ariaLabel, children: _jsxs("div", { className: container.className, children: [_jsx("h2", { className: heading.className, children: pricingHeadingText }), _jsx("div", { className: grid.className, children: pricingPlans.map((plan, index) => (_jsx(motion.div, { 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", children: _jsx(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 }) }, index))) })] }) }));
+}