agentvibes 2.0.20 → 2.0.22

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

@@ -1,133 +0,0 @@
-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

@@ -1,128 +0,0 @@
-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

@@ -1,137 +0,0 @@
-"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

@@ -1,55 +0,0 @@
-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

@@ -1,77 +0,0 @@
-"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>
-  );
-}