Corporate/Professional Fertigungskolonnenkomponente

<section class="py-12 bg-orange-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-orange-800 dark:text-orange-300 mb-4 tracking-tight">
        Driving Industrial Innovation
      </h2>
      <p class="text-lg sm:text-xl text-brown-700 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
        Leading the future of manufacturing with precision, efficiency, and unwavering commitment to quality.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 xl:gap-12">
      <!-- Column 1: Advanced Automation -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1 p-6 relative group border-t-4 border-orange-600 dark:border-orange-500">
        <div class="absolute top-0 left-1/2 -translate-x-1/2 -mt-6 p-4 bg-orange-600 dark:bg-orange-500 rounded-full shadow-lg">
          <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1.5-1.5M15 17l.75 3L17 18.5M2.25 10.5l1.5 5.25L5.75 10.5M9 6h6M19.5 10.5l-1.5 5.25L16.25 10.5M12 21a9 9 0 100-18 9 9 0 000 18z" />
          </svg>
        </div>
        <div class="pt-8">
          <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-3 group-hover:text-orange-600 dark:group-hover:text-orange-400 transition-colors duration-300">
            Advanced Automation
          </h3>
          <p class="text-brown-700 dark:text-gray-300 mb-5 leading-relaxed">
            Leveraging cutting-edge robotics and AI to optimize production workflows and reduce operational costs.
          </p>
          <img src="https://picsum.photos/400/250?random=1" alt="Industrial robots" class="rounded-md mb-5 shadow-md group-hover:shadow-lg transition-shadow duration-300 object-cover w-full h-40">
          <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 mb-6 space-y-2">
            <li>Robotic Process Automation (RPA)</li>
            <li>Machine Learning for Predictive Maintenance</li>
            <li>Automated Quality Control Systems</li>
          </ul>
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-orange-700 hover:bg-orange-800 dark:bg-orange-600 dark:hover:bg-orange-700 transition-colors duration-300 shadow-md">
            Learn More
            <svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </a>
        </div>
      </div>

      <!-- Column 2: Sustainable Manufacturing -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1 p-6 relative group border-t-4 border-burgundy-700 dark:border-burgundy-600">
        <div class="absolute top-0 left-1/2 -translate-x-1/2 -mt-6 p-4 bg-burgundy-700 dark:bg-burgundy-600 rounded-full shadow-lg">
          <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13.5l4 4L19.5 6" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <div class="pt-8">
          <h3 class="text-2xl font-bold text-burgundy-800 dark:text-burgundy-200 mb-3 group-hover:text-burgundy-600 dark:group-hover:text-burgundy-400 transition-colors duration-300">
            Sustainable Manufacturing
          </h3>
          <p class="text-brown-700 dark:text-gray-300 mb-5 leading-relaxed">
            Pioneering eco-friendly production methods to minimize environmental impact and foster a greener future.
          </p>
          <img src="https://picsum.photos/400/250?random=2" alt="Eco-friendly factory" class="rounded-md mb-5 shadow-md group-hover:shadow-lg transition-shadow duration-300 object-cover w-full h-40">
          <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 mb-6 space-y-2">
            <li>Renewable Energy Integration</li>
            <li>Waste Reduction & Recycling Programs</li>
            <li>Carbon Footprint Optimization</li>
          </ul>
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-burgundy-700 hover:bg-burgundy-800 dark:bg-burgundy-600 dark:hover:bg-burgundy-700 transition-colors duration-300 shadow-md">
            Explore Initiatives
            <svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </a>
        </div>
      </div>

      <!-- Column 3: Global Supply Chain Excellence -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1 p-6 relative group border-t-4 border-brown-700 dark:border-brown-600">
        <div class="absolute top-0 left-1/2 -translate-x-1/2 -mt-6 p-4 bg-brown-700 dark:bg-brown-600 rounded-full shadow-lg">
          <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
        </div>
        <div class="pt-8">
          <h3 class="text-2xl font-bold text-brown-800 dark:text-brown-200 mb-3 group-hover:text-brown-600 dark:group-hover:text-brown-400 transition-colors duration-300">
            Global Supply Chain Excellence
          </h3>
          <p class="text-brown-700 dark:text-gray-300 mb-5 leading-relaxed">
            Building resilient and efficient supply networks to ensure timely delivery and consistent product availability.
          </p>
          <img src="https://picsum.photos/400/250?random=3" alt="Global logistics network" class="rounded-md mb-5 shadow-md group-hover:shadow-lg transition-shadow duration-300 object-cover w-full h-40">
          <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 mb-6 space-y-2">
            <li>Real-time Logistics Tracking</li>
            <li>Supplier Relationship Management</li>
            <li>Risk Mitigation Strategies</li>
          </ul>
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-brown-700 hover:bg-brown-800 dark:bg-brown-600 dark:hover:bg-brown-700 transition-colors duration-300 shadow-md">
            Discover Our Reach
            <svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </a>
        </div>
      </div>
    </div>

    <div class="text-center mt-12">
      <a href="#" class="inline-flex items-center justify-center px-8 py-4 border border-transparent text-base font-medium rounded-md text-white bg-burgundy-800 hover:bg-burgundy-900 dark:bg-burgundy-700 dark:hover:bg-burgundy-800 transition-colors duration-300 shadow-lg sm:text-xl">
        Contact Our Experts
        <svg class="ml-3 -mr-1 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8H8a2 2 0 00-2 2v6a2 2 0 002 2h9a2 2 0 002-2v-6a2 2 0 00-2-2zM9 11a1 1 0 100 2h6a1 1 0 100-2H9z" />
        </svg>
      </a>
    </div>
  </div>
</section>

<style>
  /* Custom colors for autumn palette */
  .text-brown-700 { color: #8B4513; } /* SaddleBrown */
  .dark\:text-brown-200 { color: #D2B48C; } /* Tan light for dark mode */
  .dark\:text-brown-400 { color: #A0522D; } /* Sienna light for dark mode hover */
  .bg-brown-700 { background-color: #A0522D; } /* Sienna */
  .hover\:bg-brown-800:hover { background-color: #8B4513; } /* SaddleBrown for hover */
  .dark\:bg-brown-600 { background-color: #D2B48C; } /* Tan */
  .dark\:hover\:bg-brown-700:hover { background-color: #A0522D; } /* Sienna for dark hover */

  .text-burgundy-700 { color: #800020; } /* Burgundy */
  .text-burgundy-800 { color: #6A0527; } /* slightly darker burgundy */
  .dark\:text-burgundy-200 { color: #EDC1C1; } /* light pink for dark mode */
  .dark\:text-burgundy-400 { color: #EC2E5F; } /* medium pink for dark hover */
  .bg-burgundy-700 { background-color: #800020; } /* Burgundy */
  .hover\:bg-burgundy-800:hover { background-color: #6A0527; } /* slightly darker burgundy for hover */
  .dark\:bg-burgundy-600 { background-color: #C04000; } /* Burnt Orange */
  .dark\:hover\:bg-burgundy-700:hover { background-color: #800020; } /* Burgundy for dark hover */

  .text-orange-800 { color: #CC5500; } /* Dark Orange */
  .dark\:text-orange-200 { color: #FFDAB9; } /* PeachPuff for dark */
  .dark\:text-orange-300 { color: #FFC0CB; } /* LightPink for dark heading */
  .dark\:text-orange-400 { color: #FFB347; } /* Light Orange for dark hover */
  .bg-orange-700 { background-color: #FF8c00; } /* DarkOrange */
  .hover\:bg-orange-800:hover { background-color: #CC5500; } /* Darker Orange for hover */
  .dark\:bg-orange-600 { background-color: #FFA07A; } /* LightSalmon light for dark */
  .dark\:hover\:bg-orange-700:hover { background-color: #FF8c00; } /* DarkOrange light for dark hover */

  .border-orange-600 { border-color: #FF8c00; }
  .dark\:border-orange-500 { border-color: #FFA07A; }
  .border-burgundy-700 { border-color: #800020; }
  .dark\:border-burgundy-600 { border-color: #C04000; }
  .border-brown-700 { border-color: #A0522D; }
  .dark\:border-brown-600 { border-color: #D2B48C; }
<\/style>