mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-08-28 05:25:33 +00:00
105 lines
3.6 KiB
TypeScript
105 lines
3.6 KiB
TypeScript
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>
|
|
);
|
|
}
|