176 lines
7.6 KiB
TypeScript
176 lines
7.6 KiB
TypeScript
import React, { ReactNode, useState, useEffect } from 'react'
|
|
import Link from 'next/link'
|
|
import { mdiMenu, mdiClose, mdiLogin, mdiAccountPlus, mdiMagnify } from '@mdi/js'
|
|
import { useAppSelector } from '../stores/hooks'
|
|
import { useRouter } from 'next/router'
|
|
import BaseIcon from '../components/BaseIcon'
|
|
|
|
type Props = {
|
|
children: ReactNode
|
|
}
|
|
|
|
export default function LayoutGuest({ children }: Props) {
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
|
const [scrolled, setScrolled] = useState(false)
|
|
const { token } = useAppSelector((state) => state.auth)
|
|
const router = useRouter()
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setScrolled(window.scrollY > 20)
|
|
}
|
|
window.addEventListener('scroll', handleScroll)
|
|
return () => window.removeEventListener('scroll', handleScroll)
|
|
}, [])
|
|
|
|
const navLinks = [
|
|
{ label: 'Find Services', href: '/search' },
|
|
{ label: 'Categories', href: '/categories' },
|
|
{ label: 'Verify Business', href: '/register' },
|
|
{ label: 'Support', href: '/contact-form' },
|
|
]
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white dark:bg-slate-950 flex flex-col font-sans selection:bg-emerald-500/30">
|
|
{/* Navigation */}
|
|
<nav
|
|
className={`fixed top-0 left-0 right-0 z-[100] transition-all duration-300 ${
|
|
scrolled
|
|
? 'bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl border-b border-slate-200 dark:border-slate-800 py-4 shadow-sm'
|
|
: 'bg-transparent py-6'
|
|
}`}
|
|
>
|
|
<div className="max-w-7xl mx-auto px-6 flex items-center justify-between">
|
|
<Link href="/" className="flex items-center group">
|
|
<div className="w-10 h-10 bg-emerald-500 rounded-xl flex items-center justify-center mr-3 shadow-lg shadow-emerald-500/20 group-hover:scale-110 transition-transform">
|
|
<BaseIcon path={mdiMagnify} size={24} className="text-slate-900" />
|
|
</div>
|
|
<span className="text-xl font-black tracking-tight dark:text-white">Crafted Network<span className="text-emerald-500 italic">™</span></span>
|
|
</Link>
|
|
|
|
{/* Desktop Nav */}
|
|
<div className="hidden md:flex items-center space-x-8">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className="text-sm font-bold text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors"
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
<div className="hidden md:flex items-center space-x-4">
|
|
{token ? (
|
|
<Link
|
|
href="/dashboard"
|
|
className="bg-slate-900 dark:bg-emerald-500 text-white dark:text-slate-900 px-6 py-2.5 rounded-xl text-sm font-bold hover:opacity-90 transition-all shadow-lg"
|
|
>
|
|
Go to Dashboard
|
|
</Link>
|
|
) : (
|
|
<>
|
|
<Link
|
|
href="/login"
|
|
className="text-sm font-bold text-slate-600 dark:text-slate-400 hover:text-emerald-600 transition-colors px-4 py-2"
|
|
>
|
|
Log In
|
|
</Link>
|
|
<Link
|
|
href="/register"
|
|
className="bg-emerald-500 text-slate-900 px-6 py-2.5 rounded-xl text-sm font-bold hover:shadow-lg hover:shadow-emerald-500/20 transition-all active:scale-95"
|
|
>
|
|
Join the Network
|
|
</Link>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Mobile Toggle */}
|
|
<button
|
|
className="md:hidden p-2 text-slate-600 dark:text-slate-400"
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
|
>
|
|
<BaseIcon path={isMenuOpen ? mdiClose : mdiMenu} size={28} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{isMenuOpen && (
|
|
<div className="md:hidden bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 p-6 space-y-6 animate-fade-in">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className="block text-lg font-bold text-slate-800 dark:text-slate-200"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
<div className="pt-6 border-t border-slate-100 dark:border-slate-800 flex flex-col gap-4">
|
|
<Link
|
|
href="/login"
|
|
className="flex items-center justify-center gap-2 p-4 rounded-xl border border-slate-200 dark:border-slate-700 font-bold"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
<BaseIcon path={mdiLogin} size={20} /> Log In
|
|
</Link>
|
|
<Link
|
|
href="/register"
|
|
className="flex items-center justify-center gap-2 p-4 rounded-xl bg-emerald-500 text-slate-900 font-bold shadow-lg"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
<BaseIcon path={mdiAccountPlus} size={20} /> Join Now
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
|
|
{/* Main Content */}
|
|
<main className="flex-grow pt-16">
|
|
{children}
|
|
</main>
|
|
|
|
{/* Footer */}
|
|
<footer className="bg-slate-900 text-white pt-24 pb-12">
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
|
|
<div className="col-span-1 md:col-span-2 space-y-6">
|
|
<div className="flex items-center">
|
|
<div className="w-8 h-8 bg-emerald-500 rounded-lg flex items-center justify-center mr-3">
|
|
<BaseIcon path={mdiMagnify} size={20} className="text-slate-900" />
|
|
</div>
|
|
<span className="text-2xl font-bold tracking-tight dark:text-white text-white">Crafted Network™</span>
|
|
</div>
|
|
<p className="text-slate-400 max-w-sm leading-relaxed">
|
|
The most reliable platform for finding verified service professionals and businesses across all industries.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold mb-6 text-white uppercase text-xs tracking-widest">Platform</h4>
|
|
<ul className="space-y-4 text-slate-400 text-sm">
|
|
<li><Link href="/search" className="hover:text-emerald-400 transition-colors">Find Services</Link></li>
|
|
<li><Link href="/categories" className="hover:text-emerald-400 transition-colors">Categories</Link></li>
|
|
<li><Link href="/register" className="hover:text-emerald-400 transition-colors">Register Business</Link></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold mb-6 text-white uppercase text-xs tracking-widest">Legal</h4>
|
|
<ul className="space-y-4 text-slate-400 text-sm">
|
|
<li><Link href="/privacy-policy" className="hover:text-emerald-400 transition-colors">Privacy Policy</Link></li>
|
|
<li><Link href="/terms-of-use" className="hover:text-emerald-400 transition-colors">Terms of Use</Link></li>
|
|
<li><Link href="/contact-form" className="hover:text-emerald-400 transition-colors">Contact Support</Link></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="pt-12 border-t border-slate-800 text-center text-slate-500 text-sm">
|
|
© 2026 Crafted Network™. Built with Trust & Transparency.
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
)
|
|
} |