@affinda/react 0.0.13 → 0.0.14

package/README.md

@@ -80,23 +80,121 @@ import { Button, Heading, TypographyLockup } from '@affinda/react';
 
 ### Available Components
 
-- **Button** / AfButton - Primary buttons with variants and icons
-- **ButtonGroup** / AfButtonGroup - Group multiple buttons together
-- **IconButton** / AfIconButton - Icon-only buttons
-- **Heading** / AfHeading - Typography headings (H1-H6)
-- **Text** / AfText - Body text components
-- **TypographyLockup** / AfTypographyLockup - Composite heading + text + button layouts
+**Layout & Structure:**
+- **HeroSection** / AfHeroSection - Hero sections for marketing pages
+- **Section** / AfSection - Page sections with consistent spacing
 - **Container** / AfContainer - Layout containers with max-width
 - **AspectRatio** / AfAspectRatio - Maintain aspect ratios for media
-- **Card** / AfCard - Content cards with optional borders and shadows
-- **ColorSwatch** / AfColorSwatch - Display color swatches
-- **Logo** / AfLogo - Affinda logo component
-- **Navbar** / AfNavbar - Navigation bar
+
+**Navigation:**
+- **Navbar** / AfNavbar - Navigation bar with mobile hamburger menu
 - **NavItem** / AfNavItem - Navigation items
+
+**Typography:**
+- **Heading** / AfHeading - Typography headings (H1-H6) with theme support
+- **Text** / AfText - Body text components with theme support
+- **TypographyLockup** / AfTypographyLockup - Composite heading + text + button layouts
+
+**Buttons:**
+- **Button** / AfButton - Primary buttons with variants, icons, and dark background support
+- **ButtonGroup** / AfButtonGroup - Group multiple buttons together
+- **IconButton** / AfIconButton - Icon-only buttons
+
+**Cards & Content:**
+- **Card** / AfCard - Content cards with optional backgrounds and photo variants
+- **ColorSwatch** / AfColorSwatch - Display color swatches
+
+**Social Proof:**
+- **ClientCarousel** / AfClientCarousel - Infinite scrolling carousel for client logos
+- **LogoWell** / AfLogoWell - Rounded container for client logos
 - **Testimonial** / AfTestimonial - Customer testimonials with background images, stats, and quotes
 - **TestimonialCarousel** / AfTestimonialCarousel - Carousel for sliding between multiple testimonials
 - **TestimonialStat** / AfTestimonialStat - Individual statistics within testimonials
 
+**Brand:**
+- **Logo** / AfLogo - Affinda logo component
+
+**Decorative:**
+- **PaperclipDecoration** - Decorative paperclip vector for hero sections
+
+## Quick Start Components
+
+### HeroSection
+
+The hero section component makes it easy to create marketing page heroes with consistent styling.
+
+```tsx
+import { HeroSection, Heading, Text, Button, PaperclipDecoration } from '@affinda/react';
+
+<HeroSection variant="dark" withDecoration={true} minHeight="60vh">
+  <PaperclipDecoration slot="decoration" />
+  <Heading level="1" theme="dark" align="center">
+    Harness AI to transform business processes
+  </Heading>
+  <Text variant="large" theme="dark" align="center">
+    Around the world, leading enterprises use Affinda's AI agents...
+  </Text>
+  <div style={{ display: 'flex', gap: '12px', justifyContent: 'center', marginTop: '2rem' }}>
+    <Button variant="primary">Discover the platform</Button>
+    <Button variant="secondary">Explore solutions</Button>
+  </div>
+</HeroSection>
+```
+
+**Props:**
+- `variant`: `"light"` | `"dark"` (default: `"dark"`)
+- `withDecoration`: boolean - Shows decoration slot
+- `minHeight`: string - CSS min-height value
+
+**Features:**
+- Automatically applies correct text colors for dark backgrounds
+- Built-in padding that accounts for floating navbar
+- Responsive on mobile
+
+### Section
+
+The section component provides consistent spacing and backgrounds for page sections.
+
+```tsx
+import { Section, Heading, Text } from '@affinda/react';
+
+<Section padding="default" background="level1" container={true}>
+  <Heading level="2" align="center">Work smarter, grow faster</Heading>
+  <Text variant="large" align="center">Feature content here...</Text>
+</Section>
+```
+
+**Props:**
+- `padding`: `"tight"` (48px) | `"default"` (96px) | `"loose"` (120px)
+- `background`: `"white"` | `"level1"` | `"dark"` | `"inkwell"`
+- `container`: boolean - Auto-wraps content in Container
+
+### Card with Photo Background
+
+Cards now support photo backgrounds with gradient overlays.
+
+```tsx
+import { Card, Heading, Text } from '@affinda/react';
+
+// Light background card
+<Card backgroundColor="var(--colour-background-level1)">
+  <Heading level="3">Automate any document with 99%+ accuracy</Heading>
+  <Text variant="large">Extract any information...</Text>
+  <img src="screenshot.webp" alt="Feature" />
+</Card>
+
+// Photo background card with dark overlay
+<Card backgroundImage="photo.jpg" darkOverlay={true}>
+  <Heading level="3">Build models in minutes</Heading>
+  <Text variant="large">Affinda is the only AI platform...</Text>
+</Card>
+```
+
+**Props:**
+- `backgroundColor`: CSS color or variable
+- `backgroundImage`: URL to background image
+- `darkOverlay`: boolean - Applies gradient overlay with white text
+
 ## Component Guide
 
 ### When to Use Each Component

package/dist/components/PaperclipDecoration.d.ts

@@ -0,0 +1,8 @@
+export interface PaperclipDecorationProps {
+    className?: string;
+    style?: Record<string, any>;
+}
+/**
+ * Decorative paperclip vector graphic for hero sections
+ */
+export declare function PaperclipDecoration({ className, style }: PaperclipDecorationProps): any;

package/dist/components/PaperclipDecoration.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
+import * as React from 'react';
+/**
+ * Decorative paperclip vector graphic for hero sections
+ */
+export function PaperclipDecoration({ className, style }) {
+    const svgStyle = Object.assign({ display: 'block' }, style || {});
+    return (_jsx("svg", { preserveAspectRatio: "none", width: "100%", height: "100%", style: svgStyle, viewBox: "0 0 1212 753", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "aria-hidden": true, children: _jsx("path", { d: "M1102.14 107.875C1031.8 37.1138 939.128 -1.47247 840.61 0.0430067H358.674L262.104 156.72H841.87C842.558 156.72 843.36 156.72 844.047 156.72C900.638 156.72 953.791 178.869 994 219.32C1035.24 260.821 1058.04 316.311 1058.04 375.647C1058.04 497.468 960.665 596.44 841.068 596.44H251.335C197.609 596.44 153.848 551.908 153.848 497.235C153.848 442.561 197.723 397.33 251.221 395.698H779.208L878.872 239.021H248.586C111.577 242.519 0 358.277 0 497.235C0 636.192 112.723 753 251.335 753H841.068C1045.55 753 1212 583.617 1212 375.531C1212 273.994 1173.05 178.985 1102.26 107.758L1102.14 107.875Z", fill: "white", fillOpacity: 0.06 }) }));
+}

package/dist/generated/components.d.ts

@@ -6,13 +6,17 @@ import { AfAspectRatio as AfAspectRatioElement } from "@affinda/wc/dist/componen
 import { AfButtonGroup as AfButtonGroupElement } from "@affinda/wc/dist/components/af-button-group.js";
 import { AfButton as AfButtonElement } from "@affinda/wc/dist/components/af-button.js";
 import { AfCard as AfCardElement } from "@affinda/wc/dist/components/af-card.js";
+import { AfClientCarousel as AfClientCarouselElement } from "@affinda/wc/dist/components/af-client-carousel.js";
 import { AfColorSwatch as AfColorSwatchElement } from "@affinda/wc/dist/components/af-color-swatch.js";
 import { AfContainer as AfContainerElement } from "@affinda/wc/dist/components/af-container.js";
 import { AfHeading as AfHeadingElement } from "@affinda/wc/dist/components/af-heading.js";
+import { AfHeroSection as AfHeroSectionElement } from "@affinda/wc/dist/components/af-hero-section.js";
 import { AfIconButton as AfIconButtonElement } from "@affinda/wc/dist/components/af-icon-button.js";
+import { AfLogoWell as AfLogoWellElement } from "@affinda/wc/dist/components/af-logo-well.js";
 import { AfLogo as AfLogoElement } from "@affinda/wc/dist/components/af-logo.js";
 import { AfNavItem as AfNavItemElement } from "@affinda/wc/dist/components/af-nav-item.js";
 import { AfNavbar as AfNavbarElement } from "@affinda/wc/dist/components/af-navbar.js";
+import { AfSection as AfSectionElement } from "@affinda/wc/dist/components/af-section.js";
 import { AfTestimonialCarousel as AfTestimonialCarouselElement } from "@affinda/wc/dist/components/af-testimonial-carousel.js";
 import { AfTestimonialStat as AfTestimonialStatElement } from "@affinda/wc/dist/components/af-testimonial-stat.js";
 import { AfTestimonial as AfTestimonialElement } from "@affinda/wc/dist/components/af-testimonial.js";
@@ -27,20 +31,28 @@ export type AfButtonGroupEvents = NonNullable<unknown>;
 export declare const AfButtonGroup: StencilReactComponent<AfButtonGroupElement, AfButtonGroupEvents>;
 export type AfCardEvents = NonNullable<unknown>;
 export declare const AfCard: StencilReactComponent<AfCardElement, AfCardEvents>;
+export type AfClientCarouselEvents = NonNullable<unknown>;
+export declare const AfClientCarousel: StencilReactComponent<AfClientCarouselElement, AfClientCarouselEvents>;
 export type AfColorSwatchEvents = NonNullable<unknown>;
 export declare const AfColorSwatch: StencilReactComponent<AfColorSwatchElement, AfColorSwatchEvents>;
 export type AfContainerEvents = NonNullable<unknown>;
 export declare const AfContainer: StencilReactComponent<AfContainerElement, AfContainerEvents>;
 export type AfHeadingEvents = NonNullable<unknown>;
 export declare const AfHeading: StencilReactComponent<AfHeadingElement, AfHeadingEvents>;
+export type AfHeroSectionEvents = NonNullable<unknown>;
+export declare const AfHeroSection: StencilReactComponent<AfHeroSectionElement, AfHeroSectionEvents>;
 export type AfIconButtonEvents = NonNullable<unknown>;
 export declare const AfIconButton: StencilReactComponent<AfIconButtonElement, AfIconButtonEvents>;
 export type AfLogoEvents = NonNullable<unknown>;
 export declare const AfLogo: StencilReactComponent<AfLogoElement, AfLogoEvents>;
+export type AfLogoWellEvents = NonNullable<unknown>;
+export declare const AfLogoWell: StencilReactComponent<AfLogoWellElement, AfLogoWellEvents>;
 export type AfNavItemEvents = NonNullable<unknown>;
 export declare const AfNavItem: StencilReactComponent<AfNavItemElement, AfNavItemEvents>;
 export type AfNavbarEvents = NonNullable<unknown>;
 export declare const AfNavbar: StencilReactComponent<AfNavbarElement, AfNavbarEvents>;
+export type AfSectionEvents = NonNullable<unknown>;
+export declare const AfSection: StencilReactComponent<AfSectionElement, AfSectionEvents>;
 export type AfTestimonialEvents = NonNullable<unknown>;
 export declare const AfTestimonial: StencilReactComponent<AfTestimonialElement, AfTestimonialEvents>;
 export type AfTestimonialCarouselEvents = NonNullable<unknown>;

package/dist/generated/components.js

@@ -8,13 +8,17 @@ import { AfAspectRatio as AfAspectRatioElement, defineCustomElement as defineAfA
 import { AfButtonGroup as AfButtonGroupElement, defineCustomElement as defineAfButtonGroup } from "@affinda/wc/dist/components/af-button-group.js";
 import { AfButton as AfButtonElement, defineCustomElement as defineAfButton } from "@affinda/wc/dist/components/af-button.js";
 import { AfCard as AfCardElement, defineCustomElement as defineAfCard } from "@affinda/wc/dist/components/af-card.js";
+import { AfClientCarousel as AfClientCarouselElement, defineCustomElement as defineAfClientCarousel } from "@affinda/wc/dist/components/af-client-carousel.js";
 import { AfColorSwatch as AfColorSwatchElement, defineCustomElement as defineAfColorSwatch } from "@affinda/wc/dist/components/af-color-swatch.js";
 import { AfContainer as AfContainerElement, defineCustomElement as defineAfContainer } from "@affinda/wc/dist/components/af-container.js";
 import { AfHeading as AfHeadingElement, defineCustomElement as defineAfHeading } from "@affinda/wc/dist/components/af-heading.js";
+import { AfHeroSection as AfHeroSectionElement, defineCustomElement as defineAfHeroSection } from "@affinda/wc/dist/components/af-hero-section.js";
 import { AfIconButton as AfIconButtonElement, defineCustomElement as defineAfIconButton } from "@affinda/wc/dist/components/af-icon-button.js";
+import { AfLogoWell as AfLogoWellElement, defineCustomElement as defineAfLogoWell } from "@affinda/wc/dist/components/af-logo-well.js";
 import { AfLogo as AfLogoElement, defineCustomElement as defineAfLogo } from "@affinda/wc/dist/components/af-logo.js";
 import { AfNavItem as AfNavItemElement, defineCustomElement as defineAfNavItem } from "@affinda/wc/dist/components/af-nav-item.js";
 import { AfNavbar as AfNavbarElement, defineCustomElement as defineAfNavbar } from "@affinda/wc/dist/components/af-navbar.js";
+import { AfSection as AfSectionElement, defineCustomElement as defineAfSection } from "@affinda/wc/dist/components/af-section.js";
 import { AfTestimonialCarousel as AfTestimonialCarouselElement, defineCustomElement as defineAfTestimonialCarousel } from "@affinda/wc/dist/components/af-testimonial-carousel.js";
 import { AfTestimonialStat as AfTestimonialStatElement, defineCustomElement as defineAfTestimonialStat } from "@affinda/wc/dist/components/af-testimonial-stat.js";
 import { AfTestimonial as AfTestimonialElement, defineCustomElement as defineAfTestimonial } from "@affinda/wc/dist/components/af-testimonial.js";
@@ -54,6 +58,14 @@ export const AfCard = /*@__PURE__*/ createComponent({
     events: {},
     defineCustomElement: defineAfCard
 });
+export const AfClientCarousel = /*@__PURE__*/ createComponent({
+    tagName: 'af-client-carousel',
+    elementClass: AfClientCarouselElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineAfClientCarousel
+});
 export const AfColorSwatch = /*@__PURE__*/ createComponent({
     tagName: 'af-color-swatch',
     elementClass: AfColorSwatchElement,
@@ -78,6 +90,14 @@ export const AfHeading = /*@__PURE__*/ createComponent({
     events: {},
     defineCustomElement: defineAfHeading
 });
+export const AfHeroSection = /*@__PURE__*/ createComponent({
+    tagName: 'af-hero-section',
+    elementClass: AfHeroSectionElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineAfHeroSection
+});
 export const AfIconButton = /*@__PURE__*/ createComponent({
     tagName: 'af-icon-button',
     elementClass: AfIconButtonElement,
@@ -94,6 +114,14 @@ export const AfLogo = /*@__PURE__*/ createComponent({
     events: {},
     defineCustomElement: defineAfLogo
 });
+export const AfLogoWell = /*@__PURE__*/ createComponent({
+    tagName: 'af-logo-well',
+    elementClass: AfLogoWellElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineAfLogoWell
+});
 export const AfNavItem = /*@__PURE__*/ createComponent({
     tagName: 'af-nav-item',
     elementClass: AfNavItemElement,
@@ -110,6 +138,14 @@ export const AfNavbar = /*@__PURE__*/ createComponent({
     events: {},
     defineCustomElement: defineAfNavbar
 });
+export const AfSection = /*@__PURE__*/ createComponent({
+    tagName: 'af-section',
+    elementClass: AfSectionElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineAfSection
+});
 export const AfTestimonial = /*@__PURE__*/ createComponent({
     tagName: 'af-testimonial',
     elementClass: AfTestimonialElement,

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './generated/components.js';
-export { AfAspectRatio as AspectRatio, AfButton as Button, AfButtonGroup as ButtonGroup, AfCard as Card, AfColorSwatch as ColorSwatch, AfContainer as Container, AfHeading as Heading, AfIconButton as IconButton, AfLogo as Logo, AfNavItem as NavItem, AfNavbar as Navbar, AfText as Text, AfTestimonial as Testimonial, AfTestimonialCarousel as TestimonialCarousel, AfTestimonialStat as TestimonialStat, AfTypographyLockup as TypographyLockup } from './generated/components.js';
+export { AfAspectRatio as AspectRatio, AfButton as Button, AfButtonGroup as ButtonGroup, AfCard as Card, AfClientCarousel as ClientCarousel, AfColorSwatch as ColorSwatch, AfContainer as Container, AfHeading as Heading, AfHeroSection as HeroSection, AfIconButton as IconButton, AfLogo as Logo, AfLogoWell as LogoWell, AfNavItem as NavItem, AfNavbar as Navbar, AfSection as Section, AfText as Text, AfTestimonial as Testimonial, AfTestimonialCarousel as TestimonialCarousel, AfTestimonialStat as TestimonialStat, AfTypographyLockup as TypographyLockup } from './generated/components.js';
 export * from '@affinda/icons/react';
+export { PaperclipDecoration } from './components/PaperclipDecoration';

package/dist/index.js

@@ -2,6 +2,8 @@
 export * from './generated/components.js';
 // Note: defineCustomElements should be imported directly from @affinda/wc/loader/index.js in your app
 // Re-export components without the 'Af' prefix for cleaner React usage
-export { AfAspectRatio as AspectRatio, AfButton as Button, AfButtonGroup as ButtonGroup, AfCard as Card, AfColorSwatch as ColorSwatch, AfContainer as Container, AfHeading as Heading, AfIconButton as IconButton, AfLogo as Logo, AfNavItem as NavItem, AfNavbar as Navbar, AfText as Text, AfTestimonial as Testimonial, AfTestimonialCarousel as TestimonialCarousel, AfTestimonialStat as TestimonialStat, AfTypographyLockup as TypographyLockup } from './generated/components.js';
+export { AfAspectRatio as AspectRatio, AfButton as Button, AfButtonGroup as ButtonGroup, AfCard as Card, AfClientCarousel as ClientCarousel, AfColorSwatch as ColorSwatch, AfContainer as Container, AfHeading as Heading, AfHeroSection as HeroSection, AfIconButton as IconButton, AfLogo as Logo, AfLogoWell as LogoWell, AfNavItem as NavItem, AfNavbar as Navbar, AfSection as Section, AfText as Text, AfTestimonial as Testimonial, AfTestimonialCarousel as TestimonialCarousel, AfTestimonialStat as TestimonialStat, AfTypographyLockup as TypographyLockup } from './generated/components.js';
 // Re-export React icon components from icons package
 export * from '@affinda/icons/react';
+// Export custom React components
+export { PaperclipDecoration } from './components/PaperclipDecoration';

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@affinda/react",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "private": false,
   "type": "module",
-  "files": ["dist", "README.md"],
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,4 +23,4 @@
     "build": "pnpm run clean && tsc -p tsconfig.json",
     "clean": "rm -rf dist"
   }
-}
+}