Email Sorter Beta
Ich habe soweit automatisiert the Emails sortieren aber ich muss noch schauen was es fur bugs es gibt wenn die app online ist deswegen wurde ich mit diesen Commit die website veroffentlichen obwohjl es sein konnte das es noch nicht fertig ist und verkaufs bereit
This commit is contained in:
159
client/src/components/landing/Navbar.tsx
Normal file
159
client/src/components/landing/Navbar.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
import { useState, useCallback } from 'react'
|
||||
import { Link, useNavigate, useLocation } from 'react-router-dom'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { useAuth } from '@/context/AuthContext'
|
||||
import { Menu, X, Mail, Sparkles } from 'lucide-react'
|
||||
|
||||
export function Navbar() {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
||||
const { user } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
const location = useLocation()
|
||||
|
||||
// Smooth scroll to section
|
||||
const scrollToSection = useCallback((sectionId: string) => {
|
||||
setIsMenuOpen(false)
|
||||
|
||||
// If not on home page, navigate first
|
||||
if (location.pathname !== '/') {
|
||||
navigate('/')
|
||||
setTimeout(() => {
|
||||
const element = document.getElementById(sectionId)
|
||||
element?.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
}, 100)
|
||||
} else {
|
||||
const element = document.getElementById(sectionId)
|
||||
element?.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
}
|
||||
}, [location.pathname, navigate])
|
||||
|
||||
return (
|
||||
<nav className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-lg border-b border-slate-100">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
{/* Logo */}
|
||||
<Link to="/" className="flex items-center gap-2">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center">
|
||||
<Mail className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<span className="text-xl font-bold text-slate-900">
|
||||
Email<span className="text-primary-600">Sorter</span>
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden md:flex items-center gap-8">
|
||||
<button
|
||||
onClick={() => scrollToSection('features')}
|
||||
className="text-slate-600 hover:text-slate-900 font-medium transition-colors"
|
||||
>
|
||||
Features
|
||||
</button>
|
||||
<button
|
||||
onClick={() => scrollToSection('how-it-works')}
|
||||
className="text-slate-600 hover:text-slate-900 font-medium transition-colors"
|
||||
>
|
||||
How it works
|
||||
</button>
|
||||
<button
|
||||
onClick={() => scrollToSection('pricing')}
|
||||
className="text-slate-600 hover:text-slate-900 font-medium transition-colors"
|
||||
>
|
||||
Pricing
|
||||
</button>
|
||||
<button
|
||||
onClick={() => scrollToSection('faq')}
|
||||
className="text-slate-600 hover:text-slate-900 font-medium transition-colors"
|
||||
>
|
||||
FAQ
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Desktop CTA */}
|
||||
<div className="hidden md:flex items-center gap-4">
|
||||
{user ? (
|
||||
<Button onClick={() => navigate('/dashboard')}>
|
||||
Dashboard
|
||||
<Sparkles className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<Button variant="ghost" onClick={() => navigate('/login')}>
|
||||
Sign in
|
||||
</Button>
|
||||
<Button onClick={() => navigate('/register')}>
|
||||
Get started free
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
<button
|
||||
className="md:hidden p-2.5 rounded-lg hover:bg-slate-100 active:bg-slate-200 touch-manipulation"
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
aria-label={isMenuOpen ? "Close menu" : "Open menu"}
|
||||
>
|
||||
{isMenuOpen ? (
|
||||
<X className="w-6 h-6 text-slate-600" />
|
||||
) : (
|
||||
<Menu className="w-6 h-6 text-slate-600" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu */}
|
||||
{isMenuOpen && (
|
||||
<div className="md:hidden bg-white border-t border-slate-100 shadow-lg animate-in slide-in-from-top-2 duration-200">
|
||||
<div className="px-3 py-3 space-y-1">
|
||||
<button
|
||||
onClick={() => scrollToSection('features')}
|
||||
className="block w-full text-left px-4 py-3 text-sm font-medium text-slate-700 hover:bg-slate-50 active:bg-slate-100 rounded-lg transition-colors touch-manipulation"
|
||||
>
|
||||
Features
|
||||
</button>
|
||||
<button
|
||||
onClick={() => scrollToSection('how-it-works')}
|
||||
className="block w-full text-left px-4 py-3 text-sm font-medium text-slate-700 hover:bg-slate-50 active:bg-slate-100 rounded-lg transition-colors touch-manipulation"
|
||||
>
|
||||
How it works
|
||||
</button>
|
||||
<button
|
||||
onClick={() => scrollToSection('pricing')}
|
||||
className="block w-full text-left px-4 py-3 text-sm font-medium text-slate-700 hover:bg-slate-50 active:bg-slate-100 rounded-lg transition-colors touch-manipulation"
|
||||
>
|
||||
Pricing
|
||||
</button>
|
||||
<button
|
||||
onClick={() => scrollToSection('faq')}
|
||||
className="block w-full text-left px-4 py-3 text-sm font-medium text-slate-700 hover:bg-slate-50 active:bg-slate-100 rounded-lg transition-colors touch-manipulation"
|
||||
>
|
||||
FAQ
|
||||
</button>
|
||||
<div className="pt-3 mt-3 border-t border-slate-100 space-y-2">
|
||||
{user ? (
|
||||
<Button className="w-full h-11" onClick={() => navigate('/dashboard')}>
|
||||
Dashboard
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full h-11"
|
||||
onClick={() => navigate('/login')}
|
||||
>
|
||||
Sign in
|
||||
</Button>
|
||||
<Button className="w-full h-11" onClick={() => navigate('/register')}>
|
||||
Get started free
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user