🔥 Gradients galore!

src/components/ChatWindow.tsx

@@ -84,13 +84,13 @@ const ChatMessage = ({ message }: { message: Message }) => {
 const getMessageIcon = (message: Message) => {
   switch (message.type) {
     case "goal":
-      return <FaStar />;
+      return <FaStar className="text-yellow-400" />;
     case "task":
-      return <FaListAlt />;
+      return <FaListAlt className="text-gray-300" />;
     case "thinking":
-      return <FaBrain className="mt-[0.1em]" />;
+      return <FaBrain className="mt-[0.1em] text-pink-400" />;
     case "action":
-      return <FaPlayCircle />;
+      return <FaPlayCircle className="text-green-500" />;
   }
 };
 

src/components/DottedGridBackground.tsx

@@ -2,13 +2,16 @@ import React from "react";
 
 interface DottedGridBackgroundProps {
   children: React.ReactNode;
-  className?: string
+  className?: string;
 }
-const DottedGridBackground = ({ children, className }: DottedGridBackgroundProps) => {
+
+const DottedGridBackground = ({
+  children,
+  className,
+}: DottedGridBackgroundProps) => {
   return (
-    <div
+    <div className={`${className ? className + " " : ""} background`}>
-      className={`${className ? className + " " : ""} background`}
+      <div className="lower-gradient" />
-    >
       {children}
     </div>
   );

src/components/Drawer.tsx

@@ -5,8 +5,8 @@ import { BiPlus } from "react-icons/bi";
 const Drawer = () => {
   return (
     <div
-      id="drawer-example"
+      id="drawer"
-      className="z-50 m-0 hidden h-screen w-72 flex-col gap-2 border-b-[1px] border-b-white/10 bg-[#101010]/50 p-0 p-3 font-mono text-white backdrop-blur-sm md:flex"
+      className="z-50 m-0 hidden h-screen w-72 flex-col gap-2 bg-zinc-900 p-3 font-mono text-white shadow-3xl md:flex"
     >
       <NewAgent />
       <DrawerItem icon={<FaRobot />} text="HustleGPT" />

src/pages/index.tsx

@@ -48,10 +48,10 @@ const Home: NextPage = () => {
               className="relative flex flex-col items-center font-mono"
             >
               <div className="flex flex-row items-start shadow-2xl">
-                <span className="text-4xl font-bold text-[#C0C0C0] sm:text-6xl xs:text-5xl">
+                <span className="text-4xl font-bold text-[#C0C0C0] xs:text-5xl sm:text-6xl">
                   Agent
                 </span>
-                <span className="text-4xl font-bold text-white sm:text-6xl xs:text-5xl">
+                <span className="text-4xl font-bold text-white xs:text-5xl sm:text-6xl">
                   GPT
                 </span>
                 <PopIn delay={0.5}>

src/styles/globals.css

@@ -3,11 +3,28 @@
 @tailwind utilities;
 
 .background {
-    background-image: radial-gradient(circle, rgba(58, 58, 58, 0.75) 2px, transparent 0px);
+  background-image: radial-gradient(
+    circle,
+    rgba(58, 58, 58, 0.75) 2px,
+    transparent 0px
+  );
   background-size: 30px 30px;
   background-position: 0 0, 15px 15px;
 }
 
+.lower-gradient {
+  background-image: linear-gradient(
+    to top,
+    rgba(255, 255, 255, 0.01),
+    rgba(255, 255, 255, 0)
+  );
+  height: 20vh;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
 /* Customize website's scrollbar like Mac OS
 Not supports in Firefox and IE */
 

tailwind.config.cjs

@@ -13,7 +13,11 @@ module.exports = {
 
       ...defaultTheme.screens
     },
-    extend: {}
+    extend: {
+      boxShadow: {
+        "3xl": "0 40px 70px -15px rgba(0, 0, 0, 0.40)" // Customize the shadow value according to your preferences.
+      }
+    }
   },
   plugins: []
 };