design improvement

2 files changed, 39 insertions, 1 deletions

diff --git a/apps/web/app/(dash)/home/page.tsx b/apps/web/app/(dash)/home/page.tsx
index aabb4d80..12e3bad8 100644
--- a/apps/web/app/(dash)/home/page.tsx
+++ b/apps/web/app/(dash)/home/page.tsx
@@ -8,6 +8,21 @@ import { useRouter } from "next/navigation";
 import { createChatThread, linkTelegramToUser } from "@/app/actions/doers";
 import { toast } from "sonner";
 import { useSession } from "next-auth/react";
+import { motion } from "framer-motion";
+import BackgroundPlus from "@/app/(landing)/GridPatterns/PlusGrid";
+
+const slap = {
+  initial: {
+    opacity: 0,
+    scale: 1.1,
+  },
+  whileInView: { opacity: 1, scale: 1 },
+  transition: {
+    duration: 0.5,
+    ease: "easeInOut",
+  },
+  viewport: { once: true },
+};
 
 function Page({
   searchParams,
@@ -54,7 +69,29 @@ function Page({
       {/* all content goes here */}
       {/* <div className="">hi {firstTime ? 'first time' : ''}</div> */}
 
-      <div className="w-full pb-20">
+      <div className="relative z-20 pointer-events-none">
+        <div
+          className="absolute -z-10 left-0 top-[10%] h-32 w-[90%] overflow-x-hidden bg-[rgb(54,157,253)] bg-opacity-100  blur-[337.4px]"
+          style={{ transform: "rotate(-30deg)" }}
+        />
+      </div>
+
+      <BackgroundPlus className="absolute top-0 left-0 w-full h-full -z-50" />
+
+      <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"
+      >
+        Unlock your{" "}
+        <span className="text-transparent italic bg-clip-text bg-gradient-to-r to-blue-200 from-zinc-300">
+          digital brain
+        </span>
+      </motion.h1>
+
+      <div className="w-full pb-20 mt-12">
         <QueryInput
           handleSubmit={async (q, spaces) => {
             if (q.length === 0) {
diff --git a/apps/web/app/(dash)/home/queryinput.tsx b/apps/web/app/(dash)/home/queryinput.tsx
index 3c944c05..697dc7f9 100644
--- a/apps/web/app/(dash)/home/queryinput.tsx
+++ b/apps/web/app/(dash)/home/queryinput.tsx
@@ -73,6 +73,7 @@ function QueryInput({
           className="flex gap-4 p-3"
         >
           <textarea
+            autoFocus
             name="q"
             cols={30}
             rows={mini ? 2 : 4}