🎨 Improve responsiveness

src/components/Badge.tsx

@@ -6,7 +6,7 @@ interface BadgeProps {
 
 const Badge = ({ children }: BadgeProps) => {
   return (
-    <div className="text-md h-max rounded-full bg-[#1E88E5] px-3 py-1 font-semibold text-gray-100 transition-all hover:scale-110">
+    <div className="rounded-full bg-[#1E88E5] px-3 py-1 text-sm font-semibold text-gray-100 transition-all hover:scale-110">
       {children}
     </div>
   );

src/components/ChatWindow.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useRef } from "react";
 
 interface ChatWindowProps {
   children?: ReactNode;
-  className: string;
+  className?: string;
   messages: Message[];
 }
 
@@ -22,7 +22,7 @@ const ChatWindow = ({ messages, children, className }: ChatWindowProps) => {
     <div
       className={
         "border-translucent flex w-full flex-col rounded-3xl border-2 border-white/20 bg-zinc-900 text-white shadow-2xl drop-shadow-lg " +
-        className
+        (className ?? "")
       }
     >
       <MacWindowHeader />

src/components/Drawer.tsx

@@ -6,7 +6,7 @@ const Drawer = () => {
   return (
     <div
       id="drawer-example"
-      className="z-50 m-0 flex 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"
+      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"
     >
       <NewAgent />
       <DrawerItem icon={<FaRobot />} text="HustleGPT" />

src/components/Header.tsx

@@ -1,90 +1,21 @@
-// import { AnimatePresence, motion } from "framer-motion";
+import { FaGithub } from "react-icons/fa";
-import Link from "next/link";
+import PopIn from "./popin";
-import { useRouter } from "next/router";
+import { AnimatePresence } from "framer-motion";
-import {
-  FaAngleDown,
-  FaGithub,
-  FaHome,
-  FaLink,
-  FaSignOutAlt,
-} from "react-icons/fa";
-import Image from "next/image";
-
-// import { Dropdown, DropdownItem } from "@/ui/dropdown";
-// import Loader from "@/ui/loader";
-//
-// import { useAuth } from "@/hooks/useAuth";
 
 const Header: React.FC = () => {
-  // const { signOut, session, status } = useAuth();
-  const router = useRouter();
-
-  // const authenticated = status == "authenticated" && (
-  //   <Dropdown
-  //     title={session?.user?.name || ""}
-  //     icon={<FaAngleDown className="h-5 text-inherit" />}
-  //     loader={false}
-  //   >
-  //     <h1 className="border-white/5 border-b-2 font-bold px-3 pb-1 text-md">
-  //       {session?.user?.name}
-  //     </h1>
-  //
-  //     <DropdownItem
-  //       icon={<FaSignOutAlt className="h-4 text-inherit text-white" />}
-  //       onClick={signOut}
-  //     >
-  //       Sign Out
-  //     </DropdownItem>
-  //     {router.route != "/" && (
-  //       <DropdownItem icon={<FaHome className="h-4 text-inherit" />}>
-  //         <Link href="/">Home</Link>
-  //       </DropdownItem>
-  //     )}
-  //     <DropdownItem icon={<FaLink className="h-4 text-inherit" />}>
-  //       <a
-  //         href="https://github.com/awtkns/confetti/issues/new"
-  //         target="_blank"
-  //         rel="noreferrer"
-  //       >
-  //         Report a bug
-  //       </a>
-  //     </DropdownItem>
-  //   </Dropdown>
-  // );
-
-  // const loading = status == "loading" && <Loader />;
-  //
-  // const unauthenticated =
-  //   status == "unauthenticated" && router.route != "/auth" ? (
-  //     <Link href="/auth">Sign In</Link>
-  //   ) : (
-  //     <Link href="/">Home</Link>
-  //   );
-
-  const github = (
-    <a
-      href="https://github.com/reworkd/AgentGPT"
-      className="right-0 ml-0 block block text-white hover:text-yellow-500"
-    >
-      <span className="sr-only">Confetti on GitHub</span>
-      <FaGithub size="25" />
-    </a>
-  );
-
   return (
-    <header className="z-50 w-full p-2 relative flex flex-row items-center justify-between align-middle">
+    <header className="absolute z-50 flex w-full flex-row items-center justify-end p-2 align-middle">
-      <Image src="logo-white.svg" alt="yes" width={30} height={0} />
+      <AnimatePresence>
-      {/*<AnimatePresence>*/}
+        <PopIn delay={0.5}>
-      {/*  <motion.div*/}
+          <a
-      {/*    initial={{ opacity: 0 }}*/}
+            href="https://github.com/reworkd/AgentGPT"
-      {/*    animate={{ opacity: 1 }}*/}
+            className="right-0 ml-0 block block text-white hover:text-yellow-500"
-      {/*    transition={{ duration: 1, type: "spring" }}*/}
+          >
-      {/*    className="ml-auto pr-4 text-lg text-white hover:text-yellow-500"*/}
+            <span className="sr-only">AgentGPT on GitHub</span>
-      {/*  >*/}
+            <FaGithub size="25" />
-      {/*    {authenticated || loading || unauthenticated}*/}
+          </a>
-      {/*  </motion.div>*/}
+        </PopIn>
-      {/*</AnimatePresence>*/}
+      </AnimatePresence>
-      {github}
     </header>
   );
 };

src/components/popin.tsx

@@ -3,13 +3,14 @@ import type { PropsWithChildren } from "react";
 
 interface MotionProps extends PropsWithChildren {
   className?: string;
+  delay?: number;
 }
 
 const PopIn = (props: MotionProps) => (
   <motion.div
     initial={{ scale: 0 }}
     animate={{ scale: 1 }}
-    transition={{ duration: 0.5, type: "spring" }}
+    transition={{ duration: 0.5, type: "spring", delay: props.delay ?? 0 }}
     {...props}
   >
     {props.children}

src/layout/default.tsx

@@ -1,6 +1,7 @@
 import { type ReactNode } from "react";
 import Head from "next/head";
 import DottedGridBackground from "../components/DottedGridBackground";
+import Header from "../components/Header";
 
 interface LayoutProps {
   children: ReactNode;
@@ -27,7 +28,10 @@ const DefaultLayout = (props: LayoutProps) => {
           content="https://raw.githubusercontent.com/reworkd/extension/main/assets/icon512.png"
         />
       </Head>
-      <DottedGridBackground>{props.children}</DottedGridBackground>
+      <DottedGridBackground>
+        <Header />
+        {props.children}
+      </DottedGridBackground>
       {/*<Footer />*/}
     </div>
   );

src/pages/index.tsx

@@ -13,6 +13,7 @@ import Drawer from "../components/Drawer";
 import Input from "../components/Input";
 import Button from "../components/Button";
 import { FaRobot, FaStar } from "react-icons/fa";
+import PopIn from "../components/popin";
 
 const Home: NextPage = () => {
   const [loading, setLoading] = React.useState<boolean>(false);
@@ -48,13 +49,20 @@ const Home: NextPage = () => {
         >
           <div
             id="layout"
-            className="flex h-full w-full max-w-screen-lg flex-col items-center justify-center gap-3 py-10"
+            className="flex h-full w-full max-w-screen-lg flex-col items-center gap-3 py-10 md:justify-center"
           >
-            <div id="title" className="flex flex-col items-center font-mono">
+            <div
+              id="title"
+              className="relative flex flex-col items-center font-mono"
+            >
               <div className="flex items-center shadow-2xl">
                 <span className="text-6xl font-bold text-[#C0C0C0]">Agent</span>
                 <span className="mr-5 text-6xl font-bold text-white">GPT</span>
-                <Badge>Beta 🚀</Badge>
+                <span className="hidden md:flex">
+                  <PopIn delay={0.5} className="absolute right-12 top-0 ">
+                    <Badge>Beta 🚀</Badge>
+                  </PopIn>
+                </span>
               </div>
               <div className="mt-1 font-mono text-[0.8em] font-bold text-white">
                 Assemble, configure, and deploy autonomous AI Agents in your
@@ -62,7 +70,7 @@ const Home: NextPage = () => {
               </div>
             </div>
 
-            <ChatWindow className="m-10" messages={messages}>
+            <ChatWindow messages={messages} className="mt-4">
               {loading ? (
                 <ChatMessage
                   message={{ type: "action", value: "🧠 Thinking..." }}