@olwiba/ui 0.0.28

package/src/marketing/PricingSection.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import * as React from 'react';
+import { Badge, cn } from '@olwiba/cn';
+import { PricingCard, type PricingFeature } from '../components/PricingCard';
+import { StaggerChildren } from '../motion/StaggerChildren';
+import type { AppShellRenderLink } from '../app/AppShell';
+
+export interface PricingPlan {
+  name: string;
+  monthly: number;
+  annual: number;
+  description: string;
+  cta: string;
+  highlighted?: boolean;
+  features: PricingFeature[];
+}
+
+export interface PricingSectionProps {
+  title?: string;
+  description?: string;
+  badge?: string;
+  plans: PricingPlan[];
+  saveBadge?: string;
+  isAuthenticated?: boolean;
+  renderLink?: AppShellRenderLink;
+  footnote?: string;
+}
+
+const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) => (
+  <a href={href} className={className}>{children}</a>
+);
+
+export function PricingSection({
+  title = 'Simple, transparent pricing',
+  description = 'Start for free. Scale as you grow. No hidden fees.',
+  badge = 'Pricing',
+  plans,
+  saveBadge = 'Save 34%',
+  isAuthenticated,
+  renderLink = defaultRenderLink,
+  footnote,
+}: PricingSectionProps) {
+  const [annual, setAnnual] = React.useState(false);
+
+  return (
+    <section className="overflow-hidden rounded-2xl border bg-card">
+      <div className="px-6 py-14 sm:px-10 sm:py-20">
+        <div className="mx-auto max-w-5xl">
+          {/* Header */}
+          <div className="text-center">
+            {badge && (
+              <Badge variant="secondary" className="mb-4">{badge}</Badge>
+            )}
+            <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
+              {title}
+            </h2>
+            {description && (
+              <p className="mx-auto mt-4 max-w-xl text-pretty text-muted-foreground">
+                {description}
+              </p>
+            )}
+
+            {/* Billing toggle */}
+            <div className="mt-6 inline-flex items-center gap-3 rounded-full border bg-muted p-1">
+              <button
+                onClick={() => setAnnual(false)}
+                className={cn(
+                  'rounded-full px-4 py-1.5 text-sm font-medium transition-colors',
+                  !annual ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground',
+                )}
+              >
+                Monthly
+              </button>
+              <button
+                onClick={() => setAnnual(true)}
+                className={cn(
+                  'flex items-center gap-2 rounded-full px-4 py-1.5 text-sm font-medium transition-colors',
+                  annual ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground',
+                )}
+              >
+                Annual
+                {saveBadge && (
+                  <Badge variant="secondary" className="text-xs">{saveBadge}</Badge>
+                )}
+              </button>
+            </div>
+          </div>
+
+          {/* Plan cards */}
+          <StaggerChildren className="mt-10 grid gap-4 lg:grid-cols-3">
+            {plans.map((plan) => {
+              const price = annual ? plan.annual : plan.monthly;
+              return (
+                <PricingCard
+                  key={plan.name}
+                  name={plan.name}
+                  price={`$${price}`}
+                  period={price > 0 ? '/mo' : ''}
+                  description={plan.description}
+                  features={plan.features}
+                  cta={plan.cta}
+                  highlighted={plan.highlighted}
+                  badge={plan.highlighted ? 'Most popular' : undefined}
+                />
+              );
+            })}
+          </StaggerChildren>
+
+          {/* Footnote */}
+          {footnote && (
+            <p className="mt-8 text-center text-sm text-muted-foreground">
+              {footnote}
+            </p>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/marketing/SectionTitle.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+import { Badge, cn } from '@olwiba/cn';
+import { FadeIn } from '../motion/FadeIn';
+
+export interface SectionTitleProps {
+  title: string;
+  description?: string;
+  badge?: string;
+  className?: string;
+}
+
+export function SectionTitle({ title, description, badge, className }: SectionTitleProps) {
+  return (
+    <FadeIn direction="up">
+      <div className={cn('text-center', className)}>
+        {badge && <Badge variant="secondary" className="mb-4">{badge}</Badge>}
+        <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
+          {title}
+        </h2>
+        {description && (
+          <p className="mx-auto mt-4 max-w-2xl text-pretty text-muted-foreground">
+            {description}
+          </p>
+        )}
+      </div>
+    </FadeIn>
+  );
+}

package/src/marketing/StatsSection.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { Separator } from '@olwiba/cn';
+import { SectionTitle } from './SectionTitle';
+import { StaggerChildren } from '../motion/StaggerChildren';
+import { CountUp } from '../motion/CountUp';
+
+export interface StatsSectionProps {
+  title?: string;
+  description?: string;
+  badge?: string;
+  stats: Array<{ value: string; label: string; description?: string }>;
+}
+
+function parseStatValue(value: string) {
+  const match = value.match(/^(\d+(?:\.\d+)?)(.*)/);
+  if (!match) return null;
+  const num = parseFloat(match[1]);
+  const suffix = match[2] || '';
+  const decimals = match[1].includes('.') ? match[1].split('.')[1].length : 0;
+  return { num, suffix, decimals };
+}
+
+function StatValue({ value }: { value: string }) {
+  const parsed = parseStatValue(value);
+  if (!parsed) return <>{value}</>;
+  return <CountUp to={parsed.num} decimals={parsed.decimals} suffix={parsed.suffix} />;
+}
+
+export function StatsSection({
+  title = 'Built for scale, used in production',
+  description,
+  badge = 'By the numbers',
+  stats,
+}: StatsSectionProps) {
+  return (
+    <section className="overflow-hidden rounded-2xl border bg-card">
+      <div className="relative px-6 py-14 sm:px-10 sm:py-20">
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom,hsl(var(--primary)/0.08),transparent_60%)]" />
+        <div className="relative mx-auto max-w-4xl">
+          <SectionTitle title={title} description={description} badge={badge} />
+
+          <StaggerChildren className="mt-12 grid gap-px overflow-hidden rounded-2xl border bg-border sm:grid-cols-2 lg:grid-cols-4">
+            {stats.map((stat) => (
+              <div key={stat.label} className="flex flex-col gap-2 bg-card px-6 py-8">
+                <div className="text-4xl font-bold tracking-tight">
+                  <StatValue value={stat.value} />
+                </div>
+                <div className="font-medium">{stat.label}</div>
+                {stat.description && (
+                  <>
+                    <Separator />
+                    <p className="text-sm text-muted-foreground">{stat.description}</p>
+                  </>
+                )}
+              </div>
+            ))}
+          </StaggerChildren>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/marketing/TeamSection.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { Github, Linkedin, Twitter } from 'lucide-react';
+import { Avatar, AvatarFallback, AvatarImage, Badge } from '@olwiba/cn';
+
+const team = [
+  {
+    name: 'Olivia Reed',
+    role: 'Co-Founder & CEO',
+    bio: 'Previously led product at two YC companies. Obsessed with design systems and developer experience.',
+    avatar: 'https://ui.shadcn.com/avatars/01.png',
+    initials: 'OR',
+    social: { twitter: '#', github: '#', linkedin: '#' },
+  },
+  {
+    name: 'Marcus Webb',
+    role: 'Co-Founder & CTO',
+    bio: 'Full-stack engineer with 12 years building UI infrastructure. Open source maintainer.',
+    avatar: 'https://ui.shadcn.com/avatars/02.png',
+    initials: 'MW',
+    social: { twitter: '#', github: '#', linkedin: '#' },
+  },
+  {
+    name: 'Priya Nair',
+    role: 'Head of Design',
+    bio: 'Interaction designer turned design systems engineer. Bridges the gap between Figma and production.',
+    avatar: 'https://ui.shadcn.com/avatars/03.png',
+    initials: 'PN',
+    social: { twitter: '#', github: null, linkedin: '#' },
+  },
+  {
+    name: 'Daniel Frost',
+    role: 'Senior Engineer',
+    bio: 'Accessibility and performance specialist. If it doesn\'t work with a keyboard, it\'s broken.',
+    avatar: 'https://ui.shadcn.com/avatars/04.png',
+    initials: 'DF',
+    social: { twitter: null, github: '#', linkedin: '#' },
+  },
+  {
+    name: 'Aisha Okafor',
+    role: 'Developer Relations',
+    bio: 'Writes docs, builds examples, and makes sure every engineer can ship their first block in under an hour.',
+    avatar: 'https://ui.shadcn.com/avatars/05.png',
+    initials: 'AO',
+    social: { twitter: '#', github: '#', linkedin: '#' },
+  },
+  {
+    name: 'Tom Halvorsen',
+    role: 'Growth',
+    bio: 'Turns happy users into loud advocates. Runs the community and keeps the changelog sharp.',
+    avatar: 'https://ui.shadcn.com/avatars/06.png',
+    initials: 'TH',
+    social: { twitter: '#', github: null, linkedin: '#' },
+  },
+];
+
+export function TeamSection() {
+  return (
+    <section className="overflow-hidden rounded-2xl border bg-card">
+      <div className="px-6 py-14 sm:px-10 sm:py-20">
+        <div className="mx-auto max-w-5xl">
+          <div className="text-center">
+            <Badge variant="secondary" className="mb-4">Team</Badge>
+            <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
+              The people behind Olwiba
+            </h2>
+            <p className="mx-auto mt-4 max-w-xl text-pretty text-muted-foreground">
+              A small team with deep experience in design systems, open source, and developer tooling.
+            </p>
+          </div>
+
+          <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {team.map((member) => (
+              <div key={member.name} className="rounded-2xl border bg-muted/40 p-5">
+                <div className="flex items-start gap-4">
+                  <Avatar className="size-12 rounded-xl">
+                    <AvatarImage src={member.avatar} alt={member.name} />
+                    <AvatarFallback className="rounded-xl">{member.initials}</AvatarFallback>
+                  </Avatar>
+                  <div className="min-w-0">
+                    <div className="font-semibold leading-tight">{member.name}</div>
+                    <div className="text-sm text-muted-foreground">{member.role}</div>
+                  </div>
+                </div>
+                <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{member.bio}</p>
+                <div className="mt-4 flex items-center gap-2">
+                  {member.social.twitter && (
+                    <a href={member.social.twitter} aria-label="Twitter" className="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground">
+                      <Twitter className="size-3.5" />
+                    </a>
+                  )}
+                  {member.social.github && (
+                    <a href={member.social.github} aria-label="GitHub" className="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground">
+                      <Github className="size-3.5" />
+                    </a>
+                  )}
+                  {member.social.linkedin && (
+                    <a href={member.social.linkedin} aria-label="LinkedIn" className="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground">
+                      <Linkedin className="size-3.5" />
+                    </a>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/marketing/TestimonialsSection.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { TestimonialCard } from '../components/TestimonialCard';
+import { SectionTitle } from './SectionTitle';
+import { StaggerChildren } from '../motion/StaggerChildren';
+
+export interface TestimonialsSectionProps {
+  title?: string;
+  description?: string;
+  badge?: string;
+  testimonials: Array<{
+    quote: string;
+    name: string;
+    role: string;
+    company?: string;
+    avatar?: string;
+    initials?: string;
+    rating?: number;
+  }>;
+}
+
+export function TestimonialsSection({
+  title = 'Trusted by teams shipping real products',
+  description = "Here's what engineers and product teams say after using Olwiba in production.",
+  badge = 'Testimonials',
+  testimonials,
+}: TestimonialsSectionProps) {
+  return (
+    <section className="overflow-hidden rounded-2xl border bg-card">
+      <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} />
+
+          <StaggerChildren className="mt-12 columns-1 gap-4 sm:columns-2 lg:columns-3">
+            {testimonials.map((t) => (
+              <div
+                key={t.name}
+                className="mb-4 break-inside-avoid transition-transform hover:-translate-y-0.5"
+              >
+                <TestimonialCard
+                  quote={t.quote}
+                  name={t.name}
+                  role={t.role}
+                  company={t.company}
+                  avatar={t.avatar}
+                  initials={t.initials}
+                  rating={t.rating}
+                />
+              </div>
+            ))}
+          </StaggerChildren>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/motion/CountUp.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@olwiba/cn';
+
+export interface CountUpProps extends React.HTMLAttributes<HTMLSpanElement> {
+  from?: number;
+  to: number;
+  duration?: number;
+  decimals?: number;
+  prefix?: string;
+  suffix?: string;
+  once?: boolean;
+}
+
+export function CountUp({
+  from = 0,
+  to,
+  duration = 1500,
+  decimals = 0,
+  prefix = '',
+  suffix = '',
+  once = true,
+  className,
+  ...props
+}: CountUpProps) {
+  const ref = React.useRef<HTMLSpanElement>(null);
+  const [value, setValue] = React.useState(from);
+  const hasStarted = React.useRef(false);
+
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && (!once || !hasStarted.current)) {
+          hasStarted.current = true;
+          const start = performance.now();
+
+          const tick = (now: number) => {
+            const elapsed = now - start;
+            const progress = Math.min(elapsed / duration, 1);
+            const eased = 1 - Math.pow(1 - progress, 3);
+            setValue(from + (to - from) * eased);
+            if (progress < 1) requestAnimationFrame(tick);
+          };
+
+          requestAnimationFrame(tick);
+        }
+      },
+      { threshold: 0.5 },
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [from, to, duration, once]);
+
+  return (
+    <span ref={ref} className={cn(className)} {...props}>
+      {prefix}{value.toFixed(decimals)}{suffix}
+    </span>
+  );
+}

package/src/motion/FadeIn.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@olwiba/cn';
+
+export interface FadeInProps extends React.HTMLAttributes<HTMLDivElement> {
+  delay?: number;
+  duration?: number;
+  direction?: 'up' | 'down' | 'left' | 'right' | 'none';
+  once?: boolean;
+  children: React.ReactNode;
+}
+
+const translateMap = {
+  up: 'translate-y-6',
+  down: '-translate-y-6',
+  left: 'translate-x-6',
+  right: '-translate-x-6',
+  none: '',
+};
+
+export function FadeIn({
+  delay = 0,
+  duration = 600,
+  direction = 'up',
+  once = true,
+  children,
+  className,
+  style,
+  ...props
+}: FadeInProps) {
+  const ref = React.useRef<HTMLDivElement>(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);
+          if (once) observer.disconnect();
+        } else if (!once) {
+          setVisible(false);
+        }
+      },
+      { threshold: 0.1 },
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [once]);
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'transition-all',
+        visible ? 'opacity-100 translate-x-0 translate-y-0' : `opacity-0 ${translateMap[direction]}`,
+        className,
+      )}
+      style={{ transitionDuration: `${duration}ms`, transitionDelay: `${delay}ms`, ...style }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}

package/src/motion/PageTransition.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@olwiba/cn';
+
+export interface PageTransitionProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'fade' | 'slide-up' | 'slide-down';
+  duration?: number;
+  children: React.ReactNode;
+}
+
+export function PageTransition({
+  variant = 'fade',
+  duration = 300,
+  children,
+  className,
+  style,
+  ...props
+}: PageTransitionProps) {
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    const id = requestAnimationFrame(() => setMounted(true));
+    return () => cancelAnimationFrame(id);
+  }, []);
+
+  const initial: React.CSSProperties =
+    variant === 'slide-up'
+      ? { opacity: 0, transform: 'translateY(16px)' }
+      : variant === 'slide-down'
+        ? { opacity: 0, transform: 'translateY(-16px)' }
+        : { opacity: 0 };
+
+  const entered: React.CSSProperties = { opacity: 1, transform: 'translateY(0)' };
+
+  return (
+    <div
+      className={cn(className)}
+      style={{
+        transition: `opacity ${duration}ms ease, transform ${duration}ms ease`,
+        ...(mounted ? entered : initial),
+        ...style,
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}

package/src/motion/StaggerChildren.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@olwiba/cn';
+
+export interface StaggerChildrenProps extends React.HTMLAttributes<HTMLDivElement> {
+  stagger?: number;
+  delay?: number;
+  duration?: number;
+  direction?: 'up' | 'down' | 'left' | 'right' | 'none';
+  once?: boolean;
+  children: React.ReactNode;
+}
+
+const translateMap = {
+  up: [0, 20],
+  down: [0, -20],
+  left: [20, 0],
+  right: [-20, 0],
+  none: [0, 0],
+};
+
+export function StaggerChildren({
+  stagger = 80,
+  delay = 0,
+  duration = 500,
+  direction = 'up',
+  once = true,
+  children,
+  className,
+  ...props
+}: StaggerChildrenProps) {
+  const ref = React.useRef<HTMLDivElement>(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);
+          if (once) observer.disconnect();
+        } else if (!once) {
+          setVisible(false);
+        }
+      },
+      { threshold: 0.1 },
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [once]);
+
+  const [tx, ty] = translateMap[direction];
+
+  return (
+    <div ref={ref} className={cn(className)} {...props}>
+      {React.Children.map(children, (child, i) => (
+        <div
+          style={{
+            transition: `opacity ${duration}ms ease, transform ${duration}ms ease`,
+            transitionDelay: `${delay + i * stagger}ms`,
+            opacity: visible ? 1 : 0,
+            transform: visible ? 'translate(0,0)' : `translate(${tx}px,${ty}px)`,
+          }}
+        >
+          {child}
+        </div>
+      ))}
+    </div>
+  );
+}