agentvibes 2.0.17 → 2.0.20

package/agentvibes.org/components/hero-home.tsx

@@ -0,0 +1,133 @@
+export default function HeroHome() {
+  return (
+    <section>
+      <div className="mx-auto max-w-6xl px-4 sm:px-6">
+        {/* Hero content */}
+        <div className="py-12 md:py-20">
+          {/* Section header */}
+          <div className="pb-12 text-center md:pb-20">
+            <h1
+              className="animate-[gradient_6s_linear_infinite] bg-[linear-gradient(to_right,var(--color-gray-200),var(--color-indigo-200),var(--color-gray-50),var(--color-indigo-300),var(--color-gray-200))] bg-[length:200%_auto] bg-clip-text pb-5 font-nacelle text-4xl font-semibold text-transparent md:text-5xl"
+              data-aos="fade-up"
+            >
+              🎤 Bring Your Claude Code Sessions to Life
+            </h1>
+            <div className="mx-auto max-w-3xl">
+              <p
+                className="mb-8 text-xl text-[--color-agent-magenta]"
+                data-aos="fade-up"
+                data-aos-delay={200}
+              >
+                Professional text-to-speech narration for Claude Code with 150+ AI voices,
+                multiple provider options, and support for 30+ languages.
+              </p>
+
+              {/* Audio Samples */}
+              <div className="mb-8 mt-5 rounded-2xl border-2 border-purple-500 p-8" data-aos="fade-up" data-aos-delay={300}>
+                <h3 className="mb-6 text-center text-2xl font-semibold text-[--color-agent-cyan]">
+                  Finally, your Agents can Talk back!
+                </h3>
+                <div className="flex flex-wrap justify-center gap-4">
+                <div className="flex flex-col items-center">
+                  <span className="mb-2 text-sm text-gray-400">Sarcastic</span>
+                  <audio controls className="w-48">
+                    <source src="/audio/02-sarcastic.mp3" type="audio/mpeg" />
+                  </audio>
+                </div>
+                <div className="flex flex-col items-center">
+                  <span className="mb-2 text-sm text-gray-400">Angry</span>
+                  <audio controls className="w-48">
+                    <source src="/audio/03-angry.mp3" type="audio/mpeg" />
+                  </audio>
+                </div>
+                <div className="flex flex-col items-center">
+                  <span className="mb-2 text-sm text-gray-400">Grandpa</span>
+                  <audio controls className="w-48">
+                    <source src="/audio/04-grandpa.mp3" type="audio/mpeg" />
+                  </audio>
+                </div>
+                <div className="flex flex-col items-center">
+                  <span className="mb-2 text-sm text-gray-400">Spanish (Antoni)</span>
+                  <audio controls className="w-48">
+                    <source src="/audio/spanish-antoni.mp3" type="audio/mpeg" />
+                  </audio>
+                </div>
+                <div className="flex flex-col items-center">
+                  <span className="mb-2 text-sm text-gray-400">French (Rachel)</span>
+                  <audio controls className="w-48">
+                    <source src="/audio/french-rachel.mp3" type="audio/mpeg" />
+                  </audio>
+                </div>
+                </div>
+              </div>
+
+              {/* Badges */}
+              <div className="flex flex-wrap items-center justify-center gap-3 mb-8" data-aos="fade-up" data-aos-delay={350}>
+                <a
+                  href="https://www.npmjs.com/package/agentvibes"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="transition-opacity hover:opacity-80"
+                >
+                  <img src="https://badge.fury.io/js/agentvibes.svg" alt="npm version" className="h-5 w-auto" />
+                </a>
+                <a
+                  href="https://github.com/paulpreibisch/AgentVibes/actions/workflows/test.yml"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="transition-opacity hover:opacity-80"
+                >
+                  <img src="https://github.com/paulpreibisch/AgentVibes/actions/workflows/test.yml/badge.svg" alt="Test Suite" className="h-5 w-auto" />
+                </a>
+                <a
+                  href="https://github.com/paulpreibisch/AgentVibes/actions/workflows/publish.yml"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="transition-opacity hover:opacity-80"
+                >
+                  <img src="https://github.com/paulpreibisch/AgentVibes/actions/workflows/publish.yml/badge.svg" alt="Publish" className="h-5 w-auto" />
+                </a>
+                <a
+                  href="https://opensource.org/licenses/Apache-2.0"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="transition-opacity hover:opacity-80"
+                >
+                  <img src="https://img.shields.io/badge/License-Apache_2.0-blue.svg" alt="License" className="h-5 w-auto" />
+                </a>
+              </div>
+
+              <div className="mx-auto max-w-xs sm:flex sm:max-w-none sm:justify-center">
+                <div data-aos="fade-up" data-aos-delay={400}>
+                  <a
+                    className="btn group mb-4 w-full bg-linear-to-t from-indigo-600 to-indigo-500 bg-[length:100%_100%] bg-[bottom] text-white shadow-[inset_0px_1px_0px_0px_--theme(--color-white/.16)] hover:bg-[length:100%_150%] sm:mb-0 sm:w-auto"
+                    href="https://github.com/paulpreibisch/AgentVibes"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <span className="relative inline-flex items-center">
+                      Download on GitHub
+                      <span className="ml-1 tracking-normal text-white/50 transition-transform group-hover:translate-x-0.5">
+                        -&gt;
+                      </span>
+                    </span>
+                  </a>
+                </div>
+                <div data-aos="fade-up" data-aos-delay={600}>
+                  <a
+                    className="btn relative w-full bg-linear-to-b from-gray-800 to-gray-800/60 bg-[length:100%_100%] bg-[bottom] text-gray-300 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_right,var(--color-gray-800),var(--color-gray-700),var(--color-gray-800))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)] hover:bg-[length:100%_150%] sm:ml-4 sm:w-auto"
+                    href="https://github.com/paulpreibisch/AgentVibes/releases/tag/v2.0.0"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    View v2.0.0 Release
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/agentvibes.org/components/mdx-components.tsx

@@ -0,0 +1,128 @@
+import { CodeBlock } from './code-block';
+
+export const MDXComponents = {
+  // Custom pre block (wraps code blocks)
+  pre: ({ children, ...props }: any) => {
+    // Extract the code element from pre
+    const codeChild = children?.props ? children : children?.type === 'code' ? children : null;
+
+    if (codeChild?.props?.className) {
+      const match = /language-(\w+)/.exec(codeChild.props.className || '');
+      const language = match ? match[1] : 'text';
+      const codeContent = String(codeChild.props.children || '').replace(/\n$/, '');
+
+      return (
+        <CodeBlock language={language}>
+          {codeContent}
+        </CodeBlock>
+      );
+    }
+
+    // Fallback for pre without code
+    return <pre {...props}>{children}</pre>;
+  },
+
+  // Custom inline code component
+  code: ({ className, children, ...props }: any) => {
+    // Only render inline code (code blocks are handled by pre above)
+    if (!className) {
+      return (
+        <code
+          className="rounded bg-gray-800 px-2 py-1 text-sm text-indigo-300 before:content-none after:content-none"
+          {...props}
+        >
+          {children}
+        </code>
+      );
+    }
+
+    // This is part of a code block, just return children
+    return <code {...props}>{children}</code>;
+  },
+
+  // Custom heading components with anchors
+  h1: ({ children, ...props }: any) => (
+    <h1
+      className="mb-6 mt-8 font-nacelle text-4xl font-bold text-gray-100"
+      {...props}
+    >
+      {children}
+    </h1>
+  ),
+
+  h2: ({ children, ...props }: any) => (
+    <h2
+      className="mb-4 mt-8 font-nacelle text-3xl font-semibold text-gray-100"
+      {...props}
+    >
+      {children}
+    </h2>
+  ),
+
+  h3: ({ children, ...props }: any) => (
+    <h3
+      className="mb-3 mt-6 font-nacelle text-2xl font-semibold text-gray-100"
+      {...props}
+    >
+      {children}
+    </h3>
+  ),
+
+  // Custom paragraph
+  p: ({ children, ...props }: any) => (
+    <p className="mb-4 leading-7 text-gray-300" {...props}>
+      {children}
+    </p>
+  ),
+
+  // Custom links
+  a: ({ children, ...props }: any) => (
+    <a
+      className="text-indigo-400 no-underline transition-colors hover:text-indigo-300"
+      {...props}
+    >
+      {children}
+    </a>
+  ),
+
+  // Custom lists
+  ul: ({ children, ...props }: any) => (
+    <ul className="mb-4 list-disc space-y-2 pl-6 text-gray-300" {...props}>
+      {children}
+    </ul>
+  ),
+
+  ol: ({ children, ...props }: any) => (
+    <ol className="mb-4 list-decimal space-y-2 pl-6 text-gray-300" {...props}>
+      {children}
+    </ol>
+  ),
+
+  li: ({ children, ...props }: any) => (
+    <li className="text-gray-300" {...props}>
+      {children}
+    </li>
+  ),
+
+  // Custom blockquote
+  blockquote: ({ children, ...props }: any) => (
+    <blockquote
+      className="my-4 border-l-4 border-indigo-500 bg-gray-800/50 py-3 pl-4 pr-4 italic text-gray-300"
+      {...props}
+    >
+      {children}
+    </blockquote>
+  ),
+
+  // Custom strong/bold
+  strong: ({ children, ...props }: any) => (
+    <strong className="font-semibold text-gray-200" {...props}>
+      {children}
+    </strong>
+  ),
+
+  // Custom horizontal rule
+  hr: (props: any) => (
+    <hr className="my-8 border-gray-800" {...props} />
+  ),
+};

package/agentvibes.org/components/modal-video.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { useState, useRef } from "react";
+import type { StaticImageData } from "next/image";
+import { Dialog, DialogBackdrop, DialogPanel } from "@headlessui/react";
+import Image from "next/image";
+import SecondaryIllustration from "@/public/images/secondary-illustration.svg";
+
+interface ModalVideoProps {
+  thumb: StaticImageData;
+  thumbWidth: number;
+  thumbHeight: number;
+  thumbAlt: string;
+  video: string;
+  videoWidth: number;
+  videoHeight: number;
+}
+
+export default function ModalVideo({
+  thumb,
+  thumbWidth,
+  thumbHeight,
+  thumbAlt,
+  video,
+  videoWidth,
+  videoHeight,
+}: ModalVideoProps) {
+  const [modalOpen, setModalOpen] = useState<boolean>(false);
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  return (
+    <div className="relative">
+      {/* Secondary illustration */}
+      <div
+        className="pointer-events-none absolute bottom-8 left-1/2 -z-10 -ml-28 -translate-x-1/2 translate-y-1/2"
+        aria-hidden="true"
+      >
+        <Image
+          className="md:max-w-none"
+          src={SecondaryIllustration}
+          width={1165}
+          height={1012}
+          alt="Secondary illustration"
+        />
+      </div>
+
+      {/* Video thumbnail */}
+      <button
+        className="group relative flex items-center justify-center rounded-2xl focus:outline-hidden focus-visible:ring-3 focus-visible:ring-indigo-200"
+        onClick={() => {
+          setModalOpen(true);
+        }}
+        aria-label="Watch the video"
+        data-aos="fade-up"
+        data-aos-delay={200}
+      >
+        <figure className="relative overflow-hidden rounded-2xl before:absolute before:inset-0 before:-z-10 before:bg-linear-to-br before:from-gray-900 before:via-indigo-500/20 before:to-gray-900">
+          <Image
+            className="opacity-50 grayscale"
+            src={thumb}
+            width={thumbWidth}
+            height={thumbHeight}
+            priority
+            alt={thumbAlt}
+          />
+        </figure>
+        {/* Play icon */}
+        <span className="pointer-events-none absolute p-2.5 before:absolute before:inset-0 before:rounded-full before:bg-gray-950 before:duration-300 group-hover:before:scale-110">
+          <span className="relative flex items-center gap-3">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width={20}
+              height={20}
+              fill="none"
+            >
+              <path
+                fill="url(#pla)"
+                fillRule="evenodd"
+                d="M10 20c5.523 0 10-4.477 10-10S15.523 0 10 0 0 4.477 0 10s4.477 10 10 10Zm3.5-10-5-3.5v7l5-3.5Z"
+                clipRule="evenodd"
+              />
+              <defs>
+                <linearGradient
+                  id="pla"
+                  x1={10}
+                  x2={10}
+                  y1={0}
+                  y2={20}
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stopColor="#6366F1" />
+                  <stop offset={1} stopColor="#6366F1" stopOpacity=".72" />
+                </linearGradient>
+              </defs>
+            </svg>
+            <span className="text-sm font-medium leading-tight text-gray-300">
+              Watch Demo
+              <span className="text-gray-600"> - </span>
+              3:47
+            </span>
+          </span>
+        </span>
+      </button>
+      {/* End: Video thumbnail */}
+
+      <Dialog
+        initialFocus={videoRef}
+        open={modalOpen}
+        onClose={() => setModalOpen(false)}
+      >
+        <DialogBackdrop
+          transition
+          className="fixed inset-0 z-99999 bg-black/70 transition-opacity duration-300 ease-out data-closed:opacity-0"
+        />
+        <div className="fixed inset-0 z-99999 flex px-4 py-6 sm:px-6">
+          <div className="mx-auto flex h-full max-w-6xl items-center">
+            <DialogPanel
+              transition
+              className="aspect-video max-h-full w-full overflow-hidden rounded-2xl bg-black shadow-2xl duration-300 ease-out data-closed:scale-95 data-closed:opacity-0"
+            >
+              <video
+                ref={videoRef}
+                width={videoWidth}
+                height={videoHeight}
+                loop
+                controls
+              >
+                <source src={video} type="video/mp4" />
+                Your browser does not support the video tag.
+              </video>
+            </DialogPanel>
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  );
+}

package/agentvibes.org/components/page-illustration.tsx

@@ -0,0 +1,55 @@
+import Image from "next/image";
+import Illustration from "@/public/images/page-illustration.svg";
+import BlurredShapeGray from "@/public/images/blurred-shape-gray.svg";
+import BlurredShape from "@/public/images/blurred-shape.svg";
+
+export default function PageIllustration({
+  multiple = false,
+}: {
+  multiple?: boolean;
+}) {
+  return (
+    <>
+      <div
+        className="pointer-events-none absolute left-1/2 top-0 -z-10 -translate-x-1/4"
+        aria-hidden="true"
+      >
+        <Image
+          className="max-w-none"
+          src={Illustration}
+          width={846}
+          height={594}
+          alt="Page illustration"
+        />
+      </div>
+      {multiple && (
+        <>
+          <div
+            className="pointer-events-none absolute left-1/2 top-[400px] -z-10 -mt-20 -translate-x-full opacity-50"
+            aria-hidden="true"
+          >
+            <Image
+              className="max-w-none"
+              src={BlurredShapeGray}
+              width={760}
+              height={668}
+              alt="Blurred shape"
+            />
+          </div>
+          <div
+            className="pointer-events-none absolute left-1/2 top-[440px] -z-10 -translate-x-1/3"
+            aria-hidden="true"
+          >
+            <Image
+              className="max-w-none"
+              src={BlurredShape}
+              width={760}
+              height={668}
+              alt="Blurred shape"
+            />
+          </div>
+        </>
+      )}
+    </>
+  );
+}

package/agentvibes.org/components/spotlight.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import React, { useRef, useState, useEffect } from "react";
+import useMousePosition from "@/utils/useMousePosition";
+
+type SpotlightProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export default function Spotlight({
+  children,
+  className = "",
+}: SpotlightProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const mousePosition = useMousePosition();
+  const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+  const containerSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 });
+  const [boxes, setBoxes] = useState<Array<HTMLElement>>([]);
+
+  useEffect(() => {
+    containerRef.current &&
+      setBoxes(
+        Array.from(containerRef.current.children).map(
+          (el) => el as HTMLElement,
+        ),
+      );
+  }, []);
+
+  useEffect(() => {
+    initContainer();
+    window.addEventListener("resize", initContainer);
+
+    return () => {
+      window.removeEventListener("resize", initContainer);
+    };
+  }, [boxes]);
+
+  useEffect(() => {
+    onMouseMove();
+  }, [mousePosition]);
+
+  const initContainer = () => {
+    if (containerRef.current) {
+      containerSize.current.w = containerRef.current.offsetWidth;
+      containerSize.current.h = containerRef.current.offsetHeight;
+    }
+  };
+
+  const onMouseMove = () => {
+    if (containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      const { w, h } = containerSize.current;
+      const x = mousePosition.x - rect.left;
+      const y = mousePosition.y - rect.top;
+      const inside = x < w && x > 0 && y < h && y > 0;
+      if (inside) {
+        mouse.current.x = x;
+        mouse.current.y = y;
+        boxes.forEach((box) => {
+          const boxX =
+            -(box.getBoundingClientRect().left - rect.left) + mouse.current.x;
+          const boxY =
+            -(box.getBoundingClientRect().top - rect.top) + mouse.current.y;
+          box.style.setProperty("--mouse-x", `${boxX}px`);
+          box.style.setProperty("--mouse-y", `${boxY}px`);
+        });
+      }
+    }
+  };
+
+  return (
+    <div className={className} ref={containerRef}>
+      {children}
+    </div>
+  );
+}