アールデコ教育グリッド

<div class="p-4 sm:p-8 bg-zinc-100 dark:bg-zinc-900 font-serif text-zinc-900 dark:text-zinc-50 min-h-screen">
  <div class="max-w-7xl mx-auto space-y-12">

    <!-- Header Section -->
    <header class="text-center space-y-4 pt-8 pb-12 rounded-xl border-4 border-amber-600 dark:border-amber-400 bg-gradient-to-br from-amber-100 to-amber-200 dark:from-zinc-800 dark:to-zinc-800/50 shadow-lg dark:shadow-xl shadow-amber-300/30 dark:shadow-amber-900/50 relative overflow-hidden">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/art-deco.png')] opacity-20 dark:opacity-10 pointer-events-none"></div>
      <h1 class="relative z-10 text-5xl sm:text-6xl font-extrabold text-amber-900 uppercase tracking-widest leading-tight drop-shadow-lg dark:text-amber-300">
        The Grand Hall of Knowledge
      </h1>
      <p class="relative z-10 text-xl sm:text-2xl font-light text-amber-800 dark:text-amber-200 mt-4">
        Explore the Foundations of Thought and Creativity
      </p>
      <div class="relative z-10 mt-8">
        <button class="px-8 py-4 bg-amber-700 hover:bg-amber-800 text-white font-bold text-lg rounded-full shadow-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:bg-amber-500 dark:hover:bg-amber-600 dark:focus:ring-amber-400/50">
          Start Your Journey
        </button>
      </div>
    </header>

    <!-- Main Content Grid -->
    <main class="grid grid-cols-1 md:grid-cols-3 gap-8">

      <!-- Featured Course Card -->
      <section class="md:col-span-2 bg-gradient-to-br from-red-800 to-red-900 dark:from-red-900 dark:to-red-950 p-6 sm:p-8 rounded-xl shadow-2xl border-4 border-amber-500 dark:border-amber-400 relative overflow-hidden group">
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/argyle.png')] opacity-10 dark:opacity-5 pointer-events-none"></div>
        <div class="relative z-10 flex flex-col sm:flex-row gap-6 items-center">
          <img src="https://picsum.photos/seed/course1/400/300" alt="Featured Course" class="w-full sm:w-2/5 md:w-1/2 lg:w-2/5 aspect-video object-cover rounded-lg border-2 border-amber-300 shadow-md transform group-hover:scale-102 transition duration-300">
          <div class="flex-1 text-white">
            <h2 class="text-4xl font-bold mb-3 text-amber-200 leading-tight drop-shadow-md">Mastering Art Deco Design Principles</h2>
            <p class="text-lg text-amber-100 mb-4 line-clamp-3">Dive deep into the golden age of Art Deco, exploring its iconic geometric forms, opulent materials, and timeless elegance.</p>
            <ul class="text-amber-50 text-sm space-y-1 mb-4">
              <li><strong class="text-amber-200">Lectures:</strong> 12</li>
              <li><strong class="text-amber-200">Duration:</strong> 18 Hours</li>
              <li><strong class="text-amber-200">Instructor:</strong> Dr. Eleanor Vance</li>
            </ul>
            <a href="#" class="inline-block px-6 py-3 bg-amber-600 hover:bg-amber-700 text-white font-semibold rounded-full shadow-lg transition duration-300 ease-in-out transform hover:translate-y-1 focus:outline-none focus:ring-4 focus:ring-amber-300/50 dark:bg-amber-500 dark:hover:bg-amber-600 dark:focus:ring-amber-400/50">
              Enroll Now
            </a>
          </div>
        </div>
      </section>

      <!-- Quick Links / Navigation -->
      <nav class="bg-zinc-200 dark:bg-zinc-800 p-6 rounded-xl shadow-lg border-4 border-amber-600 dark:border-amber-400 relative overflow-hidden">
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/crissxcross.png')] opacity-20 dark:opacity-10"></div>
        <h2 class="relative z-10 text-3xl font-bold text-amber-900 dark:text-amber-300 mb-6 text-center">Quick Access</h2>
        <ul class="relative z-10 space-y-4">
          <li>
            <a href="#" class="flex items-center p-4 bg-zinc-300 dark:bg-zinc-700 rounded-lg transform hover:scale-105 transition duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-amber-500 border border-zinc-400 dark:border-zinc-600">
              <svg class="h-6 w-6 mr-3 text-amber-700 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
              <span class="text-lg font-semibold text-zinc-800 dark:text-zinc-100">Browse Courses</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-4 bg-zinc-300 dark:bg-zinc-700 rounded-lg transform hover:scale-105 transition duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-amber-500 border border-zinc-400 dark:border-zinc-600">
              <svg class="h-6 w-6 mr-3 text-amber-700 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zm-4 4a2 2 0 100 4 2 2 0 000-4zm-8-2a2 2 0 11-4 0 2 2 0 014 0zM7 8a2 2 0 100-4 2 2 0 000 4z"></path></svg>
              <span class="text-lg font-semibold text-zinc-800 dark:text-zinc-100">Meet Instructors</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-4 bg-zinc-300 dark:bg-zinc-700 rounded-lg transform hover:scale-105 transition duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-amber-500 border border-zinc-400 dark:border-zinc-600">
              <svg class="h-6 w-6 mr-3 text-amber-700 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6a2 2 0 00-2-2H5a2 2 0 00-2 2v13a2 2 0 002 2h4m2 0h4a2 2 0 002-2V6a2 2 0 00-2-2h-4m0 16V6"></path></svg>
              <span class="text-lg font-semibold text-zinc-800 dark:text-zinc-100">My Dashboard</span>
            </a>
          </li>
        </ul>
      </nav>

      <!-- Latest Articles Section -->
      <section class="md:col-span-3 bg-zinc-50 dark:bg-zinc-900 p-6 sm:p-8 rounded-xl shadow-xl border-4 border-amber-600 dark:border-400">
        <h2 class="text-3xl font-bold text-amber-900 dark:text-amber-300 mb-6 text-center">Latest Insights from Our Scholars</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

          <!-- Article Card 1 -->
          <article class="bg-white dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-lg transition duration-300 overflow-hidden border border-zinc-200 dark:border-zinc-700 transform hover:scale-102 group">
            <img src="https://picsum.photos/seed/article1/500/300" alt="Article Image" class="w-full h-48 object-cover rounded-t-lg group-hover:brightness-90 transition duration-300">
            <div class="p-5">
              <h3 class="text-xl font-semibold text-amber-900 dark:text-amber-200 mb-2 line-clamp-2">The Geometry of Gotham: Art Deco Skyscrapers</h3>
              <p class="text-zinc-700 dark:text-zinc-300 text-sm line-clamp-3 mb-3">Explore the architectural marvels that defined a city, from the Chrysler Building to the Empire State Building.</p>
              <div class="flex items-center text-zinc-600 dark:text-zinc-400 text-xs mb-3">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-amber-400">
                <span>By Jane Doe - <time datetime="2023-10-26">Oct 26, 2023</time></span>
              </div>
              <a href="#" class="inline-block text-amber-700 dark:text-amber-300 font-semibold hover:underline">
                Read More <span aria-hidden="true">&rarr;</span>
              </a>
            </div>
          </article>

          <!-- Article Card 2 -->
          <article class="bg-white dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-lg transition duration-300 overflow-hidden border border-zinc-200 dark:border-zinc-700 transform hover:scale-102 group">
            <img src="https://picsum.photos/seed/article2/500/300" alt="Article Image" class="w-full h-48 object-cover rounded-t-lg group-hover:brightness-90 transition duration-300">
            <div class="p-5">
              <h3 class="text-xl font-semibold text-amber-900 dark:text-amber-200 mb-2 line-clamp-2">Autumnal Palettes in Historical Art: A Study</h3>
              <p class="text-zinc-700 dark:text-zinc-300 text-sm line-clamp-3 mb-3">Discover how masters throughout history captured the vibrant and melancholic beauty of autumn.</p>
              <div class="flex items-center text-zinc-600 dark:text-zinc-400 text-xs mb-3">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-amber-400">
                <span>By John Smith - <time datetime="2023-10-20">Oct 20, 2023</time></span>
              </div>
              <a href="#" class="inline-block text-amber-700 dark:text-amber-300 font-semibold hover:underline">
                Read More <span aria-hidden="true">&rarr;</span>
              </a>
            </div>
          </article>

          <!-- Article Card 3 -->
          <article class="bg-white dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-lg transition duration-300 overflow-hidden border border-zinc-200 dark:border-zinc-700 transform hover:scale-102 group">
            <img src="https://picsum.photos/seed/article3/500/300" alt="Article Image" class="w-full h-48 object-cover rounded-t-lg group-hover:brightness-90 transition duration-300">
            <div class="p-5">
              <h3 class="text-xl font-semibold text-amber-900 dark:text-amber-200 mb-2 line-clamp-2">The Resurgence of Craftsmanship in the Digital Age</h3>
              <p class="text-zinc-700 dark:text-zinc-300 text-sm line-clamp-3 mb-3">An exploration into how traditional skills are finding new relevance and expression today.</p>
              <div class="flex items-center text-zinc-600 dark:text-zinc-400 text-xs mb-3">
                <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-amber-400">
                <span>By Emily White - <time datetime="2023-10-15">Oct 15, 2023</time></span>
              </div>
              <a href="#" class="inline-block text-amber-700 dark:text-amber-300 font-semibold hover:underline">
                Read More <span aria-hidden="true">&rarr;</span>
              </a>
            </div>
          </article>

        </div>
      </section>

      <!-- Testimonial / Quote Section -->
      <section class="md:col-span-2 bg-gradient-to-br from-orange-200 to-orange-300 dark:from-orange-950 dark:to-orange-900 p-6 sm:p-8 rounded-xl shadow-xl border-4 border-amber-600 dark:border-amber-400 relative overflow-hidden">
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/lined-paper.png')] opacity-20 dark:opacity-5 pointer-events-none"></div>
        <blockquote class="relative z-10 text-center">
          <p class="text-3xl font-light italic text-orange-950 dark:text-orange-100 mb-6 drop-shadow-sm leading-relaxed">
            "This platform is a true masterpiece – a seamless blend of historical elegance and cutting-edge education. My learning journey has been endlessly enriched."
          </p>
          <footer class="text-lg font-bold text-orange-900 dark:text-orange-200 flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="Student Avatar" class="w-16 h-16 rounded-full mb-3 border-4 border-orange-500 dark:border-orange-400 shadow-md">
            <span>Alexander Vance, <span class="font-normal">Alumni</span></span>
          </footer>
        </blockquote>
      </section>

      <!-- Call to Action / Newsletter -->
      <aside class="bg-red-700 dark:bg-red-900 p-6 sm:p-8 rounded-xl shadow-xl border-4 border-amber-500 dark:border-amber-400 relative overflow-hidden flex flex-col justify-between">
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/pyramid.png')] opacity-10 dark:opacity-5"></div>
        <h2 class="relative z-10 text-3xl font-bold text-white dark:text-amber-200 mb-4 text-center">Join Our Guild</h2>
        <p class="relative z-10 text-white text-center mb-6">
          Get the latest course updates, exclusive insights, and special offers delivered to your inbox.
        </p>
        <form class="relative z-10 flex flex-col gap-4">
          <input type="email" placeholder="Your email address" class="w-full p-4 rounded-lg bg-red-800/70 dark:bg-red-950/70 text-white placeholder-red-200 dark:placeholder-red-300 border-2 border-red-900 dark:border-red-800 focus:outline-none focus:ring-2 focus:ring-amber-300 focus:border-amber-300">
          <button type="submit" class="w-full px-6 py-4 bg-amber-500 hover:bg-amber-600 dark:bg-amber-400 dark:hover:bg-amber-500 text-red-900 font-bold rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-amber-300/50">
            Subscribe Now
          </button>
        </form>
      </aside>
    </main>

    <!-- Decorative Footer -->
    <footer class="text-center pt-12 pb-8 text-zinc-700 dark:text-zinc-400 border-t-4 border-amber-600 dark:border-amber-400 relative overflow-hidden">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/shattered.png')] opacity-10 dark:opacity-5"></div>
      <p class="relative z-10 text-lg">
        &copy; 2023 Grand Hall of Knowledge. All rights reserved.
      </p>
    </footer>

  </div>
</div>