Luxury_Container_Component

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 font-sans p-4 sm:p-8 md:p-12 lg:p-16 flex items-center justify-center">
  <div class="w-full max-w-7xl rounded-3xl shadow-2xl overflow-hidden
              bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-500
              dark:from-gray-800 dark:via-gray-900 dark:to-gray-950
              transform transition-all duration-500 hover:scale-[1.01] hover:shadow-3xl
              p-6 sm:p-8 md:p-10 lg:p-12 relative">

    <div class="absolute inset-0 bg-white bg-opacity-10 dark:bg-black dark:bg-opacity-20 rounded-3xl pointer-events-none"></div>

    <div class="relative z-10 text-white dark:text-gray-200">
      
      <header class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-10 border-b border-white border-opacity-20 dark:border-gray-700 pb-6">
        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight mb-2 sm:mb-0
                   bg-clip-text text-transparent bg-gradient-to-r from-white via-indigo-200 to-pink-100
                   dark:from-blue-300 dark:via-purple-300 dark:to-pink-300">
          Quantum Synthetics
        </h1>
        <nav class="text-lg space-x-4 sm:space-x-6">
          <a href="#" class="font-medium opacity-80 hover:opacity-100 transition-opacity">Overview</a>
          <a href="#" class="font-medium opacity-80 hover:opacity-100 transition-opacity">Products</a>
          <a href="#" class="font-medium opacity-80 hover:opacity-100 transition-opacity">Innovations</a>
          <a href="#" class="font-medium opacity-80 hover:opacity-100 transition-opacity">Contact</a>
        </nav>
      </header>

      <section class="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12 mb-12">
        <div class="space-y-6">
          <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold leading-tight
                     bg-clip-text text-transparent bg-gradient-to-r from-yellow-200 via-green-200 to-blue-200
                     dark:from-cyan-300 dark:via-teal-300 dark:to-indigo-300">
            Pioneering the Future of Industrial Automation & Materials Science
          </h2>
          <p class="text-lg leading-relaxed opacity-90">
            At Quantum Synthetics, we are dedicated to pushing the boundaries of manufacturing excellence. Our advanced robotics, AI-driven processes, and next-generation materials are designed to optimize efficiency, enhance precision, and deliver unparalleled quality across critical industries.
          </p>
          <div class="flex flex-wrap gap-4">
            <button class="px-8 py-3 rounded-full text-lg font-semibold
                           bg-white text-purple-700 shadow-md transform hover:scale-105 transition-transform duration-300
                           dark:bg-gray-200 dark:text-gray-900">
              Explore Solutions
            </button>
            <button class="px-8 py-3 rounded-full text-lg font-semibold
                           bg-transparent border-2 border-white border-opacity-60 text-white shadow-md transform hover:scale-105 transition-transform duration-300
                           dark:border-pink-300 dark:text-pink-300">
              Request a Demo
            </button>
          </div>
        </div>
        <div class="relative h-64 sm:h-80 md:h-autorounded-xl overflow-hidden
                    shadow-xl transform hover:scale-[1.02] transition-transform duration-300">
          <img src="https://picsum.photos/1200/800?random=1" alt="Industrial Innovation" loading="lazy" class="w-full h-full object-cover rounded-xl">
          <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60 rounded-xl"></div>
          <p class="absolute bottom-4 left-4 text-white text-sm opacity-80 italic">Cutting-edge robotics in action.</p>
        </div>
      </section>

      <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
        <div class="p-6 rounded-2xl bg-white bg-opacity-15 dark:bg-black dark:bg-opacity-30 shadow-lg backdrop-blur-md
                    transition-transform duration-300 hover:translate-y-[-5px]">
          <h3 class="text-2xl font-bold mb-3
                     bg-clip-text text-transparent bg-gradient-to-r from-teal-200 to-blue-200
                     dark:from-lime-300 dark:to-cyan-300">Advanced Robotics</h3>
          <p class="opacity-90">Revolutionizing production lines with smart, autonomous robotic systems.</p>
        </div>
        <div class="p-6 rounded-2xl bg-white bg-opacity-15 dark:bg-black dark:bg-opacity-30 shadow-lg backdrop-blur-md
                    transition-transform duration-300 hover:translate-y-[-5px]">
          <h3 class="text-2xl font-bold mb-3
                     bg-clip-text text-transparent bg-gradient-to-r from-orange-200 to-red-200
                     dark:from-pink-300 dark:to-orange-300">AI-Driven Analytics</h3>
          <p class="opacity-90">Leveraging AI for predictive maintenance and operational optimization.</p>
        </div>
        <div class="p-6 rounded-2xl bg-white bg-opacity-15 dark:bg-black dark:bg-opacity-30 shadow-lg backdrop-blur-md
                    transition-transform duration-300 hover:translate-y-[-5px]">
          <h3 class="text-2xl font-bold mb-3
                     bg-clip-text text-transparent bg-gradient-to-r from-purple-200 to-indigo-200
                     dark:from-purple-300 dark:to-blue-300">Sustainable Materials</h3>
          <p class="opacity-90">Developing eco-friendly, high-performance composites for diverse applications.</p>
        </div>
      </section>

      <section class="mb-12">
        <h2 class="text-3xl sm:text-4xl font-bold mb-8 text-center
                   bg-clip-text text-transparent bg-gradient-to-r from-cyan-300 via-emerald-300 to-yellow-300
                   dark:from-blue-300 dark:via-green-300 dark:to-orange-300">
          Our Leadership in Action
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12 items-center">
          <div class="text-right space-y-4">
            <p class="text-xl italic opacity-90">
              "Innovation is not just what we do, it's who we are. Our commitment to excellence drives every project, ensuring our partners achieve their fullest potential."
            </p>
            <div class="flex items-center justify-end space-x-4">
              <div class="text-left">
                <p class="font-semibold text-lg">Dr. Anya Sharma</p>
                <p class="text-sm opacity-80">CEO, Quantum Synthetics</p>
              </div>
              <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Dr. Anya Sharma" class="w-16 h-16 rounded-full border-4 border-white border-opacity-50 shadow-md">
            </div>
          </div>
          <div class="relative h-64 sm:h-80 rounded-xl overflow-hidden
                      shadow-xl transform hover:scale-[1.02] transition-transform duration-300">
            <img src="https://picsum.photos/1200/800?random=2" alt="CEO at work" loading="lazy" class="w-full h-full object-cover rounded-xl">
            <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60 rounded-xl"></div>
            <p class="absolute bottom-4 right-4 text-white text-sm opacity-80 italic">Future-proofing industries.</p>
          </div>
        </div>
      </section>

      <footer class="border-t border-white border-opacity-20 dark:border-gray-700 pt-8 text-center">
        <p class="text-sm opacity-70">&copy; 2023 Quantum Synthetics. All rights reserved.</p>
        <div class="flex justify-center space-x-6 mt-4">
          <a href="#" class="text-white opacity-70 hover:opacity-100 transition-opacity">Privacy Policy</a>
          <a href="#" class="text-white opacity-70 hover:opacity-100 transition-opacity">Terms of Service</a>
          <a href="#" class="text-white opacity-70 hover:opacity-100 transition-opacity">Sitemap</a>
        </div>
      </footer>

    </div>
  </div>
</div>