Fixed bug + Teams UI

src/app/globals.css

@@ -1,6 +1,11 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+  scroll-behavior: smooth;
+}
+
 @keyframes scroll {
   0% {
     transform: translateY(0);

src/app/teams/create/page.tsx

@@ -3,63 +3,82 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
-import {  useState } from "react";
+import { useState } from "react";
 import { toast } from "sonner";
-import { useSelector } from 'react-redux';
-import { RootState } from '@/config/store';
+import { useSelector } from "react-redux";
+import { RootState } from "@/config/store";
 import createAxiosInstance from "@/config/AxiosProtectedRoute";
 import { createNewTeamUrl } from "@/lib/API-URLs";
 
 function CreateTeam() {
   const [teamName, setTeamName] = useState("");
-  const user = useSelector((state:RootState)=>state.auth.user)
+  const user = useSelector((state: RootState) => state.auth.user);
   const router = useRouter();
   const axiosInstance = createAxiosInstance(user.accessToken);
 
-  const createNewTeam = async() => {
+  const createNewTeam = async () => {
     try {
-      const res = await axiosInstance.post(createNewTeamUrl,{
-        teamName
+      const res = await axiosInstance.post(createNewTeamUrl, {
+        teamName,
       });
-      if(res.status === 200){
-        router.push('/dashboard');
+      if (res.status === 200) {
+        router.push("/dashboard");
         toast.success("Team created Successfully");
       }
     } catch (err) {
-
       console.log(err);
     }
   };
-  
+
   return (
-    <div className=" px-6 md:px-16 my-16">
-      <Image src="/android-chrome-512x512.png" alt="logo" width={50} height={50} />
-      <div className="flex flex-col items-center mt-8 gap-4">
-        <h2 className="font-bold text-[40px] py-3">
-          What should we call your team?
-        </h2>
-        <div className="mt-7 w-[40%]">
-          <label className="text-muted-foreground">Team Name</label>
-          <Input
-            placeholder="Team Name"
-            className="mt-3"
-            onChange={(e) => setTeamName(e.target.value)}
-          />
+    <>
+      <div className="relative min-h-screen w-full lg:grid lg:grid-cols-2">
+        <div className="flex items-center justify-center py-12">
+          <div className="px-6 md:px-16 my-16">
+            <Image
+              src="/android-chrome-512x512.png"
+              alt="logo"
+              width={50}
+              height={50}
+            />
+            <div className="flex flex-col items-center mt-8 gap-4">
+              <h2 className="font-bold text-[40px] py-3 text-center">
+                What should we call your team?
+              </h2>
+              <div className="mt-7 w-full sm:px-8">
+                <label className="text-muted-foreground">Team Name</label>
+                <Input
+                  placeholder="Team Name"
+                  className="mt-3"
+                  onChange={(e) => setTeamName(e.target.value)}
+                />
+              </div>
+              <div className="flex gap-10 items-center">
+                <Button
+                  disabled={!(teamName && teamName?.length > 0)}
+                  onClick={() => createNewTeam()}
+                >
+                  Create Team
+                </Button>
+                <Button onClick={() => router.push("/dashboard")}>
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          </div>
         </div>
-        <div className="flex gap-10 items-center">
-          <Button
-            disabled={!(teamName && teamName?.length > 0)}
-            onClick={() => createNewTeam()}
-          >
-            Create Team
-          </Button>
-          <Button
-          onClick={() => router.push("/dashboard")}>
-            Cancel
-          </Button>
+        <div className="hidden max-h-svh overflow-hidden bg-muted md:block">
+          <Image
+            alt="Image"
+            loading="lazy"
+            width={500}
+            height={500}
+            src="https://i.postimg.cc/26253f6m/ok-2.png"
+            className="h-full w-full object-cover transition-all duration-500 hover:scale-110"
+          />
         </div>
       </div>
-    </div>
+    </>
   );
 }
 

src/components/shared/Footer.tsx

@@ -1,29 +1,7 @@
 "use client";
-import React, {useEffect} from 'react';
-import Image from 'next/image';
-import Script from 'next/script';
-
-const GoogleTranslateComponent = () => {
-  useEffect(() => {
-    // Load the Google Translate script
-    const script = document.createElement('script');
-    script.src = "https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate";
-    script.async = true;
-    document.body.appendChild(script);
 
-    // Define the Google Translate callback function
-    window.loadGoogleTranslate = () => {
-      new window.google.translate.TranslateElement({
-        pageLanguage: 'en'
-      }, 'google_element');
-    };
-
-    return () => {
-      // Clean up by removing the script
-      document.body.removeChild(script);
-    };
-  }, []);
-};
+import React from 'react';
+import Image from 'next/image';
 
 const Footer: React.FC = () => {
   return (
@@ -50,27 +28,6 @@ const Footer: React.FC = () => {
             </p>
           </div>
 
-          <div className="wrapper col-md-3 col-12" style={{ justifyContent: 'center', display: 'flex' }}>
-            <div id="google_element"></div>
-            <Script
-              src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"
-              strategy="afterInteractive"
-            />
-            <Script
-              id="google-translate"
-              strategy="afterInteractive"
-              dangerouslySetInnerHTML={{
-                __html: `
-                  function loadGoogleTranslate() {
-                    new google.translate.TranslateElement({
-                      pageLanguage: 'en'
-                    }, 'google_element');
-                  }
-                `,
-              }}
-            />
-          </div>
-
           <div className="grid grid-cols-2 gap-8 sm:gap-6 lg:grid-cols-4">
             <div>
               <h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">