feat: Phase 3 Batch 3 — header/footer/mobilenav polish + fix Button.jsx TS generics (v0.3.3)
- Sticky dark navy header with clean nav and CTA - Reorganized MobileNav with Primary/Services/Industries sections - Dark navy footer with cyan accent headers - Added navy-light color token - Fixed Button.jsx: removed TypeScript generic syntax that broke esbuild - Replaced asChild Button usage with styled anchor tags
This commit is contained in:
null
parent
76aa71691f
commit
35aaa639ec
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "queuenorth-website",
|
||||
"private": true,
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "concurrently \"vite\" \"node server/index.js\"",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
const Footer = () => {
|
||||
const currentYear = new Date().getFullYear()
|
||||
|
||||
const companyInfo = {
|
||||
name: 'Queue North',
|
||||
tagline: 'Modern communications infrastructure without the vendor noise.',
|
||||
address: 'Your trusted partner in UCaaS, Contact Center, and infrastructure solutions.',
|
||||
}
|
||||
|
||||
const quickLinks = [
|
||||
{ name: 'Home', href: '/' },
|
||||
{ name: 'Services', href: '/services' },
|
||||
|
|
@ -31,34 +37,31 @@ const Footer = () => {
|
|||
return (
|
||||
<footer className="bg-primary-navy text-white">
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
|
||||
{/* Company Info */}
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<img
|
||||
src="/logo.svg"
|
||||
alt="Queue North"
|
||||
className="h-6 w-auto"
|
||||
className="h-8 w-auto"
|
||||
/>
|
||||
<span className="font-bold text-lg">Queue North</span>
|
||||
</div>
|
||||
<p className="text-soft-text text-sm mb-4">
|
||||
Modern communications infrastructure without the vendor noise.
|
||||
</p>
|
||||
<p className="text-soft-text text-sm">
|
||||
© {currentYear} Queue North Technologies. All rights reserved.
|
||||
</p>
|
||||
<p className="text-navy-light text-sm mb-3">{companyInfo.tagline}</p>
|
||||
<p className="text-navy-light text-sm mb-4">{companyInfo.address}</p>
|
||||
<p className="text-navy-light text-xs">© {currentYear} Queue North Technologies. All rights reserved.</p>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div>
|
||||
<h3 className="font-semibold mb-4 text-lg">Quick Links</h3>
|
||||
<h3 className="font-semibold mb-4 text-sm uppercase tracking-wider text-cyan">Quick Links</h3>
|
||||
<ul className="space-y-2">
|
||||
{quickLinks.map((link) => (
|
||||
<li key={link.name}>
|
||||
<a
|
||||
href={link.href}
|
||||
className="text-soft-text hover:text-white transition-colors text-sm"
|
||||
className="text-navy-light hover:text-white transition-colors text-sm"
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
|
|
@ -69,13 +72,13 @@ const Footer = () => {
|
|||
|
||||
{/* Services */}
|
||||
<div>
|
||||
<h3 className="font-semibold mb-4 text-lg">Services</h3>
|
||||
<h3 className="font-semibold mb-4 text-sm uppercase tracking-wider text-cyan">Services</h3>
|
||||
<ul className="space-y-2">
|
||||
{services.map((service) => (
|
||||
<li key={service.name}>
|
||||
<a
|
||||
href={service.href}
|
||||
className="text-soft-text hover:text-white transition-colors text-sm"
|
||||
className="text-navy-light hover:text-white transition-colors text-sm"
|
||||
>
|
||||
{service.name}
|
||||
</a>
|
||||
|
|
@ -86,13 +89,13 @@ const Footer = () => {
|
|||
|
||||
{/* Industries */}
|
||||
<div>
|
||||
<h3 className="font-semibold mb-4 text-lg">Industries</h3>
|
||||
<h3 className="font-semibold mb-4 text-sm uppercase tracking-wider text-cyan">Industries</h3>
|
||||
<ul className="space-y-2">
|
||||
{industries.map((industry) => (
|
||||
<li key={industry.name}>
|
||||
<a
|
||||
href={industry.href}
|
||||
className="text-soft-text hover:text-white transition-colors text-sm"
|
||||
className="text-navy-light hover:text-white transition-colors text-sm"
|
||||
>
|
||||
{industry.name}
|
||||
</a>
|
||||
|
|
@ -103,8 +106,8 @@ const Footer = () => {
|
|||
</div>
|
||||
|
||||
{/* Bottom */}
|
||||
<div className="border-t border-white/10 mt-8 pt-8 text-center">
|
||||
<p className="text-soft-text text-sm">
|
||||
<div className="border-t border-white/10 pt-8">
|
||||
<p className="text-center text-navy-light text-sm">
|
||||
8x8 Certified Partner | Veteran Owned | 25+ Years Experience
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -24,17 +24,17 @@ const Header = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<header className={`sticky top-0 z-40 w-full border-b transition-all duration-300 ${isScrolled ? 'bg-background/90 backdrop-blur shadow-sm -translate-y-px' : 'bg-transparent'}`}>
|
||||
<header className={`sticky top-0 z-40 w-full transition-all duration-300 ${isScrolled ? 'bg-primary-navy shadow-md' : 'bg-primary-navy/95'}`}>
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex h-16 items-center justify-between">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<img
|
||||
src="/logo.svg"
|
||||
alt="Queue North Technologies"
|
||||
className="h-8 w-auto"
|
||||
className="h-8 w-auto flex-shrink-0"
|
||||
/>
|
||||
<span className="font-bold text-xl text-primary-navy hidden sm:block">Queue North</span>
|
||||
<span className="font-bold text-xl text-white hidden sm:block tracking-tight">Queue North</span>
|
||||
</div>
|
||||
|
||||
{/* Desktop Nav */}
|
||||
|
|
@ -43,7 +43,7 @@ const Header = () => {
|
|||
<a
|
||||
key={link.name}
|
||||
href={link.href}
|
||||
className="text-sm font-medium text-text hover:text-primary-navy transition-colors"
|
||||
className="text-sm font-medium text-navy-light hover:text-white transition-colors"
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
|
|
@ -51,18 +51,15 @@ const Header = () => {
|
|||
</nav>
|
||||
|
||||
{/* CTA Button */}
|
||||
<div className="hidden md:flex">
|
||||
<a
|
||||
href="/contact"
|
||||
className="bg-primary-navy text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-primary-navy-dark transition-colors"
|
||||
>
|
||||
<div className="hidden md:block">
|
||||
<a href="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-3 bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors">
|
||||
Request Consultation
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Toggle */}
|
||||
<SheetTrigger asChild>
|
||||
<button className="md:hidden p-2 text-text hover:text-primary-navy focus:outline-none focus:ring-2 focus:ring-primary-navy rounded-md">
|
||||
<button className="md:hidden p-2 text-white hover:text-cyan transition-colors focus:outline-none focus:ring-2 focus:ring-cyan rounded-md">
|
||||
<span className="sr-only">Open menu</span>
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
|
|
|
|||
|
|
@ -4,16 +4,30 @@ import { useState } from 'react'
|
|||
const MobileNav = () => {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
|
||||
const navLinks = [
|
||||
const primaryLinks = [
|
||||
{ name: 'Home', href: '/' },
|
||||
{ name: 'Services', href: '/services' },
|
||||
{ name: 'Industries', href: '/industries' },
|
||||
{ name: '8x8', href: '/8x8' },
|
||||
{ name: 'About', href: '/about' },
|
||||
{ name: 'Contact', href: '/contact' },
|
||||
{ name: 'Support', href: '/support' },
|
||||
]
|
||||
|
||||
const services = [
|
||||
{ name: 'Unified Communications', href: '/services/unified-communications' },
|
||||
{ name: 'Contact Center', href: '/services/contact-center' },
|
||||
{ name: 'Managed Support', href: '/services/managed-support' },
|
||||
{ name: 'Consulting & Training', href: '/services/consulting-training' },
|
||||
{ name: 'Infrastructure Cabling', href: '/services/infrastructure-cabling' },
|
||||
{ name: 'Wireless Access', href: '/services/wireless-access' },
|
||||
{ name: 'Local Networking', href: '/services/local-networking' },
|
||||
]
|
||||
|
||||
const industries = [
|
||||
{ name: 'Healthcare', href: '/industries/healthcare' },
|
||||
{ name: 'Retail', href: '/industries/retail' },
|
||||
{ name: 'Manufacturing', href: '/industries/manufacturing' },
|
||||
{ name: 'Education & Finance', href: '/industries/education-finance' },
|
||||
]
|
||||
|
||||
const closeMobileMenu = () => {
|
||||
setIsOpen(false)
|
||||
}
|
||||
|
|
@ -22,7 +36,7 @@ const MobileNav = () => {
|
|||
<div className="md:hidden">
|
||||
<Sheet open={isOpen} onOpenChange={setIsOpen}>
|
||||
<SheetTrigger asChild>
|
||||
<button className="p-2 text-text hover:text-primary-navy focus:outline-none">
|
||||
<button className="p-2 text-white hover:text-cyan focus:outline-none focus:ring-2 focus:ring-cyan rounded-md">
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
fill="none"
|
||||
|
|
@ -39,35 +53,78 @@ const MobileNav = () => {
|
|||
<span className="sr-only">Open menu</span>
|
||||
</button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="right" className="w-[280px] sm:w-[320px]">
|
||||
<SheetContent side="right" className="w-[300px] sm:w-[350px] bg-primary-navy text-white">
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<img
|
||||
src="/logo.svg"
|
||||
alt="Queue North"
|
||||
className="h-8 w-auto"
|
||||
className="h-9 w-auto"
|
||||
/>
|
||||
<span className="font-bold text-xl text-primary-navy">Queue North</span>
|
||||
<span className="font-bold text-xl">Queue North</span>
|
||||
</div>
|
||||
|
||||
<nav className="flex flex-col space-y-4">
|
||||
{navLinks.map((link) => (
|
||||
<a
|
||||
key={link.name}
|
||||
href={link.href}
|
||||
onClick={closeMobileMenu}
|
||||
className="text-base font-medium text-text hover:text-primary-navy py-2 border-b border-gray-100 last:border-0"
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
))}
|
||||
<nav className="flex flex-col space-y-6">
|
||||
{/* Primary Links */}
|
||||
<div>
|
||||
<h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3">Primary</h4>
|
||||
<ul className="space-y-2">
|
||||
{primaryLinks.map((link) => (
|
||||
<li key={link.name}>
|
||||
<a
|
||||
href={link.href}
|
||||
onClick={closeMobileMenu}
|
||||
className="block text-base font-medium text-navy-light hover:text-white transition-colors py-2"
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Services */}
|
||||
<div>
|
||||
<h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3">Services</h4>
|
||||
<ul className="space-y-2">
|
||||
{services.map((service) => (
|
||||
<li key={service.name}>
|
||||
<a
|
||||
href={service.href}
|
||||
onClick={closeMobileMenu}
|
||||
className="block text-sm text-navy-light hover:text-white transition-colors py-2 border-b border-white/10 last:border-0"
|
||||
>
|
||||
{service.name}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Industries */}
|
||||
<div>
|
||||
<h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3">Industries</h4>
|
||||
<ul className="space-y-2">
|
||||
{industries.map((industry) => (
|
||||
<li key={industry.name}>
|
||||
<a
|
||||
href={industry.href}
|
||||
onClick={closeMobileMenu}
|
||||
className="block text-sm text-navy-light hover:text-white transition-colors py-2 border-b border-white/10 last:border-0"
|
||||
>
|
||||
{industry.name}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div className="mt-auto pt-6">
|
||||
<a
|
||||
href="/contact"
|
||||
onClick={closeMobileMenu}
|
||||
className="block w-full bg-primary-navy text-white px-4 py-3 rounded-md text-center font-medium hover:bg-primary-navy-dark transition-colors"
|
||||
className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 w-full bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors"
|
||||
>
|
||||
Request Consultation
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,6 @@
|
|||
import * as React from 'react'
|
||||
|
||||
const Button = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
||||
variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'link'
|
||||
size?: 'default' | 'sm' | 'lg' | 'icon'
|
||||
}
|
||||
>(({ className = '', variant = 'default', size = 'default', ...props }, ref) => {
|
||||
const Button = React.forwardRef(({ className = '', variant = 'default', size = 'default', ...props }, ref) => {
|
||||
const baseStyles = 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none'
|
||||
|
||||
const variants = {
|
||||
|
|
@ -27,7 +21,7 @@ const Button = React.forwardRef<
|
|||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
|
||||
className={`${baseStyles} ${variants[variant] || ''} ${sizes[size] || ''} ${className}`}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ export default {
|
|||
text: '#0F172A',
|
||||
muted: '#475569',
|
||||
'soft-text': '#64748B',
|
||||
'navy-light': '#68A3B8',
|
||||
primary: {
|
||||
navy: '#0B2A3C',
|
||||
'navy-dark': '#071A2A',
|
||||
|
|
|
|||
Loading…
Reference in New Issue