692 lines
28 KiB
TypeScript
692 lines
28 KiB
TypeScript
"use client";
|
||
|
||
import { motion } from "framer-motion";
|
||
import Navigation from "../components/Navigation";
|
||
import Footer from "../components/Footer";
|
||
import AnimatedButton from "../components/AnimatedButton";
|
||
import FadeIn, { StaggerContainer, StaggerItem } from "../components/FadeIn";
|
||
import {
|
||
ArrowRightIcon,
|
||
CheckIcon,
|
||
LeafIcon,
|
||
} from "../components/Icons";
|
||
|
||
const stateOrdinances = [
|
||
{
|
||
state: "Colorado",
|
||
flag: "🏔️",
|
||
status: "active",
|
||
effectiveDate: "January 1, 2024",
|
||
summary:
|
||
"Containers made of expanded polystyrene (Styrofoam) are banned for use as takeout containers.",
|
||
details: [
|
||
"Expanded polystyrene (EPS) foam containers prohibited",
|
||
"Applies to takeout and food service containers",
|
||
"Restaurants and food vendors must use alternatives",
|
||
],
|
||
alternatives: [
|
||
"Paper-based containers",
|
||
"Compostable containers",
|
||
"Recyclable plastic alternatives",
|
||
],
|
||
},
|
||
{
|
||
state: "Washington",
|
||
flag: "🌲",
|
||
status: "active",
|
||
effectiveDate: "June 1, 2023",
|
||
summary:
|
||
"Statewide ban on polystyrene foam containers and packing peanuts. Seattle has additional restrictions on plastic utensils and straws since 2018.",
|
||
details: [
|
||
"Polystyrene foam containers banned statewide",
|
||
"Packing peanuts made of foam prohibited",
|
||
"Seattle: Plastic utensils and straws banned (since July 2018)",
|
||
"Seattle: Plastic cocktail picks prohibited",
|
||
],
|
||
alternatives: [
|
||
"Compostable foodservice ware",
|
||
"Paper-based packaging materials",
|
||
"Biodegradable packing materials",
|
||
],
|
||
},
|
||
{
|
||
state: "Oregon",
|
||
flag: "🦫",
|
||
status: "active",
|
||
effectiveDate: "March 1, 2019",
|
||
summary:
|
||
"Single-use plastic bags and polystyrene foam packaging banned across the state.",
|
||
details: [
|
||
"Single-use plastic bags prohibited",
|
||
"Polystyrene foam packaging banned",
|
||
"Applies to retail and food service establishments",
|
||
],
|
||
alternatives: [
|
||
"Reusable bags",
|
||
"Paper bags",
|
||
"Compostable packaging options",
|
||
],
|
||
},
|
||
];
|
||
|
||
const upcomingRegulations = [
|
||
{
|
||
state: "More States",
|
||
description:
|
||
"Several other states in our territory are considering similar legislation. Stay ahead of the curve.",
|
||
},
|
||
];
|
||
|
||
const complianceSteps = [
|
||
{
|
||
step: "01",
|
||
title: "Assessment",
|
||
description:
|
||
"We review your current packaging and identify items affected by regulations.",
|
||
},
|
||
{
|
||
step: "02",
|
||
title: "Alternatives",
|
||
description:
|
||
"We recommend compliant alternatives that meet your operational needs.",
|
||
},
|
||
{
|
||
step: "03",
|
||
title: "Transition",
|
||
description:
|
||
"We help you smoothly transition to new products with minimal disruption.",
|
||
},
|
||
{
|
||
step: "04",
|
||
title: "Support",
|
||
description:
|
||
"Ongoing support to keep you compliant as regulations evolve.",
|
||
},
|
||
];
|
||
|
||
export default function StateOrdinancesPage() {
|
||
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-900 via-neutral-800 to-neutral-900">
|
||
{/* Animated background */}
|
||
<div className="absolute inset-0 overflow-hidden">
|
||
<motion.div
|
||
className="absolute top-1/4 -left-32 w-[500px] h-[500px] bg-amber-500 rounded-full filter blur-[150px] opacity-15"
|
||
animate={{
|
||
scale: [1, 1.2, 1],
|
||
x: [0, 50, 0],
|
||
}}
|
||
transition={{
|
||
duration: 10,
|
||
repeat: Infinity,
|
||
ease: "easeInOut",
|
||
}}
|
||
/>
|
||
<motion.div
|
||
className="absolute bottom-0 right-0 w-[600px] h-[600px] bg-[hsl(0,100%,40%)] rounded-full filter blur-[180px] opacity-10"
|
||
animate={{
|
||
scale: [1.2, 1, 1.2],
|
||
y: [0, -50, 0],
|
||
}}
|
||
transition={{
|
||
duration: 12,
|
||
repeat: Infinity,
|
||
ease: "easeInOut",
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
{/* Grid pattern */}
|
||
<div
|
||
className="absolute inset-0 opacity-[0.03]"
|
||
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='%23ffffff' 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")`,
|
||
}}
|
||
/>
|
||
|
||
<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-amber-500/20 border border-amber-500/30 mb-8"
|
||
>
|
||
<span className="text-lg">📜</span>
|
||
<span className="text-sm font-medium text-amber-200">
|
||
Regulatory Compliance
|
||
</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-white mb-6"
|
||
>
|
||
State Bans &{" "}
|
||
<span className="bg-gradient-to-r from-amber-400 to-orange-400 bg-clip-text text-transparent">
|
||
Ordinances
|
||
</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-300 mb-10 leading-relaxed"
|
||
>
|
||
We help you stay compliant with ever-changing packaging laws and
|
||
bans. Get the products you need while meeting all regulations.
|
||
</motion.p>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.3 }}
|
||
className="flex flex-col sm:flex-row items-center justify-center gap-4"
|
||
>
|
||
<AnimatedButton
|
||
href="/contact"
|
||
size="lg"
|
||
icon={<ArrowRightIcon size={18} />}
|
||
>
|
||
Get Compliance Help
|
||
</AnimatedButton>
|
||
<AnimatedButton href="/sustainability" variant="outline" size="lg">
|
||
<span className="text-white">View Green Products</span>
|
||
</AnimatedButton>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Alert Banner */}
|
||
<section className="bg-amber-500 py-4">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
className="flex items-center justify-center gap-3 text-center"
|
||
>
|
||
<span className="text-2xl">⚠️</span>
|
||
<p className="text-neutral-900 font-medium">
|
||
Regulations are constantly evolving. Contact us to ensure your
|
||
business stays compliant.
|
||
</p>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Why It Matters */}
|
||
<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">
|
||
<FadeIn>
|
||
<div>
|
||
<span className="inline-block px-4 py-1.5 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 text-sm font-medium mb-6">
|
||
Why It Matters
|
||
</span>
|
||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-neutral-900 dark:text-white mb-6 leading-tight">
|
||
Stay Ahead of{" "}
|
||
<span className="text-amber-600">Changing Regulations</span>
|
||
</h2>
|
||
<p className="text-lg text-neutral-600 dark:text-neutral-400 mb-6 leading-relaxed">
|
||
Environmental regulations around packaging materials are
|
||
becoming more common across the United States. Many states in
|
||
our service territory have implemented bans on certain
|
||
materials like polystyrene foam and single-use plastics.
|
||
</p>
|
||
<p className="text-lg text-neutral-600 dark:text-neutral-400 mb-8 leading-relaxed">
|
||
Non-compliance can result in fines and damage to your
|
||
business reputation. We're here to help you navigate
|
||
these changes smoothly.
|
||
</p>
|
||
|
||
<div className="flex flex-wrap gap-3">
|
||
{["Avoid Fines", "Protect Reputation", "Stay Current"].map(
|
||
(item, i) => (
|
||
<motion.div
|
||
key={item}
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
whileInView={{ opacity: 1, scale: 1 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: i * 0.1 }}
|
||
whileHover={{ scale: 1.05 }}
|
||
className="flex items-center gap-2 px-4 py-2 bg-amber-50 dark:bg-amber-900/20 rounded-full"
|
||
>
|
||
<CheckIcon
|
||
size={16}
|
||
className="text-amber-600 dark:text-amber-400"
|
||
/>
|
||
<span className="font-medium text-neutral-800 dark:text-neutral-200">
|
||
{item}
|
||
</span>
|
||
</motion.div>
|
||
)
|
||
)}
|
||
</div>
|
||
</div>
|
||
</FadeIn>
|
||
|
||
<FadeIn direction="right" delay={0.2}>
|
||
<div className="relative">
|
||
<div className="grid grid-cols-2 gap-4">
|
||
{[
|
||
{ label: "States with Bans", value: "3+", color: "amber" },
|
||
{ label: "Products Affected", value: "100s", color: "red" },
|
||
{ label: "Years Experience", value: "20+", color: "emerald" },
|
||
{ label: "Alternatives Ready", value: "✓", color: "blue" },
|
||
].map((stat, i) => (
|
||
<motion.div
|
||
key={stat.label}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: i * 0.1 }}
|
||
whileHover={{ y: -5, scale: 1.02 }}
|
||
className={`p-6 rounded-2xl bg-${stat.color}-50 dark:bg-${stat.color}-900/20 border border-${stat.color}-100 dark:border-${stat.color}-800/50`}
|
||
style={{
|
||
backgroundColor:
|
||
stat.color === "amber"
|
||
? "rgb(255 251 235)"
|
||
: stat.color === "red"
|
||
? "rgb(254 242 242)"
|
||
: stat.color === "emerald"
|
||
? "rgb(236 253 245)"
|
||
: "rgb(239 246 255)",
|
||
}}
|
||
>
|
||
<span className="block text-3xl font-bold text-neutral-900 mb-1">
|
||
{stat.value}
|
||
</span>
|
||
<span className="text-sm text-neutral-600">
|
||
{stat.label}
|
||
</span>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</FadeIn>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* State Ordinances List */}
|
||
<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">
|
||
Current Regulations
|
||
</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">
|
||
State-by-State{" "}
|
||
<span className="text-[hsl(0,100%,40%)]">Breakdown</span>
|
||
</h2>
|
||
</FadeIn>
|
||
<FadeIn delay={0.2}>
|
||
<p className="max-w-2xl mx-auto text-lg text-neutral-600 dark:text-neutral-400">
|
||
Here are the current packaging regulations in our service
|
||
territory. Click each state for details.
|
||
</p>
|
||
</FadeIn>
|
||
</div>
|
||
|
||
<StaggerContainer className="space-y-6">
|
||
{stateOrdinances.map((ordinance) => (
|
||
<StaggerItem key={ordinance.state}>
|
||
<motion.div
|
||
initial="rest"
|
||
whileHover="hover"
|
||
animate="rest"
|
||
variants={{
|
||
rest: { scale: 1 },
|
||
hover: { scale: 1.01 }
|
||
}}
|
||
className="bg-white dark:bg-neutral-900 rounded-3xl shadow-lg border border-neutral-100 dark:border-neutral-800 overflow-hidden"
|
||
>
|
||
{/* Header */}
|
||
<div className="p-6 md:p-8 border-b border-neutral-100 dark:border-neutral-800">
|
||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||
<div className="flex items-center gap-4">
|
||
<motion.span
|
||
variants={{
|
||
rest: { scale: 1, rotate: 0 },
|
||
hover: { scale: 1.2, rotate: 10 }
|
||
}}
|
||
className="text-4xl"
|
||
>
|
||
{ordinance.flag}
|
||
</motion.span>
|
||
<div>
|
||
<h3 className="text-2xl font-bold text-neutral-900 dark:text-white">
|
||
{ordinance.state}
|
||
</h3>
|
||
<p className="text-sm text-neutral-500">
|
||
Effective: {ordinance.effectiveDate}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<motion.span
|
||
variants={{
|
||
rest: { scale: 1 },
|
||
hover: { scale: 1.05 }
|
||
}}
|
||
className="inline-flex items-center gap-2 px-4 py-2 bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 rounded-full text-sm font-medium w-fit"
|
||
>
|
||
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
|
||
Active
|
||
</motion.span>
|
||
</div>
|
||
<p className="mt-4 text-neutral-600 dark:text-neutral-400 leading-relaxed">
|
||
{ordinance.summary}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Details */}
|
||
<div className="p-6 md:p-8 grid md:grid-cols-2 gap-8">
|
||
{/* What's Banned */}
|
||
<div>
|
||
<h4 className="flex items-center gap-2 text-lg font-semibold text-neutral-900 dark:text-white mb-4">
|
||
<span className="w-8 h-8 rounded-lg bg-red-100 dark:bg-red-900/30 flex items-center justify-center text-red-600">
|
||
✕
|
||
</span>
|
||
What's Restricted
|
||
</h4>
|
||
<ul className="space-y-3">
|
||
{ordinance.details.map((detail, i) => (
|
||
<motion.li
|
||
key={i}
|
||
initial={{ opacity: 0, x: -10 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: i * 0.1 }}
|
||
className="flex items-start gap-3 text-neutral-600 dark:text-neutral-400"
|
||
>
|
||
<span className="w-1.5 h-1.5 rounded-full bg-red-500 mt-2 flex-shrink-0" />
|
||
{detail}
|
||
</motion.li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
{/* Alternatives */}
|
||
<div>
|
||
<h4 className="flex items-center gap-2 text-lg font-semibold text-neutral-900 dark:text-white mb-4">
|
||
<span className="w-8 h-8 rounded-lg bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center text-emerald-600">
|
||
<CheckIcon size={16} />
|
||
</span>
|
||
Compliant Alternatives
|
||
</h4>
|
||
<ul className="space-y-3">
|
||
{ordinance.alternatives.map((alt, i) => (
|
||
<motion.li
|
||
key={i}
|
||
initial={{ opacity: 0, x: -10 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: i * 0.1 }}
|
||
whileHover={{ x: 5 }}
|
||
className="flex items-center gap-3 text-neutral-600 dark:text-neutral-400 cursor-default"
|
||
>
|
||
<CheckIcon
|
||
size={16}
|
||
className="text-emerald-500 flex-shrink-0"
|
||
/>
|
||
{alt}
|
||
</motion.li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</StaggerItem>
|
||
))}
|
||
</StaggerContainer>
|
||
|
||
{/* More States Coming */}
|
||
<FadeIn delay={0.4}>
|
||
<motion.div
|
||
whileHover={{ scale: 1.01 }}
|
||
className="mt-8 bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-950/30 dark:to-orange-950/20 p-8 rounded-3xl border border-amber-200 dark:border-amber-800/50"
|
||
>
|
||
<div className="flex items-start gap-4">
|
||
<motion.span
|
||
animate={{ rotate: [0, 10, -10, 0] }}
|
||
transition={{ duration: 2, repeat: Infinity }}
|
||
className="text-4xl"
|
||
>
|
||
🔔
|
||
</motion.span>
|
||
<div>
|
||
<h4 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">
|
||
More Regulations Coming
|
||
</h4>
|
||
<p className="text-neutral-600 dark:text-neutral-400">
|
||
Several other states in our territory are considering
|
||
similar legislation. Stay ahead of the curve by transitioning
|
||
to sustainable alternatives now. We'll keep you informed
|
||
of any changes that may affect your business.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</FadeIn>
|
||
</div>
|
||
</section>
|
||
|
||
{/* How We Help */}
|
||
<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">
|
||
Our Process
|
||
</span>
|
||
</FadeIn>
|
||
<FadeIn delay={0.1}>
|
||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
|
||
How We Help You{" "}
|
||
<span className="text-[hsl(0,100%,55%)]">Stay Compliant</span>
|
||
</h2>
|
||
</FadeIn>
|
||
<FadeIn delay={0.2}>
|
||
<p className="max-w-2xl mx-auto text-lg text-neutral-400">
|
||
Our straightforward process ensures a smooth transition to
|
||
compliant products.
|
||
</p>
|
||
</FadeIn>
|
||
</div>
|
||
|
||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
{complianceSteps.map((item, index) => (
|
||
<FadeIn key={item.step} delay={index * 0.1}>
|
||
<motion.div
|
||
initial="rest"
|
||
whileHover="hover"
|
||
animate="rest"
|
||
variants={{
|
||
rest: { y: 0 },
|
||
hover: { y: -10 }
|
||
}}
|
||
className="group relative"
|
||
>
|
||
{/* Connector line */}
|
||
{index < complianceSteps.length - 1 && (
|
||
<div className="hidden lg:block absolute top-10 left-full w-full h-0.5 bg-gradient-to-r from-[hsl(0,100%,40%)] to-transparent z-0" />
|
||
)}
|
||
|
||
<div className="relative bg-white/5 backdrop-blur-sm p-8 rounded-3xl border border-white/10 hover:border-[hsl(0,100%,40%)]/50 transition-colors h-full">
|
||
<motion.span
|
||
variants={{
|
||
rest: { scale: 1 },
|
||
hover: { scale: 1.1 }
|
||
}}
|
||
className="inline-block text-5xl font-bold text-[hsl(0,100%,40%)] mb-4"
|
||
>
|
||
{item.step}
|
||
</motion.span>
|
||
<h3 className="text-xl font-bold mb-3 group-hover:text-[hsl(0,100%,55%)] transition-colors">
|
||
{item.title}
|
||
</h3>
|
||
<p className="text-neutral-400 leading-relaxed">
|
||
{item.description}
|
||
</p>
|
||
</div>
|
||
</motion.div>
|
||
</FadeIn>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Sustainability Link */}
|
||
<section className="section-padding bg-gradient-to-br from-emerald-500 to-teal-600 text-white relative overflow-hidden">
|
||
<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">
|
||
<FadeIn>
|
||
<div>
|
||
<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>
|
||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
|
||
Explore Sustainable Alternatives
|
||
</h2>
|
||
<p className="text-xl text-white/90 mb-8 leading-relaxed">
|
||
Discover our full range of eco-friendly, compostable, and
|
||
recyclable products that keep you compliant and reduce your
|
||
environmental impact.
|
||
</p>
|
||
<AnimatedButton
|
||
href="/sustainability"
|
||
variant="secondary"
|
||
size="lg"
|
||
icon={<ArrowRightIcon size={18} />}
|
||
>
|
||
View Green Products
|
||
</AnimatedButton>
|
||
</div>
|
||
</FadeIn>
|
||
|
||
<FadeIn direction="right" delay={0.2}>
|
||
<div className="grid grid-cols-2 gap-4">
|
||
{[
|
||
"Compostable Containers",
|
||
"Recyclable Packaging",
|
||
"Paper Products",
|
||
"Biodegradable Options",
|
||
].map((product, i) => (
|
||
<motion.div
|
||
key={product}
|
||
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 border border-white/20 text-center 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 text-sm">{product}</span>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</FadeIn>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* CTA Section */}
|
||
<section className="section-padding bg-[hsl(0,100%,40%)] text-white relative overflow-hidden">
|
||
<div className="absolute inset-0 opacity-10">
|
||
<svg
|
||
className="w-full h-full"
|
||
viewBox="0 0 100 100"
|
||
preserveAspectRatio="none"
|
||
>
|
||
<pattern
|
||
id="grid-ordinances"
|
||
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-ordinances)" />
|
||
</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 Getting Compliant?
|
||
</h2>
|
||
</FadeIn>
|
||
<FadeIn delay={0.1}>
|
||
<p className="text-xl text-white/90 mb-10 leading-relaxed">
|
||
Get in touch and we can help you make any product changes
|
||
necessary to comply with current and upcoming regulations.
|
||
</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 Us Today
|
||
</AnimatedButton>
|
||
<AnimatedButton href="/products" variant="outline" size="lg">
|
||
<span className="text-white">Browse Products</span>
|
||
</AnimatedButton>
|
||
</div>
|
||
</FadeIn>
|
||
</div>
|
||
</section>
|
||
|
||
<Footer />
|
||
</main>
|
||
);
|
||
}
|