Added State ordinances page.
This commit is contained in:
parent
c95b103570
commit
a50b1e3bca
|
|
@ -0,0 +1,659 @@
|
|||
"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
|
||||
whileHover={{ 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
|
||||
whileHover={{ 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
|
||||
whileHover={{ 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 whileHover={{ 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
|
||||
whileHover={{ 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={{ 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
|
||||
whileHover={{ 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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue