トライアド 3D ビジネス レイアウト コンポーネント

<div class="bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-900 dark:to-teal-950 min-h-screen p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">

  <!-- Header Section -->
  <header class="max-w-7xl mx-auto mb-8 lg:mb-12 rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-4 sm:p-6 lg:p-8 transform perspective-1000 rotateX-3 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateX-0 hover:translateZ-10 hover:shadow-2xl">
    <div class="flex flex-col sm:flex-row justify-between items-center">
      <div class="flex items-center space-x-2">
        <svg class="h-8 w-8 text-indigo-600 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9a9 9 0 00-9-9H3m0 0l3.75 3.75M3 12h6.5m4.25-5.25L12 3m-4.5 9h-4.5m16.5 0h-4.5m-4.5 4.5l-3.75 3.75M12 21V9.75" />
        </svg>
        <h1 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white capitalize">Company Name</h1>
      </div>
      <nav class="mt-4 sm:mt-0">
        <ul class="flex flex-wrap justify-center sm:justify-start gap-x-4 sm:gap-x-6 text-base font-medium">
          <li><a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">Home</a></li>
          <li><a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">Services</a></li>
          <li><a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">About</a></li>
          <li><a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- Main Content Area -->
  <main class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">

    <!-- Hero/Featured Section (Column 1) -->
    <section class="lg:col-span-2 rounded-xl bg-gradient-to-br from-indigo-500 via-purple-600 to-teal-500 shadow-2xl overflow-hidden p-6 sm:p-8 lg:p-10 relative group transform perspective-1000 rotateY-3 translateZ-0 transition-all duration-500 will-change-transform hover:rotateY-0 hover:translateZ-10 hover:shadow-deep dark:from-indigo-700 dark:via-purple-800 dark:to-teal-700">
      <div class="absolute inset-0 bg-pattern opacity-10 dark:opacity-20 pointer-events-none"></div>
      <div class="relative z-10 flex flex-col items-start">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white leading-tight mb-4 capitalize drop-shadow-lg">Innovate. Achieve. Transform.</h2>
        <p class="text-base sm:text-lg text-indigo-100 mb-6 lg:mb-8 max-w-2xl">We provide cutting-edge solutions to propel your business forward in the digital age. Our expert team is dedicated to your success.</p>
        <button class="px-6 py-3 bg-white text-indigo-700 font-bold rounded-full shadow-lg hover:bg-indigo-100 transition-all duration-300 transform hover:scale-105 dark:bg-gray-200 dark:text-purple-800 capitalize">Discover More</button>
      </div>
    </section>

    <!-- Sidebar/Stats Section (Column 2) -->
    <aside class="rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-6 sm:p-8 transform perspective-1000 rotateY--3 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateY-0 hover:translateZ-10 hover:shadow-2xl flex flex-col justify-between">
      <div>
        <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 capitalize">Our Impact</h3>
        <div class="space-y-4">
          <div class="flex items-center space-x-3">
            <div class="p-3 bg-indigo-100 rounded-full dark:bg-indigo-900/50">
              <svg class="h-6 w-6 text-indigo-600 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
              </svg>
            </div>
            <div>
              <p class="text-xl font-semibold text-gray-900 dark:text-white">250+</p>
              <p class="text-gray-600 dark:text-gray-400 capitalize">Satisfied Clients</p>
            </div>
          </div>
          <div class="flex items-center space-x-3">
            <div class="p-3 bg-purple-100 rounded-full dark:bg-purple-900/50">
              <svg class="h-6 w-6 text-purple-600 dark:text-teal-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16v4m-2-2h4M13 17v4m-2-2h4m5-16v4m-2-2h4m-2 20h2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2h12zm-3-10L14 7l-2 2-2-2-3 3-2-2m6-2V6" />
              </svg>
            </div>
            <div>
              <p class="text-xl font-semibold text-gray-900 dark:text-white">10+ Years</p>
              <p class="text-gray-600 dark:text-gray-400 capitalize">Industry Experience</p>
            </div>
          </div>
          <div class="flex items-center space-x-3">
            <div class="p-3 bg-teal-100 rounded-full dark:bg-teal-900/50">
              <svg class="h-6 w-6 text-teal-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.747-.602-3.328-1.602-4.664z" />
              </svg>
            </div>
            <div>
              <p class="text-xl font-semibold text-gray-900 dark:text-white">99%</p>
              <p class="text-gray-600 dark:text-gray-400 capitalize">Project Success Rate</p>
            </div>
          </div>
        </div>
      </div>
    </aside>

    <!-- Content Grid (Column 3) -->
    <section class="lg:col-span-3 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">

      <!-- Service Card 1 -->
      <article class="rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-6 sm:p-8 transform perspective-1000 rotateY-1 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateY-0 hover:translateZ-10 hover:shadow-2xl">
        <img src="https://picsum.photos/400/250?random=1" alt="Web Development" class="rounded-lg mb-4 w-full object-cover" loading="lazy">
        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 capitalize">Web Development</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4 text-sm">Building responsive, high-performance websites tailored to your business needs.</p>
        <a href="#" class="text-indigo-600 hover:underline dark:text-purple-400 text-sm font-semibold capitalize">Learn More &rarr;</a>
      </article>

      <!-- Service Card 2 -->
      <article class="rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-6 sm:p-8 transform perspective-1000 rotateY-NEG1 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateY-0 hover:translateZ-10 hover:shadow-2xl">
        <img src="https://picsum.photos/400/250?random=2" alt="Digital Marketing" class="rounded-lg mb-4 w-full object-cover" loading="lazy">
        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 capitalize">Digital Marketing</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4 text-sm">Strategizing and executing effective digital campaigns to maximize your reach.</p>
        <a href="#" class="text-indigo-600 hover:underline dark:text-purple-400 text-sm font-semibold capitalize">Learn More &rarr;</a>
      </article>

      <!-- Service Card 3 -->
      <article class="rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-6 sm:p-8 transform perspective-1000 rotateY-2 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateY-0 hover:translateZ-10 hover:shadow-2xl">
        <img src="https://picsum.photos/400/250?random=3" alt="Cloud Solutions" class="rounded-lg mb-4 w-full object-cover" loading="lazy">
        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 capitalize">Cloud Solutions</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4 text-sm">Scalable and secure cloud infrastructure to power your business operations.</p>
        <a href="#" class="text-indigo-600 hover:underline dark:text-purple-400 text-sm font-semibold capitalize">Learn More &rarr;</a>
      </article>

      <!-- Call to Action Card -->
      <div class="md:col-span-2 lg:col-span-3 bg-indigo-600 dark:bg-purple-800 rounded-xl shadow-xl overflow-hidden p-6 sm:p-8 lg:p-10 flex flex-col sm:flex-row items-center justify-between text-white transform perspective-1000 rotateX-NEG2 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateX-0 hover:translateZ-10 hover:shadow-2xl">
        <div class="text-center sm:text-left mb-4 sm:mb-0">
          <h3 class="text-2xl font-bold mb-2 capitalize">Ready to elevate your business?</h3>
          <p class="text-indigo-100 text-lg">Let's create something extraordinary together.</p>
        </div>
        <button class="px-6 py-3 bg-white text-indigo-700 font-bold rounded-full shadow-lg hover:bg-indigo-100 transition-all duration-300 transform hover:scale-105 dark:bg-gray-200 dark:text-purple-800 capitalize">Get Started Today</button>
      </div>

    </section>
  </main>

  <!-- Footer Section -->
  <footer class="max-w-7xl mx-auto mt-8 lg:mt-12 rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-4 sm:p-6 lg:p-8 text-center text-gray-700 dark:text-gray-300 transform perspective-1000 rotateX-3 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateX-0 hover:translateZ-10 hover:shadow-2xl">
    <p>&copy; 2023 Company Name. All rights reserved.</p>
    <div class="flex justify-center space-x-4 mt-2">
      <a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">Privacy Policy</a>
      <span class="text-gray-400">|</span>
      <a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">Terms of Service</a>
    </div>
  </footer>

</div>

<style>
  /* Custom properties for 3D transforms */
  .perspective-1000 { perspective: 1000px; }
  .rotateX-3 { transform: rotateX(3deg); }
  .rotateX-NEG2 { transform: rotateX(-2deg); }
  .rotateY-3 { transform: rotateY(3deg); }
  .rotateY-NEG1 { transform: rotateY(-1deg); }
  .rotateY-2 { transform: rotateY(2deg); }
  .translateZ-0 { transform: translateZ(0); }
  
  /* Deeper shadow for 3D effect */
  .shadow-deep {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
  }
  .dark .shadow-deep {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  }

  /* Simple patterned background for hero */
  .bg-pattern {
    background-image: radial-gradient(#ffffff20 1px, transparent 1px);
    background-size: 20px 20px;
  }

  /* Ensure transforms apply correctly */
  .group:hover .group-hover\:rotateX-0 { transform: rotateX(0deg); }
  .group:hover .group-hover\:translateZ-10 { transform: translateZ(10px); }
  .group:hover .group-hover\:shadow-2xl { box-shadow: var(--tw-shadow); }
</style>