From a50b1e3bca23df77fdcc0ad8d90d3e176b293e8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Mora?= <andres@quimify.com>
Date: Fri, 19 Dec 2025 06:32:28 -0500
Subject: [PATCH] Added State ordinances page.

---
 app/state-ordinances/page.tsx | 659 ++++++++++++++++++++++++++++++++++
 1 file changed, 659 insertions(+)
 create mode 100644 app/state-ordinances/page.tsx

diff --git a/app/state-ordinances/page.tsx b/app/state-ordinances/page.tsx
new file mode 100644
index 0000000..c68bbf8
--- /dev/null
+++ b/app/state-ordinances/page.tsx
@@ -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&apos;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&apos;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&apos;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>
+  );
+}