@nextworks/blocks-sections 0.1.0-alpha.8 → 0.2.0-alpha.2

package/dist/components/Navbar.js

@@ -1,80 +0,0 @@
-// components/sections/Navbar.tsx
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import Link from "next/link";
-import { Button } from "@nextworks/blocks-core";
-import { ThemeToggle } from "@nextworks/blocks-core";
-import { cn } from "@nextworks/blocks-core";
-import { Menu, X } from "lucide-react";
-const defaultMenuItems = [
-    { label: "Home", href: "#home" },
-    { label: "Features", href: "#features" },
-    { label: "Pricing", href: "#pricing" },
-    { label: "FAQ", href: "#faq" },
-    { label: "Contact", href: "#contact" },
-];
-/**
- * Responsive navbar with brand, menu links, color mode toggle, and optional CTA.
- *
- * @remarks
- * - Sticky behavior is enabled by default (sticky top-0 z-50).
- * - Mobile menu toggles with a button and traps body scroll while open.
- * - Accessibility: Focus rings are applied to interactive elements; aria
- *   attributes are set on the toggle button for state.
- *
- * @example
- * <Navbar brand="Acme" />
- */
-export function Navbar({ id, navHeight = "h-16", brand = "Brand Name", brandNode, menuItems = defaultMenuItems, ctaButton = { label: "Get Started", href: "#contact" }, showColorModeToggle = true, sticky = true, className, nav = {
-    className: "bg-background text-foreground border-b border-border",
-}, brandText = {
-    className: "text-2xl font-bold text-primary",
-}, links = {
-    className: "text-base font-normal text-foreground hover:text-gray-500 dark:hover-text-gray-400 transition-colors",
-}, ctaButtonStyle = {
-    variant: "default",
-    size: "default",
-    className: "shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
-}, mobileMenu = {
-    className: "border-t border-border",
-}, 
-/* new slot defaults */
-container = { className: "" }, brandWrapper = { className: "" }, desktopMenu = {
-    className: "hidden items-center space-x-1 lg:flex lg:space-x-6",
-}, toggleButton = {
-    className: "hover:bg-accent flex items-center justify-center rounded-md p-2 transition-colors",
-}, colorModeWrapper = { className: "ml-2" }, ctaButtonWrapper = { className: "ml-2" }, mobileMenuInner = { className: "space-y-2 px-4 pt-2 pb-4" }, mobileLinks = { className: "hover:bg-accent" }, themeToggle = {}, ariaLabel = "Main navigation", }) {
-    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-    const mobileMenuId = "navbar-mobile-menu";
-    // Measure header height for reliable max height on mobile menu
-    const headerRef = useRef(null);
-    const [headerHeightPx, setHeaderHeightPx] = useState(0);
-    useEffect(() => {
-        const update = () => { var _a, _b; return setHeaderHeightPx((_b = (_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0); };
-        update();
-        window.addEventListener("resize", update);
-        return () => window.removeEventListener("resize", update);
-    }, []);
-    // Lock body scroll when mobile menu is open
-    useEffect(() => {
-        const originalOverflow = document.body.style.overflow;
-        if (isMobileMenuOpen) {
-            document.body.style.overflow = "hidden";
-        }
-        else {
-            document.body.style.overflow = originalOverflow || "";
-        }
-        return () => {
-            document.body.style.overflow = originalOverflow || "";
-        };
-    }, [isMobileMenuOpen]);
-    return (_jsxs("nav", { id: id, className: cn("w-full", sticky && "sticky top-0 z-50", nav.className, className), "aria-label": ariaLabel, children: [_jsxs("div", { ref: headerRef, className: cn("flex items-center justify-between px-4 py-2", navHeight, container.className), children: [_jsxs("div", { className: cn("mr-2 flex items-center gap-2 pl-2", brandWrapper.className), children: [brandNode, brand && _jsx("h1", { className: cn(brandText.className), children: brand })] }), _jsx("button", { "aria-label": "Toggle mobile menu", "aria-expanded": isMobileMenuOpen, "aria-controls": mobileMenuId, className: cn("lg:hidden", toggleButton.className), 
-                        // className={cn("lg:hidden", toggleButton.className)}
-                        onClick: () => setIsMobileMenuOpen(!isMobileMenuOpen), children: isMobileMenuOpen ? (_jsx(X, { className: "h-6 w-6" })) : (_jsx(Menu, { className: "h-6 w-6" })) }), _jsxs("div", { className: cn("hidden md:flex", desktopMenu.className), children: [menuItems.map((item) => (_jsx(Link, { href: item.href, className: cn("rounded-md px-2 py-2 transition-colors duration-200 lg:px-4", "focus:ring-ring focus:ring-2 focus:ring-offset-2 focus:outline-none", "focus-visible:ring-[var(--navbar-ring)]", links.className), children: item.label }, item.label))), showColorModeToggle && (_jsx("div", { className: cn(colorModeWrapper.className), children: _jsx(ThemeToggle, Object.assign({}, themeToggle)) })), ctaButton && (_jsx(Button, { asChild: true, unstyled: ctaButtonStyle.unstyled, variant: ctaButtonStyle.variant, size: ctaButtonStyle.size, className: cn(ctaButtonWrapper.className, ctaButtonStyle.className), style: ctaButtonStyle.style, children: _jsx(Link, { href: ctaButton.href, "aria-label": ctaButton.label, children: ctaButton.label }) }))] })] }), isMobileMenuOpen && (_jsx("div", { id: mobileMenuId, className: cn("md:hidden", 
-                // "lg:hidden",
-                "overflow-y-auto overscroll-y-contain", nav.className, mobileMenu.className), style: {
-                    maxHeight: `calc(100dvh - ${headerHeightPx}px)`,
-                    WebkitOverflowScrolling: "touch",
-                }, children: _jsxs("div", { className: cn(mobileMenuInner.className), children: [menuItems.map((item) => (_jsx(Link, { href: item.href, className: cn("block w-full rounded-md px-2 py-4 text-center transition-colors duration-200", mobileLinks.className, "focus:ring-ring focus:ring-2 focus:ring-offset-2 focus:outline-none", "focus-visible:ring-[var(--navbar-ring)]", links.className), onClick: () => setIsMobileMenuOpen(false), children: item.label }, item.label))), showColorModeToggle && (_jsx("div", { className: "flex w-full justify-center pt-4", children: _jsx(ThemeToggle, Object.assign({}, themeToggle)) })), ctaButton && (_jsx("div", { className: "flex w-full justify-center pt-6", children: _jsx(Button, { asChild: true, unstyled: ctaButtonStyle.unstyled, variant: ctaButtonStyle.variant, size: ctaButtonStyle.size, className: cn("w-full max-w-xs", ctaButtonStyle.className), style: ctaButtonStyle.style, children: _jsx(Link, { href: ctaButton.href, "aria-label": ctaButton.label, children: ctaButton.label }) }) }))] }) }))] }));
-}

package/dist/components/Newsletter.js

@@ -1,34 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { cn } from "@nextworks/blocks-core";
-import { Input, Button } from "@nextworks/blocks-core";
-// Default classes used for slot merging. Consumers' slot.className will be merged after these.
-const DEFAULT_SECTION = "py-12 bg-[var(--card-bg)] text-[var(--card-fg)]";
-const DEFAULT_CONTAINER = "max-w-3xl mx-auto px-4";
-const DEFAULT_HEADER = "text-center mb-6";
-const DEFAULT_HEADING = "text-2xl font-bold font-poppins text-foreground text-[var(--heading-fg)]";
-const DEFAULT_SUBHEADING = "text-sm font-inter text-muted-foreground max-w-xl mx-auto leading-relaxed text-[var(--subheading-fg)]";
-const DEFAULT_FORM = "w-full";
-const DEFAULT_FORM_ROW = "mt-6 flex flex-col sm:flex-row items-center gap-3 justify-center";
-const DEFAULT_INPUT = "w-full sm:flex-1 p-3 rounded-md border border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)]";
-const DEFAULT_BUTTON = "w-full sm:w-auto px-5 py-3 rounded-md bg-primary hover:bg-primary/90 dark:bg-primary dark:hover:bg-primary text-primary-foreground font-medium shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 border-[var(--btn-border)] focus-visible:ring-[var(--btn-ring)]";
-/**
- * Compact newsletter/signup block.
- *
- * Usage:
- * <Newsletter section={{ className: "bg-gradient-to-r ..." }} />
- *
- * Slots exposed: section, container, header, heading, subheading, form, formRow, input, button
- */
-export function Newsletter({ id, className, headingText = "Stay in the loop", subheadingText = "Subscribe for product news, tips, and updates.", onSubmit, section, container, header, heading, subheading, form, formRow, input, button, enableMotion = true, ariaLabel = "Newsletter signup section", }) {
-    const [email, setEmail] = React.useState("");
-    const handleSubmit = (e) => {
-        e.preventDefault();
-        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(e, email);
-        // Optimistic clear; consumer can override behavior via onSubmit
-        setEmail("");
-    };
-    return (_jsx("section", { id: id, className: cn(DEFAULT_SECTION, section === null || section === void 0 ? void 0 : section.className, className), "aria-label": ariaLabel, children: _jsxs("div", { className: cn(DEFAULT_CONTAINER, container === null || container === void 0 ? void 0 : container.className), children: [_jsxs("div", { className: cn(DEFAULT_HEADER, header === null || header === void 0 ? void 0 : header.className), children: [_jsx("h2", { className: cn(DEFAULT_HEADING, heading === null || heading === void 0 ? void 0 : heading.className), children: headingText }), _jsx("p", { className: cn(DEFAULT_SUBHEADING, subheading === null || subheading === void 0 ? void 0 : subheading.className), children: subheadingText })] }), _jsx("form", { className: cn(DEFAULT_FORM, form === null || form === void 0 ? void 0 : form.className), onSubmit: handleSubmit, "aria-label": "Newsletter signup form", children: _jsxs("div", { className: cn(DEFAULT_FORM_ROW, formRow === null || formRow === void 0 ? void 0 : formRow.className), children: [_jsx(Input, { id: "newsletter-email", name: "email", type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "Your email address", required: true, "aria-label": "Email address", className: cn(DEFAULT_INPUT, input === null || input === void 0 ? void 0 : input.className) }), _jsx(Button, { type: "submit", unstyled: button === null || button === void 0 ? void 0 : button.unstyled, variant: button === null || button === void 0 ? void 0 : button.variant, size: button === null || button === void 0 ? void 0 : button.size, className: cn(DEFAULT_BUTTON, button === null || button === void 0 ? void 0 : button.className, !enableMotion &&
-                                    "transition-none hover:!translate-y-0 hover:shadow-none"), children: "Subscribe" })] }) })] }) }));
-}

package/dist/components/PortfolioSimple.js

@@ -1,180 +0,0 @@
-"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/Pricing.js

@@ -1,91 +0,0 @@
-"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))) })] }) }));
-}

package/dist/components/ProcessTimeline.js

@@ -1,88 +0,0 @@
-"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/ServicesGrid.js

@@ -1,72 +0,0 @@
-"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))) })] }) }));
-}