@olwiba/ui 0.1.5 → 0.1.7

package/src/marketing/TechStackSection.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import type { LucideIcon } from 'lucide-react';
+import { cn, useUIVariant } from '@olwiba/cn';
+import { SectionTitle } from './SectionTitle';
+import { StaggerChildren } from '../motion/StaggerChildren';
+
+export interface TechStackItem {
+  icon: LucideIcon;
+  name: string;
+  description: string;
+  href?: string;
+}
+
+export interface TechStackSectionProps {
+  badge?: string;
+  title?: string;
+  description?: string;
+  items: TechStackItem[];
+}
+
+export function TechStackSection({
+  badge = 'Built on',
+  title = 'The stack',
+  description,
+  items,
+}: TechStackSectionProps) {
+  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} />
+
+          <StaggerChildren className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            {items.map((item) => {
+              const Icon = item.icon;
+              const card = (
+                <div
+                  className={cn(
+                    'group flex flex-col gap-3 border bg-background p-5 transition-all duration-200',
+                    mode === 'smooth'
+                      ? 'rounded-2xl hover:-translate-y-0.5 hover:shadow-md'
+                      : 'rounded-xl hover:-translate-y-0.5 hover:shadow-md',
+                  )}
+                >
+                  <div
+                    className={cn(
+                      'flex h-9 w-9 items-center justify-center bg-muted text-muted-foreground transition-colors group-hover:bg-primary/10 group-hover:text-primary',
+                      mode === 'smooth' ? 'rounded-xl' : 'rounded-lg',
+                    )}
+                  >
+                    <Icon className="size-4" />
+                  </div>
+                  <div>
+                    <p className="text-sm font-semibold leading-tight">{item.name}</p>
+                    <p className="mt-1 text-xs leading-relaxed text-muted-foreground">{item.description}</p>
+                  </div>
+                </div>
+              );
+
+              if (item.href) {
+                return (
+                  <a key={item.name} href={item.href} className="block">
+                    {card}
+                  </a>
+                );
+              }
+              return <div key={item.name}>{card}</div>;
+            })}
+          </StaggerChildren>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/motion/AnimatedPill.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { cn } from '@olwiba/cn';
+
+export interface AnimatedPillProps {
+  labels: string[];
+  interval?: number;
+  className?: string;
+}
+
+export function AnimatedPill({ labels, interval = 3800, className }: AnimatedPillProps) {
+  const pillRef = useRef<HTMLSpanElement>(null);
+  const textRef = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    const pill = pillRef.current;
+    const text = textRef.current;
+    if (!pill || !text || labels.length < 2) return;
+
+    pill.style.width = pill.offsetWidth + 'px';
+    pill.dataset.w = String(pill.offsetWidth);
+
+    let idx = 0;
+
+    const cycle = () => {
+      idx = (idx + 1) % labels.length;
+
+      text.style.transition = 'opacity 140ms ease';
+      text.style.opacity = '0';
+
+      setTimeout(() => {
+        text.textContent = labels[idx] ?? '';
+
+        const oldW = parseFloat(pill.dataset.w ?? '0');
+        pill.style.transition = 'none';
+        pill.style.width = 'auto';
+        const newW = pill.offsetWidth;
+
+        pill.style.width = oldW + 'px';
+        void pill.offsetWidth;
+
+        pill.style.transition = 'width 280ms cubic-bezier(0.4, 0, 0.2, 1)';
+        pill.style.width = newW + 'px';
+        pill.dataset.w = String(newW);
+
+        setTimeout(() => {
+          text.style.transition = 'opacity 140ms ease';
+          text.style.opacity = '1';
+        }, 260);
+      }, 150);
+    };
+
+    const id = setInterval(cycle, interval);
+    return () => clearInterval(id);
+  }, [labels, interval]);
+
+  if (!labels.length) return null;
+
+  return (
+    <span
+      ref={pillRef}
+      className={cn(
+        'inline-flex items-center overflow-hidden whitespace-nowrap rounded-full border bg-secondary px-2.5 py-0.5 text-xs font-semibold text-secondary-foreground',
+        className,
+      )}
+    >
+      <span ref={textRef}>{labels[0]}</span>
+    </span>
+  );
+}

package/src/motion/CountdownTimer.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@olwiba/cn';
+
+interface TimeLeft {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+}
+
+function getTimeLeft(deadline: string): TimeLeft | null {
+  const diff = new Date(deadline).getTime() - Date.now();
+  if (diff <= 0) return null;
+  return {
+    days: Math.floor(diff / (1000 * 60 * 60 * 24)),
+    hours: Math.floor((diff / (1000 * 60 * 60)) % 24),
+    minutes: Math.floor((diff / 1000 / 60) % 60),
+    seconds: Math.floor((diff / 1000) % 60),
+  };
+}
+
+export interface CountdownTimerProps {
+  deadline: string;
+  label?: string;
+  className?: string;
+  /** Compact inline mode — renders as "29d · 11h · 22m", no seconds, no label. For use inside badges. */
+  compact?: boolean;
+}
+
+export function CountdownTimer({
+  deadline,
+  label = 'Founding price closes in',
+  className,
+  compact = false,
+}: CountdownTimerProps) {
+  const [timeLeft, setTimeLeft] = React.useState<TimeLeft | null>(() => getTimeLeft(deadline));
+
+  React.useEffect(() => {
+    setTimeLeft(getTimeLeft(deadline));
+    const id = setInterval(() => setTimeLeft(getTimeLeft(deadline)), 1000);
+    return () => clearInterval(id);
+  }, [deadline]);
+
+  if (!timeLeft) return null;
+
+  if (compact) {
+    return (
+      <span className={cn('font-mono tabular-nums', className)}>
+        {timeLeft.days}d · {String(timeLeft.hours).padStart(2, '0')}h · {String(timeLeft.minutes).padStart(2, '0')}m · {String(timeLeft.seconds).padStart(2, '0')}s
+      </span>
+    );
+  }
+
+  const units = [
+    { value: timeLeft.days, unit: 'd' },
+    { value: timeLeft.hours, unit: 'h' },
+    { value: timeLeft.minutes, unit: 'm' },
+    { value: timeLeft.seconds, unit: 's' },
+  ];
+
+  return (
+    <div className={cn('flex items-center justify-center gap-2 text-sm', className)}>
+      <span className="text-muted-foreground">{label}</span>
+      <span className="flex items-center gap-1 font-mono font-semibold tabular-nums">
+        {units.map(({ value, unit }, i) => (
+          <React.Fragment key={unit}>
+            <span>
+              {String(value).padStart(2, '0')}
+              <span className="font-normal text-muted-foreground">{unit}</span>
+            </span>
+            {i < units.length - 1 && (
+              <span className="text-muted-foreground/50">·</span>
+            )}
+          </React.Fragment>
+        ))}
+      </span>
+    </div>
+  );
+}