Whenever you wish to show more details this design can be used as Portfolio in grid to list projects in beautiful style
<section class="py-24 relative"> <div class="w-full max-w-7xl px-6 lg:px-8 mx-auto"> <div class="flex items-center justify-center flex-col gap-5 mb-14"> <span class='bg-indigo-50 text-indigo-500 text-xs font-medium px-3.5 py-1 rounded-full'>Portfolio</span> <h2 class="font-manrope font-bold text-4xl text-gray-900 text-center">Structural Elegance</h2> <p class="text-lg font-normal text-gray-500 max-w-3xl mx-auto text-center"> In the world of architecture or organization, structure provides the backbone for a purposeful and harmonious existence.</p> </div> <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 mb-14"> <div class="sm:col-span-2 bg-cover bg-center max-md:h-80 rounded-lg flex justify-end flex-col px-7 py-6" style="background-image: url(https://pagedone.io/asset/uploads/1707712993.png);"> <h6 class="font-medium text-xl leading-8 text-white mb-4">Architecture Designer</h6> <p class="text-base font-normal text-white/70">where knowledge meets innovation, and success is sculpted through a blend of skill and vision.</p> </div> <div class="block"> <img src="https://pagedone.io/asset/uploads/1707713007.png" alt="Building structure image" class="w-full rounded-lg object-cover"> </div> <div class="block"> <img src="https://pagedone.io/asset/uploads/1707713018.png" alt="Building structure image" class="w-full rounded-lg object-cover"> </div> <div class="block"> <img src="https://pagedone.io/asset/uploads/1707713032.png" alt="Building structure image" class="w-full rounded-lg object-cover"> </div> <div class=" bg-cover rounded-lg max-sm:h-80 flex justify-start flex-col px-7 py-6" style="background-image: url(https://pagedone.io/asset/uploads/1707713043.png);"> <h6 class="font-medium text-xl leading-8 text-white mb-4">Interior Designer</h6> <p class="text-base font-normal text-white/70">Crafting exceptional interiors, where aesthetics meet functionality for spaces that inspire and elevate.</p> </div> <div class="block"> <img src=" https://pagedone.io/asset/uploads/1707713055.png" alt="Building structure image" class="w-full rounded-lg object-cover"> </div> <div class=" bg-cover rounded-lg max-sm:h-80 flex justify-end flex-col px-7 py-6" style="background-image: url(https://pagedone.io/asset/uploads/1707713066.png);"> <h6 class="font-medium text-xl leading-8 text-white mb-4">Business Building</h6> <p class="text-base font-normal text-white/70">Architecting business success through innovation, resilience, and strategic leadership.</p> </div> </div> <button class="w-full rounded-lg py-4 px-6 text-center bg-indigo-100 text-lg font-medium text-indigo-600 transition-all duration-300 hover:text-white hover:bg-indigo-600">Load More</button> </div> </section>