@olwiba/ui 0.1.15 → 0.2.0

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>
-  );
-}