services
This commit is contained in:
null
parent
09926fed6d
commit
c17ac83b52
|
|
@ -41,7 +41,7 @@ const Footer = () => {
|
|||
return (
|
||||
<footer className="bg-primary-navy text-white">
|
||||
<div className="container mx-auto px-4 pt-24 pb-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{/* Company Info */}
|
||||
<div>
|
||||
<Link to="/" className="inline-flex items-center gap-3 mb-3 group" aria-label="Queue North Technologies Home">
|
||||
|
|
@ -138,12 +138,45 @@ const Footer = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Veteran Owned & Operated */}
|
||||
<div className="border-t border-white/10 py-10 mt-8">
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<div className="flex-1 h-px bg-white/10" />
|
||||
<p className="text-primary-cyan text-xs font-semibold uppercase tracking-[0.2em] whitespace-nowrap">
|
||||
Veteran Owned & Operated
|
||||
</p>
|
||||
<div className="flex-1 h-px bg-white/10" />
|
||||
</div>
|
||||
<div className="flex justify-center gap-6 flex-wrap">
|
||||
<div className="flex flex-col items-center gap-3 bg-white/5 border border-white/10 rounded-xl px-8 py-5 min-w-[160px]">
|
||||
<img
|
||||
src="/assets/brand/usmc-logo.png"
|
||||
alt="United States Marine Corps seal"
|
||||
className="h-14 w-auto brightness-0 invert opacity-90"
|
||||
/>
|
||||
<span className="text-navy-light text-xs font-medium tracking-wide text-center uppercase leading-snug">
|
||||
United States<br />Marine Corps
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-3 bg-white/5 border border-white/10 rounded-xl px-8 py-5 min-w-[160px]">
|
||||
<img
|
||||
src="/assets/brand/usaf-logo.png"
|
||||
alt="United States Air Force seal"
|
||||
className="h-14 w-auto brightness-0 invert opacity-90"
|
||||
/>
|
||||
<span className="text-navy-light text-xs font-medium tracking-wide text-center uppercase leading-snug">
|
||||
United States<br />Air Force
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom */}
|
||||
<div className="border-t border-white/10 pt-8 mt-8">
|
||||
<div className="border-t border-white/10 pt-8">
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="text-navy-light text-sm">
|
||||
8x8 and Cisco Certified Partner · Veteran Owned · 25+ Years Experience
|
||||
8x8 and Cisco Certified Partner · Veteran Owned & Operated · 25+ Years Experience
|
||||
</p>
|
||||
<p className="text-navy-light text-xs">
|
||||
© {currentYear} Queue North Technologies. All rights reserved.
|
||||
|
|
|
|||
|
|
@ -13,6 +13,40 @@ const industryIcons = {
|
|||
landmark: Landmark,
|
||||
}
|
||||
|
||||
const serviceAccentStyles = [
|
||||
{
|
||||
card: 'border-t-[3px] border-t-primary-blue hover:border-primary-blue/50',
|
||||
iconWrap: 'bg-sky-50',
|
||||
icon: 'text-primary-blue',
|
||||
link: 'text-primary-blue hover:text-primary-navy',
|
||||
},
|
||||
{
|
||||
card: 'border-t-[3px] border-t-teal-500 hover:border-teal-500/50',
|
||||
iconWrap: 'bg-teal-50',
|
||||
icon: 'text-teal-600',
|
||||
link: 'text-teal-700 hover:text-primary-navy',
|
||||
},
|
||||
{
|
||||
card: 'border-t-[3px] border-t-cyan-400 hover:border-cyan-400/60',
|
||||
iconWrap: 'bg-cyan-50',
|
||||
icon: 'text-cyan-600',
|
||||
link: 'text-cyan-700 hover:text-primary-navy',
|
||||
},
|
||||
{
|
||||
card: 'border-t-[3px] border-t-accent-gold hover:border-accent-gold/60',
|
||||
iconWrap: 'bg-amber-50',
|
||||
icon: 'text-amber-600',
|
||||
link: 'text-amber-700 hover:text-primary-navy',
|
||||
},
|
||||
]
|
||||
|
||||
const industryAccentStyles = [
|
||||
{ card: 'border-t-[3px] border-t-rose-400 hover:border-rose-400/60', iconWrap: 'bg-rose-50', icon: 'text-rose-600' },
|
||||
{ card: 'border-t-[3px] border-t-primary-blue hover:border-primary-blue/50', iconWrap: 'bg-sky-50', icon: 'text-primary-blue' },
|
||||
{ card: 'border-t-[3px] border-t-accent-gold hover:border-accent-gold/60', iconWrap: 'bg-amber-50', icon: 'text-amber-600' },
|
||||
{ card: 'border-t-[3px] border-t-teal-500 hover:border-teal-500/50', iconWrap: 'bg-teal-50', icon: 'text-teal-600' },
|
||||
]
|
||||
|
||||
const Home = () => {
|
||||
const organizationLd = {
|
||||
'@context': 'https://schema.org',
|
||||
|
|
@ -180,33 +214,37 @@ const Home = () => {
|
|||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{services.map((service) => (
|
||||
<Card key={service.id} className="h-full transition-all hover:border-primary-blue/40 hover:shadow-md">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="bg-primary-navy/10 p-2 rounded-md" aria-hidden="true">
|
||||
{service.icon === 'message-circle' && <MessageCircle className="w-6 h-6 text-primary-navy" />}
|
||||
{service.icon === 'users' && <Users className="w-6 h-6 text-primary-navy" />}
|
||||
{service.icon === 'life-buoy' && <LifeBuoy className="w-6 h-6 text-primary-navy" />}
|
||||
{service.icon === 'graduation-cap' && <GraduationCap className="w-6 h-6 text-primary-navy" />}
|
||||
{service.icon === 'link' && <LinkIcon className="w-6 h-6 text-primary-navy" />}
|
||||
{service.icon === 'wifi' && <Wifi className="w-6 h-6 text-primary-navy" />}
|
||||
{service.icon === 'network' && <Network className="w-6 h-6 text-primary-navy" />}
|
||||
{services.map((service, index) => {
|
||||
const accent = serviceAccentStyles[index % serviceAccentStyles.length]
|
||||
|
||||
return (
|
||||
<Card key={service.id} className={`h-full transition-all hover:shadow-md ${accent.card}`}>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className={`${accent.iconWrap} p-2 rounded-md`} aria-hidden="true">
|
||||
{service.icon === 'message-circle' && <MessageCircle className={`w-6 h-6 ${accent.icon}`} />}
|
||||
{service.icon === 'users' && <Users className={`w-6 h-6 ${accent.icon}`} />}
|
||||
{service.icon === 'life-buoy' && <LifeBuoy className={`w-6 h-6 ${accent.icon}`} />}
|
||||
{service.icon === 'graduation-cap' && <GraduationCap className={`w-6 h-6 ${accent.icon}`} />}
|
||||
{service.icon === 'link' && <LinkIcon className={`w-6 h-6 ${accent.icon}`} />}
|
||||
{service.icon === 'wifi' && <Wifi className={`w-6 h-6 ${accent.icon}`} />}
|
||||
{service.icon === 'network' && <Network className={`w-6 h-6 ${accent.icon}`} />}
|
||||
</div>
|
||||
<CardTitle className="text-left text-primary-navy text-xl" aria-label={service.name}>{service.name}</CardTitle>
|
||||
</div>
|
||||
<CardTitle className="text-primary-navy text-xl" aria-label={service.name}>{service.name}</CardTitle>
|
||||
</div>
|
||||
<CardDescription className="font-medium text-teal-900" aria-label={service.homeDesc}>{service.homeDesc}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Link to={`/services/${service.id}`} className="inline-flex items-center gap-1 text-sm font-semibold text-primary-navy hover:text-primary-blue" aria-label={`Learn more about ${service.name}`}>
|
||||
Learn more
|
||||
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
<CardDescription className="font-medium text-teal-900" aria-label={service.homeDesc}>{service.homeDesc}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Link to={`/services/${service.id}`} className={`inline-flex items-center gap-1 text-sm font-semibold ${accent.link}`} aria-label={`Learn more about ${service.name}`}>
|
||||
Learn more
|
||||
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -226,9 +264,9 @@ const Home = () => {
|
|||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<Card className="bg-white/80">
|
||||
<Card className="bg-white/80 border-t-[3px] border-t-primary-blue">
|
||||
<CardContent className="pt-6">
|
||||
<div className="bg-primary-navy text-white p-3 rounded-md mb-4 inline-flex">
|
||||
<div className="bg-sky-50 text-primary-blue p-3 rounded-md mb-4 inline-flex">
|
||||
<Headphones className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-primary-navy mb-2">Responsiveness</h3>
|
||||
|
|
@ -237,9 +275,9 @@ const Home = () => {
|
|||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-white/80">
|
||||
<Card className="bg-white/80 border-t-[3px] border-t-teal-500">
|
||||
<CardContent className="pt-6">
|
||||
<div className="bg-primary-navy text-white p-3 rounded-md mb-4 inline-flex">
|
||||
<div className="bg-teal-50 text-teal-600 p-3 rounded-md mb-4 inline-flex">
|
||||
<UserCheck className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-primary-navy mb-2">Direct Support</h3>
|
||||
|
|
@ -248,9 +286,9 @@ const Home = () => {
|
|||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-white/80">
|
||||
<Card className="bg-white/80 border-t-[3px] border-t-cyan-400">
|
||||
<CardContent className="pt-6">
|
||||
<div className="bg-primary-navy text-white p-3 rounded-md mb-4 inline-flex">
|
||||
<div className="bg-cyan-50 text-cyan-600 p-3 rounded-md mb-4 inline-flex">
|
||||
<Activity className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-primary-navy mb-2">Proactive Monitoring</h3>
|
||||
|
|
@ -259,9 +297,9 @@ const Home = () => {
|
|||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-white/80">
|
||||
<Card className="bg-white/80 border-t-[3px] border-t-accent-gold">
|
||||
<CardContent className="pt-6">
|
||||
<div className="bg-primary-navy text-white p-3 rounded-md mb-4 inline-flex">
|
||||
<div className="bg-amber-50 text-amber-600 p-3 rounded-md mb-4 inline-flex">
|
||||
<ShieldCheck className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-primary-navy mb-2">Vendor Neutrality</h3>
|
||||
|
|
@ -284,15 +322,17 @@ const Home = () => {
|
|||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{industries.map((industry) => {
|
||||
{industries.map((industry, index) => {
|
||||
const IconComponent = industryIcons[industry.icon] || Building2
|
||||
const accent = industryAccentStyles[index % industryAccentStyles.length]
|
||||
|
||||
return (
|
||||
<Card key={industry.id} className="h-full transition-all hover:border-primary-blue/40 hover:shadow-md">
|
||||
<Card key={industry.id} className={`h-full transition-all hover:shadow-md ${accent.card}`}>
|
||||
<CardContent className="p-6">
|
||||
<div className="w-14 h-14 rounded-md bg-teal-50 flex items-center justify-center mb-4" aria-hidden="true">
|
||||
<IconComponent className="w-8 h-8 text-teal-600" />
|
||||
<div className={`w-14 h-14 rounded-md ${accent.iconWrap} flex items-center justify-center mb-4`} aria-hidden="true">
|
||||
<IconComponent className={`w-8 h-8 ${accent.icon}`} />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-primary-navy mb-3" aria-label={industry.name}>{industry.name}</h3>
|
||||
<h3 className="text-left text-xl font-semibold text-primary-navy mb-3" aria-label={industry.name}>{industry.name}</h3>
|
||||
<p className="text-sm text-soft-text mb-4" aria-label={industry.homeDesc || 'Industry-specific solutions designed to address your unique challenges and requirements.'}>{industry.homeDesc || 'Industry-specific solutions designed to address your unique challenges and requirements.'}</p>
|
||||
<Link to={`/industries/${industry.id}`} className="inline-flex items-center gap-1 text-sm font-semibold text-primary-navy hover:text-primary-blue" aria-label={`Learn more about ${industry.name} industry solutions`}>
|
||||
Learn more
|
||||
|
|
|
|||
Loading…
Reference in New Issue