Composant Cartes Skeuomorphes

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

  <div class="max-w-7xl mx-auto space-y-8">

    <!-- Header Section (Subtle Emboss Effect) -->
    <div class="relative p-4 md:p-6 rounded-xl shadow-xl transition-all duration-300
                bg-stone-50 dark:bg-stone-800
                dark:border-t dark:border-l dark:border-stone-700
                border-b border-r border-stone-200 dark:border-stone-900
                after:absolute after:inset-0 after:rounded-xl
                after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.7),inset_-1px_-1px_3px_rgb(0,0,0,0.1)]
                dark:after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.05),inset_-1px_-1px_3px_rgb(0,0,0,0.4)]">

      <h1 class="text-2xl sm:text-3xl font-bold text-stone-700 dark:text-stone-100 leading-tight select-none relative z-10">
        <span class="block">Community Insights</span>
        <span class="block text-base sm:text-lg font-normal text-stone-500 dark:text-stone-400">Dashboard Overview</span>
      </h1>

      <!-- Control Buttons (Pill-shaped, Pressed Effect) -->
      <div class="flex flex-wrap gap-3 mt-4 relative z-10">
        <button class="relative px-4 py-2 rounded-full text-sm font-medium
                       bg-stone-200 hover:bg-stone-300 active:bg-stone-400
                       dark:bg-stone-700 dark:hover:bg-stone-600 dark:active:bg-stone-500
                       text-stone-700 dark:text-stone-300
                       shadow-[inset_-1px_-1px_2px_rgb(0,0,0,0.1),-2px_-2px_4px_rgb(255,255,255,0.7)]
                       dark:shadow-[inset_-1px_-1px_2px_rgb(0,0,0,0.4),-2px_-2px_4px_rgb(0,0,0,0.2)]
                       active:shadow-[inset_2px_2px_3px_rgb(0,0,0,0.1),inset_-2px_-2px_3px_rgb(255,255,255,0.7)]
                       dark:active:shadow-[inset_2px_2px_3px_rgb(0,0,0,0.4),inset_-2px_-2px_3px_rgb(0,0,0,0.2)]
                       transition-all duration-150">
          Daily
        </button>
        <button class="relative px-4 py-2 rounded-full text-sm font-medium
                       bg-stone-300
                       dark:bg-stone-600
                       text-stone-700 dark:text-stone-200
                       shadow-[inset_2px_2px_3px_rgb(0,0,0,0.1),inset_-2px_-2px_3px_rgb(255,255,255,0.7)]
                       dark:shadow-[inset_2px_2px_3px_rgb(0,0,0,0.4),inset_-2px_-2px_3px_rgb(0,0,0,0.2)]
                       transition-all duration-150">
          Weekly
        </button>
        <button class="relative px-4 py-2 rounded-full text-sm font-medium
                       bg-stone-200 hover:bg-stone-300 active:bg-stone-400
                       dark:bg-stone-700 dark:hover:bg-stone-600 dark:active:bg-stone-500
                       text-stone-700 dark:text-stone-300
                       shadow-[inset_-1px_-1px_2px_rgb(0,0,0,0.1),-2px_-2px_4px_rgb(255,255,255,0.7)]
                       dark:shadow-[inset_-1px_-1px_2px_rgb(0,0,0,0.4),-2px_-2px_4px_rgb(0,0,0,0.2)]
                       active:shadow-[inset_2px_2px_3px_rgb(0,0,0,0.1),inset_-2px_-2px_3px_rgb(255,255,255,0.7)]
                       dark:active:shadow-[inset_2px_2px_3px_rgb(0,0,0,0.4),inset_-2px_-2px_3px_rgb(0,0,0,0.2)]
                       transition-all duration-150">
          Monthly
        </button>
      </div>

    </div>

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

      <!-- Left Column - Main Charts -->
      <div class="lg:col-span-2 space-y-8">

        <!-- Large Chart Card (Overall Activity) -->
        <div class="relative p-4 md:p-6 rounded-xl
                    bg-stone-100 dark:bg-stone-850
                    shadow-xl
                    dark:border-t dark:border-l dark:border-stone-700
                    border-b border-r border-stone-200 dark:border-stone-900
                    after:absolute after:inset-0 after:rounded-xl
                    after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.7),inset_-1px_-1px_3px_rgb(0,0,0,0.1)]
                    dark:after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.05),inset_-1px_-1px_3px_rgb(0,0,0,0.4)]
                    transition-all duration-300">
          <h3 class="text-xl font-semibold text-stone-700 dark:text-stone-100 mb-4 relative z-10">Total Engagements</h3>
          <div class="relative h-64 md:h-80 w-full bg-stone-200 dark:bg-stone-700 rounded-lg overflow-hidden
                      shadow-[inset_2px_2px_4px_rgb(0,0,0,0.1),inset_-2px_-2px_4px_rgb(255,255,255,0.7)]
                      dark:shadow-[inset_2px_2px_4px_rgb(0,0,0,0.4),inset_-2px_-2px_4px_rgb(0,0,0,0.2)]
                      relative z-10">
            <!-- Placeholder Chart - Mimic a line chart with gradients -->
            <div class="absolute bottom-0 left-0 right-0 h-4/5">
              <div class="absolute w-full h-full from-cream-400/50 via-warm-gray-400/50 to-beige-400/50 bg-gradient-to-t opacity-90"></div>
              <div class="absolute bottom-0 w-full h-1/5 bg-gradient-to-t from-orange-400/80 to-orange-300/80 rounded-t-full blur-sm opacity-70"></div>
            </div>
            <div class="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-orange-500 to-orange-400 opacity-90"></div>

            <!-- Horizontal Grid Lines -->
            <div class="absolute inset-0 grid grid-rows-5 opacity-30">
              <div class="border-b border-dashed border-stone-400 dark:border-stone-500"></div>
              <div class="border-b border-dashed border-stone-400 dark:border-stone-500"></div>
              <div class="border-b border-dashed border-stone-400 dark:border-stone-500"></div>
              <div class="border-b border-dashed border-stone-400 dark:border-stone-500"></div>
              <div></div>
            </div>
            <!-- Vertical Grid Lines -->
            <div class="absolute inset-0 grid grid-cols-7 opacity-30">
              <div class="border-r border-dashed border-stone-400 dark:border-stone-500"></div>
              <div class="border-r border-dashed border-stone-400 dark:border-stone-500"></div>
              <div class="border-r border-dashed border-stone-400 dark:border-stone-500"></div>
              <div class="border-r border-dashed border-stone-400 dark:border-stone-500"></div>
              <div class="border-r border-dashed border-stone-400 dark:border-stone-500"></div>
              <div class="border-r border-dashed border-stone-400 dark:border-stone-500"></div>
              <div></div>
            </div>

            <!-- Example Data Points (Small raised circles) -->
            <div class="absolute p-1 top-1/3 left-1/4 translate-x-1/2 -translate-y-1/2 rounded-full bg-orange-500 shadow-[2px_2px_4px_rgb(0,0,0,0.3)] dark:shadow-[2px_2px_4px_rgb(0,0,0,0.6)]"></div>
            <div class="absolute p-1 top-1/4 left-1/2 translate-x-1/2 -translate-y-1/2 rounded-full bg-orange-500 shadow-[2px_2px_4px_rgb(0,0,0,0.3)] dark:shadow-[2px_2px_4px_rgb(0,0,0,0.6)]"></div>
            <div class="absolute p-1 top-1/2 left-3/4 translate-x-1/2 -translate-y-1/2 rounded-full bg-orange-500 shadow-[2px_2px_4px_rgb(0,0,0,0.3)] dark:shadow-[2px_2px_4px_rgb(0,0,0,0.6)]"></div>

          </div>
          <div class="mt-4 text-sm text-stone-600 dark:text-stone-300 relative z-10">
            <p><strong>+15%</strong> increase in engagements this week compared to last.</p>
          </div>
        </div>

        <!-- Small Chart Cards (Grid Layout) -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

          <!-- Replies Chart Card -->
          <div class="relative p-4 rounded-xl
                      bg-stone-100 dark:bg-stone-850
                      shadow-xl
                      dark:border-t dark:border-l dark:border-stone-700
                      border-b border-r border-stone-200 dark:border-stone-900
                      after:absolute after:inset-0 after:rounded-xl
                      after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.7),inset_-1px_-1px_3px_rgb(0,0,0,0.1)]
                      dark:after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.05),inset_-1px_-1px_3px_rgb(0,0,0,0.4)]
                      transition-all duration-300">
            <h3 class="text-lg font-semibold text-stone-700 dark:text-stone-100 mb-3 relative z-10">Replies Posted</h3>
            <div class="relative h-40 w-full bg-stone-200 dark:bg-stone-700 rounded-lg overflow-hidden
                        shadow-[inset_2px_2px_4px_rgb(0,0,0,0.1),inset_-2px_-2px_4px_rgb(255,255,255,0.7)]
                        dark:shadow-[inset_2px_2px_4px_rgb(0,0,0,0.4),inset_-2px_-2px_4px_rgb(0,0,0,0.2)]
                        relative z-10">
              <!-- Placeholder Chart - Mimic a bar chart -->
              <div class="absolute bottom-0 left-0 right-0 flex items-end justify-around h-full p-2">
                <div class="w-1/6 h-2/5 bg-gradient-to-t from-blue-400 to-blue-300 rounded-t-sm shadow-md"></div>
                <div class="w-1/6 h-3/5 bg-gradient-to-t from-blue-400 to-blue-300 rounded-t-sm shadow-md"></div>
                <div class="w-1/6 h-4/5 bg-gradient-to-t from-blue-400 to-blue-300 rounded-t-sm shadow-md"></div>
                <div class="w-1/6 h-2/3 bg-gradient-to-t from-blue-400 to-blue-300 rounded-t-sm shadow-md"></div>
                <div class="w-1/6 h-1/2 bg-gradient-to-t from-blue-400 to-blue-300 rounded-t-sm shadow-md"></div>
              </div>
            </div>
            <div class="mt-3 text-sm text-stone-600 dark:text-stone-300 relative z-10">
              <p><strong>2,120</strong> total replies this period.</p>
            </div>
          </div>

          <!-- New Topics Chart Card -->
          <div class="relative p-4 rounded-xl
                      bg-stone-100 dark:bg-stone-850
                      shadow-xl
                      dark:border-t dark:border-l dark:border-stone-700
                      border-b border-r border-stone-200 dark:border-stone-900
                      after:absolute after:inset-0 after:rounded-xl
                      after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.7),inset_-1px_-1px_3px_rgb(0,0,0,0.1)]
                      dark:after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.05),inset_-1px_-1px_3px_rgb(0,0,0,0.4)]
                      transition-all duration-300">
            <h3 class="text-lg font-semibold text-stone-700 dark:text-stone-100 mb-3 relative z-10">New Topics</h3>
            <div class="relative h-40 w-full bg-stone-200 dark:bg-stone-700 rounded-lg overflow-hidden
                        shadow-[inset_2px_2px_4px_rgb(0,0,0,0.1),inset_-2px_-2px_4px_rgb(255,255,255,0.7)]
                        dark:shadow-[inset_2px_2px_4px_rgb(0,0,0,0.4),inset_-2px_-2px_4px_rgb(0,0,0,0.2)]
                        relative z-10">
              <!-- Placeholder Chart - Mimic a line chart -->
              <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
                <defs>
                  <linearGradient id="lineGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" style="stop-color:rgb(70, 180, 70);stop-opacity:1" />
                    <stop offset="100%" style="stop-color:rgb(70, 180, 70);stop-opacity:0.3" />
                  </linearGradient>
                </defs>
                <polyline fill="url(#lineGradient)" stroke="rgb(70, 180, 70)" stroke-width="1.5"
                          points="0,80 20,60 40,75 60,50 80,65 100,40"
                          class="opacity-90 blur-sm brightness-125"
                          style="filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.3));" />
                <polyline fill="none" stroke="rgb(70, 180, 70)" stroke-width="2"
                          points="0,80 20,60 40,75 60,50 80,65 100,40" />
                <!-- Data Points -->
                <circle cx="0" cy="80" r="2" fill="rgb(70, 180, 70)" stroke="white" stroke-width="0.5" class="shadow-md" />
                <circle cx="20" cy="60" r="2" fill="rgb(70, 180, 70)" stroke="white" stroke-width="0.5" class="shadow-md" />
                <circle cx="40" cy="75" r="2" fill="rgb(70, 180, 70)" stroke="white" stroke-width="0.5" class="shadow-md" />
                <circle cx="60" cy="50" r="2" fill="rgb(70, 180, 70)" stroke="white" stroke-width="0.5" class="shadow-md" />
                <circle cx="80" cy="65" r="2" fill="rgb(70, 180, 70)" stroke="white" stroke-width="0.5" class="shadow-md" />
                <circle cx="100" cy="40" r="2" fill="rgb(70, 180, 70)" stroke="white" stroke-width="0.5" class="shadow-md" />
              </svg>
            </div>
            <div class="mt-3 text-sm text-stone-600 dark:text-stone-300 relative z-10">
              <p><strong>125</strong> new discussions started.</p>
            </div>
          </div>

        </div>
      </div>

      <!-- Right Column - User Stats & Leaderboard -->
      <div class="lg:col-span-1 space-y-8">

        <!-- Top Users Card -->
        <div class="relative p-4 rounded-xl
                    bg-stone-100 dark:bg-stone-850
                    shadow-xl
                    dark:border-t dark:border-l dark:border-stone-700
                    border-b border-r border-stone-200 dark:border-900
                    after:absolute after:inset-0 after:rounded-xl
                    after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.7),inset_-1px_-1px_3px_rgb(0,0,0,0.1)]
                    dark:after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.05),inset_-1px_-1px_3px_rgb(0,0,0,0.4)]
                    transition-all duration-300">
          <h3 class="text-lg font-semibold text-stone-700 dark:text-stone-100 mb-4 relative z-10">Top Users</h3>
          <ul class="space-y-4 relative z-10">
            <li class="flex items-center gap-3">
              <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md border border-stone-300 dark:border-stone-600" />
              <div>
                <p class="font-medium text-stone-700 dark:text-stone-200">Alice Johnson</p>
                <p class="text-sm text-stone-500 dark:text-stone-400">560 Replies</p>
              </div>
            </li>
            <li class="flex items-center gap-3">
              <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md border border-stone-300 dark:border-stone-600" />
              <div>
                <p class="font-medium text-stone-700 dark:text-stone-200">Bob Smith</p>
                <p class="text-sm text-stone-500 dark:text-stone-400">475 Replies</p>
              </div>
            </li>
            <li class="flex items-center gap-3">
              <img src="https://randomuser.me/api/portraits/women/24.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md border border-stone-300 dark:border-stone-600" />
              <div>
                <p class="font-medium text-stone-700 dark:text-stone-200">Carol White</p>
                <p class="text-sm text-stone-500 dark:text-stone-400">390 Replies</p>
              </div>
            </li>
          </ul>
        </div>

        <!-- Active Members Card -->
        <div class="relative p-4 rounded-xl
                    bg-stone-100 dark:bg-stone-850
                    shadow-xl
                    dark:border-t dark:border-l dark:border-stone-700
                    border-b border-r border-stone-200 dark:border-stone-900
                    after:absolute after:inset-0 after:rounded-xl
                    after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.7),inset_-1px_-1px_3px_rgb(0,0,0,0.1)]
                    dark:after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.05),inset_-1px_-1px_3px_rgb(0,0,0,0.4)]
                    transition-all duration-300">
          <h3 class="text-lg font-semibold text-stone-700 dark:text-stone-100 mb-4 relative z-10">Active Members</h3>
          <div class="flex flex-wrap gap-2 relative z-10">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md ring-2 ring-blue-300 dark:ring-blue-600 border border-stone-300 dark:border-stone-600" />
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md ring-2 ring-blue-300 dark:ring-blue-600 border border-stone-300 dark:border-stone-600" />
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md border border-stone-300 dark:border-stone-600" />
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md border border-stone-300 dark:border-stone-600" />
            <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md border border-stone-300 dark:border-stone-600" />
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md border border-stone-300 dark:border-stone-600" />
            <span class="w-12 h-12 flex items-center justify-center rounded-full bg-stone-300 dark:bg-stone-600 text-stone-600 dark:text-stone-300 text-sm font-semibold shadow-md
                         border border-stone-300 dark:border-stone-600">+100</span>
          </div>
          <div class="mt-3 text-sm text-stone-600 dark:text-stone-300 relative z-10">
            <p><strong>12</strong> users online now.</p>
          </div>
        </div>

      </div>
    </div>

  </div>

</div>