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.
Files changed (113) hide show
  1. package/README.md +2 -2
  2. package/package.json +1 -1
  3. package/src/installer.js +37 -12
  4. package/.claude/commands/agent-vibes/provider.md +0 -54
  5. package/.claude/hooks/piper-download-voices.sh +0 -133
  6. package/.claude/hooks/piper-voice-manager.sh +0 -194
  7. package/.claude/hooks/play-tts-elevenlabs.sh +0 -201
  8. package/.claude/hooks/play-tts-piper.sh +0 -175
  9. package/.claude/hooks/play-tts.sh.backup-20251005-163851 +0 -138
  10. package/.claude/hooks/provider-commands.sh +0 -374
  11. package/.claude/hooks/provider-manager.sh +0 -196
  12. package/.claude/language-voices.yaml +0 -372
  13. package/.claude/personalities/backups/angry.md.backup-20251005 +0 -16
  14. package/.claude/personalities/backups/annoying.md.backup-20251005 +0 -16
  15. package/.claude/personalities/backups/crass.md.backup-20251005 +0 -16
  16. package/.claude/personalities/backups/dramatic.md.backup-20251005 +0 -16
  17. package/.claude/personalities/backups/dry-humor.md.backup-20251005 +0 -52
  18. package/.claude/personalities/backups/flirty.md.backup-20251005 +0 -22
  19. package/.claude/personalities/backups/funny.md.backup-20251005 +0 -16
  20. package/.claude/personalities/backups/grandpa.md.backup-20251005 +0 -34
  21. package/.claude/personalities/backups/millennial.md.backup-20251005 +0 -16
  22. package/.claude/personalities/backups/moody.md.backup-20251005 +0 -16
  23. package/.claude/personalities/backups/normal.md.backup-20251005 +0 -18
  24. package/.claude/personalities/backups/pirate.md.backup-20251005 +0 -16
  25. package/.claude/personalities/backups/poetic.md.backup-20251005 +0 -16
  26. package/.claude/personalities/backups/professional.md.backup-20251005 +0 -16
  27. package/.claude/personalities/backups/robot.md.backup-20251005 +0 -16
  28. package/.claude/personalities/backups/sarcastic.md.backup-20251005 +0 -40
  29. package/.claude/personalities/backups/sassy.md.backup-20251005 +0 -16
  30. package/.claude/personalities/backups/surfer-dude.md.backup-20251005 +0 -16
  31. package/.claude/personalities/backups/zen.md.backup-20251005 +0 -16
  32. package/.claude/piper-voices/en_US-lessac-medium.onnx +0 -0
  33. package/.claude/piper-voices/en_US-lessac-medium.onnx.json +0 -493
  34. package/.mcp-minimal.json +0 -53
  35. package/agentvibes.org/.mcp-minimal.json +0 -60
  36. package/agentvibes.org/CHANGELOG.md +0 -56
  37. package/agentvibes.org/README.md +0 -93
  38. package/agentvibes.org/app/(auth)/layout.tsx +0 -15
  39. package/agentvibes.org/app/(auth)/reset-password/page.tsx +0 -45
  40. package/agentvibes.org/app/(auth)/signin/page.tsx +0 -82
  41. package/agentvibes.org/app/(auth)/signup/page.tsx +0 -104
  42. package/agentvibes.org/app/(default)/layout.tsx +0 -31
  43. package/agentvibes.org/app/(default)/page.tsx +0 -20
  44. package/agentvibes.org/app/api/hello/route.ts +0 -3
  45. package/agentvibes.org/app/css/additional-styles/theme.css +0 -82
  46. package/agentvibes.org/app/css/additional-styles/utility-patterns.css +0 -55
  47. package/agentvibes.org/app/css/style.css +0 -100
  48. package/agentvibes.org/app/layout.tsx +0 -63
  49. package/agentvibes.org/components/cta.tsx +0 -58
  50. package/agentvibes.org/components/features.tsx +0 -256
  51. package/agentvibes.org/components/hero-home.tsx +0 -97
  52. package/agentvibes.org/components/modal-video.tsx +0 -137
  53. package/agentvibes.org/components/page-illustration.tsx +0 -55
  54. package/agentvibes.org/components/spotlight.tsx +0 -77
  55. package/agentvibes.org/components/testimonials.tsx +0 -282
  56. package/agentvibes.org/components/ui/footer.tsx +0 -82
  57. package/agentvibes.org/components/ui/header.tsx +0 -44
  58. package/agentvibes.org/components/ui/logo.tsx +0 -10
  59. package/agentvibes.org/components/workflows.tsx +0 -176
  60. package/agentvibes.org/next.config.js +0 -4
  61. package/agentvibes.org/package-lock.json +0 -1974
  62. package/agentvibes.org/package.json +0 -30
  63. package/agentvibes.org/pnpm-lock.yaml +0 -1141
  64. package/agentvibes.org/postcss.config.js +0 -5
  65. package/agentvibes.org/public/audio/02-sarcastic.mp3 +0 -0
  66. package/agentvibes.org/public/audio/03-angry.mp3 +0 -0
  67. package/agentvibes.org/public/audio/04-grandpa.mp3 +0 -0
  68. package/agentvibes.org/public/audio/05-sarcastic-example2.mp3 +0 -0
  69. package/agentvibes.org/public/audio/french-rachel.mp3 +0 -0
  70. package/agentvibes.org/public/audio/spanish-antoni.mp3 +0 -0
  71. package/agentvibes.org/public/favicon.ico +0 -0
  72. package/agentvibes.org/public/fonts/nacelle-italic.woff2 +0 -0
  73. package/agentvibes.org/public/fonts/nacelle-regular.woff2 +0 -0
  74. package/agentvibes.org/public/fonts/nacelle-semibold.woff2 +0 -0
  75. package/agentvibes.org/public/fonts/nacelle-semibolditalic.woff2 +0 -0
  76. package/agentvibes.org/public/images/blurred-shape-gray.svg +0 -1
  77. package/agentvibes.org/public/images/blurred-shape.svg +0 -1
  78. package/agentvibes.org/public/images/client-logo-01.svg +0 -1
  79. package/agentvibes.org/public/images/client-logo-02.svg +0 -1
  80. package/agentvibes.org/public/images/client-logo-03.svg +0 -1
  81. package/agentvibes.org/public/images/client-logo-04.svg +0 -1
  82. package/agentvibes.org/public/images/client-logo-05.svg +0 -1
  83. package/agentvibes.org/public/images/client-logo-06.svg +0 -1
  84. package/agentvibes.org/public/images/client-logo-07.svg +0 -1
  85. package/agentvibes.org/public/images/client-logo-08.svg +0 -1
  86. package/agentvibes.org/public/images/client-logo-09.svg +0 -1
  87. package/agentvibes.org/public/images/features.png +0 -0
  88. package/agentvibes.org/public/images/footer-illustration.svg +0 -1
  89. package/agentvibes.org/public/images/hero-image-01.jpg +0 -0
  90. package/agentvibes.org/public/images/logo.svg +0 -1
  91. package/agentvibes.org/public/images/page-illustration.svg +0 -1
  92. package/agentvibes.org/public/images/secondary-illustration.svg +0 -1
  93. package/agentvibes.org/public/images/testimonial-01.jpg +0 -0
  94. package/agentvibes.org/public/images/testimonial-02.jpg +0 -0
  95. package/agentvibes.org/public/images/testimonial-03.jpg +0 -0
  96. package/agentvibes.org/public/images/testimonial-04.jpg +0 -0
  97. package/agentvibes.org/public/images/testimonial-05.jpg +0 -0
  98. package/agentvibes.org/public/images/testimonial-06.jpg +0 -0
  99. package/agentvibes.org/public/images/testimonial-07.jpg +0 -0
  100. package/agentvibes.org/public/images/testimonial-08.jpg +0 -0
  101. package/agentvibes.org/public/images/testimonial-09.jpg +0 -0
  102. package/agentvibes.org/public/images/workflow-01.png +0 -0
  103. package/agentvibes.org/public/images/workflow-02.png +0 -0
  104. package/agentvibes.org/public/images/workflow-03.png +0 -0
  105. package/agentvibes.org/public/videos/video.mp4 +0 -0
  106. package/agentvibes.org/tsconfig.json +0 -28
  107. package/agentvibes.org/utils/useMasonry.tsx +0 -67
  108. package/agentvibes.org/utils/useMousePosition.tsx +0 -27
  109. package/docs/ai-optimized-documentation-standards.md +0 -306
  110. package/docs/architecture/provider-system.md +0 -574
  111. package/docs/voice-mapping-format.md +0 -218
  112. package/scripts/piper-voice/README.md +0 -145
  113. 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
- -&gt;
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
- -&gt;
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
- }