mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-05-19 16:13:19 +00:00
107 lines
4 KiB
TypeScript
107 lines
4 KiB
TypeScript
function Welcome() {
|
|
return (
|
|
<div className="min-h-screen font-[Space_Grotesk,-apple-system,BlinkMacSystemFont,Segoe_UI,Roboto,sans-serif] flex items-center justify-center p-8 bg-gradient-to-br from-gray-50 to-white">
|
|
<div className="max-w-4xl w-full text-center">
|
|
{/* Header */}
|
|
<div className="mb-12">
|
|
<img
|
|
alt="supermemory"
|
|
className="h-16 mb-6 mx-auto"
|
|
src="https://assets.supermemory.ai/brand/wordmark/dark-transparent.svg"
|
|
/>
|
|
<p className="text-gray-600 text-lg font-normal max-w-2xl mx-auto">
|
|
Your AI second brain for saving and organizing everything that
|
|
matters. Supermemory learns and remembers everything you save, your
|
|
preferences, and understands you.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Features Section */}
|
|
<div className="mb-12">
|
|
<h2 className="text-2xl font-semibold text-black mb-8">
|
|
What can you do with supermemory ?
|
|
</h2>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
|
<div className="bg-white border border-gray-200 rounded-xl p-6 text-center transition-all duration-200 shadow-sm hover:-translate-y-0.5 hover:shadow-md hover:border-gray-300">
|
|
<div className="text-3xl mb-4 block">💾</div>
|
|
<h3 className="text-lg font-semibold text-black mb-3">
|
|
Save Any Page
|
|
</h3>
|
|
<p className="text-sm text-gray-600 leading-snug">
|
|
Instantly save web pages, articles, and content to your personal
|
|
knowledge base
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-white border border-gray-200 rounded-xl p-6 text-center transition-all duration-200 shadow-sm hover:-translate-y-0.5 hover:shadow-md hover:border-gray-300">
|
|
<div className="text-3xl mb-4 block">🐦</div>
|
|
<h3 className="text-lg font-semibold text-black mb-3">
|
|
Import Twitter/X Bookmarks
|
|
</h3>
|
|
<p className="text-sm text-gray-600 leading-snug">
|
|
Bring all your saved tweets and bookmarks into one organized
|
|
place
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-white border border-gray-200 rounded-xl p-6 text-center transition-all duration-200 shadow-sm hover:-translate-y-0.5 hover:shadow-md hover:border-gray-300">
|
|
<div className="text-3xl mb-4 block">🤖</div>
|
|
<h3 className="text-lg font-semibold text-black mb-3">
|
|
Import ChatGPT Memories
|
|
</h3>
|
|
<p className="text-sm text-gray-600 leading-snug">
|
|
Keep your important AI conversations and insights accessible
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-white border border-gray-200 rounded-xl p-6 text-center transition-all duration-200 shadow-sm hover:-translate-y-0.5 hover:shadow-md hover:border-gray-300">
|
|
<div className="text-3xl mb-4 block">🔍</div>
|
|
<h3 className="text-lg font-semibold text-black mb-3">
|
|
Your context, everywhere.
|
|
</h3>
|
|
<p className="text-sm text-gray-600 leading-snug">
|
|
You can connect chatbots with MCP, chat with your personal
|
|
assistant, and more.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="mb-8">
|
|
<button
|
|
className="min-w-[200px] px-8 py-4 bg-gray-700 text-white border-none rounded-3xl text-base font-semibold cursor-pointer transition-colors duration-200 mb-4 outline-none hover:bg-gray-800 disabled:bg-gray-400 disabled:cursor-not-allowed"
|
|
onClick={() => {
|
|
chrome.tabs.create({
|
|
url: import.meta.env.PROD
|
|
? "https://app.supermemory.ai/login"
|
|
: "http://localhost:3000/login",
|
|
})
|
|
}}
|
|
type="button"
|
|
>
|
|
Login to Get started
|
|
</button>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="border-t border-gray-200 pt-6 mt-8">
|
|
<p className="text-sm text-gray-600">
|
|
Learn more at{" "}
|
|
<a
|
|
className="text-blue-500 no-underline hover:underline hover:text-blue-700"
|
|
href="https://supermemory.ai"
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
>
|
|
supermemory.ai
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Welcome
|