@olwiba/ui 0.2.2 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "private": false,
   "type": "module",
   "sideEffects": false,

package/src/index.ts

@@ -82,7 +82,7 @@ export { marketingSectionSpacing, type MarketingSectionSpacing } from './marketi
 export { HeroSection, type HeroSectionProps } from './marketing/HeroSection';
 export { FeaturesSection, type FeaturesSectionProps } from './marketing/FeaturesSection';
 export { GroupedFeaturesSection, type GroupedFeaturesSectionProps, type GroupedFeatureGroup } from './marketing/GroupedFeaturesSection';
-export { StepsSection, type StepsSectionProps, type StepItem } from './marketing/StepsSection';
+export { StepsSection, type StepsSectionProps, type StepItem, type StepGroup } from './marketing/StepsSection';
 export { TechStackSection, type TechStackSectionProps, type TechStackItem } from './marketing/TechStackSection';
 export { FeatureMarqueeSection, type FeatureMarqueeSectionProps, type FeatureMarqueeRow, type FeatureMarqueeItem } from './marketing/FeatureMarqueeSection';
 export { CtaSection, type CtaSectionProps } from './marketing/CtaSection';

package/src/marketing/PricingSection.tsx

@@ -35,6 +35,10 @@ export interface PricingSectionProps {
   footnote?: string;
   mode?: 'subscription' | 'one-time';
   foundingDeadline?: string;
+  /** Symbol prepended to the computed price. Ignored by plans with `priceDisplay`. */
+  currency?: string;
+  /** Badge label for `highlighted` plans with no active `foundingDeadline` countdown. Pass '' to show no badge. */
+  highlightedBadgeLabel?: string;
   /** Rendered below each plan's CTA button (e.g. a "Get notified" link). */
   renderPlanFooter?: (plan: PricingPlan) => React.ReactNode;
 }
@@ -54,6 +58,8 @@ export function PricingSection({
   footnote,
   mode = 'subscription',
   foundingDeadline,
+  currency = '$',
+  highlightedBadgeLabel = 'Founding member',
   renderPlanFooter,
 }: PricingSectionProps) {
   const [annual, setAnnual] = React.useState(false);
@@ -122,7 +128,7 @@ export function PricingSection({
           <StaggerChildren className="mt-10 grid gap-4 lg:grid-cols-3">
             {plans.map((plan) => {
               const rawPrice = isOneTime ? plan.monthly : (annual ? plan.annual : plan.monthly);
-              const price = plan.priceDisplay ?? `$${rawPrice}`;
+              const price = plan.priceDisplay ?? `${currency}${rawPrice}`;
               const period = plan.periodDisplay ?? (isOneTime ? 'one-time' : (rawPrice > 0 ? '/mo' : ''));
               const badge = plan.highlighted && foundingDeadline
                 ? (
@@ -130,8 +136,8 @@ export function PricingSection({
                     <CountdownTimer deadline={foundingDeadline} compact />
                   </span>
                 )
-                : plan.highlighted
-                  ? 'Founding member'
+                : plan.highlighted && highlightedBadgeLabel
+                  ? highlightedBadgeLabel
                   : undefined;
               return (
                 <PricingCard

package/src/marketing/StepsSection.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import * as React from 'react';
 import { cn, useUIVariant } from '@olwiba/cn';
 import { SectionTitle } from './SectionTitle';
 import { FadeIn } from '../motion/FadeIn';
@@ -7,14 +8,77 @@ import { FadeIn } from '../motion/FadeIn';
 export interface StepItem {
   emoji?: string;
   title: string;
-  description: string;
+  description: React.ReactNode;
+}
+
+export interface StepGroup {
+  steps: StepItem[];
+  /** Content rendered after this group, outside the timeline (e.g. a CTA card). */
+  after?: React.ReactNode;
 }
 
 export interface StepsSectionProps {
   badge?: string;
   title?: string;
   description?: string;
+  steps?: StepItem[];
+  /** 'default': horizontal row (vertical on mobile). 'timeline': vertical numbered timeline with a fading accent line. */
+  variant?: 'default' | 'timeline';
+  /** Timeline only — step groups with optional interstitial content; overrides `steps`. Numbering continues across groups. */
+  groups?: StepGroup[];
+}
+
+function TimelineGroup({
+  steps,
+  startNumber,
+  fadeIn,
+}: {
   steps: StepItem[];
+  startNumber: number;
+  fadeIn: boolean;
+}) {
+  const fadePx = 48;
+  return (
+    <div className="relative">
+      {/* Accent line: optional fade-in head, solid middle, fade-out tail */}
+      {fadeIn && (
+        <div
+          aria-hidden="true"
+          className="absolute left-[19px] w-1 bg-gradient-to-b from-transparent to-primary"
+          style={{ top: 0, height: fadePx }}
+        />
+      )}
+      <div
+        aria-hidden="true"
+        className="absolute left-[19px] w-1 bg-primary"
+        style={{
+          top: fadeIn ? fadePx : 20,
+          height: fadeIn ? `calc(100% - ${fadePx}px)` : 'calc(100% - 20px)',
+        }}
+      />
+      <div
+        aria-hidden="true"
+        className="absolute left-[19px] w-1 bg-gradient-to-b from-primary to-transparent"
+        style={{ top: '100%', height: fadePx }}
+      />
+
+      <div className="space-y-10" style={fadeIn ? { paddingTop: fadePx } : undefined}>
+        {steps.map((step, i) => (
+          <FadeIn key={step.title} direction="up" delay={i * 80}>
+            <div className="relative flex gap-5">
+              <div className="relative z-10 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border-2 border-primary bg-primary text-lg font-bold text-primary-foreground">
+                {step.emoji ?? startNumber + i}
+              </div>
+              <div className="flex-1 pt-1 pb-2">
+                <h3 className="mb-2 text-xl font-semibold text-foreground">{step.title}</h3>
+                <div className="text-sm leading-relaxed text-muted-foreground">{step.description}</div>
+              </div>
+            </div>
+          </FadeIn>
+        ))}
+      </div>
+    </div>
+  );
 }
 
 export function StepsSection({
@@ -22,6 +86,8 @@ export function StepsSection({
   title = 'From zero to shipped',
   description,
   steps,
+  variant = 'default',
+  groups,
 }: StepsSectionProps) {
   const mode = useUIVariant();
   const sectionClasses = cn(
@@ -31,6 +97,37 @@ export function StepsSection({
     !mode && 'rounded-2xl border',
   );
 
+  if (variant === 'timeline') {
+    const resolvedGroups: StepGroup[] = groups ?? (steps ? [{ steps }] : []);
+    let nextNumber = 1;
+
+    return (
+      <section className={sectionClasses}>
+        <div className="px-6 py-14 sm:px-10 sm:py-20">
+          <div className="mx-auto max-w-3xl">
+            <SectionTitle badge={badge} title={title} description={description} className="text-left [&>p]:mx-0" />
+            <div className="mt-12">
+              {resolvedGroups.map((group, groupIndex) => {
+                const startNumber = nextNumber;
+                nextNumber += group.steps.length;
+                return (
+                  <React.Fragment key={groupIndex}>
+                    <div className={cn(groupIndex > 0 && 'mt-10')}>
+                      <TimelineGroup steps={group.steps} startNumber={startNumber} fadeIn={groupIndex > 0} />
+                    </div>
+                    {group.after && <div className="mt-16">{group.after}</div>}
+                  </React.Fragment>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  const resolvedSteps = steps ?? [];
+
   return (
     <section className={sectionClasses}>
       <div className="px-6 py-14 sm:px-10 sm:py-20">
@@ -39,12 +136,12 @@ export function StepsSection({
 
           <div className="mt-12">
             {/* Desktop: horizontal row */}
-            <div className="hidden sm:grid" style={{ gridTemplateColumns: `repeat(${steps.length}, 1fr)` }}>
-              {steps.map((step, i) => (
+            <div className="hidden sm:grid" style={{ gridTemplateColumns: `repeat(${resolvedSteps.length}, 1fr)` }}>
+              {resolvedSteps.map((step, i) => (
                 <FadeIn key={step.title} direction="up" delay={i * 80}>
                   <div className="relative flex flex-col items-center text-center px-4">
                     {/* Dashed connector to next step */}
-                    {i < steps.length - 1 && (
+                    {i < resolvedSteps.length - 1 && (
                       <div
                         aria-hidden="true"
                         className="absolute top-6 left-1/2 w-full border-t border-dashed border-border"
@@ -57,7 +154,7 @@ export function StepsSection({
                       )}
                     </div>
                     <h3 className="font-semibold text-foreground">{step.title}</h3>
-                    <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{step.description}</p>
+                    <div className="mt-2 text-sm leading-relaxed text-muted-foreground">{step.description}</div>
                   </div>
                 </FadeIn>
               ))}
@@ -65,11 +162,11 @@ export function StepsSection({
 
             {/* Mobile: vertical timeline */}
             <div className="flex flex-col gap-0 sm:hidden">
-              {steps.map((step, i) => (
+              {resolvedSteps.map((step, i) => (
                 <FadeIn key={step.title} direction="up" delay={i * 80}>
                   <div className="relative flex gap-4 pb-8 last:pb-0">
                     {/* Vertical connector */}
-                    {i < steps.length - 1 && (
+                    {i < resolvedSteps.length - 1 && (
                       <div
                         aria-hidden="true"
                         className="absolute left-[23px] top-14 bottom-0 w-px border-l border-dashed border-border"
@@ -83,7 +180,7 @@ export function StepsSection({
                     </div>
                     <div className="pt-3">
                       <h3 className="font-semibold text-foreground">{step.title}</h3>
-                      <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">{step.description}</p>
+                      <div className="mt-1.5 text-sm leading-relaxed text-muted-foreground">{step.description}</div>
                     </div>
                   </div>
                 </FadeIn>