Nearle/nearle_web_nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hero section content

Browse Source
This commit is contained in:
Aravind
2026-06-22 19:28:43 +05:30
parent bbbc6cb067
commit 1b9ceb4a52
14 changed files with 241 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/layout/Navbar.tsx
View File

@@ -17,8 +17,8 @@ export function Navbar() {
const [mobileOpen, setMobileOpen] = useState(false);
return (
<nav className="sticky top-0 z-50 w-full bg-white/95 backdrop-blur-md border-b border-outline-variant/20 transition-all duration-300">
<div className="grid w-full grid-cols-[auto_auto] md:grid-cols-[auto_1fr_auto] items-center gap-4 md:gap-8 px-margin-mobile md:px-16 xl:px-24 py-3">
<nav className="sticky top-0 z-50 w-full bg-[#4d046a]/95 backdrop-blur-md border-b border-white/10 transition-all duration-300">
<div className="grid w-full grid-cols-[auto_auto] md:grid-cols-[auto_1fr_auto] items-center gap-4 md:gap-8 px-6 md:px-12 lg:px-20 xl:px-24 py-3">
{/* Left: Brand */}
<div className="flex items-center">
<Link
@@ -26,27 +26,26 @@ export function Navbar() {
className="flex items-center hover:scale-[1.02] transition-transform active:scale-95 duration-200"
>
<Image
src="/logo-purple-v2.png"
src="/logo-light.png"
alt="Nearle"
width={220}
width={400}
height={50}
style={{ height: "auto" }}
className="h-9 w-auto object-contain"
style={{ height: "40px", width: "auto" }}
className="object-contain"
priority
/>
</Link>
</div>
{/* Center: Navigation */}
<div className="hidden md:flex items-center justify-center gap-8 xl:gap-10">
{NAV_LINKS.map((link) => (
<Link
key={link.label}
href={link.href}
className="relative py-1 text-[15px] font-bold leading-5 text-on-surface-variant hover:text-primary transition-all duration-200 group whitespace-nowrap"
className="relative py-1 text-[15px] font-bold leading-5 text-white/80 hover:text-brand-accent transition-all duration-200 group whitespace-nowrap"
>
{link.label}
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full" />
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-brand-accent transition-all duration-300 group-hover:w-full" />
</Link>
))}
</div>
@@ -55,14 +54,14 @@ export function Navbar() {
<div className="flex items-center justify-end gap-3">
<Link
href="/#download"
className="hidden md:inline-flex bg-primary hover:bg-primary-container text-on-primary font-bold px-7 py-3 rounded-full text-label-md hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5 active:translate-y-0 active:scale-95 whitespace-nowrap"
className="hidden md:inline-flex bg-brand-accent hover:bg-brand-accent/90 text-brand-dark font-bold px-7 py-3 rounded-full text-label-md hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5 active:translate-y-0 active:scale-95 whitespace-nowrap"
>
Get App
</Link>
{/* Mobile menu toggle */}
<button
className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-surface-container transition-all active:scale-90 cursor-pointer"
className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-white/10 text-white transition-all active:scale-90 cursor-pointer"
onClick={() => setMobileOpen(!mobileOpen)}
aria-label="Toggle menu"
>
@@ -73,13 +72,13 @@ export function Navbar() {
{/* Mobile Drawer */}
{mobileOpen && (
<div className="md:hidden bg-surface-container-lowest border-t border-outline-variant">
<div className="max-w-container-max mx-auto px-margin-mobile py-stack-md flex flex-col gap-2">
<div className="md:hidden bg-[#4d046a] border-t border-white/10">
<div className="max-w-container-max mx-auto px-6 py-stack-md flex flex-col gap-2">
{NAV_LINKS.map((link) => (
<Link
key={link.label}
href={link.href}
className="px-3 py-2.5 text-body-md text-on-surface-variant hover:text-primary hover:bg-surface-container-low rounded-lg transition-colors"
className="px-3 py-2.5 text-body-md text-white/80 hover:text-brand-accent hover:bg-white/10 rounded-lg transition-colors"
onClick={() => setMobileOpen(false)}
>
{link.label}