Skeuomorphic_Grid_Layout_Business

<div class="min-h-screen bg-gradient-to-br from-stone-100 to-stone-200 text-stone-800 dark:from-stone-900 dark:to-stone-950 dark:text-stone-200 p-4 sm:p-8 font-sans transition-colors duration-300">

  <!-- Skeuomorphic Top Bar / Header -->
  <header class="relative mb-8 rounded-xl bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 p-4 sm:p-6 shadow-xl 
               hover:shadow-2xl transition-all duration-300
               before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5 
               after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-500/50 dark:after:shadow-black/20">
    <div class="flex flex-col sm:flex-row items-center justify-between z-10 relative">
      <h1 class="text-2xl sm:text-3xl font-bold tracking-tight text-stone-700 dark:text-stone-300 drop-shadow-md">Corporate Dashboard</h1>
      <div class="mt-4 sm:mt-0 flex flex-wrap gap-3">
        <button class="relative px-5 py-2 rounded-lg text-lg font-semibold text-stone-700 dark:text-stone-300 
                       bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-600 dark:to-stone-700 
                       shadow-lg hover:shadow-xl active:shadow-inner transition-all duration-200
                       before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                       after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20 
                       focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-900">
          <span class="relative z-10">Reports</span>
        </button>
        <button class="relative px-5 py-2 rounded-lg text-lg font-semibold text-stone-700 dark:text-stone-300 
                       bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-600 dark:to-stone-700 
                       shadow-lg hover:shadow-xl active:shadow-inner transition-all duration-200
                       before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                       after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20 
                       focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-900">
          <span class="relative z-10">Settings</span>
        </button>
      </div>
    </div>
  </header>

  <main class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">

    <!-- Skeuomorphic Card 1 - Project Overview -->
    <section class="relative rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-6 shadow-xl 
                    hover:shadow-2xl transition-all duration-300 
                    before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                    after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
      <h2 class="text-xl font-semibold mb-4 text-stone-700 dark:text-stone-300 drop-shadow-sm">Project Overview</h2>
      <p class="text-stone-600 dark:text-stone-400 leading-relaxed mb-4">Track the progress of our current initiatives and upcoming milestones. Stay informed on key performance indicators.</p>
      <div class="grid grid-cols-2 gap-4">
        <div class="relative p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <p class="text-sm text-stone-700 dark:text-stone-300 font-medium">Completed</p>
          <p class="text-2xl font-bold text-green-700 dark:text-green-400">75%</p>
        </div>
        <div class="relative p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <p class="text-sm text-stone-700 dark:text-stone-300 font-medium">Pending</p>
          <p class="text-2xl font-bold text-amber-700 dark:text-amber-400">25%</p>
        </div>
      </div>
      <button class="relative mt-6 w-full py-2 rounded-lg text-lg font-semibold text-stone-700 dark:text-stone-300 
                     bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 
                     shadow-md hover:shadow-lg active:shadow-inner transition-all duration-200
                     before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5 
                     after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-stone-500/50 dark:after:shadow-black/20 
                     focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-900">
        <span class="relative z-10">View Details</span>
      </button>
    </section>

    <!-- Skeuomorphic Card 2 - Team Members -->
    <section class="relative rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-6 shadow-xl 
                    hover:shadow-2xl transition-all duration-300 
                    before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                    after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
      <h2 class="text-xl font-semibold mb-4 text-stone-700 dark:text-stone-300 drop-shadow-sm">Team Members</h2>
      <ul class="space-y-4">
        <li class="flex items-center gap-4 relative p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of John Doe" class="w-12 h-12 rounded-full border-2 border-stone-400 dark:border-stone-600 shadow-inner-strong">
          <div>
            <p class="font-medium text-stone-700 dark:text-stone-300">John Doe</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Lead Developer</p>
          </div>
        </li>
        <li class="flex items-center gap-4 relative p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://randomuser.me/api/portraits/women/42.jpg" alt="Avatar of Jane Smith" class="w-12 h-12 rounded-full border-2 border-stone-400 dark:border-stone-600 shadow-inner-strong">
          <div>
            <p class="font-medium text-stone-700 dark:text-stone-300">Jane Smith</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Project Manager</p>
          </div>
        </li>
        <li class="flex items-center gap-4 relative p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of Bob Johnson" class="w-12 h-12 rounded-full border-2 border-stone-400 dark:border-stone-600 shadow-inner-strong">
          <div>
            <p class="font-medium text-stone-700 dark:text-stone-300">Bob Johnson</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">UI/UX Designer</p>
          </div>
        </li>
      </ul>
    </section>

    <!-- Skeuomorphic Card 3 - Quick Links -->
    <section class="relative rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-6 shadow-xl 
                    hover:shadow-2xl transition-all duration-300 
                    before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                    after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
      <h2 class="text-xl font-semibold mb-4 text-stone-700 dark:text-stone-300 drop-shadow-sm">Quick Links</h2>
      <nav>
        <ul class="space-y-3">
          <li>
            <a href="#" class="relative flex items-center gap-2 py-2 px-4 rounded-lg text-lg text-stone-700 dark:text-stone-300 
                       bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 
                       shadow-md hover:shadow-lg active:shadow-inner transition-all duration-200
                       before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5 
                       after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-stone-500/50 dark:after:shadow-black/20 
                       focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-900">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-stone-600 dark:text-stone-400 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M3 5h18M5 9h14M8 9V5m8 4V5m-1 7l-4 4m0 0l-4-4m4 4V13" />
              </svg>
              <span class="relative z-10">Knowledge Base</span>
            </a>
          </li>
          <li>
            <a href="#" class="relative flex items-center gap-2 py-2 px-4 rounded-lg text-lg text-stone-700 dark:text-stone-300 
                       bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 
                       shadow-md hover:shadow-lg active:shadow-inner transition-all duration-200
                       before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5 
                       after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-stone-500/50 dark:after:shadow-black/20 
                       focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-900">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-stone-600 dark:text-stone-400 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h8m-8 4h8m-9 4h8M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
              </svg>
              <span class="relative z-10">Upcoming Events</span>
            </a>
          </li>
          <li>
            <a href="#" class="relative flex items-center gap-2 py-2 px-4 rounded-lg text-lg text-stone-700 dark:text-stone-300 
                       bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 
                       shadow-md hover:shadow-lg active:shadow-inner transition-all duration-200
                       before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5 
                       after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-stone-500/50 dark:after:shadow-black/20 
                       focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-900">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-stone-600 dark:text-stone-400 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M7 8h10M7 12h10M7 16h10M9 1h6a2 2 0 012 2v14a2 2 0 01-2 2H9a2 2 0 01-2-2V3a2 2 0 012-2z" />
              </svg>
              <span class="relative z-10">Support Tickets</span>
            </a>
          </li>
        </ul>
      </nav>
    </section>

    <!-- Skeuomorphic Card 4 - Recent Activity (Spans two columns on larger screens) -->
    <section class="relative rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-6 shadow-xl 
                    hover:shadow-2xl transition-all duration-300 col-span-1 md:col-span-2 lg:col-span-1 
                    before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                    after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
      <h2 class="text-xl font-semibold mb-4 text-stone-700 dark:text-stone-300 drop-shadow-sm">Recent Activity</h2>
      <ul class="space-y-4">
        <li class="relative flex items-center gap-4 p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-stone-400 dark:border-stone-600 shadow-inner-strong">
          <div>
            <p class="text-stone-700 dark:text-stone-300"><span class="font-medium">Sarah Connor</span> updated a project.</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">2 hours ago</p>
          </div>
        </li>
        <li class="relative flex items-center gap-4 p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://randomuser.me/api/portraits/men/80.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-stone-400 dark:border-stone-600 shadow-inner-strong">
          <div>
            <p class="text-stone-700 dark:text-stone-300"><span class="font-medium">Michael Scott</span> submitted a report.</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Yesterday</p>
          </div>
        </li>
        <li class="relative flex items-center gap-4 p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://randomuser.me/api/portraits/women/24.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-400 dark:border-stone-600 shadow-inner-strong">
          <div>
            <p class="text-stone-700 dark:text-stone-300"><span class="font-medium">Dwight Schrute</span> added a new task.</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">3 days ago</p>
          </div>
        </li>
      </ul>
    </section>

    <!-- Skeuomorphic Card 5 - Important Notices -->
    <section class="relative rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-6 shadow-xl 
                    hover:shadow-2xl transition-all duration-300 
                    before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                    after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
      <h2 class="text-xl font-semibold mb-4 text-stone-700 dark:text-stone-300 drop-shadow-sm">Important Notices</h2>
      <div class="space-y-4">
        <div class="relative p-4 rounded-lg bg-red-200 dark:bg-red-800 text-red-800 dark:text-red-200 font-semibold 
                    shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-red-100/50 dark:before:shadow-white/5 
                    after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-red-400/50 dark:after:shadow-black/20">
          <p>System Maintenance: Jan 15th, 10 PM - 2 AM PST.</p>
        </div>
        <div class="relative p-4 rounded-lg bg-amber-200 dark:bg-amber-800 text-amber-800 dark:text-amber-200 font-semibold 
                    shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-amber-100/50 dark:before:shadow-white/5 
                    after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-amber-400/50 dark:after:shadow-black/20">
          <p>New Security Update available for all users.</p>
        </div>
      </div>
    </section>

    <!-- Skeuomorphic Card 6 - Image Gallery (Spans two columns on larger screens) -->
    <section class="relative rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-6 shadow-xl 
                    hover:shadow-2xl transition-all duration-300 col-span-1 md:col-span-2 
                    before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                    after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
      <h2 class="text-xl font-semibold mb-4 text-stone-700 dark:text-stone-300 drop-shadow-sm">Office Snapshots</h2>
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
        <div class="relative rounded-lg overflow-hidden border-2 border-stone-300 dark:border-stone-700 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://picsum.photos/id/1018/200/150" alt="Office view" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
        </div>
        <div class="relative rounded-lg overflow-hidden border-2 border-stone-300 dark:border-stone-700 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://picsum.photos/id/1020/200/150" alt="Meeting room" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
        </div>
        <div class="relative rounded-lg overflow-hidden border-2 border-stone-300 dark:border-stone-700 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://picsum.photos/id/1025/200/150" alt="Workstation" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
        </div>
        <div class="relative rounded-lg overflow-hidden border-2 border-stone-300 dark:border-stone-700 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://picsum.photos/id/1021/200/150" alt="Coffee break" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
        </div>
      </div>
    </section>

  </main>

  <!-- Footer as a subtle skeuomorphic element -->
  <footer class="relative mt-8 rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-4 shadow-xl 
                  before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                  after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
    <p class="text-center text-sm text-stone-600 dark:text-stone-400">&copy; 2023 Corporate Solutions Inc. All rights reserved.</p>
  </footer>

</div>