@affinda/react 0.0.20 → 0.0.21

package/README.md

@@ -115,6 +115,10 @@ import { Button, Heading, TypographyLockup } from '@affinda/react';
 - **TestimonialCarousel** / AfTestimonialCarousel - Carousel for sliding between multiple testimonials
 - **TestimonialStat** / AfTestimonialStat - Individual statistics within testimonials
 
+**Feature Showcase:**
+- **FeatureAccordion** / AfFeatureAccordion - Expandable accordion with auto-cycling timer and image display
+- **CtaSection** / AfCtaSection - Call-to-action section with illustration and buttons
+
 **Brand:**
 - **Logo** / AfLogo - Affinda logo component
 
@@ -430,6 +434,72 @@ Site-wide navigation header with responsive design and mobile menu support.
 - Variant: `"01"` (primary links), `"02"` (secondary/utility links)
 - Variant: Controls visual style
 
+#### Feature Showcase
+
+**FeatureAccordion**
+- Expandable accordion for showcasing product features
+- Auto-cycles through items with a visual progress timer
+- Displays accompanying images that change with each item
+- Timer resets when user clicks an item
+
+```tsx
+import { FeatureAccordion } from '@affinda/react';
+
+<FeatureAccordion
+  heading="Give AI agents your paperwork"
+  items={JSON.stringify([
+    {
+      title: "Automate document processing with 99%+ accuracy",
+      description: "Extract any information from any document with industry-leading precision.",
+      imageUrl: "https://example.com/feature1.jpg",
+      imageAlt: "Document automation"
+    },
+    {
+      title: "Build models in minutes, not months",
+      description: "Affinda learns instantly from every interaction.",
+      imageUrl: "https://example.com/feature2.jpg",
+      imageAlt: "Fast model building"
+    }
+  ])}
+  cycleInterval={6000}
+  autoCycle={true}
+/>
+```
+
+**Props:**
+- `heading`: Section heading text
+- `items`: JSON string array of accordion items (title, description, imageUrl, imageAlt)
+- `cycleInterval`: Auto-cycle interval in milliseconds (default: 6000)
+- `autoCycle`: Enable/disable auto-cycling (default: true)
+
+**CtaSection**
+- Call-to-action section with illustration and decorative background
+- Styled to match the affinda.com design
+
+```tsx
+import { CtaSection } from '@affinda/react';
+import { getIllustrationUrlByScene } from '@affinda/illustrations';
+
+<CtaSection
+  heading="See what our AI agents can do for you"
+  description="Upload your documents and watch our AI agents get to work."
+  primaryButtonText="Try for free"
+  primaryButtonUrl="https://app.affinda.com/auth/register"
+  secondaryButtonText="Talk to us"
+  secondaryButtonUrl="/contact"
+  illustrationUrl={getIllustrationUrlByScene('automate', 'inkwell')}
+/>
+```
+
+**Props:**
+- `heading`: Section heading text
+- `description`: Description text below heading
+- `primaryButtonText`: Text for primary CTA button
+- `primaryButtonUrl`: URL for primary button
+- `secondaryButtonText`: Text for secondary button
+- `secondaryButtonUrl`: URL for secondary button
+- `illustrationUrl`: URL to illustration image (use @affinda/illustrations)
+
 #### Social Proof & Testimonials
 
 **Testimonial**
@@ -682,10 +752,29 @@ When generating Affinda UI code:
 
 4. **Never use purple colors** - those were placeholder colors and have been removed
 
+## Using Illustrations
+
+The `@affinda/illustrations` package provides themed illustration assets:
+
+```tsx
+import { getIllustrationUrlByScene } from '@affinda/illustrations';
+
+// Available scenes: 'document-raise', 'thinking', 'shapes', 'team-leader', 
+// 'grow-business', 'document-type', 'industries', 'accuracy', 'intelligence', 
+// 'page-turn', 'automate'
+
+// Available themes: 'white-ivory', 'mist-green', 'soft-clay', 'inkwell'
+
+<img 
+  src={getIllustrationUrlByScene('automate', 'inkwell')} 
+  alt="Automation illustration" 
+/>
+```
+
 ## Related Packages
 
 - **@affinda/wc** - Core web components (used internally)
 - **@affinda/tokens** - Design tokens (colors, spacing, typography)
 - **@affinda/icons** - Icon library
-- **@affinda/illustrations** - Illustration assets
+- **@affinda/illustrations** - Illustration assets (install separately: `npm install @affinda/illustrations`)
 - **@affinda/css** - Base CSS styles

package/dist/generated/components.d.ts

@@ -9,6 +9,8 @@ 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 { AfCtaSection as AfCtaSectionElement } from "@affinda/wc/dist/components/af-cta-section.js";
+import { AfFeatureAccordion as AfFeatureAccordionElement } from "@affinda/wc/dist/components/af-feature-accordion.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";
@@ -37,6 +39,10 @@ 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 AfCtaSectionEvents = NonNullable<unknown>;
+export declare const AfCtaSection: StencilReactComponent<AfCtaSectionElement, AfCtaSectionEvents>;
+export type AfFeatureAccordionEvents = NonNullable<unknown>;
+export declare const AfFeatureAccordion: StencilReactComponent<AfFeatureAccordionElement, AfFeatureAccordionEvents>;
 export type AfHeadingEvents = NonNullable<unknown>;
 export declare const AfHeading: StencilReactComponent<AfHeadingElement, AfHeadingEvents>;
 export type AfHeroSectionEvents = NonNullable<unknown>;

package/dist/generated/components.js

@@ -11,6 +11,8 @@ import { AfCard as AfCardElement, defineCustomElement as defineAfCard } from "@a
 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 { AfCtaSection as AfCtaSectionElement, defineCustomElement as defineAfCtaSection } from "@affinda/wc/dist/components/af-cta-section.js";
+import { AfFeatureAccordion as AfFeatureAccordionElement, defineCustomElement as defineAfFeatureAccordion } from "@affinda/wc/dist/components/af-feature-accordion.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";
@@ -82,6 +84,22 @@ export const AfContainer = /*@__PURE__*/ createComponent({
     events: {},
     defineCustomElement: defineAfContainer
 });
+export const AfCtaSection = /*@__PURE__*/ createComponent({
+    tagName: 'af-cta-section',
+    elementClass: AfCtaSectionElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineAfCtaSection
+});
+export const AfFeatureAccordion = /*@__PURE__*/ createComponent({
+    tagName: 'af-feature-accordion',
+    elementClass: AfFeatureAccordionElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineAfFeatureAccordion
+});
 export const AfHeading = /*@__PURE__*/ createComponent({
     tagName: 'af-heading',
     elementClass: AfHeadingElement,

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export * 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 { AfAspectRatio as AspectRatio, AfButton as Button, AfButtonGroup as ButtonGroup, AfCard as Card, AfClientCarousel as ClientCarousel, AfColorSwatch as ColorSwatch, AfContainer as Container, AfCtaSection as CtaSection, AfFeatureAccordion as FeatureAccordion, 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,7 +2,7 @@
 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, 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 { AfAspectRatio as AspectRatio, AfButton as Button, AfButtonGroup as ButtonGroup, AfCard as Card, AfClientCarousel as ClientCarousel, AfColorSwatch as ColorSwatch, AfContainer as Container, AfCtaSection as CtaSection, AfFeatureAccordion as FeatureAccordion, 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@affinda/react",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "private": false,
   "type": "module",
   "files": [
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@affinda/icons": "^0.0.3",
-    "@affinda/wc": "^0.0.11",
+    "@affinda/wc": "^0.0.12",
     "@stencil/react-output-target": "^1.2.0"
   },
   "scripts": {