Skip to content

Commit 2fac65a

Browse files
louisjoecodeslouisjoecodes
committed
shadcn
1 parent 61bf44a commit 2fac65a

File tree

2 files changed

+189
-6
lines changed

2 files changed

+189
-6
lines changed

‎apps/playground/app/(app)/(root)/page.tsx‎

Lines changed: 177 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
import { Metadata } from 'next';
22
import Link from 'next/link';
33

4-
import { ExamplesNav } from '@/components/examples-nav';
54
import {
65
PageActions,
76
PageHeader,
87
PageHeaderDescription,
98
PageHeaderHeading,
109
} from '@/components/page-actions';
11-
import { PageNav } from '@/components/page-nav';
1210
import { Button } from '@elevenlabs/ui/components/button';
11+
import {
12+
MinimalCard,
13+
MinimalCardDescription,
14+
MinimalCardImage,
15+
MinimalCardTitle,
16+
} from '@elevenlabs/ui/components/ui/minimal-card';
1317
import { SkiperMarquee } from '@elevenlabs/ui/components/ui/skiper-marquee';
1418

1519
const title = 'ElevenLabs Agents SDK';
@@ -68,12 +72,179 @@ export default function IndexPage() {
6872
</PageActions>
6973
</PageHeader>
7074
</div>
71-
<PageNav className="hidden md:flex">
72-
<ExamplesNav className="[&>a:first-child]:text-primary flex-1 overflow-hidden" />
73-
</PageNav>
7475

7576
<div className="container-wrapper section-soft flex-1 pb-6">
76-
<div className="container"></div>
77+
<div className="container">
78+
<div className="grid grid-cols-1 gap-4 md:grid-cols-4 lg:grid-cols-6">
79+
{/* Large card spanning 2 columns and 2 rows with SkiperMarquee */}
80+
<MinimalCard className="col-span-1 md:col-span-2 lg:col-span-3 md:row-span-2 overflow-hidden">
81+
<MinimalCardImage
82+
src="https://elevenlabs.io/assets/images/convai/convai-gradient.svg"
83+
alt="AI Audio Innovation"
84+
/>
85+
</MinimalCard>
86+
87+
{/* Medium card with image */}
88+
<MinimalCard className="col-span-1 md:col-span-2 lg:col-span-2">
89+
<MinimalCardImage
90+
src="https://images.unsplash.com/photo-1590935217281-8f102120d683?w=800&h=600&fit=crop"
91+
alt="Voice Synthesis"
92+
/>
93+
<div className="p-4">
94+
<MinimalCardTitle>Voice Synthesis</MinimalCardTitle>
95+
<MinimalCardDescription>
96+
Generate natural-sounding speech in multiple languages
97+
</MinimalCardDescription>
98+
</div>
99+
</MinimalCard>
100+
101+
{/* Small card */}
102+
<MinimalCard className="col-span-1">
103+
<div className="p-6">
104+
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
105+
<svg
106+
className="h-6 w-6 text-primary"
107+
fill="none"
108+
stroke="currentColor"
109+
viewBox="0 0 24 24"
110+
>
111+
<path
112+
strokeLinecap="round"
113+
strokeLinejoin="round"
114+
strokeWidth={2}
115+
d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"
116+
/>
117+
</svg>
118+
</div>
119+
<MinimalCardTitle>Real-time</MinimalCardTitle>
120+
<MinimalCardDescription>
121+
Ultra-low latency for seamless conversations
122+
</MinimalCardDescription>
123+
</div>
124+
</MinimalCard>
125+
126+
{/* Wide card */}
127+
<MinimalCard className="col-span-1 md:col-span-3 lg:col-span-2">
128+
<div className="p-6">
129+
<MinimalCardTitle>Multilingual Support</MinimalCardTitle>
130+
<MinimalCardDescription className="mb-4">
131+
Support for 29+ languages with natural accents and dialects
132+
</MinimalCardDescription>
133+
<div className="flex flex-wrap gap-2">
134+
<span className="rounded-full bg-secondary/20 px-3 py-1 text-xs">
135+
English
136+
</span>
137+
<span className="rounded-full bg-secondary/20 px-3 py-1 text-xs">
138+
Spanish
139+
</span>
140+
<span className="rounded-full bg-secondary/20 px-3 py-1 text-xs">
141+
French
142+
</span>
143+
<span className="rounded-full bg-secondary/20 px-3 py-1 text-xs">
144+
German
145+
</span>
146+
<span className="rounded-full bg-secondary/20 px-3 py-1 text-xs">
147+
+25 more
148+
</span>
149+
</div>
150+
</div>
151+
</MinimalCard>
152+
153+
{/* Small card with stats */}
154+
<MinimalCard className="col-span-1">
155+
<div className="flex h-full flex-col justify-between p-6">
156+
<div>
157+
<div className="text-3xl font-bold">99.9%</div>
158+
<MinimalCardDescription>Uptime SLA</MinimalCardDescription>
159+
</div>
160+
<div className="mt-4 h-px bg-border" />
161+
<div className="mt-4">
162+
<div className="text-2xl font-semibold"> 500ms</div>
163+
<MinimalCardDescription>
164+
Average latency
165+
</MinimalCardDescription>
166+
</div>
167+
</div>
168+
</MinimalCard>
169+
170+
{/* Medium card with feature list */}
171+
<MinimalCard className="col-span-1 md:col-span-2">
172+
<div className="p-6">
173+
<MinimalCardTitle>Developer First</MinimalCardTitle>
174+
<MinimalCardDescription className="mb-4">
175+
Built with developers in mind
176+
</MinimalCardDescription>
177+
<ul className="space-y-2 text-sm">
178+
<li className="flex items-center gap-2">
179+
<svg
180+
className="h-4 w-4 text-green-500"
181+
fill="currentColor"
182+
viewBox="0 0 20 20"
183+
>
184+
<path
185+
fillRule="evenodd"
186+
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
187+
clipRule="evenodd"
188+
/>
189+
</svg>
190+
Simple REST API
191+
</li>
192+
<li className="flex items-center gap-2">
193+
<svg
194+
className="h-4 w-4 text-green-500"
195+
fill="currentColor"
196+
viewBox="0 0 20 20"
197+
>
198+
<path
199+
fillRule="evenodd"
200+
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
201+
clipRule="evenodd"
202+
/>
203+
</svg>
204+
WebSocket support
205+
</li>
206+
<li className="flex items-center gap-2">
207+
<svg
208+
className="h-4 w-4 text-green-500"
209+
fill="currentColor"
210+
viewBox="0 0 20 20"
211+
>
212+
<path
213+
fillRule="evenodd"
214+
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
215+
clipRule="evenodd"
216+
/>
217+
</svg>
218+
TypeScript SDK
219+
</li>
220+
</ul>
221+
</div>
222+
</MinimalCard>
223+
224+
{/* Call to action card */}
225+
<MinimalCard className="col-span-1 bg-primary text-primary-foreground hover:bg-primary/90">
226+
<div className="flex h-full flex-col justify-between p-6">
227+
<div>
228+
<MinimalCardTitle className="text-primary-foreground">
229+
Start Building
230+
</MinimalCardTitle>
231+
<MinimalCardDescription className="text-primary-foreground/80">
232+
Get your API key and start creating amazing voice
233+
experiences
234+
</MinimalCardDescription>
235+
</div>
236+
<Button
237+
asChild
238+
size="sm"
239+
variant="secondary"
240+
className="mt-4 w-full"
241+
>
242+
<Link href="/playground">Try Playground</Link>
243+
</Button>
244+
</div>
245+
</MinimalCard>
246+
</div>
247+
</div>
77248

78249
<div className="container overflow-hidden">
79250
<section className="border-border/50 -mx-4 w-[160vw] overflow-hidden rounded-lg border md:hidden md:w-[150vw]"></section>

‎apps/playground/next.config.mjs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,18 @@ const nextConfig = {
1212
experimental: {
1313
viewTransition: true,
1414
},
15+
images: {
16+
remotePatterns: [
17+
{
18+
protocol: 'https',
19+
hostname: 'images.unsplash.com',
20+
},
21+
{
22+
protocol: 'https',
23+
hostname: 'elevenlabs.io',
24+
},
25+
],
26+
},
1527
async redirects() {
1628
return [
1729
{

0 commit comments

Comments
 (0)