608 lines
23 KiB
TypeScript
608 lines
23 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { useState } 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,
|
|
SparklesIcon,
|
|
TruckIcon,
|
|
CheckIcon,
|
|
} from "../components/Icons";
|
|
|
|
const categories = [
|
|
{
|
|
id: "packaging",
|
|
icon: PackageIcon,
|
|
title: "Foodservice Packaging",
|
|
description:
|
|
"Complete range of containers, cutlery, and packaging solutions for restaurants, caterers, and food service operations.",
|
|
color: "from-orange-500 to-red-500",
|
|
bgColor: "bg-orange-50 dark:bg-orange-950/20",
|
|
products: [
|
|
"Foam Containers",
|
|
"PETE Deli Containers",
|
|
"Foil Rounds",
|
|
"Microwavable Containers",
|
|
"Disposable Cutlery & Cutlery Kits",
|
|
"Dual Ovenable",
|
|
"Straws",
|
|
"Clear Hinged Containers",
|
|
],
|
|
},
|
|
{
|
|
id: "green",
|
|
icon: LeafIcon,
|
|
title: "Green Products",
|
|
description:
|
|
"Eco-friendly, sustainable alternatives including compostable and recyclable options for environmentally conscious businesses.",
|
|
color: "from-emerald-500 to-teal-500",
|
|
bgColor: "bg-emerald-50 dark:bg-emerald-950/20",
|
|
products: [
|
|
"Dinnerware",
|
|
"Hinged Containers",
|
|
"Compostable Cutlery",
|
|
"Compostable Cups",
|
|
"Compostable Can Liners",
|
|
"Recyclable PETE & PP Containers",
|
|
"PLA Lined Containers",
|
|
],
|
|
},
|
|
{
|
|
id: "catering",
|
|
icon: SparklesIcon,
|
|
title: "Catering & Specialty",
|
|
description:
|
|
"Premium solutions for catering operations including custom printed options and specialty containers.",
|
|
color: "from-purple-500 to-pink-500",
|
|
bgColor: "bg-purple-50 dark:bg-purple-950/20",
|
|
products: [
|
|
"Printed Containers",
|
|
"Printed Wraps & Bags",
|
|
"Specialty Catering Containers",
|
|
"Premium Serving Trays",
|
|
"Custom Branded Solutions",
|
|
],
|
|
},
|
|
{
|
|
id: "janitorial",
|
|
icon: TruckIcon,
|
|
title: "Janitorial Supplies",
|
|
description:
|
|
"Essential cleaning and maintenance supplies to keep your facilities spotless and hygienic.",
|
|
color: "from-blue-500 to-cyan-500",
|
|
bgColor: "bg-blue-50 dark:bg-blue-950/20",
|
|
products: [
|
|
"Can Liners",
|
|
"Toilet Seat Covers",
|
|
"Urinal Blocks",
|
|
"Urinal Screens",
|
|
"Gloves",
|
|
],
|
|
},
|
|
];
|
|
|
|
export default function ProductsPage() {
|
|
const [activeCategory, setActiveCategory] = useState<string | null>(null);
|
|
|
|
return (
|
|
<main className="relative">
|
|
<Navigation />
|
|
|
|
{/* Hero Section */}
|
|
<section className="relative min-h-[60vh] flex items-center justify-center overflow-hidden bg-gradient-to-br from-neutral-50 via-white to-neutral-100 dark:from-neutral-950 dark:via-neutral-900 dark:to-neutral-950">
|
|
{/* Animated background */}
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
<motion.div
|
|
className="absolute top-0 left-1/4 w-[600px] h-[600px] bg-[hsl(0,100%,70%)] rounded-full filter blur-[180px] opacity-10"
|
|
animate={{
|
|
scale: [1, 1.2, 1],
|
|
x: [0, 30, 0],
|
|
}}
|
|
transition={{
|
|
duration: 10,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
}}
|
|
/>
|
|
<motion.div
|
|
className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-emerald-500 rounded-full filter blur-[150px] opacity-10"
|
|
animate={{
|
|
scale: [1.2, 1, 1.2],
|
|
x: [0, -30, 0],
|
|
}}
|
|
transition={{
|
|
duration: 12,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* Floating product icons */}
|
|
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
|
{[
|
|
{ Icon: PackageIcon, top: "20%", left: "10%", delay: 0 },
|
|
{ Icon: LeafIcon, top: "60%", left: "5%", delay: 0.5 },
|
|
{ Icon: SparklesIcon, top: "30%", right: "8%", delay: 1 },
|
|
{ Icon: TruckIcon, top: "70%", right: "12%", delay: 1.5 },
|
|
].map((item, i) => (
|
|
<motion.div
|
|
key={i}
|
|
className="absolute"
|
|
style={{
|
|
top: item.top,
|
|
left: item.left,
|
|
right: item.right,
|
|
}}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 0.2, y: 0 }}
|
|
transition={{ delay: item.delay, duration: 0.8 }}
|
|
>
|
|
<motion.div
|
|
animate={{ y: [0, -15, 0], rotate: [0, 5, 0] }}
|
|
transition={{
|
|
duration: 4,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
delay: item.delay,
|
|
}}
|
|
>
|
|
<item.Icon
|
|
size={48}
|
|
className="text-neutral-300 dark:text-neutral-700"
|
|
/>
|
|
</motion.div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
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"
|
|
>
|
|
<PackageIcon size={16} className="text-[hsl(0,100%,40%)]" />
|
|
<span className="text-sm font-medium text-[hsl(0,100%,35%)] dark:text-[hsl(0,100%,60%)]">
|
|
Our Product Range
|
|
</span>
|
|
</motion.div>
|
|
|
|
<motion.h1
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.1 }}
|
|
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-neutral-900 dark:text-white mb-6"
|
|
>
|
|
Everything You{" "}
|
|
<span className="bg-gradient-to-r from-[hsl(0,100%,35%)] via-[hsl(0,100%,45%)] to-[hsl(0,100%,55%)] bg-clip-text text-transparent">
|
|
Need
|
|
</span>
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
className="max-w-2xl mx-auto text-lg sm:text-xl text-neutral-600 dark:text-neutral-400 mb-10 leading-relaxed"
|
|
>
|
|
From foodservice packaging to janitorial supplies, we offer
|
|
comprehensive solutions for your business needs.
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
className="flex flex-wrap items-center justify-center gap-3"
|
|
>
|
|
{categories.map((cat, index) => (
|
|
<motion.a
|
|
key={cat.id}
|
|
href={`#${cat.id}`}
|
|
whileHover={{ scale: 1.05, y: -2 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.4 + index * 0.1 }}
|
|
className={`inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-gradient-to-r ${cat.color} text-white text-sm font-medium shadow-lg hover:shadow-xl transition-shadow`}
|
|
>
|
|
<cat.icon size={16} />
|
|
{cat.title.split(" ")[0]}
|
|
</motion.a>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Category Navigation */}
|
|
<section className="sticky top-20 z-30 bg-white/80 dark:bg-neutral-900/80 backdrop-blur-xl border-b border-neutral-200 dark:border-neutral-800">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center gap-2 py-4 overflow-x-auto scrollbar-hide">
|
|
{categories.map((cat) => (
|
|
<motion.a
|
|
key={cat.id}
|
|
href={`#${cat.id}`}
|
|
whileHover={{ scale: 1.02 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
onClick={() => setActiveCategory(cat.id)}
|
|
className={`flex items-center gap-2 px-4 py-2 rounded-full whitespace-nowrap text-sm font-medium transition-all ${
|
|
activeCategory === cat.id
|
|
? "bg-[hsl(0,100%,40%)] text-white"
|
|
: "bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700"
|
|
}`}
|
|
>
|
|
<cat.icon size={16} />
|
|
{cat.title}
|
|
</motion.a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Product Categories */}
|
|
{categories.map((category, categoryIndex) => (
|
|
<section
|
|
key={category.id}
|
|
id={category.id}
|
|
className={`section-padding ${
|
|
categoryIndex % 2 === 0
|
|
? "bg-white dark:bg-neutral-900"
|
|
: "bg-neutral-50 dark:bg-neutral-950"
|
|
}`}
|
|
>
|
|
<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-start">
|
|
{/* Category Info */}
|
|
<div
|
|
className={
|
|
categoryIndex % 2 === 1 ? "lg:order-2" : "lg:order-1"
|
|
}
|
|
>
|
|
<FadeIn>
|
|
<motion.div
|
|
whileHover={{ scale: 1.05, rotate: 5 }}
|
|
className={`inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br ${category.color} text-white mb-6`}
|
|
>
|
|
<category.icon 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 leading-tight">
|
|
{category.title}
|
|
</h2>
|
|
</FadeIn>
|
|
|
|
<FadeIn delay={0.2}>
|
|
<p className="text-lg text-neutral-600 dark:text-neutral-400 mb-8 leading-relaxed">
|
|
{category.description}
|
|
</p>
|
|
</FadeIn>
|
|
|
|
<FadeIn delay={0.3}>
|
|
<AnimatedButton
|
|
href="/contact"
|
|
icon={<ArrowRightIcon size={18} />}
|
|
>
|
|
Request Information
|
|
</AnimatedButton>
|
|
</FadeIn>
|
|
</div>
|
|
|
|
{/* Products Grid */}
|
|
<div
|
|
className={
|
|
categoryIndex % 2 === 1 ? "lg:order-1" : "lg:order-2"
|
|
}
|
|
>
|
|
<FadeIn
|
|
delay={0.2}
|
|
direction={categoryIndex % 2 === 1 ? "left" : "right"}
|
|
>
|
|
<div className={`${category.bgColor} rounded-3xl p-8`}>
|
|
<h3 className="text-sm font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-6">
|
|
Available Products
|
|
</h3>
|
|
<div className="grid gap-3">
|
|
{category.products.map((product, index) => (
|
|
<motion.div
|
|
key={product}
|
|
initial={{ opacity: 0, x: -20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: index * 0.05 }}
|
|
whileHover="hover"
|
|
animate="rest"
|
|
variants={{
|
|
rest: { x: 0, scale: 1 },
|
|
hover: { x: 10, scale: 1.02 }
|
|
}}
|
|
className="group flex items-center gap-4 p-4 bg-white dark:bg-neutral-800 rounded-xl shadow-sm hover:shadow-md transition-all cursor-default"
|
|
>
|
|
<motion.div
|
|
variants={{
|
|
rest: { scale: 1, rotate: 0 },
|
|
hover: { scale: 1.2, rotate: 360 }
|
|
}}
|
|
transition={{ duration: 0.3 }}
|
|
className={`w-10 h-10 rounded-lg bg-gradient-to-br ${category.color} flex items-center justify-center flex-shrink-0`}
|
|
>
|
|
<CheckIcon size={18} className="text-white" />
|
|
</motion.div>
|
|
<span className="font-medium text-neutral-800 dark:text-neutral-200 group-hover:text-[hsl(0,100%,40%)] transition-colors">
|
|
{product}
|
|
</span>
|
|
<motion.div
|
|
variants={{
|
|
rest: { opacity: 0, x: -10 },
|
|
hover: { opacity: 1, x: 0 }
|
|
}}
|
|
className="ml-auto"
|
|
>
|
|
<ArrowRightIcon
|
|
size={16}
|
|
className="text-neutral-400"
|
|
/>
|
|
</motion.div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</FadeIn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
))}
|
|
|
|
{/* Features Section */}
|
|
<section className="section-padding bg-neutral-900 dark:bg-neutral-950 text-white">
|
|
<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-white/10 text-white/80 text-sm font-medium mb-6">
|
|
Why Choose Us
|
|
</span>
|
|
</FadeIn>
|
|
<FadeIn delay={0.1}>
|
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
|
|
Quality You Can{" "}
|
|
<span className="text-[hsl(0,100%,55%)]">Trust</span>
|
|
</h2>
|
|
</FadeIn>
|
|
<FadeIn delay={0.2}>
|
|
<p className="max-w-2xl mx-auto text-lg text-neutral-400">
|
|
We partner with leading manufacturers to bring you the best
|
|
products at competitive prices.
|
|
</p>
|
|
</FadeIn>
|
|
</div>
|
|
|
|
<StaggerContainer className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{[
|
|
{
|
|
title: "Premium Quality",
|
|
description:
|
|
"Products from trusted manufacturers meeting industry standards.",
|
|
icon: "01",
|
|
},
|
|
{
|
|
title: "Competitive Pricing",
|
|
description:
|
|
"Volume discounts and competitive rates for all customers.",
|
|
icon: "02",
|
|
},
|
|
{
|
|
title: "Fast Delivery",
|
|
description:
|
|
"Efficient distribution network across 10 states.",
|
|
icon: "03",
|
|
},
|
|
{
|
|
title: "Expert Support",
|
|
description:
|
|
"Dedicated team to help you find the right solutions.",
|
|
icon: "04",
|
|
},
|
|
].map((feature) => (
|
|
<StaggerItem key={feature.title}>
|
|
<motion.div
|
|
initial="rest"
|
|
whileHover="hover"
|
|
animate="rest"
|
|
variants={{
|
|
rest: { y: 0 },
|
|
hover: { y: -10 }
|
|
}}
|
|
className="group relative bg-white/5 backdrop-blur-sm p-8 rounded-3xl border border-white/10 hover:border-[hsl(0,100%,40%)]/50 transition-all h-full"
|
|
>
|
|
<motion.span
|
|
variants={{
|
|
rest: { scale: 1 },
|
|
hover: { scale: 1.1 }
|
|
}}
|
|
className="inline-block text-4xl font-bold text-[hsl(0,100%,40%)] mb-4"
|
|
>
|
|
{feature.icon}
|
|
</motion.span>
|
|
<h3 className="text-xl font-bold mb-3 group-hover:text-[hsl(0,100%,55%)] transition-colors">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-neutral-400 leading-relaxed">
|
|
{feature.description}
|
|
</p>
|
|
</motion.div>
|
|
</StaggerItem>
|
|
))}
|
|
</StaggerContainer>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Sustainability Banner */}
|
|
<section className="section-padding bg-gradient-to-br from-emerald-500 to-teal-600 text-white relative overflow-hidden">
|
|
{/* Background decoration */}
|
|
<motion.div
|
|
className="absolute top-0 right-0 w-96 h-96 bg-white rounded-full filter blur-[150px] opacity-10"
|
|
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="grid lg:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
<FadeIn>
|
|
<motion.div
|
|
whileHover={{ rotate: 360 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-white/20 mb-6"
|
|
>
|
|
<LeafIcon size={32} />
|
|
</motion.div>
|
|
</FadeIn>
|
|
<FadeIn delay={0.1}>
|
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
|
|
Going Green?
|
|
</h2>
|
|
</FadeIn>
|
|
<FadeIn delay={0.2}>
|
|
<p className="text-xl text-white/90 mb-8 leading-relaxed">
|
|
Explore our comprehensive range of sustainable, compostable,
|
|
and eco-friendly products. We can help you meet environmental
|
|
regulations and reduce your carbon footprint.
|
|
</p>
|
|
</FadeIn>
|
|
<FadeIn delay={0.3}>
|
|
<div className="flex flex-wrap gap-4">
|
|
<AnimatedButton
|
|
href="/sustainability"
|
|
variant="secondary"
|
|
icon={<ArrowRightIcon size={18} />}
|
|
>
|
|
Learn About Sustainability
|
|
</AnimatedButton>
|
|
<AnimatedButton href="/state-ordinances" variant="outline">
|
|
<span className="text-white">View State Ordinances</span>
|
|
</AnimatedButton>
|
|
</div>
|
|
</FadeIn>
|
|
</div>
|
|
|
|
<FadeIn direction="right" delay={0.2}>
|
|
<div className="relative">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{[
|
|
"Compostable",
|
|
"Recyclable",
|
|
"Biodegradable",
|
|
"Eco-Friendly",
|
|
].map((label, i) => (
|
|
<motion.div
|
|
key={label}
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: i * 0.1 }}
|
|
whileHover="hover"
|
|
animate="rest"
|
|
variants={{
|
|
rest: { scale: 1, y: 0 },
|
|
hover: { scale: 1.05, y: -5 }
|
|
}}
|
|
className="bg-white/10 backdrop-blur-sm p-6 rounded-2xl text-center border border-white/20 hover:bg-white/20 transition-colors"
|
|
>
|
|
<motion.div
|
|
variants={{
|
|
rest: { rotate: 0 },
|
|
hover: { rotate: 360 }
|
|
}}
|
|
transition={{ duration: 0.5 }}
|
|
className="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center mx-auto mb-3"
|
|
>
|
|
<LeafIcon size={24} />
|
|
</motion.div>
|
|
<span className="font-medium">{label}</span>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</FadeIn>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<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-products"
|
|
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-products)" />
|
|
</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">
|
|
Need Help Finding the Right Products?
|
|
</h2>
|
|
</FadeIn>
|
|
<FadeIn delay={0.1}>
|
|
<p className="text-xl text-white/90 mb-10 leading-relaxed">
|
|
Our experts are ready to help you find the perfect solutions for
|
|
your business. Get in touch for personalized recommendations.
|
|
</p>
|
|
</FadeIn>
|
|
<FadeIn delay={0.2}>
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<AnimatedButton
|
|
href="/contact"
|
|
variant="secondary"
|
|
size="lg"
|
|
icon={<ArrowRightIcon size={18} />}
|
|
>
|
|
Contact Our Team
|
|
</AnimatedButton>
|
|
<AnimatedButton href="/what-we-do" variant="outline" size="lg">
|
|
<span className="text-white">How We Work</span>
|
|
</AnimatedButton>
|
|
</div>
|
|
</FadeIn>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
</main>
|
|
);
|
|
}
|