@olwiba/ui 0.1.15 → 0.2.1

package/src/components/DataTable.tsx

@@ -135,7 +135,10 @@ export function DataTable<TData>({
                   const canSort = header.column.getCanSort();
                   const sortDir = header.column.getIsSorted();
                   return (
-                    <TableHead key={header.id}>
+                    <TableHead
+                      key={header.id}
+                      aria-sort={sortDir === 'asc' ? 'ascending' : sortDir === 'desc' ? 'descending' : canSort ? 'none' : undefined}
+                    >
                       {header.isPlaceholder ? null : canSort ? (
                         <button
                           type="button"
@@ -161,7 +164,11 @@ export function DataTable<TData>({
                   key={row.id}
                   data-state={row.getIsSelected() ? 'selected' : undefined}
                   onClick={() => onRowClick?.(row.original)}
-                  className={cn(onRowClick && 'cursor-pointer')}
+                  tabIndex={onRowClick ? 0 : undefined}
+                  onKeyDown={onRowClick ? (e) => {
+                    if (e.key === 'Enter' && e.target === e.currentTarget) onRowClick(row.original);
+                  } : undefined}
+                  className={cn(onRowClick && 'cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring')}
                 >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
@@ -179,20 +186,23 @@ export function DataTable<TData>({
         </Table>
       </div>
 
-      {pageSize > 0 && table.getPageCount() > 1 && (
+      {(selectable || (pageSize > 0 && table.getPageCount() > 1)) && (
         <div className="flex items-center justify-between">
           <p className="text-sm text-muted-foreground">
-            {selectable && `${table.getFilteredSelectedRowModel().rows.length} of ${table.getFilteredRowModel().rows.length} selected · `}
-            Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+            {selectable && `${table.getFilteredSelectedRowModel().rows.length} of ${table.getFilteredRowModel().rows.length} selected`}
+            {selectable && pageSize > 0 && table.getPageCount() > 1 && ' · '}
+            {pageSize > 0 && table.getPageCount() > 1 && `Page ${table.getState().pagination.pageIndex + 1} of ${table.getPageCount()}`}
           </p>
-          <div className="flex gap-2">
-            <Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
-              <ChevronLeft className="size-4" /> Previous
-            </Button>
-            <Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
-              Next <ChevronRight className="size-4" />
-            </Button>
-          </div>
+          {pageSize > 0 && table.getPageCount() > 1 && (
+            <div className="flex gap-2">
+              <Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
+                <ChevronLeft className="size-4" /> Previous
+              </Button>
+              <Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
+                Next <ChevronRight className="size-4" />
+              </Button>
+            </div>
+          )}
         </div>
       )}
     </div>

package/src/components/FileUpload.tsx

@@ -66,6 +66,9 @@ export function FileUpload({
   const [isDragging, setIsDragging] = React.useState(false);
   const [validationError, setValidationError] = React.useState<string | null>(null);
   const inputRef = React.useRef<HTMLInputElement>(null);
+  // dragenter/dragleave fire for every child element crossed — count them so the
+  // highlight doesn't flicker while moving over the icon/text inside the zone
+  const dragDepth = React.useRef(0);
   const files = filesProp ?? internalFiles;
 
   const setFiles = React.useCallback(
@@ -92,7 +95,8 @@ export function FileUpload({
   const handleFiles = (fileList: FileList | null) => {
     if (!fileList || disabled) return;
     const incoming = Array.from(fileList);
-    const room = maxFiles ? Math.max(0, maxFiles - files.length) : Infinity;
+    // Single mode replaces the current file, so the existing queue never counts against maxFiles
+    const room = maxFiles && multiple ? Math.max(0, maxFiles - files.length) : maxFiles || Infinity;
     if (maxFiles && room <= 0) {
       setValidationError(`You can only add up to ${maxFiles} file${maxFiles === 1 ? '' : 's'}.`);
       return;
@@ -124,11 +128,26 @@ export function FileUpload({
         role="button"
         tabIndex={disabled ? -1 : 0}
         onClick={() => !disabled && inputRef.current?.click()}
-        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') inputRef.current?.click(); }}
-        onDragOver={(e) => { e.preventDefault(); if (!disabled) setIsDragging(true); }}
-        onDragLeave={() => setIsDragging(false)}
+        onKeyDown={(e) => {
+          if (disabled) return;
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            inputRef.current?.click();
+          }
+        }}
+        onDragOver={(e) => e.preventDefault()}
+        onDragEnter={(e) => {
+          e.preventDefault();
+          dragDepth.current += 1;
+          if (!disabled) setIsDragging(true);
+        }}
+        onDragLeave={() => {
+          dragDepth.current = Math.max(0, dragDepth.current - 1);
+          if (dragDepth.current === 0) setIsDragging(false);
+        }}
         onDrop={(e) => {
           e.preventDefault();
+          dragDepth.current = 0;
           setIsDragging(false);
           handleFiles(e.dataTransfer.files);
         }}
@@ -154,7 +173,7 @@ export function FileUpload({
         />
       </div>
 
-      {validationError && <p className="text-sm font-medium text-destructive">{validationError}</p>}
+      {validationError && <p role="alert" className="text-sm font-medium text-destructive">{validationError}</p>}
 
       {files.length > 0 && (
         <ul className="space-y-2">

package/src/components/NotificationsPopover.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import * as React from 'react';
+import { Bell, Inbox } from 'lucide-react';
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  cn,
+} from '@olwiba/cn';
+import { Button } from '../primitives/Button';
+
+export interface NotificationItem {
+  id: string;
+  title: string;
+  description?: string;
+  /** Pre-formatted timestamp, e.g. "2h ago" or "Yesterday". */
+  timestamp?: string;
+  read?: boolean;
+  /** Avatar image — takes precedence over `icon`. */
+  avatar?: string;
+  icon?: React.ReactNode;
+}
+
+export interface NotificationsPopoverProps {
+  notifications: NotificationItem[];
+  onNotificationClick?: (notification: NotificationItem) => void;
+  /** Shows a "Mark all read" action in the header when there are unread items. */
+  onMarkAllRead?: () => void;
+  title?: string;
+  emptyMessage?: string;
+  /** Popover alignment relative to the bell button. @default 'end' */
+  align?: 'start' | 'center' | 'end';
+  /** Controlled open state — omit to let the component manage it internally. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+}
+
+/**
+ * Bell button + persistent notification inbox. Complements `notify()` toasts:
+ * a toast announces an event as it happens, this popover holds the history.
+ * Presentation-only — pass `notifications` from your own data layer and
+ * persist read state via `onMarkAllRead`/`onNotificationClick`.
+ */
+export function NotificationsPopover({
+  notifications,
+  onNotificationClick,
+  onMarkAllRead,
+  title = 'Notifications',
+  emptyMessage = 'Nothing new — you’re all caught up.',
+  align = 'end',
+  open,
+  onOpenChange,
+  className,
+}: NotificationsPopoverProps) {
+  const unreadCount = notifications.filter((n) => !n.read).length;
+
+  return (
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger asChild>
+        <Button variant="ghost" size="icon" className={cn('relative size-8', className)}>
+          <Bell className="size-4" />
+          {unreadCount > 0 && (
+            <span className="absolute -right-0.5 -top-0.5 flex min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-semibold leading-4 text-primary-foreground">
+              {unreadCount > 9 ? '9+' : unreadCount}
+            </span>
+          )}
+          <span className="sr-only">
+            {title}{unreadCount > 0 ? ` (${unreadCount} unread)` : ''}
+          </span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align={align} className="w-80 p-0">
+        <div className="flex items-center justify-between border-b px-4 py-3">
+          <p className="text-sm font-semibold">{title}</p>
+          {onMarkAllRead && unreadCount > 0 && (
+            <button
+              type="button"
+              onClick={onMarkAllRead}
+              className="text-xs font-medium text-muted-foreground hover:text-foreground"
+            >
+              Mark all read
+            </button>
+          )}
+        </div>
+
+        {notifications.length === 0 ? (
+          <div className="flex flex-col items-center gap-2 px-4 py-10 text-center">
+            <Inbox className="size-6 text-muted-foreground" />
+            <p className="text-sm text-muted-foreground">{emptyMessage}</p>
+          </div>
+        ) : (
+          <ul className="max-h-80 overflow-y-auto">
+            {notifications.map((notification) => (
+              <li key={notification.id} className="border-b last:border-b-0">
+                <button
+                  type="button"
+                  onClick={() => onNotificationClick?.(notification)}
+                  className={cn(
+                    'flex w-full items-start gap-3 px-4 py-3 text-left transition-colors hover:bg-muted/60',
+                    !notification.read && 'bg-muted/40',
+                  )}
+                >
+                  <span
+                    aria-hidden
+                    className={cn(
+                      'mt-1.5 size-2 shrink-0 rounded-full',
+                      notification.read ? 'bg-transparent' : 'bg-primary',
+                    )}
+                  />
+                  {notification.avatar ? (
+                    <Avatar className="size-8 shrink-0">
+                      <AvatarImage src={notification.avatar} alt="" />
+                      <AvatarFallback>{notification.title.slice(0, 2).toUpperCase()}</AvatarFallback>
+                    </Avatar>
+                  ) : notification.icon ? (
+                    <span className="mt-0.5 shrink-0 text-muted-foreground">{notification.icon}</span>
+                  ) : null}
+                  <span className="min-w-0 flex-1">
+                    <span className={cn('block truncate text-sm', !notification.read && 'font-medium')}>
+                      {notification.title}
+                    </span>
+                    {notification.description && (
+                      <span className="mt-0.5 line-clamp-2 block text-xs text-muted-foreground">
+                        {notification.description}
+                      </span>
+                    )}
+                    {notification.timestamp && (
+                      <span className="mt-1 block text-xs text-muted-foreground/70">
+                        {notification.timestamp}
+                      </span>
+                    )}
+                  </span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/Notify.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { toast } from 'sonner';
-import { CheckCircle2, Inbox, Info, X } from 'lucide-react';
+import { AlertCircle, AlertTriangle, CheckCircle2, Inbox, Info, X } from 'lucide-react';
 import { cn } from '@olwiba/cn';
 import { Button } from '../primitives/Button';
 
@@ -12,7 +12,7 @@ export interface NotifyAction {
 }
 
 export interface NotificationToastProps {
-  variant?: 'success' | 'info' | 'message';
+  variant?: 'success' | 'info' | 'warning' | 'error' | 'message';
   title: string;
   description?: string;
   /** Avatar image — overrides the variant icon (e.g. for a message-from-a-person toast). */
@@ -27,6 +27,8 @@ export interface NotificationToastProps {
 const variantIcon = {
   success: <CheckCircle2 className="size-5 text-primary" />,
   info: <Info className="size-5 text-muted-foreground" />,
+  warning: <AlertTriangle className="size-5 text-amber-500 dark:text-amber-400" />,
+  error: <AlertCircle className="size-5 text-destructive" />,
   message: <Inbox className="size-5 text-muted-foreground" />,
 } as const;
 

package/src/index.ts

@@ -84,10 +84,8 @@ export { FeaturesSection, type FeaturesSectionProps } from './marketing/Features
 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, type TeamMember, type TeamSectionProps } from './marketing/TeamSection';
@@ -115,6 +113,10 @@ export { CountdownTimer, type CountdownTimerProps } from './motion/CountdownTime
 export { AnimatedPill, type AnimatedPillProps } from './motion/AnimatedPill';
 export { PageTransition, type PageTransitionProps } from './motion/PageTransition';
 
+// ─── Mechanics — behavior wrappers that play any children ────────────────────
+export { Carousel, type CarouselProps } from './mechanics/Carousel';
+export { Sortable, type SortableProps } from './mechanics/Sortable';
+
 // ─── Components — interactive ────────────────────────────────────────────────
 export { Spotlight, type SpotlightProps, type SpotlightGroup, type SpotlightItem } from './components/Spotlight';
 export { Dock, type DockProps, type DockItem } from './components/Dock';
@@ -124,10 +126,13 @@ export { CommandMenu, type CommandMenuProps, type CommandMenuGroup, type Command
 
 // ─── Components — data ───────────────────────────────────────────────────────
 export { DataTable, type DataTableProps, type DataTableColumn } from './components/DataTable';
+export { Chart, type ChartProps, type ChartSeries } from './components/Chart';
 export { FileUpload, type FileUploadProps, type FileUploadEntry } from './components/FileUpload';
 
 // ─── Components — notifications ──────────────────────────────────────────────
 export { NotificationToast, type NotificationToastProps, notify, type NotifyOptions, type NotifyAction } from './components/Notify';
+export { NotificationsPopover, type NotificationsPopoverProps, type NotificationItem } from './components/NotificationsPopover';
+export { ActivityFeed, type ActivityFeedProps, type ActivityFeedItem } from './components/ActivityFeed';
 
 // ─── Components — device mockups ────────────────────────────────────────────
 export { PhoneFrame, type PhoneFrameProps } from './components/PhoneFrame';

package/src/marketing/ContactSection.tsx

@@ -2,7 +2,11 @@
 
 import * as React from 'react';
 import { ChevronDown, Mail, MessageSquare, Send, type LucideIcon } from 'lucide-react';
-import { Badge, Button, Input, Label, Textarea } from '@olwiba/cn';
+import { cn, Label, useUIVariant } from '@olwiba/cn';
+import { Badge } from '../primitives/Badge';
+import { Button } from '../primitives/Button';
+import { Input } from '../primitives/Input';
+import { Textarea } from '../primitives/Textarea';
 
 export type ContactInfoItem = {
   label: string;
@@ -53,6 +57,13 @@ export function ContactSection({
   onSubmit,
 }: 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',
+  );
 
   async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
@@ -61,7 +72,7 @@ export function ContactSection({
   }
 
   return (
-    <section className="overflow-hidden rounded-2xl border bg-card">
+    <section className={sectionClasses}>
       <div className="px-6 py-14 sm:px-10 sm:py-20">
 
         {/* Header */}

package/src/marketing/CtaSection.tsx

@@ -1,16 +1,28 @@
 'use client';
 
-import { ArrowRight, Sparkles } from 'lucide-react';
-import { Button, cn, useUIVariant } from '@olwiba/cn';
+import * as React from 'react';
+import { ArrowRight, Rocket, Sparkles } from 'lucide-react';
+import { cn, useUIVariant } from '@olwiba/cn';
+import { Button } from '../primitives/Button';
 import { FadeIn } from '../motion/FadeIn';
+import { useIntersectionObserver } from '../hooks/use-intersection-observer';
 import type { AppShellRenderLink } from '../app/AppShell';
 
 export interface CtaSectionProps {
   heading: string;
-  description: string;
+  description?: string;
   primaryCta: { label: string; href: string };
   secondaryCta?: { label: string; href: string };
   footnote?: string;
+  /**
+   * Visual treatment of the section.
+   * - `'default'` — badge icon, radial glow, primary + secondary CTAs
+   * - `'showcase'` — large watermark icon with a scroll-reveal, single pill CTA
+   * @default 'default'
+   */
+  variant?: 'default' | 'showcase';
+  /** (showcase) Watermark icon rendered behind the content. @default <Rocket /> */
+  icon?: React.ReactNode;
   renderLink?: AppShellRenderLink;
 }
 
@@ -18,14 +30,79 @@ const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) =>
   <a href={href} className={className}>{children}</a>
 );
 
-export function CtaSection({
+function ShowcaseCta({
   heading,
   description,
   primaryCta,
-  secondaryCta,
   footnote,
+  icon,
   renderLink = defaultRenderLink,
-}: CtaSectionProps) {
+  sectionClasses,
+}: CtaSectionProps & { sectionClasses: string }) {
+  const [ref, intersecting] = useIntersectionObserver({ threshold: 0.15 });
+  const [visible, setVisible] = React.useState(false);
+
+  React.useEffect(() => {
+    if (intersecting) setVisible(true);
+  }, [intersecting]);
+
+  return (
+    <section
+      ref={ref as React.RefObject<HTMLElement>}
+      className={cn(
+        sectionClasses,
+        'relative transition-[opacity,transform] duration-700 ease-out',
+        visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6',
+      )}
+    >
+      {/* Decorative watermark icon */}
+      <div
+        className="pointer-events-none absolute inset-0 flex items-center justify-center"
+        style={{
+          opacity: visible ? 0.1 : 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" strokeWidth={0.75} />}
+      </div>
+
+      <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: (
+              <Button size="lg" className="rounded-full px-6">
+                {primaryCta.label}
+                <ArrowRight className="ml-2 size-4" />
+              </Button>
+            ),
+          })}
+        </div>
+        {footnote && (
+          <p className="mt-5 text-sm text-muted-foreground">{footnote}</p>
+        )}
+      </div>
+    </section>
+  );
+}
+
+export function CtaSection(props: CtaSectionProps) {
+  const {
+    heading,
+    description,
+    primaryCta,
+    secondaryCta,
+    footnote,
+    variant = 'default',
+    renderLink = defaultRenderLink,
+  } = props;
   const mode = useUIVariant()
   const sectionClasses = cn(
     'overflow-hidden bg-card',
@@ -33,6 +110,11 @@ export function CtaSection({
     mode === 'playful' && 'rounded-2xl border-primary/25 border',
     !mode && 'rounded-2xl border',
   )
+
+  if (variant === 'showcase') {
+    return <ShowcaseCta {...props} sectionClasses={sectionClasses} />;
+  }
+
   return (
     <section className={sectionClasses}>
       <div className="relative px-6 py-16 sm:px-10 sm:py-24">
@@ -45,9 +127,11 @@ export function CtaSection({
             <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
               {heading}
             </h2>
-            <p className="mx-auto mt-4 max-w-lg text-pretty text-muted-foreground">
-              {description}
-            </p>
+            {description && (
+              <p className="mx-auto mt-4 max-w-lg text-pretty text-muted-foreground">
+                {description}
+              </p>
+            )}
             <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
               {renderLink({
                 href: primaryCta.href,

package/src/marketing/FeaturesSection.tsx

@@ -3,14 +3,18 @@
 import type { LucideIcon } from 'lucide-react';
 import { cn, useUIVariant } 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';
 
 export interface FeaturesSectionProps {
   title?: string;
   description?: string;
   badge?: string;
   features: Array<{ icon: LucideIcon; title: string; description: string; href?: string }>;
+  /** How the feature cards are arranged. @default 'grid' */
+  layout?: 'grid' | 'carousel';
 }
 
 export function FeaturesSection({
@@ -18,6 +22,7 @@ export function FeaturesSection({
   description = 'A complete system of components, blocks, and hooks designed to work together - and get out of your way.',
   badge = 'Features',
   features,
+  layout = 'grid',
 }: FeaturesSectionProps) {
   const mode = useUIVariant()
   const sectionClasses = cn(
@@ -26,23 +31,33 @@ export function FeaturesSection({
     mode === 'playful' && 'rounded-2xl border-primary/25 border',
     !mode && 'rounded-2xl border',
   )
+  const cards = features.map((feature) => (
+    <FeatureCard
+      key={feature.title}
+      icon={feature.icon}
+      title={feature.title}
+      description={feature.description}
+      href={feature.href}
+    />
+  ));
+
   return (
     <section className={sectionClasses}>
       <div className="px-6 py-14 sm:px-10 sm:py-20">
-        <div className="mx-auto max-w-4xl">
+        <div className={cn('mx-auto', layout === 'carousel' ? 'max-w-5xl' : 'max-w-4xl')}>
           <SectionTitle title={title} description={description} badge={badge} />
 
-          <StaggerChildren className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
-            {features.map((feature) => (
-              <FeatureCard
-                key={feature.title}
-                icon={feature.icon}
-                title={feature.title}
-                description={feature.description}
-                href={feature.href}
-              />
-            ))}
-          </StaggerChildren>
+          {layout === 'carousel' ? (
+            <FadeIn direction="up">
+              <Carousel className="mt-10" ariaLabel={title}>
+                {cards}
+              </Carousel>
+            </FadeIn>
+          ) : (
+            <StaggerChildren className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+              {cards}
+            </StaggerChildren>
+          )}
         </div>
       </div>
     </section>

package/src/marketing/HeroSection.tsx

@@ -2,7 +2,9 @@
 
 import * as React from 'react';
 import { ArrowRight } from 'lucide-react';
-import { Avatar, AvatarFallback, AvatarImage, Badge, Button } from '@olwiba/cn';
+import { Avatar, AvatarFallback, AvatarImage, cn, useUIVariant } from '@olwiba/cn';
+import { Badge } from '../primitives/Badge';
+import { Button } from '../primitives/Button';
 import { FadeIn } from '../motion/FadeIn';
 import { PhoneFrame } from '../components/PhoneFrame';
 import type { AppShellRenderLink } from '../app/AppShell';
@@ -39,6 +41,7 @@ export function HeroSection({
   socialProofText,
   renderLink = defaultRenderLink,
 }: HeroSectionProps) {
+  const mode = useUIVariant();
   return (
     <section className="overflow-hidden">
       <div className={marketingSectionSpacing.hero}>
@@ -90,7 +93,7 @@ export function HeroSection({
                   </PhoneFrame>
                 </div>
               ) : (
-                <div className="overflow-hidden rounded-2xl">
+                <div className={cn('overflow-hidden', mode === 'smooth' ? 'rounded-3xl' : 'rounded-2xl')}>
                   {heroImage}
                 </div>
               )}

package/src/marketing/NewsletterSection.tsx

@@ -2,7 +2,10 @@
 
 import * as React from 'react';
 import { ArrowRight, Mail } from 'lucide-react';
-import { Badge, Button, Input } from '@olwiba/cn';
+import { cn, useUIVariant } from '@olwiba/cn';
+import { Badge } from '../primitives/Badge';
+import { Button } from '../primitives/Button';
+import { Input } from '../primitives/Input';
 
 export interface NewsletterSectionProps {
   badge?: string;
@@ -44,6 +47,13 @@ export function NewsletterSection({
 }: 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',
+  );
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
@@ -53,7 +63,7 @@ export function NewsletterSection({
   }
 
   return (
-    <section className="overflow-hidden rounded-2xl border bg-card">
+    <section className={sectionClasses}>
       <div className="relative px-6 py-14 sm:px-10 sm:py-20">
         <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,hsl(var(--primary)/0.1),transparent_60%)]" />
         <div className="relative mx-auto max-w-xl text-center">