781 lines
31 KiB
TypeScript
781 lines
31 KiB
TypeScript
"use client";
|
|
|
|
import { motion, useScroll, useTransform } from "framer-motion";
|
|
import Image from "next/image";
|
|
import { useRef } from "react";
|
|
import Navigation from "./components/Navigation";
|
|
import Footer from "./components/Footer";
|
|
import AnimatedButton from "./components/AnimatedButton";
|
|
import FadeIn, { StaggerContainer, StaggerItem } from "./components/FadeIn";
|
|
import {
|
|
ArrowRightIcon,
|
|
PackageIcon,
|
|
LeafIcon,
|
|
UsersIcon,
|
|
TruckIcon,
|
|
TargetIcon,
|
|
HeartIcon,
|
|
SparklesIcon,
|
|
MapPinIcon,
|
|
CheckIcon,
|
|
RecycleIcon,
|
|
} from "./components/Icons";
|
|
|
|
const stats = [
|
|
{ value: "100+", label: "Years Combined Experience" },
|
|
{ value: "10", label: "States Covered" },
|
|
{ value: "2005", label: "Industry Trusted Since" },
|
|
{ value: "5", label: "Product Categories" },
|
|
];
|
|
|
|
const productCategories = [
|
|
{
|
|
icon: PackageIcon,
|
|
title: "Food Packaging",
|
|
description:
|
|
"Premium containers, cutlery, and packaging solutions for every foodservice need.",
|
|
color: "from-orange-500 to-red-500",
|
|
},
|
|
{
|
|
icon: LeafIcon,
|
|
title: "Green Products",
|
|
description:
|
|
"Sustainable, compostable, and eco-friendly alternatives for conscious businesses.",
|
|
color: "from-emerald-500 to-teal-500",
|
|
},
|
|
{
|
|
icon: SparklesIcon,
|
|
title: "Specialty Products",
|
|
description:
|
|
"Custom printed containers, wraps, and premium catering solutions.",
|
|
color: "from-purple-500 to-pink-500",
|
|
},
|
|
{
|
|
icon: TruckIcon,
|
|
title: "Janitorial",
|
|
description:
|
|
"Complete range of cleaning supplies and janitorial essentials.",
|
|
color: "from-blue-500 to-cyan-500",
|
|
},
|
|
];
|
|
|
|
const values = [
|
|
{
|
|
icon: HeartIcon,
|
|
title: "Family First",
|
|
description:
|
|
"Building character, strengthening individuals, and nurturing families.",
|
|
},
|
|
{
|
|
icon: UsersIcon,
|
|
title: "Integrity",
|
|
description: "Selflessness, servanthood, and confident humility in all we do.",
|
|
},
|
|
{
|
|
icon: TargetIcon,
|
|
title: "Purpose Driven",
|
|
description: "Professional, ethical representation with symbiotic growth.",
|
|
},
|
|
];
|
|
|
|
const territories = [
|
|
"Colorado",
|
|
"Washington",
|
|
"Oregon",
|
|
"Idaho",
|
|
"Utah",
|
|
"Wyoming",
|
|
"Montana",
|
|
"New Mexico",
|
|
"Nebraska",
|
|
"Arizona",
|
|
];
|
|
|
|
export default function Home() {
|
|
const heroRef = useRef<HTMLDivElement>(null);
|
|
const { scrollYProgress } = useScroll({
|
|
target: heroRef,
|
|
offset: ["start start", "end start"],
|
|
});
|
|
|
|
const heroY = useTransform(scrollYProgress, [0, 1], ["0%", "30%"]);
|
|
const heroOpacity = useTransform(scrollYProgress, [0, 0.5], [1, 0]);
|
|
|
|
return (
|
|
<main className="relative">
|
|
<Navigation />
|
|
|
|
{/* Hero Section */}
|
|
<div ref={heroRef} className="relative">
|
|
<section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-b from-neutral-50 to-white dark:from-neutral-950 dark:to-neutral-900">
|
|
{/* Animated background elements */}
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
<motion.div
|
|
className="absolute top-1/4 -left-32 w-96 h-96 bg-[hsl(0,100%,70%)] rounded-full filter blur-[120px] opacity-20"
|
|
animate={{
|
|
scale: [1, 1.2, 1],
|
|
x: [0, 30, 0],
|
|
}}
|
|
transition={{
|
|
duration: 8,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
}}
|
|
/>
|
|
<motion.div
|
|
className="absolute bottom-1/4 -right-32 w-96 h-96 bg-[hsl(0,100%,50%)] rounded-full filter blur-[120px] opacity-15"
|
|
animate={{
|
|
scale: [1.2, 1, 1.2],
|
|
x: [0, -30, 0],
|
|
}}
|
|
transition={{
|
|
duration: 10,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
}}
|
|
/>
|
|
<motion.div
|
|
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-br from-[hsl(0,100%,40%)] to-[hsl(20,100%,50%)] rounded-full filter blur-[200px] opacity-5"
|
|
animate={{
|
|
rotate: [0, 360],
|
|
}}
|
|
transition={{
|
|
duration: 60,
|
|
repeat: Infinity,
|
|
ease: "linear",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* Grid pattern overlay */}
|
|
<div
|
|
className="absolute inset-0 opacity-[0.02]"
|
|
style={{
|
|
backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
|
|
}}
|
|
/>
|
|
|
|
<motion.div
|
|
style={{ y: heroY, opacity: heroOpacity }}
|
|
className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"
|
|
>
|
|
{/* Badge */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[hsl(0,100%,40%)]/10 border border-[hsl(0,100%,40%)]/20 mb-8"
|
|
>
|
|
<span className="w-2 h-2 rounded-full bg-[hsl(0,100%,40%)] animate-pulse" />
|
|
<span className="text-sm font-medium text-[hsl(0,100%,35%)] dark:text-[hsl(0,100%,60%)]">
|
|
Trusted Since 2005
|
|
</span>
|
|
</motion.div>
|
|
|
|
{/* Main heading */}
|
|
<motion.h1
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight text-neutral-900 dark:text-white mb-6"
|
|
>
|
|
Your{" "}
|
|
<span className="relative inline-block">
|
|
<span className="relative z-10 bg-gradient-to-r from-[hsl(0,100%,35%)] via-[hsl(0,100%,45%)] to-[hsl(0,100%,55%)] bg-clip-text text-transparent">
|
|
Foodservice
|
|
</span>
|
|
<motion.span
|
|
className="absolute -bottom-2 left-0 right-0 h-3 bg-[hsl(0,100%,40%)]/20 -skew-x-3"
|
|
initial={{ scaleX: 0 }}
|
|
animate={{ scaleX: 1 }}
|
|
transition={{ duration: 0.6, delay: 0.8 }}
|
|
/>
|
|
</span>{" "}
|
|
&<br />
|
|
<span className="relative inline-block mt-2">
|
|
<span className="relative z-10 bg-gradient-to-r from-[hsl(0,100%,35%)] via-[hsl(0,100%,45%)] to-[hsl(0,100%,55%)] bg-clip-text text-transparent">
|
|
Janitorial
|
|
</span>
|
|
<motion.span
|
|
className="absolute -bottom-2 left-0 right-0 h-3 bg-[hsl(0,100%,40%)]/20 skew-x-3"
|
|
initial={{ scaleX: 0 }}
|
|
animate={{ scaleX: 1 }}
|
|
transition={{ duration: 0.6, delay: 1 }}
|
|
/>
|
|
</span>{" "}
|
|
Experts
|
|
</motion.h1>
|
|
|
|
{/* Subheading */}
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.5 }}
|
|
className="max-w-2xl mx-auto text-lg sm:text-xl text-neutral-600 dark:text-neutral-400 mb-10 leading-relaxed"
|
|
>
|
|
With over 100 years of combined experience, we deliver exceptional
|
|
sales and marketing solutions across the Rocky Mountain and
|
|
Northwest regions.
|
|
</motion.p>
|
|
|
|
{/* CTA Buttons */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.7 }}
|
|
className="flex flex-col sm:flex-row items-center justify-center gap-4"
|
|
>
|
|
<AnimatedButton
|
|
href="/contact"
|
|
size="lg"
|
|
icon={<ArrowRightIcon size={18} />}
|
|
>
|
|
Get in Touch
|
|
</AnimatedButton>
|
|
<AnimatedButton href="/what-we-do" variant="outline" size="lg">
|
|
Learn More
|
|
</AnimatedButton>
|
|
</motion.div>
|
|
|
|
{/* Scroll indicator */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 1.5 }}
|
|
className="absolute bottom-8 left-1/2 -translate-x-1/2"
|
|
>
|
|
<motion.div
|
|
animate={{ y: [0, 10, 0] }}
|
|
transition={{ duration: 1.5, repeat: Infinity }}
|
|
className="w-6 h-10 rounded-full border-2 border-neutral-300 dark:border-neutral-700 flex items-start justify-center p-2"
|
|
>
|
|
<motion.div
|
|
animate={{ y: [0, 12, 0] }}
|
|
transition={{ duration: 1.5, repeat: Infinity }}
|
|
className="w-1.5 h-1.5 rounded-full bg-[hsl(0,100%,40%)]"
|
|
/>
|
|
</motion.div>
|
|
</motion.div>
|
|
</motion.div>
|
|
</section>
|
|
</div>
|
|
|
|
{/* Stats Section */}
|
|
<section className="relative py-20 bg-neutral-900 dark:bg-neutral-950 overflow-hidden">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-[hsl(0,100%,40%)]/10 via-transparent to-[hsl(0,100%,40%)]/10" />
|
|
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-4">
|
|
{stats.map((stat, index) => (
|
|
<FadeIn key={stat.label} delay={index * 0.1} className="text-center">
|
|
<motion.div
|
|
whileHover={{ scale: 1.05 }}
|
|
className="group cursor-default"
|
|
>
|
|
<motion.span
|
|
className="block text-4xl sm:text-5xl font-bold text-white mb-2 group-hover:text-[hsl(0,100%,60%)] transition-colors"
|
|
initial={{ opacity: 0, scale: 0.5 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{
|
|
type: "spring",
|
|
stiffness: 200,
|
|
damping: 15,
|
|
delay: index * 0.1,
|
|
}}
|
|
>
|
|
{stat.value}
|
|
</motion.span>
|
|
<span className="text-neutral-400 text-sm sm:text-base">
|
|
{stat.label}
|
|
</span>
|
|
</motion.div>
|
|
</FadeIn>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* About Section */}
|
|
<section className="section-padding bg-white dark:bg-neutral-900">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
|
{/* Content */}
|
|
<div>
|
|
<FadeIn>
|
|
<span className="inline-block px-4 py-1.5 rounded-full bg-[hsl(0,100%,40%)]/10 text-[hsl(0,100%,40%)] text-sm font-medium mb-6">
|
|
About Us
|
|
</span>
|
|
</FadeIn>
|
|
<FadeIn delay={0.1}>
|
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-neutral-900 dark:text-white mb-6 leading-tight">
|
|
Driving Growth Through{" "}
|
|
<span className="text-[hsl(0,100%,40%)]">
|
|
Strategic Partnership
|
|
</span>
|
|
</h2>
|
|
</FadeIn>
|
|
<FadeIn delay={0.2}>
|
|
<p className="text-lg text-neutral-600 dark:text-neutral-400 mb-6 leading-relaxed">
|
|
We believe in “pull thru” selling, using key operators to
|
|
direct distribution. Our integrated, end-user focused sales
|
|
approach ensures we exceed growth goals for our manufacturers.
|
|
</p>
|
|
</FadeIn>
|
|
<FadeIn delay={0.3}>
|
|
<p className="text-lg text-neutral-600 dark:text-neutral-400 mb-8 leading-relaxed">
|
|
We maintain continuity with our distributor's sales force,
|
|
providing them with the tools they need to successfully sell
|
|
our products day-to-day.
|
|
</p>
|
|
</FadeIn>
|
|
<FadeIn delay={0.4}>
|
|
<AnimatedButton
|
|
href="/what-we-do"
|
|
icon={<ArrowRightIcon size={18} />}
|
|
>
|
|
Discover Our Approach
|
|
</AnimatedButton>
|
|
</FadeIn>
|
|
</div>
|
|
|
|
{/* Image/Visual */}
|
|
<FadeIn direction="right" delay={0.2}>
|
|
<div className="relative">
|
|
<div className="relative aspect-square rounded-3xl overflow-hidden bg-gradient-to-br from-neutral-100 to-neutral-200 dark:from-neutral-800 dark:to-neutral-900">
|
|
{/* Decorative elements */}
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<motion.div
|
|
className="relative w-64 h-64"
|
|
animate={{ rotate: 360 }}
|
|
transition={{
|
|
duration: 60,
|
|
repeat: Infinity,
|
|
ease: "linear",
|
|
}}
|
|
>
|
|
{[...Array(8)].map((_, i) => (
|
|
<motion.div
|
|
key={i}
|
|
className="absolute w-4 h-4 rounded-full bg-[hsl(0,100%,40%)]"
|
|
style={{
|
|
top: "50%",
|
|
left: "50%",
|
|
transform: `rotate(${i * 45}deg) translateY(-120px)`,
|
|
}}
|
|
initial={{ scale: 0 }}
|
|
whileInView={{ scale: 1 }}
|
|
transition={{ delay: i * 0.1 }}
|
|
viewport={{ once: true }}
|
|
/>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<motion.div
|
|
whileHover={{ scale: 1.05, rotate: 5 }}
|
|
className="bg-white dark:bg-neutral-800 p-8 rounded-2xl shadow-2xl"
|
|
>
|
|
<Image
|
|
src="/assets/brand-logo.png"
|
|
alt="TCM Sales"
|
|
width={150}
|
|
height={150}
|
|
className="w-32 h-32 object-contain"
|
|
/>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
{/* Floating badge */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ scale: 1.05, y: -5 }}
|
|
className="absolute -bottom-6 -right-6 bg-[hsl(0,100%,40%)] text-white px-6 py-4 rounded-2xl shadow-xl"
|
|
>
|
|
<span className="block text-3xl font-bold">20+</span>
|
|
<span className="text-sm opacity-90">Years of Excellence</span>
|
|
</motion.div>
|
|
</div>
|
|
</FadeIn>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Values Section */}
|
|
<section className="section-padding bg-neutral-50 dark:bg-neutral-950">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center mb-16">
|
|
<FadeIn>
|
|
<span className="inline-block px-4 py-1.5 rounded-full bg-[hsl(0,100%,40%)]/10 text-[hsl(0,100%,40%)] text-sm font-medium mb-6">
|
|
Our Philosophy
|
|
</span>
|
|
</FadeIn>
|
|
<FadeIn delay={0.1}>
|
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-neutral-900 dark:text-white mb-6">
|
|
Built on{" "}
|
|
<span className="text-[hsl(0,100%,40%)]">Strong Values</span>
|
|
</h2>
|
|
</FadeIn>
|
|
<FadeIn delay={0.2}>
|
|
<p className="max-w-2xl mx-auto text-lg text-neutral-600 dark:text-neutral-400">
|
|
Our mission is to glorify God by being faithful stewards,
|
|
serving our employees and families, and making a positive impact.
|
|
</p>
|
|
</FadeIn>
|
|
</div>
|
|
|
|
<StaggerContainer className="grid md:grid-cols-3 gap-8">
|
|
{values.map((value) => (
|
|
<StaggerItem key={value.title}>
|
|
<motion.div
|
|
whileHover={{ y: -10, scale: 1.02 }}
|
|
className="group relative bg-white dark:bg-neutral-900 p-8 rounded-3xl shadow-lg shadow-black/5 hover:shadow-xl transition-all duration-500 border border-neutral-100 dark:border-neutral-800"
|
|
>
|
|
<motion.div
|
|
whileHover={{ rotate: 360, scale: 1.1 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] flex items-center justify-center text-white mb-6"
|
|
>
|
|
<value.icon size={24} />
|
|
</motion.div>
|
|
<h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3 group-hover:text-[hsl(0,100%,40%)] transition-colors">
|
|
{value.title}
|
|
</h3>
|
|
<p className="text-neutral-600 dark:text-neutral-400 leading-relaxed">
|
|
{value.description}
|
|
</p>
|
|
<motion.div
|
|
className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] rounded-b-3xl origin-left"
|
|
initial={{ scaleX: 0 }}
|
|
whileHover={{ scaleX: 1 }}
|
|
transition={{ duration: 0.3 }}
|
|
/>
|
|
</motion.div>
|
|
</StaggerItem>
|
|
))}
|
|
</StaggerContainer>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Products Section */}
|
|
<section className="section-padding bg-white dark:bg-neutral-900">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex flex-col lg:flex-row lg:items-end lg:justify-between mb-16 gap-6">
|
|
<div>
|
|
<FadeIn>
|
|
<span className="inline-block px-4 py-1.5 rounded-full bg-[hsl(0,100%,40%)]/10 text-[hsl(0,100%,40%)] text-sm font-medium mb-6">
|
|
Our Products
|
|
</span>
|
|
</FadeIn>
|
|
<FadeIn delay={0.1}>
|
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-neutral-900 dark:text-white">
|
|
Everything You{" "}
|
|
<span className="text-[hsl(0,100%,40%)]">Need</span>
|
|
</h2>
|
|
</FadeIn>
|
|
</div>
|
|
<FadeIn delay={0.2}>
|
|
<AnimatedButton
|
|
href="/products"
|
|
variant="outline"
|
|
icon={<ArrowRightIcon size={18} />}
|
|
>
|
|
View All Products
|
|
</AnimatedButton>
|
|
</FadeIn>
|
|
</div>
|
|
|
|
<StaggerContainer className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{productCategories.map((category) => (
|
|
<StaggerItem key={category.title}>
|
|
<motion.div
|
|
whileHover={{ y: -10 }}
|
|
className="group relative bg-neutral-50 dark:bg-neutral-800 p-6 rounded-3xl cursor-pointer overflow-hidden"
|
|
>
|
|
{/* Gradient overlay on hover */}
|
|
<motion.div
|
|
className={`absolute inset-0 bg-gradient-to-br ${category.color} opacity-0 group-hover:opacity-10 transition-opacity duration-500`}
|
|
/>
|
|
|
|
<motion.div
|
|
whileHover={{ scale: 1.1, rotate: 5 }}
|
|
className={`relative w-14 h-14 rounded-2xl bg-gradient-to-br ${category.color} flex items-center justify-center text-white mb-5`}
|
|
>
|
|
<category.icon size={24} />
|
|
</motion.div>
|
|
|
|
<h3 className="relative text-lg font-bold text-neutral-900 dark:text-white mb-2 group-hover:text-[hsl(0,100%,40%)] transition-colors">
|
|
{category.title}
|
|
</h3>
|
|
<p className="relative text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
|
|
{category.description}
|
|
</p>
|
|
|
|
<motion.div
|
|
initial={{ x: -10, opacity: 0 }}
|
|
whileHover={{ x: 0, opacity: 1 }}
|
|
className="absolute bottom-6 right-6"
|
|
>
|
|
<ArrowRightIcon
|
|
size={20}
|
|
className="text-[hsl(0,100%,40%)]"
|
|
/>
|
|
</motion.div>
|
|
</motion.div>
|
|
</StaggerItem>
|
|
))}
|
|
</StaggerContainer>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Territory Section */}
|
|
<section className="section-padding bg-neutral-900 dark:bg-neutral-950 text-white relative overflow-hidden">
|
|
{/* Background map pattern */}
|
|
<div className="absolute inset-0 opacity-5">
|
|
<svg className="w-full h-full" viewBox="0 0 800 600">
|
|
<path
|
|
d="M100 200 Q 200 100 300 200 T 500 200 T 700 200"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
fill="none"
|
|
/>
|
|
<circle cx="150" cy="180" r="8" fill="currentColor" />
|
|
<circle cx="300" cy="200" r="8" fill="currentColor" />
|
|
<circle cx="500" cy="200" r="8" fill="currentColor" />
|
|
<circle cx="650" cy="220" r="8" fill="currentColor" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
|
<div>
|
|
<FadeIn>
|
|
<span className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/10 text-white/80 text-sm font-medium mb-6">
|
|
<MapPinIcon size={16} />
|
|
Our Coverage
|
|
</span>
|
|
</FadeIn>
|
|
<FadeIn delay={0.1}>
|
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
|
|
Serving the{" "}
|
|
<span className="text-[hsl(0,100%,55%)]">Rocky Mountain</span>{" "}
|
|
& <span className="text-[hsl(0,100%,55%)]">Northwest</span>{" "}
|
|
Regions
|
|
</h2>
|
|
</FadeIn>
|
|
<FadeIn delay={0.2}>
|
|
<p className="text-lg text-neutral-400 mb-8 leading-relaxed">
|
|
Our head office is in Denver, Colorado, but our dedicated team
|
|
works across ten states to provide exceptional service and
|
|
support.
|
|
</p>
|
|
</FadeIn>
|
|
|
|
{/* Territory grid */}
|
|
<FadeIn delay={0.3}>
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
|
|
{territories.map((territory, index) => (
|
|
<motion.div
|
|
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="flex items-center gap-2 px-4 py-3 bg-white/5 rounded-xl cursor-default transition-colors"
|
|
>
|
|
<CheckIcon size={16} className="text-[hsl(0,100%,55%)]" />
|
|
<span className="text-sm font-medium">{territory}</span>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</FadeIn>
|
|
|
|
<FadeIn delay={0.4}>
|
|
<div className="mt-8">
|
|
<AnimatedButton
|
|
href="/contact"
|
|
icon={<ArrowRightIcon size={18} />}
|
|
>
|
|
Contact Us
|
|
</AnimatedButton>
|
|
</div>
|
|
</FadeIn>
|
|
</div>
|
|
|
|
{/* Decorative Map Visual */}
|
|
<FadeIn direction="right" delay={0.2}>
|
|
<div className="relative aspect-square">
|
|
<motion.div
|
|
className="absolute inset-0 rounded-3xl bg-gradient-to-br from-[hsl(0,100%,40%)]/20 to-transparent"
|
|
animate={{
|
|
scale: [1, 1.05, 1],
|
|
}}
|
|
transition={{
|
|
duration: 4,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
}}
|
|
/>
|
|
<div className="absolute inset-4 rounded-2xl border border-white/10 flex items-center justify-center">
|
|
<motion.div
|
|
animate={{
|
|
scale: [1, 1.1, 1],
|
|
opacity: [0.5, 1, 0.5],
|
|
}}
|
|
transition={{
|
|
duration: 2,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
}}
|
|
className="w-32 h-32 rounded-full bg-[hsl(0,100%,40%)]/30 flex items-center justify-center"
|
|
>
|
|
<div className="w-20 h-20 rounded-full bg-[hsl(0,100%,40%)]/50 flex items-center justify-center">
|
|
<MapPinIcon size={32} className="text-white" />
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
{/* Floating location dots */}
|
|
{[
|
|
{ top: "20%", left: "30%" },
|
|
{ top: "40%", left: "60%" },
|
|
{ top: "60%", left: "25%" },
|
|
{ top: "75%", left: "70%" },
|
|
{ top: "30%", left: "75%" },
|
|
].map((pos, i) => (
|
|
<motion.div
|
|
key={i}
|
|
className="absolute w-3 h-3 rounded-full bg-[hsl(0,100%,55%)]"
|
|
style={{ top: pos.top, left: pos.left }}
|
|
animate={{
|
|
scale: [1, 1.5, 1],
|
|
opacity: [0.5, 1, 0.5],
|
|
}}
|
|
transition={{
|
|
duration: 2,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
delay: i * 0.3,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</FadeIn>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Sustainability CTA */}
|
|
<section className="section-padding bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-950/30 dark:to-teal-950/30 relative overflow-hidden">
|
|
{/* Background decoration */}
|
|
<motion.div
|
|
className="absolute top-0 right-0 w-96 h-96 bg-emerald-400 rounded-full filter blur-[150px] opacity-20"
|
|
animate={{
|
|
scale: [1, 1.2, 1],
|
|
x: [0, 50, 0],
|
|
}}
|
|
transition={{
|
|
duration: 8,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
}}
|
|
/>
|
|
|
|
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-3xl mx-auto text-center">
|
|
<FadeIn>
|
|
<motion.div
|
|
whileHover={{ rotate: 360 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-emerald-500 text-white mb-6"
|
|
>
|
|
<RecycleIcon size={32} />
|
|
</motion.div>
|
|
</FadeIn>
|
|
<FadeIn delay={0.1}>
|
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-neutral-900 dark:text-white mb-6">
|
|
Committed to{" "}
|
|
<span className="text-emerald-600">Sustainability</span>
|
|
</h2>
|
|
</FadeIn>
|
|
<FadeIn delay={0.2}>
|
|
<p className="text-lg text-neutral-600 dark:text-neutral-400 mb-8 leading-relaxed">
|
|
Go green and find the perfect sustainable product options for
|
|
your business. We offer a comprehensive range of eco-friendly,
|
|
compostable, and recyclable alternatives.
|
|
</p>
|
|
</FadeIn>
|
|
<FadeIn delay={0.3}>
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<AnimatedButton
|
|
href="/sustainability"
|
|
variant="accent"
|
|
size="lg"
|
|
icon={<LeafIcon size={18} />}
|
|
>
|
|
Explore Green Products
|
|
</AnimatedButton>
|
|
<AnimatedButton
|
|
href="/state-ordinances"
|
|
variant="outline"
|
|
size="lg"
|
|
>
|
|
State Ordinances
|
|
</AnimatedButton>
|
|
</div>
|
|
</FadeIn>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Final CTA */}
|
|
<section className="section-padding bg-[hsl(0,100%,40%)] text-white relative overflow-hidden">
|
|
{/* Background pattern */}
|
|
<div className="absolute inset-0 opacity-10">
|
|
<svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
|
|
<pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
|
|
<path d="M 10 0 L 0 0 0 10" fill="none" stroke="white" strokeWidth="0.5" />
|
|
</pattern>
|
|
<rect width="100%" height="100%" fill="url(#grid)" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<FadeIn>
|
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
|
|
Ready to Get Started?
|
|
</h2>
|
|
</FadeIn>
|
|
<FadeIn delay={0.1}>
|
|
<p className="text-xl text-white/90 mb-10 leading-relaxed">
|
|
Let's talk about your foodservice and janitorial needs. Our team
|
|
is here to help you find the perfect solutions.
|
|
</p>
|
|
</FadeIn>
|
|
<FadeIn delay={0.2}>
|
|
<motion.div
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
className="inline-block"
|
|
>
|
|
<AnimatedButton
|
|
href="/contact"
|
|
variant="secondary"
|
|
size="lg"
|
|
icon={<ArrowRightIcon size={18} />}
|
|
>
|
|
Contact Us Today
|
|
</AnimatedButton>
|
|
</motion.div>
|
|
</FadeIn>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
</main>
|
|
);
|
|
}
|