@olwiba/ui 0.1.4 → 0.1.7

package/src/marketing/Footer.tsx

@@ -26,7 +26,7 @@ export function Footer({
   const copyrightText = legal ?? `\u00A9 ${new Date().getFullYear()} ${brand.name}. All rights reserved.`;
 
   return (
-    <footer className="overflow-hidden rounded-2xl border bg-muted text-foreground">
+    <footer className="overflow-hidden rounded-2xl border bg-card text-foreground">
       <div className="mx-auto max-w-7xl px-6 py-20 sm:py-24 lg:px-8">
         {/* Brand */}
         <div className="flex justify-center">
@@ -35,11 +35,7 @@ export function Footer({
             className: 'flex items-center gap-2',
             children: (
               <>
-                {brand.logo && (
-                  <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-foreground/10 text-foreground">
-                    {brand.logo}
-                  </span>
-                )}
+                {brand.logo}
                 <span className="text-lg font-semibold text-foreground">{brand.name}</span>
               </>
             ),

package/src/marketing/GroupedFeaturesSection.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import type { LucideIcon } from 'lucide-react';
+import { cn, useUIVariant } from '@olwiba/cn';
+import { FeatureCard } from '../components/FeatureCard';
+import { SectionTitle } from './SectionTitle';
+import { StaggerChildren } from '../motion/StaggerChildren';
+import { FadeIn } from '../motion/FadeIn';
+
+export interface GroupedFeatureGroup {
+  label: string;
+  features: Array<{ icon: LucideIcon; title: string; description: string; href?: string }>;
+}
+
+export interface GroupedFeaturesSectionProps {
+  badge?: string;
+  title?: string;
+  description?: string;
+  groups: GroupedFeatureGroup[];
+}
+
+export function GroupedFeaturesSection({
+  badge = 'Features',
+  title = 'Everything you need to ship',
+  description,
+  groups,
+}: GroupedFeaturesSectionProps) {
+  const mode = useUIVariant();
+  const sectionClasses = cn(
+    'overflow-hidden bg-card',
+    mode === 'smooth' && 'rounded-3xl border',
+    mode === 'playful' && 'rounded-2xl border-primary/25 border',
+    !mode && 'rounded-2xl border',
+  );
+
+  return (
+    <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} />
+
+          <div className="mt-14 space-y-14">
+            {groups.map((group, i) => (
+              <div key={group.label}>
+                <FadeIn direction="up" delay={i * 60}>
+                  <div className="mb-6 flex items-center gap-3">
+                    <span className="text-sm font-semibold tracking-wide text-muted-foreground uppercase">
+                      {group.label}
+                    </span>
+                    <div className="h-px flex-1 bg-border" />
+                  </div>
+                </FadeIn>
+                <StaggerChildren className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+                  {group.features.map((feature) => (
+                    <FeatureCard
+                      key={feature.title}
+                      icon={feature.icon}
+                      title={feature.title}
+                      description={feature.description}
+                      href={feature.href}
+                    />
+                  ))}
+                </StaggerChildren>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/marketing/Navbar.tsx

@@ -40,11 +40,7 @@ export function Navbar({
           href: brandHref,
           children: (
             <span className="flex items-center gap-2 font-semibold">
-              {brand.logo && (
-                <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-primary text-primary-foreground">
-                  {brand.logo}
-                </span>
-              )}
+              {brand.logo}
               <span>{brand.name}</span>
             </span>
           ),
@@ -100,11 +96,7 @@ export function Navbar({
                   href: brandHref,
                   children: (
                     <span className="flex items-center gap-2 font-semibold">
-                      {brand.logo && (
-                        <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary text-primary-foreground">
-                          {brand.logo}
-                        </span>
-                      )}
+                      {brand.logo}
                       <span>{brand.name}</span>
                     </span>
                   ),

package/src/marketing/NewsletterSection.tsx

@@ -57,13 +57,14 @@ export function NewsletterSection({
       <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">
-          <div className="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-primary/10 text-primary">
-            <Mail className="size-5" />
+          <div className="mb-4 flex items-center justify-center gap-2">
+            <div className="inline-flex h-8 w-8 items-center justify-center rounded-xl bg-primary/10 text-primary">
+              <Mail className="size-4" />
+            </div>
+            <Badge variant="secondary">
+              {badge}
+            </Badge>
           </div>
-
-          <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>
 

package/src/marketing/PricingSection.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { Badge, Button, cn, useUIVariant } from '@olwiba/cn';
 import { PricingCard, type PricingFeature } from '../components/PricingCard';
 import { StaggerChildren } from '../motion/StaggerChildren';
+import { CountdownTimer } from '../motion/CountdownTimer';
 import type { AppShellRenderLink } from '../app/AppShell';
 
 export interface PricingPlan {
@@ -13,18 +14,25 @@ export interface PricingPlan {
   description: string;
   cta: string;
   highlighted?: boolean;
+  disabled?: boolean;
   features: PricingFeature[];
+  /** Overrides computed price display (e.g. "$?" for community/reach-out tiers). */
+  priceDisplay?: string;
+  /** Overrides computed period display. */
+  periodDisplay?: string;
 }
 
 export interface PricingSectionProps {
   title?: string;
   description?: string;
-  badge?: string;
+  badge?: React.ReactNode;
   plans: PricingPlan[];
   saveBadge?: string;
   isAuthenticated?: boolean;
   renderLink?: AppShellRenderLink;
   footnote?: string;
+  mode?: 'subscription' | 'one-time';
+  foundingDeadline?: string;
 }
 
 const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) => (
@@ -40,15 +48,18 @@ export function PricingSection({
   isAuthenticated,
   renderLink = defaultRenderLink,
   footnote,
+  mode = 'subscription',
+  foundingDeadline,
 }: PricingSectionProps) {
   const [annual, setAnnual] = React.useState(false);
-  const mode = useUIVariant()
+  const isOneTime = mode === 'one-time';
+  const uiMode = 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',
-  )
+    uiMode === 'smooth' && 'rounded-3xl border',
+    uiMode === 'playful' && 'rounded-2xl border-primary/25 border',
+    !uiMode && 'rounded-2xl border',
+  );
 
   return (
     <section className={sectionClasses}>
@@ -57,7 +68,9 @@ export function PricingSection({
           {/* Header */}
           <div className="text-center">
             {badge && (
-              <Badge variant="secondary" className="mb-4">{badge}</Badge>
+              typeof badge === 'string'
+                ? <Badge variant="secondary" className="mb-4">{badge}</Badge>
+                : <div className="mb-4">{badge}</div>
             )}
             <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
               {title}
@@ -68,51 +81,65 @@ export function PricingSection({
               </p>
             )}
 
-            {/* Billing toggle */}
-            <div className="mt-6 inline-flex items-center gap-3 rounded-full border bg-muted p-1">
-              <Button
-                variant="ghost"
-                size="sm"
-                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
-                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',
-                  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>
+            {/* Billing toggle — subscription mode only */}
+            {!isOneTime && (
+              <div className="mt-6 inline-flex items-center gap-3 rounded-full border bg-muted p-1">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  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
+                  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',
+                    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;
+              const rawPrice = isOneTime ? plan.monthly : (annual ? plan.annual : plan.monthly);
+              const price = plan.priceDisplay ?? `$${rawPrice}`;
+              const period = plan.periodDisplay ?? (isOneTime ? 'one-time' : (rawPrice > 0 ? '/mo' : ''));
+              const badge = plan.highlighted && foundingDeadline
+                ? (
+                  <span className="inline-flex items-center rounded-full border bg-secondary px-2.5 py-0.5 text-xs font-semibold text-secondary-foreground">
+                    <CountdownTimer deadline={foundingDeadline} compact />
+                  </span>
+                )
+                : plan.highlighted
+                  ? 'Founding member'
+                  : undefined;
               return (
                 <PricingCard
                   key={plan.name}
                   name={plan.name}
-                  price={`$${price}`}
-                  period={price > 0 ? '/mo' : ''}
+                  price={price}
+                  period={period}
                   description={plan.description}
                   features={plan.features}
                   cta={plan.cta}
                   highlighted={plan.highlighted}
-                  badge={plan.highlighted ? 'Most popular' : undefined}
+                  disabled={plan.disabled}
+                  badge={badge}
                 />
               );
             })}

package/src/marketing/QualificationSection.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { Check, X } from 'lucide-react';
+import { cn, useUIVariant } from '@olwiba/cn';
+import { SectionTitle } from './SectionTitle';
+import { FadeIn } from '../motion/FadeIn';
+
+export interface QualificationItem {
+  text: string;
+}
+
+export interface QualificationColumn {
+  heading: string;
+  variant: 'positive' | 'negative';
+  items: string[];
+}
+
+export interface QualificationSectionProps {
+  badge?: string;
+  title?: string;
+  description?: string;
+  columns: [QualificationColumn, QualificationColumn];
+}
+
+export function QualificationSection({
+  badge = 'Who it is for',
+  title = 'Is this for you?',
+  description,
+  columns,
+}: QualificationSectionProps) {
+  const mode = useUIVariant();
+  const sectionClasses = cn(
+    'overflow-hidden bg-card',
+    mode === 'smooth' && 'rounded-3xl border',
+    mode === 'playful' && 'rounded-2xl border-primary/25 border',
+    !mode && 'rounded-2xl border',
+  );
+
+  return (
+    <section className={sectionClasses}>
+      <div className="px-6 py-14 sm:px-10 sm:py-20">
+        <div className="mx-auto max-w-4xl">
+          <SectionTitle badge={badge} title={title} description={description} />
+
+          <FadeIn direction="up" className="mt-12 grid gap-6 sm:grid-cols-2">
+            {columns.map((col) => {
+              const isPositive = col.variant === 'positive';
+              const Icon = isPositive ? Check : X;
+
+              return (
+                <div
+                  key={col.heading}
+                  className={cn(
+                    'flex flex-col gap-4 rounded-2xl border p-6',
+                    isPositive ? 'border-border bg-muted/30' : 'border-border bg-muted/10',
+                  )}
+                >
+                  <h3 className="text-sm font-semibold uppercase tracking-widest text-muted-foreground">
+                    {col.heading}
+                  </h3>
+                  <ul className="flex flex-col gap-3">
+                    {col.items.map((item) => (
+                      <li key={item} className="flex items-start gap-3">
+                        <span
+                          className={cn(
+                            'mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full',
+                            isPositive
+                              ? 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400'
+                              : 'bg-rose-500/15 text-rose-600 dark:text-rose-400',
+                          )}
+                        >
+                          <Icon className="size-3" />
+                        </span>
+                        <span className="text-sm leading-relaxed text-foreground/80">{item}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              );
+            })}
+          </FadeIn>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/marketing/StepsSection.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { cn, useUIVariant } from '@olwiba/cn';
+import { SectionTitle } from './SectionTitle';
+import { FadeIn } from '../motion/FadeIn';
+
+export interface StepItem {
+  emoji?: string;
+  title: string;
+  description: string;
+}
+
+export interface StepsSectionProps {
+  badge?: string;
+  title?: string;
+  description?: string;
+  steps: StepItem[];
+}
+
+export function StepsSection({
+  badge = 'How it works',
+  title = 'From zero to shipped',
+  description,
+  steps,
+}: StepsSectionProps) {
+  const mode = useUIVariant();
+  const sectionClasses = cn(
+    'overflow-hidden bg-card',
+    mode === 'smooth' && 'rounded-3xl border',
+    mode === 'playful' && 'rounded-2xl border-primary/25 border',
+    !mode && 'rounded-2xl border',
+  );
+
+  return (
+    <section className={sectionClasses}>
+      <div className="px-6 py-14 sm:px-10 sm:py-20">
+        <div className="mx-auto max-w-4xl">
+          <SectionTitle badge={badge} title={title} description={description} />
+
+          <div className="mt-12">
+            {/* Desktop: horizontal row */}
+            <div className="hidden sm:grid" style={{ gridTemplateColumns: `repeat(${steps.length}, 1fr)` }}>
+              {steps.map((step, i) => (
+                <FadeIn key={step.title} direction="up" delay={i * 80}>
+                  <div className="relative flex flex-col items-center text-center px-4">
+                    {/* Dashed connector to next step */}
+                    {i < steps.length - 1 && (
+                      <div
+                        aria-hidden="true"
+                        className="absolute top-6 left-1/2 w-full border-t border-dashed border-border"
+                      />
+                    )}
+                    {/* Emoji badge (or fallback number) */}
+                    <div className="relative z-10 mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-muted text-2xl">
+                      {step.emoji ?? (
+                        <span className="text-sm font-semibold text-primary">{i + 1}</span>
+                      )}
+                    </div>
+                    <h3 className="font-semibold text-foreground">{step.title}</h3>
+                    <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{step.description}</p>
+                  </div>
+                </FadeIn>
+              ))}
+            </div>
+
+            {/* Mobile: vertical timeline */}
+            <div className="flex flex-col gap-0 sm:hidden">
+              {steps.map((step, i) => (
+                <FadeIn key={step.title} direction="up" delay={i * 80}>
+                  <div className="relative flex gap-4 pb-8 last:pb-0">
+                    {/* Vertical connector */}
+                    {i < steps.length - 1 && (
+                      <div
+                        aria-hidden="true"
+                        className="absolute left-[23px] top-14 bottom-0 w-px border-l border-dashed border-border"
+                      />
+                    )}
+                    {/* Emoji badge (or fallback number) */}
+                    <div className="relative z-10 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-muted text-2xl">
+                      {step.emoji ?? (
+                        <span className="text-sm font-semibold text-primary">{i + 1}</span>
+                      )}
+                    </div>
+                    <div className="pt-3">
+                      <h3 className="font-semibold text-foreground">{step.title}</h3>
+                      <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">{step.description}</p>
+                    </div>
+                  </div>
+                </FadeIn>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/marketing/TeamSection.tsx

@@ -3,7 +3,20 @@
 import { Github, Linkedin, Twitter } from 'lucide-react';
 import { Avatar, AvatarFallback, AvatarImage, Badge } from '@olwiba/cn';
 
-const team = [
+export interface TeamMember {
+  name: string;
+  role: string;
+  bio: string;
+  avatar?: string;
+  initials: string;
+  social?: {
+    twitter?: string | null;
+    github?: string | null;
+    linkedin?: string | null;
+  };
+}
+
+const defaultTeam: TeamMember[] = [
   {
     name: 'Olivia Reed',
     role: 'Co-Founder & CEO',
@@ -28,49 +41,37 @@ const team = [
     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() {
+export interface TeamSectionProps {
+  members?: TeamMember[];
+  badge?: string;
+  title?: string;
+  description?: string;
+}
+
+export function TeamSection({
+  members = defaultTeam,
+  badge = 'Team',
+  title = 'The people behind Olwiba',
+  description = 'A small team with deep experience in design systems, open source, and developer tooling.',
+}: TeamSectionProps) {
   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>
+            <Badge variant="secondary" className="mb-4">{badge}</Badge>
             <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
-              The people behind Olwiba
+              {title}
             </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.
+              {description}
             </p>
           </div>
 
           <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-            {team.map((member) => (
+            {members.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">
@@ -83,23 +84,25 @@ export function TeamSection() {
                   </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>
+                {member.social && (
+                  <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>