@olwiba/ui 0.0.35 → 0.0.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "private": false,
   "type": "module",
   "sideEffects": false,
@@ -43,11 +43,18 @@
     "zod": "^4.3.6"
   },
   "peerDependencies": {
+    "@content-collections/mdx": ">=0.2.0",
     "@olwiba/cn": ">=0.1.2",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
+  "peerDependenciesMeta": {
+    "@content-collections/mdx": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@content-collections/mdx": "^0.2.2",
     "@olwiba/cn": "^0.1.15",
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-router": "1.154.8",

package/src/blog/MdxContent.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { useMDXComponent } from '@content-collections/mdx/react';
+import { cn } from '../lib/utils';
+
+const components = {
+  h1: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <h1 className={cn('mt-8 scroll-m-20 text-3xl font-bold tracking-tight text-foreground first:mt-0', className)} {...props} />
+  ),
+  h2: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <h2 className={cn('mt-10 scroll-m-20 text-2xl font-semibold tracking-tight text-foreground first:mt-0', className)} {...props} />
+  ),
+  h3: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <h3 className={cn('mt-8 scroll-m-20 text-xl font-semibold tracking-tight text-foreground', className)} {...props} />
+  ),
+  h4: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <h4 className={cn('mt-6 scroll-m-20 text-lg font-semibold tracking-tight text-foreground', className)} {...props} />
+  ),
+  p: ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
+    <p className={cn('leading-7 text-muted-foreground [&:not(:first-child)]:mt-6', className)} {...props} />
+  ),
+  ul: ({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) => (
+    <ul className={cn('my-6 ml-6 list-disc text-muted-foreground', className)} {...props} />
+  ),
+  ol: ({ className, ...props }: React.HTMLAttributes<HTMLOListElement>) => (
+    <ol className={cn('my-6 ml-6 list-decimal text-muted-foreground', className)} {...props} />
+  ),
+  li: ({ className, ...props }: React.HTMLAttributes<HTMLLIElement>) => (
+    <li className={cn('mt-2', className)} {...props} />
+  ),
+  blockquote: ({ className, ...props }: React.HTMLAttributes<HTMLQuoteElement>) => (
+    <blockquote className={cn('mt-6 rounded-r-lg border-l-4 border-primary bg-muted py-4 pl-6 pr-4 italic text-muted-foreground', className)} {...props} />
+  ),
+  hr: (props: React.HTMLAttributes<HTMLHRElement>) => (
+    <hr className="my-8 border-border" {...props} />
+  ),
+  img: ({ className, alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) => (
+    <img className={cn('rounded-lg border shadow-sm', className)} alt={alt} {...props} />
+  ),
+  pre: ({ className, ...props }: React.HTMLAttributes<HTMLPreElement>) => (
+    <pre className={cn('mt-6 mb-4 overflow-x-auto rounded-lg bg-muted p-4 text-sm', className)} {...props} />
+  ),
+  code: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
+    <code className={cn('relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm text-foreground', className)} {...props} />
+  ),
+  table: ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => (
+    <div className="my-6 w-full overflow-y-auto rounded-lg border border-border">
+      <table className={cn('w-full', className)} {...props} />
+    </div>
+  ),
+  tr: ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
+    <tr className={cn('m-0 border-t border-border p-0 even:bg-muted', className)} {...props} />
+  ),
+  th: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
+    <th className={cn('border border-border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right', className)} {...props} />
+  ),
+  td: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
+    <td className={cn('border border-border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right', className)} {...props} />
+  ),
+  a: ({ className, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
+    <a className={cn('font-medium text-primary underline underline-offset-4 hover:text-primary/80', className)} {...props} />
+  ),
+};
+
+export interface MdxContentProps {
+  code: string;
+}
+
+export function MdxContent({ code }: MdxContentProps) {
+  const MDXComponent = useMDXComponent(code);
+  return <MDXComponent components={components} />;
+}

package/src/components/AppScreen.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { cn } from '../lib/utils';
+
+function AppScreenRoot({ children, className }: { children?: React.ReactNode; className?: string }) {
+  return (
+    <div className={cn('flex h-full flex-col', className)}>
+      {children}
+    </div>
+  );
+}
+
+function AppScreenHeader({ children, className }: { children?: React.ReactNode; className?: string }) {
+  return (
+    <div className={cn('flex items-center gap-2 border-b border-border px-4 py-3 shrink-0', className)}>
+      {children}
+    </div>
+  );
+}
+
+function AppScreenBody({ children, className }: { children?: React.ReactNode; className?: string }) {
+  return (
+    <div className={cn('flex-1 overflow-auto px-4 py-3', className)}>
+      {children}
+    </div>
+  );
+}
+
+export const AppScreen = Object.assign(AppScreenRoot, {
+  Header: AppScreenHeader,
+  Body: AppScreenBody,
+});
+
+export type { };

package/src/components/PhoneFrame.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { cn } from '../lib/utils';
+
+const sizes = {
+  sm: { outer: 'w-44', height: 'h-80', notch: 'w-16 h-4', border: 'rounded-[2rem]', screen: 'rounded-[1.75rem]' },
+  md: { outer: 'w-56', height: 'h-[26rem]', notch: 'w-20 h-5', border: 'rounded-[2.5rem]', screen: 'rounded-[2.25rem]' },
+  lg: { outer: 'w-72', height: 'h-[34rem]', notch: 'w-24 h-6', border: 'rounded-[3rem]', screen: 'rounded-[2.75rem]' },
+} as const;
+
+export interface PhoneFrameProps {
+  children?: React.ReactNode;
+  size?: keyof typeof sizes;
+  className?: string;
+  float?: boolean;
+}
+
+export function PhoneFrame({ children, size = 'md', className, float = true }: PhoneFrameProps) {
+  const s = sizes[size];
+  return (
+    <>
+      {float && (
+        <style>{`
+          @keyframes olwiba-phone-float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+          }
+          .olwiba-phone-float { animation: olwiba-phone-float 5s ease-in-out infinite; }
+        `}</style>
+      )}
+      <div
+        className={cn(
+          'relative mx-auto',
+          s.outer,
+          float && 'olwiba-phone-float',
+          className,
+        )}
+      >
+        {/* Device body */}
+        <div
+          className={cn(
+            'relative flex w-full flex-col overflow-hidden border-[3px] border-foreground/15 bg-muted shadow-2xl',
+            s.border,
+            s.height,
+          )}
+        >
+          {/* Status bar / notch area */}
+          <div className="relative flex justify-center pt-3 pb-1 shrink-0">
+            <div className={cn('rounded-full bg-foreground/10', s.notch)} />
+          </div>
+
+          {/* Screen */}
+          <div className={cn('mx-1.5 mb-1.5 flex-1 overflow-hidden bg-background', s.screen)}>
+            {children}
+          </div>
+        </div>
+
+        {/* Side buttons */}
+        <div className="absolute right-[-5px] top-24 h-12 w-[3px] rounded-l-sm bg-foreground/15" />
+        <div className="absolute left-[-5px] top-20 h-8 w-[3px] rounded-r-sm bg-foreground/15" />
+        <div className="absolute left-[-5px] top-32 h-8 w-[3px] rounded-r-sm bg-foreground/15" />
+        <div className="absolute left-[-5px] top-44 h-8 w-[3px] rounded-r-sm bg-foreground/15" />
+      </div>
+    </>
+  );
+}

package/src/index.ts

@@ -57,8 +57,8 @@ export { TestimonialsSection, type TestimonialsSectionProps } from './marketing/
 export { TeamSection } from './marketing/TeamSection';
 export { FaqSection, type FaqSectionProps } from './marketing/FaqSection';
 export { StatsSection, type StatsSectionProps } from './marketing/StatsSection';
-export { NewsletterSection } from './marketing/NewsletterSection';
-export { ContactSection } from './marketing/ContactSection';
+export { NewsletterSection, type NewsletterSectionProps } from './marketing/NewsletterSection';
+export { ContactSection, type ContactSectionProps, type ContactInfoItem } from './marketing/ContactSection';
 
 // ─── Marketing — elements ─────────────────────────────────────────────────────
 export { Navbar, type NavbarProps } from './marketing/Navbar';
@@ -81,6 +81,10 @@ export { Dock, type DockProps, type DockItem } from './components/Dock';
 export { ContextMenu, type ContextMenuProps, type ContextMenuDef } from './components/ContextMenu';
 export { ConfirmDialog, type ConfirmDialogProps } from './components/ConfirmDialog';
 
+// ─── Components — device mockups ────────────────────────────────────────────
+export { PhoneFrame, type PhoneFrameProps } from './components/PhoneFrame';
+export { AppScreen } from './components/AppScreen';
+
 // ─── Components — cards ───────────────────────────────────────────────────────
 export { GlassCard, type GlassCardProps } from './components/GlassCard';
 export { FeatureCard, type FeatureCardProps } from './components/FeatureCard';
@@ -103,6 +107,7 @@ export { RootErrorFallback } from './components/RootErrorFallback';
 // ─── Blog ────────────────────────────────────────────────────────────────────
 export { PostCard, type PostCardProps } from './blog/PostCard';
 export { PostList, type PostListProps } from './blog/PostList';
+export { MdxContent, type MdxContentProps } from './blog/MdxContent';
 
 // ─── Hooks ────────────────────────────────────────────────────────────────────
 export { useMounted } from './hooks/use-mounted';

package/src/marketing/ContactSection.tsx

@@ -1,44 +1,81 @@
 'use client';
 
 import * as React from 'react';
-import { Mail, MapPin, MessageSquare, Phone, Send } from 'lucide-react';
+import { Mail, MapPin, MessageSquare, Phone, Send, type LucideIcon } from 'lucide-react';
 import { Badge, Button, Input, Label, Separator, Textarea } from '@olwiba/cn';
 
-const contactInfo = [
-  { Icon: Mail, label: 'Email', value: 'hello@olwiba.com' },
-  { Icon: Phone, label: 'Phone', value: '+1 (555) 000-0000' },
-  { Icon: MapPin, label: 'Office', value: 'San Francisco, CA' },
+export type ContactInfoItem = {
+  label: string;
+  value: string;
+  icon?: LucideIcon;
+};
+
+export interface ContactSectionProps {
+  badge?: string;
+  title?: string;
+  description?: string;
+  contactInfo?: ContactInfoItem[];
+  successTitle?: string;
+  successDescription?: string;
+  sendAnotherLabel?: string;
+  onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void | Promise<void>;
+}
+
+const defaultContactInfoResolved: ContactInfoItem[] = [
+  { icon: Mail, label: 'Email', value: 'hello@olwiba.com' },
+  { icon: Phone, label: 'Phone', value: '+1 (555) 000-0000' },
+  { icon: MapPin, label: 'Office', value: 'San Francisco, CA' },
 ];
 
-export function ContactSection() {
+const defaults = {
+  badge: 'Contact us',
+  title: "Let's talk",
+  description:
+    "Have a question or want to work together? Fill in the form and we'll get back to you within one business day.",
+  successTitle: 'Message sent',
+  successDescription: "Thanks for reaching out. We'll get back to you within one business day.",
+  sendAnotherLabel: 'Send another',
+};
+
+export function ContactSection({
+  badge = defaults.badge,
+  title = defaults.title,
+  description = defaults.description,
+  contactInfo = defaultContactInfoResolved,
+  successTitle = defaults.successTitle,
+  successDescription = defaults.successDescription,
+  sendAnotherLabel = defaults.sendAnotherLabel,
+  onSubmit,
+}: ContactSectionProps = {}) {
   const [submitted, setSubmitted] = React.useState(false);
 
-  function handleSubmit(e: React.FormEvent) {
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
+    await onSubmit?.(e);
     setSubmitted(true);
   }
 
   return (
     <section className="overflow-hidden rounded-2xl border bg-card">
       <div className="grid lg:grid-cols-[1fr_1.4fr]">
-        {/* Left panel */}
         <div className="relative overflow-hidden bg-primary px-8 py-12 text-primary-foreground">
           <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,hsl(var(--primary-foreground)/0.1),transparent_60%)]" />
           <div className="relative space-y-6">
             <div>
-              <Badge variant="secondary" className="mb-3 bg-primary-foreground/15 text-primary-foreground hover:bg-primary-foreground/20">
-                Contact us
+              <Badge
+                variant="secondary"
+                className="mb-3 bg-primary-foreground/15 text-primary-foreground hover:bg-primary-foreground/20"
+              >
+                {badge}
               </Badge>
-              <h2 className="text-2xl font-semibold">Let's talk</h2>
-              <p className="mt-2 text-sm text-primary-foreground/70">
-                Have a question or want to work together? Fill in the form and we'll get back to you within one business day.
-              </p>
+              <h2 className="text-2xl font-semibold">{title}</h2>
+              <p className="mt-2 text-sm text-primary-foreground/70">{description}</p>
             </div>
 
             <Separator className="bg-primary-foreground/20" />
 
             <div className="space-y-4">
-              {contactInfo.map(({ Icon, label, value }) => (
+              {contactInfo.map(({ icon: Icon = Mail, label, value }) => (
                 <div key={label} className="flex items-center gap-3">
                   <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary-foreground/10">
                     <Icon className="size-4" />
@@ -53,7 +90,6 @@ export function ContactSection() {
           </div>
         </div>
 
-        {/* Form */}
         <div className="p-8">
           {submitted ? (
             <div className="flex h-full min-h-[320px] flex-col items-center justify-center gap-4 text-center">
@@ -61,12 +97,12 @@ export function ContactSection() {
                 <MessageSquare className="size-6" />
               </div>
               <div>
-                <h3 className="font-semibold">Message sent</h3>
-                <p className="mt-1 text-sm text-muted-foreground">
-                  Thanks for reaching out. We'll get back to you within one business day.
-                </p>
+                <h3 className="font-semibold">{successTitle}</h3>
+                <p className="mt-1 text-sm text-muted-foreground">{successDescription}</p>
               </div>
-              <Button variant="outline" onClick={() => setSubmitted(false)}>Send another</Button>
+              <Button variant="outline" onClick={() => setSubmitted(false)}>
+                {sendAnotherLabel}
+              </Button>
             </div>
           ) : (
             <form onSubmit={handleSubmit} className="space-y-5">

package/src/marketing/HeroSection.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { ArrowRight } from 'lucide-react';
 import { Avatar, AvatarFallback, AvatarImage, Badge, Button } from '@olwiba/cn';
 import { FadeIn } from '../motion/FadeIn';
+import { PhoneFrame } from '../components/PhoneFrame';
 import type { AppShellRenderLink } from '../app/AppShell';
 
 export interface HeroSectionProps {
@@ -12,7 +13,9 @@ export interface HeroSectionProps {
   description: string;
   primaryCta: { label: string; href: string };
   secondaryCta?: { label: string; href: string };
-  heroImage: React.ReactNode;
+  heroImage?: React.ReactNode;
+  media?: 'image' | 'phone' | 'none';
+  phoneSize?: 'sm' | 'md' | 'lg';
   avatarUrls?: string[];
   socialProofText?: string;
   renderLink?: AppShellRenderLink;
@@ -29,6 +32,8 @@ export function HeroSection({
   primaryCta,
   secondaryCta,
   heroImage,
+  media = 'image',
+  phoneSize = 'lg',
   avatarUrls,
   socialProofText,
   renderLink = defaultRenderLink,
@@ -74,12 +79,22 @@ export function HeroSection({
             </div>
           </FadeIn>
 
-          {/* Right - hero image */}
-          <FadeIn direction="right" delay={200}>
-            <div className="overflow-hidden rounded-2xl">
-              {heroImage}
-            </div>
-          </FadeIn>
+          {/* Right - media */}
+          {media !== 'none' && (
+            <FadeIn direction="right" delay={200}>
+              {media === 'phone' ? (
+                <div className="flex justify-center">
+                  <PhoneFrame size={phoneSize}>
+                    {heroImage}
+                  </PhoneFrame>
+                </div>
+              ) : (
+                <div className="overflow-hidden rounded-2xl">
+                  {heroImage}
+                </div>
+              )}
+            </FadeIn>
+          )}
         </div>
 
         {/* Avatar social proof row */}

package/src/marketing/NewsletterSection.tsx

@@ -4,13 +4,51 @@ import * as React from 'react';
 import { ArrowRight, Mail } from 'lucide-react';
 import { Badge, Button, Input } from '@olwiba/cn';
 
-export function NewsletterSection() {
+export interface NewsletterSectionProps {
+  badge?: string;
+  title?: string;
+  description?: string;
+  placeholder?: string;
+  submitLabel?: string;
+  privacyHref?: string;
+  privacyLabel?: string;
+  successTitle?: string;
+  successDescription?: string;
+  onSubscribe?: (email: string) => void | Promise<void>;
+}
+
+const defaults = {
+  badge: 'Newsletter',
+  title: 'Stay in the loop',
+  description:
+    'New components, release notes, and product tips — straight to your inbox. No spam, unsubscribe any time.',
+  placeholder: 'you@company.com',
+  submitLabel: 'Subscribe',
+  privacyHref: '#',
+  privacyLabel: 'Privacy Policy',
+  successTitle: "You're on the list.",
+  successDescription: "We'll be in touch soon.",
+};
+
+export function NewsletterSection({
+  badge = defaults.badge,
+  title = defaults.title,
+  description = defaults.description,
+  placeholder = defaults.placeholder,
+  submitLabel = defaults.submitLabel,
+  privacyHref = defaults.privacyHref,
+  privacyLabel = defaults.privacyLabel,
+  successTitle = defaults.successTitle,
+  successDescription = defaults.successDescription,
+  onSubscribe,
+}: NewsletterSectionProps = {}) {
   const [email, setEmail] = React.useState('');
   const [submitted, setSubmitted] = React.useState(false);
 
-  function handleSubmit(e: React.FormEvent) {
+  async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     if (!email) return;
+    await onSubscribe?.(email);
     setSubmitted(true);
   }
 
@@ -23,31 +61,29 @@ export function NewsletterSection() {
             <Mail className="size-5" />
           </div>
 
-          <Badge variant="secondary" className="mb-3">Newsletter</Badge>
-          <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
-            Stay in the loop
-          </h2>
-          <p className="mx-auto mt-4 max-w-sm text-pretty text-muted-foreground">
-            New components, release notes, and product tips — straight to your inbox. No spam, unsubscribe any time.
-          </p>
+          <Badge variant="secondary" className="mb-3">
+            {badge}
+          </Badge>
+          <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">{title}</h2>
+          <p className="mx-auto mt-4 max-w-sm text-pretty text-muted-foreground">{description}</p>
 
           {submitted ? (
             <div className="mt-8 rounded-2xl border bg-muted/50 px-6 py-5 text-sm">
-              <span className="font-medium">You're on the list.</span>{' '}
-              <span className="text-muted-foreground">We'll be in touch soon.</span>
+              <span className="font-medium">{successTitle}</span>{' '}
+              <span className="text-muted-foreground">{successDescription}</span>
             </div>
           ) : (
             <form onSubmit={handleSubmit} className="mt-8 flex flex-col gap-3 sm:flex-row">
               <Input
                 type="email"
-                placeholder="you@company.com"
+                placeholder={placeholder}
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 required
                 className="flex-1"
               />
               <Button type="submit">
-                Subscribe
+                {submitLabel}
                 <ArrowRight className="ml-2 size-4" />
               </Button>
             </form>
@@ -55,7 +91,10 @@ export function NewsletterSection() {
 
           <p className="mt-4 text-xs text-muted-foreground">
             By subscribing you agree to our{' '}
-            <a href="#" className="underline underline-offset-4 hover:text-foreground">Privacy Policy</a>.
+            <a href={privacyHref} className="underline underline-offset-4 hover:text-foreground">
+              {privacyLabel}
+            </a>
+            .
           </p>
         </div>
       </div>