home page style

4 files changed, 21 insertions, 12 deletions

diff --git a/apps/web/app/(auth)/onboarding/page.tsx b/apps/web/app/(auth)/onboarding/page.tsx
index df5b83d6..5b728928 100644
--- a/apps/web/app/(auth)/onboarding/page.tsx
+++ b/apps/web/app/(auth)/onboarding/page.tsx
@@ -49,7 +49,7 @@ export default function Home() {
 			<Navbar />
 
 			{/* main-content */}
-			<div className="w-full max-w-3xl p-4 flex flex-col items-center justify-center mx-auto mt-24">
+			<div className="w-full max-w-3xl p-4 flex flex-col items-center justify-center mx-auto pt-24">
 				{currStep === 0 && (
 					<div className="text-white space-y-3 flex flex-col gap-16 w-full">
 						<h1 className="text-3xl md:text-5xl tracking-tighter">
diff --git a/apps/web/app/(dash)/home/filterSpaces.tsx b/apps/web/app/(dash)/home/filterSpaces.tsx
index ec90a29a..80c05288 100644
--- a/apps/web/app/(dash)/home/filterSpaces.tsx
+++ b/apps/web/app/(dash)/home/filterSpaces.tsx
@@ -53,7 +53,7 @@ export function FilterSpaces({
 			</div>
 			<Command
 				className={`group transition-all border-0 text-white outline-0 ${
-					selectedSpaces.length ? "w-5 hover:w-24 focus-within:w-20" : "w-44"
+					selectedSpaces.length ? "w-12 hover:w-24 focus-within:w-28" : "w-44"
 				}`}
 			>
 				<div className="relative flex items-center">
diff --git a/apps/web/app/(dash)/home/page.tsx b/apps/web/app/(dash)/home/page.tsx
index d192d07d..0545d1ff 100644
--- a/apps/web/app/(dash)/home/page.tsx
+++ b/apps/web/app/(dash)/home/page.tsx
@@ -70,18 +70,25 @@ function Page({ searchParams }: { searchParams: Record<string, string> }) {
 	}, [telegramUser]);
 
 	return (
-		<div className="max-w-3xl h-full justify-center flex mx-auto w-full flex-col px-2 md:px-0">
+		<div className="max-w-3xl h-full pt-[25vh] mx-auto w-full px-2 md:px-0">
 			<motion.h1
 				{...{
 					...slap,
 					transition: { ...slap.transition, delay: 0.2 },
 				}}
-				className="text-center mx-auto bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]  bg-clip-text text-4xl tracking-tighter   text-transparent md:text-5xl pb-2"
 			>
-				<span>Ask your</span>{" "}
-				<span className="inline-flex items-center gap-2 bg-gradient-to-r to-blue-300 from-zinc-300 text-transparent bg-clip-text">
-					supermemory
-				</span>
+				<motion.h1
+					className="text-center mx-auto bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]  bg-clip-text text-4xl tracking-tighter   text-transparent md:text-5xl"
+					animate={{
+						opacity: query.length ? 0 : 1,
+						translateY: query.length ? "10px" : "0px",
+					}}
+				>
+					<span>Ask your</span>{" "}
+					<span className="inline-flex items-center gap-2 bg-gradient-to-r to-blue-300 from-zinc-300 text-transparent bg-clip-text">
+						supermemory
+					</span>
+				</motion.h1>
 			</motion.h1>
 
 			<div className="w-full pb-20 mt-10">
@@ -108,7 +115,9 @@ function Page({ searchParams }: { searchParams: Record<string, string> }) {
 					initialSpaces={spaces}
 				/>
 
-				<History setQuery={setQuery} />
+				<motion.div animate={{ opacity: query.length ? 0 : 1 }}>
+					<History setQuery={setQuery} />
+				</motion.div>
 			</div>
 
 			<div className="w-full fixed bottom-0 left-0 p-4">
diff --git a/apps/web/app/(dash)/home/queryinput.tsx b/apps/web/app/(dash)/home/queryinput.tsx
index 82561438..995fea53 100644
--- a/apps/web/app/(dash)/home/queryinput.tsx
+++ b/apps/web/app/(dash)/home/queryinput.tsx
@@ -52,7 +52,7 @@ function QueryInput({
 						name="q"
 						cols={30}
 						rows={3}
-						className="bg-transparent text-lg placeholder:text-[#9B9B9B] text-gray-200 tracking-[3%] outline-none resize-none w-full p-7"
+						className={`bg-transparent text-lg placeholder:text-[#9B9B9B] text-gray-200 tracking-[3%] outline-none resize-none w-full py-4 px-4 h-32 transition-[height] ${query.length > 0 && "h-40"}`}
 						placeholder="Ask your second brain..."
 						onKeyDown={(e) => {
 							if (e.key === "Enter" && !e.shiftKey) {
@@ -74,8 +74,8 @@ function QueryInput({
 							initialSpaces={initialSpaces || []}
 						/>
 						<div className="flex items-center gap-4">
-							<div className="flex items-center gap-2">
-								<Label htmlFor="pro-mode" className="text-sm text-[#9B9B9B]">
+							<div className="flex items-center gap-2 p-2 rounded-lg bg-[#369DFD1A]">
+								<Label htmlFor="pro-mode" className="text-sm">
 									Pro mode
 								</Label>
 								<Switch