mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-05-15 09:40:57 +00:00
fix: unused import and unwanted import
This commit is contained in:
Kinfe123
parent
52934ff0ab
commit
722f75485e
2 changed files with 41 additions and 324 deletions
|
|
@ -1,127 +1,61 @@
|
|||
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
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"
|
||||
/>
|
||||
<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: "Fast Refresh",
|
||||
desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.",
|
||||
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"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
className="w-5 h-"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
|
||||
/>
|
||||
<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: "Analytics",
|
||||
desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.",
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
title: "Datacenter security",
|
||||
desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.",
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
title: "Build on your terms",
|
||||
desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.",
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
title: "Safe to use",
|
||||
desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.",
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
title: "Flexible",
|
||||
desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue, nisl eget molestie varius.",
|
||||
title: "Writing assistant",
|
||||
desc: " Use our markdown editor to write content based on your saved data, with the help of AI.",
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import Image from "next/image";
|
||||
import { X } from "@repo/ui/components/icons";
|
||||
|
||||
import { features } from "./FeatureContent";
|
||||
import { CardClick } from "@repo/ui/components/cardClick";
|
||||
import FUIFeatureSectionWithCards from "./FeatureCardContent";
|
||||
import { cn } from "@repo/ui/lib/utils";
|
||||
import { ArrowUpRight } from "lucide-react";
|
||||
import { Gradient } from "./Features/features";
|
||||
|
||||
export default function Features() {
|
||||
const [tab, setTab] = useState<number>(0);
|
||||
|
|
@ -35,10 +27,7 @@ export default function Features() {
|
|||
src="https://tailwindcss.com/_next/static/media/docs@30.8b9a76a2.avif"
|
||||
className="absolute -top-0 left-10 opacity-40 z-2"
|
||||
/>
|
||||
{/* <div className="absolute top-0 z-0 w-screen left-0 right-0 mx-auto min-h-screen overflow-hidden bg-inherit bg-[radial-gradient(ellipse_20%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]"></div> */}
|
||||
<div className="relative ">
|
||||
{/* <div className="-z-1 absolute inset-x-0 -top-0 h-screen w-full bg-transparent bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] opacity-5 [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div> */}
|
||||
|
||||
<div className="flex relative flex-col px-4 mx-auto max-w-screen-xl md:px-0">
|
||||
<div className="relative mx-auto mb-5 space-y-4 max-w-3xl text-center">
|
||||
<h2 className="pt-16 text-4xl tracking-tighter text-transparent bg-clip-text bg-gradient-to-tr via-white md:text-5xl lg:text-6xl font-nomral font-geist from-zinc-400/50 to-white/60">
|
||||
|
|
@ -69,209 +58,3 @@ export default function Features() {
|
|||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
<div className="py-12 pt-0 md:pb-32">
|
||||
<div
|
||||
id="use-cases"
|
||||
className="relative px-0 mx-auto max-w-3xl sm:px-4 md:pt-10 lg:px-0 lg:max-w-6xl"
|
||||
>
|
||||
<div className="space-y-12 lg:flex lg:space-y-0 lg:space-x-12 xl:space-x-24">
|
||||
<div className="lg:max-w-none lg:min-w-[524px]">
|
||||
<div className="mb-8">
|
||||
<div className="mb-4 inline-flex rounded-full border border-transparent px-4 py-0.5 text-sm font-medium text-zinc-400 [background:linear-gradient(theme(colors.zinc.800),theme(colors.zinc.800))_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box]">
|
||||
Use cases
|
||||
</div>
|
||||
<h3 className="mb-4 text-3xl font-normal tracking-tighter text-zinc-200">
|
||||
Save time and keep things organised
|
||||
</h3>
|
||||
<p className="text-lg text-zinc-500">
|
||||
With Supermemory, it's really easy to save information from
|
||||
all over the internet, while training your own AI to help you
|
||||
do more with it.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mb-8 space-y-2 md:mb-0">
|
||||
<CardClick
|
||||
tab={tab}
|
||||
items={features}
|
||||
handleClickIndex={handleClickIndex}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative lg:max-w-none">
|
||||
<div className="flex relative flex-col" ref={tabs}>
|
||||
<div
|
||||
className="order-first transition-all duration-700 transform"
|
||||
style={{
|
||||
height: tab === 0 ? "auto" : 0,
|
||||
opacity: tab === 0 ? 1 : 0,
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Image
|
||||
className="mx-auto rounded-lg shadow-2xl lg:max-w-none"
|
||||
src={"/images/carousel-illustration-01.png"}
|
||||
width={700}
|
||||
height={520}
|
||||
alt="Carousel 01"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="order-first transition-all duration-700 transform"
|
||||
style={{
|
||||
height: tab === 1 ? "auto" : 0,
|
||||
opacity: tab === 1 ? 1 : 0,
|
||||
transform: tab === 1 ? "translateY(0)" : "translateY(4rem)",
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Image
|
||||
className="mx-auto rounded-lg shadow-2xl lg:max-w-none"
|
||||
src={"/images/carousel-illustration-01.png"}
|
||||
width={700}
|
||||
height={520}
|
||||
alt="Carousel 02"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="order-first transition-all duration-700 transform"
|
||||
style={{
|
||||
height: tab === 2 ? "auto" : 0,
|
||||
opacity: tab === 2 ? 1 : 0,
|
||||
transform: tab === 2 ? "translateY(0)" : "translateY(4rem)",
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Image
|
||||
className="mx-auto rounded-lg shadow-2xl lg:max-w-none"
|
||||
src={"/images/carousel-illustration-01.png"}
|
||||
width={700}
|
||||
height={520}
|
||||
alt="Carousel 03"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="features"
|
||||
className="px-4 mx-auto mt-24 max-w-6xl sm:px-6 md:pt-40"
|
||||
>
|
||||
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 lg:gap-16">
|
||||
<div>
|
||||
<div className="flex items-center mb-1">
|
||||
<X className="mr-2" />
|
||||
<h3 className="font-semibold font-inter-tight text-zinc-200">
|
||||
Import all your Twitter bookmarks
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-zinc-500">
|
||||
Use all the knowledge you've saved on Twitter to train your own
|
||||
supermemory.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center mb-1">
|
||||
<svg
|
||||
className="mr-2 fill-zinc-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path d="M13 16c-.153 0-.306-.035-.447-.105l-3.851-1.926c-.231.02-.465.031-.702.031-4.411 0-8-3.14-8-7s3.589-7 8-7 8 3.14 8 7c0 1.723-.707 3.351-2 4.63V15a1.003 1.003 0 0 1-1 1Zm-4.108-4.054c.155 0 .308.036.447.105L12 13.382v-2.187c0-.288.125-.562.341-.752C13.411 9.506 14 8.284 14 7c0-2.757-2.691-5-6-5S2 4.243 2 7s2.691 5 6 5c.266 0 .526-.02.783-.048a1.01 1.01 0 0 1 .109-.006Z" />
|
||||
</svg>
|
||||
<h3 className="font-semibold font-inter-tight text-zinc-200">
|
||||
Chat with collections
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-zinc-500">
|
||||
Use collections to talk to specific knowledgebases like 'My
|
||||
twitter bookmarks', or 'Learning web development'
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center mb-1">
|
||||
<svg
|
||||
className="mr-2 fill-zinc-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
>
|
||||
<path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7ZM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5Zm8.707 12.293a.999.999 0 1 1-1.414 1.414L11.9 13.314a8.019 8.019 0 0 0 1.414-1.414l2.393 2.393Z" />
|
||||
</svg>
|
||||
<h3 className="font-semibold font-inter-tight text-zinc-200">
|
||||
Powerful search
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-zinc-500">
|
||||
Look up anything you've saved in your supermemory, and get the
|
||||
information you need in seconds.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center mb-1">
|
||||
<svg
|
||||
className="mr-2 fill-zinc-400"
|
||||
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>
|
||||
<h3 className="font-semibold font-inter-tight text-zinc-200">
|
||||
Knowledge canvas
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-zinc-500">
|
||||
Arrange your saved information in a way that makes sense to you
|
||||
in a 2d canvas.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center mb-1">
|
||||
<svg
|
||||
className="mr-2 fill-zinc-400"
|
||||
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>
|
||||
<h3 className="font-semibold font-inter-tight text-zinc-200">
|
||||
Just... bookmarks
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-zinc-500">
|
||||
AI is cool, but sometimes you just need a place to save your
|
||||
stuff. Supermemory is that place.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center mb-1">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
className="mr-2 w-5 h-5 fill-zinc-400"
|
||||
>
|
||||
<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>
|
||||
<h3 className="font-semibold font-inter-tight text-zinc-200">
|
||||
Writing assistant
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-zinc-500">
|
||||
Use our markdown editor to write content based on your saved
|
||||
data, with the help of AI.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue