more tweaks

7 files changed, 88 insertions, 23 deletions

diff --git a/apps/web/app/(dash)/home/homeVariants.ts b/apps/web/app/(dash)/home/homeVariants.ts
new file mode 100644
index 00000000..ec24e22b
--- /dev/null
+++ b/apps/web/app/(dash)/home/homeVariants.ts
@@ -0,0 +1,50 @@
+export const variants = [
+  [
+    {
+      type: "text",
+      content: "Unlock your",
+    },
+    {
+      type: "highlighted",
+      content: " digital brain",
+    },
+  ],
+  [
+    {
+      type: "text",
+      content: "Save",
+    },
+    {
+      type: "highlighted",
+      content: " everything.",
+    },
+    {
+      type: "text",
+      content: " Connect",
+    },
+    {
+      type: "highlighted",
+      content: " anything.",
+    },
+  ],
+  [
+    {
+      type: "text",
+      content: "Turn your bookmarks into",
+    },
+    {
+      type: "highlighted",
+      content: " insights.",
+    },
+  ],
+  [
+    {
+      type: "text",
+      content: "The smart way to use your",
+    },
+    {
+      type: "highlighted",
+      content: " digital treasures.",
+    },
+  ],
+];
diff --git a/apps/web/app/(dash)/home/page.tsx b/apps/web/app/(dash)/home/page.tsx
index 12e3bad8..4f7e4af6 100644
--- a/apps/web/app/(dash)/home/page.tsx
+++ b/apps/web/app/(dash)/home/page.tsx
@@ -10,6 +10,7 @@ import { toast } from "sonner";
 import { useSession } from "next-auth/react";
 import { motion } from "framer-motion";
 import BackgroundPlus from "@/app/(landing)/GridPatterns/PlusGrid";
+import { variants } from "./homeVariants";
 
 const slap = {
   initial: {
@@ -40,6 +41,8 @@ function Page({
 
   const [spaces, setSpaces] = useState<{ id: number; name: string }[]>([]);
 
+  const [showVariant, setShowVariant] = useState<number>(0);
+
   useEffect(() => {
     if (telegramUser) {
       const linkTelegram = async () => {
@@ -62,6 +65,8 @@ function Page({
       }
       // TODO: HANDLE ERROR
     });
+
+    setShowVariant(Math.floor(Math.random() * variants.length));
   }, []);
 
   return (
@@ -69,15 +74,6 @@ function Page({
       {/* all content goes here */}
       {/* <div className="">hi {firstTime ? 'first time' : ''}</div> */}
 
-      <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,
@@ -85,10 +81,20 @@ function Page({
         }}
         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>
+        {variants[showVariant]!.map((v, i) => {
+          return (
+            <span
+              key={i}
+              className={
+                v.type === "highlighted"
+                  ? "bg-gradient-to-r to-blue-200 from-zinc-300 text-transparent bg-clip-text"
+                  : ""
+              }
+            >
+              {v.content}
+            </span>
+          );
+        })}
       </motion.h1>
 
       <div className="w-full pb-20 mt-12">
diff --git a/apps/web/app/(dash)/layout.tsx b/apps/web/app/(dash)/layout.tsx
index edac6048..385e46e0 100644
--- a/apps/web/app/(dash)/layout.tsx
+++ b/apps/web/app/(dash)/layout.tsx
@@ -3,6 +3,7 @@ import Menu from "./menu";
 import { redirect } from "next/navigation";
 import { auth } from "../../server/auth";
 import { Toaster } from "@repo/ui/shadcn/sonner";
+import BackgroundPlus from "../(landing)/GridPatterns/PlusGrid";
 
 async function Layout({ children }: { children: React.ReactNode }) {
   const info = await auth();
@@ -17,6 +18,14 @@ async function Layout({ children }: { children: React.ReactNode }) {
         <Header />
       </div>
 
+      <div className="relative flex justify-center z-40 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-70 blur-[337.4px]"
+          style={{ transform: "rotate(-30deg)" }}
+        />
+      </div>
+      <BackgroundPlus className="absolute top-0 left-0 w-full h-full -z-50 opacity-70" />
+
       <Menu />
 
       <div className="w-full h-full px-2 md:px-0">{children}</div>
diff --git a/apps/web/app/(dash)/menu.tsx b/apps/web/app/(dash)/menu.tsx
index 4b03604f..0622ddc0 100644
--- a/apps/web/app/(dash)/menu.tsx
+++ b/apps/web/app/(dash)/menu.tsx
@@ -179,7 +179,7 @@ function Menu() {
           </div>
         </div>
 
-        <DialogContent className="sm:max-w-[425px]">
+        <DialogContent className="sm:max-w-[425px] rounded-2xl bg-[#161f2a]/30 backdrop-blur-md">
           <form
             action={async (e: FormData) => {
               const content = e.get("content")?.toString();
@@ -201,7 +201,7 @@ function Menu() {
                 Resource (URL or content)
               </Label>
               <Textarea
-                className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0 mt-2"
+                className="bg-[#161f2a] focus-visible:ring-0 border-none focus-visible:ring-offset-0 mt-2"
                 id="content"
                 name="content"
                 placeholder="Start typing a note or paste a URL here. I'll remember it."
@@ -226,7 +226,9 @@ function Menu() {
                   <TooltipProvider>
                     <Tooltip>
                       <TooltipTrigger>
-                        <InformationCircleIcon className="w-4 h-4" />
+                        <span>
+                          <InformationCircleIcon className="w-4 h-4" />
+                        </span>
                       </TooltipTrigger>
                       <TooltipContent>
                         <p>
@@ -281,7 +283,7 @@ function Menu() {
                     }
                   }}
                   placeholder="Save or create space by typing."
-                  className="bg-[#2B3237] h-min rounded-md mt-2 mb-4"
+                  className="bg-[#161f2a] h-min rounded-md mt-2 mb-4"
                 />
 
                 <div>
diff --git a/packages/ui/shadcn/combobox.tsx b/packages/ui/shadcn/combobox.tsx
index 9ab54ef1..0caa4a45 100644
--- a/packages/ui/shadcn/combobox.tsx
+++ b/packages/ui/shadcn/combobox.tsx
@@ -56,11 +56,9 @@ const ComboboxWithCreate: React.FC<ComboboxWithCreateProps> = ({
           <Button onClick={async () => onSubmit(inputValue)} variant="link">
             {createNewMessage} "{inputValue}"
           </Button>
+          <p>Start by creating a space and adding content to it</p>
         </CommandEmpty>
-        <CommandGroup
-          className="hidden group-focus-within:block"
-          heading="Spaces"
-        >
+        <CommandGroup className="hidden group-focus-within:block">
           {options.map((option, idx) => (
             <CommandItem
               key={`opt-${idx}`}
diff --git a/packages/ui/shadcn/command.tsx b/packages/ui/shadcn/command.tsx
index dfc54283..e3b22841 100644
--- a/packages/ui/shadcn/command.tsx
+++ b/packages/ui/shadcn/command.tsx
@@ -43,7 +43,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
diff --git a/packages/ui/shadcn/dialog.tsx b/packages/ui/shadcn/dialog.tsx
index f162360f..1dc5f801 100644
--- a/packages/ui/shadcn/dialog.tsx
+++ b/packages/ui/shadcn/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/30 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/20 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className,
     )}
     {...props}