Improved homepage heading and auth UI

[sakshi-s29]

Description:
Improved the homepage heading text and enhanced the authentication UI to make it more engaging and user-friendly.

Changes Made:

• Updated homepage hero section text
• Improved readability and wording
• Added password visibility toggle for login/signup fields.

Screenshots:
Added before and after screenshots below.

BEFORE:

AFTER:

PASSWORD VISIBILITY:

[gemini-code-assist]

Code Review

This pull request updates the CommDesk subproject, modifies the copy on the SignUpPage, and updates styling and input types in the Input component and LoginPage. The review feedback highlights critical issues: hardcoding colors (black and white) in the reusable Input component breaks the application's theming system, and changing the password input type to "text" in the LoginPage introduces a severe security vulnerability by exposing passwords in plain text.

[gemini-code-assist]

Changing the password input type to "text" permanently exposes the user's password in plain text on the screen. This is a major security risk. If a password visibility toggle is desired, you should implement a state variable (e.g., showPassword) and a button to toggle the input type between "password" and "text" dynamically, rather than hardcoding it to "text".

Suggested change

	<Input
	name="password"
	className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
	className="w-full px-3 py-2 border border-gray-300 rounded-md text-black bg-white placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
	placeholder="Enter your password"
	type="password"
	type="text"
	/>
	<Input
	name="password"
	className="w-full px-3 py-2 border border-gray-300 rounded-md text-black bg-white placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
	placeholder="Enter your password"
	type="password"
	/>

[gemini-code-assist]

Hardcoding the color to 'black' inside a reusable component bypasses the application's theme configuration (theme.text.secondary). This breaks dark mode support and consistency across the app. If a specific color is needed for a particular instance, it should be passed via props or handled through Tailwind classes rather than hardcoded in the base component.

Suggested change

	style={{ color: "black"}}
	style={{ color: theme.text.secondary }}

[gemini-code-assist]

Hardcoding the background color to 'black' breaks the theming system for this reusable component. It should continue to use theme.bg.surface to respect the active theme (light/dark mode).

Suggested change

	backgroundColor: "black",
	backgroundColor: theme.bg.surface,

[gemini-code-assist]

Hardcoding bg-black text-white and color: "white" overrides the theme settings (theme.text.primary) and prevents the input from rendering correctly in other themes (e.g., light mode).

Suggested change

	className={`flex-1 bg-black text-white outline-none text-sm ${inputClassName}`}
	style={{ color: "white" }}
	className={"flex-1 bg-transparent outline-none text-sm " + inputClassName}
	style={{ color: theme.text.primary }}