From de7e321d8531e5bc7a88a51bd88616e93d652c33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Mora?= <andres@quimify.com>
Date: Fri, 19 Dec 2025 05:50:46 -0500
Subject: [PATCH] Added products page.

---
 app/what-we-do/page.tsx | 681 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 681 insertions(+)
 create mode 100644 app/what-we-do/page.tsx

diff --git a/app/what-we-do/page.tsx b/app/what-we-do/page.tsx
new file mode 100644
index 0000000..0b30716
--- /dev/null
+++ b/app/what-we-do/page.tsx
@@ -0,0 +1,681 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Image from "next/image";
+import Navigation from "../components/Navigation";
+import Footer from "../components/Footer";
+import AnimatedButton from "../components/AnimatedButton";
+import FadeIn, { StaggerContainer, StaggerItem } from "../components/FadeIn";
+import {
+  ArrowRightIcon,
+  UsersIcon,
+  TargetIcon,
+  CheckIcon,
+  TruckIcon,
+  SparklesIcon,
+  PackageIcon,
+  BuildingIcon,
+} from "../components/Icons";
+
+const distributorServices = [
+  {
+    icon: PackageIcon,
+    title: "Product Samples",
+    description:
+      "We provide comprehensive product samples to help your sales team demonstrate value to customers.",
+  },
+  {
+    icon: SparklesIcon,
+    title: "Point of Sale Materials",
+    description:
+      "Custom-designed marketing materials that simplify the selling process for your team.",
+  },
+  {
+    icon: UsersIcon,
+    title: "Product Training",
+    description:
+      "In-depth product knowledge sessions to make your sales force confident and effective.",
+  },
+  {
+    icon: BuildingIcon,
+    title: "Marketing Support",
+    description:
+      "Our in-house graphics team develops customized sales pieces tailored to your needs.",
+  },
+];
+
+const operatorBenefits = [
+  "Comprehensive packaging consultation",
+  "Operations review and optimization",
+  "Best-fit product recommendations",
+  "Cost-effective solutions",
+  "Sustainability options guidance",
+  "Ongoing support and service",
+];
+
+const processSteps = [
+  {
+    step: "01",
+    title: "Discovery",
+    description:
+      "We begin by understanding your unique business needs, current challenges, and growth objectives.",
+  },
+  {
+    step: "02",
+    title: "Analysis",
+    description:
+      "Our team reviews your operations and identifies opportunities for improvement and cost savings.",
+  },
+  {
+    step: "03",
+    title: "Solutions",
+    description:
+      "We recommend the best products and strategies tailored to your specific requirements.",
+  },
+  {
+    step: "04",
+    title: "Partnership",
+    description:
+      "We maintain ongoing support, ensuring your continued success and adapting to your evolving needs.",
+  },
+];
+
+export default function WhatWeDoPage() {
+  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-neutral-900 via-neutral-900 to-neutral-800">
+        {/* Animated background */}
+        <div className="absolute inset-0 overflow-hidden">
+          <motion.div
+            className="absolute top-1/4 -left-32 w-[500px] h-[500px] bg-[hsl(0,100%,40%)] 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-[hsl(0,100%,50%)] 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-white/10 border border-white/10 mb-8"
+          >
+            <TargetIcon size={16} className="text-[hsl(0,100%,60%)]" />
+            <span className="text-sm font-medium text-white/80">
+              Our Approach
+            </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"
+          >
+            What We{" "}
+            <span className="bg-gradient-to-r from-[hsl(0,100%,50%)] to-[hsl(0,100%,65%)] bg-clip-text text-transparent">
+              Do
+            </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 leading-relaxed"
+          >
+            We bridge the gap between manufacturers and end-users through
+            strategic partnerships, innovative solutions, and dedicated support.
+          </motion.p>
+        </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-[hsl(0,100%,50%)]"
+            />
+          </motion.div>
+        </motion.div>
+      </section>
+
+      {/* Pull-Through Selling 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="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-[hsl(0,100%,40%)]/10 text-[hsl(0,100%,40%)] text-sm font-medium mb-6">
+                  Our Strategy
+                </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">
+                  The Power of{" "}
+                  <span className="text-[hsl(0,100%,40%)]">
+                    Pull-Through Selling
+                  </span>
+                </h2>
+              </FadeIn>
+              <FadeIn delay={0.2}>
+                <p className="text-lg text-neutral-600 dark:text-neutral-400 mb-6 leading-relaxed">
+                  We focus on key operators and use a pull-through selling
+                  approach, working closely with our distribution partners to
+                  grow sales organically and sustainably.
+                </p>
+              </FadeIn>
+              <FadeIn delay={0.3}>
+                <p className="text-lg text-neutral-600 dark:text-neutral-400 mb-8 leading-relaxed">
+                  By establishing strong relationships with end-users, we create
+                  demand that naturally flows through the distribution channel,
+                  benefiting everyone in the supply chain.
+                </p>
+              </FadeIn>
+              <FadeIn delay={0.4}>
+                <div className="flex flex-wrap gap-4">
+                  <AnimatedButton
+                    href="/contact"
+                    icon={<ArrowRightIcon size={18} />}
+                  >
+                    Partner With Us
+                  </AnimatedButton>
+                  <AnimatedButton href="/products" variant="outline">
+                    View Products
+                  </AnimatedButton>
+                </div>
+              </FadeIn>
+            </div>
+
+            {/* Visual */}
+            <FadeIn direction="right" delay={0.2}>
+              <div className="relative">
+                <div className="relative aspect-square">
+                  {/* Animated flow diagram */}
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    {/* Outer ring */}
+                    <motion.div
+                      className="absolute w-full h-full rounded-full border-2 border-dashed border-neutral-200 dark:border-neutral-700"
+                      animate={{ rotate: 360 }}
+                      transition={{
+                        duration: 30,
+                        repeat: Infinity,
+                        ease: "linear",
+                      }}
+                    />
+                    {/* Middle ring */}
+                    <motion.div
+                      className="absolute w-3/4 h-3/4 rounded-full border-2 border-dashed border-[hsl(0,100%,40%)]/30"
+                      animate={{ rotate: -360 }}
+                      transition={{
+                        duration: 20,
+                        repeat: Infinity,
+                        ease: "linear",
+                      }}
+                    />
+                    {/* Inner ring */}
+                    <motion.div
+                      className="absolute w-1/2 h-1/2 rounded-full border-2 border-[hsl(0,100%,40%)]/50"
+                      animate={{ rotate: 360 }}
+                      transition={{
+                        duration: 15,
+                        repeat: Infinity,
+                        ease: "linear",
+                      }}
+                    />
+
+                    {/* Center logo */}
+                    <motion.div
+                      whileHover={{ scale: 1.1, rotate: 10 }}
+                      className="relative z-10 bg-white dark:bg-neutral-800 p-6 rounded-2xl shadow-2xl"
+                    >
+                      <Image
+                        src="/assets/brand-logo.png"
+                        alt="TCM Sales"
+                        width={80}
+                        height={80}
+                        className="w-20 h-20 object-contain"
+                      />
+                    </motion.div>
+
+                    {/* Orbiting elements */}
+                    {[
+                      { icon: TruckIcon, label: "Distribution", angle: 0 },
+                      { icon: UsersIcon, label: "Operators", angle: 120 },
+                      { icon: PackageIcon, label: "Products", angle: 240 },
+                    ].map((item, i) => (
+                      <motion.div
+                        key={item.label}
+                        className="absolute"
+                        style={{
+                          top: "50%",
+                          left: "50%",
+                        }}
+                        animate={{
+                          rotate: [item.angle, item.angle + 360],
+                        }}
+                        transition={{
+                          duration: 30,
+                          repeat: Infinity,
+                          ease: "linear",
+                        }}
+                      >
+                        <motion.div
+                          className="relative -translate-x-1/2 -translate-y-1/2"
+                          style={{
+                            transform: `translateY(-140px)`,
+                          }}
+                          whileHover={{ scale: 1.2 }}
+                        >
+                          <motion.div
+                            animate={{ rotate: [-item.angle, -(item.angle + 360)] }}
+                            transition={{
+                              duration: 30,
+                              repeat: Infinity,
+                              ease: "linear",
+                            }}
+                            className="bg-white dark:bg-neutral-800 p-3 rounded-xl shadow-lg border border-neutral-100 dark:border-neutral-700"
+                          >
+                            <item.icon
+                              size={24}
+                              className="text-[hsl(0,100%,40%)]"
+                            />
+                          </motion.div>
+                        </motion.div>
+                      </motion.div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </FadeIn>
+          </div>
+        </div>
+      </section>
+
+      {/* Distribution Partners 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="text-center mb-16">
+            <FadeIn>
+              <span className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[hsl(0,100%,40%)]/10 text-[hsl(0,100%,40%)] text-sm font-medium mb-6">
+                <TruckIcon size={16} />
+                Distribution Partners
+              </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">
+                Supporting Your{" "}
+                <span className="text-[hsl(0,100%,40%)]">Sales Success</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">
+                We work closely with our distribution partners to provide the
+                tools, training, and materials needed to succeed in today&apos;s
+                ever-changing foodservice industry.
+              </p>
+            </FadeIn>
+          </div>
+
+          <StaggerContainer className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {distributorServices.map((service) => (
+              <StaggerItem key={service.title}>
+                <motion.div
+                  whileHover={{ y: -10, scale: 1.02 }}
+                  className="group relative bg-white dark:bg-neutral-900 p-8 rounded-3xl shadow-lg shadow-black/5 hover:shadow-xl transition-all duration-500 h-full border border-neutral-100 dark:border-neutral-800"
+                >
+                  <motion.div
+                    whileHover={{ rotate: 360, scale: 1.1 }}
+                    transition={{ duration: 0.5 }}
+                    className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] flex items-center justify-center text-white mb-6"
+                  >
+                    <service.icon size={24} />
+                  </motion.div>
+                  <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3 group-hover:text-[hsl(0,100%,40%)] transition-colors">
+                    {service.title}
+                  </h3>
+                  <p className="text-neutral-600 dark:text-neutral-400 leading-relaxed">
+                    {service.description}
+                  </p>
+                  <motion.div
+                    className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] rounded-b-3xl origin-left"
+                    initial={{ scaleX: 0 }}
+                    whileHover={{ scaleX: 1 }}
+                    transition={{ duration: 0.3 }}
+                  />
+                </motion.div>
+              </StaggerItem>
+            ))}
+          </StaggerContainer>
+
+          {/* Additional info */}
+          <FadeIn delay={0.4}>
+            <motion.div
+              whileHover={{ scale: 1.01 }}
+              className="mt-12 bg-gradient-to-br from-neutral-900 to-neutral-800 dark:from-neutral-800 dark:to-neutral-900 p-8 md:p-12 rounded-3xl text-white"
+            >
+              <div className="grid md:grid-cols-2 gap-8 items-center">
+                <div>
+                  <h3 className="text-2xl font-bold mb-4">
+                    In-House Marketing Team
+                  </h3>
+                  <p className="text-neutral-300 leading-relaxed">
+                    Our dedicated graphics and marketing team develops customized
+                    sales pieces specific to your needs. We work with district
+                    sales managers and marketing specialists to create tools that
+                    simplify the selling process.
+                  </p>
+                </div>
+                <div className="flex justify-center md:justify-end">
+                  <motion.div
+                    whileHover={{ rotate: 5, scale: 1.05 }}
+                    className="relative"
+                  >
+                    <div className="absolute inset-0 bg-[hsl(0,100%,40%)] rounded-2xl blur-xl opacity-30" />
+                    <div className="relative bg-gradient-to-br from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] p-8 rounded-2xl">
+                      <SparklesIcon size={64} className="text-white" />
+                    </div>
+                  </motion.div>
+                </div>
+              </div>
+            </motion.div>
+          </FadeIn>
+        </div>
+      </section>
+
+      {/* Key Operators 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="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
+            {/* Benefits List */}
+            <FadeIn>
+              <div className="order-2 lg:order-1">
+                <span className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[hsl(0,100%,40%)]/10 text-[hsl(0,100%,40%)] text-sm font-medium mb-6">
+                  <TargetIcon size={16} />
+                  Key Operators
+                </span>
+                <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-neutral-900 dark:text-white mb-6 leading-tight">
+                  Tailored Solutions for{" "}
+                  <span className="text-[hsl(0,100%,40%)]">Your Operations</span>
+                </h2>
+                <p className="text-lg text-neutral-600 dark:text-neutral-400 mb-8 leading-relaxed">
+                  We offer comprehensive consultation of your packaging and
+                  disposable needs. Our team reviews your operations to help you
+                  find the best products for your specific applications.
+                </p>
+
+                <div className="space-y-4">
+                  {operatorBenefits.map((benefit, index) => (
+                    <motion.div
+                      key={benefit}
+                      initial={{ opacity: 0, x: -20 }}
+                      whileInView={{ opacity: 1, x: 0 }}
+                      viewport={{ once: true }}
+                      transition={{ delay: index * 0.1 }}
+                      whileHover={{ x: 10 }}
+                      className="flex items-center gap-4 group cursor-default"
+                    >
+                      <motion.div
+                        whileHover={{ scale: 1.2, rotate: 360 }}
+                        transition={{ duration: 0.3 }}
+                        className="w-8 h-8 rounded-full bg-[hsl(0,100%,40%)]/10 flex items-center justify-center group-hover:bg-[hsl(0,100%,40%)] transition-colors"
+                      >
+                        <CheckIcon
+                          size={16}
+                          className="text-[hsl(0,100%,40%)] group-hover:text-white transition-colors"
+                        />
+                      </motion.div>
+                      <span className="text-neutral-700 dark:text-neutral-300 font-medium group-hover:text-[hsl(0,100%,40%)] transition-colors">
+                        {benefit}
+                      </span>
+                    </motion.div>
+                  ))}
+                </div>
+
+                <motion.div
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ delay: 0.5 }}
+                  className="mt-8"
+                >
+                  <AnimatedButton
+                    href="/contact"
+                    icon={<ArrowRightIcon size={18} />}
+                  >
+                    Schedule a Consultation
+                  </AnimatedButton>
+                </motion.div>
+              </div>
+            </FadeIn>
+
+            {/* Visual */}
+            <FadeIn direction="right" delay={0.2}>
+              <div className="order-1 lg:order-2 relative">
+                <div className="relative aspect-square rounded-3xl overflow-hidden bg-gradient-to-br from-[hsl(0,100%,40%)]/5 to-[hsl(0,100%,40%)]/10 dark:from-[hsl(0,100%,40%)]/10 dark:to-[hsl(0,100%,40%)]/5">
+                  {/* Decorative elements */}
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <motion.div
+                      animate={{ scale: [1, 1.1, 1] }}
+                      transition={{
+                        duration: 4,
+                        repeat: Infinity,
+                        ease: "easeInOut",
+                      }}
+                      className="w-64 h-64 rounded-full bg-[hsl(0,100%,40%)]/10 flex items-center justify-center"
+                    >
+                      <motion.div
+                        animate={{ scale: [1.1, 1, 1.1] }}
+                        transition={{
+                          duration: 4,
+                          repeat: Infinity,
+                          ease: "easeInOut",
+                        }}
+                        className="w-48 h-48 rounded-full bg-[hsl(0,100%,40%)]/15 flex items-center justify-center"
+                      >
+                        <motion.div
+                          whileHover={{ rotate: 360 }}
+                          transition={{ duration: 0.5 }}
+                          className="w-32 h-32 rounded-full bg-gradient-to-br from-[hsl(0,100%,45%)] to-[hsl(0,100%,35%)] flex items-center justify-center shadow-xl"
+                        >
+                          <TargetIcon size={48} className="text-white" />
+                        </motion.div>
+                      </motion.div>
+                    </motion.div>
+                  </div>
+
+                  {/* Floating cards */}
+                  <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    whileHover={{ scale: 1.05, rotate: 2 }}
+                    className="absolute top-8 right-8 bg-white dark:bg-neutral-800 p-4 rounded-xl shadow-lg"
+                  >
+                    <p className="text-sm font-medium text-neutral-900 dark:text-white">
+                      Custom Solutions
+                    </p>
+                    <p className="text-xs text-neutral-500">
+                      Tailored to your needs
+                    </p>
+                  </motion.div>
+
+                  <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ delay: 0.2 }}
+                    whileHover={{ scale: 1.05, rotate: -2 }}
+                    className="absolute bottom-8 left-8 bg-white dark:bg-neutral-800 p-4 rounded-xl shadow-lg"
+                  >
+                    <p className="text-sm font-medium text-neutral-900 dark:text-white">
+                      Expert Guidance
+                    </p>
+                    <p className="text-xs text-neutral-500">
+                      Industry professionals
+                    </p>
+                  </motion.div>
+                </div>
+              </div>
+            </FadeIn>
+          </div>
+        </div>
+      </section>
+
+      {/* Process Section */}
+      <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{" "}
+                <span className="text-[hsl(0,100%,55%)]">Work With You</span>
+              </h2>
+            </FadeIn>
+            <FadeIn delay={0.2}>
+              <p className="max-w-2xl mx-auto text-lg text-neutral-400">
+                A proven approach to building successful, long-term partnerships.
+              </p>
+            </FadeIn>
+          </div>
+
+          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {processSteps.map((item, index) => (
+              <FadeIn key={item.step} delay={index * 0.1}>
+                <motion.div
+                  whileHover={{ y: -10 }}
+                  className="group relative"
+                >
+                  {/* Connector line */}
+                  {index < processSteps.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">
+                    <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>
+
+      {/* CTA Section */}
+      <section className="section-padding bg-[hsl(0,100%,40%)] text-white relative overflow-hidden">
+        {/* Background pattern */}
+        <div className="absolute inset-0 opacity-10">
+          <svg
+            className="w-full h-full"
+            viewBox="0 0 100 100"
+            preserveAspectRatio="none"
+          >
+            <pattern
+              id="grid-cta"
+              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-cta)" />
+          </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">
+              Ready to Grow Together?
+            </h2>
+          </FadeIn>
+          <FadeIn delay={0.1}>
+            <p className="text-xl text-white/90 mb-10 leading-relaxed">
+              Whether you&apos;re a distributor looking for support or an operator
+              seeking the right solutions, we&apos;re here to help.
+            </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 border-white hover:bg-white/10">
+                  Explore Products
+                </span>
+              </AnimatedButton>
+            </div>
+          </FadeIn>
+        </div>
+      </section>
+
+      <Footer />
+    </main>
+  );
+}