Luxury_Portfolio_Cards_Ocean_Blue

<div class="min-h-screen bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-950 dark:to-blue-900 py-12 px-4 sm:px-6 lg:px-8 font-serif text-gray-800 dark:text-gray-200">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-6 drop-shadow-lg text-blue-900 dark:text-blue-200 leading-tight">
      Our Exquisite Creations
    </h2>
    <p class="text-xl sm:text-2xl text-center mb-16 max-w-3xl mx-auto dark:text-gray-300">
      Dive into a curated collection of our most distinguished projects, crafted with precision and an unwavering pursuit of perfection.
    </p>

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

      <!-- Card 1 -->
      <div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700 ">
        <img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1018/600/400" alt="Project Image">
        <div class="p-6 flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Azure Sky Residency</h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">A beacon of modern architecture, featuring bespoke interiors and breathtaking panoramic views.</p>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Designer Avatar">
              <span>Anya Sharma</span>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">Architecture</span>
          </div>
          <a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
            View Project
          </a>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1042/600/400" alt="Project Image">
        <div class="p-6 flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Symphony of the Seas</h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">An opulent yacht interior design, blending classic elegance with cutting-edge marine technology.</p>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Designer Avatar">
              <span>Julian Thorne</span>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">Interior Design</span>
          </div>
          <a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
            Explore Details
          </a>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1044/600/400" alt="Project Image">
        <div class="p-6 flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Elysian Gardens Revitalization</h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">A transformative landscape design, harmonizing natural beauty with sustainable urban living.</p>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/9.jpg" alt="Designer Avatar">
              <span>Lena Petrov</span>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">Landscape</span>
          </div>
          <a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
            See Portfolio
          </a>
        </div>
      </div>

      <!-- Card 4 (Placeholder - could be dynamic) -->
      <div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/10/600/400" alt="Project Image">
        <div class="p-6 flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Oceanic Brand Identity</h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">Crafting a distinctive visual language for a luxury coastal resort brand.</p>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/71.jpg" alt="Designer Avatar">
              <span>Marcus Finn</span>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">Branding</span>
          </div>
          <a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
            Discover More
          </a>
        </div>
      </div>

      <!-- Card 5 (Placeholder) -->
      <div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1025/600/400" alt="Project Image">
        <div class="p-6 flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Digital Horizon App</h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">An intuitive and visually stunning mobile application designed for premium travel experiences.</p>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Designer Avatar">
              <span>Chloe Rivers</span>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">UI/UX Design</span>
          </div>
          <a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
            View Case Study
          </a>
        </div>
      </div>

      <!-- Card 6 (Placeholder) -->
      <div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1049/600/400" alt="Project Image">
        <div class="p-6 flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Timeless Sculpture Series</h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">A collection of bespoke artistic sculptures, blending classical forms with contemporary abstract elements.</p>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Designer Avatar">
              <span>David Hayes</span>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">Art & Craft</span>
          </div>
          <a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
            Discover Collection
          </a>
        </div>
      </div>

    </div>
  </div>
</div>