agentvibes 2.0.0 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/package.json +1 -1
- package/src/installer.js +37 -12
- package/.claude/commands/agent-vibes/provider.md +0 -54
- package/.claude/hooks/piper-download-voices.sh +0 -133
- package/.claude/hooks/piper-voice-manager.sh +0 -194
- package/.claude/hooks/play-tts-elevenlabs.sh +0 -201
- package/.claude/hooks/play-tts-piper.sh +0 -175
- package/.claude/hooks/play-tts.sh.backup-20251005-163851 +0 -138
- package/.claude/hooks/provider-commands.sh +0 -374
- package/.claude/hooks/provider-manager.sh +0 -196
- package/.claude/language-voices.yaml +0 -372
- package/.claude/personalities/backups/angry.md.backup-20251005 +0 -16
- package/.claude/personalities/backups/annoying.md.backup-20251005 +0 -16
- package/.claude/personalities/backups/crass.md.backup-20251005 +0 -16
- package/.claude/personalities/backups/dramatic.md.backup-20251005 +0 -16
- package/.claude/personalities/backups/dry-humor.md.backup-20251005 +0 -52
- package/.claude/personalities/backups/flirty.md.backup-20251005 +0 -22
- package/.claude/personalities/backups/funny.md.backup-20251005 +0 -16
- package/.claude/personalities/backups/grandpa.md.backup-20251005 +0 -34
- package/.claude/personalities/backups/millennial.md.backup-20251005 +0 -16
- package/.claude/personalities/backups/moody.md.backup-20251005 +0 -16
- package/.claude/personalities/backups/normal.md.backup-20251005 +0 -18
- package/.claude/personalities/backups/pirate.md.backup-20251005 +0 -16
- package/.claude/personalities/backups/poetic.md.backup-20251005 +0 -16
- package/.claude/personalities/backups/professional.md.backup-20251005 +0 -16
- package/.claude/personalities/backups/robot.md.backup-20251005 +0 -16
- package/.claude/personalities/backups/sarcastic.md.backup-20251005 +0 -40
- package/.claude/personalities/backups/sassy.md.backup-20251005 +0 -16
- package/.claude/personalities/backups/surfer-dude.md.backup-20251005 +0 -16
- package/.claude/personalities/backups/zen.md.backup-20251005 +0 -16
- package/.claude/piper-voices/en_US-lessac-medium.onnx +0 -0
- package/.claude/piper-voices/en_US-lessac-medium.onnx.json +0 -493
- package/.mcp-minimal.json +0 -53
- package/agentvibes.org/.mcp-minimal.json +0 -60
- package/agentvibes.org/CHANGELOG.md +0 -56
- package/agentvibes.org/README.md +0 -93
- package/agentvibes.org/app/(auth)/layout.tsx +0 -15
- package/agentvibes.org/app/(auth)/reset-password/page.tsx +0 -45
- package/agentvibes.org/app/(auth)/signin/page.tsx +0 -82
- package/agentvibes.org/app/(auth)/signup/page.tsx +0 -104
- package/agentvibes.org/app/(default)/layout.tsx +0 -31
- package/agentvibes.org/app/(default)/page.tsx +0 -20
- package/agentvibes.org/app/api/hello/route.ts +0 -3
- package/agentvibes.org/app/css/additional-styles/theme.css +0 -82
- package/agentvibes.org/app/css/additional-styles/utility-patterns.css +0 -55
- package/agentvibes.org/app/css/style.css +0 -100
- package/agentvibes.org/app/layout.tsx +0 -63
- package/agentvibes.org/components/cta.tsx +0 -58
- package/agentvibes.org/components/features.tsx +0 -256
- package/agentvibes.org/components/hero-home.tsx +0 -97
- package/agentvibes.org/components/modal-video.tsx +0 -137
- package/agentvibes.org/components/page-illustration.tsx +0 -55
- package/agentvibes.org/components/spotlight.tsx +0 -77
- package/agentvibes.org/components/testimonials.tsx +0 -282
- package/agentvibes.org/components/ui/footer.tsx +0 -82
- package/agentvibes.org/components/ui/header.tsx +0 -44
- package/agentvibes.org/components/ui/logo.tsx +0 -10
- package/agentvibes.org/components/workflows.tsx +0 -176
- package/agentvibes.org/next.config.js +0 -4
- package/agentvibes.org/package-lock.json +0 -1974
- package/agentvibes.org/package.json +0 -30
- package/agentvibes.org/pnpm-lock.yaml +0 -1141
- package/agentvibes.org/postcss.config.js +0 -5
- package/agentvibes.org/public/audio/02-sarcastic.mp3 +0 -0
- package/agentvibes.org/public/audio/03-angry.mp3 +0 -0
- package/agentvibes.org/public/audio/04-grandpa.mp3 +0 -0
- package/agentvibes.org/public/audio/05-sarcastic-example2.mp3 +0 -0
- package/agentvibes.org/public/audio/french-rachel.mp3 +0 -0
- package/agentvibes.org/public/audio/spanish-antoni.mp3 +0 -0
- package/agentvibes.org/public/favicon.ico +0 -0
- package/agentvibes.org/public/fonts/nacelle-italic.woff2 +0 -0
- package/agentvibes.org/public/fonts/nacelle-regular.woff2 +0 -0
- package/agentvibes.org/public/fonts/nacelle-semibold.woff2 +0 -0
- package/agentvibes.org/public/fonts/nacelle-semibolditalic.woff2 +0 -0
- package/agentvibes.org/public/images/blurred-shape-gray.svg +0 -1
- package/agentvibes.org/public/images/blurred-shape.svg +0 -1
- package/agentvibes.org/public/images/client-logo-01.svg +0 -1
- package/agentvibes.org/public/images/client-logo-02.svg +0 -1
- package/agentvibes.org/public/images/client-logo-03.svg +0 -1
- package/agentvibes.org/public/images/client-logo-04.svg +0 -1
- package/agentvibes.org/public/images/client-logo-05.svg +0 -1
- package/agentvibes.org/public/images/client-logo-06.svg +0 -1
- package/agentvibes.org/public/images/client-logo-07.svg +0 -1
- package/agentvibes.org/public/images/client-logo-08.svg +0 -1
- package/agentvibes.org/public/images/client-logo-09.svg +0 -1
- package/agentvibes.org/public/images/features.png +0 -0
- package/agentvibes.org/public/images/footer-illustration.svg +0 -1
- package/agentvibes.org/public/images/hero-image-01.jpg +0 -0
- package/agentvibes.org/public/images/logo.svg +0 -1
- package/agentvibes.org/public/images/page-illustration.svg +0 -1
- package/agentvibes.org/public/images/secondary-illustration.svg +0 -1
- package/agentvibes.org/public/images/testimonial-01.jpg +0 -0
- package/agentvibes.org/public/images/testimonial-02.jpg +0 -0
- package/agentvibes.org/public/images/testimonial-03.jpg +0 -0
- package/agentvibes.org/public/images/testimonial-04.jpg +0 -0
- package/agentvibes.org/public/images/testimonial-05.jpg +0 -0
- package/agentvibes.org/public/images/testimonial-06.jpg +0 -0
- package/agentvibes.org/public/images/testimonial-07.jpg +0 -0
- package/agentvibes.org/public/images/testimonial-08.jpg +0 -0
- package/agentvibes.org/public/images/testimonial-09.jpg +0 -0
- package/agentvibes.org/public/images/workflow-01.png +0 -0
- package/agentvibes.org/public/images/workflow-02.png +0 -0
- package/agentvibes.org/public/images/workflow-03.png +0 -0
- package/agentvibes.org/public/videos/video.mp4 +0 -0
- package/agentvibes.org/tsconfig.json +0 -28
- package/agentvibes.org/utils/useMasonry.tsx +0 -67
- package/agentvibes.org/utils/useMousePosition.tsx +0 -27
- package/docs/ai-optimized-documentation-standards.md +0 -306
- package/docs/architecture/provider-system.md +0 -574
- package/docs/voice-mapping-format.md +0 -218
- package/scripts/piper-voice/README.md +0 -145
- package/scripts/piper-voice/wsl-install.sh +0 -193
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import "./css/style.css";
|
|
2
|
-
|
|
3
|
-
import { Inter } from "next/font/google";
|
|
4
|
-
import localFont from "next/font/local";
|
|
5
|
-
|
|
6
|
-
import Header from "@/components/ui/header";
|
|
7
|
-
|
|
8
|
-
const inter = Inter({
|
|
9
|
-
subsets: ["latin"],
|
|
10
|
-
variable: "--font-inter",
|
|
11
|
-
display: "swap",
|
|
12
|
-
});
|
|
13
|
-
|
|
14
|
-
const nacelle = localFont({
|
|
15
|
-
src: [
|
|
16
|
-
{
|
|
17
|
-
path: "../public/fonts/nacelle-regular.woff2",
|
|
18
|
-
weight: "400",
|
|
19
|
-
style: "normal",
|
|
20
|
-
},
|
|
21
|
-
{
|
|
22
|
-
path: "../public/fonts/nacelle-italic.woff2",
|
|
23
|
-
weight: "400",
|
|
24
|
-
style: "italic",
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
path: "../public/fonts/nacelle-semibold.woff2",
|
|
28
|
-
weight: "600",
|
|
29
|
-
style: "normal",
|
|
30
|
-
},
|
|
31
|
-
{
|
|
32
|
-
path: "../public/fonts/nacelle-semibolditalic.woff2",
|
|
33
|
-
weight: "600",
|
|
34
|
-
style: "italic",
|
|
35
|
-
},
|
|
36
|
-
],
|
|
37
|
-
variable: "--font-nacelle",
|
|
38
|
-
display: "swap",
|
|
39
|
-
});
|
|
40
|
-
|
|
41
|
-
export const metadata = {
|
|
42
|
-
title: "Create Next App",
|
|
43
|
-
description: "Generated by create next app",
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
export default function RootLayout({
|
|
47
|
-
children,
|
|
48
|
-
}: {
|
|
49
|
-
children: React.ReactNode;
|
|
50
|
-
}) {
|
|
51
|
-
return (
|
|
52
|
-
<html lang="en">
|
|
53
|
-
<body
|
|
54
|
-
className={`${inter.variable} ${nacelle.variable} bg-gray-950 font-inter text-base text-gray-200 antialiased`}
|
|
55
|
-
>
|
|
56
|
-
<div className="flex min-h-screen flex-col overflow-hidden supports-[overflow:clip]:overflow-clip">
|
|
57
|
-
<Header />
|
|
58
|
-
{children}
|
|
59
|
-
</div>
|
|
60
|
-
</body>
|
|
61
|
-
</html>
|
|
62
|
-
);
|
|
63
|
-
}
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import Image from "next/image";
|
|
2
|
-
import BlurredShape from "@/public/images/blurred-shape.svg";
|
|
3
|
-
|
|
4
|
-
export default function Cta() {
|
|
5
|
-
return (
|
|
6
|
-
<section className="relative overflow-hidden">
|
|
7
|
-
<div
|
|
8
|
-
className="pointer-events-none absolute bottom-0 left-1/2 -z-10 -mb-24 ml-20 -translate-x-1/2"
|
|
9
|
-
aria-hidden="true"
|
|
10
|
-
>
|
|
11
|
-
<Image
|
|
12
|
-
className="max-w-none"
|
|
13
|
-
src={BlurredShape}
|
|
14
|
-
width={760}
|
|
15
|
-
height={668}
|
|
16
|
-
alt="Blurred shape"
|
|
17
|
-
/>
|
|
18
|
-
</div>
|
|
19
|
-
<div className="max-w6xl mx-auto px-4 sm:px-6">
|
|
20
|
-
<div className="bg-linear-to-r from-transparent via-gray-800/50 py-12 md:py-20">
|
|
21
|
-
<div className="mx-auto max-w-3xl text-center">
|
|
22
|
-
<h2
|
|
23
|
-
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"
|
|
24
|
-
data-aos="fade-up"
|
|
25
|
-
>
|
|
26
|
-
Join the Discussion
|
|
27
|
-
</h2>
|
|
28
|
-
<div className="mx-auto max-w-xs sm:flex sm:max-w-none sm:justify-center">
|
|
29
|
-
<div data-aos="fade-up" data-aos-delay={400}>
|
|
30
|
-
<a
|
|
31
|
-
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"
|
|
32
|
-
href="https://github.com/paulpreibisch/AgentVibes/discussions"
|
|
33
|
-
target="_blank"
|
|
34
|
-
rel="noopener noreferrer"
|
|
35
|
-
>
|
|
36
|
-
<span className="relative inline-flex items-center">
|
|
37
|
-
GitHub Discussions
|
|
38
|
-
<span className="ml-1 tracking-normal text-white/50 transition-transform group-hover:translate-x-0.5">
|
|
39
|
-
->
|
|
40
|
-
</span>
|
|
41
|
-
</span>
|
|
42
|
-
</a>
|
|
43
|
-
</div>
|
|
44
|
-
<div data-aos="fade-up" data-aos-delay={600}>
|
|
45
|
-
<a
|
|
46
|
-
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"
|
|
47
|
-
href="mailto:paul@agentvibes.org"
|
|
48
|
-
>
|
|
49
|
-
Contact paul@agentvibes.org
|
|
50
|
-
</a>
|
|
51
|
-
</div>
|
|
52
|
-
</div>
|
|
53
|
-
</div>
|
|
54
|
-
</div>
|
|
55
|
-
</div>
|
|
56
|
-
</section>
|
|
57
|
-
);
|
|
58
|
-
}
|
|
@@ -1,256 +0,0 @@
|
|
|
1
|
-
import Image from "next/image";
|
|
2
|
-
import BlurredShapeGray from "@/public/images/blurred-shape-gray.svg";
|
|
3
|
-
import BlurredShape from "@/public/images/blurred-shape.svg";
|
|
4
|
-
import FeaturesImage from "@/public/images/features.png";
|
|
5
|
-
|
|
6
|
-
export default function Features() {
|
|
7
|
-
return (
|
|
8
|
-
<section className="relative">
|
|
9
|
-
<div
|
|
10
|
-
className="pointer-events-none absolute left-1/2 top-0 -z-10 -mt-20 -translate-x-1/2"
|
|
11
|
-
aria-hidden="true"
|
|
12
|
-
>
|
|
13
|
-
<Image
|
|
14
|
-
className="max-w-none"
|
|
15
|
-
src={BlurredShapeGray}
|
|
16
|
-
width={760}
|
|
17
|
-
height={668}
|
|
18
|
-
alt="Blurred shape"
|
|
19
|
-
/>
|
|
20
|
-
</div>
|
|
21
|
-
<div
|
|
22
|
-
className="pointer-events-none absolute bottom-0 left-1/2 -z-10 -mb-80 -translate-x-[120%] opacity-50"
|
|
23
|
-
aria-hidden="true"
|
|
24
|
-
>
|
|
25
|
-
<Image
|
|
26
|
-
className="max-w-none"
|
|
27
|
-
src={BlurredShape}
|
|
28
|
-
width={760}
|
|
29
|
-
height={668}
|
|
30
|
-
alt="Blurred shape"
|
|
31
|
-
/>
|
|
32
|
-
</div>
|
|
33
|
-
<div className="mx-auto max-w-6xl px-4 sm:px-6">
|
|
34
|
-
<div className="border-t py-12 [border-image:linear-gradient(to_right,transparent,--theme(--color-slate-400/.25),transparent)1] md:py-20">
|
|
35
|
-
{/* Section header */}
|
|
36
|
-
<div id="products" className="mx-auto max-w-3xl pb-4 text-center md:pb-12">
|
|
37
|
-
<div className="inline-flex items-center gap-3 pb-3 before:h-px before:w-8 before:bg-linear-to-r before:from-transparent before:to-indigo-200/50 after:h-px after:w-8 after:bg-linear-to-l after:from-transparent after:to-indigo-200/50">
|
|
38
|
-
<span className="inline-flex bg-linear-to-r from-indigo-500 to-indigo-200 bg-clip-text text-transparent">
|
|
39
|
-
Products
|
|
40
|
-
</span>
|
|
41
|
-
</div>
|
|
42
|
-
<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">
|
|
43
|
-
AgentVibes v2.0
|
|
44
|
-
</h2>
|
|
45
|
-
<p className="text-lg text-indigo-200/65">
|
|
46
|
-
The Multi-Provider Revolution - Choose between ElevenLabs (150+ premium AI voices) or Piper TTS (50+ free voices).
|
|
47
|
-
200+ total voices, 30+ languages, 19 personalities, and seamless provider switching.
|
|
48
|
-
</p>
|
|
49
|
-
</div>
|
|
50
|
-
<div className="flex justify-center pb-4 md:pb-12" data-aos="fade-up">
|
|
51
|
-
<Image
|
|
52
|
-
className="max-w-none"
|
|
53
|
-
src={FeaturesImage}
|
|
54
|
-
width={1104}
|
|
55
|
-
height={384}
|
|
56
|
-
alt="Features"
|
|
57
|
-
/>
|
|
58
|
-
</div>
|
|
59
|
-
{/* Items */}
|
|
60
|
-
<div className="mx-auto grid max-w-sm gap-12 sm:max-w-none sm:grid-cols-2 md:gap-x-14 md:gap-y-16 lg:grid-cols-3">
|
|
61
|
-
<article>
|
|
62
|
-
<svg
|
|
63
|
-
className="mb-3 fill-indigo-500"
|
|
64
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
65
|
-
width={24}
|
|
66
|
-
height={24}
|
|
67
|
-
>
|
|
68
|
-
<path d="M0 0h14v17H0V0Zm2 2v13h10V2H2Z" />
|
|
69
|
-
<path
|
|
70
|
-
fillOpacity=".48"
|
|
71
|
-
d="m16.295 5.393 7.528 2.034-4.436 16.412L5.87 20.185l.522-1.93 11.585 3.132 3.392-12.55-5.597-1.514.522-1.93Z"
|
|
72
|
-
/>
|
|
73
|
-
</svg>
|
|
74
|
-
<h3 className="mb-1 font-nacelle text-[1rem] font-semibold text-gray-200">
|
|
75
|
-
Multi-Provider Support
|
|
76
|
-
</h3>
|
|
77
|
-
<p className="text-indigo-200/65">
|
|
78
|
-
Choose between ElevenLabs (150+ premium AI voices) or Piper TTS (50+ free, offline neural voices).
|
|
79
|
-
Switch providers seamlessly with /agent-vibes:provider switch command.
|
|
80
|
-
</p>
|
|
81
|
-
</article>
|
|
82
|
-
<article>
|
|
83
|
-
<svg
|
|
84
|
-
className="mb-3 fill-indigo-500"
|
|
85
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
86
|
-
width={24}
|
|
87
|
-
height={24}
|
|
88
|
-
>
|
|
89
|
-
<path fillOpacity=".48" d="M7 8V0H5v8h2Zm12 16v-4h-2v4h2Z" />
|
|
90
|
-
<path d="M19 6H0v2h17v8H7v-6H5v8h19v-2h-5V6Z" />
|
|
91
|
-
</svg>
|
|
92
|
-
<h3 className="mb-1 font-nacelle text-[1rem] font-semibold text-gray-200">
|
|
93
|
-
27+ Professional Voices
|
|
94
|
-
</h3>
|
|
95
|
-
<p className="text-indigo-200/65">
|
|
96
|
-
Curated library of premium ElevenLabs voices including Aria, Archer, Cowboy Bob, Pirate Marshal,
|
|
97
|
-
and Grandpa Spuds. Character voices, accents, and unique personalities.
|
|
98
|
-
</p>
|
|
99
|
-
</article>
|
|
100
|
-
<article>
|
|
101
|
-
<svg
|
|
102
|
-
className="mb-3 fill-indigo-500"
|
|
103
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
104
|
-
width={24}
|
|
105
|
-
height={24}
|
|
106
|
-
>
|
|
107
|
-
<path d="M23.414 6 18 .586 16.586 2l3 3H7a6 6 0 0 0-6 6h2a4 4 0 0 1 4-4h12.586l-3 3L18 11.414 23.414 6Z" />
|
|
108
|
-
<path
|
|
109
|
-
fillOpacity=".48"
|
|
110
|
-
d="M13.01 12.508a2.5 2.5 0 0 0-3.502.482L1.797 23.16.203 21.952l7.71-10.17a4.5 4.5 0 1 1 7.172 5.437l-4.84 6.386-1.594-1.209 4.841-6.385a2.5 2.5 0 0 0-.482-3.503Z"
|
|
111
|
-
/>
|
|
112
|
-
</svg>
|
|
113
|
-
<h3 className="mb-1 font-nacelle text-[1rem] font-semibold text-gray-200">
|
|
114
|
-
19 Built-in Personalities
|
|
115
|
-
</h3>
|
|
116
|
-
<p className="text-indigo-200/65">
|
|
117
|
-
Sarcastic, flirty, pirate, grandpa, zen, angry, robot, millennial, surfer-dude, and more!
|
|
118
|
-
Each personality combines a dedicated voice with unique speaking style.
|
|
119
|
-
</p>
|
|
120
|
-
</article>
|
|
121
|
-
<article>
|
|
122
|
-
<svg
|
|
123
|
-
className="mb-3 fill-indigo-500"
|
|
124
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
125
|
-
width={24}
|
|
126
|
-
height={24}
|
|
127
|
-
>
|
|
128
|
-
<path
|
|
129
|
-
fillOpacity=".48"
|
|
130
|
-
d="m3.031 9.05-.593-.805 1.609-1.187.594.804a6.966 6.966 0 0 1 0 8.276l-.594.805-1.61-1.188.594-.805a4.966 4.966 0 0 0 0-5.9Z"
|
|
131
|
-
/>
|
|
132
|
-
<path d="m7.456 6.676-.535-.845 1.69-1.07.534.844a11.944 11.944 0 0 1 0 12.789l-.535.845-1.69-1.071.536-.845a9.944 9.944 0 0 0 0-10.647Z" />
|
|
133
|
-
<path
|
|
134
|
-
d="m11.888 4.35-.514-.858 1.717-1.027.513.858a16.9 16.9 0 0 1 2.4 8.677 16.9 16.9 0 0 1-2.4 8.676l-.513.859-1.717-1.028.514-.858A14.9 14.9 0 0 0 14.003 12a14.9 14.9 0 0 0-2.115-7.65Z"
|
|
135
|
-
opacity=".48"
|
|
136
|
-
/>
|
|
137
|
-
<path d="m16.321 2-.5-.866 1.733-1 .5.866A22 22 0 0 1 21 12c0 3.852-1.017 7.636-2.948 10.97l-.502.865-1.73-1.003.501-.865A19.878 19.878 0 0 0 19 12a20 20 0 0 0-2.679-10Z" />
|
|
138
|
-
</svg>
|
|
139
|
-
<h3 className="mb-1 font-nacelle text-[1rem] font-semibold text-gray-200">
|
|
140
|
-
30+ Languages Supported
|
|
141
|
-
</h3>
|
|
142
|
-
<p className="text-indigo-200/65">
|
|
143
|
-
Multilingual voices including Spanish, French, German, Italian, Portuguese, Chinese, Japanese, Korean,
|
|
144
|
-
Polish, Dutch, Turkish, Russian, and more with native quality.
|
|
145
|
-
</p>
|
|
146
|
-
</article>
|
|
147
|
-
<article>
|
|
148
|
-
<svg
|
|
149
|
-
className="mb-3 fill-indigo-500"
|
|
150
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
151
|
-
width={24}
|
|
152
|
-
height={24}
|
|
153
|
-
>
|
|
154
|
-
<path
|
|
155
|
-
fillOpacity=".48"
|
|
156
|
-
d="M12 8.8a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm-5 3a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"
|
|
157
|
-
/>
|
|
158
|
-
<path d="m7.454 2.891.891-.454L7.437.655l-.891.454a12 12 0 0 0 0 21.382l.89.454.91-1.781-.892-.455a10 10 0 0 1 0-17.818ZM17.456 1.11l-.891-.454-.909 1.782.891.454a10 10 0 0 1 0 17.819l-.89.454.908 1.781.89-.454a12 12 0 0 0 0-21.382Z" />
|
|
159
|
-
</svg>
|
|
160
|
-
<h3 className="mb-1 font-nacelle text-[1rem] font-semibold text-gray-200">
|
|
161
|
-
BMAD Plugin Integration
|
|
162
|
-
</h3>
|
|
163
|
-
<p className="text-indigo-200/65">
|
|
164
|
-
Auto-detects{" "}
|
|
165
|
-
<a
|
|
166
|
-
href="https://github.com/bmad-code-org/BMAD-METHOD"
|
|
167
|
-
target="_blank"
|
|
168
|
-
rel="noopener noreferrer"
|
|
169
|
-
className="text-indigo-400 underline hover:text-indigo-300"
|
|
170
|
-
>
|
|
171
|
-
BMAD agents
|
|
172
|
-
</a>{" "}
|
|
173
|
-
and switches voices automatically. Each agent role
|
|
174
|
-
(PM, Dev, QA, Architect) gets its own dedicated voice for immersive multi-agent sessions.
|
|
175
|
-
</p>
|
|
176
|
-
</article>
|
|
177
|
-
<article>
|
|
178
|
-
<svg
|
|
179
|
-
className="mb-3 fill-indigo-500"
|
|
180
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
181
|
-
width={24}
|
|
182
|
-
height={24}
|
|
183
|
-
>
|
|
184
|
-
<path
|
|
185
|
-
fillOpacity=".48"
|
|
186
|
-
d="M19 8h5v2h-5V8Zm-4 5h9v2h-9v-2Zm9 5H11v2h13v-2Z"
|
|
187
|
-
/>
|
|
188
|
-
<path d="M19.406 3.844 6.083 20.497.586 15 2 13.586l3.917 3.917L17.844 2.595l1.562 1.25Z" />
|
|
189
|
-
</svg>
|
|
190
|
-
<h3 className="mb-1 font-nacelle text-[1rem] font-semibold text-gray-200">
|
|
191
|
-
One-Command Install
|
|
192
|
-
</h3>
|
|
193
|
-
<p className="text-indigo-200/65">
|
|
194
|
-
Get started in seconds with npx agentvibes install. Seamless Claude Code integration,
|
|
195
|
-
instant voice setup, persistent configuration, and automatic updates.
|
|
196
|
-
</p>
|
|
197
|
-
</article>
|
|
198
|
-
<article>
|
|
199
|
-
<svg
|
|
200
|
-
className="mb-3 fill-indigo-500"
|
|
201
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
202
|
-
width={24}
|
|
203
|
-
height={24}
|
|
204
|
-
>
|
|
205
|
-
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
|
|
206
|
-
</svg>
|
|
207
|
-
<h3 className="mb-1 font-nacelle text-[1rem] font-semibold text-gray-200">
|
|
208
|
-
Sentiment System
|
|
209
|
-
</h3>
|
|
210
|
-
<p className="text-indigo-200/65">
|
|
211
|
-
Apply personality styles to ANY voice without changing it. Keep your favorite voice
|
|
212
|
-
and add sarcastic, flirty, or zen speaking styles on demand.
|
|
213
|
-
</p>
|
|
214
|
-
</article>
|
|
215
|
-
<article>
|
|
216
|
-
<svg
|
|
217
|
-
className="mb-3 fill-indigo-500"
|
|
218
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
219
|
-
width={24}
|
|
220
|
-
height={24}
|
|
221
|
-
>
|
|
222
|
-
<path fillOpacity=".48" d="M8 2v6H2V2h6zm0 8v6H2v-6h6z" />
|
|
223
|
-
<path d="M22 2v6h-6V2h6zm0 8v6h-6v-6h6zm0 8v6h-6v-6h6zM8 18v6H2v-6h6z" />
|
|
224
|
-
</svg>
|
|
225
|
-
<h3 className="mb-1 font-nacelle text-[1rem] font-semibold text-gray-200">
|
|
226
|
-
Voice Preview & Replay
|
|
227
|
-
</h3>
|
|
228
|
-
<p className="text-indigo-200/65">
|
|
229
|
-
Preview voices with /agent-vibes:preview before switching. Replay the last 10 TTS messages
|
|
230
|
-
with /agent-vibes:replay. Test any voice with /agent-vibes:sample.
|
|
231
|
-
</p>
|
|
232
|
-
</article>
|
|
233
|
-
<article>
|
|
234
|
-
<svg
|
|
235
|
-
className="mb-3 fill-indigo-500"
|
|
236
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
237
|
-
width={24}
|
|
238
|
-
height={24}
|
|
239
|
-
>
|
|
240
|
-
<path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z" fillOpacity=".48" />
|
|
241
|
-
<path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z" />
|
|
242
|
-
</svg>
|
|
243
|
-
<h3 className="mb-1 font-nacelle text-[1rem] font-semibold text-gray-200">
|
|
244
|
-
Custom Voice & Personalities
|
|
245
|
-
</h3>
|
|
246
|
-
<p className="text-indigo-200/65">
|
|
247
|
-
Add your own ElevenLabs voices with /agent-vibes:add. Create custom personalities
|
|
248
|
-
with unique speaking styles. Full markdown-based personality editor included.
|
|
249
|
-
</p>
|
|
250
|
-
</article>
|
|
251
|
-
</div>
|
|
252
|
-
</div>
|
|
253
|
-
</div>
|
|
254
|
-
</section>
|
|
255
|
-
);
|
|
256
|
-
}
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
export default function HeroHome() {
|
|
2
|
-
return (
|
|
3
|
-
<section>
|
|
4
|
-
<div className="mx-auto max-w-6xl px-4 sm:px-6">
|
|
5
|
-
{/* Hero content */}
|
|
6
|
-
<div className="py-12 md:py-20">
|
|
7
|
-
{/* Section header */}
|
|
8
|
-
<div className="pb-12 text-center md:pb-20">
|
|
9
|
-
<h1
|
|
10
|
-
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"
|
|
11
|
-
data-aos="fade-up"
|
|
12
|
-
>
|
|
13
|
-
🎤 Bring Your Claude Code Sessions to Life
|
|
14
|
-
</h1>
|
|
15
|
-
<div className="mx-auto max-w-3xl">
|
|
16
|
-
<p
|
|
17
|
-
className="mb-8 text-xl text-[--color-agent-magenta]"
|
|
18
|
-
data-aos="fade-up"
|
|
19
|
-
data-aos-delay={200}
|
|
20
|
-
>
|
|
21
|
-
Professional text-to-speech narration for Claude Code with 150+ AI voices,
|
|
22
|
-
multiple provider options, and support for 30+ languages.
|
|
23
|
-
</p>
|
|
24
|
-
|
|
25
|
-
{/* Audio Samples */}
|
|
26
|
-
<div className="mb-12 mt-5 rounded-2xl border-2 border-purple-500 p-8" data-aos="fade-up" data-aos-delay={300}>
|
|
27
|
-
<h3 className="mb-6 text-center text-2xl font-semibold text-[--color-agent-cyan]">
|
|
28
|
-
Finally, your Agents can Talk back!
|
|
29
|
-
</h3>
|
|
30
|
-
<div className="flex flex-wrap justify-center gap-4">
|
|
31
|
-
<div className="flex flex-col items-center">
|
|
32
|
-
<span className="mb-2 text-sm text-gray-400">Sarcastic</span>
|
|
33
|
-
<audio controls className="w-48">
|
|
34
|
-
<source src="/audio/02-sarcastic.mp3" type="audio/mpeg" />
|
|
35
|
-
</audio>
|
|
36
|
-
</div>
|
|
37
|
-
<div className="flex flex-col items-center">
|
|
38
|
-
<span className="mb-2 text-sm text-gray-400">Angry</span>
|
|
39
|
-
<audio controls className="w-48">
|
|
40
|
-
<source src="/audio/03-angry.mp3" type="audio/mpeg" />
|
|
41
|
-
</audio>
|
|
42
|
-
</div>
|
|
43
|
-
<div className="flex flex-col items-center">
|
|
44
|
-
<span className="mb-2 text-sm text-gray-400">Grandpa</span>
|
|
45
|
-
<audio controls className="w-48">
|
|
46
|
-
<source src="/audio/04-grandpa.mp3" type="audio/mpeg" />
|
|
47
|
-
</audio>
|
|
48
|
-
</div>
|
|
49
|
-
<div className="flex flex-col items-center">
|
|
50
|
-
<span className="mb-2 text-sm text-gray-400">Spanish (Antoni)</span>
|
|
51
|
-
<audio controls className="w-48">
|
|
52
|
-
<source src="/audio/spanish-antoni.mp3" type="audio/mpeg" />
|
|
53
|
-
</audio>
|
|
54
|
-
</div>
|
|
55
|
-
<div className="flex flex-col items-center">
|
|
56
|
-
<span className="mb-2 text-sm text-gray-400">French (Rachel)</span>
|
|
57
|
-
<audio controls className="w-48">
|
|
58
|
-
<source src="/audio/french-rachel.mp3" type="audio/mpeg" />
|
|
59
|
-
</audio>
|
|
60
|
-
</div>
|
|
61
|
-
</div>
|
|
62
|
-
</div>
|
|
63
|
-
|
|
64
|
-
<div className="mx-auto max-w-xs sm:flex sm:max-w-none sm:justify-center">
|
|
65
|
-
<div data-aos="fade-up" data-aos-delay={400}>
|
|
66
|
-
<a
|
|
67
|
-
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"
|
|
68
|
-
href="https://github.com/paulpreibisch/AgentVibes"
|
|
69
|
-
target="_blank"
|
|
70
|
-
rel="noopener noreferrer"
|
|
71
|
-
>
|
|
72
|
-
<span className="relative inline-flex items-center">
|
|
73
|
-
Download on GitHub
|
|
74
|
-
<span className="ml-1 tracking-normal text-white/50 transition-transform group-hover:translate-x-0.5">
|
|
75
|
-
->
|
|
76
|
-
</span>
|
|
77
|
-
</span>
|
|
78
|
-
</a>
|
|
79
|
-
</div>
|
|
80
|
-
<div data-aos="fade-up" data-aos-delay={600}>
|
|
81
|
-
<a
|
|
82
|
-
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"
|
|
83
|
-
href="https://github.com/paulpreibisch/AgentVibes/releases/tag/v2.0.0"
|
|
84
|
-
target="_blank"
|
|
85
|
-
rel="noopener noreferrer"
|
|
86
|
-
>
|
|
87
|
-
View v2.0.0 Release
|
|
88
|
-
</a>
|
|
89
|
-
</div>
|
|
90
|
-
</div>
|
|
91
|
-
</div>
|
|
92
|
-
</div>
|
|
93
|
-
</div>
|
|
94
|
-
</div>
|
|
95
|
-
</section>
|
|
96
|
-
);
|
|
97
|
-
}
|
|
@@ -1,137 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import { useState, useRef } from "react";
|
|
4
|
-
import type { StaticImageData } from "next/image";
|
|
5
|
-
import { Dialog, DialogBackdrop, DialogPanel } from "@headlessui/react";
|
|
6
|
-
import Image from "next/image";
|
|
7
|
-
import SecondaryIllustration from "@/public/images/secondary-illustration.svg";
|
|
8
|
-
|
|
9
|
-
interface ModalVideoProps {
|
|
10
|
-
thumb: StaticImageData;
|
|
11
|
-
thumbWidth: number;
|
|
12
|
-
thumbHeight: number;
|
|
13
|
-
thumbAlt: string;
|
|
14
|
-
video: string;
|
|
15
|
-
videoWidth: number;
|
|
16
|
-
videoHeight: number;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export default function ModalVideo({
|
|
20
|
-
thumb,
|
|
21
|
-
thumbWidth,
|
|
22
|
-
thumbHeight,
|
|
23
|
-
thumbAlt,
|
|
24
|
-
video,
|
|
25
|
-
videoWidth,
|
|
26
|
-
videoHeight,
|
|
27
|
-
}: ModalVideoProps) {
|
|
28
|
-
const [modalOpen, setModalOpen] = useState<boolean>(false);
|
|
29
|
-
const videoRef = useRef<HTMLVideoElement>(null);
|
|
30
|
-
|
|
31
|
-
return (
|
|
32
|
-
<div className="relative">
|
|
33
|
-
{/* Secondary illustration */}
|
|
34
|
-
<div
|
|
35
|
-
className="pointer-events-none absolute bottom-8 left-1/2 -z-10 -ml-28 -translate-x-1/2 translate-y-1/2"
|
|
36
|
-
aria-hidden="true"
|
|
37
|
-
>
|
|
38
|
-
<Image
|
|
39
|
-
className="md:max-w-none"
|
|
40
|
-
src={SecondaryIllustration}
|
|
41
|
-
width={1165}
|
|
42
|
-
height={1012}
|
|
43
|
-
alt="Secondary illustration"
|
|
44
|
-
/>
|
|
45
|
-
</div>
|
|
46
|
-
|
|
47
|
-
{/* Video thumbnail */}
|
|
48
|
-
<button
|
|
49
|
-
className="group relative flex items-center justify-center rounded-2xl focus:outline-hidden focus-visible:ring-3 focus-visible:ring-indigo-200"
|
|
50
|
-
onClick={() => {
|
|
51
|
-
setModalOpen(true);
|
|
52
|
-
}}
|
|
53
|
-
aria-label="Watch the video"
|
|
54
|
-
data-aos="fade-up"
|
|
55
|
-
data-aos-delay={200}
|
|
56
|
-
>
|
|
57
|
-
<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">
|
|
58
|
-
<Image
|
|
59
|
-
className="opacity-50 grayscale"
|
|
60
|
-
src={thumb}
|
|
61
|
-
width={thumbWidth}
|
|
62
|
-
height={thumbHeight}
|
|
63
|
-
priority
|
|
64
|
-
alt={thumbAlt}
|
|
65
|
-
/>
|
|
66
|
-
</figure>
|
|
67
|
-
{/* Play icon */}
|
|
68
|
-
<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">
|
|
69
|
-
<span className="relative flex items-center gap-3">
|
|
70
|
-
<svg
|
|
71
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
72
|
-
width={20}
|
|
73
|
-
height={20}
|
|
74
|
-
fill="none"
|
|
75
|
-
>
|
|
76
|
-
<path
|
|
77
|
-
fill="url(#pla)"
|
|
78
|
-
fillRule="evenodd"
|
|
79
|
-
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"
|
|
80
|
-
clipRule="evenodd"
|
|
81
|
-
/>
|
|
82
|
-
<defs>
|
|
83
|
-
<linearGradient
|
|
84
|
-
id="pla"
|
|
85
|
-
x1={10}
|
|
86
|
-
x2={10}
|
|
87
|
-
y1={0}
|
|
88
|
-
y2={20}
|
|
89
|
-
gradientUnits="userSpaceOnUse"
|
|
90
|
-
>
|
|
91
|
-
<stop stopColor="#6366F1" />
|
|
92
|
-
<stop offset={1} stopColor="#6366F1" stopOpacity=".72" />
|
|
93
|
-
</linearGradient>
|
|
94
|
-
</defs>
|
|
95
|
-
</svg>
|
|
96
|
-
<span className="text-sm font-medium leading-tight text-gray-300">
|
|
97
|
-
Watch Demo
|
|
98
|
-
<span className="text-gray-600"> - </span>
|
|
99
|
-
3:47
|
|
100
|
-
</span>
|
|
101
|
-
</span>
|
|
102
|
-
</span>
|
|
103
|
-
</button>
|
|
104
|
-
{/* End: Video thumbnail */}
|
|
105
|
-
|
|
106
|
-
<Dialog
|
|
107
|
-
initialFocus={videoRef}
|
|
108
|
-
open={modalOpen}
|
|
109
|
-
onClose={() => setModalOpen(false)}
|
|
110
|
-
>
|
|
111
|
-
<DialogBackdrop
|
|
112
|
-
transition
|
|
113
|
-
className="fixed inset-0 z-99999 bg-black/70 transition-opacity duration-300 ease-out data-closed:opacity-0"
|
|
114
|
-
/>
|
|
115
|
-
<div className="fixed inset-0 z-99999 flex px-4 py-6 sm:px-6">
|
|
116
|
-
<div className="mx-auto flex h-full max-w-6xl items-center">
|
|
117
|
-
<DialogPanel
|
|
118
|
-
transition
|
|
119
|
-
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"
|
|
120
|
-
>
|
|
121
|
-
<video
|
|
122
|
-
ref={videoRef}
|
|
123
|
-
width={videoWidth}
|
|
124
|
-
height={videoHeight}
|
|
125
|
-
loop
|
|
126
|
-
controls
|
|
127
|
-
>
|
|
128
|
-
<source src={video} type="video/mp4" />
|
|
129
|
-
Your browser does not support the video tag.
|
|
130
|
-
</video>
|
|
131
|
-
</DialogPanel>
|
|
132
|
-
</div>
|
|
133
|
-
</div>
|
|
134
|
-
</Dialog>
|
|
135
|
-
</div>
|
|
136
|
-
);
|
|
137
|
-
}
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import Image from "next/image";
|
|
2
|
-
import Illustration from "@/public/images/page-illustration.svg";
|
|
3
|
-
import BlurredShapeGray from "@/public/images/blurred-shape-gray.svg";
|
|
4
|
-
import BlurredShape from "@/public/images/blurred-shape.svg";
|
|
5
|
-
|
|
6
|
-
export default function PageIllustration({
|
|
7
|
-
multiple = false,
|
|
8
|
-
}: {
|
|
9
|
-
multiple?: boolean;
|
|
10
|
-
}) {
|
|
11
|
-
return (
|
|
12
|
-
<>
|
|
13
|
-
<div
|
|
14
|
-
className="pointer-events-none absolute left-1/2 top-0 -z-10 -translate-x-1/4"
|
|
15
|
-
aria-hidden="true"
|
|
16
|
-
>
|
|
17
|
-
<Image
|
|
18
|
-
className="max-w-none"
|
|
19
|
-
src={Illustration}
|
|
20
|
-
width={846}
|
|
21
|
-
height={594}
|
|
22
|
-
alt="Page illustration"
|
|
23
|
-
/>
|
|
24
|
-
</div>
|
|
25
|
-
{multiple && (
|
|
26
|
-
<>
|
|
27
|
-
<div
|
|
28
|
-
className="pointer-events-none absolute left-1/2 top-[400px] -z-10 -mt-20 -translate-x-full opacity-50"
|
|
29
|
-
aria-hidden="true"
|
|
30
|
-
>
|
|
31
|
-
<Image
|
|
32
|
-
className="max-w-none"
|
|
33
|
-
src={BlurredShapeGray}
|
|
34
|
-
width={760}
|
|
35
|
-
height={668}
|
|
36
|
-
alt="Blurred shape"
|
|
37
|
-
/>
|
|
38
|
-
</div>
|
|
39
|
-
<div
|
|
40
|
-
className="pointer-events-none absolute left-1/2 top-[440px] -z-10 -translate-x-1/3"
|
|
41
|
-
aria-hidden="true"
|
|
42
|
-
>
|
|
43
|
-
<Image
|
|
44
|
-
className="max-w-none"
|
|
45
|
-
src={BlurredShape}
|
|
46
|
-
width={760}
|
|
47
|
-
height={668}
|
|
48
|
-
alt="Blurred shape"
|
|
49
|
-
/>
|
|
50
|
-
</div>
|
|
51
|
-
</>
|
|
52
|
-
)}
|
|
53
|
-
</>
|
|
54
|
-
);
|
|
55
|
-
}
|