Merge pull request #163 from aryasaatvik/pnpm

pnpm

10 files changed, 296 insertions, 288 deletions

diff --git a/apps/web/.eslintrc.js b/apps/web/.eslintrc.js
index 83d36d43..f3042174 100644
--- a/apps/web/.eslintrc.js
+++ b/apps/web/.eslintrc.js
@@ -6,4 +6,7 @@ module.exports = {
 	parserOptions: {
 		project: true,
 	},
+  ignorePatterns: [
+    "postcss.config.js",
+  ]
 };
diff --git a/apps/web/app/(auth)/layout.tsx b/apps/web/app/(auth)/layout.tsx
index 904d1987..8f45efbc 100644
--- a/apps/web/app/(auth)/layout.tsx
+++ b/apps/web/app/(auth)/layout.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
-import { Toaster } from '@repo/ui/shadcn/sonner';
+import React from "react";
+import { Toaster } from "@repo/ui/shadcn/sonner";
 
 function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <div>
-      {children} <Toaster />
-    </div>
-  );
+	return (
+		<div>
+			{children} <Toaster />
+		</div>
+	);
 }
 
 export default Layout;
diff --git a/apps/web/app/(auth)/onboarding/page.tsx b/apps/web/app/(auth)/onboarding/page.tsx
index 10dd2325..df5b83d6 100644
--- a/apps/web/app/(auth)/onboarding/page.tsx
+++ b/apps/web/app/(auth)/onboarding/page.tsx
@@ -10,7 +10,7 @@ import { CheckIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
 import { motion } from "framer-motion";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
-import { completeOnboarding, createMemory } from "@repo/web/app/actions/doers";
+import { completeOnboarding, createMemory } from "@/app/actions/doers";
 import { useRouter } from "next/navigation";
 import Logo from "../../../public/logo.svg";
 import Image from "next/image";
@@ -28,7 +28,9 @@ export default function Home() {
 		if (currStep > 3) {
 			updateDb().then(() => {
 				push("/home?q=what%20is%20supermemory");
-			});
+			}).catch((e) => {
+        console.error(e);
+      });
 		}
 	}, [currStep]);
 
diff --git a/apps/web/app/(dash)/home/filterSpaces.tsx b/apps/web/app/(dash)/home/filterSpaces.tsx
index 9896141c..ec90a29a 100644
--- a/apps/web/app/(dash)/home/filterSpaces.tsx
+++ b/apps/web/app/(dash)/home/filterSpaces.tsx
@@ -62,7 +62,9 @@ export function FilterSpaces({
 						placeholder={selectedSpaces.length ? "" : "Search in Spaces"}
 						onKeyDown={handleKeyDown}
 						className="text-white peer placeholder:text-white"
-						onChangeCapture={(e) => setInput(e.currentTarget.value)}
+						onChangeCapture={(e: React.ChangeEvent<HTMLInputElement>) =>
+							setInput(e.target.value)
+						}
 						value={input}
 					/>
 				</div>
diff --git a/apps/web/app/(landing)/Features/generating.tsx b/apps/web/app/(landing)/Features/generating.tsx
index 6dd0b231..0efdde41 100644
--- a/apps/web/app/(landing)/Features/generating.tsx
+++ b/apps/web/app/(landing)/Features/generating.tsx
@@ -1,16 +1,16 @@
 import { Loader, Loader2 } from "lucide-react";
 
 const Generating = ({ className }: { className?: string }) => {
-  return (
-    <div
-      className={`flex items-center md:h-[3.5rem] px-6 bg-n-8/80 rounded-[1.7rem] ${
-        className || ""
-      } text-base`}
-    >
-      <Loader2 className="w-5 h-5 mr-2" />
-      Searching your second brain...
-    </div>
-  );
+	return (
+		<div
+			className={`flex items-center md:h-[3.5rem] px-6 bg-n-8/80 rounded-[1.7rem] ${
+				className || ""
+			} text-base`}
+		>
+			<Loader2 className="w-5 h-5 mr-2" />
+			Searching your second brain...
+		</div>
+	);
 };
 
 export default Generating;
diff --git a/apps/web/app/(landing)/Features/index.tsx b/apps/web/app/(landing)/Features/index.tsx
index 7f1a4ccb..cc307374 100644
--- a/apps/web/app/(landing)/Features/index.tsx
+++ b/apps/web/app/(landing)/Features/index.tsx
@@ -5,219 +5,219 @@ import Image from "next/image";
 import { AnimatedBeamShow } from "../CardPatterns/AnimatedBeamWithOutput";
 
 const Services = () => {
-  return (
-    <div id="how-to-use">
-      <div className="container">
-        <div className="mr-auto max-w-5xl">
-          <h1 className="mr-auto text-left font-geistSans tracking-tighter text-4xl md:text-5xl lg:text-6xl text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]">
-            Sounds super cool? There's more.
-          </h1>
-          <p className="mb-10 ml-auto text-lg tracking-tight text-left font-nomral"></p>
-        </div>
-
-        <div className="relative bg-page-gradient">
-          <div className="flex overflow-hidden relative items-stretch p-8 mb-5 rounded-3xl border lg:p-20 z-1 h-[55rem] md:h-[45rem] border-white/20 xl:h-[46rem]">
-            <img
-              src="/images/tailwind-bg-gradient.avif"
-              className="absolute top-0 right-0 opacity-100 z-2"
-            />
-            <img
-              src="/images/tailwind-bg-gradient.avif"
-              className="absolute top-0 right-0 opacity-100 z-2"
-            />
-            <div className="absolute top-0 left-0 w-full h-full md:w-3/5 xl:w-auto">
-              <img
-                className="object-cover w-full h-full md:object-right"
-                width={800}
-                alt="Smartest AI"
-                height={730}
-                src={"/images/service-1.png"}
-              />
-            </div>
-
-            <div className="relative ml-auto z-1 max-w-[17rem]">
-              <h4 className="mb-4 text-3xl md:text-4xl">
-                We paid attention to details.
-              </h4>
-              <p className="body-2 mb-[3rem] text-n-3">
-                a small team of 4 student developers who have one mission.{" "}
-                <br />
-                Make the best second brain for everyone.
-              </p>
-              <ul className="text-lg">
-                {supermemoryPoints.map((item, index) => (
-                  <li
-                    key={index}
-                    className="flex items-start py-4 border-t border-white/20"
-                  >
-                    <CheckIcon className="inline-flex justify-center items-center mt-2 ml-2 w-4 h-4 rounded-full text-slate-200 size-4" />
-                    {/* <img width={24} height={24} src={check} /> */}
-                    <p className="ml-4">{item}</p>
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            <Generating className="absolute right-4 bottom-4 left-4 border lg:bottom-8 lg-right-auto lg:left-1/2 lg:-translate-x-1/2 border-n-1/10" />
-          </div>
-
-          <div className="grid relative gap-5 lg:grid-cols-2 z-1">
-            <div className="overflow-hidden flex flex-col md:flex-row md:block relative rounded-3xl border min-h-[34rem] bg-hero-gradient bg-slate-950/10 border-white/10">
-              <div className="md:absolute inset-0">
-                <div className="absolute -z-1 inset-0  h-[600px] w-full bg-transparent opacity-5 bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>
-
-                <Image
-                  src="/images/landing_integrations.png"
-                  className="object-contain w-full h-full"
-                  width={630}
-                  height={750}
-                  alt="robot"
-                />
-              </div>
-
-              <div className="flex md:absolute md:mt-4 lg:-mt-20 inset-0 flex-col md:justify-end justify-center items-center md:items-start p-8 bg-glass-gradient">
-                <h4 className="text-3xl tracking-tight mb-2 text-center text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]">
-                  Supermemory works everywhere you are.
-                </h4>
-                <p className="max-w-lg text-lg font-normal tracking-tighter text-gray-400 mb-[3rem]">
-                  We already have integrations for Telegram and Twitter (X),
-                  with whatsapp and SMS coming soon. So you can add and query
-                  data in a private manner, from anywhere.
-                </p>
-                <a
-                  href="/signin"
-                  className="inline-flex justify-center items-center py-4 px-10 w-full text-center bg-transparent bg-gradient-to-tr to-transparent rounded-xl transition-colors sm:w-auto mt-[-20px] bg-glass-gradient group from-zinc-300/5 via-gray-400/5 border-white/10 border-[1px] hover:bg-transparent/10"
-                >
-                  Get started
-                  <ChevronRight className="ml-2 w-4 h-4 duration-300 group-hover:translate-x-1" />
-                </a>
-              </div>
-            </div>
-
-            <div
-              style={{
-                background:
-                  "linear-gradient(143.6deg, rgba(192, 132, 252, 0) 20.79%, rgba(140, 121, 249, 0.3) 60.92%, rgba(140, 121, 249, 0) 80.35%)",
-              }}
-              className="overflow-hidden relative py-4 rounded-3xl group bg-glass-gradient lg:min-h-[30rem]"
-            >
-              <div className="relative py-12 px-4 xl:px-8">
-                <h4 className="text-3xl tracking-tight mb-2 text-left text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]">
-                  Privacy First
-                </h4>
-                <p className="text-lg text-gray-400 body-2 mb-[2rem]">
-                  We use state-of-the art technology and providers to make sure
-                  that your data is completely safe and secure, and only store
-                  what's absolutely needed.
-                </p>
-              </div>
-
-              <div className="overflow-hidden relative rounded-xl h-[20rem] md:h-[25rem]">
-                <img
-                  src={"/images/landing_vault.png"}
-                  className="object-cover w-full h-full transition-all duration-500 ease-linear transform group-hover:rotate-3"
-                  width={520}
-                  height={400}
-                  alt="vault image"
-                />
-              </div>
-
-              <Gradient opacity={5} />
-            </div>
-          </div>
-
-          <div
-            style={{
-              background:
-                "linear-gradient(143.6deg, rgba(192, 132, 252, 0) 20.79%, rgba(140, 121, 249, 0.2) 40.92%, rgba(140, 121, 249, 0) 80.35%)",
-            }}
-            className="flex overflow-hidden relative items-center p-8 mt-5 mb-5 rounded-3xl border lg:p-20 bg-page-gradient z-1 h-[38rem] border-white/20 xl:h-[28rem] dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset]"
-          >
-            <img
-              src="/images/tailwind-bg-gradient.avif"
-              className="absolute top-0 right-0 opacity-60 z-2"
-            />
-
-            <div className="absolute top-0 right-0 left-0 mx-auto w-full h-full xl:w-auto">
-              <img
-                className="object-cover z-40 w-full h-full border-r-2 md:scale-110 border-r-white/5"
-                width={800}
-                alt="Github"
-                height={730}
-                src={"/images/github.webp"}
-              />
-            </div>
-
-            <div className="absolute right-0 left-0 bottom-5 mx-auto mt-20 text-center z-1 p-8">
-              <h4 className="mb-4 text-4xl tracking-tighter text-white lg:text-5xl">
-                Proudly <br /> Open Source
-              </h4>
-              <p className="text-lg body-2 mb-[3rem] ">
-                You dont even need to trust us. Just deploy it yourself and
-                enjoy the benefits.
-              </p>
-              <a
-                href="https://git.new/memory"
-                className="inline-flex gap-x-1 justify-center items-center py-4 px-10 text-center bg-transparent bg-gradient-to-tr to-transparent rounded-xl transition-colors sm:w-auto w-fit mt-[-20px] bg-glass-gradient group from-zinc-300/5 via-gray-400/5 border-white/10 border-[1px] hover:bg-transparent/10"
-              >
-                <GithubIcon className="inline-flex justify-center items-center w-5 h-5" />{" "}
-                Star us on Github
-                <ChevronRight className="ml-2 w-4 h-4 duration-300 group-hover:translate-x-1" />
-              </a>
-            </div>
-          </div>
-
-          <div className="grid relative gap-5 lg:grid-cols-2 z-1">
-            <div className="overflow-hidden relative rounded-3xl border max-h-[20rem] min-h-[40rem] md:min-h-[33rem] bg-hero-gradient bg-slate-950/10 border-white/10">
-              <div className="absolute inset-0">
-                <AnimatedBeamShow />
-              </div>
-
-              <div className="flex absolute inset-0 flex-col justify-end items-start p-8 pl-10 mt-4 lg:-mt-20 translate-y-10 md:translate-y-0 bg-glass-gradient">
-                <h4 className="text-3xl tracking-tight mb-2 text-center text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]">
-                  Bringing content in is easy.
-                </h4>
-                <p className="max-w-lg text-lg font-normal tracking-tighter text-gray-400 mb-[3rem]">
-                  You can use our chrome extension, iOS shortcut, or our API to
-                  send content to supermemory.
-                </p>
-              </div>
-            </div>
-
-            <div className="overflow-hidden bg-page-gradient relative py-4 rounded-3xl max-h-[33rem] group  lg:min-h-[30rem]">
-              <div className="absolute -z-1 inset-0  h-[600px] w-full bg-transparent opacity-5 bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>
-
-              <div className="relative py-12 px-4 xl:px-8">
-                <h4 className="text-3xl tracking-tight mb-2 text-left text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]">
-                  Self hostable
-                </h4>
-                <p className="text-lg text-gray-400 body-2 mb-[2rem]">
-                  All the code is open source and self hostable for
-                  non-commercial use.
-                </p>
-              </div>
-
-              <div className="overflow-hidden relative mt-[-50px]  mb-10 rounded-xl h-[20rem] md:h-[25rem]">
-                <img
-                  src={
-                    "https://www.koyeb.com/_next/image?url=%2Fimages%2Fillustrations%2Fhome-scale-mesh.webp&w=384&q=75"
-                  }
-                  className="object-cover w-full h-full transition-all duration-500 ease-linear transform group-hover:rotate-3"
-                  width={1000}
-                  height={1000}
-                  alt="Scary robot"
-                />
-              </div>
-
-              <Gradient opacity={5} />
-            </div>
-          </div>
-
-          <Gradient />
-        </div>
-      </div>
-    </div>
-  );
+	return (
+		<div id="how-to-use">
+			<div className="container">
+				<div className="mr-auto max-w-5xl">
+					<h1 className="mr-auto text-left font-geistSans tracking-tighter text-4xl md:text-5xl lg:text-6xl text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]">
+						Sounds super cool? There's more.
+					</h1>
+					<p className="mb-10 ml-auto text-lg tracking-tight text-left font-nomral"></p>
+				</div>
+
+				<div className="relative bg-page-gradient">
+					<div className="flex overflow-hidden relative items-stretch p-8 mb-5 rounded-3xl border lg:p-20 z-1 h-[55rem] md:h-[45rem] border-white/20 xl:h-[46rem]">
+						<img
+							src="/images/tailwind-bg-gradient.avif"
+							className="absolute top-0 right-0 opacity-100 z-2"
+						/>
+						<img
+							src="/images/tailwind-bg-gradient.avif"
+							className="absolute top-0 right-0 opacity-100 z-2"
+						/>
+						<div className="absolute top-0 left-0 w-full h-full md:w-3/5 xl:w-auto">
+							<img
+								className="object-cover w-full h-full md:object-right"
+								width={800}
+								alt="Smartest AI"
+								height={730}
+								src={"/images/service-1.png"}
+							/>
+						</div>
+
+						<div className="relative ml-auto z-1 max-w-[17rem]">
+							<h4 className="mb-4 text-3xl md:text-4xl">
+								We paid attention to details.
+							</h4>
+							<p className="body-2 mb-[3rem] text-n-3">
+								a small team of 4 student developers who have one mission.{" "}
+								<br />
+								Make the best second brain for everyone.
+							</p>
+							<ul className="text-lg">
+								{supermemoryPoints.map((item, index) => (
+									<li
+										key={index}
+										className="flex items-start py-4 border-t border-white/20"
+									>
+										<CheckIcon className="inline-flex justify-center items-center mt-2 ml-2 w-4 h-4 rounded-full text-slate-200 size-4" />
+										{/* <img width={24} height={24} src={check} /> */}
+										<p className="ml-4">{item}</p>
+									</li>
+								))}
+							</ul>
+						</div>
+
+						<Generating className="absolute right-4 bottom-4 left-4 border lg:bottom-8 lg-right-auto lg:left-1/2 lg:-translate-x-1/2 border-n-1/10" />
+					</div>
+
+					<div className="grid relative gap-5 lg:grid-cols-2 z-1">
+						<div className="overflow-hidden flex flex-col md:flex-row md:block relative rounded-3xl border min-h-[34rem] bg-hero-gradient bg-slate-950/10 border-white/10">
+							<div className="md:absolute inset-0">
+								<div className="absolute -z-1 inset-0  h-[600px] w-full bg-transparent opacity-5 bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>
+
+								<Image
+									src="/images/landing_integrations.png"
+									className="object-contain w-full h-full"
+									width={630}
+									height={750}
+									alt="robot"
+								/>
+							</div>
+
+							<div className="flex md:absolute md:mt-4 lg:-mt-20 inset-0 flex-col md:justify-end justify-center items-center md:items-start p-8 bg-glass-gradient">
+								<h4 className="text-3xl tracking-tight mb-2 text-center text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]">
+									Supermemory works everywhere you are.
+								</h4>
+								<p className="max-w-lg text-lg font-normal tracking-tighter text-gray-400 mb-[3rem]">
+									We already have integrations for Telegram and Twitter (X),
+									with whatsapp and SMS coming soon. So you can add and query
+									data in a private manner, from anywhere.
+								</p>
+								<a
+									href="/signin"
+									className="inline-flex justify-center items-center py-4 px-10 w-full text-center bg-transparent bg-gradient-to-tr to-transparent rounded-xl transition-colors sm:w-auto mt-[-20px] bg-glass-gradient group from-zinc-300/5 via-gray-400/5 border-white/10 border-[1px] hover:bg-transparent/10"
+								>
+									Get started
+									<ChevronRight className="ml-2 w-4 h-4 duration-300 group-hover:translate-x-1" />
+								</a>
+							</div>
+						</div>
+
+						<div
+							style={{
+								background:
+									"linear-gradient(143.6deg, rgba(192, 132, 252, 0) 20.79%, rgba(140, 121, 249, 0.3) 60.92%, rgba(140, 121, 249, 0) 80.35%)",
+							}}
+							className="overflow-hidden relative py-4 rounded-3xl group bg-glass-gradient lg:min-h-[30rem]"
+						>
+							<div className="relative py-12 px-4 xl:px-8">
+								<h4 className="text-3xl tracking-tight mb-2 text-left text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]">
+									Privacy First
+								</h4>
+								<p className="text-lg text-gray-400 body-2 mb-[2rem]">
+									We use state-of-the art technology and providers to make sure
+									that your data is completely safe and secure, and only store
+									what's absolutely needed.
+								</p>
+							</div>
+
+							<div className="overflow-hidden relative rounded-xl h-[20rem] md:h-[25rem]">
+								<img
+									src={"/images/landing_vault.png"}
+									className="object-cover w-full h-full transition-all duration-500 ease-linear transform group-hover:rotate-3"
+									width={520}
+									height={400}
+									alt="vault image"
+								/>
+							</div>
+
+							<Gradient opacity={5} />
+						</div>
+					</div>
+
+					<div
+						style={{
+							background:
+								"linear-gradient(143.6deg, rgba(192, 132, 252, 0) 20.79%, rgba(140, 121, 249, 0.2) 40.92%, rgba(140, 121, 249, 0) 80.35%)",
+						}}
+						className="flex overflow-hidden relative items-center p-8 mt-5 mb-5 rounded-3xl border lg:p-20 bg-page-gradient z-1 h-[38rem] border-white/20 xl:h-[28rem] dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset]"
+					>
+						<img
+							src="/images/tailwind-bg-gradient.avif"
+							className="absolute top-0 right-0 opacity-60 z-2"
+						/>
+
+						<div className="absolute top-0 right-0 left-0 mx-auto w-full h-full xl:w-auto">
+							<img
+								className="object-cover z-40 w-full h-full border-r-2 md:scale-110 border-r-white/5"
+								width={800}
+								alt="Github"
+								height={730}
+								src={"/images/github.webp"}
+							/>
+						</div>
+
+						<div className="absolute right-0 left-0 bottom-5 mx-auto mt-20 text-center z-1 p-8">
+							<h4 className="mb-4 text-4xl tracking-tighter text-white lg:text-5xl">
+								Proudly <br /> Open Source
+							</h4>
+							<p className="text-lg body-2 mb-[3rem] ">
+								You dont even need to trust us. Just deploy it yourself and
+								enjoy the benefits.
+							</p>
+							<a
+								href="https://git.new/memory"
+								className="inline-flex gap-x-1 justify-center items-center py-4 px-10 text-center bg-transparent bg-gradient-to-tr to-transparent rounded-xl transition-colors sm:w-auto w-fit mt-[-20px] bg-glass-gradient group from-zinc-300/5 via-gray-400/5 border-white/10 border-[1px] hover:bg-transparent/10"
+							>
+								<GithubIcon className="inline-flex justify-center items-center w-5 h-5" />{" "}
+								Star us on Github
+								<ChevronRight className="ml-2 w-4 h-4 duration-300 group-hover:translate-x-1" />
+							</a>
+						</div>
+					</div>
+
+					<div className="grid relative gap-5 lg:grid-cols-2 z-1">
+						<div className="overflow-hidden relative rounded-3xl border max-h-[20rem] min-h-[40rem] md:min-h-[33rem] bg-hero-gradient bg-slate-950/10 border-white/10">
+							<div className="absolute inset-0">
+								<AnimatedBeamShow />
+							</div>
+
+							<div className="flex absolute inset-0 flex-col justify-end items-start p-8 pl-10 mt-4 lg:-mt-20 translate-y-10 md:translate-y-0 bg-glass-gradient">
+								<h4 className="text-3xl tracking-tight mb-2 text-center text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]">
+									Bringing content in is easy.
+								</h4>
+								<p className="max-w-lg text-lg font-normal tracking-tighter text-gray-400 mb-[3rem]">
+									You can use our chrome extension, iOS shortcut, or our API to
+									send content to supermemory.
+								</p>
+							</div>
+						</div>
+
+						<div className="overflow-hidden bg-page-gradient relative py-4 rounded-3xl max-h-[33rem] group  lg:min-h-[30rem]">
+							<div className="absolute -z-1 inset-0  h-[600px] w-full bg-transparent opacity-5 bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>
+
+							<div className="relative py-12 px-4 xl:px-8">
+								<h4 className="text-3xl tracking-tight mb-2 text-left text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]">
+									Self hostable
+								</h4>
+								<p className="text-lg text-gray-400 body-2 mb-[2rem]">
+									All the code is open source and self hostable for
+									non-commercial use.
+								</p>
+							</div>
+
+							<div className="overflow-hidden relative mt-[-50px]  mb-10 rounded-xl h-[20rem] md:h-[25rem]">
+								<img
+									src={
+										"https://www.koyeb.com/_next/image?url=%2Fimages%2Fillustrations%2Fhome-scale-mesh.webp&w=384&q=75"
+									}
+									className="object-cover w-full h-full transition-all duration-500 ease-linear transform group-hover:rotate-3"
+									width={1000}
+									height={1000}
+									alt="Scary robot"
+								/>
+							</div>
+
+							<Gradient opacity={5} />
+						</div>
+					</div>
+
+					<Gradient />
+				</div>
+			</div>
+		</div>
+	);
 };
 
 export default Services;
diff --git a/apps/web/app/(landing)/Showcase.tsx b/apps/web/app/(landing)/Showcase.tsx
index 36cbf0c3..e4c5b7af 100644
--- a/apps/web/app/(landing)/Showcase.tsx
+++ b/apps/web/app/(landing)/Showcase.tsx
@@ -148,26 +148,26 @@ function Feature({
 }
 
 function FeaturesMobile() {
-  return (
-    <div className="-mx-4 mt-20 flex flex-col gap-y-10 overflow-hidden px-4 sm:-mx-6 sm:px-6 lg:hidden">
-      {features.map((feature) => (
-        <div key={feature.summary}>
-          <Feature feature={feature} className="mx-auto max-w-2xl" isActive />
-          <div className="relative mt-10 pb-10">
-            <div className="absolute -inset-x-4 bottom-0 top-8 bg-page-gradient sm:-inset-x-6" />
-            <div className="relative mx-auto lg:w-[52.75rem] md:w-[40rem] overflow-hidden rounded-xl bg-glass-gradient shadow-lg shadow-gray-200/5 ring-1 ring-slate-500/10">
-              <img
-                className="w-full"
-                src={`/images/${feature.image}`}
-                alt=""
-                sizes="52.75rem"
-              />
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
+	return (
+		<div className="-mx-4 mt-20 flex flex-col gap-y-10 overflow-hidden px-4 sm:-mx-6 sm:px-6 lg:hidden">
+			{features.map((feature) => (
+				<div key={feature.summary}>
+					<Feature feature={feature} className="mx-auto max-w-2xl" isActive />
+					<div className="relative mt-10 pb-10">
+						<div className="absolute -inset-x-4 bottom-0 top-8 bg-page-gradient sm:-inset-x-6" />
+						<div className="relative mx-auto lg:w-[52.75rem] md:w-[40rem] overflow-hidden rounded-xl bg-glass-gradient shadow-lg shadow-gray-200/5 ring-1 ring-slate-500/10">
+							<img
+								className="w-full"
+								src={`/images/${feature.image}`}
+								alt=""
+								sizes="52.75rem"
+							/>
+						</div>
+					</div>
+				</div>
+			))}
+		</div>
+	);
 }
 
 function FeaturesDesktop() {
diff --git a/apps/web/app/actions/doers.ts b/apps/web/app/actions/doers.ts
index da2bfb5f..ff0ed5d9 100644
--- a/apps/web/app/actions/doers.ts
+++ b/apps/web/app/actions/doers.ts
@@ -324,7 +324,7 @@ export const createMemory = async (input: {
 		};
 	}
 
-	let contentId: number | undefined;
+	let contentId: number;
 
 	const response = (await vectorSaveResponse.json()) as {
 		status: string;
@@ -381,6 +381,14 @@ export const createMemory = async (input: {
 		revalidatePath("/memories");
 		revalidatePath("/home");
 
+		if (!insertResponse[0]?.id) {
+			return {
+				success: false,
+				data: 0,
+				error: "Something went wrong while saving the document to the database",
+			};
+		}
+
 		contentId = insertResponse[0]?.id;
 	} catch (e) {
 		const error = e as Error;
@@ -405,14 +413,6 @@ export const createMemory = async (input: {
 		};
 	}
 
-	if (!contentId) {
-		return {
-			success: false,
-			data: 0,
-			error: "Something went wrong while saving the document to the database",
-		};
-	}
-
 	if (storeToSpaces.length > 0) {
 		// Adding the many-to-many relationship between content and spaces
 		const spaceData = await db
diff --git a/apps/web/app/api/store/route.ts b/apps/web/app/api/store/route.ts
index 992c2a0e..13cef19e 100644
--- a/apps/web/app/api/store/route.ts
+++ b/apps/web/app/api/store/route.ts
@@ -75,7 +75,7 @@ const createMemoryFromAPI = async (input: {
 		};
 	}
 
-	let contentId: number | undefined;
+	let contentId: number;
 
 	const saveToDbUrl =
 		(input.data.url.split("#supermemory-user-")[0] ?? input.data.url) +
@@ -102,7 +102,15 @@ const createMemoryFromAPI = async (input: {
 			})
 			.returning({ id: storedContent.id });
 
-		contentId = insertResponse[0]?.id;
+		if (!insertResponse[0]?.id) {
+			return {
+				success: false,
+				data: 0,
+				error: "Failed to save to database",
+			};
+		}
+
+		contentId = insertResponse[0].id;
 	} catch (e) {
 		const error = e as Error;
 		console.log("Error: ", error.message);
@@ -122,14 +130,6 @@ const createMemoryFromAPI = async (input: {
 		};
 	}
 
-	if (!contentId) {
-		return {
-			success: false,
-			data: 0,
-			error: "Failed to save to database",
-		};
-	}
-
 	if (input.data.spaces.length > 0) {
 		// Adding the many-to-many relationship between content and spaces
 		const spaceData = await db
diff --git a/apps/web/package.json b/apps/web/package.json
index 7d97fe7c..98016d8c 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -2,26 +2,28 @@
 	"name": "@repo/web",
 	"version": "1.0.0",
 	"private": true,
-	"packageManager": "[email protected]",
 	"scripts": {
 		"dev": "next dev",
 		"build": "next build",
 		"start": "next start",
 		"lint": "eslint . --max-warnings 0",
+		"tsc": "tsc --noEmit --incremental",
 		"cf-typegen": "wrangler types --env-interface CloudflareEnv env.d.ts",
-		"pages:build": "npx @cloudflare/next-on-pages",
-		"preview": "npm run pages:build && wrangler pages dev",
-		"deploy": "npm run pages:build && wrangler pages deploy --branch main",
-		"schema-update": "bunx drizzle-kit generate sqlite",
-		"update-local-db": "bunx wrangler d1 execute dev-d1-anycontext --local",
-		"update-prod-db": "bunx wrangler d1 execute prod-d1-supermemory --remote"
+		"pages:build": "pnpm dlx @cloudflare/next-on-pages",
+		"preview": "pnpm run pages:build && wrangler pages dev",
+		"deploy": "pnpm run pages:build && wrangler pages deploy --branch main",
+		"schema-update": "drizzle-kit generate sqlite",
+		"update-local-db": "wrangler d1 execute dev-d1-anycontext --local",
+		"update-prod-db": "wrangler d1 execute prod-d1-supermemory --remote"
 	},
 	"dependencies": {
 		"@radix-ui/react-dialog": "^1.0.5",
 		"@radix-ui/react-popover": "^1.0.7",
 		"@radix-ui/react-slot": "^1.1.0",
 		"@sentry/nextjs": "^8",
+		"clsx": "^2.1.1",
 		"cmdk": "^1.0.0",
+		"drizzle-orm": "0.30.0",
 		"lowlight": "^3.1.0",
 		"million": "^3.1.6",
 		"next": "^14.1.1",
@@ -33,21 +35,20 @@
 		"use-debounce": "^10.0.1"
 	},
 	"devDependencies": {
+		"@cloudflare/next-on-pages": "1",
 		"@next/eslint-plugin-next": "^14.1.1",
 		"@repo/eslint-config": "*",
-		"@repo/typescript-config": "*",
-		"@repo/tailwind-config": "*",
 		"@repo/shared-types": "*",
+		"@repo/tailwind-config": "*",
+		"@repo/typescript-config": "*",
 		"@types/eslint": "^8.56.5",
 		"@types/node": "^20.11.24",
 		"@types/react": "^18.2.61",
 		"@types/react-dom": "^18.2.19",
+		"drizzle-kit": "0.21.2",
 		"eslint": "^8.57.0",
-		"typescript": "^5.3.3"
-	},
-	"trustedDependencies": [
-		"esbuild",
-		"workerd",
-		"xycolors"
-	]
+		"postcss": "^8.4.38",
+		"typescript": "^5.3.3",
+		"wrangler": "^3.66.0"
+	}
 }