home page style

This commit is contained in:
codetorso 2024-07-28 05:16:22 +05:30
parent e5f26d894a
commit a7e8a1e876
5 changed files with 22 additions and 13 deletions

View file

@ -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">

View file

@ -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">

View file

@ -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">

View file

@ -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