vrr/supermemory
2
0
Fork 0
mirror of https://github.com/supermemoryai/supermemory.git synced 2026-05-09 19:45:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improved Input + Feature Section click + Twitter link + Footer link arrow

Browse source
This commit is contained in:
codetorso 2024-05-21 04:55:40 +05:30
parent beacf1532e
commit 136902b8ab
10 changed files with 193 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apps/web-v2/src/app/(landing)/Cta.tsx
View file

@ -6,7 +6,7 @@ function Cta() {
return (
<section
id="try"
className="relative mb-32 mt-40 flex w-full flex-col items-center justify-center gap-8"
className="relative mb-44 mt-60 flex w-full flex-col items-center justify-center gap-8"
>
<div className="absolute left-0 z-[-1] h-full w-full">
{/* a blue gradient line that's slightly tilted with blur (a lotof blur)*/}

2
apps/web-v2/src/app/(landing)/EmailInput.tsx
View file

@ -39,7 +39,7 @@ function EmailInput() {
<input
type="email"
name="email"
className={`transition-width flex w-full items-center rounded-2xl bg-[#37485E] px-4 py-2 duration-300 focus:outline-none`}
className={`transition-width flex w-full items-center rounded-2xl bg-[#37485E] px-4 py-2 duration-300 focus:outline-none outline-none`}
placeholder="Enter your email"
value={email}
required

59
apps/web-v2/src/app/(landing)/FeatureContent.tsx Normal file
View file

@ -0,0 +1,59 @@
export const features = [
{
title: "For Researchers",
description:
"Add content to collections and use it as a knowledge base for your research, link multiple sources together to get a better understanding of the topic.",
svg: <ResearchSvg />
},
{
title: "For Content writers",
description:
"Save time and use the writing assistant to generate content based on your own saved collections and sources.",
svg: <ContentSvg />
},
{
title: "For Developers",
description:
"Talk to documentation websites, code snippets, etc. so you never have to google the same thing a hundred times.",
svg: <DeveloperSvg />
},
];
function ResearchSvg() {
return (
<svg
className="mr-3 shrink-0 fill-zinc-400"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
>
<path d="m7.951 14.537 6.296-7.196 1.506 1.318-7.704 8.804-3.756-3.756 1.414-1.414 2.244 2.244Zm11.296-7.196 1.506 1.318-7.704 8.804-1.756-1.756 1.414-1.414.244.244 6.296-7.196Z" />
</svg>
);
}
function ContentSvg() {
return (
<svg
className="mr-3 shrink-0 fill-zinc-400"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
>
<path d="m16.997 19.056-1.78-.912A13.91 13.91 0 0 0 16.75 11.8c0-2.206-.526-4.38-1.533-6.344l1.78-.912A15.91 15.91 0 0 1 18.75 11.8c0 2.524-.602 5.01-1.753 7.256Zm-3.616-1.701-1.77-.93A9.944 9.944 0 0 0 12.75 11.8c0-1.611-.39-3.199-1.14-4.625l1.771-.93c.9 1.714 1.37 3.62 1.369 5.555 0 1.935-.47 3.841-1.369 5.555Zm-3.626-1.693-1.75-.968c.49-.885.746-1.881.745-2.895a5.97 5.97 0 0 0-.745-2.893l1.75-.968a7.968 7.968 0 0 1 .995 3.861 7.97 7.97 0 0 1-.995 3.863Zm-3.673-1.65-1.664-1.11c.217-.325.333-.709.332-1.103 0-.392-.115-.776-.332-1.102L6.082 9.59c.437.655.67 1.425.668 2.21a3.981 3.981 0 0 1-.668 2.212Z" />
</svg>
);
}
function DeveloperSvg() {
return (
<svg
className="mr-3 shrink-0 fill-zinc-400"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
>
<path d="m11.293 5.293 1.414 1.414-8 8-1.414-1.414 8-8Zm7-1 1.414 1.414-8 8-1.414-1.414 8-8Zm0 6 1.414 1.414-8 8-1.414-1.414 8-8Z" />
</svg>
);
}

94
apps/web-v2/src/app/(landing)/Features.tsx
View file

@ -6,8 +6,11 @@ import Image from "next/image";
import CarouselIllustration from "@/../public/images/carousel-illustration-01.png";
import { X } from "@/utils/icons";
import { features } from "./FeatureContent";
import { CardClick } from "@/components/ui/cardClick";
export default function Features() {
const [tab, setTab] = useState<number>(1);
const [tab, setTab] = useState<number>(0);
const tabs = useRef<HTMLDivElement>(null);
@ -16,6 +19,10 @@ export default function Features() {
tabs.current.parentElement.style.height = `${tabs.current.clientHeight}px`;
};
function handleClickIndex(tab:number){
setTab(tab);
}
useEffect(() => {
heightFix();
}, []);
@ -46,82 +53,7 @@ export default function Features() {
</div>
{/* Tabs buttons */}
<div className="mb-8 space-y-2 md:mb-0">
<button
className={`flex items-center rounded-2xl border border-transparent px-6 py-4 text-left ${tab !== 1 ? "" : "[background:linear-gradient(#2E2E32,#2E2E32)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box]"}`}
onClick={(e) => {
e.preventDefault();
setTab(1);
}}
>
<svg
className="mr-3 shrink-0 fill-zinc-400"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
>
<path d="m7.951 14.537 6.296-7.196 1.506 1.318-7.704 8.804-3.756-3.756 1.414-1.414 2.244 2.244Zm11.296-7.196 1.506 1.318-7.704 8.804-1.756-1.756 1.414-1.414.244.244 6.296-7.196Z" />
</svg>
<div>
<div className="font-inter-tight mb-1 text-lg font-semibold text-zinc-200">
For Researchers
</div>
<div className="text-zinc-500">
Add content to collections and use it as a knowledge base
for your research, link multiple sources together to get a
better understanding of the topic.
</div>
</div>
</button>
<button
className={`flex items-center rounded-2xl border border-transparent px-6 py-4 text-left ${tab !== 2 ? "" : "[background:linear-gradient(#2E2E32,#2E2E32)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box]"}`}
onClick={(e) => {
e.preventDefault();
setTab(2);
}}
>
<svg
className="mr-3 shrink-0 fill-zinc-400"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
>
<path d="m16.997 19.056-1.78-.912A13.91 13.91 0 0 0 16.75 11.8c0-2.206-.526-4.38-1.533-6.344l1.78-.912A15.91 15.91 0 0 1 18.75 11.8c0 2.524-.602 5.01-1.753 7.256Zm-3.616-1.701-1.77-.93A9.944 9.944 0 0 0 12.75 11.8c0-1.611-.39-3.199-1.14-4.625l1.771-.93c.9 1.714 1.37 3.62 1.369 5.555 0 1.935-.47 3.841-1.369 5.555Zm-3.626-1.693-1.75-.968c.49-.885.746-1.881.745-2.895a5.97 5.97 0 0 0-.745-2.893l1.75-.968a7.968 7.968 0 0 1 .995 3.861 7.97 7.97 0 0 1-.995 3.863Zm-3.673-1.65-1.664-1.11c.217-.325.333-.709.332-1.103 0-.392-.115-.776-.332-1.102L6.082 9.59c.437.655.67 1.425.668 2.21a3.981 3.981 0 0 1-.668 2.212Z" />
</svg>
<div>
<div className="font-inter-tight mb-1 text-lg font-semibold text-zinc-200">
For Content writers
</div>
<div className="text-zinc-500">
Save time and use the writing assistant to generate
content based on your own saved collections and sources.
</div>
</div>
</button>
<button
className={`flex items-center rounded-2xl border border-transparent px-6 py-4 text-left ${tab !== 3 ? "" : "[background:linear-gradient(#2E2E32,#2E2E32)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box]"}`}
onClick={(e) => {
e.preventDefault();
setTab(3);
}}
>
<svg
className="mr-3 shrink-0 fill-zinc-400"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
>
<path d="m11.293 5.293 1.414 1.414-8 8-1.414-1.414 8-8Zm7-1 1.414 1.414-8 8-1.414-1.414 8-8Zm0 6 1.414 1.414-8 8-1.414-1.414 8-8Z" />
</svg>
<div>
<div className="font-inter-tight mb-1 text-lg font-semibold text-zinc-200">
For Developers
</div>
<div className="text-zinc-500">
Talk to documentation websites, code snippets, etc. so you
never have to google the same thing a hundred times.
</div>
</div>
</button>
<CardClick tab={tab} items={features} handleClickIndex={handleClickIndex} />
</div>
</div>
@ -130,7 +62,7 @@ export default function Features() {
<div className="relative flex flex-col" ref={tabs}>
{/* Item 1 */}
<Transition
show={tab === 1}
show={tab === 0}
enter="transition ease-in-out duration-700 transform order-first"
enterFrom="opacity-0 -translate-y-4"
enterTo="opacity-100 translate-y-0"
@ -152,7 +84,7 @@ export default function Features() {
</Transition>
{/* Item 2 */}
<Transition
show={tab === 2}
show={tab === 1}
enter="transition ease-in-out duration-700 transform order-first"
enterFrom="opacity-0 -translate-y-4"
enterTo="opacity-100 translate-y-0"
@ -174,7 +106,7 @@ export default function Features() {
</Transition>
{/* Item 3 */}
<Transition
show={tab === 3}
show={tab === 2}
enter="transition ease-in-out duration-700 transform order-first"
enterFrom="opacity-0 -translate-y-4"
enterTo="opacity-100 translate-y-0"
@ -320,7 +252,7 @@ export default function Features() {
</div>
</div>
</div>
</div>
</section>
);

4
apps/web-v2/src/app/(landing)/Hero.tsx
View file

@ -23,11 +23,11 @@ function Hero() {
<>
<section className="mt-24 flex max-w-xl flex-col items-center justify-center gap-10 md:mt-56">
<a
className="group/anchor flex items-center justify-center gap-4 rounded-full text-white/80 bg-white/10 px-4 py-2 text-sm"
className="group/anchor pl-10 pr-6 flex items-center justify-center gap-4 rounded-full text-white/80 bg-white/10 py-2 text-sm"
href="https://twitter.com/supermemoryai"
target="_blank"
>
<Twitter className="h-4 w-4" /><div className="flex"> Follow us on Twitter <LinkArrow classname=" scale-y-0 group-hover/anchor:scale-y-100 origin-bottom-left transition" stroke="#ffffff" /></div>
<Twitter className="h-4 w-4" /><div className="flex"> Follow us on Twitter <LinkArrow classname="group-hover/anchor:opacity-100 opacity-0 transition" stroke="#ffffff" /></div>
</a>
<motion.h1
{...{

17
apps/web-v2/src/app/(landing)/footer.tsx Normal file
View file

@ -0,0 +1,17 @@
import React from 'react'
import LinkArrow from './linkArrow'
function Footer() {
return (
<footer className="mt-20 flex w-full items-center justify-between gap-4 px-8 py-8 text-sm text-zinc-500">
<p>© 2024 Supermemory.ai</p>
<div className="flex gap-5">
<a className='flex group/mail' target='_blank' href="mailto:hi@dhravya.dev">Contact<LinkArrow classname='group-hover/mail:opacity-100 opacity-0 transition' stroke='#ffffff' /></a>
<a className='flex group/twit' target='_blank' href="https://twitter.com/supermemoryai">Twitter <LinkArrow classname='group-hover/twit:opacity-100 opacity-0 transition' stroke='#ffffff' /></a>
<a className='flex group/git' target='_blank' href="https://github.com/dhravya/supermemory">Github <LinkArrow stroke='#ffffff' classname='group-hover/git:opacity-100 opacity-0 transition' /></a>
</div>
</footer>
)
}
export default Footer

9
apps/web-v2/src/app/(landing)/linkArrow.tsx Normal file
View file

@ -0,0 +1,9 @@
import React from 'react'
function LinkArrow({stroke, classname}: {stroke: string, classname?: string}) {
return (
<svg className={classname} width="24px" height="24px" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(1, 0, 0, 1, 0, 0)rotate(0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M7 17L17 7M17 7H8M17 7V16" stroke={stroke} stroke-width="0.792" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
)
}
export default LinkArrow

12
apps/web-v2/src/app/(landing)/page.tsx
View file

@ -4,6 +4,7 @@ import Navbar from "./Navbar";
import Cta from "./Cta";
import { Toaster } from "@/components/ui/toaster";
import Features from "./Features";
import Footer from "./footer";
export const runtime = "edge";
@ -50,14 +51,9 @@ export default function Home() {
<Toaster />
<footer className="mt-16 flex w-full items-center justify-between gap-4 border-t border-zinc-200/50 px-8 py-8 text-sm text-zinc-500">
<p>© 2024 Supermemory.ai</p>
<div className="flex gap-4">
<a href="mailto:hi@dhravya.dev">Contact</a>
<a href="https://twitter.com/supermemoryai">Twitter</a>
<a href="https://github.com/dhravya/supermemory">Github</a>
</div>
</footer>
<Footer />
</main>
);
}

81
apps/web-v2/src/components/ui/cardClick.tsx Normal file
View file

@ -0,0 +1,81 @@
"use client";
import { cn } from "@/utils/cn";
import { AnimatePresence, motion } from "framer-motion";
import React from "react";
export const CardClick = ({
tab,
handleClickIndex,
items,
}: {
tab: number,
handleClickIndex: (tab: number)=>void,
items: {
title: string;
description: string;
svg: React.ReactNode
}[];
}) => {
return (
<div
className={cn(
"flex flex-col",
)}
>
{items.map((item, idx) => (
<div
key={idx}
className="group relative block h-full w-full p-2"
onMouseDown={() => handleClickIndex(idx)}
>
<AnimatePresence>
{tab === idx && (
<motion.span
className="absolute -z-[1] inset-0 block h-full w-full rounded-3xl [background:linear-gradient(#2E2E32,#2E2E32),linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))]"
layoutId="hoverBackground"
initial={{ opacity: 0 }}
animate={{
opacity: 1,
transition: { duration: 0.15 },
}}
exit={{
opacity: 0,
transition: { duration: 0.15, delay: 0.2 },
}}
/>
)}
</AnimatePresence>
<Card title={item.title} description={item.description} svg={item.svg} />
</div>
))}
</div>
);
};
export const Card = ({
title,
description,
svg
}: {
title: string;
description: string;
svg: React.ReactNode;
}) => {
return (
<div
className={`flex items-center rounded-2xl border border-transparent px-6 py-4 text-left`}
>
{svg}
<div>
<div className="font-inter-tight mb-1 text-lg font-semibold text-zinc-200">
{title}
</div>
<div className="text-zinc-500">
{description}
</div>
</div>
</div>
);
};

6
apps/web-v2/src/utils/cn.ts Normal file
View file

@ -0,0 +1,6 @@
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}