98552163a8
Complete frontend implementation with: - Next.js 16 with App Router and TypeScript - Tailwind CSS v4 with custom violet theme - shadcn/ui components with Lucide React icons - Landing page with hero, services, pricing, testimonials, FAQ - Service selection page with toggle - Login/Register pages with social auth UI - Multi-step checkout flow - Client dashboard with stats, projects, support tickets - Billing page with subscription, payment methods, invoices - All mock data and TypeScript types 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
107 lines
3.8 KiB
TypeScript
107 lines
3.8 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { useState } from 'react'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Rocket, Menu, X } from 'lucide-react'
|
|
|
|
export function SiteHeader() {
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
|
|
|
return (
|
|
<header className="fixed top-0 left-0 right-0 z-50 glass-nav border-b border-border">
|
|
<div className="flex justify-center w-full">
|
|
<div className="w-full max-w-[1280px] px-4 md:px-10 py-3 flex items-center justify-between">
|
|
{/* Logo */}
|
|
<Link href="/" className="flex items-center gap-3">
|
|
<div className="size-8 flex items-center justify-center rounded bg-gradient-to-br from-primary to-primary-glow text-white">
|
|
<Rocket className="w-5 h-5" />
|
|
</div>
|
|
<h2 className="text-foreground text-lg font-bold leading-tight tracking-tight">
|
|
ScaleSite
|
|
</h2>
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<nav className="hidden md:flex items-center gap-8">
|
|
<Link
|
|
href="/#services"
|
|
className="text-muted-foreground hover:text-foreground hover:text-primary transition-colors text-sm font-medium"
|
|
>
|
|
Services
|
|
</Link>
|
|
<Link
|
|
href="/services"
|
|
className="text-muted-foreground hover:text-foreground hover:text-primary transition-colors text-sm font-medium"
|
|
>
|
|
Pricing
|
|
</Link>
|
|
<Link
|
|
href="/#about"
|
|
className="text-muted-foreground hover:text-foreground hover:text-primary transition-colors text-sm font-medium"
|
|
>
|
|
About
|
|
</Link>
|
|
</nav>
|
|
|
|
{/* Right side */}
|
|
<div className="flex items-center gap-4">
|
|
<Button
|
|
asChild
|
|
className="hidden sm:flex glow-button bg-primary hover:bg-primary-glow text-white text-sm font-bold h-9 px-5 rounded-lg"
|
|
>
|
|
<Link href="/login">Client Login</Link>
|
|
</Button>
|
|
|
|
{/* Mobile menu button */}
|
|
<button
|
|
className="md:hidden text-foreground"
|
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
|
aria-label="Toggle menu"
|
|
>
|
|
{mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile menu */}
|
|
{mobileMenuOpen && (
|
|
<div className="md:hidden bg-card border-b border-border">
|
|
<nav className="flex flex-col px-4 py-4 gap-4">
|
|
<Link
|
|
href="/#services"
|
|
className="text-muted-foreground hover:text-foreground hover:text-primary transition-colors text-sm font-medium"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
Services
|
|
</Link>
|
|
<Link
|
|
href="/services"
|
|
className="text-muted-foreground hover:text-foreground hover:text-primary transition-colors text-sm font-medium"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
Pricing
|
|
</Link>
|
|
<Link
|
|
href="/#about"
|
|
className="text-muted-foreground hover:text-foreground hover:text-primary transition-colors text-sm font-medium"
|
|
onClick={() => setMobileMenuOpen(false)}
|
|
>
|
|
About
|
|
</Link>
|
|
<Button
|
|
asChild
|
|
className="glow-button bg-primary hover:bg-primary-glow text-white text-sm font-bold h-9 px-5 rounded-lg w-full"
|
|
>
|
|
<Link href="/login" onClick={() => setMobileMenuOpen(false)}>
|
|
Client Login
|
|
</Link>
|
|
</Button>
|
|
</nav>
|
|
</div>
|
|
)}
|
|
</header>
|
|
)
|
|
}
|