Search
Copy Code
Previous: QR Code
Next: Alert
Close Terminal
Light Mode
Sunflower
Sponsored
90+ polished components for exceptional products, accessible by default with keyboard and screen reader support.
advertisement-demo.tsx
advertisement.tsx
prompt.md
Collapse
Reset
Copy Code
Download
Run
1
"use client";
2
3
import { Advertisement } from "./advertisement";
4
5
// Icons for Ads
6
const SunflowerLogo = () => (
7
<svg viewBox="0 0 24 24" fill="none" className="w-6 h-6 text-amber-500" stroke="currentColor" strokeWidth="2">
8
<path strokeLinecap="round" strokeLinejoin="round" d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
9
<circle cx="12" cy="12" r="3" fill="currentColor" />
10
</svg>
11
);
12
13
const KrafaLogo = () => (
14
<div className="w-full h-full p-1.5 flex items-center justify-center">
15
<div className="w-full h-full bg-gradient-to-br from-pink-400 via-purple-400 to-blue-400 rounded-[8px] opacity-90 shadow-sm" />
16
</div>
17
);
18
19
const ADS = [
20
{
21
id: "sunflower",
22
title: "Sunflower",
23
description: "90+ polished components for exceptional products, accessible by default with keyboard and screen reader support.",
24
logo: <SunflowerLogo />,
25
},
26
{
27
id: "krafa",
28
title: "Krafa",
29
description: "Save the work you love from X bookmarks, Pinterest and more. Krafa learns your taste, so agents design like you.",
30
logo: <KrafaLogo />,
31
}
32
];
33
34
export function AdvertisementDemo() {
35
return (
36
<div className="w-full h-full min-h-[500px] flex items-center justify-center bg-transparent p-4">
37
<Advertisement ads={ADS} duration={6000} />
38
</div>
39
);
40
}
41