232 lines
8.4 KiB
TypeScript
232 lines
8.4 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { MapPinIcon, PhoneIcon, MailIcon } from "./Icons";
|
|
|
|
const footerLinks = {
|
|
company: [
|
|
{ href: "/what-we-do", label: "What We Do" },
|
|
{ href: "/culture", label: "Our Culture" },
|
|
{ href: "/contact", label: "Contact Us" },
|
|
],
|
|
products: [
|
|
{ href: "/products", label: "All Products" },
|
|
{ href: "/sustainability", label: "Sustainability" },
|
|
{ href: "/state-ordinances", label: "State Ordinances" },
|
|
],
|
|
categories: [
|
|
{ href: "/products#packaging", label: "Food Packaging" },
|
|
{ href: "/products#green", label: "Green Products" },
|
|
{ href: "/products#janitorial", label: "Janitorial" },
|
|
],
|
|
};
|
|
|
|
const territories = [
|
|
"Colorado",
|
|
"Washington",
|
|
"Oregon",
|
|
"Idaho",
|
|
"Utah",
|
|
"Wyoming",
|
|
"Montana",
|
|
"New Mexico",
|
|
"Nebraska",
|
|
"Arizona",
|
|
];
|
|
|
|
export default function Footer() {
|
|
return (
|
|
<footer className="relative bg-neutral-950 text-white overflow-hidden">
|
|
{/* Decorative gradient */}
|
|
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[hsl(0,100%,40%)] to-transparent" />
|
|
|
|
{/* Background decoration */}
|
|
<div className="absolute top-0 right-0 w-[600px] h-[600px] bg-[hsl(0,100%,40%)] rounded-full filter blur-[200px] opacity-5 -translate-y-1/2 translate-x-1/2" />
|
|
|
|
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
{/* Main Footer Content */}
|
|
<div className="py-16 lg:py-20">
|
|
<div className="grid grid-cols-1 lg:grid-cols-5 gap-12 lg:gap-8">
|
|
{/* Brand Column */}
|
|
<div className="lg:col-span-2">
|
|
<Link href="/" className="inline-block">
|
|
<motion.div
|
|
whileHover={{ scale: 1.05 }}
|
|
className="flex items-center gap-3"
|
|
>
|
|
<Image
|
|
src="/assets/brand-logo.png"
|
|
alt="TCM Sales & Marketing"
|
|
width={50}
|
|
height={50}
|
|
className="w-12 h-12 object-contain brightness-0 invert"
|
|
/>
|
|
<div>
|
|
<span className="font-bold text-xl">TCM</span>
|
|
<span className="text-[hsl(0,100%,50%)] font-bold text-xl">
|
|
{" "}
|
|
Sales & Marketing
|
|
</span>
|
|
</div>
|
|
</motion.div>
|
|
</Link>
|
|
|
|
<p className="mt-6 text-neutral-400 max-w-md leading-relaxed">
|
|
Industry trusted since 2005. Your partner for foodservice and
|
|
janitorial solutions across the Rocky Mountain and Northwest
|
|
regions.
|
|
</p>
|
|
|
|
{/* Contact Info */}
|
|
<div className="mt-8 space-y-4">
|
|
<motion.a
|
|
href="tel:303-371-2810"
|
|
whileHover={{ x: 5 }}
|
|
className="flex items-center gap-3 text-neutral-400 hover:text-white transition-colors group"
|
|
>
|
|
<span className="p-2 rounded-lg bg-white/5 group-hover:bg-[hsl(0,100%,40%)] transition-colors">
|
|
<PhoneIcon size={18} />
|
|
</span>
|
|
<span>303-371-2810</span>
|
|
</motion.a>
|
|
|
|
<motion.a
|
|
href="mailto:info@tcm-sales.com"
|
|
whileHover={{ x: 5 }}
|
|
className="flex items-center gap-3 text-neutral-400 hover:text-white transition-colors group"
|
|
>
|
|
<span className="p-2 rounded-lg bg-white/5 group-hover:bg-[hsl(0,100%,40%)] transition-colors">
|
|
<MailIcon size={18} />
|
|
</span>
|
|
<span>info@tcm-sales.com</span>
|
|
</motion.a>
|
|
|
|
<motion.div
|
|
whileHover={{ x: 5 }}
|
|
className="flex items-start gap-3 text-neutral-400 group"
|
|
>
|
|
<span className="p-2 rounded-lg bg-white/5">
|
|
<MapPinIcon size={18} />
|
|
</span>
|
|
<span className="leading-relaxed">
|
|
12424 East Weaver Place
|
|
<br />
|
|
Centennial, CO 80111
|
|
</span>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Links Columns */}
|
|
<div>
|
|
<h4 className="font-semibold text-white mb-4">Company</h4>
|
|
<ul className="space-y-3">
|
|
{footerLinks.company.map((link) => (
|
|
<li key={link.href}>
|
|
<Link href={link.href}>
|
|
<motion.span
|
|
whileHover={{ x: 5, color: "#ff4d4d" }}
|
|
className="text-neutral-400 hover:text-white transition-colors cursor-pointer inline-block"
|
|
>
|
|
{link.label}
|
|
</motion.span>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="font-semibold text-white mb-4">Products</h4>
|
|
<ul className="space-y-3">
|
|
{footerLinks.products.map((link) => (
|
|
<li key={link.href}>
|
|
<Link href={link.href}>
|
|
<motion.span
|
|
whileHover={{ x: 5, color: "#ff4d4d" }}
|
|
className="text-neutral-400 hover:text-white transition-colors cursor-pointer inline-block"
|
|
>
|
|
{link.label}
|
|
</motion.span>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="font-semibold text-white mb-4">Categories</h4>
|
|
<ul className="space-y-3">
|
|
{footerLinks.categories.map((link) => (
|
|
<li key={link.href}>
|
|
<Link href={link.href}>
|
|
<motion.span
|
|
whileHover={{ x: 5, color: "#ff4d4d" }}
|
|
className="text-neutral-400 hover:text-white transition-colors cursor-pointer inline-block"
|
|
>
|
|
{link.label}
|
|
</motion.span>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Territory Tags */}
|
|
<div className="mt-12 pt-8 border-t border-white/10">
|
|
<p className="text-sm text-neutral-500 mb-4">
|
|
Proudly serving the Rocky Mountain & Northwest regions:
|
|
</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{territories.map((territory, index) => (
|
|
<motion.span
|
|
key={territory}
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
transition={{ delay: index * 0.05 }}
|
|
whileHover={{
|
|
scale: 1.05,
|
|
backgroundColor: "hsl(0, 100%, 40%)",
|
|
}}
|
|
className="px-3 py-1 text-xs font-medium text-neutral-400 bg-white/5 rounded-full cursor-default transition-colors hover:text-white"
|
|
>
|
|
{territory}
|
|
</motion.span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Bar */}
|
|
<div className="py-6 border-t border-white/10 flex flex-col sm:flex-row items-center justify-between gap-4">
|
|
<p className="text-sm text-neutral-500">
|
|
© {new Date().getFullYear()} TCM Sales & Marketing. All rights
|
|
reserved.
|
|
</p>
|
|
<div className="flex items-center gap-6">
|
|
<Link href="/privacy">
|
|
<motion.span
|
|
whileHover={{ color: "#fff" }}
|
|
className="text-sm text-neutral-500 cursor-pointer"
|
|
>
|
|
Privacy Policy
|
|
</motion.span>
|
|
</Link>
|
|
<Link href="/terms">
|
|
<motion.span
|
|
whileHover={{ color: "#fff" }}
|
|
className="text-sm text-neutral-500 cursor-pointer"
|
|
>
|
|
Terms of Service
|
|
</motion.span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|