Skip to content

Fix #182: Added premium shadow, glass effect, and animated hover unde… #187

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jikrana1 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix #182: Added premium shadow, glass effect, and animated hover unde… #187

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 101 additions & 7 deletions client/src/components/Home/LandingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,18 +240,18 @@ const LandingPage: React.FC = () => {
return (
<div className="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300">
{/* Navigation - FIXED: md se lg breakpoint par change kiya */}
{/*
<nav className="sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-700">
<div className="container mx-auto px-4 sm:px-6 py-3 sm:py-4">
<div className="flex items-center justify-between">
{/* Logo */}

<div className="flex items-center space-x-2 flex-shrink-0">
<Cloud className="w-8 h-8 sm:w-10 sm:h-10 text-[#3498db]" />
<span className="text-xl sm:text-2xl font-bold bg-gradient-to-r from-[#3498db] to-[#2ecc71] bg-clip-text text-transparent">
SecureShare
</span>
</div>

{/* Desktop Navigation Links - lg breakpoint (1024px) */}
<div className="hidden lg:flex items-center space-x-6 xl:space-x-8">
<a
href="#features"
Expand Down Expand Up @@ -283,17 +283,14 @@ const LandingPage: React.FC = () => {
</a>
</div>

{/* Right side buttons */}
<div className="flex items-center space-x-2 sm:space-x-3">
{/* Theme Toggle */}
<button
onClick={toggleTheme}
className="p-1.5 sm:p-2 rounded-lg bg-gray-200 dark:bg-gray-700/50 hover:bg-gray-300 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white transition-colors"
>
{theme === "dark" ? <Sun size={18} /> : <Moon size={18} />}
</button>

{/* Desktop Buttons - Hidden on tablet and mobile */}
<div className="hidden lg:flex items-center space-x-2 xl:space-x-3">
<button
onClick={() => navigate("/login")}
Expand All @@ -309,7 +306,7 @@ const LandingPage: React.FC = () => {
</button>
</div>

{/* Mobile Menu Button - Shows below 1024px */}

<button
onClick={toggleMobileMenu}
className="lg:hidden p-1.5 sm:p-2 rounded-lg bg-gray-200 dark:bg-gray-700/50 hover:bg-gray-300 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white transition-colors"
Expand All @@ -321,7 +318,7 @@ const LandingPage: React.FC = () => {
</div>
</div>

{/* Mobile Navigation Menu */}

<div
className={`
lg:hidden transition-all duration-300 ease-in-out overflow-hidden
Expand Down Expand Up @@ -380,6 +377,103 @@ const LandingPage: React.FC = () => {
</div>
</div>
</div>
</nav> */}

{/* ===== Navigation - UPGRADED PREMIUM NAVBAR (Fix #182) ===== */}
<nav className="sticky top-0 z-50 bg-white/90 dark:bg-gray-900/90 backdrop-blur-lg shadow-xl shadow-gray-200/50 dark:shadow-gray-800/30 border-b border-gray-200/60 dark:border-gray-800/60 transition-all duration-300">
<div className="container mx-auto px-4 sm:px-6 py-3 sm:py-4">
<div className="flex items-center justify-between">
{/* Logo */}
<div className="flex items-center space-x-2 flex-shrink-0">
<Cloud className="w-8 h-8 sm:w-10 sm:h-10 text-[#3498db]" />
<span className="text-xl sm:text-2xl font-bold bg-gradient-to-r from-[#3498db] to-[#2ecc71] bg-clip-text text-transparent">
SecureShare
</span>
</div>

{/* Desktop Navigation Links - UPGRADED: More spacing + Hover animation */}
<div className="hidden lg:flex items-center space-x-8 xl:space-x-10">
<a
href="#features"
onClick={(e) => handleNavClick(e, "features")}
className="relative text-gray-600 dark:text-gray-300 hover:text-[#3498db] dark:hover:text-[#3498db] transition-colors font-medium text-sm xl:text-base after:content-[''] after:absolute after:bottom-[-6px] after:left-0 after:w-0 after:h-[2px] after:bg-[#3498db] after:transition-all after:duration-300 hover:after:w-full"
>
Features
</a>
<a
href="#pricing"
onClick={(e) => handleNavClick(e, "pricing")}
className="relative text-gray-600 dark:text-gray-300 hover:text-[#3498db] dark:hover:text-[#3498db] transition-colors font-medium text-sm xl:text-base after:content-[''] after:absolute after:bottom-[-6px] after:left-0 after:w-0 after:h-[2px] after:bg-[#3498db] after:transition-all after:duration-300 hover:after:w-full"
>
Pricing
</a>
<a
href="#about"
onClick={(e) => handleNavClick(e, "about")}
className="relative text-gray-600 dark:text-gray-300 hover:text-[#3498db] dark:hover:text-[#3498db] transition-colors font-medium text-sm xl:text-base after:content-[''] after:absolute after:bottom-[-6px] after:left-0 after:w-0 after:h-[2px] after:bg-[#3498db] after:transition-all after:duration-300 hover:after:w-full"
>
About
</a>
<a
href="#contact"
onClick={(e) => handleNavClick(e, "contact")}
className="relative text-gray-600 dark:text-gray-300 hover:text-[#3498db] dark:hover:text-[#3498db] transition-colors font-medium text-sm xl:text-base after:content-[''] after:absolute after:bottom-[-6px] after:left-0 after:w-0 after:h-[2px] after:bg-[#3498db] after:transition-all after:duration-300 hover:after:w-full"
>
Contact
</a>
</div>

{/* Right side buttons (Rest of the code stays exactly the same) */}
<div className="flex items-center space-x-2 sm:space-x-3">
{/* Theme Toggle */}
<button
onClick={toggleTheme}
className="p-1.5 sm:p-2 rounded-lg bg-gray-200 dark:bg-gray-700/50 hover:bg-gray-300 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white transition-colors"
>
{theme === "dark" ? <Sun size={18} /> : <Moon size={18} />}
</button>

{/* Desktop Buttons - Hidden on tablet and mobile */}
<div className="hidden lg:flex items-center space-x-2 xl:space-x-3">
<button
onClick={() => navigate("/login")}
className="px-3 xl:px-4 py-1.5 xl:py-2 text-[#3498db] hover:text-[#2980b9] transition-colors font-semibold text-sm xl:text-base"
>
Sign In
</button>
<button
onClick={() => navigate("/login")}
className="px-4 xl:px-6 py-1.5 xl:py-2 bg-gradient-to-r from-[#3498db] to-[#2ecc71] rounded-lg font-semibold hover:opacity-90 transition-opacity text-white text-sm xl:text-base whitespace-nowrap"
>
Get Started
</button>
</div>

{/* Mobile Menu Button - Shows below 1024px */}
<button
onClick={toggleMobileMenu}
className="lg:hidden p-1.5 sm:p-2 rounded-lg bg-gray-200 dark:bg-gray-700/50 hover:bg-gray-300 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white transition-colors"
aria-label="Toggle menu"
aria-expanded={isMobileMenuOpen}
>
{isMobileMenuOpen ? <X size={22} /> : <Menu size={22} />}
</button>
</div>
</div>

{/* Mobile Navigation Menu (Rest of the code stays exactly the same) */}
<div
className={`
lg:hidden transition-all duration-300 ease-in-out overflow-hidden
${isMobileMenuOpen ? "max-h-[500px] opacity-100" : "max-h-0 opacity-0"}
`}
>
{/* ... आपका बाकी मोबाइल मेनू कोड वैसे ही रहेगा ... */}
<div className="pt-3 pb-2 space-y-1 border-t border-gray-200 dark:border-gray-700 mt-3">
{/* ... */}
</div>
</div>
</div>
</nav>

{/* Hero Section */}
Expand Down
Loading