agentvibes 1.1.3 → 2.0.0

package/agentvibes.org/app/(auth)/reset-password/page.tsx

@@ -0,0 +1,45 @@
+export const metadata = {
+  title: "Reset Password - Open PRO",
+  description: "Page description",
+};
+
+import Link from "next/link";
+
+export default function ResetPassword() {
+  return (
+    <section>
+      <div className="mx-auto max-w-6xl px-4 sm:px-6">
+        <div className="py-12 md:py-20">
+          {/* Section header */}
+          <div className="pb-12 text-center">
+            <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 font-nacelle text-3xl font-semibold text-transparent md:text-4xl">
+              Reset your password
+            </h1>
+          </div>
+          {/* Contact form */}
+          <form className="mx-auto max-w-[400px]">
+            <div>
+              <label
+                className="mb-1 block text-sm font-medium text-indigo-200/65"
+                htmlFor="email"
+              >
+                Email
+              </label>
+              <input
+                id="email"
+                type="email"
+                className="form-input w-full"
+                placeholder="Your email"
+              />
+            </div>
+            <div className="mt-6">
+              <button className="btn 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%]">
+                Reset Password
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+}

package/agentvibes.org/app/(auth)/signin/page.tsx

@@ -0,0 +1,82 @@
+export const metadata = {
+  title: "Sign In - Open PRO",
+  description: "Page description",
+};
+
+import Link from "next/link";
+
+export default function SignIn() {
+  return (
+    <section>
+      <div className="mx-auto max-w-6xl px-4 sm:px-6">
+        <div className="py-12 md:py-20">
+          {/* Section header */}
+          <div className="pb-12 text-center">
+            <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 font-nacelle text-3xl font-semibold text-transparent md:text-4xl">
+              Welcome back
+            </h1>
+          </div>
+          {/* Contact form */}
+          <form className="mx-auto max-w-[400px]">
+            <div className="space-y-5">
+              <div>
+                <label
+                  className="mb-1 block text-sm font-medium text-indigo-200/65"
+                  htmlFor="email"
+                >
+                  Email
+                </label>
+                <input
+                  id="email"
+                  type="email"
+                  className="form-input w-full"
+                  placeholder="Your email"
+                />
+              </div>
+              <div>
+                <div className="mb-1 flex items-center justify-between gap-3">
+                  <label
+                    className="block text-sm font-medium text-indigo-200/65"
+                    htmlFor="password"
+                  >
+                    Password
+                  </label>
+                  <Link
+                    className="text-sm text-gray-600 hover:underline"
+                    href="/reset-password"
+                  >
+                    Forgot?
+                  </Link>
+                </div>
+                <input
+                  id="password"
+                  type="password"
+                  className="form-input w-full"
+                  placeholder="Your password"
+                />
+              </div>
+            </div>
+            <div className="mt-6 space-y-5">
+              <button className="btn 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%]">
+                Sign in
+              </button>
+              <div className="flex items-center gap-3 text-center text-sm italic text-gray-600 before:h-px before:flex-1 before:bg-linear-to-r before:from-transparent before:via-gray-400/25 after:h-px after:flex-1 after:bg-linear-to-r after:from-transparent after:via-gray-400/25">
+                or
+              </div>
+              <button 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%]">
+                Sign In with Google
+              </button>
+            </div>
+          </form>
+          {/* Bottom link */}
+          <div className="mt-6 text-center text-sm text-indigo-200/65">
+            Don't you have an account?{" "}
+            <Link className="font-medium text-indigo-500" href="/signup">
+              Sign Up
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/agentvibes.org/app/(auth)/signup/page.tsx

@@ -0,0 +1,104 @@
+export const metadata = {
+  title: "Sign Up - Open PRO",
+  description: "Page description",
+};
+
+import Link from "next/link";
+
+export default function SignUp() {
+  return (
+    <section>
+      <div className="mx-auto max-w-6xl px-4 sm:px-6">
+        <div className="py-12 md:py-20">
+          {/* Section header */}
+          <div className="pb-12 text-center">
+            <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 font-nacelle text-3xl font-semibold text-transparent md:text-4xl">
+              Create an account
+            </h1>
+          </div>
+          {/* Contact form */}
+          <form className="mx-auto max-w-[400px]">
+            <div className="space-y-5">
+              <div>
+                <label
+                  className="mb-1 block text-sm font-medium text-indigo-200/65"
+                  htmlFor="name"
+                >
+                  Name <span className="text-red-500">*</span>
+                </label>
+                <input
+                  id="name"
+                  type="text"
+                  className="form-input w-full"
+                  placeholder="Your full name"
+                  required
+                />
+              </div>
+              <div>
+                <label
+                  className="mb-1 block text-sm font-medium text-indigo-200/65"
+                  htmlFor="name"
+                >
+                  Company Name <span className="text-red-500">*</span>
+                </label>
+                <input
+                  id="company"
+                  type="text"
+                  className="form-input w-full"
+                  placeholder="Your company name"
+                  required
+                />
+              </div>
+              <div>
+                <label
+                  className="mb-1 block text-sm font-medium text-indigo-200/65"
+                  htmlFor="email"
+                >
+                  Work Email <span className="text-red-500">*</span>
+                </label>
+                <input
+                  id="email"
+                  type="email"
+                  className="form-input w-full"
+                  placeholder="Your work email"
+                />
+              </div>
+              <div>
+                <label
+                  className="block text-sm font-medium text-indigo-200/65"
+                  htmlFor="password"
+                >
+                  Password <span className="text-red-500">*</span>
+                </label>
+                <input
+                  id="password"
+                  type="password"
+                  className="form-input w-full"
+                  placeholder="Password (at least 10 characters)"
+                />
+              </div>
+            </div>
+            <div className="mt-6 space-y-5">
+              <button className="btn 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%]">
+                Register
+              </button>
+              <div className="flex items-center gap-3 text-center text-sm italic text-gray-600 before:h-px before:flex-1 before:bg-linear-to-r before:from-transparent before:via-gray-400/25 after:h-px after:flex-1 after:bg-linear-to-r after:from-transparent after:via-gray-400/25">
+                or
+              </div>
+              <button 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%]">
+                Sign In with Google
+              </button>
+            </div>
+          </form>
+          {/* Bottom link */}
+          <div className="mt-6 text-center text-sm text-indigo-200/65">
+            Already have an account?{" "}
+            <Link className="font-medium text-indigo-500" href="/signin">
+              Sign in
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/agentvibes.org/app/(default)/layout.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useEffect } from "react";
+
+import AOS from "aos";
+import "aos/dist/aos.css";
+
+import Footer from "@/components/ui/footer";
+
+export default function DefaultLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  useEffect(() => {
+    AOS.init({
+      once: true,
+      disable: "phone",
+      duration: 600,
+      easing: "ease-out-sine",
+    });
+  });
+
+  return (
+    <>
+      <main className="relative flex grow flex-col">{children}</main>
+
+      <Footer />
+    </>
+  );
+}

package/agentvibes.org/app/(default)/page.tsx

@@ -0,0 +1,20 @@
+export const metadata = {
+  title: "AgentVibes - Bring Your Claude Code Sessions to Life",
+  description: "Professional text-to-speech narration for Claude Code with 150+ voices, multiple providers, and 30+ languages.",
+};
+
+import PageIllustration from "@/components/page-illustration";
+import Hero from "@/components/hero-home";
+import Features from "@/components/features";
+import Cta from "@/components/cta";
+
+export default function Home() {
+  return (
+    <>
+      <PageIllustration />
+      <Hero />
+      <Features />
+      <Cta />
+    </>
+  );
+}

package/agentvibes.org/app/api/hello/route.ts

@@ -0,0 +1,3 @@
+export async function GET(request: Request) {
+  return new Response("Hello, Next.js!");
+}

package/agentvibes.org/app/css/additional-styles/theme.css

@@ -0,0 +1,82 @@
+/* Custom AOS animations */
+@media screen {
+  html:not(.no-js) body [data-aos="fade-up"] {
+    -webkit-transform: translate3d(0, 10px, 0);
+    transform: translate3d(0, 10px, 0);
+  }
+
+  html:not(.no-js) body [data-aos="fade-down"] {
+    -webkit-transform: translate3d(0, -10px, 0);
+    transform: translate3d(0, -10px, 0);
+  }
+
+  html:not(.no-js) body [data-aos="fade-right"] {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  html:not(.no-js) body [data-aos="fade-left"] {
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+
+  html:not(.no-js) body [data-aos="fade-up-right"] {
+    -webkit-transform: translate3d(-10px, 10px, 0);
+    transform: translate3d(-10px, 10px, 0);
+  }
+
+  html:not(.no-js) body [data-aos="fade-up-left"] {
+    -webkit-transform: translate3d(10px, 10px, 0);
+    transform: translate3d(10px, 10px, 0);
+  }
+
+  html:not(.no-js) body [data-aos="fade-down-right"] {
+    -webkit-transform: translate3d(-10px, -10px, 0);
+    transform: translate3d(-10px, -10px, 0);
+  }
+
+  html:not(.no-js) body [data-aos="fade-down-left"] {
+    -webkit-transform: translate3d(10px, -10px, 0);
+    transform: translate3d(10px, -10px, 0);
+  }
+
+  html:not(.no-js) body [data-aos="zoom-in-up"] {
+    -webkit-transform: translate3d(0, 10px, 0) scale(0.6);
+    transform: translate3d(0, 10px, 0) scale(0.6);
+  }
+
+  html:not(.no-js) body [data-aos="zoom-in-down"] {
+    -webkit-transform: translate3d(0, -10px, 0) scale(0.6);
+    transform: translate3d(0, -10px, 0) scale(0.6);
+  }
+
+  html:not(.no-js) body [data-aos="zoom-in-right"] {
+    -webkit-transform: translate3d(-10px, 0, 0) scale(0.6);
+    transform: translate3d(-10px, 0, 0) scale(0.6);
+  }
+
+  html:not(.no-js) body [data-aos="zoom-in-left"] {
+    -webkit-transform: translate3d(10px, 0, 0) scale(0.6);
+    transform: translate3d(10px, 0, 0) scale(0.6);
+  }
+
+  html:not(.no-js) body [data-aos="zoom-out-up"] {
+    -webkit-transform: translate3d(0, 10px, 0) scale(1.2);
+    transform: translate3d(0, 10px, 0) scale(1.2);
+  }
+
+  html:not(.no-js) body [data-aos="zoom-out-down"] {
+    -webkit-transform: translate3d(0, -10px, 0) scale(1.2);
+    transform: translate3d(0, -10px, 0) scale(1.2);
+  }
+
+  html:not(.no-js) body [data-aos="zoom-out-right"] {
+    -webkit-transform: translate3d(-10px, 0, 0) scale(1.2);
+    transform: translate3d(-10px, 0, 0) scale(1.2);
+  }
+
+  html:not(.no-js) body [data-aos="zoom-out-left"] {
+    -webkit-transform: translate3d(10px, 0, 0) scale(1.2);
+    transform: translate3d(10px, 0, 0) scale(1.2);
+  }
+}

package/agentvibes.org/app/css/additional-styles/utility-patterns.css

@@ -0,0 +1,55 @@
+/* Buttons */
+.btn,
+.btn-sm {
+    @apply inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-all;
+}
+
+.btn {
+    @apply px-4 py-[11px];
+}
+
+.btn-sm {
+    @apply px-3 py-[7px];
+}
+
+/* Forms */
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+}
+
+.form-input,
+.form-textarea,
+.form-multiselect,
+.form-select,
+.form-checkbox,
+.form-radio {
+    @apply border border-gray-700 bg-gray-900/50 focus:border-gray-600 focus:ring-0 focus:ring-offset-0;
+}
+
+.form-input,
+.form-textarea,
+.form-multiselect,
+.form-select {
+    @apply rounded-lg px-4 py-2.5 text-sm text-gray-200;
+}
+
+.form-input,
+.form-textarea {
+    @apply placeholder-gray-600;
+}
+
+.form-select {
+    @apply pr-10;
+}
+
+.form-checkbox,
+.form-radio {
+    @apply text-indigo-500;
+}
+
+.form-checkbox {
+    @apply rounded-xs;
+}

package/agentvibes.org/app/css/style.css

@@ -0,0 +1,100 @@
+@import 'tailwindcss';
+
+/* Additional styles */
+@import './additional-styles/utility-patterns.css' layer(components);
+@import './additional-styles/theme.css';
+
+@plugin "@tailwindcss/forms" {
+  strategy: base;
+}
+
+@theme {
+  /* AgentVibes Brand Colors */
+  --color-agent-cyan: #00d9ff;
+  --color-agent-magenta: #ff00ff;
+  --color-agent-dark: #1a1a1a;
+  --color-agent-cyan-light: #5ce1e6;
+  --color-agent-magenta-light: #ff66ff;
+
+  --font-inter: var(--font-inter), sans-serif;
+  --font-nacelle: var(--font-nacelle), sans-serif;
+
+  --text-xs: 0.8125rem;
+  --text-xs--line-height: 1.5384;
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.5715;
+  --text-base: 0.9375rem;
+  --text-base--line-height: 1.5333;
+  --text-base--letter-spacing: -0.0125em;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.5;
+  --text-lg--letter-spacing: -0.0125em;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.5;
+  --text-xl--letter-spacing: -0.0125em;
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: 1.415;
+  --text-2xl--letter-spacing: -0.0268em;
+  --text-3xl: 1.75rem;
+  --text-3xl--line-height: 1.3571;
+  --text-3xl--letter-spacing: -0.0268em;
+  --text-4xl: 2.5rem;
+  --text-4xl--line-height: 1.1;
+  --text-4xl--letter-spacing: -0.0268em;
+  --text-5xl: 3.5rem;
+  --text-5xl--line-height: 1;
+  --text-5xl--letter-spacing: -0.0268em;
+  --text-6xl: 4rem;
+  --text-6xl--line-height: 1;
+  --text-6xl--letter-spacing: -0.0268em;
+  --text-7xl: 4.5rem;
+  --text-7xl--line-height: 1;
+  --text-7xl--letter-spacing: -0.0268em;
+
+  --animate-shine: shine 5s ease-in-out 500ms infinite;
+  --animate-gradient: gradient 6s linear infinite;
+
+  @keyframes shine {
+    0% {
+      top: 0;
+      transform: scaleY(5);
+      opacity: 0;
+    }
+    10% {
+      opacity: 0.8;
+    }
+    20% {
+      top: 100%;
+      transform: scaleY(10);
+      opacity: 0;
+    }
+    100% {
+      top: 100%;
+      transform: scaleY(1);
+      opacity: 0;
+    }
+  }
+  @keyframes gradient {
+    to {
+      background-position: 200% center;
+    }
+  }
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}

package/agentvibes.org/app/layout.tsx

@@ -0,0 +1,63 @@
+import "./css/style.css";
+
+import { Inter } from "next/font/google";
+import localFont from "next/font/local";
+
+import Header from "@/components/ui/header";
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+  display: "swap",
+});
+
+const nacelle = localFont({
+  src: [
+    {
+      path: "../public/fonts/nacelle-regular.woff2",
+      weight: "400",
+      style: "normal",
+    },
+    {
+      path: "../public/fonts/nacelle-italic.woff2",
+      weight: "400",
+      style: "italic",
+    },
+    {
+      path: "../public/fonts/nacelle-semibold.woff2",
+      weight: "600",
+      style: "normal",
+    },
+    {
+      path: "../public/fonts/nacelle-semibolditalic.woff2",
+      weight: "600",
+      style: "italic",
+    },
+  ],
+  variable: "--font-nacelle",
+  display: "swap",
+});
+
+export const metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body
+        className={`${inter.variable} ${nacelle.variable} bg-gray-950 font-inter text-base text-gray-200 antialiased`}
+      >
+        <div className="flex min-h-screen flex-col overflow-hidden supports-[overflow:clip]:overflow-clip">
+          <Header />
+          {children}
+        </div>
+      </body>
+    </html>
+  );
+}

package/agentvibes.org/components/cta.tsx

@@ -0,0 +1,58 @@
+import Image from "next/image";
+import BlurredShape from "@/public/images/blurred-shape.svg";
+
+export default function Cta() {
+  return (
+    <section className="relative overflow-hidden">
+      <div
+        className="pointer-events-none absolute bottom-0 left-1/2 -z-10 -mb-24 ml-20 -translate-x-1/2"
+        aria-hidden="true"
+      >
+        <Image
+          className="max-w-none"
+          src={BlurredShape}
+          width={760}
+          height={668}
+          alt="Blurred shape"
+        />
+      </div>
+      <div className="max-w6xl mx-auto px-4 sm:px-6">
+        <div className="bg-linear-to-r from-transparent via-gray-800/50 py-12 md:py-20">
+          <div className="mx-auto max-w-3xl 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-8 font-nacelle text-3xl font-semibold text-transparent md:text-4xl"
+              data-aos="fade-up"
+            >
+              Join the Discussion
+            </h2>
+            <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/discussions"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <span className="relative inline-flex items-center">
+                    GitHub Discussions
+                    <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="mailto:paul@agentvibes.org"
+                >
+                  Contact paul@agentvibes.org
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}