@olwiba/ui 0.1.1 → 0.1.3

package/package.json

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

package/src/components/FeatureCard.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import type { LucideIcon } from 'lucide-react';
 import { ArrowRight } from 'lucide-react';
-import { cn } from '@olwiba/cn';
+import { cn, useUIVariant } from '@olwiba/cn';
 
 export interface FeatureCardProps extends React.HTMLAttributes<HTMLDivElement> {
   icon: LucideIcon;
@@ -13,16 +13,28 @@ export interface FeatureCardProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export function FeatureCard({ icon: Icon, title, description, href, className, ...props }: FeatureCardProps) {
-  const content = (
+  const mode = useUIVariant();
+
+  const cardInner = (
     <div
       className={cn(
-        'group relative flex flex-col gap-4 rounded-2xl border bg-card p-6 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md',
+        'group relative flex h-full flex-col gap-4 border bg-card p-6 transition-all duration-200',
+        mode === 'playful'
+          ? 'rounded-2xl rotate-[0.3deg]'
+          : mode === 'smooth'
+            ? 'rounded-3xl hover:-translate-y-0.5 hover:shadow-md'
+            : 'rounded-2xl hover:-translate-y-0.5 hover:shadow-md',
         href && 'cursor-pointer',
-        className,
+        mode !== 'playful' && className,
       )}
-      {...props}
+      {...(mode !== 'playful' ? props : {})}
     >
-      <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground">
+      <div
+        className={cn(
+          'flex h-10 w-10 items-center justify-center bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground',
+          mode === 'smooth' ? 'rounded-2xl' : 'rounded-xl',
+        )}
+      >
         <Icon className="size-5" />
       </div>
       <div className="space-y-1.5">
@@ -37,8 +49,21 @@ export function FeatureCard({ icon: Icon, title, description, href, className, .
     </div>
   );
 
+  const content =
+    mode === 'playful' ? (
+      <div className={cn('group/playful relative h-full', className)} {...props}>
+        <div
+          aria-hidden="true"
+          className="absolute inset-0 rounded-2xl bg-border transition-transform duration-200 translate-x-[5px] translate-y-[5px] -rotate-[0.5deg] group-hover/playful:-rotate-[1.5deg] group-hover/playful:translate-x-[6px] group-hover/playful:translate-y-[6px]"
+        />
+        {cardInner}
+      </div>
+    ) : (
+      cardInner
+    );
+
   if (href) {
-    return <a href={href} className="block">{content}</a>;
+    return <a href={href} className="block h-full">{content}</a>;
   }
 
   return content;

package/src/components/ModeSwitchMinimal.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import * as React from 'react';
+import { LayoutGrid, Sparkles, Layers } from 'lucide-react';
+import { Button } from '@olwiba/cn';
+import { useOlwibaUI, type UIMode } from '../context/OlwibaUIContext';
+
+const MODES: UIMode[] = ['default', 'playful', 'smooth'];
+
+const MODE_ICONS: Record<UIMode, React.ReactNode> = {
+  default: <LayoutGrid className="size-4" />,
+  playful: <Sparkles className="size-4" />,
+  smooth: <Layers className="size-4" />,
+};
+
+const MODE_LABELS: Record<UIMode, string> = {
+  default: 'Default mode',
+  playful: 'Playful mode',
+  smooth: 'Smooth mode',
+};
+
+export function ModeSwitchMinimal() {
+  const { mode, setMode } = useOlwibaUI();
+
+  const cycle = () => {
+    const idx = MODES.indexOf(mode);
+    setMode(MODES[(idx + 1) % MODES.length]);
+  };
+
+  return (
+    <Button variant="ghost" size="icon" onClick={cycle} className="size-8" aria-label={MODE_LABELS[mode]}>
+      <span
+        key={mode}
+        className="inline-flex size-4 items-center justify-center animate-in fade-in zoom-in-75 duration-200 motion-reduce:animate-none"
+      >
+        {MODE_ICONS[mode]}
+      </span>
+    </Button>
+  );
+}

package/src/components/PricingCard.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { Check, Minus } from 'lucide-react';
-import { Badge, Button, cn, Separator } from '@olwiba/cn';
+import { Badge, Button, cn, Separator, useUIVariant } from '@olwiba/cn';
 
 export interface PricingFeature {
   label: string;
@@ -34,14 +34,21 @@ export function PricingCard({
   className,
   ...props
 }: PricingCardProps) {
-  return (
+  const mode = useUIVariant();
+
+  const cardInner = (
     <div
       className={cn(
-        'relative flex flex-col rounded-2xl border p-6',
+        'relative flex flex-col border p-6',
+        mode === 'playful'
+          ? 'rounded-2xl rotate-[0.3deg]'
+          : mode === 'smooth'
+            ? 'rounded-3xl'
+            : 'rounded-2xl',
         highlighted ? 'border-primary bg-primary/5 shadow-sm' : 'bg-card',
-        className,
+        mode !== 'playful' && className,
       )}
-      {...props}
+      {...(mode !== 'playful' ? props : {})}
     >
       {badge && (
         <div className="absolute -top-3 left-1/2 -translate-x-1/2">
@@ -87,4 +94,21 @@ export function PricingCard({
       </ul>
     </div>
   );
+
+  if (mode === 'playful') {
+    return (
+      <div className={cn('group/playful relative', className)} {...props}>
+        <div
+          aria-hidden="true"
+          className={cn(
+            'absolute inset-0 rounded-2xl transition-transform duration-200 translate-x-[5px] translate-y-[5px] -rotate-[0.5deg] group-hover/playful:-rotate-[1.5deg] group-hover/playful:translate-x-[6px] group-hover/playful:translate-y-[6px]',
+            highlighted ? 'bg-primary/20' : 'bg-border',
+          )}
+        />
+        {cardInner}
+      </div>
+    );
+  }
+
+  return cardInner;
 }

package/src/components/TestimonialCard.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { Quote, Star } from 'lucide-react';
-import { Avatar, AvatarFallback, AvatarImage, cn } from '@olwiba/cn';
+import { Avatar, AvatarFallback, AvatarImage, cn, useUIVariant } from '@olwiba/cn';
 
 export interface TestimonialCardProps extends React.HTMLAttributes<HTMLDivElement> {
   quote: string;
@@ -25,10 +25,20 @@ export function TestimonialCard({
   className,
   ...props
 }: TestimonialCardProps) {
-  return (
+  const mode = useUIVariant();
+
+  const cardInner = (
     <div
-      className={cn('flex flex-col gap-4 rounded-2xl border bg-card p-6', className)}
-      {...props}
+      className={cn(
+        'flex flex-col gap-4 border bg-card p-6',
+        mode === 'playful'
+          ? 'rounded-2xl rotate-[0.3deg]'
+          : mode === 'smooth'
+            ? 'rounded-3xl'
+            : 'rounded-2xl',
+        mode !== 'playful' && className,
+      )}
+      {...(mode !== 'playful' ? props : {})}
     >
       <Quote className="size-4 text-muted-foreground/40" />
       {rating != null && (
@@ -48,9 +58,9 @@ export function TestimonialCard({
       )}
       <p className="flex-1 text-sm leading-relaxed">{quote}</p>
       <div className="flex items-center gap-3">
-        <Avatar className="size-9 rounded-xl">
+        <Avatar className="size-9">
           <AvatarImage src={avatar} alt={name} />
-          <AvatarFallback className="rounded-xl text-xs">{initials ?? name.slice(0, 2).toUpperCase()}</AvatarFallback>
+          <AvatarFallback className="text-xs">{initials ?? name.slice(0, 2).toUpperCase()}</AvatarFallback>
         </Avatar>
         <div>
           <div className="text-sm font-medium leading-tight">{name}</div>
@@ -61,4 +71,18 @@ export function TestimonialCard({
       </div>
     </div>
   );
+
+  if (mode === 'playful') {
+    return (
+      <div className={cn('group/playful relative', className)} {...props}>
+        <div
+          aria-hidden="true"
+          className="absolute inset-0 rounded-2xl bg-border transition-transform duration-200 translate-x-[5px] translate-y-[5px] -rotate-[0.5deg] group-hover/playful:-rotate-[1.5deg] group-hover/playful:translate-x-[6px] group-hover/playful:translate-y-[6px]"
+        />
+        {cardInner}
+      </div>
+    );
+  }
+
+  return cardInner;
 }

package/src/context/OlwibaUIContext.tsx

@@ -8,11 +8,13 @@ export type UIMode = 'default' | 'playful' | 'smooth';
 interface OlwibaUIContextValue {
   isMobile: boolean;
   mode: UIMode;
+  setMode: (mode: UIMode) => void;
 }
 
 const OlwibaUIContext = React.createContext<OlwibaUIContextValue>({
   isMobile: false,
   mode: 'default',
+  setMode: () => {},
 });
 
 export interface OlwibaUIProviderProps {
@@ -33,14 +35,15 @@ export interface OlwibaUIProviderProps {
   mode?: UIMode;
 }
 
-export function OlwibaUIProvider({ children, isMobile: isMobileProp, mode = 'default' }: OlwibaUIProviderProps) {
+export function OlwibaUIProvider({ children, isMobile: isMobileProp, mode: initialMode = 'default' }: OlwibaUIProviderProps) {
   const detectedMobile = useIsMobile();
   const isMobile = isMobileProp ?? detectedMobile;
+  const [mode, setMode] = React.useState<UIMode>(initialMode);
 
   const variant = mode !== 'default' ? (mode as UIVariant) : undefined;
 
   return (
-    <OlwibaUIContext.Provider value={{ isMobile, mode }}>
+    <OlwibaUIContext.Provider value={{ isMobile, mode, setMode }}>
       <UIVariantProvider mode={variant}>
         {children}
       </UIVariantProvider>

package/src/index.ts

@@ -54,6 +54,7 @@ export {
 export { SectionTitle, type SectionTitleProps } from './marketing/SectionTitle';
 export { HeroSection, type HeroSectionProps } from './marketing/HeroSection';
 export { FeaturesSection, type FeaturesSectionProps } from './marketing/FeaturesSection';
+export { CarouselSection, type CarouselSectionProps } from './marketing/CarouselSection';
 export { CtaSection, type CtaSectionProps } from './marketing/CtaSection';
 export { PricingSection, type PricingSectionProps, type PricingPlan } from './marketing/PricingSection';
 export { TestimonialsSection, type TestimonialsSectionProps } from './marketing/TestimonialsSection';
@@ -101,6 +102,7 @@ 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 { ThemeColorUpdater } from './components/ThemeColorUpdater';
 export { VersionBanner } from './components/VersionBanner';
 export { DevBanner, type DevBannerProps } from './components/DevBanner';

package/src/marketing/CarouselSection.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import * as React from 'react';
+import type { LucideIcon } from 'lucide-react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn, useUIVariant } from '@olwiba/cn';
+import { FeatureCard } from '../components/FeatureCard';
+import { SectionTitle } from './SectionTitle';
+import { FadeIn } from '../motion/FadeIn';
+
+export interface CarouselSectionProps {
+  title?: string;
+  description?: string;
+  badge?: string;
+  features: Array<{ icon: LucideIcon; title: string; description: string; href?: string }>;
+}
+
+/**
+ * Horizontally scrolling card carousel for feature-style content.
+ * Scroll-snap based with prev/next controls — no carousel dependency.
+ */
+export function CarouselSection({
+  title = 'Explore the platform',
+  description,
+  badge = 'Features',
+  features,
+}: CarouselSectionProps) {
+  const mode = useUIVariant();
+  const trackRef = React.useRef<HTMLDivElement>(null);
+  const [canPrev, setCanPrev] = React.useState(false);
+  const [canNext, setCanNext] = React.useState(true);
+
+  const updateScrollState = React.useCallback(() => {
+    const track = trackRef.current;
+    if (!track) return;
+    setCanPrev(track.scrollLeft > 8);
+    setCanNext(track.scrollLeft < track.scrollWidth - track.clientWidth - 8);
+  }, []);
+
+  React.useEffect(() => {
+    const track = trackRef.current;
+    if (!track) return;
+    updateScrollState();
+    track.addEventListener('scroll', updateScrollState, { passive: true });
+    const observer = new ResizeObserver(updateScrollState);
+    observer.observe(track);
+    return () => {
+      track.removeEventListener('scroll', updateScrollState);
+      observer.disconnect();
+    };
+  }, [updateScrollState]);
+
+  const scrollByCard = (direction: 1 | -1) => {
+    const track = trackRef.current;
+    if (!track) return;
+    const card = track.querySelector<HTMLElement>('[data-carousel-item]');
+    const step = card ? card.offsetWidth + 24 : track.clientWidth * 0.8;
+    track.scrollBy({ left: direction * step, behavior: 'smooth' });
+  };
+
+  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 controlClasses = cn(
+    'flex size-9 items-center justify-center border bg-background text-foreground transition-colors',
+    'hover:bg-muted disabled:opacity-40 disabled:hover:bg-background',
+    mode === 'smooth' ? 'rounded-2xl' : 'rounded-xl',
+  );
+
+  return (
+    <section className={sectionClasses}>
+      <div className="px-6 py-14 sm:px-10 sm:py-20">
+        <div className="mx-auto max-w-5xl">
+          <SectionTitle title={title} description={description} badge={badge} />
+
+          <FadeIn direction="up">
+            <div className="mt-10 flex items-center justify-end gap-2">
+              <button
+                type="button"
+                aria-label="Previous"
+                className={controlClasses}
+                onClick={() => scrollByCard(-1)}
+                disabled={!canPrev}
+              >
+                <ChevronLeft className="size-4" />
+              </button>
+              <button
+                type="button"
+                aria-label="Next"
+                className={controlClasses}
+                onClick={() => scrollByCard(1)}
+                disabled={!canNext}
+              >
+                <ChevronRight className="size-4" />
+              </button>
+            </div>
+
+            <div
+              ref={trackRef}
+              className="mt-4 flex snap-x snap-mandatory gap-6 overflow-x-auto pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+            >
+              {features.map((feature) => (
+                <div
+                  key={feature.title}
+                  data-carousel-item
+                  className="w-[280px] shrink-0 snap-start sm:w-[320px]"
+                >
+                  <FeatureCard
+                    icon={feature.icon}
+                    title={feature.title}
+                    description={feature.description}
+                    href={feature.href}
+                  />
+                </div>
+              ))}
+            </div>
+          </FadeIn>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/marketing/CtaSection.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { ArrowRight, Sparkles } from 'lucide-react';
-import { Button } from '@olwiba/cn';
+import { Button, cn, useUIVariant } from '@olwiba/cn';
 import { FadeIn } from '../motion/FadeIn';
 import type { AppShellRenderLink } from '../app/AppShell';
 
@@ -26,13 +26,20 @@ export function CtaSection({
   footnote,
   renderLink = defaultRenderLink,
 }: CtaSectionProps) {
+  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="overflow-hidden rounded-2xl border bg-card">
+    <section className={sectionClasses}>
       <div className="relative px-6 py-16 sm:px-10 sm:py-24">
         <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,hsl(var(--primary)/0.15),transparent_70%)]" />
         <FadeIn direction="up">
           <div className="relative mx-auto max-w-2xl text-center">
-            <div className="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+            <div className={cn('mb-4 inline-flex h-10 w-10 items-center justify-center bg-primary/10 text-primary', mode === 'smooth' ? 'rounded-3xl' : 'rounded-2xl')}>
               <Sparkles className="size-5" />
             </div>
             <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">

package/src/marketing/FaqSection.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@olwiba/cn';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, cn, useUIVariant } from '@olwiba/cn';
 import { SectionTitle } from './SectionTitle';
 import { FadeIn } from '../motion/FadeIn';
 
@@ -17,8 +17,15 @@ export function FaqSection({
   badge = 'FAQ',
   items,
 }: 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',
+  )
   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">
         <div className="mx-auto max-w-3xl">
           <SectionTitle title={title} description={description} badge={badge} />

package/src/marketing/FeaturesSection.tsx

@@ -1,6 +1,7 @@
 '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';
@@ -18,8 +19,15 @@ export function FeaturesSection({
   badge = 'Features',
   features,
 }: 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',
+  )
   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">
         <div className="mx-auto max-w-4xl">
           <SectionTitle title={title} description={description} badge={badge} />

package/src/marketing/Navbar.tsx

@@ -4,7 +4,6 @@ import * as React from 'react';
 import { Menu, X } from 'lucide-react';
 import { Button, Separator, Sheet, SheetContent, SheetTrigger } from '@olwiba/cn';
 import type { AppShellRenderLink } from '../app/AppShell';
-import { ThemeSwitchMinimal } from '../components/ThemeSwitchMinimal';
 
 export interface NavbarProps {
   brand: { name: string; logo?: React.ReactNode; href?: string };
@@ -13,7 +12,8 @@ export interface NavbarProps {
     primary?: { label: string; href: string };
     secondary?: { label: string; href: string };
   };
-  showThemeToggle?: boolean;
+  /** Icon-button controls rendered right-of-nav, left-of-CTA. Pass e.g. ModeSwitchMinimal, ThemeSwitchMinimal. */
+  controls?: React.ReactNode[];
   renderLink?: AppShellRenderLink;
 }
 
@@ -25,11 +25,12 @@ export function Navbar({
   brand,
   navLinks,
   cta,
-  showThemeToggle = false,
+  controls,
   renderLink = defaultRenderLink,
 }: NavbarProps) {
   const [open, setOpen] = React.useState(false);
   const brandHref = brand.href ?? '/';
+  const hasRightContent = controls?.length || cta?.primary || cta?.secondary;
 
   return (
     <section className="overflow-hidden rounded-2xl border bg-card">
@@ -49,8 +50,8 @@ export function Navbar({
           ),
         })}
 
-        {/* Desktop nav links — center column, truly centered */}
-        <div className="hidden items-center gap-1 md:flex">
+        {/* Desktop nav links — center column when right content exists, else shift right */}
+        <div className={`hidden items-center gap-1 md:flex ${!hasRightContent ? 'col-span-2 justify-end' : ''}`}>
           {navLinks.map((link) => (
             <span key={link.label}>
               {renderLink({
@@ -62,20 +63,27 @@ export function Navbar({
           ))}
         </div>
 
-        {/* Desktop CTAs — right column, right-aligned */}
-        <div className="hidden items-center justify-end gap-3 md:flex">
-          {cta?.secondary &&
-            renderLink({
-              href: cta.secondary.href,
-              children: <Button variant="ghost" size="sm">{cta.secondary.label}</Button>,
-            })}
-          {cta?.primary &&
-            renderLink({
-              href: cta.primary.href,
-              children: <Button size="sm">{cta.primary.label}</Button>,
-            })}
-          {showThemeToggle && <ThemeSwitchMinimal />}
-        </div>
+        {/* Desktop right — controls + CTA */}
+        {hasRightContent && (
+          <div className="hidden items-center justify-end gap-2 md:flex">
+            {controls?.map((control, i) => (
+              <React.Fragment key={i}>{control}</React.Fragment>
+            ))}
+            {(cta?.secondary || cta?.primary) && controls?.length ? (
+              <div className="mx-1 h-4 w-px bg-border" />
+            ) : null}
+            {cta?.secondary &&
+              renderLink({
+                href: cta.secondary.href,
+                children: <Button variant="ghost" size="sm">{cta.secondary.label}</Button>,
+              })}
+            {cta?.primary &&
+              renderLink({
+                href: cta.primary.href,
+                children: <Button size="sm">{cta.primary.label}</Button>,
+              })}
+          </div>
+        )}
 
         {/* Mobile drawer — right column on small screens */}
         <Sheet open={open} onOpenChange={setOpen}>
@@ -103,7 +111,9 @@ export function Navbar({
                 })}
               </span>
               <div className="flex items-center gap-1">
-                {showThemeToggle && <ThemeSwitchMinimal />}
+                {controls?.map((control, i) => (
+                  <React.Fragment key={i}>{control}</React.Fragment>
+                ))}
                 <Button variant="ghost" size="icon" onClick={() => setOpen(false)}>
                   <X className="size-4" />
                   <span className="sr-only">Close menu</span>

package/src/marketing/PricingSection.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Badge, cn } from '@olwiba/cn';
+import { Badge, Button, cn, useUIVariant } from '@olwiba/cn';
 import { PricingCard, type PricingFeature } from '../components/PricingCard';
 import { StaggerChildren } from '../motion/StaggerChildren';
 import type { AppShellRenderLink } from '../app/AppShell';
@@ -42,9 +42,16 @@ export function PricingSection({
   footnote,
 }: PricingSectionProps) {
   const [annual, setAnnual] = 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',
+  )
 
   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">
         <div className="mx-auto max-w-5xl">
           {/* Header */}
@@ -63,7 +70,9 @@ export function PricingSection({
 
             {/* Billing toggle */}
             <div className="mt-6 inline-flex items-center gap-3 rounded-full border bg-muted p-1">
-              <button
+              <Button
+                variant="ghost"
+                size="sm"
                 onClick={() => setAnnual(false)}
                 className={cn(
                   'rounded-full px-4 py-1.5 text-sm font-medium transition-colors',
@@ -71,8 +80,10 @@ export function PricingSection({
                 )}
               >
                 Monthly
-              </button>
-              <button
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
                 onClick={() => setAnnual(true)}
                 className={cn(
                   'flex items-center gap-2 rounded-full px-4 py-1.5 text-sm font-medium transition-colors',
@@ -83,7 +94,7 @@ export function PricingSection({
                 {saveBadge && (
                   <Badge variant="secondary" className="text-xs">{saveBadge}</Badge>
                 )}
-              </button>
+              </Button>
             </div>
           </div>