hugo-saasify-theme/layouts/partials/post-card.html

<article class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
    {{ with .Params.featured_image }}
        <a href="{{ $.RelPermalink }}" class="block aspect-w-16 aspect-h-9 overflow-hidden">
            <img 
                src="{{ . }}" 
                alt="{{ $.Title }}" 
                class="object-cover w-full h-full transform hover:scale-105 transition-transform duration-300"
                loading="lazy"
            >
        </a>
    {{ end }}
    
    <div class="p-6">
        <!-- Category -->
        {{ with .Params.categories }}
            <div class="mb-4">
                {{ range first 1 . }}
                    <a href="{{ "/categories/" | relLangURL }}{{ . | urlize }}" 
                       class="inline-block px-3 py-1 text-sm font-medium text-primary-600 bg-primary-50 rounded-full hover:bg-primary-100">
                        {{ . }}
                    </a>
                {{ end }}
            </div>
        {{ end }}

        <!-- Title -->
        <h2 class="text-2xl font-bold mb-3 hover:text-primary-600 transition-colors duration-200">
            <a href="{{ .RelPermalink }}">{{ .Title }}</a>
        </h2>

        <!-- Description -->
        <p class="text-gray-600 mb-4 line-clamp-2">
            {{ with .Description }}
                {{ . }}
            {{ else }}
                {{ .Summary | truncate 160 }}
            {{ end }}
        </p>

        <!-- Author and Date in a cleaner layout -->
        <div class="flex items-center justify-between text-sm text-gray-500 mb-4">
            {{ with .Params.author }}
                <div class="flex items-center">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                    </svg>
                    <span>{{ . }}</span>
                </div>
            {{ end }}

            <div class="flex items-center">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
                <time datetime="{{ .Date.Format "2006-01-02" }}">
                    {{ .Date.Format "Jan 2, 2006" }}
                </time>
            </div>
        </div>

        <!-- Read More link and Reading Time -->
        <div class="flex justify-between items-center">
            <a href="{{ .RelPermalink }}" 
               class="inline-flex items-center text-primary-600 hover:text-primary-700 font-medium">
                Read More
                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                </svg>
            </a>

            <!-- Reading Time -->
            <span class="text-sm text-gray-500 flex items-center">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                </svg>
                <span>{{ .ReadingTime }} min</span>
            </span>
        </div>
    </div>
</article>