improve frontend home page UI. delete tab (#179)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Style**
- Adjusted vertical spacing on the homepage to improve the presentation
of key sections.
- Updated the prompt form layout by widening its display area, reducing
the text input height, and refining the button appearance.

- **Refactor**
- Simplified the navigation bar by removing dynamic tab updates and
animation effects.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: ZHallen122

frontend/src/app/(main)/page.tsx

@@ -75,7 +75,7 @@ export default function HomePage() {
           />
         </div>
 
-        <div className="w-full mb-24">
+        <div className="w-full mb-24 mt-24">
           <ProjectsSection />
         </div>
       </motion.div>

frontend/src/components/root/nav.tsx

@@ -100,43 +100,43 @@ const FloatingNavbar = forwardRef<NavbarRef, FloatingNavbarProps>(
       return index >= 0 ? index : 0; // Default to first tab if path not found
     };
 
-    const [activeTab, setActiveTab] = useState(findActiveTabIndex());
-    const [isVisible, setIsVisible] = useState(true);
+    // const [activeTab, setActiveTab] = useState(findActiveTabIndex());
+    // const [isVisible, setIsVisible] = useState(true);
 
     // Update active tab when pathname changes
-    useEffect(() => {
-      const newActiveTab = findActiveTabIndex();
-      if (newActiveTab !== activeTab) {
-        setActiveTab(newActiveTab);
-      }
-    }, [pathname]);
+    // useEffect(() => {
+    //   const newActiveTab = findActiveTabIndex();
+    //   if (newActiveTab !== activeTab) {
+    //     setActiveTab(newActiveTab);
+    //   }
+    // }, [pathname]);
 
     // Expose the activeTab value to parent components through the ref
-    useImperativeHandle(ref, () => ({
-      activeTab,
-      setActiveTab: (index) => handleTabChange(index),
-    }));
+    // useImperativeHandle(ref, () => ({
+    //   activeTab,
+    //   setActiveTab: (index) => handleTabChange(index),
+    // }));
 
-    // Handle tab change locally (for animation purposes)
-    const handleTabChange = (index: number) => {
-      if (index !== activeTab) {
-        setIsVisible(false);
-        setTimeout(() => {
-          setActiveTab(index);
-          setIsVisible(true);
-        }, animationDuration);
-      }
-    };
+    // // Handle tab change locally (for animation purposes)
+    // const handleTabChange = (index: number) => {
+    //   if (index !== activeTab) {
+    //     setIsVisible(false);
+    //     setTimeout(() => {
+    //       setActiveTab(index);
+    //       setIsVisible(true);
+    //     }, animationDuration);
+    //   }
+    // };
 
     // Toggle theme function
     const toggleTheme = () => {
       setTheme(theme === 'dark' ? 'light' : 'dark');
     };
 
     // Ensure content is visible on initial render
-    useEffect(() => {
-      setIsVisible(true);
-    }, []);
+    // useEffect(() => {
+    //   setIsVisible(true);
+    // }, []);
 
     // Using the same animation variants as in page.tsx
     const containerVariants = {
@@ -163,22 +163,22 @@ const FloatingNavbar = forwardRef<NavbarRef, FloatingNavbarProps>(
       },
     };
 
-    const handleTabClick = (
-      e: React.MouseEvent,
-      index: number,
-      label: string,
-      path: string
-    ) => {
-      if (label === 'Pricing') {
-        e.preventDefault();
-        alert('Coming Soon');
-      } else if (label === 'Codefox Journey') {
-        e.preventDefault();
-        alert('Coming Soon');
-      } else {
-        handleTabChange(index);
-      }
-    };
+    // const handleTabClick = (
+    //   e: React.MouseEvent,
+    //   index: number,
+    //   label: string,
+    //   path: string
+    // ) => {
+    //   if (label === 'Pricing') {
+    //     e.preventDefault();
+    //     alert('Coming Soon');
+    //   } else if (label === 'Codefox Journey') {
+    //     e.preventDefault();
+    //     alert('Coming Soon');
+    //   } else {
+    //     handleTabChange(index);
+    //   }
+    // };
 
     return (
       <>
@@ -241,61 +241,20 @@ const FloatingNavbar = forwardRef<NavbarRef, FloatingNavbarProps>(
                 <SunMoon size={20} />
               </button>
 
-              <div
-                className={`bg-gray-100 dark:bg-gray-800 rounded-full px-2 py-1 shadow-md ${tabsContainerClassName}`}
-              >
-                <div className="flex relative z-10">
-                  {tabs.map((tab, index) => (
-                    <Link
-                      href={tab.path}
-                      key={index}
-                      onClick={(e) =>
-                        handleTabClick(e, index, tab.label, tab.path)
-                      }
-                      className="focus:outline-none"
-                    >
-                      <div
-                        className={`relative px-4 py-2 font-medium text-sm rounded-full transition-all duration-300 ${
-                          activeTab === index
-                            ? `text-white ${activeTabClassName}`
-                            : `text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white ${inactiveTabClassName}`
-                        }`}
-                      >
-                        {/* Animated background for active tab */}
-                        <AnimatePresence>
-                          {activeTab === index && (
-                            <motion.span
-                              className="absolute inset-0 bg-primary-500 dark:bg-primary-600 rounded-full -z-10"
-                              layoutId="activeTabBackground"
-                              initial={{ opacity: 0 }}
-                              animate={{ opacity: 1 }}
-                              exit={{ opacity: 0 }}
-                              transition={{
-                                duration: animationDuration / 1000,
-                              }}
-                            />
-                          )}
-                        </AnimatePresence>
-                        {tab.label}
-                      </div>
-                    </Link>
-                  ))}
-                </div>
-              </div>
-
               {/* Authentication Buttons */}
               {!isAuthorized && (
                 <div className="flex items-center space-x-4 transition-transform duration-300">
                   <button
                     onClick={() => setShowSignIn(true)}
-                    className="px-4 py-2 rounded-md border border-primary-500 text-primary-500 dark:text-primary-400
+                    className="px-4 py-1 rounded-sm border border-primary-500 text-primary-500 dark:text-primary-400
                  hover:bg-primary-500 hover:text-white transition-colors"
                   >
                     Sign In
                   </button>
+
                   <button
                     onClick={() => setShowSignUp(true)}
-                    className="px-4 py-2 rounded-md bg-primary-500 text-white hover:bg-primary-600 transition-colors"
+                    className="px-4 py-1 rounded-sm bg-primary-500 text-white hover:bg-primary-600 transition-colors"
                   >
                     Sign Up
                   </button>

frontend/src/components/root/prompt-form.tsx

@@ -179,7 +179,7 @@ export const PromptForm = forwardRef<PromptFormRef, PromptFormProps>(
     };
 
     return (
-      <div className="relative w-full max-w-2xl mx-auto">
+      <div className="relative w-full max-w-4xl mx-auto">
         {/* Main content area with textarea */}
         <AnimatedInputBorder borderWidth={200} borderHeight={30}>
           <div className="flex flex-col">
@@ -191,7 +191,7 @@ export const PromptForm = forwardRef<PromptFormRef, PromptFormProps>(
               placeholder=""
               className="w-full min-h-[200px] py-6 px-6 pr-12 text-lg border border-transparent rounded-lg focus:outline-none focus:ring-0 bg-white dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 resize-none font-normal"
               disabled={isLoading || isRegenerating}
-              rows={4}
+              rows={3}
               style={{ paddingBottom: '48px' }} // Extra padding at bottom to avoid text touching buttons
             />
 
@@ -315,7 +315,7 @@ export const PromptForm = forwardRef<PromptFormRef, PromptFormProps>(
               {/* Submit button */}
               <Button
                 className={cn(
-                  'bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 text-white shadow-md hover:shadow-lg transition-all px-5 py-3 h-10 rounded-full',
+                  'bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 text-white shadow-md hover:shadow-lg transition-all px-5 py-3 h-10 rounded-sm',
                   (isLoading || isRegenerating) &&
                     'opacity-80 cursor-not-allowed'
                 )}