Skip to content

Commit b25ca93

Browse files
louisjoecodeslouisjoecodes
committed
styling
1 parent 20b75a8 commit b25ca93

File tree

7 files changed

+396
-134
lines changed

7 files changed

+396
-134
lines changed

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

Lines changed: 159 additions & 128 deletions
Large diffs are not rendered by default.

‎apps/playground/components/block-developer-toolkit.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
'use client';
22

3-
import { useRef } from 'react';
43
import { cn } from '@/lib/utils';
54
import dynamic from 'next/dynamic';
6-
import { useRive } from '@rive-app/react-canvas';
75
import { Block } from './block';
86

97
const GridItem = ({
@@ -98,20 +96,22 @@ export const BlockDeveloperToolkit = () => {
9896
{
9997
title: 'Powerful SDK',
10098
description:
101-
'Write your own conversational agent with our SDK in Python or JavaScript',
99+
'Use our SDKs for JavaScript, Python, Swift, and more to embed voice agents into your apps, sites, or systems. Stream audio, manage sessions, and control behavior with minimal setup.',
102100
},
103101
{
104102
title: 'Low latency',
105-
description: 'The most responsive conversational AI, with <500ms latency',
103+
description:
104+
'Responses are generated and delivered in real time, even during high-concurrency traffic. Our system is optimized for sub-second turnaround across speech, reasoning, and voice synthesis.',
106105
},
107106
{
108107
title: 'Bring any LLM',
109-
description: 'Choose from any LLM, including your own custom LLM',
108+
description:
109+
'Connect any leading model — GPT-4, Claude, Gemini, or your own — with a few lines of config. Swap models at any time to match your performance, privacy, or cost needs.',
110110
},
111111
{
112112
title: 'RAG out of the box',
113113
description:
114-
'Simple support for external knowledge bases and custom tools',
114+
'Use Retrieval-Augmented Generation to pull from your own documents and sources. Index files and URLs instantly and get grounded, up-to-date answers with minimal latency.',
115115
},
116116
];
117117

@@ -124,6 +124,7 @@ export const BlockDeveloperToolkit = () => {
124124
Ship production-grade agents
125125
</h3>
126126
</div>
127+
127128
{/* Main grid */}
128129
<div
129130
className="relative flex w-full grid-rows-2 flex-col gap-0 border-x border-[rgba(0,0,0,0.1)] dark:border-[rgba(255,255,255,0.1)] [--center-width:480px] sm:[--center-width:320px] md:[--center-width:380px] lg:grid xl:[--center-width:480px]"

‎apps/playground/next.config.mjs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,14 @@ const nextConfig = {
2222
protocol: 'https',
2323
hostname: 'elevenlabs.io',
2424
},
25+
{
26+
protocol: 'https',
27+
hostname: 'pbs.twimg.com',
28+
},
29+
{
30+
protocol: 'https',
31+
hostname: 'storage.googleapis.com',
32+
},
2533
],
2634
},
2735
async redirects() {

‎packages/ui/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"@dnd-kit/sortable": "^10.0.0",
1313
"@dnd-kit/utilities": "^3.2.2",
1414
"@hookform/resolvers": "^3.10.0",
15+
"@number-flow/react": "^0.5.10",
1516
"@radix-ui/react-accordion": "^1.2.12",
1617
"@radix-ui/react-alert-dialog": "^1.1.15",
1718
"@radix-ui/react-aspect-ratio": "^1.1.7",
@@ -50,6 +51,7 @@
5051
"recharts": "2.15.4",
5152
"sonner": "^2.0.7",
5253
"streamdown": "^1.1.8",
54+
"swiper": "^11.2.10",
5355
"tailwind-merge": "^3.3.1",
5456
"tw-animate-css": "^1.3.6",
5557
"use-stick-to-bottom": "^1.1.1",

‎packages/ui/src/components/ui/card-carousel.tsx‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
'use client';
2+
3+
import Image from 'next/image';
4+
import React from 'react';
5+
import { Swiper, SwiperSlide } from 'swiper/react';
6+
7+
import 'swiper/css';
8+
import 'swiper/css/effect-coverflow';
9+
import 'swiper/css/navigation';
10+
import 'swiper/css/pagination';
11+
import {
12+
Autoplay,
13+
EffectCoverflow,
14+
Navigation,
15+
Pagination,
16+
} from 'swiper/modules';
17+
18+
interface CarouselProps {
19+
images: { src: string; alt: string }[];
20+
autoplayDelay?: number;
21+
showPagination?: boolean;
22+
showNavigation?: boolean;
23+
}
24+
25+
export const CardCarousel: React.FC<CarouselProps> = ({
26+
images,
27+
autoplayDelay = 1500,
28+
showPagination = true,
29+
showNavigation = true,
30+
}) => {
31+
const css = `
32+
.swiper {
33+
width: 100%;
34+
padding-bottom: 50px;
35+
}
36+
37+
.swiper-slide {
38+
background-position: center;
39+
background-size: cover;
40+
width: 300px;
41+
/* height: 300px; */
42+
/* margin: 20px; */
43+
}
44+
45+
.swiper-slide img {
46+
display: block;
47+
width: 100%;
48+
}
49+
50+
51+
.swiper-3d .swiper-slide-shadow-left {
52+
background-image: none;
53+
}
54+
.swiper-3d .swiper-slide-shadow-right{
55+
background: none;
56+
}
57+
`;
58+
return (
59+
<section className="w-ace-y-4">
60+
<style>{css}</style>
61+
<div className="mx-auto w-full max-w-4xl rounded-[24px] border border-black/5 p-2 shadow-sm md:rounded-t-[44px]">
62+
<div className="relative mx-auto flex w-full flex-col rounded-[24px] border border-black/5 bg-neutral-800/5 p-2 shadow-sm md:items-start md:gap-8 md:rounded-b-[20px] md:rounded-t-[40px] md:p-2">
63+
<div className="flex flex-col justify-center pb-2 pl-4 pt-14 md:items-center">
64+
<div className="flex gap-2">
65+
<div>
66+
<h3 className="text-4xl opacity-85 font-bold tracking-tight">
67+
Lifelike voice agents
68+
</h3>
69+
<p>Try them yourself</p>
70+
</div>
71+
</div>
72+
</div>
73+
74+
<div className="flex w-full items-center justify-center gap-4">
75+
<div className="w-full">
76+
<Swiper
77+
spaceBetween={50}
78+
autoplay={{
79+
delay: autoplayDelay,
80+
disableOnInteraction: false,
81+
}}
82+
effect={'coverflow'}
83+
grabCursor={true}
84+
centeredSlides={true}
85+
loop={true}
86+
slidesPerView={'auto'}
87+
coverflowEffect={{
88+
rotate: 0,
89+
stretch: 0,
90+
depth: 100,
91+
modifier: 2.5,
92+
}}
93+
pagination={showPagination}
94+
navigation={
95+
showNavigation
96+
? {
97+
nextEl: '.swiper-button-next',
98+
prevEl: '.swiper-button-prev',
99+
}
100+
: undefined
101+
}
102+
modules={[EffectCoverflow, Autoplay, Pagination, Navigation]}
103+
>
104+
{images.map((image, index) => (
105+
<SwiperSlide key={index}>
106+
<div className="size-full rounded-3xl">
107+
<Image
108+
src={image.src}
109+
width={500}
110+
height={500}
111+
className="size-full rounded-xl"
112+
alt={image.alt}
113+
/>
114+
</div>
115+
</SwiperSlide>
116+
))}
117+
{images.map((image, index) => (
118+
<SwiperSlide key={index}>
119+
<div className="size-full rounded-3xl">
120+
<Image
121+
src={image.src}
122+
width={200}
123+
height={200}
124+
className="size-full rounded-xl"
125+
alt={image.alt}
126+
/>
127+
</div>
128+
</SwiperSlide>
129+
))}
130+
</Swiper>
131+
</div>
132+
</div>
133+
</div>
134+
</div>
135+
</section>
136+
);
137+
};

‎packages/ui/src/components/ui/kibo-ui/avatar-stack/index.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { Children, type ReactNode } from 'react';
2+
import { cn } from '@elevenlabs/ui/lib/utils';
3+
4+
export type AvatarStackProps = {
5+
children: ReactNode;
6+
className?: string;
7+
animate?: boolean;
8+
size?: number;
9+
};
10+
11+
export const AvatarStack = ({
12+
children,
13+
className,
14+
animate = false,
15+
size = 40,
16+
...props
17+
}: AvatarStackProps) => (
18+
<div
19+
className={cn(
20+
'-space-x-1 flex items-center',
21+
animate && 'hover:space-x-0 [&>*]:transition-all',
22+
className,
23+
)}
24+
{...props}
25+
>
26+
{Children.map(children, (child, index) => {
27+
if (!child) {
28+
return null;
29+
}
30+
31+
return (
32+
<div
33+
className={cn(
34+
'size-full shrink-0 overflow-hidden rounded-full',
35+
'[&_[data-slot="avatar"]]:size-full',
36+
className,
37+
)}
38+
style={{
39+
width: size,
40+
height: size,
41+
maskImage: index
42+
? `radial-gradient(circle ${size / 2}px at -${size / 4 + size / 10}px 50%, transparent 99%, white 100%)`
43+
: '',
44+
}}
45+
>
46+
{child}
47+
</div>
48+
);
49+
})}
50+
</div>
51+
);

‎pnpm-lock.yaml‎

Lines changed: 32 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)