agentvibes 2.0.9 → 2.0.12

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

package/agentvibes.org/components/testimonials.tsx

@@ -0,0 +1,282 @@
+"use client";
+
+import { useState } from "react";
+import useMasonry from "@/utils/useMasonry";
+import Image, { StaticImageData } from "next/image";
+import TestimonialImg01 from "@/public/images/testimonial-01.jpg";
+import TestimonialImg02 from "@/public/images/testimonial-02.jpg";
+import TestimonialImg03 from "@/public/images/testimonial-03.jpg";
+import TestimonialImg04 from "@/public/images/testimonial-04.jpg";
+import TestimonialImg05 from "@/public/images/testimonial-05.jpg";
+import TestimonialImg06 from "@/public/images/testimonial-06.jpg";
+import TestimonialImg07 from "@/public/images/testimonial-07.jpg";
+import TestimonialImg08 from "@/public/images/testimonial-08.jpg";
+import TestimonialImg09 from "@/public/images/testimonial-09.jpg";
+import ClientImg01 from "@/public/images/client-logo-01.svg";
+import ClientImg02 from "@/public/images/client-logo-02.svg";
+import ClientImg03 from "@/public/images/client-logo-03.svg";
+import ClientImg04 from "@/public/images/client-logo-04.svg";
+import ClientImg05 from "@/public/images/client-logo-05.svg";
+import ClientImg06 from "@/public/images/client-logo-06.svg";
+import ClientImg07 from "@/public/images/client-logo-07.svg";
+import ClientImg08 from "@/public/images/client-logo-08.svg";
+import ClientImg09 from "@/public/images/client-logo-09.svg";
+
+const testimonials = [
+  {
+    img: TestimonialImg01,
+    clientImg: ClientImg01,
+    name: "MaKayla P.",
+    company: "Disney",
+    content:
+      "As a content creator, I was always on the lookout for a tool that could help me keep up with the demand. The AI-driven content tool has been a game-changer. It generates high-quality content in a fraction of the time it used to take me.",
+    categories: [1, 3, 5],
+  },
+  {
+    img: TestimonialImg02,
+    clientImg: ClientImg02,
+    name: "Andrew K.",
+    company: "Samsung",
+    content:
+      "I've tried several content generation tools, but this AI-driven tool is by far the best. It understands my brand's voice and consistently produces content that resonates with my audience!",
+    categories: [1, 2, 4],
+  },
+  {
+    img: TestimonialImg03,
+    clientImg: ClientImg03,
+    name: "Lucy D.",
+    company: "Rio",
+    content:
+      "Content creation used to be a bottleneck in our workflow, but not anymore. This AI tool is intuitive and produces top-notch content every time. It's like having an extra team member who never sleeps! Definitely recommend.",
+    categories: [1, 2, 5],
+  },
+  {
+    img: TestimonialImg04,
+    clientImg: ClientImg04,
+    name: "Pavel M.",
+    company: "Canon",
+    content:
+      "The quality of the content generated by this AI tool is outstanding. It has taken our content marketing to new heights, allowing us to publish more frequently without compromising on quality. Highly recommended for anyone.",
+    categories: [1, 4],
+  },
+  {
+    img: TestimonialImg05,
+    clientImg: ClientImg05,
+    name: "Miriam E.",
+    company: "Cadbury",
+    content:
+      "The AI-driven content tool has been a lifesaver for my marketing agency. We can now produce high-quality content for multiple clients quickly and efficiently. It's an invaluable asset to our team.",
+    categories: [1, 3, 5],
+  },
+  {
+    img: TestimonialImg06,
+    clientImg: ClientImg06,
+    name: "Eloise V.",
+    company: "Maffell",
+    content:
+      "I'm amazed at how well this AI-driven content tool performs. It's incredibly versatile and can generate content for blogs, social media, and even product descriptions effortlessly. It's fantastic!",
+    categories: [1, 3],
+  },
+  {
+    img: TestimonialImg07,
+    clientImg: ClientImg07,
+    name: "Pierre-Gilles L.",
+    company: "Binance",
+    content:
+      "I was blown away by how easy it was to create my content using this tool! Within a few hours, I had a professional-looking platform up and running, and my client could not believe it.",
+    categories: [1, 2, 5],
+  },
+  {
+    img: TestimonialImg08,
+    clientImg: ClientImg08,
+    name: "Danielle K.",
+    company: "Forbes Inc.",
+    content:
+      "I've never been a fan of complicated website AI tools, which is why Open PRO is perfect for me. Its minimalist design and simple functionality make staying organized feel like second nature.",
+    categories: [1, 4],
+  },
+  {
+    img: TestimonialImg09,
+    clientImg: ClientImg09,
+    name: "Mary P.",
+    company: "Ray Ban",
+    content:
+      "I've never been one for coding, so finding an AI tool that doesn't require any technical skills was a dream come true. This tool exceeded my expectations, and I'm proud to show off my new stuff to friends.",
+    categories: [1, 2],
+  },
+];
+
+export default function Testimonials() {
+  const masonryContainer = useMasonry();
+  const [category, setCategory] = useState<number>(1);
+
+  return (
+    <div className="mx-auto max-w-6xl px-4 sm:px-6">
+      <div className="border-t py-12 [border-image:linear-gradient(to_right,transparent,--theme(--color-slate-400/.25),transparent)1] md:py-20">
+        {/* Section header */}
+        <div className="mx-auto max-w-3xl pb-12 text-center">
+          <h2 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-4 font-nacelle text-3xl font-semibold text-transparent md:text-4xl">
+            Don't take our word for it
+          </h2>
+          <p className="text-lg text-indigo-200/65">
+            We provide tech-first solutions that empower decision-makers to
+            build healthier and happier workspaces from anywhere in the world.
+          </p>
+        </div>
+
+        <div>
+          {/* Buttons */}
+          <div className="flex justify-center pb-12 max-md:hidden md:pb-16">
+            <div className="relative inline-flex flex-wrap justify-center rounded-[1.25rem] bg-gray-800/40 p-1">
+              {/* Button #1 */}
+              <button
+                className={`flex h-8 flex-1 items-center gap-2.5 whitespace-nowrap rounded-full px-3 text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-3 focus-visible:ring-indigo-200 ${category === 1 ? "relative bg-linear-to-b from-gray-900 via-gray-800/60 to-gray-900 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_bottom,--theme(--color-indigo-500/0),--theme(--color-indigo-500/.5))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)]" : "opacity-65 transition-opacity hover:opacity-90"}`}
+                aria-pressed={category === 1}
+                onClick={() => setCategory(1)}
+              >
+                <svg
+                  className={`fill-current ${category === 1 ? "text-indigo-500" : "text-gray-600"}`}
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height={16}
+                >
+                  <path d="M.062 10.003a1 1 0 0 1 1.947.455c-.019.08.01.152.078.19l5.83 3.333c.052.03.115.03.168 0l5.83-3.333a.163.163 0 0 0 .078-.188 1 1 0 0 1 1.947-.459 2.161 2.161 0 0 1-1.032 2.384l-5.83 3.331a2.168 2.168 0 0 1-2.154 0l-5.83-3.331a2.162 2.162 0 0 1-1.032-2.382Zm7.854-7.981-5.83 3.332a.17.17 0 0 0 0 .295l5.828 3.33c.054.031.118.031.17.002l5.83-3.333a.17.17 0 0 0 0-.294L8.085 2.023a.172.172 0 0 0-.17-.001ZM9.076.285l5.83 3.332c1.458.833 1.458 2.935 0 3.768l-5.83 3.333c-.667.38-1.485.38-2.153-.001l-5.83-3.332c-1.457-.833-1.457-2.935 0-3.767L6.925.285a2.173 2.173 0 0 1 2.15 0Z" />
+                </svg>
+                <span>View All</span>
+              </button>
+              {/* Button #2 */}
+              <button
+                className={`flex h-8 flex-1 items-center gap-2.5 whitespace-nowrap rounded-full px-3 text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-3 focus-visible:ring-indigo-200 ${category === 2 ? "relative bg-linear-to-b from-gray-900 via-gray-800/60 to-gray-900 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_bottom,--theme(--color-indigo-500/0),--theme(--color-indigo-500/.5))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)]" : "opacity-65 transition-opacity hover:opacity-90"}`}
+                aria-pressed={category === 2}
+                onClick={() => setCategory(2)}
+              >
+                <svg
+                  className={`fill-current ${category === 2 ? "text-indigo-500" : "text-gray-600"}`}
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height={16}
+                >
+                  <path d="M6.5 3.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM9 6.855A3.502 3.502 0 0 0 8 0a3.5 3.5 0 0 0-1 6.855v1.656L5.534 9.65a3.5 3.5 0 1 0 1.229 1.578L8 10.267l1.238.962a3.5 3.5 0 1 0 1.229-1.578L9 8.511V6.855Zm2.303 4.74c.005-.005.01-.01.013-.016l.012-.016a1.5 1.5 0 1 1-.025.032ZM3.5 11A1.497 1.497 0 0 1 5 12.5 1.5 1.5 0 1 1 3.5 11Z" />
+                </svg>
+                <span>Web Apps</span>
+              </button>
+              {/* Button #3 */}
+              <button
+                className={`flex h-8 flex-1 items-center gap-2.5 whitespace-nowrap rounded-full px-3 text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-3 focus-visible:ring-indigo-200 ${category === 3 ? "relative bg-linear-to-b from-gray-900 via-gray-800/60 to-gray-900 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_bottom,--theme(--color-indigo-500/0),--theme(--color-indigo-500/.5))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)]" : "opacity-65 transition-opacity hover:opacity-90"}`}
+                aria-pressed={category === 3}
+                onClick={() => setCategory(3)}
+              >
+                <svg
+                  className={`fill-current ${category === 3 ? "text-indigo-500" : "text-gray-600"}`}
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height={16}
+                >
+                  <path d="M2.428 10c.665-1.815 1.98-3.604 3.44-4.802-.6-1.807-1.443-3.079-2.29-3.18-1.91-.227-2.246 2.04-.174 2.962a1 1 0 1 1-.813 1.827C-1.407 5.028-.589-.491 3.815.032c1.605.191 2.925 1.811 3.79 4.07.979-.427 1.937-.51 2.735-.092.818.429 1.143 1.123 1.294 2.148.015.1.022.149.043.32.542-.537 1.003-.797 1.693-.622.64.162.894.493 1.195 1.147l.018.04a1 1 0 0 1 1.133 1.61c-.46.47-1.12.574-1.744.398a1.661 1.661 0 0 1-.87-.592 2.127 2.127 0 0 1-.224-.349 3.225 3.225 0 0 1-.55.477c-.377.253-.8.368-1.259.267-.993-.218-1.21-.779-1.367-2.05-.027-.22-.033-.262-.046-.353-.067-.452-.144-.617-.244-.67-.225-.118-.665-.013-1.206.278.297 1.243.475 2.587.516 3.941H15a1 1 0 0 1 0 2H8.68l-.025.285c-.173 1.918-.906 3.381-2.654 3.668-1.5.246-3.013-.47-3.677-1.858-.29-.637-.39-1.35-.342-2.095H1a1 1 0 0 1 0-2h1.428Zm2.11 0h2.175a18.602 18.602 0 0 0-.284-2.577c-.205.202-.408.42-.606.654A9.596 9.596 0 0 0 4.537 10Zm2.135 2H3.942c-.032.465.03.888.194 1.25.258.538.89.836 1.54.73.546-.09.888-.772.988-1.875L6.673 12Z" />
+                </svg>
+                <span>eCommerce</span>
+              </button>
+              {/* Button #4 */}
+              <button
+                className={`flex h-8 flex-1 items-center gap-2.5 whitespace-nowrap rounded-full px-3 text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-3 focus-visible:ring-indigo-200 ${category === 4 ? "relative bg-linear-to-b from-gray-900 via-gray-800/60 to-gray-900 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_bottom,--theme(--color-indigo-500/0),--theme(--color-indigo-500/.5))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)]" : "opacity-65 transition-opacity hover:opacity-90"}`}
+                aria-pressed={category === 4}
+                onClick={() => setCategory(4)}
+              >
+                <svg
+                  className={`fill-current ${category === 4 ? "text-indigo-500" : "text-gray-600"}`}
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height={16}
+                >
+                  <path d="M3.757 3.758a6 6 0 0 1 8.485 8.485 5.992 5.992 0 0 1-5.301 1.664 1 1 0 1 0-.351 1.969 8 8 0 1 0-4.247-2.218 1 1 0 0 0 1.415-.001L9.12 8.294v1.827a1 1 0 1 0 2 0v-4.2a.997.997 0 0 0-1-1.042H5.879a1 1 0 1 0 0 2h1.829l-4.599 4.598a6 6 0 0 1 .648-7.719Z" />
+                </svg>
+                <span>Enteprise</span>
+              </button>
+              {/* Button #5 */}
+              <button
+                className={`flex h-8 flex-1 items-center gap-2.5 whitespace-nowrap rounded-full px-3 text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-3 focus-visible:ring-indigo-200 ${category === 5 ? "relative bg-linear-to-b from-gray-900 via-gray-800/60 to-gray-900 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-transparent before:[background:linear-gradient(to_bottom,--theme(--color-indigo-500/0),--theme(--color-indigo-500/.5))_border-box] before:[mask-composite:exclude_!important] before:[mask:linear-gradient(white_0_0)_padding-box,_linear-gradient(white_0_0)]" : "opacity-65 transition-opacity hover:opacity-90"}`}
+                aria-pressed={category === 5}
+                onClick={() => setCategory(5)}
+              >
+                <svg
+                  className={`fill-current ${category === 5 ? "text-indigo-500" : "text-gray-600"}`}
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height={16}
+                >
+                  <path d="M13.95.879a3 3 0 0 0-4.243 0L1.293 9.293a1 1 0 0 0-.274.51l-1 5a1 1 0 0 0 1.177 1.177l5-1a1 1 0 0 0 .511-.273l1.16-1.16a1 1 0 0 0-1.414-1.414l-.946.946-3.232.646.646-3.232 8.2-8.2a1 1 0 0 1 1.414 0l1.172 1.172a1 1 0 0 1 0 1.414l-.55.549a1 1 0 0 0 1.415 1.414l.55-.55a3 3 0 0 0 0-4.241L13.948.879ZM3.25 4.5a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Zm11.474 6.029-1.521-.752-.752-1.521c-.168-.341-.73-.341-.896 0l-.752 1.52-1.521.753a.498.498 0 0 0 0 .896l1.52.752.753 1.52a.5.5 0 0 0 .896 0l.752-1.52 1.52-.752a.498.498 0 0 0 0-.896Z" />
+                </svg>
+                <span>Enteprise</span>
+              </button>
+            </div>
+          </div>
+
+          {/* Cards */}
+          <div
+            className="mx-auto grid max-w-sm items-start gap-6 sm:max-w-none sm:grid-cols-2 lg:grid-cols-3"
+            ref={masonryContainer}
+          >
+            {testimonials.map((testimonial, index) => (
+              <div key={index} className="group">
+                <Testimonial testimonial={testimonial} category={category}>
+                  {testimonial.content}
+                </Testimonial>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function Testimonial({
+  testimonial,
+  category,
+  children,
+}: {
+  testimonial: {
+    img: StaticImageData;
+    clientImg: StaticImageData;
+    name: string;
+    company: string;
+    content: string;
+    categories: number[];
+  };
+  category: number;
+  children: React.ReactNode;
+}) {
+  return (
+    <article
+      className={`relative rounded-2xl bg-linear-to-br from-gray-900/50 via-gray-800/25 to-gray-900/50 p-5 backdrop-blur-xs transition-opacity 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)] ${!testimonial.categories.includes(category) ? "opacity-30" : ""}`}
+    >
+      <div className="flex flex-col gap-4">
+        <div>
+          <Image src={testimonial.clientImg} height={36} alt="Client logo" />
+        </div>
+        <p className="text-indigo-200/65 before:content-['“'] after:content-['”']">
+          {children}
+        </p>
+        <div className="flex items-center gap-3">
+          <Image
+            className="inline-flex shrink-0 rounded-full"
+            src={testimonial.img}
+            width={36}
+            height={36}
+            alt={testimonial.name}
+          />
+          <div className="text-sm font-medium text-gray-200">
+            <span>{testimonial.name}</span>
+            <span className="text-gray-700"> - </span>
+            <a
+              className="text-indigo-200/65 transition-colors hover:text-indigo-500"
+              href="#0"
+            >
+              {testimonial.company}
+            </a>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}

package/agentvibes.org/components/ui/footer.tsx

@@ -0,0 +1,82 @@
+import Logo from "./logo";
+import Image from "next/image";
+import FooterIllustration from "@/public/images/footer-illustration.svg";
+
+export default function Footer() {
+  return (
+    <footer>
+      <div className="relative mx-auto max-w-6xl px-4 sm:px-6">
+        {/* Footer illustration */}
+        <div
+          className="pointer-events-none absolute bottom-0 left-1/2 -z-10 -translate-x-1/2"
+          aria-hidden="true"
+        >
+          <Image
+            className="max-w-none"
+            src={FooterIllustration}
+            width={1076}
+            height={378}
+            alt="Footer illustration"
+          />
+        </div>
+        <div className="py-8 md:py-12">
+          <div className="flex justify-between items-center mb-6">
+            <div className="mb-3">
+              <Logo />
+            </div>
+            <div className="text-sm">
+              <p className="mb-3 text-indigo-200/65">
+                © AgentVibes.org, All Rights Reserved
+              </p>
+              <ul className="inline-flex gap-1">
+                <li>
+                  <a
+                    className="flex items-center justify-center text-indigo-500 transition hover:text-indigo-400"
+                    href="https://github.com/paulpreibisch/AgentVibes"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="Github"
+                  >
+                    <svg
+                      className="h-8 w-8 fill-current"
+                      viewBox="0 0 32 32"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path d="M16 8.2c-4.4 0-8 3.6-8 8 0 3.5 2.3 6.5 5.5 7.6.4.1.5-.2.5-.4V22c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.3 1.9.9 2.3.7.1-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-4 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8.6-.2 1.3-.3 2-.3s1.4.1 2 .3c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.6.8 1.3.8 2.1 0 3.1-1.9 3.7-3.7 3.9.3.4.6.9.6 1.6v2.2c0 .2.1.5.6.4 3.2-1.1 5.5-4.1 5.5-7.6-.1-4.4-3.7-8-8.1-8z" />
+                    </svg>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          {/* Disclaimer */}
+          <div className="border-t border-gray-800 pt-6 text-center">
+            <p className="text-xs text-indigo-200/50 max-w-4xl mx-auto inline-block">
+              <strong>Disclaimer:</strong> AgentVibes is not affiliated with, endorsed by, or officially connected to ElevenLabs, Anthropic, or Claude.
+              ElevenLabs API usage is subject to their{" "}
+              <a
+                href="https://elevenlabs.io/terms"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-indigo-400 hover:text-indigo-300 underline"
+              >
+                terms of service
+              </a>
+              {" "}and{" "}
+              <a
+                href="https://elevenlabs.io/pricing"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-indigo-400 hover:text-indigo-300 underline"
+              >
+                pricing
+              </a>
+              . Users are responsible for their own API costs. Provided "as-is" under Apache 2.0 License without warranty.
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}