@olwiba/ui 0.1.4 → 0.1.7

package/src/components/PricingCard.tsx

@@ -17,7 +17,8 @@ export interface PricingCardProps extends React.HTMLAttributes<HTMLDivElement> {
   features: PricingFeature[];
   cta: string;
   highlighted?: boolean;
-  badge?: string;
+  disabled?: boolean;
+  badge?: React.ReactNode;
   onSelect?: () => void;
 }
 
@@ -29,6 +30,7 @@ export function PricingCard({
   features,
   cta,
   highlighted = false,
+  disabled = false,
   badge,
   onSelect,
   className,
@@ -39,20 +41,21 @@ export function PricingCard({
   const cardInner = (
     <div
       className={cn(
-        'relative flex flex-col border p-6',
+        'relative flex flex-col border p-6 transition-opacity',
         mode === 'playful'
           ? 'rounded-2xl rotate-[0.3deg]'
           : mode === 'smooth'
             ? 'rounded-3xl'
             : 'rounded-2xl',
         highlighted ? 'border-primary bg-primary/5 shadow-sm' : 'bg-card',
+        disabled && 'pointer-events-none opacity-40 select-none',
         mode !== 'playful' && className,
       )}
       {...(mode !== 'playful' ? props : {})}
     >
       {badge && (
         <div className="absolute -top-3 left-1/2 -translate-x-1/2">
-          <Badge>{badge}</Badge>
+          {typeof badge === 'string' ? <Badge>{badge}</Badge> : badge}
         </div>
       )}
 
@@ -69,6 +72,7 @@ export function PricingCard({
         variant={highlighted ? 'default' : 'outline'}
         className="mt-6 w-full"
         onClick={onSelect}
+        disabled={disabled}
       >
         {cta}
       </Button>

package/src/components/ThemeSwitchMinimal.tsx

@@ -4,14 +4,14 @@ import * as React from 'react';
 import { Moon, Sun } from 'lucide-react';
 import { Button } from '@olwiba/cn';
 
-export function ThemeSwitchMinimal() {
-  const [theme, setThemeState] = React.useState<'light' | 'dark'>('dark');
+function getInitialTheme(): 'light' | 'dark' {
+  if (typeof document === 'undefined') return 'dark';
+  const stored = localStorage.getItem('theme') as 'light' | 'dark' | null;
+  return stored ?? (document.documentElement.classList.contains('dark') ? 'dark' : 'light');
+}
 
-  React.useEffect(() => {
-    const stored = localStorage.getItem('theme') as 'light' | 'dark' | null;
-    const resolved = stored ?? (document.documentElement.classList.contains('dark') ? 'dark' : 'light');
-    setThemeState(resolved);
-  }, []);
+export function ThemeSwitchMinimal() {
+  const [theme, setThemeState] = React.useState<'light' | 'dark'>(getInitialTheme);
 
   const toggle = () => {
     const next = theme === 'dark' ? 'light' : 'dark';

package/src/index.ts

@@ -54,15 +54,22 @@ export {
 export { SectionTitle, type SectionTitleProps } from './marketing/SectionTitle';
 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 { TechStackSection, type TechStackSectionProps, type TechStackItem } from './marketing/TechStackSection';
 export { CarouselSection, type CarouselSectionProps } from './marketing/CarouselSection';
+export { FeatureMarqueeSection, type FeatureMarqueeSectionProps, type FeatureMarqueeRow, type FeatureMarqueeItem } from './marketing/FeatureMarqueeSection';
 export { CtaSection, type CtaSectionProps } from './marketing/CtaSection';
+export { CtaCardSection, type CtaCardSectionProps } from './marketing/CtaCardSection';
 export { PricingSection, type PricingSectionProps, type PricingPlan } from './marketing/PricingSection';
 export { TestimonialsSection, type TestimonialsSectionProps } from './marketing/TestimonialsSection';
-export { TeamSection } from './marketing/TeamSection';
+export { TeamSection, type TeamMember, type TeamSectionProps } from './marketing/TeamSection';
 export { FaqSection, type FaqSectionProps } from './marketing/FaqSection';
 export { StatsSection, type StatsSectionProps } from './marketing/StatsSection';
 export { NewsletterSection, type NewsletterSectionProps } from './marketing/NewsletterSection';
 export { ContactSection, type ContactSectionProps, type ContactInfoItem } from './marketing/ContactSection';
+export { ComparisonSection, type ComparisonSectionProps, type ComparisonColumn } from './marketing/ComparisonSection';
+export { QualificationSection, type QualificationSectionProps, type QualificationColumn } from './marketing/QualificationSection';
 
 // ─── Marketing — elements ─────────────────────────────────────────────────────
 export { Navbar, type NavbarProps } from './marketing/Navbar';
@@ -77,6 +84,8 @@ export { Overlay, type OverlayProps, type OverlayVariant } from './overlays/Over
 export { FadeIn, type FadeInProps } from './motion/FadeIn';
 export { StaggerChildren, type StaggerChildrenProps } from './motion/StaggerChildren';
 export { CountUp, type CountUpProps } from './motion/CountUp';
+export { CountdownTimer, type CountdownTimerProps } from './motion/CountdownTimer';
+export { AnimatedPill, type AnimatedPillProps } from './motion/AnimatedPill';
 export { PageTransition, type PageTransitionProps } from './motion/PageTransition';
 
 // ─── Components — interactive ────────────────────────────────────────────────
@@ -97,12 +106,17 @@ export { TestimonialCard, type TestimonialCardProps } from './components/Testimo
 export { PricingCard, type PricingCardProps, type PricingFeature } from './components/PricingCard';
 export { ImageCard, type ImageCardProps } from './components/ImageCard';
 
+// ─── Components — diagram ────────────────────────────────────────────────────
+export { FlowConnector, type FlowConnectorProps } from './components/FlowConnector';
+export { FlowBracket, type FlowBracketProps } from './components/FlowBracket';
+
 // ─── Components — utility ────────────────────────────────────────────────────
 export { FullPageSpinner } from './components/Spinner';
 export { PageHeader, type PageHeaderProps, type PageHeaderBreadcrumb, type PageHeaderBackButton } from './components/PageHeader';
 export { Suspensed } from './components/Suspensed';
 export { ThemeSwitchMinimal } from './components/ThemeSwitchMinimal';
 export { ModeSwitchMinimal } from './components/ModeSwitchMinimal';
+export { BrandColorSwitchMinimal } from './components/BrandColorSwitchMinimal';
 export { ThemeColorUpdater } from './components/ThemeColorUpdater';
 export { VersionBanner } from './components/VersionBanner';
 export { DevBanner, type DevBannerProps } from './components/DevBanner';
@@ -113,7 +127,7 @@ export { RootErrorFallback } from './components/RootErrorFallback';
 export { PostCard, type PostCardProps } from './blog/PostCard';
 export { PostList, type PostListProps } from './blog/PostList';
 export { ChangelogList, type ChangelogListProps } from './blog/ChangelogList';
-export { ChangelogCard, type ChangelogCardProps } from './blog/ChangelogCard';
+export { ChangelogCard, type ChangelogCardProps, type ChangelogHighlight, type ChangelogReleaseType } from './blog/ChangelogCard';
 
 // ─── MDX ──────────────────────────────────────────────────────────────────────
 export { MdxContent, type MdxContentProps } from './blog/MdxContent';

package/src/marketing/ComparisonSection.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { Check, Minus } from 'lucide-react';
+import { cn, useUIVariant } from '@olwiba/cn';
+import { SectionTitle } from './SectionTitle';
+import { StaggerChildren } from '../motion/StaggerChildren';
+
+export interface ComparisonColumn {
+  label: string;
+  cost: string;
+  costDetail?: string;
+  items: string[];
+  highlighted?: boolean;
+}
+
+export interface ComparisonSectionProps {
+  badge?: string;
+  title?: string;
+  description?: string;
+  columns: ComparisonColumn[];
+}
+
+export function ComparisonSection({
+  badge = 'The math',
+  title = 'The math is simple',
+  description,
+  columns,
+}: ComparisonSectionProps) {
+  const mode = useUIVariant();
+  const sectionClasses = cn(
+    'overflow-hidden bg-card',
+    mode === 'smooth' && 'rounded-3xl border',
+    mode === 'playful' && 'rounded-2xl border-primary/25 border',
+    !mode && 'rounded-2xl border',
+  );
+
+  return (
+    <section className={sectionClasses}>
+      <div className="px-6 py-14 sm:px-10 sm:py-20">
+        <div className="mx-auto max-w-4xl">
+          <SectionTitle badge={badge} title={title} description={description} />
+
+          <StaggerChildren className="mt-12 grid gap-4 sm:grid-cols-3">
+            {columns.map((col) => (
+              <div
+                key={col.label}
+                className={cn(
+                  'flex flex-col rounded-2xl border p-6',
+                  col.highlighted
+                    ? 'border-foreground bg-foreground text-background'
+                    : 'border-border bg-muted/40',
+                )}
+              >
+                <div className="mb-6">
+                  <p
+                    className={cn(
+                      'text-xs font-semibold uppercase tracking-widest',
+                      col.highlighted ? 'text-background/60' : 'text-muted-foreground',
+                    )}
+                  >
+                    {col.label}
+                  </p>
+                  <p
+                    className={cn(
+                      'mt-2 text-2xl font-bold tracking-tight',
+                      col.highlighted ? 'text-background' : 'text-foreground',
+                    )}
+                  >
+                    {col.cost}
+                  </p>
+                  {col.costDetail && (
+                    <p
+                      className={cn(
+                        'mt-1 text-sm',
+                        col.highlighted ? 'text-background/60' : 'text-muted-foreground',
+                      )}
+                    >
+                      {col.costDetail}
+                    </p>
+                  )}
+                </div>
+
+                <ul className="flex flex-col gap-3">
+                  {col.items.map((item) => (
+                    <li key={item} className="flex items-start gap-2.5">
+                      {col.highlighted ? (
+                        <Check className="mt-0.5 size-4 shrink-0 text-background/70" />
+                      ) : (
+                        <Minus className="mt-0.5 size-4 shrink-0 text-muted-foreground/50" />
+                      )}
+                      <span
+                        className={cn(
+                          'text-sm leading-snug',
+                          col.highlighted ? 'text-background/90' : 'text-muted-foreground',
+                        )}
+                      >
+                        {item}
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </StaggerChildren>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/marketing/ContactSection.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import * as React from 'react';
-import { Mail, MapPin, MessageSquare, Phone, Send, type LucideIcon } from 'lucide-react';
-import { Badge, Button, Input, Label, Separator, Textarea } from '@olwiba/cn';
+import { Mail, MapPin, MessageSquare, Send, type LucideIcon } from 'lucide-react';
+import { Badge, Button, Checkbox, Input, Label, Separator, Textarea } from '@olwiba/cn';
 
 export type ContactInfoItem = {
   label: string;
@@ -15,6 +15,7 @@ export interface ContactSectionProps {
   title?: string;
   description?: string;
   contactInfo?: ContactInfoItem[];
+  privacyHref?: string;
   successTitle?: string;
   successDescription?: string;
   sendAnotherLabel?: string;
@@ -23,17 +24,16 @@ export interface ContactSectionProps {
 
 const defaultContactInfoResolved: ContactInfoItem[] = [
   { icon: Mail, label: 'Email', value: 'hello@olwiba.com' },
-  { icon: Phone, label: 'Phone', value: '+1 (555) 000-0000' },
-  { icon: MapPin, label: 'Office', value: 'San Francisco, CA' },
+  { icon: MapPin, label: 'Base', value: 'Aotearoa New Zealand' },
 ];
 
 const defaults = {
-  badge: 'Contact us',
+  badge: 'Contact',
   title: "Let's talk",
   description:
-    "Have a question or want to work together? Fill in the form and we'll get back to you within one business day.",
+    "Have a question or want to work together? Fill in the form and you'll hear back from the person who built it.",
   successTitle: 'Message sent',
-  successDescription: "Thanks for reaching out. We'll get back to you within one business day.",
+  successDescription: "Thanks for reaching out. You'll get a reply within one business day.",
   sendAnotherLabel: 'Send another',
 };
 
@@ -42,6 +42,7 @@ export function ContactSection({
   title = defaults.title,
   description = defaults.description,
   contactInfo = defaultContactInfoResolved,
+  privacyHref,
   successTitle = defaults.successTitle,
   successDescription = defaults.successDescription,
   sendAnotherLabel = defaults.sendAnotherLabel,
@@ -58,62 +59,67 @@ export function ContactSection({
   return (
     <section className="overflow-hidden rounded-2xl border bg-card">
       <div className="grid lg:grid-cols-[1fr_1.4fr]">
+
+        {/* Left panel */}
         <div className="relative overflow-hidden bg-primary px-8 py-12 text-primary-foreground">
-          <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,hsl(var(--primary-foreground)/0.1),transparent_60%)]" />
-          <div className="relative space-y-6">
+          <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,hsl(var(--primary-foreground)/0.12),transparent_55%)]" />
+          <div className="absolute inset-0 bg-[radial-gradient(circle_at_bottom_left,hsl(var(--primary-foreground)/0.06),transparent_60%)]" />
+          <div className="relative flex h-full flex-col gap-8">
             <div>
               <Badge
                 variant="secondary"
-                className="mb-3 bg-primary-foreground/15 text-primary-foreground hover:bg-primary-foreground/20"
+                className="mb-4 bg-primary-foreground/15 text-primary-foreground hover:bg-primary-foreground/20"
               >
                 {badge}
               </Badge>
-              <h2 className="text-2xl font-semibold">{title}</h2>
-              <p className="mt-2 text-sm text-primary-foreground/70">{description}</p>
+              <h2 className="text-3xl font-semibold leading-tight">{title}</h2>
+              <p className="mt-3 text-sm leading-relaxed text-primary-foreground/70">{description}</p>
             </div>
 
             <Separator className="bg-primary-foreground/20" />
 
-            <div className="space-y-4">
+            <div className="space-y-5">
               {contactInfo.map(({ icon: Icon = Mail, label, value }) => (
-                <div key={label} className="flex items-center gap-3">
-                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary-foreground/10">
+                <div key={label} className="flex items-start gap-3">
+                  <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary-foreground/10">
                     <Icon className="size-4" />
                   </div>
                   <div>
-                    <div className="text-xs text-primary-foreground/60">{label}</div>
-                    <div className="text-sm font-medium">{value}</div>
+                    <div className="text-xs font-medium uppercase tracking-wider text-primary-foreground/50">{label}</div>
+                    <div className="mt-0.5 text-sm font-medium">{value}</div>
                   </div>
                 </div>
               ))}
             </div>
+
+            <div className="mt-auto">
+              <p className="text-xs text-primary-foreground/40">
+                Response within one business day.
+              </p>
+            </div>
           </div>
         </div>
 
-        <div className="p-8">
+        {/* Right panel — form */}
+        <div className="p-8 sm:p-10">
           {submitted ? (
-            <div className="flex h-full min-h-[320px] flex-col items-center justify-center gap-4 text-center">
-              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+            <div className="flex h-full min-h-[360px] flex-col items-center justify-center gap-5 text-center">
+              <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 text-primary">
                 <MessageSquare className="size-6" />
               </div>
               <div>
-                <h3 className="font-semibold">{successTitle}</h3>
-                <p className="mt-1 text-sm text-muted-foreground">{successDescription}</p>
+                <h3 className="text-lg font-semibold">{successTitle}</h3>
+                <p className="mt-1.5 text-sm text-muted-foreground">{successDescription}</p>
               </div>
-              <Button variant="outline" onClick={() => setSubmitted(false)}>
+              <Button variant="outline" size="sm" onClick={() => setSubmitted(false)}>
                 {sendAnotherLabel}
               </Button>
             </div>
           ) : (
             <form onSubmit={handleSubmit} className="space-y-5">
-              <input
-                type="text"
-                name="company"
-                tabIndex={-1}
-                autoComplete="off"
-                aria-hidden="true"
-                className="hidden"
-              />
+              {/* honeypot */}
+              <input type="text" name="_hp" tabIndex={-1} autoComplete="off" aria-hidden="true" className="hidden" />
+
               <div className="grid gap-4 sm:grid-cols-2">
                 <div className="space-y-1.5">
                   <Label htmlFor="contact-first">First name</Label>
@@ -124,24 +130,58 @@ export function ContactSection({
                   <Input id="contact-last" name="lastName" placeholder="Reed" required />
                 </div>
               </div>
+
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="space-y-1.5">
+                  <Label htmlFor="contact-company" className="flex gap-1">
+                    Company
+                    <span className="text-muted-foreground">(optional)</span>
+                  </Label>
+                  <Input id="contact-company" name="company" placeholder="Acme Inc." />
+                </div>
+                <div className="space-y-1.5">
+                  <Label htmlFor="contact-phone" className="flex gap-1">
+                    Phone
+                    <span className="text-muted-foreground">(optional)</span>
+                  </Label>
+                  <Input id="contact-phone" name="phone" type="tel" placeholder="+1 (555) 000-0000" />
+                </div>
+              </div>
+
               <div className="space-y-1.5">
-                <Label htmlFor="contact-email">Email</Label>
+                <Label htmlFor="contact-email">Work email</Label>
                 <Input id="contact-email" name="email" type="email" placeholder="olivia@company.com" required />
               </div>
+
               <div className="space-y-1.5">
                 <Label htmlFor="contact-subject">Subject</Label>
                 <Input id="contact-subject" name="subject" placeholder="How can we help?" required />
               </div>
+
               <div className="space-y-1.5">
                 <Label htmlFor="contact-message">Message</Label>
                 <Textarea
                   id="contact-message"
                   name="message"
                   placeholder="Tell us what you're working on..."
-                  className="min-h-28 resize-none"
+                  className="min-h-32 resize-none"
                   required
                 />
               </div>
+
+              {privacyHref && (
+                <div className="flex items-start gap-3">
+                  <Checkbox id="contact-privacy" name="privacy" required className="mt-0.5" />
+                  <Label htmlFor="contact-privacy" className="text-sm font-normal leading-snug text-muted-foreground">
+                    By submitting this form you agree to our{' '}
+                    <a href={privacyHref} className="font-medium text-foreground underline-offset-2 hover:underline">
+                      privacy policy
+                    </a>
+                    .
+                  </Label>
+                </div>
+              )}
+
               <Button type="submit" className="w-full">
                 Send message
                 <Send className="ml-2 size-4" />
@@ -149,6 +189,7 @@ export function ContactSection({
             </form>
           )}
         </div>
+
       </div>
     </section>
   );

package/src/marketing/CtaCardSection.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import * as React from 'react';
+import { ArrowRight, Rocket } from 'lucide-react';
+import { cn } from '@olwiba/cn';
+import type { AppShellRenderLink } from '../app/AppShell';
+
+export interface CtaCardSectionProps {
+  heading: string;
+  description?: string;
+  primaryCta: { label: string; href: string };
+  footnote?: string;
+  icon?: React.ReactNode;
+  renderLink?: AppShellRenderLink;
+}
+
+const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) => (
+  <a href={href} className={className}>{children}</a>
+);
+
+export function CtaCardSection({
+  heading,
+  description,
+  primaryCta,
+  footnote,
+  icon,
+  renderLink = defaultRenderLink,
+}: CtaCardSectionProps) {
+  const ref = React.useRef<HTMLElement>(null);
+  const [visible, setVisible] = React.useState(false);
+
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.15 },
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <section
+      ref={ref}
+      className={cn(
+        'relative overflow-hidden rounded-3xl border border-gray-200 shadow-sm dark:border-border',
+        'bg-[#E0DFDB] dark:bg-card',
+        'transition-[opacity,transform] duration-700 ease-out',
+        visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6',
+      )}
+    >
+      {/* Decorative icon */}
+      <div
+        className="pointer-events-none absolute inset-0 flex items-center justify-center"
+        style={{
+          opacity: visible ? 0.12 : 0,
+          transform: visible ? 'scale(1) rotate(0deg)' : 'scale(0.9) rotate(-5deg)',
+          transition: 'opacity 700ms ease 200ms, transform 700ms ease 200ms',
+        }}
+      >
+        {icon ?? <Rocket className="size-72 text-foreground dark:text-foreground" strokeWidth={0.75} />}
+      </div>
+
+      {/* Content */}
+      <div className="relative z-10 px-6 py-20 text-center sm:px-10 sm:py-28">
+        <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
+          {heading}
+        </h2>
+        {description && (
+          <p className="mx-auto mt-4 max-w-lg text-pretty text-muted-foreground">{description}</p>
+        )}
+        <div className="mt-8">
+          {renderLink({
+            href: primaryCta.href,
+            children: (
+              <span className="inline-flex items-center gap-2 rounded-full bg-foreground px-6 py-3 text-sm font-medium text-background transition-opacity hover:opacity-80">
+                {primaryCta.label}
+                <ArrowRight className="size-4" />
+              </span>
+            ),
+          })}
+        </div>
+        {footnote && (
+          <p className="mt-5 text-sm text-muted-foreground">{footnote}</p>
+        )}
+      </div>
+    </section>
+  );
+}

package/src/marketing/FeatureMarqueeSection.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import type { LucideIcon } from 'lucide-react';
+import { cn, useUIVariant } from '@olwiba/cn';
+import { SectionTitle } from './SectionTitle';
+import { FadeIn } from '../motion/FadeIn';
+
+export interface FeatureMarqueeItem {
+  icon: LucideIcon;
+  title: string;
+}
+
+export interface FeatureMarqueeRow {
+  items: FeatureMarqueeItem[];
+  direction?: 'left' | 'right';
+}
+
+export interface FeatureMarqueeSectionProps {
+  badge?: string;
+  title?: string;
+  description?: string;
+  rows: FeatureMarqueeRow[];
+  speed?: 'slow' | 'normal' | 'fast';
+  pauseOnHover?: boolean;
+}
+
+const speedDuration = {
+  slow: '280s',
+  normal: '180s',
+  fast: '100s',
+} as const;
+
+export function FeatureMarqueeSection({
+  badge,
+  title,
+  description,
+  rows,
+  speed = 'normal',
+  pauseOnHover = true,
+}: FeatureMarqueeSectionProps) {
+  const mode = useUIVariant();
+  const duration = speedDuration[speed];
+
+  const sectionClasses = cn(
+    'overflow-hidden bg-card',
+    mode === 'smooth' && 'rounded-3xl border',
+    mode === 'playful' && 'rounded-2xl border-primary/25 border',
+    !mode && 'rounded-2xl border',
+  );
+
+  return (
+    <section className={sectionClasses}>
+      <div className="py-14 sm:py-20">
+        {(title || badge || description) && (
+          <FadeIn direction="up">
+            <div className="mx-auto mb-10 max-w-4xl px-6 sm:px-10">
+              <SectionTitle title={title ?? ''} description={description} badge={badge} />
+            </div>
+          </FadeIn>
+        )}
+
+        <div className="space-y-3">
+          {rows.map((row, i) => {
+            const direction = row.direction ?? (i % 2 === 0 ? 'left' : 'right');
+            const reversed = direction === 'right';
+            // For right-scroll rows: reverse source order so item 0 starts on the right
+            // and items enter from the right in natural reading order.
+            const source = reversed ? [...row.items].reverse() : row.items;
+            // Repeat enough that one set exceeds 4K viewport (~3840px).
+            const set = Array.from({ length: 4 }, () => source).flat();
+            const items = [...set, ...set];
+
+            return (
+              <div
+                key={i}
+                className="group relative overflow-hidden"
+                style={{
+                  maskImage:
+                    'linear-gradient(to right, transparent, black 8%, black 92%, transparent)',
+                  WebkitMaskImage:
+                    'linear-gradient(to right, transparent, black 8%, black 92%, transparent)',
+                }}
+              >
+                <div
+                  className={cn(
+                    'flex w-max gap-3 py-0.5',
+                    pauseOnHover && 'group-hover:[animation-play-state:paused]',
+                  )}
+                  style={{
+                    animation: `feature-marquee-left ${duration} linear infinite`,
+                  }}
+                >
+                  {items.map((item, j) => {
+                    const Icon = item.icon;
+                    return (
+                      <div
+                        key={`${item.title}-${j}`}
+                        className="flex shrink-0 items-center gap-2 rounded-full border bg-background px-4 py-2 text-sm shadow-sm"
+                      >
+                        <Icon className="size-3.5 shrink-0 text-primary" />
+                        <span className="whitespace-nowrap text-foreground">{item.title}</span>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      <style>{`
+        @keyframes feature-marquee-left {
+          from { transform: translateX(0); }
+          to { transform: translateX(-50%); }
+        }
+      `}</style>
+    </section>
+  );
+}