@olwiba/ui 0.1.14 → 0.2.0

package/src/marketing/CtaSection.tsx

@@ -1,16 +1,28 @@
 'use client';
 
-import { ArrowRight, Sparkles } from 'lucide-react';
-import { Button, cn, useUIVariant } from '@olwiba/cn';
+import * as React from 'react';
+import { ArrowRight, Rocket, Sparkles } from 'lucide-react';
+import { cn, useUIVariant } from '@olwiba/cn';
+import { Button } from '../primitives/Button';
 import { FadeIn } from '../motion/FadeIn';
+import { useIntersectionObserver } from '../hooks/use-intersection-observer';
 import type { AppShellRenderLink } from '../app/AppShell';
 
 export interface CtaSectionProps {
   heading: string;
-  description: string;
+  description?: string;
   primaryCta: { label: string; href: string };
   secondaryCta?: { label: string; href: string };
   footnote?: string;
+  /**
+   * Visual treatment of the section.
+   * - `'default'` — badge icon, radial glow, primary + secondary CTAs
+   * - `'showcase'` — large watermark icon with a scroll-reveal, single pill CTA
+   * @default 'default'
+   */
+  variant?: 'default' | 'showcase';
+  /** (showcase) Watermark icon rendered behind the content. @default <Rocket /> */
+  icon?: React.ReactNode;
   renderLink?: AppShellRenderLink;
 }
 
@@ -18,14 +30,79 @@ const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) =>
   <a href={href} className={className}>{children}</a>
 );
 
-export function CtaSection({
+function ShowcaseCta({
   heading,
   description,
   primaryCta,
-  secondaryCta,
   footnote,
+  icon,
   renderLink = defaultRenderLink,
-}: CtaSectionProps) {
+  sectionClasses,
+}: CtaSectionProps & { sectionClasses: string }) {
+  const [ref, intersecting] = useIntersectionObserver({ threshold: 0.15 });
+  const [visible, setVisible] = React.useState(false);
+
+  React.useEffect(() => {
+    if (intersecting) setVisible(true);
+  }, [intersecting]);
+
+  return (
+    <section
+      ref={ref as React.RefObject<HTMLElement>}
+      className={cn(
+        sectionClasses,
+        'relative transition-[opacity,transform] duration-700 ease-out',
+        visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6',
+      )}
+    >
+      {/* Decorative watermark icon */}
+      <div
+        className="pointer-events-none absolute inset-0 flex items-center justify-center"
+        style={{
+          opacity: visible ? 0.1 : 0,
+          transform: visible ? 'scale(1) rotate(0deg)' : 'scale(0.9) rotate(-5deg)',
+          transition: 'opacity 700ms ease 200ms, transform 700ms ease 200ms',
+        }}
+      >
+        {icon ?? <Rocket className="size-72 text-foreground" strokeWidth={0.75} />}
+      </div>
+
+      <div className="relative z-10 px-6 py-20 text-center sm:px-10 sm:py-28">
+        <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
+          {heading}
+        </h2>
+        {description && (
+          <p className="mx-auto mt-4 max-w-lg text-pretty text-muted-foreground">{description}</p>
+        )}
+        <div className="mt-8">
+          {renderLink({
+            href: primaryCta.href,
+            children: (
+              <Button size="lg" className="rounded-full px-6">
+                {primaryCta.label}
+                <ArrowRight className="ml-2 size-4" />
+              </Button>
+            ),
+          })}
+        </div>
+        {footnote && (
+          <p className="mt-5 text-sm text-muted-foreground">{footnote}</p>
+        )}
+      </div>
+    </section>
+  );
+}
+
+export function CtaSection(props: CtaSectionProps) {
+  const {
+    heading,
+    description,
+    primaryCta,
+    secondaryCta,
+    footnote,
+    variant = 'default',
+    renderLink = defaultRenderLink,
+  } = props;
   const mode = useUIVariant()
   const sectionClasses = cn(
     'overflow-hidden bg-card',
@@ -33,6 +110,11 @@ export function CtaSection({
     mode === 'playful' && 'rounded-2xl border-primary/25 border',
     !mode && 'rounded-2xl border',
   )
+
+  if (variant === 'showcase') {
+    return <ShowcaseCta {...props} sectionClasses={sectionClasses} />;
+  }
+
   return (
     <section className={sectionClasses}>
       <div className="relative px-6 py-16 sm:px-10 sm:py-24">
@@ -45,9 +127,11 @@ export function CtaSection({
             <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
               {heading}
             </h2>
-            <p className="mx-auto mt-4 max-w-lg text-pretty text-muted-foreground">
-              {description}
-            </p>
+            {description && (
+              <p className="mx-auto mt-4 max-w-lg text-pretty text-muted-foreground">
+                {description}
+              </p>
+            )}
             <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
               {renderLink({
                 href: primaryCta.href,

package/src/marketing/FeaturesSection.tsx

@@ -3,14 +3,18 @@
 import type { LucideIcon } from 'lucide-react';
 import { cn, useUIVariant } from '@olwiba/cn';
 import { FeatureCard } from '../components/FeatureCard';
+import { Carousel } from '../mechanics/Carousel';
 import { SectionTitle } from './SectionTitle';
 import { StaggerChildren } from '../motion/StaggerChildren';
+import { FadeIn } from '../motion/FadeIn';
 
 export interface FeaturesSectionProps {
   title?: string;
   description?: string;
   badge?: string;
   features: Array<{ icon: LucideIcon; title: string; description: string; href?: string }>;
+  /** How the feature cards are arranged. @default 'grid' */
+  layout?: 'grid' | 'carousel';
 }
 
 export function FeaturesSection({
@@ -18,6 +22,7 @@ export function FeaturesSection({
   description = 'A complete system of components, blocks, and hooks designed to work together - and get out of your way.',
   badge = 'Features',
   features,
+  layout = 'grid',
 }: FeaturesSectionProps) {
   const mode = useUIVariant()
   const sectionClasses = cn(
@@ -26,23 +31,33 @@ export function FeaturesSection({
     mode === 'playful' && 'rounded-2xl border-primary/25 border',
     !mode && 'rounded-2xl border',
   )
+  const cards = features.map((feature) => (
+    <FeatureCard
+      key={feature.title}
+      icon={feature.icon}
+      title={feature.title}
+      description={feature.description}
+      href={feature.href}
+    />
+  ));
+
   return (
     <section className={sectionClasses}>
       <div className="px-6 py-14 sm:px-10 sm:py-20">
-        <div className="mx-auto max-w-4xl">
+        <div className={cn('mx-auto', layout === 'carousel' ? 'max-w-5xl' : 'max-w-4xl')}>
           <SectionTitle title={title} description={description} badge={badge} />
 
-          <StaggerChildren className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
-            {features.map((feature) => (
-              <FeatureCard
-                key={feature.title}
-                icon={feature.icon}
-                title={feature.title}
-                description={feature.description}
-                href={feature.href}
-              />
-            ))}
-          </StaggerChildren>
+          {layout === 'carousel' ? (
+            <FadeIn direction="up">
+              <Carousel className="mt-10" ariaLabel={title}>
+                {cards}
+              </Carousel>
+            </FadeIn>
+          ) : (
+            <StaggerChildren className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+              {cards}
+            </StaggerChildren>
+          )}
         </div>
       </div>
     </section>

package/src/marketing/HeroSection.tsx

@@ -2,7 +2,9 @@
 
 import * as React from 'react';
 import { ArrowRight } from 'lucide-react';
-import { Avatar, AvatarFallback, AvatarImage, Badge, Button } from '@olwiba/cn';
+import { Avatar, AvatarFallback, AvatarImage, cn, useUIVariant } from '@olwiba/cn';
+import { Badge } from '../primitives/Badge';
+import { Button } from '../primitives/Button';
 import { FadeIn } from '../motion/FadeIn';
 import { PhoneFrame } from '../components/PhoneFrame';
 import type { AppShellRenderLink } from '../app/AppShell';
@@ -39,6 +41,7 @@ export function HeroSection({
   socialProofText,
   renderLink = defaultRenderLink,
 }: HeroSectionProps) {
+  const mode = useUIVariant();
   return (
     <section className="overflow-hidden">
       <div className={marketingSectionSpacing.hero}>
@@ -90,7 +93,7 @@ export function HeroSection({
                   </PhoneFrame>
                 </div>
               ) : (
-                <div className="overflow-hidden rounded-2xl">
+                <div className={cn('overflow-hidden', mode === 'smooth' ? 'rounded-3xl' : 'rounded-2xl')}>
                   {heroImage}
                 </div>
               )}

package/src/marketing/NewsletterSection.tsx

@@ -2,7 +2,10 @@
 
 import * as React from 'react';
 import { ArrowRight, Mail } from 'lucide-react';
-import { Badge, Button, Input } from '@olwiba/cn';
+import { cn, useUIVariant } from '@olwiba/cn';
+import { Badge } from '../primitives/Badge';
+import { Button } from '../primitives/Button';
+import { Input } from '../primitives/Input';
 
 export interface NewsletterSectionProps {
   badge?: string;
@@ -44,6 +47,13 @@ export function NewsletterSection({
 }: NewsletterSectionProps = {}) {
   const [email, setEmail] = React.useState('');
   const [submitted, setSubmitted] = 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',
+  );
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
@@ -53,7 +63,7 @@ export function NewsletterSection({
   }
 
   return (
-    <section className="overflow-hidden rounded-2xl border bg-card">
+    <section className={sectionClasses}>
       <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">

package/src/marketing/TeamSection.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { Github, Linkedin, Twitter } from 'lucide-react';
-import { Avatar, AvatarFallback, AvatarImage, Badge } from '@olwiba/cn';
+import { Avatar, AvatarFallback, AvatarImage, cn, useUIVariant } from '@olwiba/cn';
+import { Badge } from '../primitives/Badge';
 
 export interface TeamMember {
   name: string;
@@ -56,8 +57,15 @@ export function TeamSection({
   title = 'The people behind Olwiba',
   description = 'A small team with deep experience in design systems, open source, and developer tooling.',
 }: TeamSectionProps) {
+  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">
           <div className="text-center">

package/src/mechanics/Carousel.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import * as React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn, useUIVariant } from '@olwiba/cn';
+
+export interface CarouselProps {
+  /** Items to scroll through — each child becomes one snap slide. */
+  children: React.ReactNode;
+  /** Width classes applied to each slide. @default 'w-[280px] sm:w-[320px]' */
+  itemClassName?: string;
+  /** Prev/next control placement. @default 'top-right' */
+  controls?: 'top-right' | 'none';
+  /** Accessible label for the scroll region. */
+  ariaLabel?: string;
+  className?: string;
+}
+
+/**
+ * Scroll-snap carousel behavior — wraps any children in a horizontally
+ * scrolling track with prev/next controls. A mechanic, not a section:
+ * feed it cards, images, or whole blocks. No carousel dependency.
+ */
+export function Carousel({
+  children,
+  itemClassName = 'w-[280px] sm:w-[320px]',
+  controls = 'top-right',
+  ariaLabel,
+  className,
+}: CarouselProps) {
+  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 scrollByItem = (direction: 1 | -1) => {
+    const track = trackRef.current;
+    if (!track) return;
+    const item = track.querySelector<HTMLElement>('[data-carousel-item]');
+    const gap = parseFloat(getComputedStyle(track).columnGap) || 24;
+    const step = item ? item.offsetWidth + gap : track.clientWidth * 0.8;
+    track.scrollBy({ left: direction * step, behavior: 'smooth' });
+  };
+
+  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 (
+    <div className={className}>
+      {controls === 'top-right' && (
+        <div className="mb-4 flex items-center justify-end gap-2">
+          <button
+            type="button"
+            aria-label="Previous"
+            className={controlClasses}
+            onClick={() => scrollByItem(-1)}
+            disabled={!canPrev}
+          >
+            <ChevronLeft className="size-4" />
+          </button>
+          <button
+            type="button"
+            aria-label="Next"
+            className={controlClasses}
+            onClick={() => scrollByItem(1)}
+            disabled={!canNext}
+          >
+            <ChevronRight className="size-4" />
+          </button>
+        </div>
+      )}
+
+      <div
+        ref={trackRef}
+        role="region"
+        aria-label={ariaLabel}
+        className="flex snap-x snap-mandatory gap-6 overflow-x-auto pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      >
+        {React.Children.map(children, (child) =>
+          child == null ? null : (
+            <div data-carousel-item className={cn('shrink-0 snap-start', itemClassName)}>
+              {child}
+            </div>
+          ),
+        )}
+      </div>
+    </div>
+  );
+}

package/src/marketing/CarouselSection.tsx

@@ -1,126 +0,0 @@
-'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/CtaCardSection.tsx

@@ -1,95 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { ArrowRight, Rocket } from 'lucide-react';
-import { cn } from '@olwiba/cn';
-import type { AppShellRenderLink } from '../app/AppShell';
-
-export interface CtaCardSectionProps {
-  heading: string;
-  description?: string;
-  primaryCta: { label: string; href: string };
-  footnote?: string;
-  icon?: React.ReactNode;
-  renderLink?: AppShellRenderLink;
-}
-
-const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) => (
-  <a href={href} className={className}>{children}</a>
-);
-
-export function CtaCardSection({
-  heading,
-  description,
-  primaryCta,
-  footnote,
-  icon,
-  renderLink = defaultRenderLink,
-}: CtaCardSectionProps) {
-  const ref = React.useRef<HTMLElement>(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);
-          observer.disconnect();
-        }
-      },
-      { threshold: 0.15 },
-    );
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-
-  return (
-    <section
-      ref={ref}
-      className={cn(
-        'relative overflow-hidden rounded-3xl border border-gray-200 shadow-sm dark:border-border',
-        'bg-[#E0DFDB] dark:bg-card',
-        'transition-[opacity,transform] duration-700 ease-out',
-        visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6',
-      )}
-    >
-      {/* Decorative icon */}
-      <div
-        className="pointer-events-none absolute inset-0 flex items-center justify-center"
-        style={{
-          opacity: visible ? 0.12 : 0,
-          transform: visible ? 'scale(1) rotate(0deg)' : 'scale(0.9) rotate(-5deg)',
-          transition: 'opacity 700ms ease 200ms, transform 700ms ease 200ms',
-        }}
-      >
-        {icon ?? <Rocket className="size-72 text-foreground dark:text-foreground" strokeWidth={0.75} />}
-      </div>
-
-      {/* Content */}
-      <div className="relative z-10 px-6 py-20 text-center sm:px-10 sm:py-28">
-        <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
-          {heading}
-        </h2>
-        {description && (
-          <p className="mx-auto mt-4 max-w-lg text-pretty text-muted-foreground">{description}</p>
-        )}
-        <div className="mt-8">
-          {renderLink({
-            href: primaryCta.href,
-            children: (
-              <span className="inline-flex items-center gap-2 rounded-full bg-foreground px-6 py-3 text-sm font-medium text-background transition-opacity hover:opacity-80">
-                {primaryCta.label}
-                <ArrowRight className="size-4" />
-              </span>
-            ),
-          })}
-        </div>
-        {footnote && (
-          <p className="mt-5 text-sm text-muted-foreground">{footnote}</p>
-        )}
-      </div>
-    </section>
-  );
-}