@nextworks/blocks-sections 0.1.0-alpha.0

package/dist/components/TrustBadges.d.ts

@@ -0,0 +1,80 @@
+import React from "react";
+/**
+ * A single trust badge (stat or certification).
+ * @public
+ */
+export interface TrustBadgeData {
+    /** Main badge text (e.g., "99.9% Uptime") */
+    badgeText: string;
+    /** Optional short descriptor above/below the text */
+    badgeDescription?: string;
+    /** Optional icon/emoji representation */
+    badgeIcon?: string;
+}
+/**
+ * Props for the TrustBadges section component.
+ *
+ * @remarks
+ * - Layout: choose horizontal row or vertical stack via layout.
+ * - Styling: slot-style overrides are merged after defaults via cn().
+ * - Motion: enableMotion toggles hover scale.
+ */
+export interface TrustBadgesProps {
+    /** Optional id on root. @defaultValue "trust-badges" */
+    id?: string;
+    /** Root className merged into section slot */
+    className?: string;
+    /** Badges to display. @defaultValue defaultTrustBadgeData */
+    badges?: TrustBadgeData[];
+    /** Optional heading above badges */
+    trustBadgesSectionHeader?: string;
+    /** Slot-style overrides */
+    section?: {
+        className?: string;
+    };
+    container?: {
+        className?: string;
+    };
+    header?: {
+        className?: string;
+    };
+    heading?: {
+        className?: string;
+    };
+    badgesContainer?: {
+        className?: string;
+    };
+    badge?: {
+        className?: string;
+    };
+    badgeContent?: {
+        className?: string;
+    };
+    icon?: {
+        className?: string;
+    };
+    description?: {
+        className?: string;
+    };
+    text?: {
+        className?: string;
+    };
+    /** Layout orientation. @defaultValue "horizontal" */
+    layout?: "horizontal" | "vertical";
+    /** When false, disables hover scale */
+    enableMotion?: boolean;
+    /** ARIA label for the section. @defaultValue "Trust badges section" */
+    ariaLabel?: string;
+}
+/**
+ * Compact section to showcase trust signals like usage stats and compliance.
+ *
+ * @remarks
+ * - Horizontal by default; switch to vertical with layout="vertical".
+ * - Hover motion can be disabled via enableMotion.
+ *
+ * @example
+ * <TrustBadges badges={[{ badgeText: 'SOC 2', badgeDescription: 'Security', badgeIcon: '🔒' }]} />
+ */
+export declare function TrustBadges({ id, className, badges, trustBadgesSectionHeader, section, container, header, heading, badgesContainer, badge, badgeContent, icon, description, text, layout, enableMotion, ariaLabel, }: TrustBadgesProps): React.JSX.Element;
+//# sourceMappingURL=TrustBadges.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TrustBadges.d.ts","sourceRoot":"","sources":["../../src/components/TrustBadges.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,6CAA6C;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,gBAAgB;IAC/B,wDAAwD;IACxD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,cAAc,EAAE,CAAC;IAC1B,oCAAoC;IACpC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAElC,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,eAAe,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,KAAK,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/B,YAAY,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,WAAW,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACrC,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAE9B,qDAAqD;IACrD,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACnC,uCAAuC;IACvC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoBD;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,SAAS,EACT,MAA8B,EAC9B,wBAAwB,EACxB,OAA6C,EAC7C,SAA8C,EAC9C,MAA0C,EAC1C,OAEC,EACD,eAGC,EACD,KAGC,EACD,YAAoE,EACpE,IAAqC,EACrC,WAGC,EACD,IAEC,EACD,MAAqB,EACrB,YAAmB,EACnB,SAAkC,GACnC,EAAE,gBAAgB,qBA6ClB"}

package/dist/components/TrustBadges.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@nextworks/blocks-core";
+const defaultTrustBadgeData = [
+    {
+        badgeText: "10,000+ businesses",
+        badgeDescription: "Trusted by",
+        badgeIcon: "📊",
+    },
+    {
+        badgeText: "SOC 2 Compliant",
+        badgeDescription: "Enterprise security",
+        badgeIcon: "🔒",
+    },
+    {
+        badgeText: "99.9% Uptime",
+        badgeDescription: "Reliable service",
+        badgeIcon: "⚡",
+    },
+];
+/**
+ * Compact section to showcase trust signals like usage stats and compliance.
+ *
+ * @remarks
+ * - Horizontal by default; switch to vertical with layout="vertical".
+ * - Hover motion can be disabled via enableMotion.
+ *
+ * @example
+ * <TrustBadges badges={[{ badgeText: 'SOC 2', badgeDescription: 'Security', badgeIcon: '🔒' }]} />
+ */
+export function TrustBadges({ id, className, badges = defaultTrustBadgeData, trustBadgesSectionHeader, section = { className: "py-8 px-6 bg-muted" }, container = { className: "max-w-7xl mx-auto" }, header = { className: "text-center mb-6" }, heading = {
+    className: "text-xl font-semibold text-foreground text-[var(--heading-fg)]",
+}, badgesContainer = {
+    className: "flex flex-col md:flex-row justify-center items-center gap-8 flex-wrap",
+}, badge = {
+    className: "flex flex-col items-center text-center min-w-[200px] transition-all duration-300 ease-in-out hover:scale-[1.02]",
+}, badgeContent = { className: "flex flex-col items-center space-y-2" }, icon = { className: "text-2xl mb-2" }, description = {
+    className: "text-sm font-medium text-muted-foreground text-[var(--card-muted-fg)]",
+}, text = {
+    className: "text-lg font-bold text-foreground text-[var(--card-fg)]",
+}, layout = "horizontal", enableMotion = true, ariaLabel = "Trust badges section", }) {
+    const containerClasses = layout === "vertical"
+        ? "flex flex-col justify-center items-center gap-8"
+        : badgesContainer.className;
+    return (_jsx("section", { id: id || "trust-badges", className: cn(section.className, className), "aria-label": ariaLabel, children: _jsxs("div", { className: container.className, children: [trustBadgesSectionHeader && (_jsx("div", { className: header.className, children: _jsx("h2", { className: heading.className, children: trustBadgesSectionHeader }) })), _jsx("div", { className: containerClasses, children: badges.map((badgeData, index) => (_jsx("div", { className: cn(badge.className, !enableMotion && "transition-none hover:!scale-100"), children: _jsxs("div", { className: badgeContent.className, children: [badgeData.badgeIcon && (_jsx("div", { className: icon.className, children: badgeData.badgeIcon })), badgeData.badgeDescription && (_jsx("p", { className: description.className, children: badgeData.badgeDescription })), _jsx("p", { className: text.className, children: badgeData.badgeText })] }) }, index))) })] }) }));
+}

package/dist/components/TrustBadges.jsx

@@ -0,0 +1,64 @@
+"use client";
+import React from "react";
+import { cn } from "@nextworks/blocks-core";
+const defaultTrustBadgeData = [
+    {
+        badgeText: "10,000+ businesses",
+        badgeDescription: "Trusted by",
+        badgeIcon: "📊",
+    },
+    {
+        badgeText: "SOC 2 Compliant",
+        badgeDescription: "Enterprise security",
+        badgeIcon: "🔒",
+    },
+    {
+        badgeText: "99.9% Uptime",
+        badgeDescription: "Reliable service",
+        badgeIcon: "⚡",
+    },
+];
+/**
+ * Compact section to showcase trust signals like usage stats and compliance.
+ *
+ * @remarks
+ * - Horizontal by default; switch to vertical with layout="vertical".
+ * - Hover motion can be disabled via enableMotion.
+ *
+ * @example
+ * <TrustBadges badges={[{ badgeText: 'SOC 2', badgeDescription: 'Security', badgeIcon: '🔒' }]} />
+ */
+export function TrustBadges({ id, className, badges = defaultTrustBadgeData, trustBadgesSectionHeader, section = { className: "py-8 px-6 bg-muted" }, container = { className: "max-w-7xl mx-auto" }, header = { className: "text-center mb-6" }, heading = {
+    className: "text-xl font-semibold text-foreground text-[var(--heading-fg)]",
+}, badgesContainer = {
+    className: "flex flex-col md:flex-row justify-center items-center gap-8 flex-wrap",
+}, badge = {
+    className: "flex flex-col items-center text-center min-w-[200px] transition-all duration-300 ease-in-out hover:scale-[1.02]",
+}, badgeContent = { className: "flex flex-col items-center space-y-2" }, icon = { className: "text-2xl mb-2" }, description = {
+    className: "text-sm font-medium text-muted-foreground text-[var(--card-muted-fg)]",
+}, text = {
+    className: "text-lg font-bold text-foreground text-[var(--card-fg)]",
+}, layout = "horizontal", enableMotion = true, ariaLabel = "Trust badges section", }) {
+    const containerClasses = layout === "vertical"
+        ? "flex flex-col justify-center items-center gap-8"
+        : badgesContainer.className;
+    return (<section id={id || "trust-badges"} className={cn(section.className, className)} aria-label={ariaLabel}>
+      <div className={container.className}>
+        {trustBadgesSectionHeader && (<div className={header.className}>
+            <h2 className={heading.className}>{trustBadgesSectionHeader}</h2>
+          </div>)}
+
+        <div className={containerClasses}>
+          {badges.map((badgeData, index) => (<div key={index} className={cn(badge.className, !enableMotion && "transition-none hover:!scale-100")}>
+              <div className={badgeContent.className}>
+                {badgeData.badgeIcon && (<div className={icon.className}>{badgeData.badgeIcon}</div>)}
+                {badgeData.badgeDescription && (<p className={description.className}>
+                    {badgeData.badgeDescription}
+                  </p>)}
+                <p className={text.className}>{badgeData.badgeText}</p>
+              </div>
+            </div>))}
+        </div>
+      </div>
+    </section>);
+}

package/dist/components/index.d.ts

@@ -0,0 +1,21 @@
+export type { AboutStatData } from "./About";
+export { About } from "./About";
+export * from "./Contact";
+export * from "./CTA";
+export * from "./FAQ";
+export * from "./Features";
+export type { FooterProps, NavLinkItem, NavLinkGroup, SocialLink, } from "./Footer";
+export { Footer } from "./Footer";
+export * from "./HeroMotion";
+export * from "./HeroOverlay";
+export * from "./HeroSplit";
+export * from "./Navbar";
+export * from "./Newsletter";
+export * from "./PortfolioSimple";
+export * from "./Pricing";
+export * from "./ProcessTimeline";
+export * from "./ServicesGrid";
+export * from "./Team";
+export * from "./Testimonials";
+export * from "./TrustBadges";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,YAAY,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,UAAU,GACX,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC"}

package/dist/components/index.js

@@ -0,0 +1,18 @@
+export { About } from "./About";
+export * from "./Contact";
+export * from "./CTA";
+export * from "./FAQ";
+export * from "./Features";
+export { Footer } from "./Footer";
+export * from "./HeroMotion";
+export * from "./HeroOverlay";
+export * from "./HeroSplit";
+export * from "./Navbar";
+export * from "./Newsletter";
+export * from "./PortfolioSimple";
+export * from "./Pricing";
+export * from "./ProcessTimeline";
+export * from "./ServicesGrid";
+export * from "./Team";
+export * from "./Testimonials";
+export * from "./TrustBadges";

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./components";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export * from "./components";

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@nextworks/blocks-sections",
+  "version": "0.1.0-alpha.0",
+  "private": false,
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "package.json",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  },
+  "dependencies": {
+    "@nextworks/blocks-core": "0.1.0-alpha.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "next": "^15.0.0 || ^16.0.0"
+  }
+}