@olwiba/ui 0.0.28

package/src/marketing/CtaSection.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { ArrowRight, Sparkles } from 'lucide-react';
+import { Button } from '@olwiba/cn';
+import { FadeIn } from '../motion/FadeIn';
+import type { AppShellRenderLink } from '../app/AppShell';
+
+export interface CtaSectionProps {
+  heading: string;
+  description: string;
+  primaryCta: { label: string; href: string };
+  secondaryCta?: { label: string; href: string };
+  footnote?: string;
+  renderLink?: AppShellRenderLink;
+}
+
+const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) => (
+  <a href={href} className={className}>{children}</a>
+);
+
+export function CtaSection({
+  heading,
+  description,
+  primaryCta,
+  secondaryCta,
+  footnote,
+  renderLink = defaultRenderLink,
+}: CtaSectionProps) {
+  return (
+    <section className="overflow-hidden rounded-2xl border bg-card">
+      <div className="relative px-6 py-16 sm:px-10 sm:py-24">
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,hsl(var(--primary)/0.15),transparent_70%)]" />
+        <FadeIn direction="up">
+          <div className="relative mx-auto max-w-2xl text-center">
+            <div className="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+              <Sparkles className="size-5" />
+            </div>
+            <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>
+            <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
+              {renderLink({
+                href: primaryCta.href,
+                children: (
+                  <Button size="lg">
+                    {primaryCta.label}
+                    <ArrowRight className="ml-2 size-4" />
+                  </Button>
+                ),
+              })}
+              {secondaryCta &&
+                renderLink({
+                  href: secondaryCta.href,
+                  children: (
+                    <Button size="lg" variant="outline">
+                      {secondaryCta.label}
+                    </Button>
+                  ),
+                })}
+            </div>
+            {footnote && (
+              <p className="mt-4 text-sm text-muted-foreground">
+                {footnote}
+              </p>
+            )}
+          </div>
+        </FadeIn>
+      </div>
+    </section>
+  );
+}

package/src/marketing/FaqSection.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@olwiba/cn';
+import { SectionTitle } from './SectionTitle';
+import { FadeIn } from '../motion/FadeIn';
+
+export interface FaqSectionProps {
+  title?: string;
+  description?: string;
+  badge?: string;
+  items: Array<{ question: string; answer: string }>;
+}
+
+export function FaqSection({
+  title = 'Frequently asked questions',
+  description = 'Everything you need to know before getting started.',
+  badge = 'FAQ',
+  items,
+}: FaqSectionProps) {
+  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-3xl">
+          <SectionTitle title={title} description={description} badge={badge} />
+
+          <FadeIn direction="up">
+            <Accordion type="single" collapsible className="mt-10 w-full">
+              {items.map((item, i) => (
+                <AccordionItem key={i} value={`item-${i}`}>
+                  <AccordionTrigger className="text-left text-sm font-medium">
+                    {item.question}
+                  </AccordionTrigger>
+                  <AccordionContent className="text-sm text-muted-foreground">
+                    {item.answer}
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          </FadeIn>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/marketing/FeaturesSection.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import type { LucideIcon } from 'lucide-react';
+import { FeatureCard } from '../components/FeatureCard';
+import { SectionTitle } from './SectionTitle';
+import { StaggerChildren } from '../motion/StaggerChildren';
+
+export interface FeaturesSectionProps {
+  title?: string;
+  description?: string;
+  badge?: string;
+  features: Array<{ icon: LucideIcon; title: string; description: string; href?: string }>;
+}
+
+export function FeaturesSection({
+  title = 'Everything you need to ship fast',
+  description = 'A complete system of components, blocks, and hooks designed to work together - and get out of your way.',
+  badge = 'Features',
+  features,
+}: FeaturesSectionProps) {
+  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-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>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/marketing/Footer.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import type { AppShellRenderLink } from '../app/AppShell';
+
+export interface FooterProps {
+  brand: { name: string; logo?: ReactNode; href?: string };
+  navLinks?: Array<{ label: string; href: string }>;
+  socialLinks?: Array<{ label: string; href: string; icon: ReactNode }>;
+  legal?: string;
+  renderLink?: AppShellRenderLink;
+}
+
+const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) => (
+  <a href={href} className={className}>{children}</a>
+);
+
+export function Footer({
+  brand,
+  navLinks,
+  socialLinks,
+  legal,
+  renderLink = defaultRenderLink,
+}: FooterProps) {
+  const brandHref = brand.href ?? '/';
+  const copyrightText = legal ?? `\u00A9 ${new Date().getFullYear()} ${brand.name}. All rights reserved.`;
+
+  return (
+    <footer className="bg-gray-900">
+      <div className="mx-auto max-w-7xl overflow-hidden px-6 py-20 sm:py-24 lg:px-8">
+        {/* Brand */}
+        <div className="flex justify-center">
+          {renderLink({
+            href: brandHref,
+            className: 'flex items-center gap-2',
+            children: (
+              <>
+                {brand.logo && (
+                  <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-white/10 text-white">
+                    {brand.logo}
+                  </span>
+                )}
+                <span className="text-lg font-semibold text-white">{brand.name}</span>
+              </>
+            ),
+          })}
+        </div>
+
+        {/* Nav links */}
+        {navLinks && navLinks.length > 0 && (
+          <nav className="mt-10 flex flex-wrap justify-center gap-x-12 gap-y-3" aria-label="Footer">
+            {navLinks.map(({ label, href }) => (
+              <div key={label}>
+                {renderLink({
+                  href,
+                  className: 'text-sm/6 text-gray-400 hover:text-white transition-colors',
+                  children: label,
+                })}
+              </div>
+            ))}
+          </nav>
+        )}
+
+        {/* Social icons */}
+        {socialLinks && socialLinks.length > 0 && (
+          <div className="mt-10 flex justify-center gap-x-10">
+            {socialLinks.map(({ label, href, icon }) => (
+              <a
+                key={label}
+                href={href}
+                aria-label={label}
+                className="text-gray-400 hover:text-gray-300 transition-colors"
+              >
+                {icon}
+              </a>
+            ))}
+          </div>
+        )}
+
+        {/* Copyright */}
+        <p className="mt-10 text-center text-sm/6 text-gray-500">
+          {copyrightText}
+        </p>
+      </div>
+    </footer>
+  );
+}

package/src/marketing/HeroSection.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+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 type { AppShellRenderLink } from '../app/AppShell';
+
+export interface HeroSectionProps {
+  heading: string;
+  badge?: string;
+  description: string;
+  primaryCta: { label: string; href: string };
+  secondaryCta?: { label: string; href: string };
+  heroImage: React.ReactNode;
+  avatarUrls?: string[];
+  socialProofText?: string;
+  renderLink?: AppShellRenderLink;
+}
+
+const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) => (
+  <a href={href} className={className}>{children}</a>
+);
+
+export function HeroSection({
+  heading,
+  badge,
+  description,
+  primaryCta,
+  secondaryCta,
+  heroImage,
+  avatarUrls,
+  socialProofText,
+  renderLink = defaultRenderLink,
+}: HeroSectionProps) {
+  return (
+    <section className="overflow-hidden">
+      <div className="px-6 py-14 sm:px-10 sm:py-20">
+        <div className="mx-auto grid max-w-6xl items-center gap-10 lg:grid-cols-2 lg:gap-16">
+          {/* Left - text content */}
+          <FadeIn direction="left">
+            <div className="flex flex-col gap-6">
+              {badge && (
+                <div>
+                  <Badge variant="secondary">{badge}</Badge>
+                </div>
+              )}
+              <h1 className="text-balance text-4xl font-semibold tracking-tight sm:text-5xl lg:text-6xl">
+                {heading}
+              </h1>
+              <p className="max-w-lg text-pretty text-lg text-muted-foreground">
+                {description}
+              </p>
+              <div className="flex flex-wrap items-center gap-3">
+                {renderLink({
+                  href: primaryCta.href,
+                  children: (
+                    <Button size="lg">
+                      {primaryCta.label}
+                      <ArrowRight className="ml-2 size-4" />
+                    </Button>
+                  ),
+                })}
+                {secondaryCta &&
+                  renderLink({
+                    href: secondaryCta.href,
+                    children: (
+                      <Button size="lg" variant="outline">
+                        {secondaryCta.label}
+                      </Button>
+                    ),
+                  })}
+              </div>
+            </div>
+          </FadeIn>
+
+          {/* Right - hero image */}
+          <FadeIn direction="right" delay={200}>
+            <div className="overflow-hidden rounded-2xl">
+              {heroImage}
+            </div>
+          </FadeIn>
+        </div>
+
+        {/* Avatar social proof row */}
+        {(avatarUrls?.length || socialProofText) && (
+          <FadeIn direction="up" delay={400}>
+            <div className="mx-auto mt-12 flex max-w-6xl items-center gap-4">
+              {avatarUrls && avatarUrls.length > 0 && (
+                <div className="flex -space-x-3">
+                  {avatarUrls.map((url, i) => (
+                    <Avatar key={i} className="size-9 border-2 border-background">
+                      <AvatarImage src={url} alt="" />
+                      <AvatarFallback className="text-xs">
+                        {String.fromCharCode(65 + (i % 26))}
+                      </AvatarFallback>
+                    </Avatar>
+                  ))}
+                </div>
+              )}
+              {socialProofText && (
+                <p className="text-sm font-medium text-muted-foreground">
+                  {socialProofText}
+                </p>
+              )}
+            </div>
+          </FadeIn>
+        )}
+      </div>
+    </section>
+  );
+}

package/src/marketing/LogoStrip.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { FadeIn } from '../motion/FadeIn';
+
+export interface LogoStripProps {
+  logos: Array<{ src: string; darkSrc?: string; alt: string; href?: string }>;
+  label?: string;
+  speed?: 'slow' | 'normal' | 'fast';
+}
+
+const speedDuration = {
+  slow: '60s',
+  normal: '40s',
+  fast: '25s',
+} as const;
+
+export function LogoStrip({
+  logos,
+  label,
+  speed = 'normal',
+}: LogoStripProps) {
+  const duration = speedDuration[speed];
+
+  return (
+    <FadeIn direction="up">
+      <section className="overflow-hidden py-8">
+        {label && (
+          <p className="mb-6 text-center text-sm text-muted-foreground">{label}</p>
+        )}
+        <div
+          className="relative"
+          style={{
+            maskImage: 'linear-gradient(to right, transparent, black 10%, black 90%, transparent)',
+            WebkitMaskImage: 'linear-gradient(to right, transparent, black 10%, black 90%, transparent)',
+          }}
+        >
+          <div
+            className="flex w-max gap-12"
+            style={{
+              animation: `logo-strip-scroll ${duration} linear infinite`,
+            }}
+          >
+            {/* Render logos twice for seamless loop */}
+            {[...logos, ...logos].map((logo, i) => {
+              const img = logo.darkSrc ? (
+                <>
+                  <img
+                    src={logo.src}
+                    alt={logo.alt}
+                    className="h-8 w-auto object-contain opacity-60 grayscale transition-all hover:opacity-100 hover:grayscale-0 dark:hidden"
+                  />
+                  <img
+                    src={logo.darkSrc}
+                    alt={logo.alt}
+                    className="hidden h-8 w-auto object-contain opacity-60 grayscale transition-all hover:opacity-100 hover:grayscale-0 dark:block"
+                  />
+                </>
+              ) : (
+                <img
+                  src={logo.src}
+                  alt={logo.alt}
+                  className="h-8 w-auto object-contain opacity-60 grayscale transition-all hover:opacity-100 hover:grayscale-0"
+                />
+              );
+
+              return logo.href ? (
+                <a
+                  key={`${logo.alt}-${i}`}
+                  href={logo.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex shrink-0 items-center"
+                >
+                  {img}
+                </a>
+              ) : (
+                <div key={`${logo.alt}-${i}`} className="flex shrink-0 items-center">
+                  {img}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+
+      <style>{`
+        @keyframes logo-strip-scroll {
+          from { transform: translateX(0); }
+          to { transform: translateX(-50%); }
+        }
+      `}</style>
+    </FadeIn>
+  );
+}

package/src/marketing/Navbar.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import * as React from 'react';
+import { Menu, X } from 'lucide-react';
+import { Button, Separator, Sheet, SheetContent, SheetTrigger } from '@olwiba/cn';
+import type { AppShellRenderLink } from '../app/AppShell';
+import { ThemeSwitchMinimal } from '../components/ThemeSwitchMinimal';
+
+export interface NavbarProps {
+  brand: { name: string; logo?: React.ReactNode; href?: string };
+  navLinks: Array<{ label: string; href: string }>;
+  cta?: {
+    primary?: { label: string; href: string };
+    secondary?: { label: string; href: string };
+  };
+  showThemeToggle?: boolean;
+  renderLink?: AppShellRenderLink;
+}
+
+const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) => (
+  <a href={href} className={className}>{children}</a>
+);
+
+export function Navbar({
+  brand,
+  navLinks,
+  cta,
+  showThemeToggle = false,
+  renderLink = defaultRenderLink,
+}: NavbarProps) {
+  const [open, setOpen] = React.useState(false);
+  const brandHref = brand.href ?? '/';
+
+  return (
+    <section className="overflow-hidden rounded-2xl border bg-card">
+      <nav className="grid h-16 grid-cols-[1fr_auto_1fr] items-center px-6">
+        {/* Brand — left column */}
+        {renderLink({
+          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>
+              )}
+              <span>{brand.name}</span>
+            </span>
+          ),
+        })}
+
+        {/* Desktop nav links — center column, truly centered */}
+        <div className="hidden items-center gap-1 md:flex">
+          {navLinks.map((link) => (
+            <span key={link.label}>
+              {renderLink({
+                href: link.href,
+                className: 'rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground',
+                children: link.label,
+              })}
+            </span>
+          ))}
+        </div>
+
+        {/* Desktop CTAs — right column, right-aligned */}
+        <div className="hidden items-center justify-end gap-3 md:flex">
+          {cta?.secondary &&
+            renderLink({
+              href: cta.secondary.href,
+              children: <Button variant="ghost" size="sm">{cta.secondary.label}</Button>,
+            })}
+          {cta?.primary &&
+            renderLink({
+              href: cta.primary.href,
+              children: <Button size="sm">{cta.primary.label}</Button>,
+            })}
+          {showThemeToggle && <ThemeSwitchMinimal />}
+        </div>
+
+        {/* Mobile drawer — right column on small screens */}
+        <Sheet open={open} onOpenChange={setOpen}>
+          <SheetTrigger asChild>
+            <Button variant="ghost" size="icon" className="justify-self-end md:hidden">
+              <Menu className="size-5" />
+              <span className="sr-only">Open menu</span>
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="right" className="w-72">
+            <div className="flex items-center justify-between pb-4">
+              <span onClick={() => setOpen(false)} className="cursor-pointer">
+                {renderLink({
+                  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>
+                      )}
+                      <span>{brand.name}</span>
+                    </span>
+                  ),
+                })}
+              </span>
+              <div className="flex items-center gap-1">
+                {showThemeToggle && <ThemeSwitchMinimal />}
+                <Button variant="ghost" size="icon" onClick={() => setOpen(false)}>
+                  <X className="size-4" />
+                  <span className="sr-only">Close menu</span>
+                </Button>
+              </div>
+            </div>
+            <Separator />
+            <nav className="mt-4 flex flex-col gap-1">
+              {navLinks.map((link) => (
+                <span key={link.label} onClick={() => setOpen(false)}>
+                  {renderLink({
+                    href: link.href,
+                    className: 'block rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground',
+                    children: link.label,
+                  })}
+                </span>
+              ))}
+            </nav>
+            <div className="mt-6 flex flex-col gap-2">
+              {cta?.secondary &&
+                renderLink({
+                  href: cta.secondary.href,
+                  children: <Button variant="outline" className="w-full">{cta.secondary.label}</Button>,
+                })}
+              {cta?.primary &&
+                renderLink({
+                  href: cta.primary.href,
+                  children: <Button className="w-full">{cta.primary.label}</Button>,
+                })}
+            </div>
+          </SheetContent>
+        </Sheet>
+      </nav>
+    </section>
+  );
+}

package/src/marketing/NewsletterSection.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import * as React from 'react';
+import { ArrowRight, Mail } from 'lucide-react';
+import { Badge, Button, Input } from '@olwiba/cn';
+
+export function NewsletterSection() {
+  const [email, setEmail] = React.useState('');
+  const [submitted, setSubmitted] = React.useState(false);
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!email) return;
+    setSubmitted(true);
+  }
+
+  return (
+    <section className="overflow-hidden rounded-2xl border bg-card">
+      <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>
+
+          <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>
+
+          {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>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="mt-8 flex flex-col gap-3 sm:flex-row">
+              <Input
+                type="email"
+                placeholder="you@company.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                className="flex-1"
+              />
+              <Button type="submit">
+                Subscribe
+                <ArrowRight className="ml-2 size-4" />
+              </Button>
+            </form>
+          )}
+
+          <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>.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}