96 lines
3.0 KiB
TypeScript
96 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useState, useEffect } from 'react';
|
|
import styles from './Navbar.module.css';
|
|
|
|
export default function Navbar() {
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 20);
|
|
};
|
|
|
|
window.addEventListener('scroll', handleScroll);
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
const navLinks = [
|
|
{ href: '/', label: 'Home' },
|
|
{ href: '/features', label: 'Features' },
|
|
{ href: '/pricing', label: 'Pricing' },
|
|
{ href: '/about', label: 'About' },
|
|
{ href: '/docs', label: 'Docs' },
|
|
{ href: '/blog', label: 'Blog' },
|
|
{ href: '/contact', label: 'Contact' },
|
|
];
|
|
|
|
return (
|
|
<nav className={`${styles.navbar} ${isScrolled ? styles.scrolled : ''}`}>
|
|
<div className="container">
|
|
<div className={styles.navContent}>
|
|
{/* Logo */}
|
|
<Link href="/" className={styles.logo}>
|
|
<span className={styles.logoIcon}>🚀</span>
|
|
<span className={styles.logoText}>Social<span className="gradient-text">Buddy</span></span>
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div className={styles.navLinks}>
|
|
{navLinks.map((link) => (
|
|
<Link key={link.href} href={link.href} className={styles.navLink}>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* CTA Buttons */}
|
|
<div className={styles.navActions}>
|
|
<a href="https://app.socialbuddy.co/login" className={styles.loginBtn}>
|
|
Login
|
|
</a>
|
|
<a href="https://app.socialbuddy.co/signup" className="btn btn-primary">
|
|
Get Started
|
|
</a>
|
|
</div>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<button
|
|
className={styles.mobileMenuBtn}
|
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
|
aria-label="Toggle menu"
|
|
>
|
|
<span className={`${styles.hamburger} ${isMobileMenuOpen ? styles.open : ''}`}></span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{isMobileMenuOpen && (
|
|
<div className={styles.mobileMenu}>
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className={styles.mobileNavLink}
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
<div className={styles.mobileActions}>
|
|
<a href="https://app.socialbuddy.co/login" className={styles.loginBtn}>
|
|
Login
|
|
</a>
|
|
<a href="https://app.socialbuddy.co/signup" className="btn btn-primary">
|
|
Get Started
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|