1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
import { Twitter } from "@repo/ui/components/icons";
import { GlareCard } from "./CardPatterns/Glare";
import React from "react";
import { MessageCircle, Search } from "lucide-react";
export default function FUIFeatureSectionWithCards() {
const features = [
{
icon: <Twitter className="w-5 h-5" />,
title: "Twitter Bookmarks",
desc: "Use all the knowledge you've saved on Twitter to train your own supermemory..",
},
{
icon: <Search className="w-5 h-5" />,
title: "Powerful search",
desc: "Look up anything you've saved in your supermemory, and get the information you need in seconds.",
},
{
icon: <MessageCircle className="w-5 h-5" />,
title: "Chat with collections",
desc: "Use collections to talk to specific knowledgebases like 'My twitter bookmarks', or 'Learning web development'",
},
{
icon: (
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="14" height="16">
<path d="M13 0H1C.4 0 0 .4 0 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1ZM2 2h10v8H8v4H2V2Z" />
</svg>
),
title: "Knowledge canvas",
desc: " Arrange your saved information in a way that makes sense to youin a 2d canvas.",
},
{
icon: (
<svg
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
>
<path d="M14.6.085 8 2.885 1.4.085c-.5-.2-1.4-.1-1.4.9v11c0 .4.2.8.6.9l7 3c.3.1.5.1.8 0l7-3c.4-.2.6-.5.6-.9v-11c0-1-.9-1.1-1.4-.9ZM2 2.485l5 2.1v8.8l-5-2.1v-8.8Zm12 8.8-5 2.1v-8.7l5-2.1v8.7Z" />
</svg>
),
title: "Just... bookmarks",
desc: "AI is cool, but sometimes you just need a place to save your stuff. Supermemory is that place.",
},
{
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="w-5 h-"
>
<path d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z" />
</svg>
),
title: "Writing assistant",
desc: " Use our markdown editor to write content based on your saved data, with the help of AI.",
},
];
return (
<section className="relative z-20 pb-14">
<div className="px-4 mx-auto max-w-screen-xl text-gray-400 md:px-8 lg:px-0">
<div className="relative mx-auto max-w-2xl sm:text-center">
<div className="relative z-10">
<h3 className="mt-4 text-3xl font-normal tracking-tighter text-gray-200 sm:text-4xl md:text-5xl font-geist">
</h3>
</div>
<div
className="absolute inset-0 mx-auto max-w-xs h-44 blur-[118px]"
style={{
background:
"linear-gradient(152.92deg, rgba(192, 132, 252, 0.2) 4.54%, rgba(232, 121, 249, 0.26) 34.2%, rgba(192, 132, 252, 0.1) 77.55%)",
}}
></div>
</div>
<div className="relative z-20 mt-[4rem]">
<ul className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
{features.map((item, idx) => (
<GlareCard key={`l-${idx}`}>
<li
key={idx}
className="z-20 transform-gpu space-y-3 rounded-xl border border-white/10 bg-transparent/20 p-4 [border:1px_solid_rgba(255,255,255,.1)] [box-shadow:0_-20px_80px_-20px_#8686f01f_inset]"
>
<div className="w-fit transform-gpu rounded-full p-4 text-purple-600 dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset]">
{item.icon}
</div>
<h4 className="text-lg font-bold tracking-tighter text-gray-300 font-geist">
{item.title}
</h4>
<p className="text-gray-500">{item.desc}</p>
</li>
</GlareCard>
))}
</ul>
</div>
</div>
</section>
);
}
|