@nextworks/blocks-sections 0.1.0-alpha.0

package/dist/components/ServicesGrid.jsx

@@ -0,0 +1,97 @@
+"use client";
+import React from "react";
+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 leading-relaxed flex-1 text-[var(--card-muted-fg)]",
+}, ariaLabel = "Services section", }) {
+    return (<section id={id} className={cn(section.className, className)} aria-label={ariaLabel}>
+      <div className={container.className}>
+        {/* Section Heading */}
+        <h2 className={heading.className}>{sectionHeading}</h2>
+
+        {/* Services Grid */}
+        <div className={grid.className}>
+          {servicesData.map((service, index) => (<motion.div key={index} 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")}>
+              <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")}>
+                <div className={cardContent.className}>
+                  {/* Service Icon */}
+                  <div className={icon.className} role="img" aria-label={service.title}>
+                    {service.icon}
+                  </div>
+
+                  {/* Service Title */}
+                  <h3 className={title.className}>{service.title}</h3>
+
+                  {/* Service Description */}
+                  <p className={description.className}>{service.description}</p>
+                </div>
+              </div>
+            </motion.div>))}
+        </div>
+      </div>
+    </section>);
+}

package/dist/components/Team.d.ts

@@ -0,0 +1,115 @@
+import React from "react";
+/**
+ * A social link shown on a team member card.
+ * @public
+ */
+export interface SocialLink {
+    /** Platform name (e.g., "LinkedIn") */
+    platform: string;
+    /** Destination URL */
+    url: string;
+    /** Icon identifier or emoji; replace with SVGs in real usage */
+    icon: string;
+}
+/**
+ * Team member data rendered by Team.
+ * @public
+ */
+export interface TeamMemberData {
+    /** Member name */
+    name?: string;
+    /** Job role or title */
+    role?: string;
+    /** Short bio or description */
+    bio?: string;
+    /** Avatar content (emoji or image URL if swapped out) */
+    avatar?: string;
+    /** Optional social links */
+    socialLinks?: SocialLink[];
+}
+/**
+ * Props for the Team section component.
+ *
+ * @remarks
+ * - Styling: slot-style className overrides are merged after defaults via cn().
+ * - Motion: enableMotion controls hover lift on cards.
+ * - Accessibility: semantic <section> with aria-label.
+ */
+export interface TeamProps {
+    /** Optional id on root. @defaultValue "team" */
+    id?: string;
+    /** Top-level className override */
+    className?: string;
+    /** Section heading text or object. @defaultValue "Meet Our Team" */
+    teamHeadingText?: string | {
+        text?: string;
+        className?: string;
+    };
+    /** Optional subheading text or object. @defaultValue "The talented people behind your success" */
+    teamSubheadingText?: string | {
+        text?: string;
+        className?: string;
+    };
+    /** Members to render. @defaultValue DefaultTeamData */
+    teamMembers?: TeamMemberData[];
+    /** Slot-style overrides */
+    section?: {
+        className?: string;
+    };
+    container?: {
+        className?: string;
+    };
+    header?: {
+        className?: string;
+    };
+    heading?: {
+        className?: string;
+    };
+    subheading?: {
+        className?: string;
+    };
+    grid?: {
+        className?: string;
+    };
+    card?: {
+        className?: string;
+    };
+    cardContent?: {
+        className?: string;
+    };
+    avatar?: {
+        className?: string;
+    };
+    name?: {
+        className?: string;
+    };
+    role?: {
+        className?: string;
+    };
+    bio?: {
+        className?: string;
+    };
+    socialLinks?: {
+        className?: string;
+    };
+    socialLink?: {
+        className?: string;
+    };
+    /** When false, removes hover lift on cards */
+    enableMotion?: boolean;
+    /** ARIA label for the section. @defaultValue "Team section" */
+    ariaLabel?: string;
+}
+/**
+ * Team section with heading, subheading, and a responsive member grid.
+ *
+ * @remarks
+ * - Uses a slot-style API for className overrides merged via cn().
+ * - Motion: enableMotion toggles hover lift on cards.
+ * - Accessibility: semantic <section> with aria-label.
+ *
+ * @example
+ * <Team teamMembers={[{ name: 'Alex', role: 'Engineer' }]} />
+ */
+export declare function Team({ id, className, teamMembers, teamHeadingText, teamSubheadingText, section, container, header, heading, subheading, grid, card, cardContent, avatar, name, role, bio, socialLinks, socialLink, enableMotion, ariaLabel, }: TeamProps): React.JSX.Element;
+//# sourceMappingURL=Team.d.ts.map

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

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

package/dist/components/Team.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { cn } from "@nextworks/blocks-core";
+const DefaultTeamData = [
+    {
+        name: "Alex Chen",
+        role: "CEO & Founder",
+        bio: "Full-stack developer with 8+ years.",
+        avatar: "👨‍💼",
+        socialLinks: [{ platform: "LinkedIn", url: "#", icon: "💼" }],
+    },
+    {
+        name: "Sarah Martinez",
+        role: "Lead Designer",
+        bio: "UI/UX expert.",
+        avatar: "👩‍🎨",
+        socialLinks: [{ platform: "Dribbble", url: "#", icon: "🎨" }],
+    },
+    {
+        name: "Jordan Patel",
+        role: "DevOps Engineer",
+        bio: "Automates cloud infra and CI/CD pipelines.",
+        avatar: "🛠️",
+        socialLinks: [{ platform: "GitHub", url: "#", icon: "🐙" }],
+    },
+    {
+        name: "Maya Thompson",
+        role: "Product Manager",
+        bio: "Drives roadmap and aligns cross‑functional teams.",
+        avatar: "🧭",
+        socialLinks: [{ platform: "Twitter", url: "#", icon: "🐦" }],
+    },
+];
+/**
+ * Internal presentational card for a single team member.
+ * Receives already-merged className strings from the parent.
+ */
+function TeamCard({ member, card = { className: "" }, cardContent = { className: "" }, avatar = { className: "" }, name = { className: "" }, role = { className: "" }, bio = { className: "" }, socialLinks = { className: "" }, socialLink = { className: "" }, }) {
+    return (_jsx("div", { className: card.className, children: _jsxs("div", { className: cardContent.className, children: [_jsx("div", { className: avatar.className, children: member.avatar }), _jsx("h3", { className: name.className, children: member.name }), _jsx("p", { className: role.className, children: member.role }), _jsx("p", { className: bio.className, children: member.bio }), member.socialLinks && member.socialLinks.length > 0 && (_jsx("div", { className: socialLinks.className, children: member.socialLinks.map((social, index) => (_jsx(Link, { href: social.url, className: socialLink.className, title: social.platform, "aria-label": `${member.name}'s ${social.platform} profile`, children: social.icon }, index))) }))] }) }));
+}
+/**
+ * Team section with heading, subheading, and a responsive member grid.
+ *
+ * @remarks
+ * - Uses a slot-style API for className overrides merged via cn().
+ * - Motion: enableMotion toggles hover lift on cards.
+ * - Accessibility: semantic <section> with aria-label.
+ *
+ * @example
+ * <Team teamMembers={[{ name: 'Alex', role: 'Engineer' }]} />
+ */
+export function Team({ id, className, teamMembers = DefaultTeamData, teamHeadingText = "Meet Our Team", teamSubheadingText = "The talented people behind your success", section, container, header, heading, subheading, grid, card, cardContent, avatar, name, role, bio, socialLinks, socialLink, enableMotion = true, ariaLabel = "Team section", }) {
+    var _a, _b;
+    // Defaults for slots
+    const defaultSection = "py-16 px-6 bg-muted";
+    const defaultContainer = "max-w-7xl mx-auto";
+    const defaultHeader = "space-y-12 items-center";
+    const defaultHeadingClass = "text-3xl font-bold font-poppins text-foreground text-center text-[var(--heading-fg)]";
+    const defaultSubheadingClass = "text-lg font-inter text-muted-foreground opacity-80 leading-relaxed text-center max-w-2xl text-[var(--subheading-fg)]";
+    const defaultGrid = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 w-full";
+    const defaultCardBase = "bg-card p-6 rounded-lg shadow-md text-center border border-border bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)] shadow-[var(--card-shadow)]";
+    const defaultCardContent = "flex flex-col items-center space-y-4";
+    const defaultAvatar = "text-4xl mb-2";
+    const defaultName = "text-xl font-bold font-poppins text-card-foreground text-[var(--card-fg)]";
+    const defaultRole = "text-md font-semibold font-poppins text-primary";
+    const defaultBio = "text-sm font-inter text-muted-foreground opacity-80 leading-relaxed text-[var(--card-muted-fg)]";
+    const defaultSocialLinks = "flex gap-3 mt-2";
+    const defaultSocialLink = "text-lg text-primary hover:text-accent-foreground transition-colors duration-200";
+    // Motion control for card
+    const motionCard = enableMotion
+        ? "transition-transform duration-200 hover:-translate-y-1"
+        : "transition-none hover:!translate-y-0";
+    // Merge slot classes using cn (defaults first, then overrides)
+    const finalSectionClass = cn(defaultSection, section === null || section === void 0 ? void 0 : section.className, className);
+    const finalContainerClass = cn(defaultContainer, container === null || container === void 0 ? void 0 : container.className);
+    const finalHeaderClass = cn(defaultHeader, header === null || header === void 0 ? void 0 : header.className);
+    const finalGridClass = cn(defaultGrid, grid === null || grid === void 0 ? void 0 : grid.className);
+    const finalCardClass = cn(defaultCardBase, motionCard, card === null || card === void 0 ? void 0 : card.className);
+    const finalCardContentClass = cn(defaultCardContent, cardContent === null || cardContent === void 0 ? void 0 : cardContent.className);
+    const finalAvatarClass = cn(defaultAvatar, avatar === null || avatar === void 0 ? void 0 : avatar.className);
+    const finalNameClass = cn(defaultName, name === null || name === void 0 ? void 0 : name.className);
+    const finalRoleClass = cn(defaultRole, role === null || role === void 0 ? void 0 : role.className);
+    const finalBioClass = cn(defaultBio, bio === null || bio === void 0 ? void 0 : bio.className);
+    const finalSocialLinksClass = cn(defaultSocialLinks, socialLinks === null || socialLinks === void 0 ? void 0 : socialLinks.className);
+    const finalSocialLinkClass = cn(defaultSocialLink, socialLink === null || socialLink === void 0 ? void 0 : socialLink.className);
+    // Normalize heading/subheading allowing string or object, plus slot class merges
+    const normalizedHeading = typeof teamHeadingText === "string"
+        ? {
+            text: teamHeadingText,
+            className: cn(defaultHeadingClass, heading === null || heading === void 0 ? void 0 : heading.className),
+        }
+        : {
+            text: (_a = teamHeadingText === null || teamHeadingText === void 0 ? void 0 : teamHeadingText.text) !== null && _a !== void 0 ? _a : "Meet Our Team",
+            className: cn(defaultHeadingClass, teamHeadingText === null || teamHeadingText === void 0 ? void 0 : teamHeadingText.className, heading === null || heading === void 0 ? void 0 : heading.className),
+        };
+    const normalizedSubheading = typeof teamSubheadingText === "string"
+        ? {
+            text: teamSubheadingText,
+            className: cn(defaultSubheadingClass, subheading === null || subheading === void 0 ? void 0 : subheading.className),
+        }
+        : {
+            text: (_b = teamSubheadingText === null || teamSubheadingText === void 0 ? void 0 : teamSubheadingText.text) !== null && _b !== void 0 ? _b : "The talented people behind your success",
+            className: cn(defaultSubheadingClass, teamSubheadingText === null || teamSubheadingText === void 0 ? void 0 : teamSubheadingText.className, subheading === null || subheading === void 0 ? void 0 : subheading.className),
+        };
+    return (_jsx("section", { id: id || "team", className: finalSectionClass, "aria-label": ariaLabel, children: _jsx("div", { className: finalContainerClass, children: _jsxs("div", { className: finalHeaderClass, children: [_jsxs("div", { className: "mx-auto flex max-w-2xl flex-col items-center space-y-4 text-center", children: [_jsx("h2", { className: normalizedHeading.className, children: normalizedHeading.text }), _jsx("p", { className: normalizedSubheading.className, children: normalizedSubheading.text })] }), _jsx("div", { className: finalGridClass, children: teamMembers.map((member, index) => (_jsx(TeamCard, { member: member, card: { className: finalCardClass }, cardContent: { className: finalCardContentClass }, avatar: { className: finalAvatarClass }, name: { className: finalNameClass }, role: { className: finalRoleClass }, bio: { className: finalBioClass }, socialLinks: { className: finalSocialLinksClass }, socialLink: { className: finalSocialLinkClass } }, index))) })] }) }) }));
+}

package/dist/components/Team.jsx

@@ -0,0 +1,135 @@
+"use client";
+import React from "react";
+import Link from "next/link";
+import { cn } from "@nextworks/blocks-core";
+const DefaultTeamData = [
+    {
+        name: "Alex Chen",
+        role: "CEO & Founder",
+        bio: "Full-stack developer with 8+ years.",
+        avatar: "👨‍💼",
+        socialLinks: [{ platform: "LinkedIn", url: "#", icon: "💼" }],
+    },
+    {
+        name: "Sarah Martinez",
+        role: "Lead Designer",
+        bio: "UI/UX expert.",
+        avatar: "👩‍🎨",
+        socialLinks: [{ platform: "Dribbble", url: "#", icon: "🎨" }],
+    },
+    {
+        name: "Jordan Patel",
+        role: "DevOps Engineer",
+        bio: "Automates cloud infra and CI/CD pipelines.",
+        avatar: "🛠️",
+        socialLinks: [{ platform: "GitHub", url: "#", icon: "🐙" }],
+    },
+    {
+        name: "Maya Thompson",
+        role: "Product Manager",
+        bio: "Drives roadmap and aligns cross‑functional teams.",
+        avatar: "🧭",
+        socialLinks: [{ platform: "Twitter", url: "#", icon: "🐦" }],
+    },
+];
+/**
+ * Internal presentational card for a single team member.
+ * Receives already-merged className strings from the parent.
+ */
+function TeamCard({ member, card = { className: "" }, cardContent = { className: "" }, avatar = { className: "" }, name = { className: "" }, role = { className: "" }, bio = { className: "" }, socialLinks = { className: "" }, socialLink = { className: "" }, }) {
+    return (<div className={card.className}>
+      <div className={cardContent.className}>
+        <div className={avatar.className}>{member.avatar}</div>
+        <h3 className={name.className}>{member.name}</h3>
+        <p className={role.className}>{member.role}</p>
+        <p className={bio.className}>{member.bio}</p>
+        {member.socialLinks && member.socialLinks.length > 0 && (<div className={socialLinks.className}>
+            {member.socialLinks.map((social, index) => (<Link key={index} href={social.url} className={socialLink.className} title={social.platform} aria-label={`${member.name}'s ${social.platform} profile`}>
+                {social.icon}
+              </Link>))}
+          </div>)}
+      </div>
+    </div>);
+}
+/**
+ * Team section with heading, subheading, and a responsive member grid.
+ *
+ * @remarks
+ * - Uses a slot-style API for className overrides merged via cn().
+ * - Motion: enableMotion toggles hover lift on cards.
+ * - Accessibility: semantic <section> with aria-label.
+ *
+ * @example
+ * <Team teamMembers={[{ name: 'Alex', role: 'Engineer' }]} />
+ */
+export function Team({ id, className, teamMembers = DefaultTeamData, teamHeadingText = "Meet Our Team", teamSubheadingText = "The talented people behind your success", section, container, header, heading, subheading, grid, card, cardContent, avatar, name, role, bio, socialLinks, socialLink, enableMotion = true, ariaLabel = "Team section", }) {
+    var _a, _b;
+    // Defaults for slots
+    const defaultSection = "py-16 px-6 bg-muted";
+    const defaultContainer = "max-w-7xl mx-auto";
+    const defaultHeader = "space-y-12 items-center";
+    const defaultHeadingClass = "text-3xl font-bold font-poppins text-foreground text-center text-[var(--heading-fg)]";
+    const defaultSubheadingClass = "text-lg font-inter text-muted-foreground opacity-80 leading-relaxed text-center max-w-2xl text-[var(--subheading-fg)]";
+    const defaultGrid = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 w-full";
+    const defaultCardBase = "bg-card p-6 rounded-lg shadow-md text-center border border-border bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)] shadow-[var(--card-shadow)]";
+    const defaultCardContent = "flex flex-col items-center space-y-4";
+    const defaultAvatar = "text-4xl mb-2";
+    const defaultName = "text-xl font-bold font-poppins text-card-foreground text-[var(--card-fg)]";
+    const defaultRole = "text-md font-semibold font-poppins text-primary";
+    const defaultBio = "text-sm font-inter text-muted-foreground opacity-80 leading-relaxed text-[var(--card-muted-fg)]";
+    const defaultSocialLinks = "flex gap-3 mt-2";
+    const defaultSocialLink = "text-lg text-primary hover:text-accent-foreground transition-colors duration-200";
+    // Motion control for card
+    const motionCard = enableMotion
+        ? "transition-transform duration-200 hover:-translate-y-1"
+        : "transition-none hover:!translate-y-0";
+    // Merge slot classes using cn (defaults first, then overrides)
+    const finalSectionClass = cn(defaultSection, section === null || section === void 0 ? void 0 : section.className, className);
+    const finalContainerClass = cn(defaultContainer, container === null || container === void 0 ? void 0 : container.className);
+    const finalHeaderClass = cn(defaultHeader, header === null || header === void 0 ? void 0 : header.className);
+    const finalGridClass = cn(defaultGrid, grid === null || grid === void 0 ? void 0 : grid.className);
+    const finalCardClass = cn(defaultCardBase, motionCard, card === null || card === void 0 ? void 0 : card.className);
+    const finalCardContentClass = cn(defaultCardContent, cardContent === null || cardContent === void 0 ? void 0 : cardContent.className);
+    const finalAvatarClass = cn(defaultAvatar, avatar === null || avatar === void 0 ? void 0 : avatar.className);
+    const finalNameClass = cn(defaultName, name === null || name === void 0 ? void 0 : name.className);
+    const finalRoleClass = cn(defaultRole, role === null || role === void 0 ? void 0 : role.className);
+    const finalBioClass = cn(defaultBio, bio === null || bio === void 0 ? void 0 : bio.className);
+    const finalSocialLinksClass = cn(defaultSocialLinks, socialLinks === null || socialLinks === void 0 ? void 0 : socialLinks.className);
+    const finalSocialLinkClass = cn(defaultSocialLink, socialLink === null || socialLink === void 0 ? void 0 : socialLink.className);
+    // Normalize heading/subheading allowing string or object, plus slot class merges
+    const normalizedHeading = typeof teamHeadingText === "string"
+        ? {
+            text: teamHeadingText,
+            className: cn(defaultHeadingClass, heading === null || heading === void 0 ? void 0 : heading.className),
+        }
+        : {
+            text: (_a = teamHeadingText === null || teamHeadingText === void 0 ? void 0 : teamHeadingText.text) !== null && _a !== void 0 ? _a : "Meet Our Team",
+            className: cn(defaultHeadingClass, teamHeadingText === null || teamHeadingText === void 0 ? void 0 : teamHeadingText.className, heading === null || heading === void 0 ? void 0 : heading.className),
+        };
+    const normalizedSubheading = typeof teamSubheadingText === "string"
+        ? {
+            text: teamSubheadingText,
+            className: cn(defaultSubheadingClass, subheading === null || subheading === void 0 ? void 0 : subheading.className),
+        }
+        : {
+            text: (_b = teamSubheadingText === null || teamSubheadingText === void 0 ? void 0 : teamSubheadingText.text) !== null && _b !== void 0 ? _b : "The talented people behind your success",
+            className: cn(defaultSubheadingClass, teamSubheadingText === null || teamSubheadingText === void 0 ? void 0 : teamSubheadingText.className, subheading === null || subheading === void 0 ? void 0 : subheading.className),
+        };
+    return (<section id={id || "team"} className={finalSectionClass} aria-label={ariaLabel}>
+      <div className={finalContainerClass}>
+        <div className={finalHeaderClass}>
+          <div className="mx-auto flex max-w-2xl flex-col items-center space-y-4 text-center">
+            <h2 className={normalizedHeading.className}>
+              {normalizedHeading.text}
+            </h2>
+            <p className={normalizedSubheading.className}>
+              {normalizedSubheading.text}
+            </p>
+          </div>
+          <div className={finalGridClass}>
+            {teamMembers.map((member, index) => (<TeamCard key={index} member={member} card={{ className: finalCardClass }} cardContent={{ className: finalCardContentClass }} avatar={{ className: finalAvatarClass }} name={{ className: finalNameClass }} role={{ className: finalRoleClass }} bio={{ className: finalBioClass }} socialLinks={{ className: finalSocialLinksClass }} socialLink={{ className: finalSocialLinkClass }}/>))}
+          </div>
+        </div>
+      </div>
+    </section>);
+}

package/dist/components/Testimonials.d.ts

@@ -0,0 +1,81 @@
+import React from "react";
+/**
+ * Data used to render a TestimonialCard.
+ * @public
+ */
+export interface TestimonialCardData {
+    /** The testimonial quote text */
+    testimonialText: string;
+    /** The author's display name (prefixed with hyphen in defaults) */
+    testimonialAuthor: string;
+    /** Author initials displayed in the avatar */
+    testimonialAuthorInitials: string;
+}
+/**
+ * Props for the Testimonials section component.
+ *
+ * @remarks
+ * - Styling: slot-style className overrides are merged after defaults via cn().
+ * - Motion: enableMotion toggles card hover transitions.
+ * - Accessibility: semantic <section> with aria-label.
+ */
+export interface TestimonialsProps {
+    /** Optional id */
+    id?: string;
+    /** Root className merged into slots */
+    className?: string;
+    /** Testimonial items to render. @defaultValue defaultTestimonialData */
+    testimonials?: TestimonialCardData[];
+    /** Heading displayed above the grid. @defaultValue "What Our Customers Say" */
+    testimonialSectionHeader?: string;
+    /** When false, disables hover transitions on cards */
+    enableMotion?: boolean;
+    /** Slot-style overrides */
+    section?: {
+        className?: string;
+    };
+    container?: {
+        className?: string;
+    };
+    header?: {
+        className?: string;
+    };
+    heading?: {
+        className?: string;
+    };
+    grid?: {
+        className?: string;
+    };
+    card?: {
+        className?: string;
+    };
+    content?: {
+        className?: string;
+    };
+    text?: {
+        className?: string;
+    };
+    author?: {
+        className?: string;
+    };
+    avatar?: {
+        className?: string;
+    };
+    avatarText?: {
+        className?: string;
+    };
+    /** ARIA label for the section. @defaultValue "Testimonials section" */
+    ariaLabel?: string;
+}
+/**
+ * Testimonials section that renders a grid of TestimonialCard items.
+ *
+ * @remarks
+ * - Slot-style overrides match TestimonialCard sub-slots (card, content, text, etc.).
+ * - Motion can be disabled via enableMotion.
+ *
+ * @example
+ * <Testimonials testimonials={[{ testimonialText: 'Great!', testimonialAuthor: ' - Jane', testimonialAuthorInitials: 'J' }]} />
+ */
+export declare function Testimonials({ id, className, testimonials, testimonialSectionHeader, enableMotion, section, container, header, heading, grid, card, content, text, author, avatar, avatarText, ariaLabel, }: TestimonialsProps): React.JSX.Element;
+//# sourceMappingURL=Testimonials.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Testimonials.d.ts","sourceRoot":"","sources":["../../src/components/Testimonials.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,iCAAiC;IACjC,eAAe,EAAE,MAAM,CAAC;IACxB,mEAAmE;IACnE,iBAAiB,EAAE,MAAM,CAAC;IAC1B,8CAA8C;IAC9C,yBAAyB,EAAE,MAAM,CAAC;CACnC;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,kBAAkB;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,wEAAwE;IACxE,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC,+EAA+E;IAC/E,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAElC,sDAAsD;IACtD,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,2BAA2B;IAC3B,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,SAAS,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,MAAM,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,MAAM,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,MAAM,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,UAAU,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAEpC,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqBD;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,SAAS,EACT,YAAqC,EACrC,wBAAmD,EACnD,YAAmB,EACnB,OAA8C,EAC9C,SAA8C,EAC9C,MAA2C,EAC3C,OAEC,EACD,IAA4E,EAC5E,IAGC,EACD,OAAkD,EAClD,IAGC,EACD,MAGC,EACD,MAGC,EACD,UAA+D,EAC/D,SAAkC,GACnC,EAAE,iBAAiB,qBAsCnB"}

package/dist/components/Testimonials.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@nextworks/blocks-core";
+import { TestimonialCard } from "@nextworks/blocks-core";
+const defaultTestimonialData = [
+    {
+        testimonialText: "Lorem ipsum dolor sit amet! Consectetur adipiscing elit.",
+        testimonialAuthor: " - Cillum Dolore",
+        testimonialAuthorInitials: "CD",
+    },
+    {
+        testimonialText: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi!",
+        testimonialAuthor: " - Voluptate Velit",
+        testimonialAuthorInitials: "VV",
+    },
+    {
+        testimonialText: "Cillum dolore eu fugiat nulla pariatur!",
+        testimonialAuthor: " - Laboris Nisi",
+        testimonialAuthorInitials: "LN",
+    },
+];
+/**
+ * Testimonials section that renders a grid of TestimonialCard items.
+ *
+ * @remarks
+ * - Slot-style overrides match TestimonialCard sub-slots (card, content, text, etc.).
+ * - Motion can be disabled via enableMotion.
+ *
+ * @example
+ * <Testimonials testimonials={[{ testimonialText: 'Great!', testimonialAuthor: ' - Jane', testimonialAuthorInitials: 'J' }]} />
+ */
+export function Testimonials({ id, className, testimonials = defaultTestimonialData, testimonialSectionHeader = "What Our Customers Say", enableMotion = true, section = { className: "py-16 px-6 bg-muted" }, container = { className: "max-w-7xl mx-auto" }, header = { className: "text-center mb-12" }, heading = {
+    className: "text-3xl md:text-4xl font-bold font-poppins text-foreground",
+}, grid = { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" }, card = {
+    className: "bg-card/90 backdrop-blur p-6 rounded-lg shadow-md transition-transform duration-200 hover:-translate-y-1 border border-border bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)] shadow-[var(--card-shadow)]",
+}, content = { className: "flex flex-col space-y-4" }, text = {
+    className: "text-card-foreground text-base leading-relaxed italic font-inter text-[var(--card-fg)]",
+}, author = {
+    className: "text-muted-foreground text-sm font-medium font-poppins text-[var(--card-muted-fg)]",
+}, avatar = {
+    className: "w-12 h-12 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-lg font-bold bg-[var(--badge-bg)] text-[var(--badge-fg)] border-[var(--badge-border)]",
+}, avatarText = { className: "text-primary-foreground font-bold" }, ariaLabel = "Testimonials section", }) {
+    return (_jsx("section", { id: id || "testimonials", className: cn(section.className, className), "aria-label": ariaLabel, children: _jsxs("div", { className: container.className, children: [_jsx("div", { className: header.className, children: _jsx("h2", { className: heading.className, children: testimonialSectionHeader }) }), _jsx("div", { className: grid.className, children: testimonials.map((testimonial, index) => (_jsx(TestimonialCard, { testimonialText: testimonial.testimonialText, testimonialAuthor: testimonial.testimonialAuthor, testimonialAuthorInitials: testimonial.testimonialAuthorInitials, card: {
+                            className: cn(card.className, !enableMotion && "transition-none hover:!translate-y-0"),
+                        }, content: content, text: text, author: author, avatar: avatar, avatarText: avatarText }, index))) })] }) }));
+}

package/dist/components/Testimonials.jsx

@@ -0,0 +1,58 @@
+"use client";
+import React from "react";
+import { cn } from "@nextworks/blocks-core";
+import { TestimonialCard } from "@nextworks/blocks-core";
+const defaultTestimonialData = [
+    {
+        testimonialText: "Lorem ipsum dolor sit amet! Consectetur adipiscing elit.",
+        testimonialAuthor: " - Cillum Dolore",
+        testimonialAuthorInitials: "CD",
+    },
+    {
+        testimonialText: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi!",
+        testimonialAuthor: " - Voluptate Velit",
+        testimonialAuthorInitials: "VV",
+    },
+    {
+        testimonialText: "Cillum dolore eu fugiat nulla pariatur!",
+        testimonialAuthor: " - Laboris Nisi",
+        testimonialAuthorInitials: "LN",
+    },
+];
+/**
+ * Testimonials section that renders a grid of TestimonialCard items.
+ *
+ * @remarks
+ * - Slot-style overrides match TestimonialCard sub-slots (card, content, text, etc.).
+ * - Motion can be disabled via enableMotion.
+ *
+ * @example
+ * <Testimonials testimonials={[{ testimonialText: 'Great!', testimonialAuthor: ' - Jane', testimonialAuthorInitials: 'J' }]} />
+ */
+export function Testimonials({ id, className, testimonials = defaultTestimonialData, testimonialSectionHeader = "What Our Customers Say", enableMotion = true, section = { className: "py-16 px-6 bg-muted" }, container = { className: "max-w-7xl mx-auto" }, header = { className: "text-center mb-12" }, heading = {
+    className: "text-3xl md:text-4xl font-bold font-poppins text-foreground",
+}, grid = { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" }, card = {
+    className: "bg-card/90 backdrop-blur p-6 rounded-lg shadow-md transition-transform duration-200 hover:-translate-y-1 border border-border bg-[var(--card-bg)] text-[var(--card-fg)] border-[var(--card-border)] shadow-[var(--card-shadow)]",
+}, content = { className: "flex flex-col space-y-4" }, text = {
+    className: "text-card-foreground text-base leading-relaxed italic font-inter text-[var(--card-fg)]",
+}, author = {
+    className: "text-muted-foreground text-sm font-medium font-poppins text-[var(--card-muted-fg)]",
+}, avatar = {
+    className: "w-12 h-12 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-lg font-bold bg-[var(--badge-bg)] text-[var(--badge-fg)] border-[var(--badge-border)]",
+}, avatarText = { className: "text-primary-foreground font-bold" }, ariaLabel = "Testimonials section", }) {
+    return (<section id={id || "testimonials"} className={cn(section.className, className)} aria-label={ariaLabel}>
+      <div className={container.className}>
+        {/* Section Header */}
+        <div className={header.className}>
+          <h2 className={heading.className}>{testimonialSectionHeader}</h2>
+        </div>
+
+        {/* Testimonials Grid */}
+        <div className={grid.className}>
+          {testimonials.map((testimonial, index) => (<TestimonialCard key={index} testimonialText={testimonial.testimonialText} testimonialAuthor={testimonial.testimonialAuthor} testimonialAuthorInitials={testimonial.testimonialAuthorInitials} card={{
+                className: cn(card.className, !enableMotion && "transition-none hover:!translate-y-0"),
+            }} content={content} text={text} author={author} avatar={avatar} avatarText={avatarText}/>))}
+        </div>
+      </div>
+    </section>);
+}