691 lines
28 KiB
TypeScript
691 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,
|
|
LeafIcon,
|
|
CheckIcon,
|
|
RecycleIcon,
|
|
} from "../components/Icons";
|
|
|
|
const definitions = [
|
|
{
|
|
term: "Biodegradable",
|
|
description:
|
|
"Products that break down naturally within 1 year or less, leaving nothing behind. The FTC states these materials should decompose in a reasonably short period after customary disposal.",
|
|
icon: "🌱",
|
|
},
|
|
{
|
|
term: "Compostable",
|
|
description:
|
|
"Materials that break down into natural elements in a compost environment, typically within 90 days, leaving no toxic residue and creating nutrient-rich soil.",
|
|
icon: "🍃",
|
|
},
|
|
{
|
|
term: "Recyclable",
|
|
description:
|
|
"Products that can be collected, processed, and manufactured into new products, reducing waste and conserving natural resources.",
|
|
icon: "♻️",
|
|
},
|
|
];
|
|
|
|
const greenProducts = [
|
|
"Compostable Dinnerware",
|
|
"Compostable Hinged Containers",
|
|
"Compostable Cutlery",
|
|
"Compostable Cups",
|
|
"Compostable Can Liners",
|
|
"Recyclable PETE Containers",
|
|
"Recyclable PP Containers",
|
|
"PLA Lined Containers",
|
|
];
|
|
|
|
const benefits = [
|
|
{
|
|
title: "Reduce Environmental Impact",
|
|
description:
|
|
"Minimize your carbon footprint and contribute to a healthier planet with eco-friendly alternatives.",
|
|
icon: LeafIcon,
|
|
},
|
|
{
|
|
title: "Meet Regulations",
|
|
description:
|
|
"Stay compliant with evolving state and local environmental regulations and bans on certain materials.",
|
|
icon: CheckIcon,
|
|
},
|
|
{
|
|
title: "Appeal to Customers",
|
|
description:
|
|
"Today's consumers prefer businesses that demonstrate environmental responsibility.",
|
|
icon: RecycleIcon,
|
|
},
|
|
];
|
|
|
|
const stats = [
|
|
{ value: "90", unit: "Days", label: "Typical compost breakdown time" },
|
|
{ value: "100%", unit: "", label: "Plant-based materials available" },
|
|
{ value: "10", unit: "States", label: "With packaging regulations" },
|
|
];
|
|
|
|
export default function SustainabilityPage() {
|
|
return (
|
|
<main className="relative">
|
|
<Navigation />
|
|
|
|
{/* Hero Section */}
|
|
<section className="relative min-h-[70vh] flex items-center justify-center overflow-hidden bg-gradient-to-br from-emerald-900 via-emerald-800 to-teal-900">
|
|
{/* Animated background */}
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
<motion.div
|
|
className="absolute top-1/4 -left-32 w-[500px] h-[500px] bg-emerald-400 rounded-full filter blur-[150px] opacity-20"
|
|
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-teal-400 rounded-full filter blur-[180px] opacity-15"
|
|
animate={{
|
|
scale: [1.2, 1, 1.2],
|
|
y: [0, -50, 0],
|
|
}}
|
|
transition={{
|
|
duration: 12,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* Floating leaves decoration */}
|
|
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
|
{[...Array(6)].map((_, i) => (
|
|
<motion.div
|
|
key={i}
|
|
className="absolute text-4xl opacity-20"
|
|
style={{
|
|
top: `${15 + i * 15}%`,
|
|
left: `${5 + i * 18}%`,
|
|
}}
|
|
animate={{
|
|
y: [0, -30, 0],
|
|
rotate: [0, 10, -10, 0],
|
|
opacity: [0.1, 0.3, 0.1],
|
|
}}
|
|
transition={{
|
|
duration: 5 + i,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
delay: i * 0.5,
|
|
}}
|
|
>
|
|
🍃
|
|
</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-white/10 border border-white/20 mb-8"
|
|
>
|
|
<LeafIcon size={16} className="text-emerald-300" />
|
|
<span className="text-sm font-medium text-white/90">
|
|
Eco-Friendly Solutions
|
|
</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"
|
|
>
|
|
Committed to{" "}
|
|
<span className="bg-gradient-to-r from-emerald-300 to-teal-300 bg-clip-text text-transparent">
|
|
Sustainability
|
|
</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-emerald-100 mb-10 leading-relaxed"
|
|
>
|
|
Go green and find the perfect sustainable product options for your
|
|
business. We help you make environmentally responsible choices
|
|
without compromising on quality.
|
|
</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"
|
|
variant="secondary"
|
|
size="lg"
|
|
icon={<ArrowRightIcon size={18} />}
|
|
>
|
|
Get Started
|
|
</AnimatedButton>
|
|
<AnimatedButton href="/products#green" variant="outline" size="lg">
|
|
<span className="text-white">View Green Products</span>
|
|
</AnimatedButton>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Scroll indicator */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 1 }}
|
|
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-white/30 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-emerald-400"
|
|
/>
|
|
</motion.div>
|
|
</motion.div>
|
|
</section>
|
|
|
|
{/* Stats Section */}
|
|
<section className="relative py-16 bg-emerald-600 overflow-hidden">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-emerald-700/50 via-transparent to-emerald-700/50" />
|
|
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{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"
|
|
>
|
|
<div className="flex items-baseline justify-center gap-1">
|
|
<motion.span
|
|
className="text-5xl sm:text-6xl font-bold text-white"
|
|
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>
|
|
{stat.unit && (
|
|
<span className="text-2xl font-medium text-emerald-200">
|
|
{stat.unit}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<span className="text-emerald-100 text-sm sm:text-base mt-2 block">
|
|
{stat.label}
|
|
</span>
|
|
</motion.div>
|
|
</FadeIn>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Understanding Terms 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="text-center mb-16">
|
|
<FadeIn>
|
|
<span className="inline-block px-4 py-1.5 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 text-sm font-medium mb-6">
|
|
Know the Difference
|
|
</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">
|
|
What These Terms{" "}
|
|
<span className="text-emerald-600">Really Mean</span>
|
|
</h2>
|
|
</FadeIn>
|
|
<FadeIn delay={0.2}>
|
|
<p className="max-w-3xl mx-auto text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed">
|
|
There are many product claims regarding biodegradable,
|
|
compostable, and recyclable properties. Understanding these
|
|
definitions helps you make informed decisions for your business.
|
|
</p>
|
|
</FadeIn>
|
|
</div>
|
|
|
|
<StaggerContainer className="grid md:grid-cols-3 gap-8">
|
|
{definitions.map((def) => (
|
|
<StaggerItem key={def.term}>
|
|
<motion.div
|
|
whileHover={{ y: -10, scale: 1.02 }}
|
|
className="group relative bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-950/30 dark:to-teal-950/30 p-8 rounded-3xl border border-emerald-100 dark:border-emerald-900/50 h-full"
|
|
>
|
|
<motion.span
|
|
className="text-5xl block mb-6"
|
|
whileHover={{ scale: 1.2, rotate: 10 }}
|
|
transition={{ type: "spring", stiffness: 300 }}
|
|
>
|
|
{def.icon}
|
|
</motion.span>
|
|
<h3 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4 group-hover:text-emerald-600 transition-colors">
|
|
{def.term}
|
|
</h3>
|
|
<p className="text-neutral-600 dark:text-neutral-400 leading-relaxed">
|
|
{def.description}
|
|
</p>
|
|
</motion.div>
|
|
</StaggerItem>
|
|
))}
|
|
</StaggerContainer>
|
|
|
|
{/* Additional context */}
|
|
<FadeIn delay={0.4}>
|
|
<motion.div
|
|
whileHover={{ scale: 1.01 }}
|
|
className="mt-12 bg-neutral-50 dark:bg-neutral-800 p-8 md:p-10 rounded-3xl border border-neutral-200 dark:border-neutral-700"
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
<motion.div
|
|
whileHover={{ rotate: 360 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="w-12 h-12 rounded-xl bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center flex-shrink-0"
|
|
>
|
|
<span className="text-2xl">📋</span>
|
|
</motion.div>
|
|
<div>
|
|
<h4 className="text-lg font-bold text-neutral-900 dark:text-white mb-2">
|
|
Industry Standards
|
|
</h4>
|
|
<p className="text-neutral-600 dark:text-neutral-400 leading-relaxed">
|
|
The American Chemistry Council found that most consumers
|
|
expect biodegradable products to break down naturally within
|
|
1 year or less, leaving nothing behind. The FTC shares this
|
|
view, stating materials should decompose "in a reasonably
|
|
short period of time after customary disposal." ASTM
|
|
(American Standards for Testing Materials) provides official
|
|
definitions and testing standards for these properties.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</FadeIn>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Benefits 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="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
|
<div>
|
|
<FadeIn>
|
|
<span className="inline-block px-4 py-1.5 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 text-sm font-medium mb-6">
|
|
Why Go Green
|
|
</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">
|
|
Benefits of{" "}
|
|
<span className="text-emerald-600">Sustainable</span> Products
|
|
</h2>
|
|
</FadeIn>
|
|
<FadeIn delay={0.2}>
|
|
<p className="text-lg text-neutral-600 dark:text-neutral-400 mb-8 leading-relaxed">
|
|
Making the switch to eco-friendly products isn't just good
|
|
for the environment—it's good for business too.
|
|
</p>
|
|
</FadeIn>
|
|
|
|
<div className="space-y-6">
|
|
{benefits.map((benefit, index) => (
|
|
<FadeIn key={benefit.title} delay={0.2 + index * 0.1}>
|
|
<motion.div
|
|
whileHover={{ x: 10 }}
|
|
className="group flex items-start gap-4"
|
|
>
|
|
<motion.div
|
|
whileHover={{ scale: 1.1, rotate: 360 }}
|
|
transition={{ duration: 0.4 }}
|
|
className="w-12 h-12 rounded-xl bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center flex-shrink-0 group-hover:bg-emerald-500 transition-colors"
|
|
>
|
|
<benefit.icon
|
|
size={24}
|
|
className="text-emerald-600 group-hover:text-white transition-colors"
|
|
/>
|
|
</motion.div>
|
|
<div>
|
|
<h3 className="text-lg font-bold text-neutral-900 dark:text-white mb-1 group-hover:text-emerald-600 transition-colors">
|
|
{benefit.title}
|
|
</h3>
|
|
<p className="text-neutral-600 dark:text-neutral-400">
|
|
{benefit.description}
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
</FadeIn>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Visual */}
|
|
<FadeIn direction="right" delay={0.2}>
|
|
<div className="relative">
|
|
<div className="relative aspect-square rounded-3xl overflow-hidden bg-gradient-to-br from-emerald-100 to-teal-100 dark:from-emerald-900/30 dark:to-teal-900/30">
|
|
{/* Animated circles */}
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<motion.div
|
|
animate={{ rotate: 360 }}
|
|
transition={{
|
|
duration: 20,
|
|
repeat: Infinity,
|
|
ease: "linear",
|
|
}}
|
|
className="absolute w-full h-full"
|
|
>
|
|
{[...Array(3)].map((_, i) => (
|
|
<motion.div
|
|
key={i}
|
|
className="absolute w-full h-full rounded-full border-2 border-dashed border-emerald-300 dark:border-emerald-700"
|
|
style={{
|
|
transform: `scale(${0.5 + i * 0.2})`,
|
|
}}
|
|
/>
|
|
))}
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
whileHover={{ scale: 1.1, rotate: 10 }}
|
|
className="relative z-10 w-32 h-32 rounded-full bg-gradient-to-br from-emerald-500 to-teal-500 flex items-center justify-center shadow-2xl"
|
|
>
|
|
<LeafIcon size={56} className="text-white" />
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Floating badges */}
|
|
{[
|
|
{ label: "Eco-Friendly", top: "15%", left: "10%" },
|
|
{ label: "Compostable", top: "20%", right: "5%" },
|
|
{ label: "Sustainable", bottom: "25%", left: "5%" },
|
|
{ label: "Recyclable", bottom: "15%", right: "10%" },
|
|
].map((badge, i) => (
|
|
<motion.div
|
|
key={badge.label}
|
|
className="absolute"
|
|
style={{
|
|
top: badge.top,
|
|
left: badge.left,
|
|
right: badge.right,
|
|
bottom: badge.bottom,
|
|
}}
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: i * 0.1 }}
|
|
whileHover={{ scale: 1.1, y: -5 }}
|
|
>
|
|
<div className="px-4 py-2 bg-white dark:bg-neutral-800 rounded-full shadow-lg text-sm font-medium text-emerald-700 dark:text-emerald-400">
|
|
{badge.label}
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</FadeIn>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Green 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="text-center mb-16">
|
|
<FadeIn>
|
|
<span className="inline-block px-4 py-1.5 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 text-sm font-medium mb-6">
|
|
Our Green Range
|
|
</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">
|
|
Sustainable{" "}
|
|
<span className="text-emerald-600">Product Options</span>
|
|
</h2>
|
|
</FadeIn>
|
|
<FadeIn delay={0.2}>
|
|
<p className="max-w-2xl mx-auto text-lg text-neutral-600 dark:text-neutral-400">
|
|
We offer a comprehensive range of eco-friendly alternatives to
|
|
meet your sustainability goals.
|
|
</p>
|
|
</FadeIn>
|
|
</div>
|
|
|
|
<FadeIn delay={0.3}>
|
|
<div className="bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-950/30 dark:to-teal-950/30 rounded-3xl p-8 md:p-12">
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{greenProducts.map((product, index) => (
|
|
<motion.div
|
|
key={product}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: index * 0.05 }}
|
|
whileHover={{ scale: 1.05, y: -5 }}
|
|
className="group flex items-center gap-3 p-4 bg-white dark:bg-neutral-800 rounded-xl shadow-sm hover:shadow-lg transition-all cursor-default"
|
|
>
|
|
<motion.div
|
|
whileHover={{ rotate: 360 }}
|
|
transition={{ duration: 0.4 }}
|
|
className="w-10 h-10 rounded-lg bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center flex-shrink-0 group-hover:bg-emerald-500 transition-colors"
|
|
>
|
|
<LeafIcon
|
|
size={18}
|
|
className="text-emerald-600 group-hover:text-white transition-colors"
|
|
/>
|
|
</motion.div>
|
|
<span className="font-medium text-neutral-800 dark:text-neutral-200 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors">
|
|
{product}
|
|
</span>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
className="mt-8 text-center"
|
|
>
|
|
<AnimatedButton
|
|
href="/products#green"
|
|
variant="accent"
|
|
icon={<ArrowRightIcon size={18} />}
|
|
>
|
|
View All Green Products
|
|
</AnimatedButton>
|
|
</motion.div>
|
|
</div>
|
|
</FadeIn>
|
|
</div>
|
|
</section>
|
|
|
|
{/* State Ordinances CTA */}
|
|
<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="grid lg:grid-cols-2 gap-12 items-center">
|
|
<FadeIn>
|
|
<div>
|
|
<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">
|
|
<span className="text-lg">📜</span>
|
|
Stay Compliant
|
|
</span>
|
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
|
|
Know Your{" "}
|
|
<span className="text-emerald-400">State Regulations</span>
|
|
</h2>
|
|
<p className="text-lg text-neutral-400 mb-8 leading-relaxed">
|
|
Many states have implemented bans and ordinances on certain
|
|
packaging materials. We help you navigate these regulations
|
|
and find compliant alternatives for your business.
|
|
</p>
|
|
<div className="flex flex-wrap gap-3 mb-8">
|
|
{["Colorado", "Washington", "Oregon"].map((state, i) => (
|
|
<motion.span
|
|
key={state}
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: i * 0.1 }}
|
|
whileHover={{ scale: 1.05 }}
|
|
className="px-4 py-2 bg-white/10 rounded-full text-sm font-medium"
|
|
>
|
|
{state}
|
|
</motion.span>
|
|
))}
|
|
<motion.span
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: 0.3 }}
|
|
className="px-4 py-2 bg-emerald-500/20 text-emerald-400 rounded-full text-sm font-medium"
|
|
>
|
|
+ More
|
|
</motion.span>
|
|
</div>
|
|
<AnimatedButton
|
|
href="/state-ordinances"
|
|
icon={<ArrowRightIcon size={18} />}
|
|
>
|
|
View State Ordinances
|
|
</AnimatedButton>
|
|
</div>
|
|
</FadeIn>
|
|
|
|
<FadeIn direction="right" delay={0.2}>
|
|
<div className="relative">
|
|
<motion.div
|
|
whileHover={{ scale: 1.02 }}
|
|
className="bg-gradient-to-br from-emerald-500/20 to-teal-500/20 rounded-3xl p-8 border border-white/10"
|
|
>
|
|
<div className="space-y-4">
|
|
{[
|
|
{
|
|
state: "Colorado",
|
|
rule: "Styrofoam takeout containers banned as of Jan 2024",
|
|
},
|
|
{
|
|
state: "Washington",
|
|
rule: "Foam containers and packing peanuts banned",
|
|
},
|
|
{
|
|
state: "Oregon",
|
|
rule: "Single-use plastic bags and polystyrene banned",
|
|
},
|
|
].map((item, i) => (
|
|
<motion.div
|
|
key={item.state}
|
|
initial={{ opacity: 0, x: 20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: i * 0.1 }}
|
|
whileHover={{ x: 5 }}
|
|
className="flex items-start gap-4 p-4 bg-white/5 rounded-xl"
|
|
>
|
|
<div className="w-10 h-10 rounded-lg bg-emerald-500/20 flex items-center justify-center flex-shrink-0">
|
|
<CheckIcon size={18} className="text-emerald-400" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-white">{item.state}</h4>
|
|
<p className="text-sm text-neutral-400">{item.rule}</p>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</FadeIn>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Final CTA */}
|
|
<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-4xl mx-auto px-4 sm:px-6 lg:px-8 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-white/20 mb-6"
|
|
>
|
|
<RecycleIcon size={32} />
|
|
</motion.div>
|
|
</FadeIn>
|
|
<FadeIn delay={0.1}>
|
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
|
|
Ready to Go Green?
|
|
</h2>
|
|
</FadeIn>
|
|
<FadeIn delay={0.2}>
|
|
<p className="text-xl text-white/90 mb-10 leading-relaxed">
|
|
Our team is here to help you find the perfect sustainable
|
|
solutions for your business. Let's make a positive impact
|
|
together.
|
|
</p>
|
|
</FadeIn>
|
|
<FadeIn delay={0.3}>
|
|
<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 All Products</span>
|
|
</AnimatedButton>
|
|
</div>
|
|
</FadeIn>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
</main>
|
|
);
|
|
}
|