Компоненты отображения содержимого

                <div class="flex justify-center items-center min-h-screen p-4 bg-gradient-to-br from-blue-50 to-blue-200 dark:from-gray-900 dark:to-blue-950">
  <div class="w-full max-w-sm mx-auto rounded-3xl p-6
              bg-gradient-to-br from-blue-100 to-blue-300 shadow-2xl shadow-blue-400/50
              dark:from-blue-900 dark:to-blue-700 dark:shadow-blue-950/80
              transform transition-all duration-300 hover:scale-[1.02] hover:shadow-blue-500/60 dark:hover:shadow-blue-900/90
              relative overflow-hidden border-2 border-blue-200 dark:border-blue-800">

    <!-- Inner Bevel Top-Left -->
    <div class="absolute inset-0 rounded-3xl
                shadow-inner shadow-blue-50/50 dark:shadow-blue-800/50
                pointer-events-none"
         style="box-shadow: inset 5px 5px 10px rgba(255,255,255,0.3), inset -5px -5px 10px rgba(0,0,0,0.1);">
    </div>

    <!-- Inner Bevel Bottom-Right for Dark Mode -->
    <div class="absolute inset-0 rounded-3xl
                dark:shadow-inner dark:shadow-blue-950/50
                pointer-events-none"
         style="box-shadow: inset -5px -5px 10px rgba(0,0,0,0.3), inset 5px 5px 10px rgba(255,255,255,0.1);">
    </div>

    <div class="relative z-10 flex flex-col items-center text-center">
      <div class="w-32 h-32 rounded-full overflow-hidden mb-4
                  border-4 border-blue-300 dark:border-blue-700
                  shadow-xl shadow-blue-400/40 dark:shadow-blue-950/70
                  transform transition-all duration-300 hover:scale-105">
        <img src="https://picsum.photos/id/78/200/200" alt="Product Image" class="w-full h-full object-cover">
      </div>

      <h3 class="text-xl md:text-2xl font-bold mb-2 text-blue-800 dark:text-blue-200 drop-shadow-md">
        AquaBloom Moisturizer
      </h3>
      <p class="text-sm text-blue-700 dark:text-blue-300 mb-4 px-2 tracking-wide">
        Infused with deep-sea minerals for radiant, hydrated skin.
      </p>

      <div class="mb-4">
        <span class="text-2xl font-extrabold text-blue-900 dark:text-blue-100 drop-shadow-lg">$49.99</span>
      </div>

      <button type="button" class="w-full px-6 py-3 rounded-full text-lg font-semibold
                  bg-gradient-to-br from-blue-600 to-blue-800 text-white
                  shadow-xl shadow-blue-700/50 dark:shadow-blue-900/70
                  active:bg-gradient-to-tl active:from-blue-700 active:to-blue-900
                  transform transition-all duration-200
                  hover:scale-[1.02] hover:shadow-blue-800/60 dark:hover:shadow-blue-800/80
                  relative overflow-hidden
                  before:absolute before:inset-0 before:bg-white before:bg-opacity-0 hover:before:bg-opacity-10 before:rounded-full before:transition-all before:duration-300">
        Add to Cart
      </button>
      <div class="mt-4 flex gap-x-2 text-blue-700 dark:text-blue-300">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.042a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.042a1 1 0 00-1.176 0l-2.817 2.042c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
        </svg>
        <span>4.8 (120 reviews)</span>
      </div>
    </div>
  </div>
</div>
              

                <div class="font-sans antialiased text-gray-800 bg-gray-100 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8">

  <!-- Component Header -->
  <div class="mb-6 lg:mb-8">
    <h1 class="text-2xl sm:text-3xl lg:text-4xl font-light tracking-tight text-gray-900 dark:text-gray-100 mb-2">Dashboard Overview</h1>
    <p class="text-gray-600 dark:text-gray-400 text-lg">A concise summary of key metrics and recent activities.</p>
  </div>

  <!-- Grid Layout for Content Cards -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6 lg:gap-8">

    <!-- Metric Card 1: Sales -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden border border-gray-200 dark:border-gray-700">
      <div class="p-5 sm:p-6">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-base sm:text-lg font-medium text-gray-700 dark:text-gray-300">Total Sales</h2>
          <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1L21 6m-4 14l2-2m-3-19v5m-1.5-6h.025A20.307 20.307 0 0110 21.886V1.114c3.784-.526 7.427.674 10.59 3.447L21 6m-4 14h.025M21 6l-2 2m-7 1.5.5.5V12M12 8h.01V6M12 11.5l1.5-1.5m-3 0L9 10m-2 2V6"></path></svg>
        </div>
        <p class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">$12,345</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">+5.2% from last month</p>
      </div>
    </div>

    <!-- Metric Card 2: New Users -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden border border-gray-200 dark:border-gray-700">
      <div class="p-5 sm:p-6">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-base sm:text-lg font-medium text-gray-700 dark:text-gray-300">New Users</h2>
          <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857m7.5 0a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm-7.5 0a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path></svg>
        </div>
        <p class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">897</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">+12.8% from last week</p>
      </div>
    </div>

    <!-- Metric Card 3: Orders Pending -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden border border-gray-200 dark:border-gray-700">
      <div class="p-5 sm:p-6">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-base sm:text-lg font-medium text-gray-700 dark:text-gray-300">Orders Pending</h2>
          <svg class="w-6 h-6 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
        </div>
        <p class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">42</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Requires immediate action</p>
      </div>
    </div>

    <!-- Metric Card 4: Retention Rate -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden border border-gray-200 dark:border-gray-700">
      <div class="p-5 sm:p-6">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-base sm:text-lg font-medium text-gray-700 dark:text-gray-300">Retention Rate</h2>
          <svg class="w-6 h-6 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M18 10h4M3 4h18M3 10h18M3 16h18M3 20h18"></path></svg>
        </div>
        <p class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">78.5%</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Target: 80%</p>
      </div>
    </div>

    <!-- Recent Activity Feed -->
    <div class="lg:col-span-2 xl:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
      <div class="p-5 sm:p-6">
        <h2 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-4">Recent Activity</h2>
        <ul class="divide-y divide-gray-200 dark:divide-gray-700">
          <li class="py-3 flex items-center">
            <img class="h-8 w-8 rounded-full mr-3 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">John Doe <span class="font-normal text-gray-500 dark:text-gray-400">updated profile.</span></p>
              <p class="text-xs text-gray-500 dark:text-gray-400">15 minutes ago</p>
            </div>
          </li>
          <li class="py-3 flex items-center">
            <img class="h-8 w-8 rounded-full mr-3 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Jane Smith <span class="font-normal text-gray-500 dark:text-gray-400">completed an order #1023.</span></p>
              <p class="text-xs text-gray-500 dark:text-gray-400">1 hour ago</p>
            </div>
          </li>
          <li class="py-3 flex items-center">
            <img class="h-8 w-8 rounded-full mr-3 object-cover" src="https://randomuser.me/api/portraits/men/76.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Robert Johnson <span class="font-normal text-gray-500 dark:text-gray-400">added a new product.</span></p>
              <p class="text-xs text-gray-500 dark:text-gray-400">3 hours ago</p>
            </div>
          </li>
          <li class="py-3 flex items-center">
            <img class="h-8 w-8 rounded-full mr-3 object-cover" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Emily White <span class="font-normal text-gray-500 dark:text-gray-400">replied to a support ticket.</span></p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Yesterday</p>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- Quick Stats Breakdown -->
    <div class="lg:col-span-1 xl:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
      <div class="p-5 sm:p-6">
        <h2 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-4">Quick Stats</h2>
        <div class="space-y-4">
          <div class="flex items-center justify-between">
            <span class="text-sm font-medium text-gray-600 dark:text-gray-300">Monthly Revenue</span>
            <span class="text-base font-semibold text-gray-900 dark:text-gray-100">$5,800</span>
          </div>
          <div class="flex items-center justify-between">
            <span class="text-sm font-medium text-gray-600 dark:text-gray-300">Active Subscriptions</span>
            <span class="text-base font-semibold text-gray-900 dark:text-gray-100">2,100</span>
          </div>
          <div class="flex items-center justify-between">
            <span class="text-sm font-medium text-gray-600 dark:text-gray-300">Customer Satisfaction</span>
            <span class="text-base font-semibold text-gray-900 dark:text-gray-100">92%</span>
          </div>
          <div class="flex items-center justify-between">
            <span class="text-sm font-medium text-gray-600 dark:text-gray-300">Website Visitors (Today)</span>
            <span class="text-base font-semibold text-gray-900 dark:text-gray-100">1,450</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Generic Information Card with Image -->
    <div class="lg:col-span-1 xl:col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
      <img class="w-full h-32 object-cover object-center" src="https://picsum.photos/400/200?random=1" alt="Placeholder Image">
      <div class="p-5 sm:p-6">
        <h2 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">Project Progress</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Monitor the status of your ongoing projects and milestones.</p>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
          <div class="bg-blue-500 h-2.5 rounded-full" style="width: 70%"></div>
        </div>
        <p class="text-right text-xs mt-2 text-gray-500 dark:text-gray-400">70% Completed</p>
      </div>
    </div>

    <!-- Generic Information Card without Image -->
    <div class="lg:col-span-1 xl:col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
      <div class="p-5 sm:p-6">
        <h2 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">System Health</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">All systems are operational. No critical issues detected.</p>
        <div class="bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 text-xs font-semibold px-2.5 py-0.5 rounded-full inline-flex items-center">
          <span class="h-2 w-2 rounded-full bg-green-500 mr-1"></span> Operational
        </div>
        <p class="text-xs mt-3 text-gray-500 dark:text-gray-400">Last checked: 2 minutes ago</p>
      </div>
    </div>

  </div>
</div>
              

                <div class="font-sans p-4 sm:p-6 lg:p-8 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-50">

  <!-- Component Title (Optional) -->
  <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-gray-50 mb-8 sm:mb-12 text-center">
    <span class="relative inline-block">
      <span class="relative z-10">Today's Hot Picks</span>
      <span class="absolute inset-x-0 bottom-0 h-3 sm:h-4 lg:h-5 bg-fuchsia-500 transform -skew-x-12"></span>
    </span>
  </h2>

  <!-- Main Grid Container -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8 lg:gap-10">

    <!-- Featured Card 1 (Larger, more prominent) -->
    <div class="md:col-span-2 lg:col-span-2 xl:col-span-2 relative overflow-hidden rounded-xl shadow-xl dark:shadow-2xl group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <div class="absolute top-4 left-4 p-2 bg-fuchsia-500 text-white text-xs font-bold rounded-br-lg transform -rotate-6 z-20">TRENDING</div>

      <img src="https://picsum.photos/800/450?random=1" alt="Featured Content Image" class="relative w-full h-64 sm:h-80 md:h-96 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">

      <div class="relative p-5 sm:p-6 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-xl sm:text-2xl font-bold mb-2 text-gray-900 dark:text-gray-50">The Midnight Chronicles</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">Unravel the secrets of a forgotten city in this gripping new sci-fi epic. Prepare for mind-bending twists!</p>

        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
          <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <span class="mr-2">4.8</span> (1.2K Reviews)
          <span class="mx-2">•</span>
          <span>Action, Sci-Fi</span>
        </div>

        <button class="relative flex items-center justify-center px-6 py-2 rounded-lg bg-fuchsia-500 text-white font-bold overflow-hidden group hover:bg-fuchsia-600 transition-all duration-300 ease-in-out transform hover:scale-105">
          <span class="absolute w-0 h-0 transition-all duration-300 ease-out bg-black rounded-full group-hover:w-32 group-hover:h-32 opacity-10"></span>
          <span class="relative z-10">Watch Now</span>
          <svg class="w-5 h-5 ml-2 -mr-1 relative z-10" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
        </button>
      </div>
    </div>

    <!-- Content Cards (Smaller, repeatable) -->
    <!-- Card 1 -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-950 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/400/225?random=2" alt="Content Image" class="relative w-full h-48 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">
      <div class="relative p-4 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-lg font-bold mb-1 text-gray-900 dark:text-gray-50">Echoes of the Past</h3>
        <p class="text-xs text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">A chilling mystery unfolds in a secluded mountain town. Can they uncover the truth?</p>
        <div class="flex items-center justify-between text-sm">
          <span class="flex items-center text-gray-500 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            4.5
          </span>
          <button class="px-3 py-1 text-xs bg-fuchsia-500 text-white rounded-md hover:bg-fuchsia-600 transition-colors duration-200">Details</button>
        </div>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-950 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/400/225?random=3" alt="Content Image" class="relative w-full h-48 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">
      <div class="relative p-4 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-lg font-bold mb-1 text-gray-900 dark:text-gray-50">Cosmic Voyage</h3>
        <p class="text-xs text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">Journey through distant galaxies in this visually stunning animated series.</p>
        <div class="flex items-center justify-between text-sm">
          <span class="flex items-center text-gray-500 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            4.9
          </span>
          <button class="px-3 py-1 text-xs bg-fuchsia-500 text-white rounded-md hover:bg-fuchsia-600 transition-colors duration-200">Details</button>
        </div>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-950 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/400/225?random=4" alt="Content Image" class="relative w-full h-48 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">
      <div class="relative p-4 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-lg font-bold mb-1 text-gray-900 dark:text-gray-50">The Last Pixel</h3>
        <p class="text-xs text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">A classic console game comes to life, but something is wrong with the code...</p>
        <div class="flex items-center justify-between text-sm">
          <span class="flex items-center text-gray-500 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            4.6
          </span>
          <button class="px-3 py-1 text-xs bg-fuchsia-500 text-white rounded-md hover:bg-fuchsia-600 transition-colors duration-200">Details</button>
        </div>
      </div>
    </div>

    <!-- Card 4 -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-950 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/400/225?random=5" alt="Content Image" class="relative w-full h-48 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">
      <div class="relative p-4 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-lg font-bold mb-1 text-gray-900 dark:text-gray-50">Rhythm City Beats</h3>
        <p class="text-xs text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">Follow the rise of a street dance crew in this vibrant musical drama.</p>
        <div class="flex items-center justify-between text-sm">
          <span class="flex items-center text-gray-500 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            4.7
          </span>
          <button class="px-3 py-1 text-xs bg-fuchsia-500 text-white rounded-md hover:bg-fuchsia-600 transition-colors duration-200">Details</button>
        </div>
      </div>
    </div>

    <!-- Card 5 -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-950 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/400/225?random=6" alt="Content Image" class="relative w-full h-48 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">
      <div class="relative p-4 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-lg font-bold mb-1 text-gray-900 dark:text-gray-50">The Quantum Leap</h3>
        <p class="text-xs text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">A scientist invents a device that changes reality, with unexpected consequences.</p>
        <div class="flex items-center justify-between text-sm">
          <span class="flex items-center text-gray-500 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            4.4
          </span>
          <button class="px-3 py-1 text-xs bg-fuchsia-500 text-white rounded-md hover:bg-fuchsia-600 transition-colors duration-200">Details</button>
        </div>
      </div>
    </div>

    <!-- Card 6 -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-950 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/400/225?random=7" alt="Content Image" class="relative w-full h-48 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">
      <div class="relative p-4 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-lg font-bold mb-1 text-gray-900 dark:text-gray-50">Arcade Aces</h3>
        <p class="text-xs text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">A group of friends discovers a magical arcade machine that transports them.</p>
        <div class="flex items-center justify-between text-sm">
          <span class="flex items-center text-gray-500 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            4.2
          </span>
          <button class="px-3 py-1 text-xs bg-fuchsia-500 text-white rounded-md hover:bg-fuchsia-600 transition-colors duration-200">Details</button>
        </div>
      </div>
    </div>

  </div>

  <!-- Section for More Content/Navigation (e.g., categories or pagination) -->
  <div class="mt-12 text-center">
    <button class="relative flex items-center justify-center mx-auto px-8 py-3 text-lg rounded-full bg-black text-white font-bold overflow-hidden group hover:bg-gray-800 dark:bg-gray-800 dark:hover:bg-gray-700 transition-all duration-300 ease-in-out transform hover:scale-105">
      <span class="absolute w-0 h-0 transition-all duration-300 ease-out bg-fuchsia-500 rounded-full group-hover:w-full group-hover:h-full opacity-20"></span>
      <span class="relative z-10">Discover More Titles</span>
      <svg class="w-5 h-5 ml-2 relative z-10" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>

</div>
              

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-4xl w-full space-y-8 bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl relative overflow-hidden">
    <!-- Decorative 3D elements (subtle) -->
    <div class="absolute inset-0 pointer-events-none opacity-10 dark:opacity-5">
      <div class="absolute top-0 left-0 w-32 h-32 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-600 rounded-full mix-blend-multiply filter blur-xl transform -translate-x-1/2 -translate-y-1/2"></div>
      <div class="absolute bottom-0 right-0 w-48 h-48 bg-gradient-to-tl from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-full mix-blend-multiply filter blur-xl transform translate-x-1/2 translate-y-1/2"></div>
    </div>

    <div class="relative z-10 text-center">
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-gray-100 sm:text-4xl">
        Precision Engineering Solutions
      </h2>
      <p class="mt-4 text-lg text-gray-600 dark:text-gray-400">
        Delivering robust and reliable solutions for the modern industrial landscape.
      </p>
    </div>

    <div class="relative z-10 grid grid-cols-1 md:grid-cols-2 gap-8 mt-10">
      <!-- Feature 1 -->
      <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1 relative group overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-lg opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="relative z-10">
          <div class="flex items-center justify-center w-12 h-12 bg-gray-300 dark:bg-gray-600 rounded-full mb-4 mx-auto">
            <svg class="h-6 w-6 text-gray-700 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1m.364 6.364l-.707-.707M12 20v1m-6.364-1.636l-.707.707M3 12H2m1.636-6.364l.707-.707M19 12a7 7 0 11-14 0 7 7 0 0114 0z"></path>
            </svg>
          </div>
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 text-center">Advanced Robotics</h3>
          <p class="text-gray-600 dark:text-gray-400 text-center">
            Automating manufacturing processes with cutting-edge robotic systems for unmatched efficiency.
          </p>
        </div>
      </div>

      <!-- Feature 2 -->
      <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1 relative group overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-lg opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="relative z-10">
          <div class="flex items-center justify-center w-12 h-12 bg-gray-300 dark:bg-gray-600 rounded-full mb-4 mx-auto">
            <svg class="h-6 w-6 text-gray-700 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37a1.724 1.724 0 002.572-1.065z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
          </div>
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 text-center">Quality Control</h3>
          <p class="text-gray-600 dark:text-gray-400 text-center">
            Implementing rigorous quality assurance protocols to ensure every product meets global standards.
          </p>
        </div>
      </div>
    </div>

    <div class="relative z-10 pt-8 text-center">
      <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:bg-gray-500 dark:hover:bg-gray-600 dark:focus:ring-gray-400 transition-colors duration-300 transform hover:-translate-y-0.5 hover:scale-105">
        Learn More
        <svg class="ml-3 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
  </div>
</div>
              

                <div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-8 md:p-12 lg:p-16 relative overflow-hidden">

  <!-- Memphis-inspired background shapes -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none opacity-20 dark:opacity-10">
    <div class="absolute top-1/4 left-1/4 w-48 h-48 sm:w-64 sm:h-64 bg-fuchsia-300 dark:bg-fuchsia-700 transform rotate-45 rounded-xl"></div>
    <div class="absolute bottom-1/3 right-1/4 w-32 h-32 sm:w-48 sm:h-48 bg-teal-300 dark:bg-teal-700 transform -rotate-12 rounded-full"></div>
    <div class="absolute top-1/2 left-0 w-24 h-24 sm:w-32 sm:h-32 bg-yellow-300 dark:bg-yellow-700 transform rotate-70 rounded-lg"></div>
    <div class="absolute bottom-0 right-0 w-56 h-56 sm:w-72 sm:h-72 bg-purple-300 dark:bg-purple-700 transform -skew-x-12 rounded-2xl"></div>
  </div>

  <div class="max-w-7xl mx-auto relative z-10">
    <header class="text-center mb-12 lg:mb-16">
      <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold leading-tight tracking-tight mb-4 text-gray-900 dark:text-gray-50">
        <span class="block">Strategic Consulting</span>
        <span class="block text-teal-600 dark:text-teal-400">for Growth</span>
      </h1>
      <p class="text-lg sm:text-xl md:text-2xl font-medium text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
        Empowering businesses with tailored insights and actionable strategies to navigate complex challenges and achieve sustainable success.
      </p>
    </header>

    <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12 lg:mb-16">

      <!-- Service Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out border-4 border-fuchsia-300 dark:border-fuchsia-700 overflow-hidden">
        <img src="https://picsum.photos/id/157/600/400" alt="Strategy Development" class="w-full h-48 object-cover rounded-t-2xl">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-3 text-teal-700 dark:text-teal-300">Strategy Development</h3>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Crafting robust strategic roadmaps for market leadership and competitive advantage.</p>
          <ul class="list-none space-y-2 text-gray-600 dark:text-gray-400 mb-6">
            <li class="flex items-center"><svg class="w-5 h-5 text-fuchsia-500 dark:text-fuchsia-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Market Entry Analysis</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-fuchsia-500 dark:text-fuchsia-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Growth Planning</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-fuchsia-500 dark:text-fuchsia-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Competitive Analysis</li>
          </ul>
          <a href="#" class="inline-block px-6 py-3 bg-fuchsia-400 dark:bg-fuchsia-600 text-white font-semibold rounded-full shadow-md hover:bg-fuchsia-500 dark:hover:bg-fuchsia-700 transition-colors duration-300 animate-pulse-md">Learn More</a>
        </div>
      </div>

      <!-- Service Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out border-4 border-teal-300 dark:border-teal-700 overflow-hidden">
        <img src="https://picsum.photos/id/160/600/400" alt="Operational Efficiency" class="w-full h-48 object-cover rounded-t-2xl">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-3 text-purple-700 dark:text-purple-300">Operational Efficiency</h3>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Optimizing internal processes for enhanced productivity and cost reduction.</p>
          <ul class="list-none space-y-2 text-gray-600 dark:text-gray-400 mb-6">
            <li class="flex items-center"><svg class="w-5 h-5 text-teal-500 dark:text-teal-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Process Re-engineering</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-teal-500 dark:text-teal-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Supply Chain Optimization</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-teal-500 dark:text-teal-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Tech Integration</li>
          </ul>
          <a href="#" class="inline-block px-6 py-3 bg-teal-400 dark:bg-teal-600 text-white font-semibold rounded-full shadow-md hover:bg-teal-500 dark:hover:bg-teal-700 transition-colors duration-300">Explore Solutions</a>
        </div>
      </div>

      <!-- Service Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out border-4 border-yellow-300 dark:border-yellow-700 overflow-hidden">
        <img src="https://picsum.photos/id/156/600/400" alt="Digital Transformation" class="w-full h-48 object-cover rounded-t-2xl">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-3 text-fuchsia-700 dark:text-fuchsia-300">Digital Transformation</h3>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Guiding businesses through successful digital adoption and innovation.</p>
          <ul class="list-none space-y-2 text-gray-600 dark:text-gray-400 mb-6">
            <li class="flex items-center"><svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Cloud Adoption</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>AI & Automation</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Data Analytics</li>
          </ul>
          <a href="#" class="inline-block px-6 py-3 bg-yellow-400 dark:bg-yellow-600 text-white font-semibold rounded-full shadow-md hover:bg-yellow-500 dark:hover:bg-yellow-700 transition-colors duration-300 animate-pulse-md">Discover More</a>
        </div>
      </div>

    </section>

    <section class="bg-gray-100 dark:bg-gray-800 rounded-3xl p-8 sm:p-10 lg:p-12 mb-12 lg:mb-16 border-4 border-purple-300 dark:border-purple-700 relative overflow-hidden">
      <!-- Abstract Shape for Memphis feel -->
      <div class="absolute top-0 -left-8 w-32 h-32 bg-teal-200 dark:bg-teal-800 rounded-full opacity-40 mix-blend-multiply dark:mix-blend-screen transform -rotate-12"></div>
      <div class="absolute bottom-0 -right-8 w-48 h-48 bg-fuchsia-200 dark:bg-fuchsia-800 rounded-tl-full rounded-br-full opacity-40 mix-blend-multiply dark:mix-blend-screen transform rotate-34"></div>

      <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-8 text-gray-900 dark:text-gray-50">
        Why Partner With Us?
      </h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
        <div class="p-4">
          <div class="text-5xl mb-4 text-fuchsia-600 dark:text-fuchsia-400 drop-shadow-lg">✨</div>
          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">Tailored Solutions</h3>
          <p class="text-gray-600 dark:text-gray-300">Custom strategies designed to fit your unique business needs.</p>
        </div>
        <div class="p-4">
          <div class="text-5xl mb-4 text-teal-600 dark:text-teal-400 drop-shadow-lg">📈</div>
          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">Proven Results</h3>
          <p class="text-gray-600 dark:text-gray-300">A track record of driving significant and measurable growth for our clients.</p>
        </div>
        <div class="p-4">
          <div class="text-5xl mb-4 text-yellow-600 dark:text-yellow-400 drop-shadow-lg">🤝</div>
          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">Expert Team</h3>
          <p class="text-gray-600 dark:text-gray-300">Access to seasoned consultants with diverse industry expertise.</p>
        </div>
      </div>
    </section>

    <section class="text-center bg-purple-100 dark:bg-purple-900 rounded-3xl p-8 sm:p-10 lg:p-12 border-4 border-fuchsia-300 dark:border-fuchsia-700 relative overflow-hidden">
      <!-- Abstract Shape for Memphis feel -->
      <div class="absolute top-1/2 left-0 w-24 h-24 bg-yellow-200 dark:bg-yellow-800 rounded-full opacity-40 mix-blend-multiply dark:mix-blend-screen transform translate-x-1/2 -translate-y-1/2"></div>
      <div class="absolute bottom-0 right-1/4 w-32 h-32 bg-teal-200 dark:bg-teal-800 transform skew-y-12 opacity-40 mix-blend-multiply dark:mix-blend-screen"></div>

      <h2 class="text-3xl sm:text-4xl font-extrabold mb-6 text-gray-900 dark:text-gray-50">
        Ready to Transform Your Business?
      </h2>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
        Let's discuss how our consulting services can propel your business forward.
      </p>
      <a href="#contact" class="inline-flex items-center px-8 py-4 bg-purple-500 dark:bg-purple-700 text-white text-xl font-bold rounded-full shadow-lg hover:bg-purple-600 dark:hover:bg-purple-800 transition-colors duration-300 transform hover:scale-105 active:scale-95 animate-jump-and-pulse shadow-purple-400/50 dark:shadow-purple-900/50">
        Get in Touch
        <svg class="ml-3 w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
      </a>
    </section>

  </div>
</div>

<!-- Custom Keyframes (usually in CSS file but added here for isolated component) -->
<style>
  @keyframes pulse-md {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192, 132, 252, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(192, 132, 252, 0); }
  }
  @keyframes jump-and-pulse {
    0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 4px 14px rgba(168, 85, 247, 0.3); }
    50% { transform: translateY(-5px) scale(1.02); box-shadow: 0 8px 20px rgba(168, 85, 247, 0.6); }
  }
  .animate-pulse-md {
    animation: pulse-md 2s infinite ease-in-out;
    animation-delay: 0.5s; /* Staggering the animation a bit */
  }
  .animate-jump-and-pulse {
    animation: jump-and-pulse 2s infinite ease-in-out;
    animation-delay: 0.8s; /* Staggering the animation a bit */
  }
</style>
              

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
    <!-- Card Header with Image -->
    <div class="relative">
      <img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=1" alt="Course Thumbnail">
      <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent">
        <h3 class="text-xl font-bold text-white leading-tight">Introduction to Web Development</h3>
      </div>
    </div>

    <!-- Card Content -->
    <div class="p-4 flex flex-col gap-3">
      <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
        Learn the fundamentals of HTML, CSS, and JavaScript to build your first websites. This course is perfect for beginners.
      </p>

      <div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
        <div class="flex items-center gap-1">
          <svg class="w-4 h-4 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
          <span>2h 30m</span>
        </div>
        <div class="flex items-center gap-1">
          <svg class="w-4 h-4 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
          <span>5 Modules</span>
        </div>
      </div>
    </div>

    <!-- Card Footer with Action Button -->
    <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 flex justify-end">
      <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md shadow transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
        Start Course
      </button>
    </div>
  </div>
</div>
              

                <div class="font-mono min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-indigo-100 text-purple-800 dark:from-purple-900 dark:via-blue-900 dark:to-indigo-900 dark:selection:bg-cyan-400 dark:text-purple-100 p-4 sm:p-8 flex items-center justify-center">
  <div class="container mx-auto p-4 sm:p-8 bg-purple-200 dark:bg-purple-800 rounded-lg shadow-2xl border-4 border-indigo-500 dark:border-indigo-400 transform skew-y-1 shadow-purple-500/50 dark:shadow-purple-900/50">
    <div class="mb-8 text-center -skew-y-1">
      <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-2 text-indigo-700 dark:text-indigo-300 tracking-wider uppercase drop-shadow-lg [text-shadow:_4px_4px_rgb(109_40_217_/_50%)] dark:[text-shadow:_4px_4px_rgb(99_102_241_/_30%)]">
        80s VIBE SHOP
      </h1>
      <p class="text-xl sm:text-2xl text-purple-600 dark:text-purple-300 font-semibold mb-6 italic">Unbox the Future, One Pixel at a Time</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Product Card 1 -->
      <div class="bg-purple-300 dark:bg-purple-700 rounded-lg p-6 shadow-xl border-4 border-indigo-400 dark:border-indigo-500 relative overflow-hidden transform hover:scale-105 transition-transform duration-300 cube-effect">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-400/30 to-purple-400/30 dark:from-indigo-600/30 dark:to-purple-600/30 opacity-0 hover:opacity-100 transition-opacity duration-300 flex items-center justify-center text-white text-3xl font-bold cursor-pointer z-10">
          <span class="animate-pulse">BUY NOW!</span>
        </div>
        <div class="relative z-20">
          <div class="mb-4 overflow-hidden rounded-md border-2 border-purple-500 dark:border-purple-300 group-hover:filter group-hover:brightness-110">
            <img src="https://picsum.photos/id/1043/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-md transform transition-transform duration-300 hover:scale-110 pulse-glow">
          </div>
          <h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-300 mb-2 truncate">RETRO GAMER DX</h2>
          <p class="text-purple-700 dark:text-purple-200 mb-4 line-clamp-3">Experience the thrill of classic gaming with this reimagined retro console! Comes with 100+ pre-installed games. Limited Edition purple variant!</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-3xl font-extrabold text-pink-600 dark:text-pink-400 drop-shadow-md">$89.99</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-400">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-gray-400 dark:text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
            <button class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transform hover:scale-105 duration-200 shadow-lg shadow-indigo-500/50 dark:shadow-indigo-700/50 btn-glow">
              Add to Cart
            </button>
            <button class="flex-1 bg-purple-500 hover:bg-purple-600 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transform hover:scale-105 duration-200 shadow-lg shadow-purple-500/50 dark:shadow-purple-700/50 btn-glow">
              Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-purple-300 dark:bg-purple-700 rounded-lg p-6 shadow-xl border-4 border-indigo-400 dark:border-indigo-500 relative overflow-hidden transform hover:scale-105 transition-transform duration-300 cube-effect">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-400/30 to-purple-400/30 dark:from-indigo-600/30 dark:to-purple-600/30 opacity-0 hover:opacity-100 transition-opacity duration-300 flex items-center justify-center text-white text-3xl font-bold cursor-pointer z-10">
          <span class="animate-pulse">BUY NOW!</span>
        </div>
        <div class="relative z-20">
          <div class="mb-4 overflow-hidden rounded-md border-2 border-purple-500 dark:border-purple-300">
            <img src="https://picsum.photos/id/338/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-md transform transition-transform duration-300 hover:scale-110 pulse-glow">
          </div>
          <h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-300 mb-2 truncate">CYBERPUNK HEADPHONES</h2>
          <p class="text-purple-700 dark:text-purple-200 mb-4 line-clamp-3">Immerse yourself in a world of pure sound. Neon light accents, booming bass, and comfortable earcups for all-day listening.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-3xl font-extrabold text-pink-600 dark:text-pink-400 drop-shadow-md">$129.00</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-400">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-yellow-500 dark:text-yellow-400 opacity-50" viewBox="0 0 24 24"><path d="M12 0l-3.09 6.26-6.91.99 5 4.88-1.18 6.91L12 18.23l6.23 3.28-1.18-6.91 5-4.88-6.91-.99L12 0z"/></svg>
            </div>
          </div>
          <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
            <button class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transform hover:scale-105 duration-200 shadow-lg shadow-indigo-500/50 dark:shadow-indigo-700/50 btn-glow">
              Add to Cart
            </button>
            <button class="flex-1 bg-purple-500 hover:bg-purple-600 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transform hover:scale-105 duration-200 shadow-lg shadow-purple-500/50 dark:shadow-purple-700/50 btn-glow">
              Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-purple-300 dark:bg-purple-700 rounded-lg p-6 shadow-xl border-4 border-indigo-400 dark:border-indigo-500 relative overflow-hidden transform hover:scale-105 transition-transform duration-300 cube-effect">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-400/30 to-purple-400/30 dark:from-indigo-600/30 dark:to-purple-600/30 opacity-0 hover:opacity-100 transition-opacity duration-300 flex items-center justify-center text-white text-3xl font-bold cursor-pointer z-10">
          <span class="animate-pulse">BUY NOW!</span>
        </div>
        <div class="relative z-20">
          <div class="mb-4 overflow-hidden rounded-md border-2 border-purple-500 dark:border-purple-300">
            <img src="https://picsum.photos/id/296/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-md transform transition-transform duration-300 hover:scale-110 pulse-glow">
          </div>
          <h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-300 mb-2 truncate">NEON CITY POSTER</h2>
          <p class="text-purple-700 dark:text-purple-200 mb-4 line-clamp-3">Illuminate your living space with this vibrant, high-quality art print. Featuring a quintessential 80s cityscape at dusk.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-3xl font-extrabold text-pink-600 dark:text-pink-400 drop-shadow-md">$29.50</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-400">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-gray-400 dark:text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-gray-400 dark:text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
            <button class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transform hover:scale-105 duration-200 shadow-lg shadow-indigo-500/50 dark:shadow-indigo-700/50 btn-glow">
              Add to Cart
            </button>
            <button class="flex-1 bg-purple-500 hover:bg-purple-600 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transform hover:scale-105 duration-200 shadow-lg shadow-purple-500/50 dark:shadow-purple-700/50 btn-glow">
              Details
            </button>
          </div>
        </div>
      </div>

    </div>

    <div class="mt-12 text-center -skew-y-1">
      <p class="text-lg sm:text-xl text-purple-600 dark:text-purple-300 font-semibold italic">Ready to step back into the future?</p>
      <button class="mt-4 inline-block bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-8 rounded-full shadow-lg shadow-pink-500/50 dark:shadow-pink-700/50 uppercase tracking-wide transform hover:scale-105 duration-300 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700 btn-glow">
        Browse All Products
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block ml-2 -mt-1" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <!-- Decorative elements -->
    <div class="absolute top-4 left-4 w-12 h-12 bg-pink-400 dark:bg-pink-600 rounded-full animate-bounce" style="animation-duration: 3s; animation-delay: 0s;"></div>
    <div class="absolute bottom-4 right-4 w-8 h-8 bg-indigo-400 dark:bg-indigo-600 rounded-full animate-bounce" style="animation-duration: 3s; animation-delay: 1.5s;"></div>
    <div class="absolute top-1/4 right-1/4 w-6 h-6 bg-purple-500 dark:bg-purple-400 rounded-xl transform rotate-45 animate-spin-slow"></div>
    <div class="absolute bottom-1/3 left-1/4 w-10 h-10 bg-cyan-400 dark:bg-cyan-600 rounded-lg transform skew-x-12 animate-float"></div>

  </div>
</div>

<style>
  /* Adding some custom keyframe animations for retro feel */
  @keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0px rgba(255, 255, 255, 0); }
    50% { box-shadow: 0 0 15px rgba(236, 72, 153, 0.7), 0 0 30px rgba(168, 85, 247, 0.5); }
  }

  .pulse-glow {
    animation: pulse-glow 3s infinite alternate;
  }

  @keyframes btn-glow {
    0%, 100% { outline: 2px solid transparent; }
    50% { outline: 2px solid theme('colors.purple.400'); outline-offset: 2px; }
  }

  .btn-glow:hover {
    animation: btn-glow 1s infinite alternate;
  }

  @keyframes cube-effect {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.01) rotate(0.5deg); }
    50% { transform: scale(1) rotate(0deg); }
    75% { transform: scale(1.01) rotate(-0.5deg); }
    100% { transform: scale(1) rotate(0deg); }
  }

  .cube-effect {
    box-shadow: 8px 8px 0px theme('colors.indigo.500'), 16px 16px 0px theme('colors.pink.500');
    transition: all 0.3s ease-in-out;
  }

  .dark .cube-effect {
    box-shadow: 8px 8px 0px theme('colors.indigo.700'), 16px 16px 0px theme('colors.pink.700');
  }

  .cube-effect:hover {
    transform: translate(-4px, -4px) scale(1.02);
    box-shadow: 10px 10px 0px theme('colors.indigo.600'), 20px 20px 0px theme('colors.pink.600');
  }
  .dark .cube-effect:hover {
    box-shadow: 10px 10px 0px theme('colors.indigo.800'), 20px 20px 0px theme('colors.pink.800');
  }

  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .animate-spin-slow {
    animation: spin-slow 10s linear infinite;
  }

  @keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
    100% { transform: translateY(0px) rotate(0deg); }
  }

  .animate-float {
    animation: float 4s ease-in-out infinite;
  }

</style>
              

                <div class="font-sans bg-amber-50 text-emerald-950 dark:bg-zinc-900 dark:text-emerald-100 p-4 sm:p-8 md:p-12 lg:p-16 rounded-3xl shadow-xl border border-amber-200 dark:border-zinc-800 transition-colors duration-300">

  <!-- Header Section -->
  <header class="flex flex-col md:flex-row items-center justify-between mb-12">
    <div class="flex items-center space-x-4 mb-6 md:mb-0">
      <img src="https://randomuser.me/api/portraits/men/88.jpg" alt="Photographer Avatar" class="w-20 h-20 rounded-full object-cover shadow-lg border-4 border-emerald-400 dark:border-emerald-600 animate-bounce-slow">
      <div>
        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-emerald-800 dark:text-emerald-300 drop-shadow-lg leading-tight">Lens Lullaby</h1>
        <p class="text-xl sm:text-2xl text-emerald-700 dark:text-emerald-400 font-medium">Capturing Joy, One Pixel at a Time</p>
      </div>
    </div>
    <nav class="flex flex-wrap justify-center gap-4 sm:gap-6">
      <a href="#gallery" class="text-lg sm:text-xl font-semibold text-emerald-700 dark:text-emerald-400 hover:text-emerald-900 dark:hover:text-emerald-200 bg-emerald-200 dark:bg-emerald-800 px-5 py-2 rounded-full shadow-md hover:shadow-xl transform hover:scale-105 transition duration-300 ease-in-out">Gallery</a>
      <a href="#about" class="text-lg sm:text-xl font-semibold text-emerald-700 dark:text-emerald-400 hover:text-emerald-900 dark:hover:text-emerald-200 bg-emerald-200 dark:bg-emerald-800 px-5 py-2 rounded-full shadow-md hover:shadow-xl transform hover:scale-105 transition duration-300 ease-in-out">About</a>
      <a href="#contact" class="text-lg sm:text-xl font-semibold text-emerald-700 dark:text-emerald-400 hover:text-emerald-900 dark:hover:text-emerald-200 bg-emerald-200 dark:bg-emerald-800 px-5 py-2 rounded-full shadow-md hover:shadow-xl transform hover:scale-105 transition duration-300 ease-in-out">Contact</a>
    </nav>
  </header>

  <!-- Featured Photo Section -->
  <section class="mb-16 bg-gradient-to-br from-emerald-100 to-teal-100 dark:from-emerald-800 dark:to-teal-900 rounded-3xl p-6 sm:p-8 shadow-2xl animate-pop-in border border-emerald-300 dark:border-teal-700">
    <h2 class="text-3xl sm:text-4xl font-bold text-emerald-800 dark:text-emerald-300 text-center mb-8">Featured Snapshots</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">
      <div class="relative col-span-1 md:col-span-2 lg:col-span-1 rounded-2xl overflow-hidden shadow-xl group hover:shadow-emerald-500/50 dark:hover:shadow-emerald-700/50 transition-all duration-300 ease-in-out transform hover:scale-102">
        <img src="https://picsum.photos/id/1050/800/600" alt="Featured Photo 1" class="w-full h-96 object-cover object-center transform group-hover:scale-110 transition-all duration-500 ease-in-out brightness-90 group-hover:brightness-100">
        <div class="absolute inset-0 bg-gradient-to-t from-emerald-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
          <p class="text-white font-semibold text-lg drop-shadow-lg">Mountain Majesty</p>
        </div>
      </div>
      <div class="relative col-span-1 lg:col-span-1 rounded-2xl overflow-hidden shadow-xl group hover:shadow-emerald-500/50 dark:hover:shadow-emerald-700/50 transition-all duration-300 ease-in-out transform hover:scale-102">
        <img src="https://picsum.photos/id/1018/800/600" alt="Featured Photo 2" class="w-full h-96 object-cover object-center transform group-hover:scale-110 transition-all duration-500 ease-in-out brightness-90 group-hover:brightness-100">
        <div class="absolute inset-0 bg-gradient-to-t from-emerald-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
          <p class="text-white font-semibold text-lg drop-shadow-lg">Forest Whispers</p>
        </div>
      </div>
      <div class="relative col-span-1 lg:col-span-1 rounded-2xl overflow-hidden shadow-xl group hover:shadow-emerald-500/50 dark:hover:shadow-emerald-700/50 transition-all duration-300 ease-in-out transform hover:scale-102">
        <img src="https://picsum.photos/id/1003/800/600" alt="Featured Photo 3" class="w-full h-96 object-cover object-center transform group-hover:scale-110 transition-all duration-500 ease-in-out brightness-90 group-hover:brightness-100">
        <div class="absolute inset-0 bg-gradient-to-t from-emerald-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
          <p class="text-white font-semibold text-lg drop-shadow-lg">Ocean's Embrace</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Photo Gallery Grid -->
  <section id="gallery" class="mb-16">
    <h2 class="text-3xl sm:text-4xl font-bold text-emerald-800 dark:text-emerald-300 text-center mb-8">Our Charming Gallery</h2>
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Photo Card 1 -->
      <div class="bg-rose-100 dark:bg-rose-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-rose-300 dark:border-rose-700 cursor-pointer">
        <img src="https://picsum.photos/id/1025/400/300" alt="Gallery Image 1" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
        <h3 class="font-semibold text-xl text-rose-800 dark:text-rose-200 mb-2">Playful Pup</h3>
        <p class="text-sm text-rose-700 dark:text-rose-300">A furry friend enjoying the sunshine.</p>
      </div>
      <!-- Photo Card 2 -->
      <div class="bg-violet-100 dark:bg-violet-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-violet-300 dark:border-violet-700 cursor-pointer">
        <img src="https://picsum.photos/id/1069/400/300" alt="Gallery Image 2" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
        <h3 class="font-semibold text-xl text-violet-800 dark:text-violet-200 mb-2">Urban Glow</h3>
        <p class="text-sm text-violet-700 dark:text-violet-300">City lights at twilight, a symphony of colors.</p>
      </div>
      <!-- Photo Card 3 -->
      <div class="bg-emerald-100 dark:bg-emerald-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-emerald-300 dark:border-emerald-700 cursor-pointer">
        <img src="https://picsum.photos/id/111/400/300" alt="Gallery Image 3" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
        <h3 class="font-semibold text-xl text-emerald-800 dark:text-emerald-200 mb-2">Nature's Embrace</h3>
        <p class="text-sm text-emerald-700 dark:text-emerald-300">Lush green forest, a peaceful escape.</p>
      </div>
      <!-- Photo Card 4 -->
      <div class="bg-sky-100 dark:bg-sky-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-sky-300 dark:border-sky-700 cursor-pointer">
        <img src="https://picsum.photos/id/1084/400/300" alt="Gallery Image 4" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
        <h3 class="font-semibold text-xl text-sky-800 dark:text-sky-200 mb-2">Desert Harmony</h3>
        <p class="text-sm text-sky-700 dark:text-sky-300">Sand dunes and skies, a timeless landscape.</p>
      </div>
      <!-- Photo Card 5 -->
      <div class="bg-rose-100 dark:bg-rose-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-rose-300 dark:border-rose-700 cursor-pointer">
        <img src="https://picsum.photos/id/1043/400/300" alt="Gallery Image 5" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
        <h3 class="font-semibold text-xl text-rose-800 dark:text-rose-200 mb-2">Bright Bloom</h3>
        <p class="text-sm text-rose-700 dark:text-rose-300">Vibrant flowers in full splendid bloom.</p>
      </div>
      <!-- Photo Card 6 -->
      <div class="bg-violet-100 dark:bg-violet-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-violet-300 dark:border-violet-700 cursor-pointer">
        <img src="https://picsum.photos/id/1048/400/300" alt="Gallery Image 6" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
        <h3 class="font-semibold text-xl text-violet-800 dark:text-violet-200 mb-2">Cozy Corner</h3>
        <p class="text-sm text-violet-700 dark:text-violet-300">A warm, inviting space for quiet moments.</p>
      </div>
      <!-- Photo Card 7 -->
      <div class="bg-emerald-100 dark:bg-emerald-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-emerald-300 dark:border-emerald-700 cursor-pointer">
        <img src="https://picsum.photos/id/1039/400/300" alt="Gallery Image 7" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
        <h3 class="font-semibold text-xl text-emerald-800 dark:text-emerald-200 mb-2">Leafy Green</h3>
        <p class="text-sm text-emerald-700 dark:text-emerald-300">Patterns of nature in close-up.</p>
      </div>
      <!-- Photo Card 8 -->
      <div class="bg-sky-100 dark:bg-sky-900 rounded-2xl p-4 shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden border border-sky-300 dark:border-sky-700 cursor-pointer">
        <img src="https://picsum.photos/id/1000/400/300" alt="Gallery Image 8" class="w-full h-40 object-cover rounded-xl mb-4 group-hover:scale-105 transition-transform duration-300">
        <h3 class="font-semibold text-xl text-sky-800 dark:text-sky-200 mb-2">Rustic Charm</h3>
        <p class="text-sm text-sky-700 dark:text-sky-300">Old world beauty, captured in time.</p>
      </div>
    </div>
  </section>

  <!-- About Section -->
  <section id="about" class="mb-16 bg-gradient-to-bl from-emerald-100 to-sky-100 dark:from-emerald-800 dark:to-sky-900 rounded-3xl p-6 sm:p-8 shadow-2xl animate-fade-in border border-emerald-300 dark:border-sky-700">
    <h2 class="text-3xl sm:text-4xl font-bold text-emerald-800 dark:text-emerald-300 text-center mb-8">Meet the Visionary</h2>
    <div class="flex flex-col md:flex-row items-center md:items-start gap-8">
      <img src="https://randomuser.me/api/portraits/women/90.jpg" alt="Photographer Profile" class="w-48 h-48 rounded-full object-cover shadow-2xl border-6 border-emerald-500 dark:border-emerald-700 flex-shrink-0 animate-spin-slow-reverse">
      <div class="text-center md:text-left">
        <h3 class="text-3xl font-semibold text-emerald-700 dark:text-emerald-400 mb-4">Anya Pixelbloom</h3>
        <p class="text-lg leading-relaxed text-emerald-900 dark:text-emerald-200 mb-4">
          Hello! I'm Anya, a passionate photographer with an eye for the whimsical and joy-filled moments of life. 
          My journey began with a simple point-and-shoot camera and a dream to capture the hidden magic in everyday scenes. 
          From the grand landscapes to the tiniest details, I believe every shot tells a unique story.
        </p>
        <p class="text-lg leading-relaxed text-emerald-900 dark:text-emerald-200">
          My style is a blend of vibrant colors, playful compositions, and a touch of fantasy. I love connecting with my subjects, 
          whether they're people, pets, or places, and bringing out their true essence. Let's create some wonderful memories together!
        </p>
      </div>
    </div>
  </section>

  <!-- Testimonials Section -->
  <section class="mb-16">
    <h2 class="text-3xl sm:text-4xl font-bold text-emerald-800 dark:text-emerald-300 text-center mb-8">Hear the Happy Snaps!</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div class="bg-amber-100 dark:bg-amber-900 rounded-3xl p-6 shadow-lg transform hover:scale-105 transition-transform duration-300 border border-amber-300 dark:border-amber-700 animate-slide-up">
        <p class="text-lg italic text-amber-800 dark:text-amber-200 mb-4">"Anya's photos radiated pure joy! She captured our family's laughter and love in such a vibrant, authentic way. Every picture is a treasure!"</p>
        <div class="flex items-center space-x-4">
          <img src="https://randomuser.me/api/portraits/women/24.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full object-cover border-2 border-amber-400">
          <div>
            <p class="font-semibold text-amber-900 dark:text-amber-100">Clara & Family</p>
            <p class="text-sm text-amber-700 dark:text-amber-300">Happy Clients</p>
          </div>
        </div>
      </div>
      <div class="bg-teal-100 dark:bg-teal-900 rounded-3xl p-6 shadow-lg transform hover:scale-105 transition-transform duration-300 border border-teal-300 dark:border-teal-700 animate-slide-up animation-delay-200">
        <p class="text-lg italic text-teal-800 dark:text-teal-200 mb-4">"The colors and composition in her landscape shots are breathtaking. Anya truly brings out the magic in every scene. Highly recommend!"</p>
        <div class="flex items-center space-x-4">
          <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full object-cover border-2 border-teal-400">
          <div>
            <p class="font-semibold text-teal-900 dark:text-teal-100">Leo Explorer</p>
            <p class="text-sm text-teal-700 dark:text-teal-300">Adventure Enthusiast</p>
          </div>
        </div>
      </div>
      <div class="bg-rose-100 dark:bg-rose-900 rounded-3xl p-6 shadow-lg transform hover:scale-105 transition-transform duration-300 border border-rose-300 dark:border-rose-700 animate-slide-up animation-delay-400">
        <p class="text-lg italic text-rose-800 dark:text-rose-200 mb-4">"Professional, fun, and incredibly talented! Anya made our pet photoshoot an absolute blast, and the results were more charming than we imagined."</p>
        <div class="flex items-center space-x-4">
          <img src="https://randomuser.me/api/portraits/women/55.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full object-cover border-2 border-rose-400">
          <div>
            <p class="font-semibold text-rose-900 dark:text-rose-100">Zara & Whiskers</p>
            <p class="text-sm text-rose-700 dark:text-rose-300">Pet Parents</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Call to Action / Contact -->
  <section id="contact" class="bg-gradient-to-tr from-emerald-200 to-violet-200 dark:from-emerald-700 dark:to-violet-800 rounded-3xl p-8 sm:p-10 text-center shadow-2xl animate-pulse-light border border-emerald-400 dark:border-violet-700">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-emerald-900 dark:text-emerald-100 mb-6 drop-shadow">Ready to Capture Your Story?</h2>
    <p class="text-xl sm:text-2xl text-emerald-800 dark:text-emerald-200 mb-8 max-w-3xl mx-auto">Let's create some magical moments together! Reach out and tell me about your vision.</p>
    <a href="mailto:[email protected]" class="inline-block bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-400 dark:hover:bg-emerald-300 text-white dark:text-emerald-900 text-xl sm:text-2xl font-bold px-10 py-4 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition duration-300 ease-in-out border-2 border-emerald-600 dark:border-emerald-400 animate-button-pop">
      Let's Chat!
    </a>
  </section>

  <!-- Custom Keyframe Animations (for demonstration purposes, would be in CSS) -->
  <style>
    @keyframes bounce-slow {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    .animate-bounce-slow {
      animation: bounce-slow 4s infinite ease-in-out;
    }

    @keyframes pop-in {
      0% { opacity: 0; transform: scale(0.9); }
      100% { opacity: 1; transform: scale(1); }
    }
    .animate-pop-in {
      animation: pop-in 0.8s ease-out forwards;
    }

    @keyframes fade-in {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    .animate-fade-in {
      animation: fade-in 1s ease-out forwards;
    }

    @keyframes spin-slow-reverse {
      from { transform: rotate(0deg); }
      to { transform: rotate(-360deg); }
    }
    .animate-spin-slow-reverse {
      animation: spin-slow-reverse 60s linear infinite;
    }

    @keyframes slide-up {
      0% { opacity: 0; transform: translateY(20px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .animate-slide-up {
      animation: slide-up 0.6s ease-out forwards;
    }
    /* Delay variants */
    .animation-delay-200 { animation-delay: 0.2s; }
    .animation-delay-400 { animation-delay: 0.4s; }

    @keyframes pulse-light {
      0%, 100% { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
      50% { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 10px 20px -5px rgba(0, 0, 0, 0.25); }
    }

    .dark .animate-pulse-light {
      animation: pulse-light 3s ease-in-out infinite;
    }


    @keyframes button-pop {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.02); }
    }
    .animate-button-pop {
      animation: button-pop 2s infinite ease-in-out;
    }

  </style>

</div>
              

                <div class="p-4 sm:p-6 bg-rose-50 dark:bg-zinc-800 rounded-lg shadow-md max-w-sm mx-auto transition-colors duration-300">
  <div class="relative mb-4 overflow-hidden rounded-md">
    <img src="https://picsum.photos/400/250?random=10" alt="Property Image" class="w-full h-48 object-cover rounded-md transition-transform duration-300 hover:scale-105">
    <div class="absolute bottom-2 left-2 bg-rose-200 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200 px-3 py-1 rounded-full text-xs font-semibold uppercase opacity-90">
      For Sale
    </div>
  </div>
  <h3 class="text-xl sm:text-2xl font-bold text-zinc-800 dark:text-rose-100 mb-2 truncate">
    Modern City Apartment
  </h3>
  <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-3 truncate">
    123 Main St, Anytown, CA 90210
  </p>

  <div class="grid grid-cols-2 gap-y-2 text-zinc-700 dark:text-zinc-300 text-sm mb-4">
    <div class="flex items-center">
      <svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10L6 7l9 4 6-3v11H3V10z"></path></svg>
      3 Beds
    </div>
    <div class="flex items-center">
      <svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.25 15.3A4.5 4.5 0 0115.75 21H12a2.25 2.25 0 00-2.25 2.25h-1.5A2.25 2.25 0 016 21H3.75A2.25 2.25 0 011.5 18.75V9A2.25 2.25 0 013.75 6.75h1.5A2.25 2.25 0 007.5 4.5h9A2.25 2.25 0 0119.5 6.75h1.5A2.25 2.25 0 0122.5 9v9.75A4.5 4.5 0 0120.25 15.3z"></path></svg>
      2 Baths
    </div>
    <div class="flex items-center">
      <svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12V4zm-4 4V4zm-4 4V4zm-4 4v7h16v-7c0-2-1-4-3-4H7c-2 0-3 2-3 4z"></path></svg>
      1,200 sqft
    </div>
    <div class="flex items-center">
      <svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
      Central
    </div>
  </div>

  <div class="flex items-center justify-between">
    <p class="text-xl sm:text-2xl font-extrabold text-zinc-900 dark:text-rose-200">
      $350,000
    </p>
    <a href="#" class="inline-flex items-center px-4 py-2 bg-rose-400 dark:bg-rose-600 text-white rounded-md hover:bg-rose-500 dark:hover:bg-rose-700 transition-colors duration-200 text-sm sm:text-base font-semibold">
      Details
      <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"></path></svg>
    </a>
  </div>
</div>
              

                <div class="font-sans bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-50 py-16 px-4 sm:px-6 lg:px-8 overflow-hidden">

  <!-- Header Section with Geometric Accent -->
  <div class="relative max-w-7xl mx-auto mb-16 text-center">
    <div class="absolute inset-x-0 top-0 h-1/2 bg-gradient-to-br from-emerald-600 to-teal-700 dark:from-emerald-800 dark:to-teal-900 opacity-20 transform -skew-y-3 z-0"></div>
    <h1 class="relative text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-emerald-800 dark:text-emerald-300 mb-4 z-10">
      <span class="block">Elevating Your Vision</span>
      <span class="text-ruby-700 dark:text-ruby-400">With Unrivaled Precision</span>
    </h1>
    <p class="relative mt-4 text-xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto z-10">
      Discover the cornerstone of modern enterprise with our bespoke solutions, crafted for the discerning business.
    </p>
    <div class="relative w-24 h-1 items-center justify-center mx-auto mt-8 mb-4 bg-sapphire-600 dark:bg-sapphire-400 transform skew-x-12 z-10"></div>
  </div>

  <!-- Main Content Grid -->
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">

    <!-- Feature Card 1 -->
    <div class="group relative bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 transform transition duration-500 hover:scale-105 hover:shadow-2xl overflow-hidden animate-fade-in-up">
      <div class="absolute inset-0 bg-gradient-to-br from-emerald-500 to-teal-600 dark:from-emerald-700 dark:to-teal-800 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
      <div class="relative z-10">
        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-emerald-600 dark:bg-emerald-500 text-white shadow-lg mb-6 transform -rotate-12 group-hover:rotate-0 transition-transform duration-300">
          <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9.75 12L12 12V17L9.75 17ZM5.75 12L5.75 17L8 17L8 12L5.75 12ZM13.75 12L13.75 17L16 17L16 12L13.75 12ZM19.75 12L19.75 17L22 17L22 12L19.75 12ZM2 10L22 10V4L2 4V10ZM2 2L22 2L22 19L2 19V2Z"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-emerald-800 dark:text-emerald-300 mb-4">Visionary Strategy</h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
          Harness the power of foresight with our cutting-edge strategic insights, tailored to navigate the complexities of tomorrow's market.
        </p>
        <a href="#" class="mt-6 inline-flex items-center text-sapphire-700 dark:text-sapphire-400 font-semibold group-hover:text-sapphire-600 dark:group-hover:text-sapphire-300 transition-colors duration-300">
          Explore More
          <svg class="ml-2 w-4 h-4 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </a>
      </div>
    </div>

    <!-- Feature Card 2 -->
    <div class="group relative bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 transform transition duration-500 hover:scale-105 hover:shadow-2xl overflow-hidden animate-fade-in-up delay-200">
      <div class="absolute inset-0 bg-gradient-to-br from-sapphire-500 to-indigo-600 dark:from-sapphire-700 dark:to-indigo-800 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
      <div class="relative z-10">
        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-sapphire-600 dark:bg-sapphire-500 text-white shadow-lg mb-6 transform rotate-12 group-hover:rotate-0 transition-transform duration-300">
          <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.007 6.38L21 17l-3-7h4L10 21v-7a5.002 5.002 0 00-6.007-6.38L3 6z"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-sapphire-800 dark:text-sapphire-300 mb-4">Robust Implementation</h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
          From concept to execution, our meticulous implementation ensures seamless integration and unparalleled performance.
        </p>
        <a href="#" class="mt-6 inline-flex items-center text-sapphire-700 dark:text-sapphire-400 font-semibold group-hover:text-sapphire-600 dark:group-hover:text-sapphire-300 transition-colors duration-300">
          Learn How
          <svg class="ml-2 w-4 h-4 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </a>
      </div>
    </div>

    <!-- Feature Card 3 -->
    <div class="group relative bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 transform transition duration-500 hover:scale-105 hover:shadow-2xl overflow-hidden animate-fade-in-up delay-400">
      <div class="absolute inset-0 bg-gradient-to-br from-ruby-500 to-rose-600 dark:from-ruby-700 dark:to-rose-800 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
      <div class="relative z-10">
        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-ruby-600 dark:bg-ruby-500 text-white shadow-lg mb-6 transform -rotate-12 group-hover:rotate-0 transition-transform duration-300">
          <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.504A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.552M12 2.944V3m0 0V19.944m0-16.992a1.5 1.5 0 00-1.5 1.5V11.25a1.5 1.5 0 001.5 1.5 1.5 1.5 0 001.5-1.5V4.444A1.5 1.5 0 0012 2.944zm0 0L21 12M3 12l9 9"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-ruby-800 dark:text-ruby-300 mb-4">Sustainable Growth</h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
          Cultivate lasting success with our growth-oriented strategies, designed for long-term prosperity and market leadership.
        </p>
        <a href="#" class="mt-6 inline-flex items-center text-sapphire-700 dark:text-sapphire-400 font-semibold group-hover:text-sapphire-600 dark:group-hover:text-sapphire-300 transition-colors duration-300">
          Start Growing
          <svg class="ml-2 w-4 h-4 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </a>
      </div>
    </div>
  </div>

  <!-- Testimonial Section -->
  <div class="max-w-7xl mx-auto mt-24">
    <h2 class="text-center text-3xl font-extrabold text-emerald-800 dark:text-emerald-300 mb-12 sm:mb-16">
      What Our Visionaries Say
    </h2>
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">

      <!-- Testimonial 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 relative flex flex-col md:flex-row items-center md:items-start space-y-6 md:space-y-0 md:space-x-8 animate-fade-in-right">
        <div class="absolute inset-0 bg-gradient-to-br from-sapphire-500 to-indigo-600 dark:from-sapphire-700 dark:to-indigo-800 opacity-10 blur-sm rounded-lg"></div>
        <div class="flex-shrink-0 relative z-10">
          <img class="h-24 w-24 rounded-full object-cover border-4 border-sapphire-400 dark:border-sapphire-600 shadow-md" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client Avatar">
        </div>
        <div class="relative z-10 text-center md:text-left">
          <p class="text-lg text-gray-700 dark:text-gray-300 italic mb-4 leading-relaxed">“Partnering with them was a paradigm shift. Their meticulous approach led to unprecedented growth and market dominance.”</p>
          <p class="font-bold text-xl text-sapphire-800 dark:text-sapphire-300">Eleanor Vance</p>
          <p class="text-ruby-700 dark:text-ruby-400 text-sm">CEO, Global Innovations Corp.</p>
        </div>
      </div>

      <!-- Testimonial 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 relative flex flex-col md:flex-row items-center md:items-start space-y-6 md:space-y-0 md:space-x-8 animate-fade-in-left">
        <div class="absolute inset-0 bg-gradient-to-br from-emerald-500 to-teal-600 dark:from-emerald-700 dark:to-teal-800 opacity-10 blur-sm rounded-lg"></div>
        <div class="flex-shrink-0 relative z-10">
          <img class="h-24 w-24 rounded-full object-cover border-4 border-emerald-400 dark:border-emerald-600 shadow-md" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Client Avatar">
        </div>
        <div class="relative z-10 text-center md:text-left">
          <p class="text-lg text-gray-700 dark:text-gray-300 italic mb-4 leading-relaxed">“Their strategic foresight is unparalleled. We've optimized our operations and expanded our reach beyond expectations.”</p>
          <p class="font-bold text-xl text-emerald-800 dark:text-emerald-300">Julian Thorne</p>
          <p class="text-ruby-700 dark:text-ruby-400 text-sm">CTO, Apex Dynamics</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Call to Action Section -->
  <div class="max-w-7xl mx-auto mt-24 relative overflow-hidden rounded-lg shadow-2xl animate-fade-in-up delay-600">
    <div class="absolute inset-0 bg-gradient-to-br from-ruby-600 to-rose-700 dark:from-ruby-800 dark:to-rose-900 opacity-90"></div>
    <div class="relative z-10 p-12 sm:p-16 lg:flex lg:items-center lg:justify-between">
      <div class="text-center lg:text-left">
        <h2 class="text-3xl sm:text-4xl font-extrabold text-white mb-4">
          Ready to Redefine Your Future?
        </h2>
        <p class="text-xl text-ruby-200 dark:text-ruby-300 max-w-2xl mx-auto lg:mx-0">
          Join the elite who trust our expertise to carve their path to unparalleled success. Your journey begins now.
        </p>
      </div>
      <div class="mt-10 flex flex-col sm:flex-row items-center justify-center lg:mt-0 lg:ml-8 flex-shrink-0 space-y-4 sm:space-y-0 sm:space-x-4">
        <a href="#" class="w-full sm:w-auto px-8 py-4 border border-transparent text-lg font-medium rounded-full shadow-lg text-emerald-900 bg-emerald-300 hover:bg-emerald-200 dark:text-emerald-900 dark:bg-emerald-300 dark:hover:bg-emerald-200 transition-colors duration-300 transform hover:scale-105 active:scale-95">
          Get Started Now
        </a>
        <a href="#" class="w-full sm:w-auto px-8 py-4 border-2 border-white text-lg font-medium rounded-full text-white hover:bg-white hover:text-ruby-700 dark:hover:text-ruby-700 dark:hover:bg-white transition-colors duration-300 transform hover:scale-105 active:scale-95">
          Learn More
        </a>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom colors for Art Deco palette */
  .text-emerald-800 { color: #065F46; } /* Darker Emerald */
  .dark\:text-emerald-300 { color: #6EE7B7; } /* Lighter Emerald for Dark Mode */
  .bg-emerald-600 { background-color: #059669; }
  .dark\:bg-emerald-500 { background-color: #10B981; }
  .from-emerald-500 { --tw-gradient-from: #10B981; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(16, 185, 129, 0)); }
  .to-teal-600 { --tw-gradient-to: #0D9488; }
  .dark\:from-emerald-700 { --tw-gradient-from: #047857; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(4, 120, 87, 0)); }
  .dark\:to-teal-800 { --tw-gradient-to: #0F766E; }

  .text-sapphire-800 { color: #1E40AF; } /* Darker Sapphire */
  .dark\:text-sapphire-300 { color: #93C5FD; } /* Lighter Sapphire for Dark Mode */
  .bg-sapphire-600 { background-color: #2563EB; }
  .dark\:bg-sapphire-500 { background-color: #3B82F6; }
  .from-sapphire-500 { --tw-gradient-from: #3B82F6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0)); }
  .to-indigo-600 { --tw-gradient-to: #4F46E5; }
  .dark\:from-sapphire-700 { --tw-gradient-from: #1D4ED8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(29, 78, 216, 0)); }
  .dark\:to-indigo-800 { --tw-gradient-to: #3730A3; }

  .text-ruby-700 { color: #B91C1C; } /* Darker Ruby */
  .dark\:text-ruby-400 { color: #F87171; } /* Lighter Ruby for Dark Mode */
  .bg-ruby-600 { background-color: #DC2626; }
  .dark\:bg-ruby-500 { background-color: #EF4444; }
  .from-ruby-500 { --tw-gradient-from: #EF4444; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 68, 68, 0)); }
  .to-rose-600 { --tw-gradient-to: #E11D48; }
  .dark\:from-ruby-700 { --tw-gradient-from: #B91C1C; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(185, 28, 28, 0)); }
  .dark\:to-rose-800 { --tw-gradient-to: #9F1239; }

  .from-emerald-600 { --tw-gradient-from: #059669; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5, 150, 105, 0)); }
  .dark\:from-emerald-800 { --tw-gradient-from: #065F46; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(6, 95, 70, 0)); }

  /* Animation keyframes */
  @keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fade-in-right {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes fade-in-left {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }

  /* Apply animations to elements */
  .animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; opacity: 0; /* ensure initial state is hidden */ }
  .delay-200 { animation-delay: 0.2s; }
  .delay-400 { animation-delay: 0.4s; }
  .delay-600 { animation-delay: 0.6s; }
  .animate-fade-in-right { animation: fade-in-right 0.8s ease-out forwards; opacity: 0; }
  .animate-fade-in-left { animation: fade-in-left 0.8s ease-out forwards; opacity: 0; }

  /* Dark mode transition */
  body { transition: background-color 0.3s ease; }
  div, h1, h2, h3, p, a, img { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }
</style>