@olwiba/ui 0.2.18 → 0.2.20

package/package.json

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

package/src/index.ts

@@ -83,6 +83,12 @@ export { UpdateBanner, type UpdateBannerProps } from './app/UpdateBanner';
 // ─── Marketing — page sections ────────────────────────────────────────────────
 export { SectionTitle, type SectionTitleProps } from './marketing/SectionTitle';
 export { marketingSectionSpacing, type MarketingSectionSpacing } from './marketing/section-spacing';
+export {
+  MarketingSurfaceProvider,
+  useMarketingSurface,
+  useSectionSurface,
+  type MarketingSurface,
+} from './marketing/section-surface';
 export { HeroSection, type HeroSectionProps } from './marketing/HeroSection';
 export { FeaturesSection, type FeaturesSectionProps } from './marketing/FeaturesSection';
 export { GroupedFeaturesSection, type GroupedFeaturesSectionProps, type GroupedFeatureGroup } from './marketing/GroupedFeaturesSection';

package/src/marketing/ComparisonSection.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import { cn, useUIVariant } from '@olwiba/cn';
+import { cn } from '@olwiba/cn';
 import { SectionTitle } from './SectionTitle';
 import { StaggerChildren } from '../motion/StaggerChildren';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 
 export interface ComparisonColumn {
   label: string;
@@ -17,6 +18,8 @@ export interface ComparisonSectionProps {
   title?: string;
   description?: string;
   columns: ComparisonColumn[];
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 export function ComparisonSection({
@@ -24,14 +27,9 @@ export function ComparisonSection({
   title = 'The math is simple',
   description,
   columns,
+  surface,
 }: 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',
-  );
+  const sectionClasses = useSectionSurface(surface);
 
   return (
     <section className={sectionClasses}>

package/src/marketing/ContactSection.tsx

@@ -2,7 +2,8 @@
 
 import * as React from 'react';
 import { ChevronDown, Mail, MessageSquare, Send, type LucideIcon } from 'lucide-react';
-import { cn, Label, useUIVariant } from '@olwiba/cn';
+import { cn, Label } from '@olwiba/cn';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 import { Badge } from '../primitives/Badge';
 import { Button } from '../primitives/Button';
 import { Input } from '../primitives/Input';
@@ -24,6 +25,8 @@ export interface ContactSectionProps {
   successDescription?: string;
   sendAnotherLabel?: string;
   onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void | Promise<void>;
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 const PHONE_PREFIXES = [
@@ -55,15 +58,10 @@ export function ContactSection({
   successDescription = defaults.successDescription,
   sendAnotherLabel = defaults.sendAnotherLabel,
   onSubmit,
+  surface,
 }: ContactSectionProps = {}) {
   const [submitted, setSubmitted] = React.useState(false);
-  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',
-  );
+  const sectionClasses = useSectionSurface(surface);
 
   async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();

package/src/marketing/CtaSection.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { ArrowRight, Rocket, Sparkles } from 'lucide-react';
 import { cn, useUIVariant } from '@olwiba/cn';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 import { Button } from '../primitives/Button';
 import { FadeIn } from '../motion/FadeIn';
 import { useIntersectionObserver } from '../hooks/use-intersection-observer';
@@ -24,6 +25,8 @@ export interface CtaSectionProps {
   /** (showcase) Watermark icon rendered behind the content. @default <Rocket /> */
   icon?: React.ReactNode;
   renderLink?: AppShellRenderLink;
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) => (
@@ -102,14 +105,11 @@ export function CtaSection(props: CtaSectionProps) {
     footnote,
     variant = 'default',
     renderLink = defaultRenderLink,
+    surface,
   } = props;
-  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',
-  )
+  // Still read directly: `mode` also drives the badge icon's rounding below.
+  const mode = useUIVariant();
+  const sectionClasses = useSectionSurface(surface);
 
   if (variant === 'showcase') {
     return <ShowcaseCta {...props} sectionClasses={sectionClasses} />;

package/src/marketing/FaqSection.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, cn, useUIVariant } from '@olwiba/cn';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@olwiba/cn';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 import { SectionTitle } from './SectionTitle';
 import { FadeIn } from '../motion/FadeIn';
 
@@ -9,6 +10,8 @@ export interface FaqSectionProps {
   description?: string;
   badge?: string;
   items: Array<{ question: string; answer: string }>;
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 export function FaqSection({
@@ -16,14 +19,9 @@ export function FaqSection({
   description = 'Everything you need to know before getting started.',
   badge = 'FAQ',
   items,
+  surface,
 }: FaqSectionProps) {
-  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',
-  )
+  const sectionClasses = useSectionSurface(surface);
   return (
     <section className={sectionClasses}>
       <div className="px-6 py-14 sm:px-10 sm:py-20">

package/src/marketing/FeatureMarqueeSection.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import type { LucideIcon } from 'lucide-react';
-import { cn, useUIVariant } from '@olwiba/cn';
+import { cn } from '@olwiba/cn';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 import { SectionTitle } from './SectionTitle';
 import { FadeIn } from '../motion/FadeIn';
 
@@ -22,6 +23,8 @@ export interface FeatureMarqueeSectionProps {
   rows: FeatureMarqueeRow[];
   speed?: 'slow' | 'normal' | 'fast';
   pauseOnHover?: boolean;
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 const speedDuration = {
@@ -37,16 +40,10 @@ export function FeatureMarqueeSection({
   rows,
   speed = 'normal',
   pauseOnHover = true,
+  surface,
 }: 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',
-  );
+  const sectionClasses = useSectionSurface(surface);
 
   return (
     <section className={sectionClasses}>

package/src/marketing/FeaturesSection.tsx

@@ -1,12 +1,13 @@
 'use client';
 
 import type { LucideIcon } from 'lucide-react';
-import { cn, useUIVariant } from '@olwiba/cn';
+import { cn } from '@olwiba/cn';
 import { FeatureCard } from '../components/FeatureCard';
 import { Carousel } from '../mechanics/Carousel';
 import { SectionTitle } from './SectionTitle';
 import { StaggerChildren } from '../motion/StaggerChildren';
 import { FadeIn } from '../motion/FadeIn';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 
 export interface FeaturesSectionProps {
   title?: string;
@@ -15,6 +16,8 @@ export interface FeaturesSectionProps {
   features: Array<{ icon: LucideIcon; title: string; description: string; href?: string }>;
   /** How the feature cards are arranged. @default 'grid' */
   layout?: 'grid' | 'carousel';
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 export function FeaturesSection({
@@ -23,14 +26,9 @@ export function FeaturesSection({
   badge = 'Features',
   features,
   layout = 'grid',
+  surface,
 }: FeaturesSectionProps) {
-  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',
-  )
+  const sectionClasses = useSectionSurface(surface);
   const cards = features.map((feature) => (
     <FeatureCard
       key={feature.title}

package/src/marketing/GroupedFeaturesSection.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import type { LucideIcon } from 'lucide-react';
-import { cn, useUIVariant } from '@olwiba/cn';
 import { FeatureCard } from '../components/FeatureCard';
 import { SectionTitle } from './SectionTitle';
 import { StaggerChildren } from '../motion/StaggerChildren';
 import { FadeIn } from '../motion/FadeIn';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 
 export interface GroupedFeatureGroup {
   label: string;
@@ -17,6 +17,8 @@ export interface GroupedFeaturesSectionProps {
   title?: string;
   description?: string;
   groups: GroupedFeatureGroup[];
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 export function GroupedFeaturesSection({
@@ -24,14 +26,9 @@ export function GroupedFeaturesSection({
   title = 'Everything you need to ship',
   description,
   groups,
+  surface,
 }: GroupedFeaturesSectionProps) {
-  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',
-  );
+  const sectionClasses = useSectionSurface(surface);
 
   return (
     <section className={sectionClasses}>

package/src/marketing/HeroSection.tsx

@@ -14,8 +14,21 @@ export interface HeroSectionProps {
   heading: string;
   badge?: string;
   description: string;
-  primaryCta: { label: string; href: string };
+  /** Ignored when `primarySlot` is given. */
+  primaryCta?: { label: string; href: string };
   secondaryCta?: { label: string; href: string };
+  /**
+   * Replaces the primary button with your own control — a search field, a
+   * short form, an email capture.
+   *
+   * A hero whose first action *is* the product converts better than one that
+   * links to a page where the product starts. `secondaryCta` still renders
+   * beside it, so "…or see pricing" survives.
+   *
+   * Rendered full-width above the secondary CTA on small screens, since a
+   * field sharing a row with a button gets squeezed to nothing on a phone.
+   */
+  primarySlot?: React.ReactNode;
   heroImage?: React.ReactNode;
   media?: 'image' | 'phone' | 'none';
   phoneSize?: 'sm' | 'md' | 'lg';
@@ -34,6 +47,7 @@ export function HeroSection({
   description,
   primaryCta,
   secondaryCta,
+  primarySlot,
   heroImage,
   media = 'image',
   phoneSize = 'lg',
@@ -60,16 +74,26 @@ export function HeroSection({
               <p className="max-w-lg text-pretty text-lg text-muted-foreground">
                 {description}
               </p>
-              <div className="flex flex-wrap items-center gap-3">
-                {renderLink({
-                  href: primaryCta.href,
-                  children: (
-                    <Button size="lg">
-                      {primaryCta.label}
-                      <ArrowRight className="ml-2 size-4" />
-                    </Button>
-                  ),
-                })}
+              <div
+                className={cn(
+                  'flex gap-3',
+                  primarySlot
+                    ? 'flex-col items-stretch sm:flex-row sm:items-center'
+                    : 'flex-wrap items-center',
+                )}
+              >
+                {primarySlot ?? (
+                  primaryCta &&
+                  renderLink({
+                    href: primaryCta.href,
+                    children: (
+                      <Button size="lg">
+                        {primaryCta.label}
+                        <ArrowRight className="ml-2 size-4" />
+                      </Button>
+                    ),
+                  })
+                )}
                 {secondaryCta &&
                   renderLink({
                     href: secondaryCta.href,

package/src/marketing/NewsletterSection.tsx

@@ -2,7 +2,8 @@
 
 import * as React from 'react';
 import { ArrowRight, Mail } from 'lucide-react';
-import { cn, useUIVariant } from '@olwiba/cn';
+import { cn } from '@olwiba/cn';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 import { Badge } from '../primitives/Badge';
 import { Button } from '../primitives/Button';
 import { Input } from '../primitives/Input';
@@ -18,6 +19,8 @@ export interface NewsletterSectionProps {
   successTitle?: string;
   successDescription?: string;
   onSubscribe?: (email: string) => void | Promise<void>;
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 const defaults = {
@@ -44,16 +47,11 @@ export function NewsletterSection({
   successTitle = defaults.successTitle,
   successDescription = defaults.successDescription,
   onSubscribe,
+  surface,
 }: NewsletterSectionProps = {}) {
   const [email, setEmail] = React.useState('');
   const [submitted, setSubmitted] = React.useState(false);
-  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',
-  );
+  const sectionClasses = useSectionSurface(surface);
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();

package/src/marketing/PricingSection.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import * as React from 'react';
-import { Badge, Button, cn, useUIVariant } from '@olwiba/cn';
+import { Badge, Button, cn } from '@olwiba/cn';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 import { PricingCard, type PricingCardProps, type PricingFeature } from '../components/PricingCard';
 import { StaggerChildren } from '../motion/StaggerChildren';
 import { CountdownTimer } from '../motion/CountdownTimer';
@@ -147,6 +148,14 @@ export interface PricingSectionProps {
    * mode.
    */
   priceEffect?: PricingCardProps['priceEffect'];
+  /**
+   * How the section sits on the page. @default 'card'
+   *
+   * Named `surface` rather than following the `mode` convention the other
+   * sections use, because `mode` on this component already means
+   * subscription-vs-one-time.
+   */
+  surface?: MarketingSurface;
 }
 
 const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) => (
@@ -172,6 +181,7 @@ export function PricingSection({
   onSelectPlan,
   pendingPlanName,
   priceEffect,
+  surface,
 }: PricingSectionProps) {
   const [annual, setAnnual] = React.useState(false);
   const isOneTime = mode === 'one-time';
@@ -190,13 +200,7 @@ export function PricingSection({
   );
   // A single cadence is just a label for the price — nothing to switch between.
   const showToggle = useCadences ? cadences!.length > 1 : !isOneTime;
-  const uiMode = useUIVariant();
-  const sectionClasses = cn(
-    'overflow-hidden bg-card',
-    uiMode === 'smooth' && 'rounded-3xl border',
-    uiMode === 'playful' && 'rounded-2xl border-primary/25 border',
-    !uiMode && 'rounded-2xl border',
-  );
+  const sectionClasses = useSectionSurface(surface);
 
   return (
     <section className={sectionClasses}>

package/src/marketing/QualificationSection.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import { Check, X } from 'lucide-react';
-import { cn, useUIVariant } from '@olwiba/cn';
+import { cn } from '@olwiba/cn';
 import { SectionTitle } from './SectionTitle';
 import { FadeIn } from '../motion/FadeIn';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 
 export interface QualificationItem {
   text: string;
@@ -20,6 +21,8 @@ export interface QualificationSectionProps {
   title?: string;
   description?: string;
   columns: [QualificationColumn, QualificationColumn];
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 export function QualificationSection({
@@ -27,14 +30,9 @@ export function QualificationSection({
   title = 'Is this for you?',
   description,
   columns,
+  surface,
 }: QualificationSectionProps) {
-  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',
-  );
+  const sectionClasses = useSectionSurface(surface);
 
   return (
     <section className={sectionClasses}>

package/src/marketing/StatsSection.tsx

@@ -1,15 +1,18 @@
 'use client';
 
-import { Separator, cn, useUIVariant } from '@olwiba/cn';
+import { Separator } from '@olwiba/cn';
 import { SectionTitle } from './SectionTitle';
 import { StaggerChildren } from '../motion/StaggerChildren';
 import { CountUp } from '../motion/CountUp';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 
 export interface StatsSectionProps {
   title?: string;
   description?: string;
   badge?: string;
   stats: Array<{ value: string; label: string; description?: string }>;
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 function parseStatValue(value: string) {
@@ -32,14 +35,9 @@ export function StatsSection({
   description,
   badge = 'By the numbers',
   stats,
+  surface,
 }: StatsSectionProps) {
-  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',
-  )
+  const sectionClasses = useSectionSurface(surface);
   return (
     <section className={sectionClasses}>
       <div className="relative px-6 py-14 sm:px-10 sm:py-20">

package/src/marketing/StepsSection.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import * as React from 'react';
-import { cn, useUIVariant } from '@olwiba/cn';
+import { cn } from '@olwiba/cn';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 import { SectionTitle } from './SectionTitle';
 import { FadeIn } from '../motion/FadeIn';
 
@@ -26,6 +27,8 @@ export interface StepsSectionProps {
   variant?: 'default' | 'timeline';
   /** Timeline only — step groups with optional interstitial content; overrides `steps`. Numbering continues across groups. */
   groups?: StepGroup[];
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 function TimelineGroup({
@@ -88,14 +91,9 @@ export function StepsSection({
   steps,
   variant = 'default',
   groups,
+  surface,
 }: StepsSectionProps) {
-  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',
-  );
+  const sectionClasses = useSectionSurface(surface);
 
   if (variant === 'timeline') {
     const resolvedGroups: StepGroup[] = groups ?? (steps ? [{ steps }] : []);

package/src/marketing/TeamSection.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { Github, Linkedin, Twitter } from 'lucide-react';
-import { Avatar, AvatarFallback, AvatarImage, cn, useUIVariant } from '@olwiba/cn';
+import { Avatar, AvatarFallback, AvatarImage } from '@olwiba/cn';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 import { Badge } from '../primitives/Badge';
 
 export interface TeamMember {
@@ -49,6 +50,8 @@ export interface TeamSectionProps {
   badge?: string;
   title?: string;
   description?: string;
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 export function TeamSection({
@@ -56,14 +59,9 @@ export function TeamSection({
   badge = 'Team',
   title = 'The people behind Olwiba',
   description = 'A small team with deep experience in design systems, open source, and developer tooling.',
+  surface,
 }: TeamSectionProps) {
-  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',
-  );
+  const sectionClasses = useSectionSurface(surface);
   return (
     <section className={sectionClasses}>
       <div className="px-6 py-14 sm:px-10 sm:py-20">

package/src/marketing/TechStackSection.tsx

@@ -4,6 +4,7 @@ import type { LucideIcon } from 'lucide-react';
 import { cn, useUIVariant } from '@olwiba/cn';
 import { SectionTitle } from './SectionTitle';
 import { StaggerChildren } from '../motion/StaggerChildren';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 
 export interface TechStackItem {
   icon: LucideIcon;
@@ -17,6 +18,8 @@ export interface TechStackSectionProps {
   title?: string;
   description?: string;
   items: TechStackItem[];
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 export function TechStackSection({
@@ -24,14 +27,11 @@ export function TechStackSection({
   title = 'The stack',
   description,
   items,
+  surface,
 }: TechStackSectionProps) {
+  // Still read directly: `mode` also drives the per-item tile rounding below.
   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',
-  );
+  const sectionClasses = useSectionSurface(surface);
 
   return (
     <section className={sectionClasses}>

package/src/marketing/TestimonialsSection.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import { cn, useUIVariant } from '@olwiba/cn';
 import { TestimonialCard } from '../components/TestimonialCard';
 import { SectionTitle } from './SectionTitle';
 import { StaggerChildren } from '../motion/StaggerChildren';
+import { useSectionSurface, type MarketingSurface } from './section-surface';
 
 export interface TestimonialsSectionProps {
   title?: string;
@@ -18,6 +18,8 @@ export interface TestimonialsSectionProps {
     initials?: string;
     rating?: number;
   }>;
+  /** How the section sits on the page. @default 'card' */
+  surface?: MarketingSurface;
 }
 
 export function TestimonialsSection({
@@ -25,14 +27,9 @@ export function TestimonialsSection({
   description = "Here's what engineers and product teams say after using Olwiba in production.",
   badge = 'Testimonials',
   testimonials,
+  surface,
 }: TestimonialsSectionProps) {
-  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',
-  )
+  const sectionClasses = useSectionSurface(surface);
   return (
     <section className={sectionClasses}>
       <div className="px-6 py-14 sm:px-10 sm:py-20">