style: update recent posts layout to 4 columns matching product categories and fix payload cms text typography styling

components/home/RecentPosts.tsx

@@ -3,7 +3,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { getAllPosts } from '@/lib/blog';
 import { getTranslations } from 'next-intl/server';
-import { Section, Container, Heading, Card, Badge } from '../../components/ui';
+import { Section, Container, Heading } from '../../components/ui';
 
 interface RecentPostsProps {
   locale: string;
@@ -13,7 +13,7 @@ interface RecentPostsProps {
 export default async function RecentPosts({ locale, data }: RecentPostsProps) {
   const t = await getTranslations('Blog');
   const posts = await getAllPosts(locale);
-  const recentPosts = posts.slice(0, 3);
+  const recentPosts = posts.slice(0, 4);
 
   if (recentPosts.length === 0) return null;
 
@@ -21,9 +21,9 @@ export default async function RecentPosts({ locale, data }: RecentPostsProps) {
   const subtitle = data?.subtitle || t('latestNews');
 
   return (
-    <Section className="bg-neutral py-16 md:py-24">
-      <Container>
-        <div className="flex flex-col md:flex-row items-start md:items-end justify-between mb-12 md:mb-16 gap-6">
+    <Section className="bg-neutral-light py-0 md:py-0 lg:py-0">
+      <Container className="py-12 md:py-16">
+        <div className="flex flex-col md:flex-row items-start md:items-end justify-between gap-6">
           <Heading level={2} subtitle={subtitle} className="mb-0 text-primary">
             {title}
           </Heading>
@@ -35,91 +35,73 @@ export default async function RecentPosts({ locale, data }: RecentPostsProps) {
             <span className="ml-2 transition-transform group-hover:translate-x-2">&rarr;</span>
           </Link>
         </div>
-
-        <ul className="grid grid-cols-1 gap-10 list-none p-0 m-0">
-          {recentPosts.map((post, idx) => (
-            <li key={`${post.slug}-${idx}`}>
-              <Link
-                href={`/${locale}/blog/${post.slug}`}
-                className="group block h-full focus:outline-none"
-              >
-                <Card
-                  tag="article"
-                  className="relative flex flex-col justify-end border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-3xl overflow-hidden min-h-[400px] md:min-h-[450px]"
-                >
-                  {post.frontmatter.featuredImage && (
-                    <>
-                      <Image
-                        src={post.frontmatter.featuredImage.split('?')[0]}
-                        alt={post.frontmatter.title}
-                        fill
-                        className="absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
-                        style={{
-                          objectPosition: `${post.frontmatter.focalX ?? 50}% ${post.frontmatter.focalY ?? 50}%`,
-                        }}
-                        sizes="(max-width: 768px) 100vw, 100vw"
-                        loading="lazy"
-                      />
-                      <div className="absolute inset-0 bg-neutral-dark/10 group-hover:bg-neutral-dark/5 transition-colors duration-500" />
-                    </>
-                  )}
-
-                  <div className="relative z-10 w-full p-6 md:p-8 bg-gradient-to-t from-neutral-dark/90 via-neutral-dark/60 to-transparent flex flex-col pt-32">
-                    <div className="flex flex-wrap items-center gap-4 mb-4">
-                      {post.frontmatter.category && (
-                        <Badge variant="accent" className="shadow-md">
-                          {post.frontmatter.category}
-                        </Badge>
-                      )}
-                      {(new Date(post.frontmatter.date) > new Date() ||
-                        post.frontmatter.public === false) && (
-                        <span className="px-2 py-0.5 border border-white/40 text-white/90 rounded uppercase tracking-widest text-[10px] md:text-xs font-bold bg-neutral-dark/40 shadow-sm">
-                          Draft Preview
-                        </span>
-                      )}
-                    </div>
-
-                    <div className="flex items-center gap-3 text-xs md:text-sm font-bold text-white/80 mb-3 tracking-widest uppercase">
-                      <time dateTime={post.frontmatter.date} suppressHydrationWarning>
-                        {new Date(post.frontmatter.date).toLocaleDateString(locale, {
-                          year: 'numeric',
-                          month: 'long',
-                          day: 'numeric',
-                        })}
-                      </time>
-                    </div>
-
-                    <h3 className="text-xl md:text-2xl font-bold text-white mb-4 group-hover:text-accent transition-colors drop-shadow-md leading-tight max-w-4xl">
-                      {post.frontmatter.title}
-                    </h3>
-
-                    <div className="mt-auto flex items-center justify-between border-t border-white/20 pt-6">
-                      <span className="text-accent text-sm md:text-base font-extrabold group-hover:text-white transition-colors">
-                        {t('readMore')}
-                      </span>
-                      <div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-accent group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 backdrop-blur-sm border border-white/20">
-                        <svg
-                          className="w-5 h-5 transition-transform group-hover:translate-x-1"
-                          fill="none"
-                          stroke="currentColor"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M17 8l4 4m0 0l-4 4m4-4H3"
-                          />
-                        </svg>
-                      </div>
-                    </div>
-                  </div>
-                </Card>
-              </Link>
-            </li>
-          ))}
-        </ul>
       </Container>
+
+      <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 m-0 p-0 list-none">
+        {recentPosts.map((post, idx) => (
+          <li key={`${post.slug}-${idx}`} className="block">
+            <Link
+              href={`/${locale}/blog/${post.slug}`}
+              className="group block relative h-[400px] md:h-[500px] lg:h-[650px] overflow-hidden border-b md:border-b-0 md:border-r border-white/10 last:border-0 focus:outline-none"
+            >
+              {post.frontmatter.featuredImage && (
+                <>
+                  <Image
+                    src={post.frontmatter.featuredImage.split('?')[0]}
+                    alt={post.frontmatter.title}
+                    fill
+                    className="object-cover transition-transform duration-1000 group-hover:scale-110"
+                    style={{
+                      objectPosition: `${post.frontmatter.focalX ?? 50}% ${post.frontmatter.focalY ?? 50}%`,
+                    }}
+                    sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 25vw"
+                    loading="lazy"
+                  />
+                  <div className="absolute inset-0 bg-primary-dark/40 group-hover:bg-primary-dark/60 transition-all duration-500" />
+                </>
+              )}
+
+              <div className="absolute inset-0 p-8 md:p-10 flex flex-col justify-end text-white">
+                <div className="mb-4 md:mb-6 transform transition-all duration-500 group-hover:-translate-y-4">
+                  <div className="flex flex-wrap items-center gap-2 mb-4">
+                    {post.frontmatter.category && (
+                      <span className="px-3 py-1 bg-accent text-primary-dark rounded-full text-[10px] md:text-xs font-bold uppercase tracking-wider shadow-sm">
+                        {post.frontmatter.category}
+                      </span>
+                    )}
+                    <time
+                      dateTime={post.frontmatter.date}
+                      suppressHydrationWarning
+                      className="px-3 py-1 text-white/80 text-[10px] md:text-xs font-bold uppercase tracking-widest border border-white/20 rounded-full bg-white/10 backdrop-blur-md"
+                    >
+                      {new Date(post.frontmatter.date).toLocaleDateString(locale, {
+                        year: 'numeric',
+                        month: 'short',
+                        day: 'numeric',
+                      })}
+                    </time>
+                    {(new Date(post.frontmatter.date) > new Date() ||
+                      post.frontmatter.public === false) && (
+                      <span className="px-2 py-0.5 border border-white/40 text-white/90 rounded uppercase tracking-widest text-[10px] md:text-xs font-bold bg-neutral-dark/40 shadow-sm">
+                        Draft Preview
+                      </span>
+                    )}
+                  </div>
+                  <h3 className="text-xl md:text-2xl font-bold mb-2 md:mb-4 leading-tight drop-shadow-md">
+                    {post.frontmatter.title}
+                  </h3>
+                </div>
+                <div className="flex items-center text-accent font-bold tracking-wider uppercase text-xs md:text-xs opacity-100 md:opacity-0 group-hover:opacity-100 transition-all duration-500 delay-100">
+                  {t('readMore')}{' '}
+                  <span className="ml-2 transition-transform group-hover:translate-x-2">
+                    &rarr;
+                  </span>
+                </div>
+              </div>
+            </Link>
+          </li>
+        ))}
+      </ul>
     </Section>
   );
 }