diff --git a/app/sustainability/page.tsx b/app/sustainability/page.tsx
new file mode 100644
index 0000000..efcd36b
--- /dev/null
+++ b/app/sustainability/page.tsx
@@ -0,0 +1,690 @@
+"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 &quot;in a reasonably
+                    short period of time after customary disposal.&quot; 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&apos;t just good
+                  for the environment—it&apos;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&apos;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>
+  );
+}